scss-library/components/01_Layouts/flexRow/_flexRow.styl

/*
 * Classes for easy flexrow usage
 */

/*
 * Orientation
 */
RV-FlexRow--horizontal()
	+RV-Block--modifier()
		flex-direction row

RV-FlexRow--vertical()
	+RV-Block--modifier()
		flex-direction column

/*
 * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
 */
RV-FlexRow--wrap()
	+RV-Block--modifier()
		flex-direction row
		flex-wrap wrap

/*
 * Varios relative width of items to each other
 */

RV-FlexRow__Item--narrower()
	+RV-Element--modifier()
		flex-grow 2
		flex-shrink 10

RV-FlexRow__Item--narrow()
	+RV-Element--modifier()
		flex-grow 4
		flex-shrink 8

RV-FlexRow__Item--wide()
	+RV-Element--modifier()
		flex-grow 8
		flex-shrink 4

RV-FlexRow__Item--wider()
	+RV-Element--modifier()
		flex-grow 10
		flex-shrink 2

/*
 * Item has always the given width
 */
RV-FlexRow__Item--fixedSize(width)
	+RV-Element--modifier()
		flex-basis width
		flex-grow 0
		flex-shrink 0

/*
 * Item width relativ to the container
 */
RV-FlexRow__Item--half()
	+RV-Element--modifier()
		overflow hidden
		flex-grow 0
		flex-shrink 0
		flex-basis 50%

RV-FlexRow__Item--third()
	+RV-Element--modifier()
		overflow hidden
		flex-grow 0
		flex-shrink 0
		flex-basis (100/3)%		

RV-FlexRow__Item--quarter()
	+RV-Element--modifier()
		overflow hidden
		flex-grow 0
		flex-shrink 0
		flex-basis 25%
	
RV-FlexRow__Item--content()
	+RV-Element--modifier()
		flex-grow 0
		flex-shrink 0
		flex-basis max-content

/* ##########
 * Item class
  ########### */
RV-FlexRow__Item(fixedSize=100px)
	+RV-Element()
		flex-basis 20px
		flex-grow 5
		flex-shrink 5
		
		RV-FlexRow__Item--narrower()
		RV-FlexRow__Item--narrow()
		RV-FlexRow__Item--wide()
		RV-FlexRow__Item--wider()
		RV-FlexRow__Item--fixedSize(fixedSize)
		RV-FlexRow__Item--half()
		RV-FlexRow__Item--third()
		RV-FlexRow__Item--quarter()
		RV-FlexRow__Item--content()

/* ##########
 * Block
  ########### */
RV-FlexRow(itemFixedSize=100px)
	+RV-Block()
		RV-CSSParameter({
			itemFixedSize: itemFixedSize
		})
		display flex
		
		RV-FlexRow__Item(--itemFixedSize)

		RV-FlexRow--horizontal()
		RV-FlexRow--vertical()
		RV-FlexRow--wrap()

RV-FlexRow(100px)