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

Adapting Layouts to the new bem generator

Browse Source
This commit is contained in:
reverend
2021-03-07 18:47:44 +01:00
parent 0f4ca0c882
commit 7ae8569ff8
8 changed files with 125 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/01_Layouts/fan/_fan.styl
View File

@@ -15,9 +15,9 @@
* but will fill the parent's width
*/
RV-Fan--horizontal(base-height, base-width)
+RV-Block__Modifier--name('horizontal')
+RV-Block--modifier()
flex-direction row
+RV-Element('Base')
//flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
flex-basis 'calc(2 * (%s) * 999 - 100% * 999)' % base-width
@@ -34,7 +34,7 @@ RV-Fan--horizontal(base-height, base-width)
margin var(--_margin)
padding var(--_padding)
box-sizing border-box
+RV-Element('Surface')
height base-height
box-sizing border-box
@@ -46,7 +46,7 @@ RV-Fan--horizontal(base-height, base-width)
* minimal height is given height, will grow with content
*/
RV-Fan--vertical(base-height, base-width)
+RV-Block__Modifier--name('vertical')
+RV-Block--modifier()
flex-direction column
width base-width
min-width initial
@@ -56,6 +56,9 @@ RV-Fan--vertical(base-height, base-width)
box-sizing border-box
min-width initial
min-height base-height
+RV-Element--modifier('fixedHeight')
--wurst wasserererer
/*
@@ -64,7 +67,7 @@ RV-Fan--vertical(base-height, base-width)
* Width of the base and surface in vertical are base-width
*/
RV-Fan--auto(base-height, base-width)
+RV-Block__Modifier--name('auto')
+RV-Block--modifier()
flex-flow row wrap
+RV-Element('Base')
@@ -80,24 +83,24 @@ RV-Fan--auto(base-height, base-width)
* Element Mixins
* ############### */
RV-Fan__Base(base-height, base-width)
+RV-Element--name('Base')
+RV-Element()
box-sizing border-box
flex-basis base-width
flex-shrink 0
flex-grow 0
RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier--name('fixedHeight')
+RV-Element--modifier()
height height
box-sizing border-box
RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier--name('fixedWidth')
+RV-Element--modifier()
max-width width
box-sizing border-box
RV-Fan__Surface(base-height, base-width)
+RV-Element--name('Surface')
+RV-Element()
overflow hidden
box-sizing border-box
height base-height
@@ -112,36 +115,21 @@ RV-Fan(base-height, base-width)
position relative
min-width base-width
/* #########
* CSS-Class
* ######### */
+RV-Block('RV-Fan')
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
--inner-spacing 0px
RV-Fan(--base-height, --base-width)
RV-Fan__Base(--base-height, --base-width)
+RV-Element()
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Surface--fixedWidth(base-width)
RV-Fan__Surface(--base-height, --base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedWidth(--base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedHeight(--base-height)
+RV-Element()
RV-Fan__Base(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--fullWidth(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--vertical(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--horizontal(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--auto(--base-height, --base-width)
RV-Fan--auto(--base-height, --base-width)
RV-Fan--vertical(--base-height, --base-width)
RV-Fan--horizontal(--base-height, --base-width)