/* * 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() /* ############ * Block Mixin * ############ */ RV-Fan() display flex /* ######### * CSS-Class * ######### */ .test +RV-Block('Hasi') --hasi 'lein' +RV-Element('Flauschi') --hasi 'flauschi' +RV-Element('Löffel') --flauschi 'löffel' +RV-Block('RV-Fan') RV-CSSParameter({ base-height: 280px, base-width: 320px }) RV-Fan() RV-Fan__Surface() RV-Fan__Surface--fixedWidth(base-width) RV-Fan__Surface--fixedHeight(base-height) RV-Fan__Base(base-height, base-width) 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) .test --test 'test' /* RV-Test() +RV-Block('Block') --wurst yeet //RV-Fan__Surface(50px, 50px) +RV-Element('Element') +RV-Element('Subelement') color black --blubb wasser +RV-Element__Modifier('ElementModifier') --pp 'wurst' +RV-Element__Modifier('ElementModifierAfter') --pipi 'kaka' +RV-Block__Modifier('BlockModifier') border 1px solid red +RV-Element('ElementInBlockModifier') color pink +RV-Element__Modifier('ElementModifier') color skyblue .wurstwasser RV-Test() */