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

/*
 * Classes for easy flexrow usage
 */

/*
 * Orientation
 */
RV-FlexRow--horizontal()
	+RV-Block__Modifier--name('horizontal')
		flex-direction row

RV-FlexRow--vertical()
	+RV-Block__Modifier--name('vertical')
		flex-direction column
		
		+RV-Element('Item')
			margin-bottom unset


RV-FlexRow__Item--outsideBreakPoint()
	+RV-Element__Modifier--name('outsideBreakPoint')
		margin-bottom -100vh
		height max-content
		flex-shrink 999

RV-FlexRow__Item--insideBreakPoint()
	+RV-Element__Modifier--name('insideBreakPoint')
		flex-grow 0
/*
 * Breaks from row to column orientation at the given breakpoint
 * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
 */
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
	+RV-Block__Modifier--name('breakPoint')
		RV-Reset()
		gap 0px
		
		RV-Utils__ElementAmount--range(0, 20, @(index, total){
				min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
			}
		)
		
		+RV-Element('Item')
			min-width initial
			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
			overflow hidden
			
			+RV-Element__Modifier()
				RV-FlexRow__Item--outsideBreakPoint()
				
			+RV-Element__Modifier()
				RV-FlexRow__Item--insideBreakPoint()
				
			margin 0
			padding 0
			--_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
			--height 100%
			*
				position relative
				height calc(var(--height) - var(--_spacing-difference))
				width calc(var(--height) - var(--_spacing-difference))
				top calc(var(--_spacing-difference) / 2)
				left calc(var(--_spacing-difference) / 2)
		
		@media(max-width mediaBreakPoint)
			flex-direction row
	

/*
 * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
 */
RV-FlexRow--auto()
	+RV-Block__Modifier--name('auto')
		RV-FlexRow--horizontal()
		flex-wrap wrap


/* ##########
 * Item class
  ########### */
RV-FlexRow__Item()
	+RV-Element--name('Item')
		flex-grow 3
		flex-shrink 3

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

RV-FlexRow__Item--narrower()
	+RV-Element__Modifier--name('narrower')
		flex-grow 1
		flex-shrink 5

RV-FlexRow__Item--narrow()
	+RV-Element__Modifier--name('narrow')
		flex-grow 2
		flex-shrink 4

RV-FlexRow__Item--wide()
	+RV-Element__Modifier--name('wide')
		flex-grow 4
		flex-shrink 2

RV-FlexRow__Item--wider()
	+RV-Element__Modifier--name('wider')
		flex-grow 5
		flex-shrink 1

/*
 * Item has always the given width
 */
RV-FlexRow__Item--fixedSize(width)
	+RV-Element__Modifier--name('fixedSize')
		RV-Sizes--fixedSize(width)

/*
 * Item width relativ to the container
 */
RV-FlexRow__Item--half()
	+RV-Element__Modifier--name('half')
		flex-grow 0
		flex-shrink 0
		flex-basis 50%

RV-FlexRow__Item--third()
	+RV-Element__Modifier--name('third')
		flex-grow 0
		flex-shrink 0
		flex-basis (100/3)%		

RV-FlexRow__Item--quarter()
	+RV-Element__Modifier--name('quarter')
		flex-grow 0
		flex-shrink 0
		flex-basis 25%
	
RV-FlexRow__Item--content()
	+RV-Element__Modifier--name('content')
		flex-grow 0
		flex-shrink 0
		flex-basis max-content

/* ##########
 * Block
  ########### */
RV-FlexRow()
	display flex
	height 100%
	overflow-y hidden

+RV-Block('RV-FlexRow')
	RV-FlexRow()
	
	RV-CSSParameter({
		width: 100px
		localBreakPoint: 500px,
		mediaBreakPoint: 100vw
	})
	
	+RV-Element()
		RV-FlexRow__Item()
		
		+RV-Element__Modifier()
			RV-FlexRow__Item--narrower()
	
		+RV-Element__Modifier()
			RV-FlexRow__Item--narrow()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--wide()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--wider()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--fixedSize(--width)
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--narrower()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--half()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--third()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--quarter()
			
		+RV-Element__Modifier()
			RV-FlexRow__Item--content()
	
	+RV-Block__Modifier()
		RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
	
	+RV-Block__Modifier()
		RV-FlexRow--horizontal()
		
	+RV-Block__Modifier()
		RV-FlexRow--vertical()
		
	+RV-Block__Modifier()
		RV-FlexRow--auto()