reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Using Grid for displaying different types of shadows

Browse Source
This commit is contained in:
reverend 2021-01-18 21:17:35 +01:00
parent 563232b2a3
commit 6cf7bc685f
1 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/02_Styles/boxShadow/boxShadow.hbs
View File

@ -1,18 +1,38 @@
<div class="RV-BoxShadow 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-FlexGrid RV-FlexGrid--fixedSize RV-Spacing__Inner--medium">
<div class="RV-BoxShadow RV-BoxShadow--liftedCorners" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<div class="RV-FlexGrid__Item">
<div class="RV-BoxShadow RV-BoxShadow--simple">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
<div class="RV-BoxShadow RV-BoxShadow--levitating" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
</div>
</div>
<div class="RV-BoxShadow RV-BoxShadow--stacked" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<div class="RV-FlexGrid__Item">
<div class="RV-BoxShadow RV-BoxShadow--liftedCorners">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
</div>
</div>
<div class="RV-BoxShadow RV-BoxShadow--drop" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<div class="RV-FlexGrid__Item">
<div class="RV-BoxShadow RV-BoxShadow--levitating">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
</div>
<div class="RV-FlexGrid__Item">
<div class="RV-BoxShadow RV-BoxShadow--stacked">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
</div>
<div class="RV-FlexGrid__Item">
<div class="RV-BoxShadow RV-BoxShadow--drop">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
</div>
<div class="RV-FlexGrid__Item">
<div class="RV-BoxShadow RV-BoxShadow--solid">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
</div>
</div>