140 lines
2.9 KiB
Stylus
140 lines
2.9 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()
|
|
RV-CSSParameter({
|
|
localBreakPoint: 'calc(2 * %s)' % base-width
|
|
})
|
|
RV-BreakPoint(--localBreakPoint)
|
|
|
|
+RV-Element('Surface')
|
|
RV-BreakPoint__Item()
|
|
|
|
+RV-Element('Base')
|
|
RV-BreakPoint__Item()
|
|
+RV-Squash()
|
|
RV-BreakPoint__Item--outside()
|
|
|
|
flex-basis base-width
|
|
flex-grow 0
|
|
|
|
RV-BreakPoint--horizontal()
|
|
min-width 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()
|
|
flex-direction column
|
|
width base-width
|
|
min-width initial
|
|
|
|
+RV-Element('Surface')
|
|
width base-width
|
|
min-width initial
|
|
min-height base-height
|
|
|
|
+RV-Element--modifier('fixedHeight')
|
|
--wurst wasserererer
|
|
|
|
|
|
/*
|
|
* 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()
|
|
flex-flow row wrap
|
|
|
|
+RV-Element('Base')
|
|
flex-grow 1
|
|
|
|
+RV-Element('Surface')
|
|
box-sizing border-box
|
|
flex-grow 99999
|
|
|
|
|
|
/* ###############
|
|
* Element Mixins
|
|
* ############### */
|
|
RV-Fan__Base(base-height, base-width)
|
|
+RV-Element()
|
|
box-sizing border-box
|
|
flex-basis base-width
|
|
flex-shrink 0
|
|
flex-grow 0
|
|
|
|
height base-height
|
|
width base-width
|
|
|
|
> *
|
|
height calc_height()
|
|
width calc_width()
|
|
|
|
RV-Fan__Surface--fixedHeight(height)
|
|
+RV-Element--modifier()
|
|
height height
|
|
box-sizing border-box
|
|
|
|
RV-Fan__Surface--fixedWidth(width)
|
|
+RV-Element--modifier()
|
|
max-width width
|
|
box-sizing border-box
|
|
|
|
RV-Fan__Surface(base-height, base-width)
|
|
+RV-Element()
|
|
overflow hidden
|
|
box-sizing border-box
|
|
height base-height
|
|
flex-basis base-width
|
|
min-width base-width
|
|
flex-grow 1
|
|
|
|
> *
|
|
height calc_height(100%)
|
|
width calc_width(100%)
|
|
|
|
/* ############
|
|
* Block Mixin
|
|
* ############ */
|
|
RV-Fan(base-height, base-width)
|
|
display flex
|
|
position relative
|
|
min-width min-content
|
|
|
|
+RV-Block('RV-Fan')
|
|
RV-CSSParameter({
|
|
base-height: 280px,
|
|
base-width: 320px
|
|
})
|
|
|
|
RV-Fan(--base-height, --base-width)
|
|
RV-Fan__Base(--base-height, --base-width)
|
|
|
|
+RV-Element()
|
|
RV-Fan__Surface(--base-height, --base-width)
|
|
RV-Fan__Surface--fixedHeight(base-height)
|
|
RV-Fan__Surface--fixedWidth(base-width)
|
|
|
|
RV-Fan--auto(--base-height, --base-width)
|
|
RV-Fan--vertical(--base-height, --base-width)
|
|
RV-Fan--horizontal(--base-height, --base-width)
|
|
|