papercss/src/shadows.scss
2017-12-18 23:23:30 +01:00

39 lines
1.1 KiB
SCSS

$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: $shadow-regular;
-moz-box-shadow: $shadow-regular;
box-shadow: $shadow-regular;
transition: all .5s ease;
&.shadow-large {
-webkit-box-shadow: $shadow-large;
-moz-box-shadow: $shadow-large;
box-shadow: $shadow-large;
}
&.shadow-small {
-webkit-box-shadow: $shadow-small;
-moz-box-shadow: $shadow-small;
box-shadow: $shadow-small;
}
&.shadow-hover {
&:hover{
-webkit-box-shadow: $shadow-hover;
-moz-box-shadow: $shadow-hover;
box-shadow: $shadow-hover;
transform: translate(0, 2px);
}
}
}
.child-shadows > * {
.shadow;
}
.child-shadows-hover > * {
.shadow;
.shadow-hover;
}