48 lines
1022 B
SCSS
48 lines
1022 B
SCSS
|
@mixin RV-BoxShadow($color) {
|
||
|
|
|
||
|
|
position:relative;
|
||
|
|
float:left;
|
||
|
|
width:40%;
|
||
|
|
margin:2em 10px 4em;
|
||
|
|
background:#fff;
|
||
|
|
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
|
||
|
|
|
||
|
|
&:before, &:after {
|
||
|
|
content:"";
|
||
|
|
position:absolute;
|
||
|
|
z-index:-2;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--simple {
|
||
|
|
box-shadow: 0 0 20px $color;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--raised {
|
||
|
|
&:after {
|
||
|
|
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--liftedCorners {
|
||
|
|
|
||
|
|
&:before, &:after {
|
||
|
|
bottom:15px;
|
||
|
|
left:10px;
|
||
|
|
width:50%;
|
||
|
|
height:20%;
|
||
|
|
max-width:300px;
|
||
|
|
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
|
||
|
|
transform:rotate(-3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:after{
|
||
|
|
right:10px;
|
||
|
|
left:auto;
|
||
|
|
transform:rotate(3deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.RV-BoxShadow {
|
||
|
|
@include RV-BoxShadow(#6b5690);
|
||
|
|
}
|