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

Renaming Dicts according to atomic design

Browse Source
This commit is contained in:
reverend
2021-01-17 22:54:33 +01:00
parent 4ac61a8224
commit 64b21a2c81
49 changed files with 410 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
components/02_Styles/boxShadow/_boxShadow.styl
View File

@@ -1,102 +0,0 @@
/*
* A collection of Box Shadows
*/
/*
* Just a simple box shadow, surrounding the box
*/
RV-BoxShadow--simple(color)
+RV-Block__Modifier--name('simple')
box-shadow 0 0 10px 3px color
/*
* Hhuge shadow under the bottom of the
* box, which creates an levitation effect
*/
RV-BoxShadow--levitating(color)
+RV-Block__Modifier--name('levitating')
box-shadow: color 0px 1px 1px 0px inset, color 0px 40px 80px -15px, color 0px 30px 60px -30px;
/*
* Stacked, retro, synth wave style
* shadows unterneath the box
* To change the color using CSS vars
* you have to set the separte r, g, b values
* --color: 107, 86, 144
* This may cause other types of shadow to break
* if used in the same selector / var scope
*/
RV-BoxShadow--stacked(color)
+RV-Block__Modifier--name('stacked')
--color red(@--color), green(@--color), blue(@--color)
box-shadow: 'rgba(%s, 0.4) 0px 5px, rgba(%s, 0.3) 0px 10px, rgba(%s, 0.2) 0px 15px, rgba(%s, 0.1) 0px 20px, rgba(%s, 0.05) 0px 25px' % (color color color color color)
/*
* Two shadows at the lower left and right of the box
* to create the effect the corners are lifted like
* a piece of paper
*/
RV-BoxShadow--liftedCorners(color)
+RV-Block__Modifier--name('liftedCorners')
&:before, &:after
bottom 15px
left 10px
width 50%
height 20%
box-shadow 0 15px 8px color
transform rotate(-5deg)
&:after
right 10px
left auto
transform rotate(5deg)
/*
* A suttle drop shadow in the middle of the element
*/
RV-BoxShadow--drop(color)
+RV-Block__Modifier--name('drop')
position relative
box-shadow 0 1px 4px color
&:after
box-shadow 0 0 40px color
bottom 0px
left 10%
right 10%
width 80%
height 50%
border-radius 100%
RV-BoxShadow()
position relative
float left
background-color white
&:before, &:after
content ''
position absolute
z-index -2
+RV-Block('RV-BoxShadow')
RV-CSSParameter({
color: #6b5690
})
RV-BoxShadow()
+RV-Block__Modifier()
RV-BoxShadow--simple(color)
+RV-Block__Modifier()
RV-BoxShadow--liftedCorners(color)
+RV-Block__Modifier()
RV-BoxShadow--levitating(color)
+RV-Block__Modifier()
RV-BoxShadow--stacked(color)
+RV-Block__Modifier()
RV-BoxShadow--drop(color)

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

@@ -1,18 +0,0 @@
<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-BoxShadow RV-BoxShadow--liftedCorners" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<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 class="RV-BoxShadow RV-BoxShadow--stacked" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
<img src="https://via.placeholder.com/300/7242af"/>
</div>
<div class="RV-BoxShadow RV-BoxShadow--drop" 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
View File

@@ -1 +0,0 @@
{}