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

204 lines
4.2 KiB
Stylus
Raw Normal View History

2021-01-03 12:36:12 +01:00
/*
* Classes for easy flexrow usage
*/
/*
* Orientation
*/
RV-FlexRow--horizontal()
+RV-Block__Modifier--name('horizontal')
flex-direction row
2021-01-03 12:36:12 +01:00
RV-FlexRow--vertical()
+RV-Block__Modifier--name('vertical')
flex-direction column
2021-03-04 17:38:50 +01:00
+RV-Element('Item')
margin-bottom unset
2021-03-03 17:54:21 +01:00
2021-03-03 18:27:35 +01:00
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
2021-01-03 12:36:12 +01:00
/*
* 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.
*/
2021-03-03 18:58:09 +01:00
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)
}
)
2021-03-03 17:54:21 +01:00
+RV-Element('Item')
min-width initial
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
overflow hidden
2021-03-03 17:54:21 +01:00
2021-03-03 18:27:35 +01:00
+RV-Element__Modifier()
RV-FlexRow__Item--outsideBreakPoint()
2021-03-03 17:54:21 +01:00
2021-03-03 18:27:35 +01:00
+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)
2021-01-03 12:36:12 +01:00
@media(max-width mediaBreakPoint)
flex-direction row
2021-03-03 17:54:21 +01:00
2021-01-03 12:36:12 +01:00
/*
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
2021-01-03 12:36:12 +01:00
*/
RV-FlexRow--auto()
+RV-Block__Modifier--name('auto')
RV-FlexRow--horizontal()
flex-wrap wrap
2021-01-03 12:36:12 +01:00
/* ##########
* Item class
########### */
RV-FlexRow__Item()
+RV-Element--name('Item')
flex-grow 3
flex-shrink 3
2021-01-03 12:36:12 +01:00
/*
* Varios relative width of items to each other
*/
RV-FlexRow__Item--narrower()
+RV-Element__Modifier--name('narrower')
flex-grow 1
flex-shrink 5
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--narrow()
+RV-Element__Modifier--name('narrow')
flex-grow 2
flex-shrink 4
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--wide()
+RV-Element__Modifier--name('wide')
flex-grow 4
flex-shrink 2
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--wider()
+RV-Element__Modifier--name('wider')
flex-grow 5
flex-shrink 1
2021-01-03 12:36:12 +01:00
/*
* Item has always the given width
*/
RV-FlexRow__Item--fixedSize(width)
+RV-Element__Modifier--name('fixedSize')
RV-Sizes--fixedSize(width)
2021-01-03 12:36:12 +01:00
/*
* Item width relativ to the container
*/
RV-FlexRow__Item--half()
+RV-Element__Modifier--name('half')
2021-01-19 23:36:56 +01:00
flex-grow 0
flex-shrink 0
flex-basis 50%
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--third()
+RV-Element__Modifier--name('third')
2021-01-19 23:36:56 +01:00
flex-grow 0
flex-shrink 0
flex-basis (100/3)%
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--quarter()
+RV-Element__Modifier--name('quarter')
2021-01-19 23:36:56 +01:00
flex-grow 0
flex-shrink 0
flex-basis 25%
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--content()
+RV-Element__Modifier--name('content')
2021-01-19 23:36:56 +01:00
flex-grow 0
flex-shrink 0
flex-basis max-content
2021-01-03 12:36:12 +01:00
/* ##########
* Block
########### */
RV-FlexRow()
display flex
height 100%
2021-03-03 17:54:21 +01:00
overflow-y hidden
2021-01-03 12:36:12 +01:00
+RV-Block('RV-FlexRow')
2021-01-03 12:36:12 +01:00
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()
2021-03-04 17:38:50 +01:00
+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()