From 2b2e87ab06a5eb34fe8033fdbb74889f225f62d8 Mon Sep 17 00:00:00 2001 From: reverend Date: Wed, 3 Mar 2021 17:54:21 +0100 Subject: [PATCH] FlexRow mimicking container queris --- components/01_Layouts/flexRow/_flexRow.styl | 16 +++++++++++++--- components/01_Layouts/flexRow/flexRow.hbs | 7 +++++-- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/components/01_Layouts/flexRow/_flexRow.styl b/components/01_Layouts/flexRow/_flexRow.styl index aaefea2..3f90e82 100644 --- a/components/01_Layouts/flexRow/_flexRow.styl +++ b/components/01_Layouts/flexRow/_flexRow.styl @@ -12,29 +12,38 @@ RV-FlexRow--horizontal() RV-FlexRow--vertical() +RV-Block__Modifier--name('vertical') flex-direction column - + /* * 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) +RV-Block__Modifier--name('breakPoint') - flex-wrap wrap RV-Reset() gap 0px + height unset 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-Element__Modifier('outsideBreakPoint') + margin-bottom -100vh + height max-content + flex-shrink 999 + + +RV-Element__Modifier('insideBreakPoint') + flex-grow 0 @media(max-width mediaBreakPoint) flex-direction row + /* * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy @@ -118,6 +127,7 @@ RV-FlexRow__Item--content() RV-FlexRow() display flex height 100% + overflow-y hidden +RV-Block('RV-FlexRow') RV-FlexRow() diff --git a/components/01_Layouts/flexRow/flexRow.hbs b/components/01_Layouts/flexRow/flexRow.hbs index 996995f..d9dc572 100644 --- a/components/01_Layouts/flexRow/flexRow.hbs +++ b/components/01_Layouts/flexRow/flexRow.hbs @@ -2,8 +2,11 @@
-
-
+
+
Larger
+
+
+
Smaller