147 lines
3.4 KiB
Stylus
147 lines
3.4 KiB
Stylus
/*
|
|
* A Fan is a layout that consists of two parts:
|
|
* The base and the surface, named after a hand fan.
|
|
* The base is always left handed, where as the surface
|
|
* can be right of the base or below.
|
|
*/
|
|
|
|
/* ######################
|
|
* Block Modifiers Mixins
|
|
* ###################### */
|
|
|
|
/*
|
|
* Base on the left, Surface on the right
|
|
* Base is fixed, given size, Surface is given height
|
|
* but will fill the parent's width
|
|
*/
|
|
RV-Fan--horizontal(base-height, base-width)
|
|
+RV-Block__Modifier--name('horizontal')
|
|
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
|
|
|
|
margin 0
|
|
padding 0
|
|
--_padding var(--inner-spacing)
|
|
--_margin var(--outer-spacing)
|
|
*
|
|
margin var(--_margin)
|
|
padding var(--_padding)
|
|
box-sizing border-box
|
|
|
|
+RV-Element('Surface')
|
|
height base-height
|
|
box-sizing border-box
|
|
flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
|
|
|
|
/*
|
|
* Base above, Surfce below
|
|
* Base is fixed, given size, base is given width
|
|
* minimal height is given height, will grow with content
|
|
*/
|
|
RV-Fan--vertical(base-height, base-width)
|
|
+RV-Block__Modifier--name('vertical')
|
|
flex-direction column
|
|
width base-width
|
|
min-width initial
|
|
|
|
+RV-Element('Surface')
|
|
width base-width
|
|
box-sizing border-box
|
|
min-width initial
|
|
min-height base-height
|
|
|
|
|
|
/*
|
|
* Initialy horizontal, changes to vertical when
|
|
* the width of the parent is less than 2 x 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')
|
|
flex-flow row wrap
|
|
|
|
+RV-Element('Base')
|
|
flex-grow 1
|
|
|
|
+RV-Element('Surface')
|
|
height base-height
|
|
box-sizing border-box
|
|
flex-grow 99999
|
|
|
|
|
|
/* ###############
|
|
* Element Mixins
|
|
* ############### */
|
|
RV-Fan__Base(base-height, base-width)
|
|
+RV-Element--name('Base')
|
|
box-sizing border-box
|
|
flex-basis base-width
|
|
flex-shrink 0
|
|
flex-grow 0
|
|
|
|
RV-Fan__Surface--fixedHeight(height)
|
|
+RV-Element__Modifier--name('fixedHeight')
|
|
height height
|
|
box-sizing border-box
|
|
|
|
RV-Fan__Surface--fixedWidth(width)
|
|
+RV-Element__Modifier--name('fixedWidth')
|
|
max-width width
|
|
box-sizing border-box
|
|
|
|
RV-Fan__Surface(base-height, base-width)
|
|
+RV-Element--name('Surface')
|
|
overflow hidden
|
|
box-sizing border-box
|
|
height base-height
|
|
flex-basis base-width
|
|
flex-grow 1
|
|
|
|
/* ############
|
|
* Block Mixin
|
|
* ############ */
|
|
RV-Fan(base-height, base-width)
|
|
display flex
|
|
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-Element()
|
|
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)
|
|
|