Fan is now using 9999 hack, horizontal breakpoint usage
This commit is contained in:
parent
bbcdea9e42
commit
a1b95dd632
@ -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)
|
||||||
|
|
||||||
|
@ -18,13 +18,6 @@
|
|||||||
"context": {
|
"context": {
|
||||||
"modifier": "--auto"
|
"modifier": "--auto"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "FullWidth",
|
|
||||||
"context": {
|
|
||||||
"modifier": "--fullWidth"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
}
|
}
|
@ -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)
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user