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

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)