scss-library/components/01_Layouts/breakPoint/_breakPoint.styl

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()