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
 * ###################### */

RV-Fan--horizontal__Surface()
	+RV-Element()
		RV-BreakPoint__Item(--localBreakPoint)

RV-Fan--horizontal__Base()
	+RV-Element()
		RV-BreakPoint__Item(--localBreakPoint)
		RV-BreakPoint__Item--outside()
			
		flex-basis --base-width
		flex-grow 0

/*
 * 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()
		RV-CSSParameter({
			localBreakPoint: 'calc(2 * %s)' % base-width
		})
		RV-BreakPoint(--localBreakPoint)
		RV-Fan--horizontal__Surface()
		RV-Fan--horizontal__Base()

		RV-BreakPoint--horizontal()
		min-width base-width


RV-Fan--vertical__Surface()
	+RV-Element()
		width base-width
		min-width initial
		min-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()
		flex-direction column
		width base-width
		min-width initial
		RV-Fan--vertical__Surface()

RV-Fan--auto__Base()
	+RV-Element()
		flex-grow 1
		
RV-Fan--auto__Surface()
	+RV-Element()
		box-sizing border-box
		flex-grow 99999

/*
 * 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()
		flex-flow row wrap
		
		RV-Fan--auto__Base()
		RV-Fan--auto__Surface()


/* ###############
 * Element Mixins
 * ############### */
RV-Fan__Base(base-height, base-width)
	+RV-Element()
		box-sizing border-box
		flex-basis base-width
		flex-shrink 0
		flex-grow 0
		
		height base-height
		width base-width
		
		> *
			height calc_height()
			width calc_width()

RV-Fan__Surface--fixedHeight(height)
	+RV-Element--modifier()
		height height
		box-sizing border-box

RV-Fan__Surface--fixedWidth(width)
	+RV-Element--modifier()
		max-width width
		box-sizing border-box

RV-Fan__Surface(base-height, base-width)
	+RV-Element()
		overflow hidden
		box-sizing border-box
		height base-height
		flex-basis base-width
		min-width base-width
		flex-grow 1
		
		> *
			height calc_height(100%)
			width calc_width(100%)
			
		RV-Fan__Surface--fixedHeight(base-height)
		RV-Fan__Surface--fixedWidth(base-width)

/* ############
 * Block Mixin
 * ############ */
RV-Fan(base-height, base-width)
	+RV-Block()
		RV-CSSParameter({
			base-height: base-height,
			base-width: base-width
		})
		display flex
		position relative
		min-width min-content

		RV-Fan__Base(--base-height, --base-width)
		RV-Fan__Surface(--base-height, --base-width)
		
		RV-Fan--auto(--base-height, --base-width)
		RV-Fan--vertical(--base-height, --base-width)
		RV-Fan--horizontal(--base-height, --base-width)

RV-Fan(280px, 320px)