mirror of
https://github.com/papercss/papercss
synced 2024-06-10 18:03:27 +02:00
Merge pull request #37 from maciejmatu/master
Modify shadow hover behaviour
This commit is contained in:
commit
230da3feb3
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue