184 lines
3.6 KiB
Stylus
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() |