73 lines
1.4 KiB
Stylus
73 lines
1.4 KiB
Stylus
|
RV-BreakPoint__Item(localBreakPoint)
|
||
|
+RV-Element()
|
||
|
RV-FlexRow__Item()
|
||
|
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
|
||
|
overflow: hidden;
|
||
|
--outer-spacing 0
|
||
|
--inner-spacing 0
|
||
|
|
||
|
RV-BreakPoint__Item--outside()
|
||
|
+RV-Element--modifier()
|
||
|
margin-bottom -100vh
|
||
|
flex-shrink 999
|
||
|
|
||
|
RV-BreakPoint__Item--inside()
|
||
|
+RV-Element--modifier()
|
||
|
flex-grow 0
|
||
|
|
||
|
RV-BreakPoint(localBreakPoint)
|
||
|
RV-FlexRow()
|
||
|
+RV-Squash()
|
||
|
RV-FlexRow--wrap()
|
||
|
|
||
|
overflow-y hidden
|
||
|
|
||
|
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-BreakPoint--horizontal()
|
||
|
+RV-Block--modifier()
|
||
|
flex-wrap nowrap
|
||
|
min-width max-content
|
||
|
|
||
|
+RV-Element('Item')
|
||
|
+RV-Element--modifier('outside')
|
||
|
margin-bottom unset
|
||
|
height unset
|
||
|
|
||
|
RV-BreakPoint--vertical()
|
||
|
+RV-Block--modifier()
|
||
|
flex-direction column
|
||
|
flex-wrap nowrap
|
||
|
height 100%
|
||
|
|
||
|
+RV-Element('Item')
|
||
|
+RV-Element--modifier('outside')
|
||
|
margin-bottom unset
|
||
|
height unset
|
||
|
|
||
|
+RV-Block('RV-BreakPoint')
|
||
|
RV-CSSParameter({
|
||
|
localBreakPoint: 500px
|
||
|
})
|
||
|
|
||
|
&&
|
||
|
--inner-spacing 0
|
||
|
|
||
|
RV-BreakPoint(--localBreakPoint)
|
||
|
|
||
|
+RV-Element()
|
||
|
RV-BreakPoint__Item(--localBreakPoint)
|
||
|
RV-BreakPoint__Item--outside()
|
||
|
RV-BreakPoint__Item--inside()
|
||
|
|
||
|
RV-BreakPoint--horizontal()
|
||
|
RV-BreakPoint--vertical()
|
||
|
|
||
|
|
||
|
|