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

FlexRow mimicking container queris

Browse Source
This commit is contained in:
reverend 2021-03-03 17:54:21 +01:00
parent c4fd1fd9be
commit 2b2e87ab06
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,9 +19,9 @@ RV-FlexRow--vertical()
*/ */
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint) RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
+RV-Block__Modifier--name('breakPoint') +RV-Block__Modifier--name('breakPoint')
flex-wrap wrap
RV-Reset() RV-Reset()
gap 0px gap 0px
height unset
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)))" % (localBreakPoint index index)
@ -33,9 +33,18 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
overflow hidden overflow hidden
+RV-Element__Modifier('outsideBreakPoint')
margin-bottom -100vh
height max-content
flex-shrink 999
+RV-Element__Modifier('insideBreakPoint')
flex-grow 0
@media(max-width mediaBreakPoint) @media(max-width mediaBreakPoint)
flex-direction row flex-direction row
/* /*
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
*/ */
@ -118,6 +127,7 @@ RV-FlexRow__Item--content()
RV-FlexRow() RV-FlexRow()
display flex display flex
height 100% height 100%
overflow-y hidden
+RV-Block('RV-FlexRow') +RV-Block('RV-FlexRow')
RV-FlexRow() RV-FlexRow()

7
components/01_Layouts/flexRow/flexRow.hbs
View File

@ -2,8 +2,11 @@
<div class="RV-FlexRow__Item RV-Dummy"> <div class="RV-FlexRow__Item RV-Dummy">
<div class="RV-Dummy__Square--small"></div> <div class="RV-Dummy__Square--small"></div>
</div> </div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--right RV-Dummy"> <div class="RV-FlexRow__Item RV-FlexRow__Item--outsideBreakPoint RV-FlexRow__Item--right RV-Dummy RV-Dummy--red">
<div class="RV-Dummy__Square--small"></div> <div class="RV-Dummy__Square--small">Larger</div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--insideBreakPoint RV-FlexRow__Item--right RV-Dummy--yellow RV-Dummy">
<div class="RV-Dummy__Square--small">Smaller</div>
</div> </div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--center RV-Dummy"> <div class="RV-FlexRow__Item RV-FlexRow__Item--center RV-Dummy">
<div class="RV-Dummy__Square--small"></div> <div class="RV-Dummy__Square--small"></div>