Fan is now using 9999 hack, horizontal breakpoint usage

This commit is contained in:
reverend 2021-03-06 20:43:29 +01:00
parent bbcdea9e42
commit a1b95dd632
3 changed files with 21 additions and 43 deletions

View File

@ -18,9 +18,17 @@ RV-Fan--horizontal(base-height, base-width)
+RV-Block__Modifier--name('horizontal') +RV-Block__Modifier--name('horizontal')
flex-direction row 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
box-sizing border-box
flex-shrink 9999
flex-grow 1
max-width base-width
+RV-Element('Surface') +RV-Element('Surface')
min-width calc_width('calc(%s * 1.5)' % base-width)
height calc_height(base-height) height calc_height(base-height)
flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
/* /*
* Base above, Surfce below * Base above, Surfce below
@ -30,7 +38,7 @@ RV-Fan--horizontal(base-height, base-width)
RV-Fan--vertical(base-height, base-width) RV-Fan--vertical(base-height, base-width)
+RV-Block__Modifier--name('vertical') +RV-Block__Modifier--name('vertical')
flex-direction column flex-direction column
width max-content width base-width
min-width initial min-width initial
+RV-Element('Surface') +RV-Element('Surface')
@ -47,32 +55,13 @@ RV-Fan--vertical(base-height, base-width)
RV-Fan--auto(base-height, base-width) RV-Fan--auto(base-height, base-width)
+RV-Block__Modifier--name('auto') +RV-Block__Modifier--name('auto')
flex-flow row wrap flex-flow row wrap
min-width initial
+RV-Element('Surface')
min-width calc_width('calc(%s)' % base-width)
width calc_width('calc(100% - %s)' % base-width)
height calc_height(base-height)
flex-grow unset
flex-basis unset
/*
* Also initialy horizontal, changes to vertical when
* the width of the parent is less than 2 x base-width
* Width of the base and the surface in vertical mode
* are 100% of the parent width
*/
RV-Fan--fullWidth(base-height, base-width)
+RV-Block__Modifier--name('fullWidth')
RV-Fan--auto(base-height, base-width)
min-width min-content
+RV-Element('Base') +RV-Element('Base')
flex-grow 1 flex-grow 1
+RV-Element('Surface') +RV-Element('Surface')
flex-grow 1 height calc_height(base-height)
min-width calc_width('calc(%s * 1.5)' % base-width) flex-grow 99999
/* ############### /* ###############
@ -81,10 +70,10 @@ RV-Fan--fullWidth(base-height, base-width)
RV-Fan__Base(base-height, base-width) RV-Fan__Base(base-height, base-width)
+RV-Element--name('Base') +RV-Element--name('Base')
height calc_height(base-height) height calc_height(base-height)
width calc_width(base-width)
flex-grow 0 flex-basis calc_width(base-width)
flex-shrink 0 flex-shrink 0
flex-basis auto flex-grow 0
RV-Fan__Surface--fixedHeight(height) RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier--name('fixedHeight') +RV-Element__Modifier--name('fixedHeight')
@ -98,20 +87,16 @@ RV-Fan__Surface(base-height, base-width)
+RV-Element--name('Surface') +RV-Element--name('Surface')
overflow hidden overflow hidden
height calc_height(base-height) height calc_height(base-height)
width calc_width()
min-width calc_width('calc(%s * 1.5)' % base-width)
flex-grow 20
flex-shrink 0
flex-basis calc_width(base-width) flex-basis calc_width(base-width)
flex-grow 1
/* ############ /* ############
* Block Mixin * Block Mixin
* ############ */ * ############ */
RV-Fan() RV-Fan(base-height, base-width)
display flex display flex
position relative position relative
min-width min-content min-width base-width
/* ######### /* #########
* CSS-Class * CSS-Class
@ -124,7 +109,7 @@ RV-Fan()
--inner-spacing 0px --inner-spacing 0px
RV-Fan() RV-Fan(--base-height, --base-width)
+RV-Element() +RV-Element()
RV-Fan__Surface(--base-height, --base-width) RV-Fan__Surface(--base-height, --base-width)

View File

@ -18,13 +18,6 @@
"context": { "context": {
"modifier": "--auto" "modifier": "--auto"
} }
},
{
"name": "FullWidth",
"context": {
"modifier": "--fullWidth"
}
} }
] ]
} }

View File

@ -6,7 +6,7 @@
}) })
RV-Fan() RV-Fan(--image-height, --image-width)
RV-BoxShadow() RV-BoxShadow()
RV-BoxShadow--drop(--shadow-color) RV-BoxShadow--drop(--shadow-color)