Refactoring: Wrap as block modifier
This commit is contained in:
parent
aec1d3cda4
commit
d78c978f4d
@ -1,21 +1,20 @@
|
||||
RV-BreakPoint__Item()
|
||||
RV-BreakPoint__Item(breakPoint)
|
||||
+RV-Element()
|
||||
RV-FlexRow__Item()
|
||||
flex-basis 'calc(%s * 999 - 100% * 999)' % --localBreakPoint
|
||||
flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
|
||||
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-BreakPoint(breakPoint)
|
||||
RV-FlexRow()
|
||||
+RV-Squash()
|
||||
RV-FlexRow--wrap()
|
||||
@ -26,10 +25,16 @@ RV-BreakPoint(localBreakPoint)
|
||||
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)
|
||||
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-Block--modifier()
|
||||
flex-wrap nowrap
|
||||
@ -53,21 +58,22 @@ RV-BreakPoint--vertical()
|
||||
|
||||
+RV-Block('RV-BreakPoint')
|
||||
RV-CSSParameter({
|
||||
localBreakPoint: 500px
|
||||
breakPoint: 500px
|
||||
fixedSize: 100px
|
||||
})
|
||||
|
||||
&&
|
||||
--inner-spacing 0
|
||||
|
||||
RV-BreakPoint(--localBreakPoint)
|
||||
RV-BreakPoint(--breakPoint)
|
||||
|
||||
+RV-Element()
|
||||
RV-BreakPoint__Item(--localBreakPoint)
|
||||
RV-BreakPoint__Item(--breakPoint)
|
||||
RV-BreakPoint__Item--outside()
|
||||
RV-BreakPoint__Item--inside()
|
||||
RV-BreakPoint__Item--fixedSize(--fixedSize)
|
||||
|
||||
RV-BreakPoint--wrap()
|
||||
RV-BreakPoint--horizontal()
|
||||
RV-BreakPoint--vertical()
|
||||
|
||||
|
@ -1,5 +1,8 @@
|
||||
{
|
||||
"title": "BreakPoint",
|
||||
"context": {
|
||||
"modifier": "--wrap"
|
||||
},
|
||||
"variants": [
|
||||
{
|
||||
"name": "Horizontal",
|
||||
|
Loading…
Reference in New Issue
Block a user