Box Shadow styles
This commit is contained in:
parent
381e3bcca0
commit
a32c88fc01
48
components/02_Styles/boxShadow/_boxShadow.scss
Normal file
48
components/02_Styles/boxShadow/_boxShadow.scss
Normal file
@ -0,0 +1,48 @@
|
||||
@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);
|
||||
}
|
11
components/02_Styles/boxShadow/boxShadow.hbs
Normal file
11
components/02_Styles/boxShadow/boxShadow.hbs
Normal file
@ -0,0 +1,11 @@
|
||||
<div class="RV-BoxShadow--raised" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
|
||||
<img src="https://via.placeholder.com/300/7242af"/>
|
||||
</div>
|
||||
|
||||
<div class="RV-BoxShadow--simple" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
|
||||
<img src="https://via.placeholder.com/300/7242af"/>
|
||||
</div>
|
||||
|
||||
<div class="RV-BoxShadow RV-BoxShadow--liftedCorners" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
|
||||
<img src="https://via.placeholder.com/300/7242af"/>
|
||||
</div>
|
1
components/02_Styles/boxShadow/boxShadow.json
Normal file
1
components/02_Styles/boxShadow/boxShadow.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
Loading…
Reference in New Issue
Block a user