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

Adapting Styles to new BEMGenerator

Browse Source
This commit is contained in:
reverend 2021-03-07 20:38:25 +01:00
parent 7ae8569ff8
commit 85923bd338
4 changed files with 41 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,11 +6,11 @@
* Just a simple box shadow, surrounding the box * Just a simple box shadow, surrounding the box
*/ */
RV-BoxShadow--simple(color) RV-BoxShadow--simple(color)
+RV-Block__Modifier--name('simple') +RV-Block--modifier()
box-shadow 0 0 10px 3px color box-shadow 0 0 10px 3px color
RV-BoxShadow--solid(color) RV-BoxShadow--solid(color)
+RV-Block__Modifier--name('solid') +RV-Block--modifier()
border 8px solid color border 8px solid color
border-radius 14px border-radius 14px
padding 8px padding 8px
@ -21,7 +21,7 @@ RV-BoxShadow--solid(color)
* box, which creates an levitation effect * box, which creates an levitation effect
*/ */
RV-BoxShadow--levitating(color) RV-BoxShadow--levitating(color)
+RV-Block__Modifier--name('levitating') +RV-Block--modifier()
box-shadow: color 0px 1px 1px 0px inset, color 0px 40px 80px -15px, color 0px 30px 60px -30px; box-shadow: color 0px 1px 1px 0px inset, color 0px 40px 80px -15px, color 0px 30px 60px -30px;
/* /*
@ -34,7 +34,7 @@ RV-BoxShadow--levitating(color)
* if used in the same selector / var scope * if used in the same selector / var scope
*/ */
RV-BoxShadow--stacked(color) RV-BoxShadow--stacked(color)
+RV-Block__Modifier--name('stacked') +RV-Block--modifier()
--color red(@--color), green(@--color), blue(@--color) --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) 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)
@ -44,7 +44,7 @@ RV-BoxShadow--stacked(color)
* a piece of paper * a piece of paper
*/ */
RV-BoxShadow--liftedCorners(color) RV-BoxShadow--liftedCorners(color)
+RV-Block__Modifier--name('liftedCorners') +RV-Block--modifier()
&:before, &:after &:before, &:after
bottom 15px bottom 15px
left 10px left 10px
@ -62,7 +62,7 @@ RV-BoxShadow--liftedCorners(color)
* A suttle drop shadow in the middle of the element * A suttle drop shadow in the middle of the element
*/ */
RV-BoxShadow--drop(color) RV-BoxShadow--drop(color)
+RV-Block__Modifier--name('drop') +RV-Block--modifier()
position relative position relative
box-shadow 0 1px 4px color box-shadow 0 1px 4px color
@ -92,20 +92,9 @@ RV-BoxShadow()
RV-BoxShadow() RV-BoxShadow()
+RV-Block__Modifier() RV-BoxShadow--simple(--color)
RV-BoxShadow--simple(--color) RV-BoxShadow--liftedCorners(--color)
RV-BoxShadow--levitating(--color)
+RV-Block__Modifier() RV-BoxShadow--stacked(--color)
RV-BoxShadow--liftedCorners(--color) RV-BoxShadow--drop(--color)
RV-BoxShadow--solid(--color)
+RV-Block__Modifier()
RV-BoxShadow--levitating(--color)
+RV-Block__Modifier()
RV-BoxShadow--stacked(--color)
+RV-Block__Modifier()
RV-BoxShadow--drop(--color)
+RV-Block__Modifier()
RV-BoxShadow--solid(--color)

7
components/02_Styles/elementList/_elementList.styl
View File

@ -1,5 +1,5 @@
RV-ElementList__Item() RV-ElementList__Item()
+RV-Element--name('Item') +RV-Element()
RV-FlexRow__Item() RV-FlexRow__Item()
RV-ElementList(break_width=500px) RV-ElementList(break_width=500px)
@ -10,6 +10,5 @@ RV-ElementList(break_width=500px)
+RV-Block('RV-ElementList') +RV-Block('RV-ElementList')
RV-ElementList() RV-ElementList()
+RV-Element() RV-ElementList__Item()
RV-ElementList__Item()

36
components/02_Styles/iconized/_iconized.styl
View File

