Adapting Styles to new BEMGenerator
This commit is contained in:
parent
7ae8569ff8
commit
85923bd338
@ -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-Block__Modifier()
|
|
||||||
RV-BoxShadow--liftedCorners(--color)
|
RV-BoxShadow--liftedCorners(--color)
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
|
||||||
RV-BoxShadow--levitating(--color)
|
RV-BoxShadow--levitating(--color)
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
|
||||||
RV-BoxShadow--stacked(--color)
|
RV-BoxShadow--stacked(--color)
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
|
||||||
RV-BoxShadow--drop(--color)
|
RV-BoxShadow--drop(--color)
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
|
||||||
RV-BoxShadow--solid(--color)
|
RV-BoxShadow--solid(--color)
|
@ -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)
|
||||||
@ -11,5 +11,4 @@ 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()
|
@ -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-Block__Modifier()
|
|
||||||
RV-Iconized--small()
|
RV-Iconized--small()
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
|
||||||
RV-Iconized--medium()
|
RV-Iconized--medium()
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
|
||||||
RV-Iconized--large()
|
RV-Iconized--large()
|
||||||
|
|
||||||
+RV-Block__Modifier()
|
|
||||||
RV-Iconized--huge()
|
RV-Iconized--huge()
|
@ -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-Element__Modifier()
|
|
||||||
RV-Spacing__Outer--medium()
|
RV-Spacing__Outer--medium()
|
||||||
+RV-Element__Modifier()
|
|
||||||
RV-Spacing__Outer--large()
|
RV-Spacing__Outer--large()
|
||||||
|
|
||||||
+RV-Element('Inner')
|
+RV-Element('Inner')
|
||||||
+RV-Element__Modifier()
|
|
||||||
RV-Spacing__Inner--small()
|
RV-Spacing__Inner--small()
|
||||||
+RV-Element__Modifier()
|
|
||||||
RV-Spacing__Inner--medium()
|
RV-Spacing__Inner--medium()
|
||||||
+RV-Element__Modifier()
|
|
||||||
RV-Spacing__Inner--large()
|
RV-Spacing__Inner--large()
|
Loading…
Reference in New Issue
Block a user