138 lines
3.2 KiB
Stylus
138 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--name('horizontal')
|
|
flex-direction row
|
|
|
|
+RV-Element('Surface')
|
|
min-width calc_width(base-width)
|
|
height calc_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--name('vertical')
|
|
flex-direction column
|
|
width max-content
|
|
|
|
+RV-Element('Surface')
|
|
width calc_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--name('auto')
|
|
flex-flow row wrap
|
|
|
|
+RV-Element('Surface')
|
|
min-width calc_width('calc(%s)' % base-width)
|
|
width calc_width('calc(100% - %s)' % base-width)
|
|
height calc_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--name('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--name('Base')
|
|
height calc_height(base-height)
|
|
width calc_width(base-width)
|
|
flex 0 0 auto
|
|
|
|
RV-Fan__Surface--fixedHeight(height)
|
|
+RV-Element__Modifier--name('fixedHeight')
|
|
height calc_height(height)
|
|
|
|
RV-Fan__Surface--fixedWidth(width)
|
|
+RV-Element__Modifier--name('fixedWidth')
|
|
max-width calc_width(width)
|
|
|
|
RV-Fan__Surface(base-height, base-width)
|
|
+RV-Element--name('Surface')
|
|
|
|
RV-ContentCrop()
|
|
RV-ContentCrop__Text()
|
|
RV-ContentCrop__Image()
|
|
|
|
overflow hidden
|
|
height calc_height(base-height)
|
|
width calc_width()
|
|
|
|
/* ############
|
|
* Block Mixin
|
|
* ############ */
|
|
RV-Fan()
|
|
display flex
|
|
position relative
|
|
|
|
/* #########
|
|
* CSS-Class
|
|
* ######### */
|
|
+RV-Block('RV-Fan')
|
|
RV-CSSParameter({
|
|
base-height: 280px,
|
|
base-width: 320px
|
|
})
|
|
|
|
--inner-spacing 0px
|
|
|
|
RV-Fan()
|
|
+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)
|
|
|