Merge pull request #37 from maciejmatu/master

Modify shadow hover behaviour
This commit is contained in:
Rhyne 2017-11-20 15:30:38 -05:00 committed by GitHub
commit 230da3feb3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 21 deletions

View file

@ -11,6 +11,8 @@ button, .paper-btn, [type="button"] {
font-size: 1rem;
padding: .75rem .75rem;
cursor: pointer;
.shadow;
.shadow-hover;
&.btn-large {
.shadow-large;
font-size:2rem;
@ -25,9 +27,6 @@ button, .paper-btn, [type="button"] {
display: block;
width: 100%;
}
&:hover{
.shadow-hover;
}
&.disabled, &[disabled]{
.disabled;
}

View file

@ -1,15 +1,12 @@
.card {
.shadow;
.shadow-hover;
position: relative;
display: flex;
flex-direction: column;
word-wrap: break-word;
border: 2px solid @muted-light;
&:hover {
.shadow-hover;
}
border: 2px solid @muted-light;
.card-header,
.card-footer {

View file

@ -1,23 +1,32 @@
@shadow-color-regular: hsla(0,0%,0%,.2);
@shadow-color-hover: hsla(0,0%,0%,.3);
@shadow-small: 10px 19px 17px -13px @shadow-color-regular;
@shadow-regular: 15px 28px 25px -18px @shadow-color-regular;
@shadow-large: 20px 38px 34px -26px @shadow-color-regular;
@shadow-hover: 2px 8px 8px -5px @shadow-color-hover;
.shadow {
-webkit-box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
-moz-box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
transition:all .5s ease;
-webkit-box-shadow: @shadow-regular;
-moz-box-shadow: @shadow-regular;
box-shadow: @shadow-regular;
transition: all .5s ease;
&.shadow-large {
-webkit-box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
-moz-box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
-webkit-box-shadow: @shadow-large;
-moz-box-shadow: @shadow-large;
box-shadow: @shadow-large;
}
&.shadow-small {
-webkit-box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
-moz-box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
-webkit-box-shadow: @shadow-small;
-moz-box-shadow: @shadow-small;
box-shadow: @shadow-small;
}
&.shadow-hover {
&:hover{
-webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
-moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
-webkit-box-shadow: @shadow-hover;
-moz-box-shadow: @shadow-hover;
box-shadow: @shadow-hover;
transform: translate(0, 2px);
}
}
}