@ -1,5 +1,5 @@
RV-Iconized--extraSmall() RV-Iconized--extraSmall()
+RV-Block__Modifier--name('extraSmall') +RV-Block--modifier()
+RV-Element('Icon') +RV-Element('Icon')
width 1em width 1em
height 1em height 1em
@ -7,7 +7,7 @@ RV-Iconized--extraSmall()
top .125em top .125em
RV-Iconized--small() RV-Iconized--small()
+RV-Block__Modifier('small') +RV-Block--modifier()
top -.25em top -.25em
+RV-Element('Icon') +RV-Element('Icon')
width 1.5em width 1.5em
@ -16,7 +16,7 @@ RV-Iconized--small()
top .45em top .45em
RV-Iconized--medium() RV-Iconized--medium()
+RV-Block__Modifier--name('medium') +RV-Block--modifier()
top -.5em top -.5em
+RV-Element('Icon') +RV-Element('Icon')
width 2em width 2em
@ -25,7 +25,7 @@ RV-Iconized--medium()
top .625em top .625em
RV-Iconized--large() RV-Iconized--large()
+RV-Block__Modifier--name('large') +RV-Block--modifier()
top -1.03073em top -1.03073em
+RV-Element('Icon') +RV-Element('Icon')
width 3em width 3em
@ -34,7 +34,7 @@ RV-Iconized--large()
top 1.15573em top 1.15573em
RV-Iconized--huge() RV-Iconized--huge()
+RV-Block__Modifier--name('huge') +RV-Block--modifier()
top -2.05em top -2.05em
+RV-Element('Icon') +RV-Element('Icon')
width 5em width 5em
@ -43,7 +43,7 @@ RV-Iconized--huge()
top 2.175em top 2.175em
RV-Iconized__Icon() RV-Iconized__Icon()
+RV-Element--name('Icon') +RV-Element()
RV-Reset() RV-Reset()
RV-Iconized() RV-Iconized()
@ -51,20 +51,12 @@ RV-Iconized()
+RV-Block('RV-Iconized') +RV-Block('RV-Iconized')
+RV-Element() RV-Iconized()
RV-Iconized__Icon()
RV-Iconized__Icon()
+RV-Block__Modifier() RV-Iconized--extraSmall()
RV-Iconized--extraSmall() RV-Iconized--small()
RV-Iconized--medium()
+RV-Block__Modifier() RV-Iconized--large()
RV-Iconized--small() RV-Iconized--huge()
+RV-Block__Modifier()
RV-Iconized--medium()
+RV-Block__Modifier()
RV-Iconized--large()
+RV-Block__Modifier()
RV-Iconized--huge()

30
components/02_Styles/spacing/_spacing.styl
View File

@ -1,5 +1,5 @@
RV-Spacing__Outer--small() RV-Spacing__Outer--small()
+RV-Element__Modifier--name('small') +RV-Element--modifier()
--outer-spacing spacing-small --outer-spacing spacing-small
margin var(--outer-spacing) margin var(--outer-spacing)
* > { * > {
@ -7,7 +7,7 @@ RV-Spacing__Outer--small()
} }
RV-Spacing__Outer--medium() RV-Spacing__Outer--medium()
+RV-Element__Modifier--name('medium') +RV-Element--modifier()
--outer-spacing spacing-medium --outer-spacing spacing-medium
margin var(--outer-spacing) margin var(--outer-spacing)
* > { * > {
@ -15,14 +15,14 @@ RV-Spacing__Outer--medium()
} }
RV-Spacing__Outer--large() RV-Spacing__Outer--large()
+RV-Element__Modifier--name('large') +RV-Element--modifier()
--outer-spacing spacing-large --outer-spacing spacing-large
margin var(--outer-spacing) margin var(--outer-spacing)
* > { * > {
--outer-spacing 0 --outer-spacing 0
} }
RV-Spacing__Inner--small() RV-Spacing__Inner--small()
+RV-Element__Modifier--name('small') +RV-Element--modifier()
--inner-spacing spacing-small --inner-spacing spacing-small
padding var(--inner-spacing) padding var(--inner-spacing)
gap var(--inner-spacing) gap var(--inner-spacing)
@ -32,7 +32,7 @@ RV-Spacing__Inner--small()
} }
RV-Spacing__Inner--medium() RV-Spacing__Inner--medium()
+RV-Element__Modifier--name('medium') +RV-Element--modifier()
--inner-spacing spacing-medium --inner-spacing spacing-medium
padding var(--inner-spacing) padding var(--inner-spacing)
gap var(--inner-spacing) gap var(--inner-spacing)
@ -42,7 +42,7 @@ RV-Spacing__Inner--medium()
} }
RV-Spacing__Inner--large() RV-Spacing__Inner--large()
+RV-Element__Modifier--name('large') +RV-Element--modifier()
--inner-spacing spacing-large --inner-spacing spacing-large
padding var(--inner-spacing) padding var(--inner-spacing)
gap var(--inner-spacing) gap var(--inner-spacing)
@ -53,17 +53,11 @@ RV-Spacing__Inner--large()
+RV-Block('RV-Spacing') +RV-Block('RV-Spacing')
+RV-Element('Outer') +RV-Element('Outer')
+RV-Element__Modifier() RV-Spacing__Outer--small()
RV-Spacing__Outer--small() RV-Spacing__Outer--medium()
+RV-Element__Modifier() RV-Spacing__Outer--large()
RV-Spacing__Outer--medium()
+RV-Element__Modifier()
RV-Spacing__Outer--large()
+RV-Element('Inner') +RV-Element('Inner')
+RV-Element__Modifier() RV-Spacing__Inner--small()
RV-Spacing__Inner--small() RV-Spacing__Inner--medium()
+RV-Element__Modifier() RV-Spacing__Inner--large()
RV-Spacing__Inner--medium()
+RV-Element__Modifier()
RV-Spacing__Inner--large()