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--name('horizontal')
		flex-direction row
		
		+RV-Element('Base')
			//flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
			flex-basis 'calc(2 * (%s) * 999 - 100% * 999)' % base-width
			box-sizing border-box
			flex-shrink 9999
			flex-grow 1
			max-width base-width
			
			margin 0
			padding 0
			--_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
			*
				position relative
				height calc(100% - var(--_spacing-difference))
				width calc(100% - var(--_spacing-difference))
				top calc(var(--_spacing-difference) / 2)
				left calc(var(--_spacing-difference) / 2)
		
		+RV-Element('Surface')
			height base-height
			box-sizing border-box
			flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width

/*
 * 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 base-width
		min-width initial
		
		+RV-Element('Surface')
			width base-width
			box-sizing border-box
			min-width initial
			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('Base')
			flex-grow 1

		+RV-Element('Surface')
			height base-height
			box-sizing border-box
			flex-grow 99999


/* ###############
 * Element Mixins
 * ############### */
RV-Fan__Base(base-height, base-width)
	+RV-Element--name('Base')
		box-sizing border-box
		flex-basis base-width
		flex-shrink 0
		flex-grow 0

RV-Fan__Surface--fixedHeight(height)
	+RV-Element__Modifier--name('fixedHeight')
		height height
		box-sizing border-box

RV-Fan__Surface--fixedWidth(width)
	+RV-Element__Modifier--name('fixedWidth')
		max-width width
		box-sizing border-box

RV-Fan__Surface(base-height, base-width)
	+RV-Element--name('Surface')
		overflow hidden
		box-sizing border-box
		height base-height
		flex-basis base-width
		flex-grow 1

/* ############
 * Block Mixin
 * ############ */
RV-Fan(base-height, base-width)
	display flex
	position relative
	min-width base-width

/* #########
 * CSS-Class
 * ######### */
+RV-Block('RV-Fan')
	RV-CSSParameter({
		base-height: 280px,
		base-width: 320px
	})
	
	--inner-spacing 0px

	RV-Fan(--base-height, --base-width)
	+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)