scss-library/components/01_Layouts/fan/_fan.styl

129 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--name('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--name('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--name('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--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 base-height
width base-width
flex 0 0 auto
RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier--name('fixedHeight')
height height
RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier--name('fixedWidth')
max-width width
RV-Fan__Surface()
+RV-Element--name('Surface')
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Image()
/* ############
* Block Mixin
* ############ */
RV-Fan()
display flex
/* #########
* CSS-Class
* ######### */
+RV-Block('RV-Fan')
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
RV-Fan()
+RV-Element()
RV-Fan__Surface()
+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)