162 lines
3.2 KiB
Stylus
162 lines
3.2 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('horizontal')
|
|
flex-direction row
|
|
|
|
+RV-Element('Surface')
|
|
min-width base-width
|
|
height base-height
|
|
|
|
/*
|
|
* 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('vertical')
|
|
flex-direction column
|
|
width max-content
|
|
|
|
+RV-Element('Surface')
|
|
width base-width
|
|
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('auto')
|
|
flex-flow row wrap
|
|
|
|
+RV-Element('Surface')
|
|
width 'calc(100% - %s)' % base-width
|
|
min-width base-width
|
|
height base-height
|
|
|
|
/*
|
|
* 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('fullWidth')
|
|
RV-Fan--auto(base-height, base-width)
|
|
|
|
+RV-Element('Base')
|
|
flex-grow 1
|
|
|
|
+RV-Element('Surface')
|
|
flex-grow 1
|
|
|
|
|
|
/* ###############
|
|
* Element Mixins
|
|
* ############### */
|
|
|
|
RV-Fan__Base(base-height, base-width)
|
|
+RV-Element('Base')
|
|
height base-height
|
|
width base-width
|
|
flex 0 0 auto
|
|
|
|
RV-Fan__Surface--fixedHeight(height)
|
|
+RV-Element__Modifier('fixedHeight')
|
|
height height
|
|
|
|
RV-Fan__Surface--fixedWidth(width)
|
|
+RV-Element__Modifier('fixedWidth')
|
|
|
|
max-width width
|
|
|
|
RV-Fan__Surface()
|
|
+RV-Element('Surface')
|
|
RV-ContentCrop()
|
|
|
|
RV-Fan__Surface--fixedWidth(width)
|
|
RV-Fan__Surface--fixedHeight(height)
|
|
|
|
RV-Fan__Surface-Pack(width, height)
|
|
RV-Fan__Surface()
|
|
|
|
+RV-Element('Surface')
|
|
RV-Fan__Surface--fixedWidth(width)
|
|
RV-Fan__Surface--fixedHeight(height)
|
|
|
|
/* ############
|
|
* Block Mixin
|
|
* ############ */
|
|
RV-Fan()
|
|
display flex
|
|
|
|
RV-Fan__()
|
|
RV-Fan()
|
|
RV-Fan__Base()
|
|
RV-Fan__Surface()
|
|
|
|
RV-Fan--(base-height, base-width)
|
|
RV-Fan()
|
|
|
|
RV-Fan--fullWidth(base-height, base-width)
|
|
RV-Fan--vertical(base-height, base-width)
|
|
RV-Fan--horizontal(base-height, base-width)
|
|
RV-Fan--auto(base-height, base-width)
|
|
|
|
RV-Fan__Surface()
|
|
|
|
RV-Fan__Surface--()
|
|
|
|
RV-Fan__Base()
|
|
|
|
RV-Fan__Base--()
|
|
|
|
RV-Fan__--()
|
|
|
|
RV-Fan-Pack(base-height, base-width)
|
|
RV-Fan()
|
|
|
|
RV-Fan__Surface-Pack(base-height, base-width)
|
|
RV-Fan__Base(base-height, base-width)
|
|
|
|
|
|
|
|
/* #########
|
|
* CSS-Class
|
|
* ######### */
|
|
.RV-Fan
|
|
RV-CSSParameter({
|
|
base-height: 280px,
|
|
base-width: 320px
|
|
})
|
|
|
|
RV-Fan-Pack(base-height, base-width)
|
|
/*
|
|
.tollecomponent
|
|
RV-Fan()
|
|
+RV-Element('Square')
|
|
RV-Fan__Base(50px, 50px)
|
|
|
|
+RV-Element__Modifier('color')
|
|
RV-Fan__Base--blue()
|
|
+/
|
|
|
|
|
|
|
|
|