From 85923bd33804c6bfea0ea390abc1a3b928b4a1a0 Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 7 Mar 2021 20:38:25 +0100 Subject: [PATCH] Adapting Styles to new BEMGenerator --- .../02_Styles/boxShadow/_boxShadow.styl | 35 +++++++----------- .../02_Styles/elementList/_elementList.styl | 7 ++-- components/02_Styles/iconized/_iconized.styl | 36 ++++++++----------- components/02_Styles/spacing/_spacing.styl | 30 +++++++--------- 4 files changed, 41 insertions(+), 67 deletions(-) diff --git a/components/02_Styles/boxShadow/_boxShadow.styl b/components/02_Styles/boxShadow/_boxShadow.styl index 1c84a8a..11eb754 100644 --- a/components/02_Styles/boxShadow/_boxShadow.styl +++ b/components/02_Styles/boxShadow/_boxShadow.styl @@ -6,11 +6,11 @@ * Just a simple box shadow, surrounding the box */ RV-BoxShadow--simple(color) - +RV-Block__Modifier--name('simple') + +RV-Block--modifier() box-shadow 0 0 10px 3px color RV-BoxShadow--solid(color) - +RV-Block__Modifier--name('solid') + +RV-Block--modifier() border 8px solid color border-radius 14px padding 8px @@ -21,7 +21,7 @@ RV-BoxShadow--solid(color) * box, which creates an levitation effect */ 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; /* @@ -34,7 +34,7 @@ RV-BoxShadow--levitating(color) * if used in the same selector / var scope */ RV-BoxShadow--stacked(color) - +RV-Block__Modifier--name('stacked') + +RV-Block--modifier() --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) @@ -44,7 +44,7 @@ RV-BoxShadow--stacked(color) * a piece of paper */ RV-BoxShadow--liftedCorners(color) - +RV-Block__Modifier--name('liftedCorners') + +RV-Block--modifier() &:before, &:after bottom 15px left 10px @@ -62,7 +62,7 @@ RV-BoxShadow--liftedCorners(color) * A suttle drop shadow in the middle of the element */ RV-BoxShadow--drop(color) - +RV-Block__Modifier--name('drop') + +RV-Block--modifier() position relative box-shadow 0 1px 4px color @@ -92,20 +92,9 @@ RV-BoxShadow() 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) - - +RV-Block__Modifier() - RV-BoxShadow--solid(--color) \ No newline at end of file + RV-BoxShadow--simple(--color) + RV-BoxShadow--liftedCorners(--color) + RV-BoxShadow--levitating(--color) + RV-BoxShadow--stacked(--color) + RV-BoxShadow--drop(--color) + RV-BoxShadow--solid(--color) \ No newline at end of file diff --git a/components/02_Styles/elementList/_elementList.styl b/components/02_Styles/elementList/_elementList.styl index 5c159aa..680ffae 100644 --- a/components/02_Styles/elementList/_elementList.styl +++ b/components/02_Styles/elementList/_elementList.styl @@ -1,5 +1,5 @@ RV-ElementList__Item() - +RV-Element--name('Item') + +RV-Element() RV-FlexRow__Item() RV-ElementList(break_width=500px) @@ -10,6 +10,5 @@ RV-ElementList(break_width=500px) +RV-Block('RV-ElementList') RV-ElementList() - - +RV-Element() - RV-ElementList__Item() \ No newline at end of file + + RV-ElementList__Item() \ No newline at end of file diff --git a/components/02_Styles/iconized/_iconized.styl b/components/02_Styles/iconized/_iconized.styl index 27216d8..6ca02ef 100644 --- a/components/02_Styles/iconized/_iconized.styl +++ b/components/02_Styles/iconized/_iconized.styl @@ -1,5 +1,5 @@ RV-Iconized--extraSmall() - +RV-Block__Modifier--name('extraSmall') + +RV-Block--modifier() +RV-Element('Icon') width 1em height 1em @@ -7,7 +7,7 @@ RV-Iconized--extraSmall() top .125em RV-Iconized--small() - +RV-Block__Modifier('small') + +RV-Block--modifier() top -.25em +RV-Element('Icon') width 1.5em @@ -16,7 +16,7 @@ RV-Iconized--small() top .45em RV-Iconized--medium() - +RV-Block__Modifier--name('medium') + +RV-Block--modifier() top -.5em +RV-Element('Icon') width 2em @@ -25,7 +25,7 @@ RV-Iconized--medium() top .625em RV-Iconized--large() - +RV-Block__Modifier--name('large') + +RV-Block--modifier() top -1.03073em +RV-Element('Icon') width 3em @@ -34,7 +34,7 @@ RV-Iconized--large() top 1.15573em RV-Iconized--huge() - +RV-Block__Modifier--name('huge') + +RV-Block--modifier() top -2.05em +RV-Element('Icon') width 5em @@ -43,7 +43,7 @@ RV-Iconized--huge() top 2.175em RV-Iconized__Icon() - +RV-Element--name('Icon') + +RV-Element() RV-Reset() RV-Iconized() @@ -51,20 +51,12 @@ RV-Iconized() +RV-Block('RV-Iconized') - +RV-Element() - RV-Iconized__Icon() + RV-Iconized() + + RV-Iconized__Icon() - +RV-Block__Modifier() - RV-Iconized--extraSmall() - - +RV-Block__Modifier() - RV-Iconized--small() - - +RV-Block__Modifier() - RV-Iconized--medium() - - +RV-Block__Modifier() - RV-Iconized--large() - - +RV-Block__Modifier() - RV-Iconized--huge() \ No newline at end of file + RV-Iconized--extraSmall() + RV-Iconized--small() + RV-Iconized--medium() + RV-Iconized--large() + RV-Iconized--huge() \ No newline at end of file diff --git a/components/02_Styles/spacing/_spacing.styl b/components/02_Styles/spacing/_spacing.styl index 9a2acf4..4e059d4 100644 --- a/components/02_Styles/spacing/_spacing.styl +++ b/components/02_Styles/spacing/_spacing.styl @@ -1,5 +1,5 @@ RV-Spacing__Outer--small() - +RV-Element__Modifier--name('small') + +RV-Element--modifier() --outer-spacing spacing-small margin var(--outer-spacing) * > { @@ -7,7 +7,7 @@ RV-Spacing__Outer--small() } RV-Spacing__Outer--medium() - +RV-Element__Modifier--name('medium') + +RV-Element--modifier() --outer-spacing spacing-medium margin var(--outer-spacing) * > { @@ -15,14 +15,14 @@ RV-Spacing__Outer--medium() } RV-Spacing__Outer--large() - +RV-Element__Modifier--name('large') + +RV-Element--modifier() --outer-spacing spacing-large margin var(--outer-spacing) * > { --outer-spacing 0 } RV-Spacing__Inner--small() - +RV-Element__Modifier--name('small') + +RV-Element--modifier() --inner-spacing spacing-small padding var(--inner-spacing) gap var(--inner-spacing) @@ -32,7 +32,7 @@ RV-Spacing__Inner--small() } RV-Spacing__Inner--medium() - +RV-Element__Modifier--name('medium') + +RV-Element--modifier() --inner-spacing spacing-medium padding var(--inner-spacing) gap var(--inner-spacing) @@ -42,7 +42,7 @@ RV-Spacing__Inner--medium() } RV-Spacing__Inner--large() - +RV-Element__Modifier--name('large') + +RV-Element--modifier() --inner-spacing spacing-large padding var(--inner-spacing) gap var(--inner-spacing) @@ -53,17 +53,11 @@ RV-Spacing__Inner--large() +RV-Block('RV-Spacing') +RV-Element('Outer') - +RV-Element__Modifier() - RV-Spacing__Outer--small() - +RV-Element__Modifier() - RV-Spacing__Outer--medium() - +RV-Element__Modifier() - RV-Spacing__Outer--large() + RV-Spacing__Outer--small() + RV-Spacing__Outer--medium() + RV-Spacing__Outer--large() +RV-Element('Inner') - +RV-Element__Modifier() - RV-Spacing__Inner--small() - +RV-Element__Modifier() - RV-Spacing__Inner--medium() - +RV-Element__Modifier() - RV-Spacing__Inner--large() \ No newline at end of file + RV-Spacing__Inner--small() + RV-Spacing__Inner--medium() + RV-Spacing__Inner--large() \ No newline at end of file