From a1b95dd63268316d3beaf325c8a3a393364f8dbf Mon Sep 17 00:00:00 2001 From: reverend Date: Sat, 6 Mar 2021 20:43:29 +0100 Subject: [PATCH] Fan is now using 9999 hack, horizontal breakpoint usage --- components/01_Layouts/fan/_fan.styl | 55 ++++++++------------- components/01_Layouts/fan/fan.config.json | 7 --- components/04_Molecules/teaser/_teaser.styl | 2 +- 3 files changed, 21 insertions(+), 43 deletions(-) diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl index b70c7de..a6f74a7 100644 --- a/components/01_Layouts/fan/_fan.styl +++ b/components/01_Layouts/fan/_fan.styl @@ -18,9 +18,17 @@ RV-Fan--horizontal(base-height, base-width) +RV-Block__Modifier--name('horizontal') flex-direction row + +RV-Element('Base') + //flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width + flex-basis 'calc(2 * (%s) * 999 - 100% * 999)' % base-width + box-sizing border-box + flex-shrink 9999 + flex-grow 1 + max-width base-width + +RV-Element('Surface') - min-width calc_width('calc(%s * 1.5)' % base-width) height calc_height(base-height) + flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width /* * Base above, Surfce below @@ -30,7 +38,7 @@ RV-Fan--horizontal(base-height, base-width) RV-Fan--vertical(base-height, base-width) +RV-Block__Modifier--name('vertical') flex-direction column - width max-content + width base-width min-width initial +RV-Element('Surface') @@ -47,32 +55,13 @@ RV-Fan--vertical(base-height, base-width) RV-Fan--auto(base-height, base-width) +RV-Block__Modifier--name('auto') flex-flow row wrap - min-width initial - +RV-Element('Surface') - min-width calc_width('calc(%s)' % base-width) - width calc_width('calc(100% - %s)' % base-width) - height calc_height(base-height) - flex-grow unset - flex-basis unset - -/* - * Also initialy horizontal, changes to vertical when - * the width of the parent is less than 2 x base-width - * Width of the base and the surface in vertical mode - * are 100% of the parent width - */ -RV-Fan--fullWidth(base-height, base-width) - +RV-Block__Modifier--name('fullWidth') - RV-Fan--auto(base-height, base-width) - min-width min-content - +RV-Element('Base') flex-grow 1 - + +RV-Element('Surface') - flex-grow 1 - min-width calc_width('calc(%s * 1.5)' % base-width) + height calc_height(base-height) + flex-grow 99999 /* ############### @@ -81,10 +70,10 @@ RV-Fan--fullWidth(base-height, base-width) RV-Fan__Base(base-height, base-width) +RV-Element--name('Base') height calc_height(base-height) - width calc_width(base-width) - flex-grow 0 + + flex-basis calc_width(base-width) flex-shrink 0 - flex-basis auto + flex-grow 0 RV-Fan__Surface--fixedHeight(height) +RV-Element__Modifier--name('fixedHeight') @@ -98,20 +87,16 @@ RV-Fan__Surface(base-height, base-width) +RV-Element--name('Surface') overflow hidden height calc_height(base-height) - width calc_width() - min-width calc_width('calc(%s * 1.5)' % base-width) - - flex-grow 20 - flex-shrink 0 flex-basis calc_width(base-width) + flex-grow 1 /* ############ * Block Mixin * ############ */ -RV-Fan() +RV-Fan(base-height, base-width) display flex position relative - min-width min-content + min-width base-width /* ######### * CSS-Class @@ -124,7 +109,7 @@ RV-Fan() --inner-spacing 0px - RV-Fan() + RV-Fan(--base-height, --base-width) +RV-Element() RV-Fan__Surface(--base-height, --base-width) diff --git a/components/01_Layouts/fan/fan.config.json b/components/01_Layouts/fan/fan.config.json index 556cbbd..dc8b054 100644 --- a/components/01_Layouts/fan/fan.config.json +++ b/components/01_Layouts/fan/fan.config.json @@ -18,13 +18,6 @@ "context": { "modifier": "--auto" } - }, - { - "name": "FullWidth", - "context": { - "modifier": "--fullWidth" - } } - ] } \ No newline at end of file diff --git a/components/04_Molecules/teaser/_teaser.styl b/components/04_Molecules/teaser/_teaser.styl index 115fcda..59f1022 100644 --- a/components/04_Molecules/teaser/_teaser.styl +++ b/components/04_Molecules/teaser/_teaser.styl @@ -6,7 +6,7 @@ }) - RV-Fan() + RV-Fan(--image-height, --image-width) RV-BoxShadow() RV-BoxShadow--drop(--shadow-color)