reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Outsource Breakpoint to its own component

Browse Source
This commit is contained in:
reverend 2021-03-09 20:42:22 +01:00
parent 4bbf3cb17b
commit a1d1f85085
6 changed files with 125 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/01_Layouts/_layouts.styl
View File

@ -1,3 +1,4 @@
@import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid'
@import 'fan/_fan'
@import 'fan/_fan'
@import 'breakPoint/_breakPoint'

73
components/01_Layouts/breakPoint/_breakPoint.styl Normal file
View File

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

17
components/01_Layouts/breakPoint/breakPoint.config.json Normal file
View File

@ -0,0 +1,17 @@
{
"title": "BreakPoint",
"variants": [
{
"name": "Horizontal",
"context": {
"modifier": "--horizontal"
}
},
{
"name": "Vertical",
"context": {
"modifier": "--vertical"
}
}
]
}

27
components/01_Layouts/breakPoint/breakPoint.hbs Normal file
View File

@ -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>

61
components/01_Layouts/flexRow/_flexRow.styl
View File

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

10
components/01_Layouts/flexRow/flexRow.config.json
View File

@ -17,15 +17,9 @@
}
},
{
"name": "Breakpoint",
"name": "Wrap",
"context": {
"modifier": "--breakPoint"
}
},
{
"name": "Auto",
"context": {
"modifier": "--auto"
"modifier": "--wrap"
}
}
]