Outsource Breakpoint to its own component
This commit is contained in:
parent
4bbf3cb17b
commit
a1d1f85085
|
|
@ -1,3 +1,4 @@
|
|||
@import 'flexRow/_flexRow'
|
||||
@import 'flexGrid/_flexGrid'
|
||||
@import 'fan/_fan'
|
||||
@import 'fan/_fan'
|
||||
@import 'breakPoint/_breakPoint'
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
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()
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"title": "BreakPoint",
|
||||
"variants": [
|
||||
{
|
||||
"name": "Horizontal",
|
||||
"context": {
|
||||
"modifier": "--horizontal"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Vertical",
|
||||
"context": {
|
||||
"modifier": "--vertical"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
<style>
|
||||
#wrapper {
|
||||
height: 100vh;
|
||||
--outer-spacing: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="RV-BreakPoint RV-BreakPoint{{modifier}}">
|
||||
<div class="RV-BreakPoint__Item RV-Dummy RV-Spacing__Inner--medium">
|
||||
<div>ItemItem</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-BreakPoint__Item--outside RV-Dummy RV-Dummy--red">
|
||||
<div>Larger</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-Dummy">
|
||||
<div>ItemItem</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-Dummy">
|
||||
<div>ItemItem</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-BreakPoint__Item--inside RV-Dummy--yellow RV-Dummy">
|
||||
<div style="margin: 15px;">Smaller</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-Dummy">
|
||||
<div>ItemItem</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,65 +12,14 @@ RV-FlexRow--horizontal()
|
|||
RV-FlexRow--vertical()
|
||||
+RV-Block--modifier()
|
||||
flex-direction column
|
||||
|
||||
+RV-Element('Item')
|
||||
margin-bottom unset
|
||||
|
||||
|
||||
RV-FlexRow__Item--outsideBreakPoint()
|
||||
+RV-Element--modifier()
|
||||
margin-bottom -100vh
|
||||
height max-content
|
||||
flex-shrink 999
|
||||
|
||||
RV-FlexRow__Item--insideBreakPoint()
|
||||
+RV-Element--modifier()
|
||||
flex-grow 0
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
|
||||
+RV-Block--modifier()
|
||||
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-Element('Item')
|
||||
min-width initial
|
||||
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
|
||||
overflow hidden
|
||||
|
||||
RV-FlexRow__Item--outsideBreakPoint()
|
||||
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)
|
||||
|
||||
@media(max-width mediaBreakPoint)
|
||||
flex-direction row
|
||||
|
||||
|
||||
/*
|
||||
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
|
||||
*/
|
||||
RV-FlexRow--auto()
|
||||
RV-FlexRow--wrap()
|
||||
+RV-Block--modifier()
|
||||
+RV-Squash()
|
||||
RV-FlexRow--horizontal()
|
||||
flex-wrap wrap
|
||||
flex-direction row
|
||||
flex-wrap wrap
|
||||
|
||||
|
||||
/* ##########
|
||||
|
|
@ -144,8 +93,6 @@ RV-FlexRow__Item--content()
|
|||
########### */
|
||||
RV-FlexRow()
|
||||
display flex
|
||||
height 100%
|
||||
overflow-y hidden
|
||||
|
||||
+RV-Block('RV-FlexRow')
|
||||
RV-FlexRow()
|
||||
|
|
@ -172,4 +119,4 @@ RV-FlexRow()
|
|||
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
|
||||
RV-FlexRow--horizontal()
|
||||
RV-FlexRow--vertical()
|
||||
RV-FlexRow--auto()
|
||||
RV-FlexRow--wrap()
|
||||
|
|
@ -17,15 +17,9 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"name": "Breakpoint",
|
||||
"name": "Wrap",
|
||||
"context": {
|
||||
"modifier": "--breakPoint"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Auto",
|
||||
"context": {
|
||||
"modifier": "--auto"
|
||||
"modifier": "--wrap"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue