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

184 lines
3.6 KiB
Stylus

/*
* 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
/*
* 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)
+RV-Block__Modifier--name('breakPoint')
RV-Reset()
gap 0px
height unset
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('outsideBreakPoint')
margin-bottom -100vh
height max-content
flex-shrink 999
+RV-Element__Modifier('insideBreakPoint')
flex-grow 0
@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-basis max-content
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--horizontal()
+RV-Block__Modifier()
RV-FlexRow--vertical()
+RV-Block__Modifier()
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
+RV-Block__Modifier()
RV-FlexRow--auto()