Refactoring: Wrap as block modifier

This commit is contained in:
reverend 2021-03-10 18:06:32 +01:00
parent aec1d3cda4
commit d78c978f4d
2 changed files with 17 additions and 8 deletions

View File

@ -1,21 +1,20 @@
RV-BreakPoint__Item() RV-BreakPoint__Item(breakPoint)
+RV-Element() +RV-Element()
RV-FlexRow__Item() RV-FlexRow__Item()
flex-basis 'calc(%s * 999 - 100% * 999)' % --localBreakPoint flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
overflow: hidden; overflow: hidden;
--outer-spacing 0 --outer-spacing 0
--inner-spacing 0 --inner-spacing 0
RV-BreakPoint__Item--outside() RV-BreakPoint__Item--outside()
+RV-Element--modifier() +RV-Element--modifier()
margin-bottom -100vh
flex-shrink 999 flex-shrink 999
RV-BreakPoint__Item--inside() RV-BreakPoint__Item--inside()
+RV-Element--modifier() +RV-Element--modifier()
flex-grow 0 flex-grow 0
RV-BreakPoint(localBreakPoint) RV-BreakPoint(breakPoint)
RV-FlexRow() RV-FlexRow()
+RV-Squash() +RV-Squash()
RV-FlexRow--wrap() RV-FlexRow--wrap()
@ -26,10 +25,16 @@ RV-BreakPoint(localBreakPoint)
gap 0px gap 0px
RV-Utils__ElementAmount--range(0, 20, @(index, total){ 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) min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (breakPoint index index)
} }
) )
RV-BreakPoint--wrap()
+RV-Block--modifier()
+RV-Element('Item')
+RV-Element--modifier('outside')
margin-bottom -100vh
RV-BreakPoint--horizontal() RV-BreakPoint--horizontal()
+RV-Block--modifier() +RV-Block--modifier()
flex-wrap nowrap flex-wrap nowrap
@ -53,21 +58,22 @@ RV-BreakPoint--vertical()
+RV-Block('RV-BreakPoint') +RV-Block('RV-BreakPoint')
RV-CSSParameter({ RV-CSSParameter({
localBreakPoint: 500px breakPoint: 500px
fixedSize: 100px fixedSize: 100px
}) })
&& &&
--inner-spacing 0 --inner-spacing 0
RV-BreakPoint(--localBreakPoint) RV-BreakPoint(--breakPoint)
+RV-Element() +RV-Element()
RV-BreakPoint__Item(--localBreakPoint) RV-BreakPoint__Item(--breakPoint)
RV-BreakPoint__Item--outside() RV-BreakPoint__Item--outside()
RV-BreakPoint__Item--inside() RV-BreakPoint__Item--inside()
RV-BreakPoint__Item--fixedSize(--fixedSize) RV-BreakPoint__Item--fixedSize(--fixedSize)
RV-BreakPoint--wrap()
RV-BreakPoint--horizontal() RV-BreakPoint--horizontal()
RV-BreakPoint--vertical() RV-BreakPoint--vertical()

View File

@ -1,5 +1,8 @@
{ {
"title": "BreakPoint", "title": "BreakPoint",
"context": {
"modifier": "--wrap"
},
"variants": [ "variants": [
{ {
"name": "Horizontal", "name": "Horizontal",