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

/*
 * 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()
*/