From 8275d2960de618f76d92c7ee6b45aa18d54b4d11 Mon Sep 17 00:00:00 2001 From: reverend Date: Fri, 12 Mar 2021 16:22:23 +0100 Subject: [PATCH] Horsin' around --- components/00_Tools/_bemGenerator.styl | 56 +- components/01_Layouts/_layouts.styl | 4 +- .../01_Layouts/breakPoint/breakPoint.hbs | 13 +- components/01_Layouts/fan/_fan.styl | 93 +- .../05_Molecules/pagination/_pagination.styl | 3 + components/_components.styl | 2 +- public/rcss.css | 1268 ++--------------- 7 files changed, 187 insertions(+), 1252 deletions(-) diff --git a/components/00_Tools/_bemGenerator.styl b/components/00_Tools/_bemGenerator.styl index 4f7c9df..fed3b87 100644 --- a/components/00_Tools/_bemGenerator.styl +++ b/components/00_Tools/_bemGenerator.styl @@ -48,8 +48,11 @@ apply_alias_stack(name) auto_name(delimiter) if length(called-from) < 3 return null - name = split(delimiter, called-from[2])[-1] - if name in ('RV-Element' 'RV-Block' 'RV-Element--modifier' 'RV-Block--modifier') + block_name = called-from[2] + if delimiter == null + return block_name + name = split(delimiter, block_name)[-1] + if name in ('RV-Element' 'RV-Block' 'RV-Block--shorthand' 'RV-Element--modifier' 'RV-Block--modifier' 'RV-Generate') return null return name @@ -82,13 +85,13 @@ is_any_parent_nested() return true return false -RV-Level(name, name_delimiter, allowed_parent_levels, selector_callback, squash_if_parent_nested=false) - if name == null - name = auto_name(name_delimiter) +RV-Level(name_delimiter, allowed_parent_levels=null, selector_callback, squash_if_parent_nested=false) + name = auto_name(name_delimiter) + p(called-from) not_in_parent = true for parent_level in allowed_parent_levels not_in_parent = not_in_parent && not_nested_in(parent_level) - if not_in_parent || is_nested_in('RV-Squash') + if not_in_parent //|| is_nested_in('RV-Squash') {block} else if is_nested() store_alias(name) @@ -108,6 +111,11 @@ RV-Level(name, name_delimiter, allowed_parent_levels, selector_callback, squash_ {selector_name} {block} +// RV-Fan--horizontal RV-Fan--horizontal __ Base -- wurst +// RV-BreakPoint__Item--outside RV-Fan--horizontal__Base RV-Fan--horizontal + + + RV-Block(name) .{name} @@ -115,29 +123,39 @@ RV-Block(name) _bem_context._alias_map = {} _bem_context._alias_stacks = {} + +RV-Generate() + {block} + + _bem_context._alias_map = {} + _bem_context._alias_stacks = {} + +RV-Block() + +RV-Level(null, ('RV-Generate'), @(name){ + define('current_block', name, true) + return '.'+name + }) + {block} RV-Block--shorthand(name) +RV-Block(name) {block} - -RV-Element(name=null) - +RV-Level(name, '__', ('RV-Block' 'RV-Block--modifier'), @(name){ - if is_nested_in('RV-Block--modifier') { - return '& ^[-1]__' + name - } - else { - return '& &__' + name - } + +RV-Element() + +RV-Level('__', ('RV-Generate' 'RV-Block--modifier'), @(name){ + return '& .' + current_block +'__' + name }) {block} -RV-Element--modifier(name=null) - +RV-Level(name, '--', ('RV-Element'), @(name){return '&--' + name}, true) +RV-Element--modifier() + +RV-Level('--', ('RV-Element'), @(name){return '&--' + name}, true) {block} -RV-Block--modifier(name=null) - +RV-Level(name, '--', ('RV-Block' 'RV-Block--shorthand'), @(name){return '&--' + name}, true) +RV-Block--modifier() + +RV-Level('--', ('RV-Generate' 'RV-Block--shorthand'), @(name){ + '.' + current_block +'--' + name + }, true) if is_nested_in('RV-Block--shorthand') && length(called-from) > 0 mixin_name = split('--', called-from[0])[0] convert(unquote(mixin_name)+'()') diff --git a/components/01_Layouts/_layouts.styl b/components/01_Layouts/_layouts.styl index 43a1bf1..31cd680 100644 --- a/components/01_Layouts/_layouts.styl +++ b/components/01_Layouts/_layouts.styl @@ -1,4 +1,6 @@ -@import 'flexRow/_flexRow' +/*@import 'flexRow/_flexRow' @import 'flexGrid/_flexGrid' +*/ @import 'breakPoint/_breakPoint' + @import 'fan/_fan' \ No newline at end of file diff --git a/components/01_Layouts/breakPoint/breakPoint.hbs b/components/01_Layouts/breakPoint/breakPoint.hbs index 98865b8..ff2f3b3 100644 --- a/components/01_Layouts/breakPoint/breakPoint.hbs +++ b/components/01_Layouts/breakPoint/breakPoint.hbs @@ -6,22 +6,13 @@ }
-
-
ItemItem
-
Larger
-
-
Content
-
-
-
ItemItem
-
Smaller
-
-
ItemItem
+
+
Larger
\ No newline at end of file diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl index 18b5974..13f1b23 100644 --- a/components/01_Layouts/fan/_fan.styl +++ b/components/01_Layouts/fan/_fan.styl @@ -5,10 +5,26 @@ * can be right of the base or below. */ -/* ###################### +/** ##################### * Block Modifiers Mixins * ###################### */ +RV-Fan--horizontal__Surface() + +RV-Element() + RV-BreakPoint__Item(--localBreakPoint) + +RV-Fan--horizontal__Base() + +RV-Element() + RV-BreakPoint__Item(--localBreakPoint) + RV-BreakPoint__Item--outside() + + flex-basis base-width + flex-grow 0 + +RV-Fan--horizontal__Base--wurst() + +RV-Element--modifier() + --wurst wasser + /* * Base on the left, Surface on the right * Base is fixed, given size, Surface is given height @@ -20,21 +36,21 @@ RV-Fan--horizontal(base-height, base-width) localBreakPoint: 'calc(2 * %s)' % base-width }) RV-BreakPoint(--localBreakPoint) - - +RV-Element('Surface') - RV-BreakPoint__Item(--localBreakPoint) - - +RV-Element('Base') - RV-BreakPoint__Item(--localBreakPoint) - +RV-Squash() - RV-BreakPoint__Item--outside() - - flex-basis base-width - flex-grow 0 + RV-Fan--horizontal__Surface() + +RV-Element() + RV-Fan--horizontal__Base() + RV-Fan--horizontal__Base--wurst() RV-BreakPoint--horizontal() min-width base-width + +RV-Fan--vertical__Surface() + +RV-Element() + width base-width + min-width initial + min-height base-height + /* * Base above, Surfce below * Base is fixed, given size, base is given width @@ -45,15 +61,16 @@ RV-Fan--vertical(base-height, base-width) flex-direction column width base-width min-width initial - - +RV-Element('Surface') - width base-width - min-width initial - min-height base-height - - +RV-Element--modifier('fixedHeight') - --wurst wasserererer + RV-Fan--vertical__Surface() +RV-Fan--auto__Base() + +RV-Element() + flex-grow 1 + +RV-Fan--auto__Surface() + +RV-Element() + box-sizing border-box + flex-grow 99999 /* * Initialy horizontal, changes to vertical when @@ -63,13 +80,9 @@ RV-Fan--vertical(base-height, base-width) RV-Fan--auto(base-height, base-width) +RV-Block--modifier() flex-flow row wrap - - +RV-Element('Base') - flex-grow 1 - - +RV-Element('Surface') - box-sizing border-box - flex-grow 99999 + + RV-Fan--auto__Base() + RV-Fan--auto__Surface() /* ############### @@ -116,25 +129,25 @@ RV-Fan__Surface(base-height, base-width) * Block Mixin * ############ */ RV-Fan(base-height, base-width) - display flex - position relative - min-width min-content + +RV-Block() + RV-CSSParameter({ + base-height: base-height, + base-width: base-width + }) + display flex + position relative + min-width min-content -+RV-Block('RV-Fan') - RV-CSSParameter({ - base-height: 280px, - base-width: 320px - }) - - RV-Fan(--base-height, --base-width) ++RV-Generate() + RV-Fan(280px, 320px) RV-Fan__Base(--base-height, --base-width) - + +RV-Element() RV-Fan__Surface(--base-height, --base-width) RV-Fan__Surface--fixedHeight(base-height) RV-Fan__Surface--fixedWidth(base-width) - + RV-Fan--auto(--base-height, --base-width) RV-Fan--vertical(--base-height, --base-width) RV-Fan--horizontal(--base-height, --base-width) - \ No newline at end of file + \ No newline at end of file diff --git a/components/05_Molecules/pagination/_pagination.styl b/components/05_Molecules/pagination/_pagination.styl index e2434b8..8fce5c0 100644 --- a/components/05_Molecules/pagination/_pagination.styl +++ b/components/05_Molecules/pagination/_pagination.styl @@ -20,6 +20,7 @@ RV-Pagination__Item(breakPoint) RV-BreakPoint--horizontal() RV-FlexRow__Item--narrower() flex-basis 100px + margin-right -.1rem +RV-Element('Forwards') RV-BreakPoint(--navigationBreakPoint) @@ -28,6 +29,7 @@ RV-Pagination__Item(breakPoint) RV-BreakPoint--horizontal() RV-FlexRow__Item--narrower() flex-basis 100px + margin-left -.1rem +RV-Element('Sites') RV-BreakPoint(--breakPoint) @@ -59,6 +61,7 @@ RV-Pagination__Item(breakPoint) border-radius .2rem display flex justify-content center + //margin 0 -.5rem .RV-Link RV-BreakPoint__Item(--size) RV-BreakPoint__Item--outside() diff --git a/components/_components.styl b/components/_components.styl index e148862..96fe44d 100644 --- a/components/_components.styl +++ b/components/_components.styl @@ -1,6 +1,6 @@ @import '00_Tools/_tools' @import '01_Layouts/_layouts' -@import '02_ContentShape/_contentShape' +/*@import '02_ContentShape/_contentShape' @import '03_Styles/_styles' @import '04_Atoms/_atoms' @import '05_Molecules/_molecules' diff --git a/public/rcss.css b/public/rcss.css index 4042558..eec3da7 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -1,219 +1,7 @@ -.RV-Dummy { - background-color: #f4a460; -} -.RV-Dummy__Landscape { - min-width: 200px; - width: 100%; - min-height: 130px; -} -.RV-Dummy__Portrait { - min-width: 130px; - width: 100%; - min-height: 200px; -} -.RV-Dummy__Square { - min-width: 300px; - width: 100%; - min-height: 300px; -} -.RV-Dummy__Square--large { - height: 500px; - width: 500px; -} -.RV-Dummy__Square--small { - height: 100px; - width: 100px; -} -.RV-Dummy--square { - height: 350px; - width: 350px; -} -.RV-Dummy--portrait { - height: 350px; - width: 150px; -} -.RV-Dummy--landscape { - width: 350px; - height: 150px; -} -.RV-Dummy--red { - background-color: #d8583e; -} -.RV-Dummy:nth-child(2n) { - background-color: #6495ed; -} -.RV-Dummy:nth-child(3n) { - background-color: #90ee90; -} -.RV-Dummy--oranage { - background-color: #f4a460; -} -.RV-Dummy--blue { - background-color: #6495ed; -} -.RV-Dummy--green { - background-color: #90ee90; -} -.RV-Dummy--red { - background-color: #ce6d6d; -} -.RV-Dummy--yellow { - background-color: #eae144; -} -.RV-ContentCrop { - display: block; - overflow: hidden; - height: calc(100% - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); -} -.RV-ContentCrop__--ellipsis:after { - position: relative; - display: block; - bottom: 1.2em; - left: calc(100% - 3ch); - content: '...'; - font-size: 1.2em; - min-width: 2em; - background-color: #fff; - padding: 0 2px; -} -.RV-ContentCrop__--fade:after { - background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); - display: block; - content: '###'; - color: transparent; - opacity: 1; - position: relative; - top: -30px; - width: 100%; - height: 30px; - z-index: 10; -} -.RV-ContentCrop--bottom .RV-Image * { - object-position: bottom; -} -.RV-ContentCrop--top .RV-Image * { - object-position: top; -} -.RV-ContentCrop--right .RV-Image * { - object-position: right; -} -.RV-ContentCrop--left .RV-Image * { - object-position: left; -} -.RV-ContentCrop--center .RV-Image * { - object-position: center; -} -.RV-ContentCrop--square { - width: 100%; - padding-top: 100%; - position: relative; -} -.RV-ContentCrop--square .RV-Image *, -.RV-ContentCrop--square div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-ContentCrop--circle { - border-radius: 50%; - width: 100%; - padding-top: 100%; - position: relative; -} -.RV-ContentCrop--circle .RV-Image *, -.RV-ContentCrop--circle div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-ContentCrop .RV-Image { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} -.RV-ContentCrop .RV-Text { - overflow: hidden; - display: block; - position: relative; - text-overflow: ellipsis; - background-color: #fff; - line-height: 1.1; - max-height: 334.40000000000003px; - padding: 0; - margin: 0; -} -.RV-FullWidthContent { - width: 100%; -} -.RV-FullWidthContent__Item { - width: 100%; -} -.RV-FlexRow { - display: flex; - height: 100%; - --width: 100px; - --localBreakPoint: 500px; - --mediaBreakPoint: 100vw; -} -.RV-FlexRow__Item { - flex-basis: max-content; - flex-grow: 3; - flex-shrink: 3; -} -.RV-FlexRow__Item--narrower { - flex-grow: 1; - flex-shrink: 5; -} -.RV-FlexRow__Item--narrow { - flex-grow: 2; - flex-shrink: 4; -} -.RV-FlexRow__Item--wide { - flex-grow: 4; - flex-shrink: 2; -} -.RV-FlexRow__Item--wider { - flex-grow: 5; - flex-shrink: 1; -} -.RV-FlexRow__Item--narrower { - flex-grow: 1; - flex-shrink: 5; -} -.RV-FlexRow__Item--half { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 50%; -} -.RV-FlexRow__Item--third { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 33.333333333333336%; -} -.RV-FlexRow__Item--quarter { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 25%; -} -.RV-FlexRow__Item--content { - flex-grow: 0; - flex-shrink: 0; - flex-basis: max-content; -} -.RV-FlexRow--auto { - flex-direction: row; -} -.RV-FlexRow--vertical { - flex-direction: column; -} -.RV-FlexRow--breakPoint { - flex-wrap: wrap; + { + --breakPoint: 500px; + --fixedSize: 100px; + overflow-y: hidden; margin: 0; padding: 0; top: 0; @@ -225,1002 +13,97 @@ --inner-spacing: 0px; --outer-spacing: 0px; gap: 0px; -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(i), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(i)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint:only-child { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20), -.RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { - min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); -} -@media (max-width: var(--mediaBreakPoint)) { - .RV-FlexRow--breakPoint { - flex-direction: row; - } -} -.RV-FlexRow--breakPoint .RV-FlexRow__Item { - min-width: initial; - flex-basis: calc(var(--localBreakPoint) * 999 - 100% * 999); + flex-basis: calc(var(--breakPoint) * 999 - 100% * 999); overflow: hidden; -} -.RV-FlexRow--auto { - flex-direction: row; - flex-wrap: wrap; -} -.RV-FlexGrid { - --item-height: 300px; - --item-width: 300px; - display: grid; - grid-template-columns: repeat(auto-fill, var(var(--item-width))); -} -.RV-FlexGrid__Item { - height: calc(var(--item-height) - calc(2*var(--inner-spacing))); -} -.RV-FlexGrid__Item > * { + --outer-spacing: 0; + --inner-spacing: 0; + flex-wrap: nowrap; + flex-direction: column; + flex-wrap: nowrap; height: 100%; - width: 100%; } -.RV-FlexGrid--autoWidth { - grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); - grid-template-rows: repeat(auto-fill, minmax(var(--item-height), 1fr)); - grid-auto-rows: minmax(var(--item-height), 1fr); +& { + --inner-spacing: 0; } -.RV-FlexGrid--fixedSize { - grid-template-rows: repeat(auto-fill, minmax(var(--item-height), 1fr)); - grid-auto-rows: minmax(var(--item-height), 1fr); - grid-template-columns: repeat(auto-fill, var(--item-width)); - justify-content: space-between; +--outside { + flex-shrink: 999; } -.RV-FlexGrid--masonry { - display: block; - column-count: auto; - column-width: var(--item-width); +--inside { + flex-grow: 0; } -.RV-FlexGrid--masonry .RV-FlexGrid__Item { - display: inline-block; - width: 100%; +.current_block__null--null { + margin-bottom: -100vh; +} +.current_block__null--null { + margin-bottom: unset; height: unset; - margin-bottom: var(--inner-spacing); } -.RV-FlexGrid--masonry .RV-FlexGrid__Item > * { - height: auto; -} -.RV-FlexGrid--verticalMasonry { - display: block; - column-count: auto; - column-width: var(--item-width); -} -.RV-FlexGrid--verticalMasonry .RV-FlexGrid__Item { - display: inline-block; +.current_block__null--null { + margin-bottom: unset; height: unset; - margin-bottom: var(--inner-spacing); -} -.RV-FlexGrid--verticalMasonry .RV-FlexGrid__Item > * { - height: auto; -} -.RV-FlexGrid--horizontalMasonry { - display: flex; - flex-direction: row; - flex-wrap: wrap; -} -.RV-FlexGrid--horizontalMasonry .RV-FlexGrid__Item { - height: calc(var(--item-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - width: calc(max-content - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .RV-Fan { --base-height: 280px; --base-width: 320px; - --inner-spacing: 0px; display: flex; position: relative; min-width: min-content; } +.RV-Fan__Base { + box-sizing: border-box; + flex-basis: var(--base-width); + flex-shrink: 0; + flex-grow: 0; + height: var(--base-height); + width: var(--base-width); +} +.RV-Fan__Base > * { + height: calc(100% - (2 * var(--outer-spacing))); + width: calc(100% - calc(2 * var(--outer-spacing))); +} .RV-Fan__Surface { overflow: hidden; - height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - min-width: calc(calc(var(--base-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - flex-grow: 20; - flex-shrink: 0; - flex-basis: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); + box-sizing: border-box; + height: var(--base-height); + flex-basis: var(--base-width); + min-width: var(--base-width); + flex-grow: 1; } -.RV-Fan__Surface--fixedWidth { - max-width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); +.RV-Fan__Surface > * { + height: calc(100% - (2 * var(--outer-spacing))); + width: calc(100% - calc(2 * var(--outer-spacing))); } .RV-Fan__Surface--fixedHeight { - height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); + height: base-height; + box-sizing: border-box; } -.RV-Fan__Base { - height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; -} -.RV-Fan--fullWidth { - flex-flow: row wrap; - min-width: initial; - min-width: min-content; -} -.RV-Fan--fullWidth .RV-Fan__Surface { - min-width: calc(calc(var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - width: calc(calc(100% - var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - flex-grow: unset; - flex-basis: unset; -} -.RV-Fan--fullWidth .RV-Fan__Base { - flex-grow: 1; -} -.RV-Fan--fullWidth .RV-Fan__Surface { - flex-grow: 1; - min-width: calc(calc(var(--base-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); -} -.RV-Fan--vertical { - flex-direction: column; - width: max-content; - min-width: initial; -} -.RV-Fan--vertical .RV-Fan__Surface { - width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - min-width: initial; - min-height: var(--base-height); -} -.RV-Fan--horizontal { - flex-direction: row; -} -.RV-Fan--horizontal .RV-Fan__Surface { - min-width: calc(calc(var(--base-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); +.RV-Fan__Surface--fixedWidth { + max-width: base-width; + box-sizing: border-box; } .RV-Fan--auto { flex-flow: row wrap; - min-width: initial; +} +.RV-Fan--auto .RV-Fan__Base { + flex-grow: 1; } .RV-Fan--auto .RV-Fan__Surface { - min-width: calc(calc(var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - width: calc(calc(100% - var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - flex-grow: unset; - flex-basis: unset; + box-sizing: border-box; + flex-grow: 99999; } -.RV-Alignment { - display: grid; -} -.RV-Alignment--top { - align-content: start; -} -.RV-Alignment--bottom { - align-content: end; -} -.RV-Alignment--left { - justify-content: start; -} -.RV-Alignment--right { - justify-content: end; -} -.RV-Alignment--horizontalCenter { - justify-content: center; -} -.RV-Alignment--verticalCenter { - align-items: center; -} -.RV-Alignment--center { - align-items: center; - justify-content: center; -} -.RV-Spacing__Outer--small { - --outer-spacing: 10px; - margin: var(--outer-spacing); -} -.RV-Spacing__Outer--small * > { - --outer-spacing: 0; -} -.RV-Spacing__Outer--medium { - --outer-spacing: 25px; - margin: var(--outer-spacing); -} -.RV-Spacing__Outer--medium * > { - --outer-spacing: 0; -} -.RV-Spacing__Outer--large { - --outer-spacing: 35px; - margin: var(--outer-spacing); -} -.RV-Spacing__Outer--large * > { - --outer-spacing: 0; -} -.RV-Spacing__Inner--small { - --inner-spacing: 10px; - padding: var(--inner-spacing); - gap: var(--inner-spacing); - column-gap: var(--inner-spacing); -} -.RV-Spacing__Inner--small * > { - --inner-spacing: 0; -} -.RV-Spacing__Inner--medium { - --inner-spacing: 25px; - padding: var(--inner-spacing); - gap: var(--inner-spacing); - column-gap: var(--inner-spacing); -} -.RV-Spacing__Inner--medium * > { - --inner-spacing: 0; -} -.RV-Spacing__Inner--large { - --inner-spacing: 35px; - padding: var(--inner-spacing); - gap: var(--inner-spacing); - column-gap: var(--inner-spacing); -} -.RV-Spacing__Inner--large * > { - --inner-spacing: 0; -} -.RV-ElementList { - display: flex; - height: 100%; - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - gap: 0; - --inner-spacing: 0px; - --outer-spacing: 0px; - list-style-type: none; -} -.RV-ElementList__Item { - flex-basis: max-content; - flex-grow: 3; - flex-shrink: 3; -} -.RV-BoxShadow { - --color: #6b5690; - position: relative; - background-color: #fff; -} -.RV-BoxShadow--simple { - box-shadow: 0 0 10px 3px var(--color); -} -.RV-BoxShadow--liftedCorners:before, -.RV-BoxShadow--liftedCorners:after { - bottom: 15px; - left: 10px; - width: 50%; - height: 20%; - box-shadow: 0 15px 8px var(--color); - transform: rotate(-5deg); -} -.RV-BoxShadow--liftedCorners:after { - right: 10px; - left: auto; - transform: rotate(5deg); -} -.RV-BoxShadow--levitating { - box-shadow: var(--color) 0px 1px 1px 0px inset, var(--color) 0px 40px 80px -15px, var(--color) 0px 30px 60px -30px; -} -.RV-BoxShadow--stacked { - --color: 107, 86, 144; - box-shadow: rgba(var(--color), 0.4) 0px 5px, rgba(var(--color), 0.3) 0px 10px, rgba(var(--color), 0.2) 0px 15px, rgba(var(--color), 0.1) 0px 20px, rgba(var(--color), 0.05) 0px 25px; -} -.RV-BoxShadow--drop { - position: relative; - box-shadow: 0 1px 4px var(--color); -} -.RV-BoxShadow--drop:after { - box-shadow: 0 0 40px var(--color); - bottom: 0px; - left: 10%; - right: 10%; - width: 80%; - height: 50%; - border-radius: 100%; -} -.RV-BoxShadow--solid { - border: 8px solid var(--color); - border-radius: 14px; - padding: 8px; - margin: -8px; -} -.RV-BoxShadow:before, -.RV-BoxShadow:after { - content: ''; - position: absolute; - z-index: -2; -} -.RV-Iconized__Icon { - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - gap: 0; - --inner-spacing: 0px; - --outer-spacing: 0px; -} -.RV-Iconized--extraSmall .RV-Iconized__Icon { - width: 1em; - height: 1em; - position: relative; - top: 0.125em; -} -.RV-Iconized--small { - top: -0.25em; -} -.RV-Iconized--small .RV-Iconized__Icon { - width: 1.5em; - height: 1.5em; - position: relative; - top: 0.45em; -} -.RV-Iconized--medium { - top: -0.5em; -} -.RV-Iconized--medium .RV-Iconized__Icon { - width: 2em; - height: 2em; - position: relative; - top: 0.625em; -} -.RV-Iconized--large { - top: -1.03073em; -} -.RV-Iconized--large .RV-Iconized__Icon { - width: 3em; - height: 3em; - position: relative; - top: 1.15573em; -} -.RV-Iconized--huge { - top: -2.05em; -} -.RV-Iconized--huge .RV-Iconized__Icon { - width: 5em; - height: 5em; - position: relative; - top: 2.175em; -} -.RV-Button { - --size: 25px; - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - gap: 0; - --inner-spacing: 0px; - --outer-spacing: 0px; - background-color: #f00; - line-height: 1; - overflow: hidden; - font-family: sans-serif; - background-color: #aac7da; - color: #fbd974; - text-decoration: none; - align-items: center; - display: inline-flex; - border-radius: 6px; -} -.RV-Button__Icon { - width: min-content; - background-color: #457b9d; - padding: var(var(--size)); -} -.RV-Button__Icon .RV-Image { - height: calc(var(--size) * 2.5); -} -.RV-Button__Icon--outwardsArrow { - margin-right: calc(var(--size) * 1.2); - margin-right: calc(var(--size) * 2); -} -.RV-Button__Icon--outwardsArrow, -.RV-Button__Icon--outwardsArrow * { - z-index: 10; - position: relative; -} -.RV-Button__Icon--outwardsArrow:after, -.RV-Button__Icon--outwardsArrow:before { - content: ''; - width: 50%; - height: 110%; - z-index: 5; - background-color: inherit; - position: absolute; -} -.RV-Button__Icon--outwardsArrow .RV-Image { - left: calc(var(--size) * 0.7); -} -.RV-Button__Icon--outwardsArrow:after { - transform: rotate(35deg); - left: 70%; - top: 25%; -} -.RV-Button__Icon--outwardsArrow:before { - transform: rotate(-35deg); - left: 70%; - top: -37%; -} -.RV-Button__Icon--inwardsArrow { - margin-right: calc(var(--size) * 1.2); -} -.RV-Button__Icon--inwardsArrow, -.RV-Button__Icon--inwardsArrow * { - z-index: 10; - position: relative; -} -.RV-Button__Icon--inwardsArrow:after, -.RV-Button__Icon--inwardsArrow:before { - content: ''; - width: 50%; - height: 110%; - z-index: 5; - background-color: inherit; - position: absolute; -} -.RV-Button__Icon--inwardsArrow .RV-Image { - left: calc(var(--size) * 0.5); -} -.RV-Button__Icon--inwardsArrow:after { - transform: rotate(-35deg); - left: 70%; - top: 25%; -} -.RV-Button__Icon--inwardsArrow:before { - transform: rotate(35deg); - left: 70%; - top: -35%; -} -.RV-Button__Icon--forwardSlope { - margin-right: calc(var(--size) * 2); - margin-right: calc(var(--size) * 1.2); -} -.RV-Button__Icon--forwardSlope .RV-Image { - left: calc(var(--size) * 0.7); -} -.RV-Button__Icon--forwardSlope:after { - transform: rotate(-15deg); - top: 0%; -} -.RV-Button__Icon--forwardSlope, -.RV-Button__Icon--forwardSlope * { - z-index: 10; - position: relative; -} -.RV-Button__Icon--forwardSlope:after, -.RV-Button__Icon--forwardSlope:before { - content: ''; - width: 50%; - height: 110%; - z-index: 5; - background-color: inherit; - position: absolute; -} -.RV-Button__Icon--backwardSlope { - margin-right: calc(var(--size) * 2); - margin-right: calc(var(--size) * 1.2); -} -.RV-Button__Icon--backwardSlope .RV-Image { - left: calc(var(--size) * 0.7); -} -.RV-Button__Icon--backwardSlope:after { - transform: rotate(15deg); - top: -10%; -} -.RV-Button__Icon--backwardSlope, -.RV-Button__Icon--backwardSlope * { - z-index: 10; - position: relative; -} -.RV-Button__Icon--backwardSlope:after, -.RV-Button__Icon--backwardSlope:before { - content: ''; - width: 50%; - height: 110%; - z-index: 5; - background-color: inherit; - position: absolute; -} -.RV-Button__Text { - font-size: calc(var(--size) * 1.65); - background-color: #aac7da; - padding: var(var(--size)); -} -.RV-Button--pill { - border-radius: calc(var(--size) + var(--line-height) * 16px); - padding-left: calc(1.5 * var(--size)); - padding-right: calc(1.5 * var(--size)); -} -.RV-Button--link { - border: none; - border-radius: 0px; - color: #457b9d; -} -.RV-Button--link, -.RV-Button--link * { - background-color: transparent; - margin: 0; -} -.RV-Button--link .RV-Button__Icon { - padding-right: calc(var(--size) / 4); - padding-left: calc(var(--size) / 4); -} -.RV-Button--small { - --size: 10px; -} -.RV-Button--small .RV-Button__Icon .RV-Image { - height: calc(var(--size) * 1.8); -} -.RV-Button--medium { - --size: 15px; -} -.RV-Button--large { - --size: 17.5px; -} -.RV-Button--border { - border: 3px solid #457b9d; - color: #457b9d; - border-radius: 0px; -} -.RV-Button--border, -.RV-Button--border * { - background-color: transparent; -} -.RV-Button--border .RV-Button__Icon { - background-color: #aac7da; -} -.RV-OverlayButton__Item { - position: relative; -} -.RV-OverlayButton__Item:hover > * { - opacity: 1; -} -.RV-OverlayButton__Button { - text-align: center; - display: inline-block; - position: absolute; - background-color: #f5f5dc; - margin: 10px; - opacity: 0.2; - border-radius: 10px; - text-decoration: none; - align-items: center; - justify-content: center; - width: 50px; - height: 50px; - font-size: 25px; - line-height: 25px; -} -.RV-OverlayButton__Button--circle { - border-radius: 50%; -} -.RV-OverlayButton__Button--topRight { - right: 0; - top: 0; -} -.RV-OverlayButton__Button--small { - width: 30px; - height: 30px; - font-size: 15px; - line-height: 15px; -} -.RV-OverlayButton__Button--medium { - width: 50px; - height: 50px; - font-size: 25px; - line-height: 25px; -} -.RV-OverlayButton__Button--large { - width: 70px; - height: 70px; - font-size: 35px; - line-height: 35px; -} -.RV-OverlayButton__Row { - align-items: center; - justify-content: center; - --inner-spacing: 25px; - padding: var(--inner-spacing); - gap: var(--inner-spacing); - column-gap: var(--inner-spacing); - position: absolute; - bottom: 0; - height: 4em; - opacity: 0.2; - width: 100%; - justify-content: center; - background-color: rgba(255,255,255,0.5); - padding-left: 0; - padding-right: 0; -} -.RV-OverlayButton__Row * > { - --inner-spacing: 0; -} -.RV-OverlayButton__Row * { - position: initial; - opacity: initial; - margin: 0; - padding: 0; -} -.RV-Teaser { - --image-height: 300px; - --image-width: 300px; - --shadow-color: #6b5690; - display: flex; - position: relative; - min-width: min-content; - position: relative; - background-color: #fff; - position: relative; - box-shadow: 0 1px 4px var(--shadow-color); - flex-flow: row wrap; - min-width: initial; - min-width: min-content; -} -.RV-Teaser__Image { - height: calc(var(--image-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - width: calc(var(--image-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; -} -.RV-Teaser__Preview { - overflow: hidden; - height: calc(var(--image-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - min-width: calc(calc(var(--image-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - flex-grow: 20; - flex-shrink: 0; - flex-basis: calc(var(--image-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - --inner-spacing: 25px; - padding: var(--inner-spacing); - gap: var(--inner-spacing); - column-gap: var(--inner-spacing); - display: flex; - height: 100%; +.RV-Fan--vertical { flex-direction: column; + width: var(--base-width); + min-width: initial; } -.RV-Teaser__Preview * > { - --inner-spacing: 0; +.RV-Fan--vertical .RV-Fan__Surface { + width: base-width; + min-width: initial; + min-height: base-height; } -.RV-Teaser__Text { - color: #1f271b; - flex: 1; - display: block; - overflow: hidden; - height: calc(100% - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); -} -.RV-Teaser__Text .RV-Image { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} -.RV-Teaser__Text .RV-Text { - overflow: hidden; - display: block; - position: relative; - text-overflow: ellipsis; - background-color: #fff; - line-height: 1.1; - max-height: 334.40000000000003px; - padding: 0; - margin: 0; -} -.RV-Teaser__Text:after { - background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); - display: block; - content: '###'; - color: transparent; - opacity: 1; - position: relative; - top: -30px; - width: 100%; - height: 30px; - z-index: 10; -} -.RV-Teaser__Text .RV-Text { - height: 100%; -} -.RV-Teaser__Headline { - font-family: sans-serif; - color: #457b9d; - justify-self: center; -} -.RV-Teaser__Buttons { - flex-basis: max-content; - flex-grow: 3; - flex-shrink: 3; - flex-grow: 0; - flex-shrink: 0; - flex-basis: max-content; - --inner-spacing: 10px; - padding: var(--inner-spacing); - gap: var(--inner-spacing); - column-gap: var(--inner-spacing); - display: flex; - height: 100%; - flex-direction: row; - padding: 0; -} -.RV-Teaser__Buttons * > { - --inner-spacing: 0; -} -.RV-Teaser__Preview { - min-width: calc(calc(var(--image-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - width: calc(calc(100% - var(--image-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); - height: calc(var(--image-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - flex-grow: unset; - flex-basis: unset; -} -.RV-Teaser__Image { - flex-grow: 1; -} -.RV-Teaser__Preview { - flex-grow: 1; - min-width: calc(calc(var(--image-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); -} -.RV-Teaser:before, -.RV-Teaser:after { - content: ''; - position: absolute; - z-index: -2; -} -.RV-Teaser:after { - box-shadow: 0 0 40px var(--shadow-color); - bottom: 0px; - left: 10%; - right: 10%; - width: 80%; - height: 50%; - border-radius: 100%; -} -.RV-AspectRatio { - position: relative; - overflow: hidden; - height: unset; - width: unset; -} -.RV-AspectRatio * { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-AspectRatio--1to2 { - --aspectX: 1; - --aspectY: 2; - padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); -} -.RV-AspectRatio--1to2:last-child { - margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); -} -.RV-AspectRatio--1to2:only-child { - margin-bottom: 0px; -} -.RV-AspectRatio--2to1 { - --aspectX: 2; - --aspectY: 1; - padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); -} -.RV-AspectRatio--2to1:last-child { - margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); -} -.RV-AspectRatio--2to1:only-child { - margin-bottom: 0px; -} -.RV-AspectRatio--3to2 { - --aspectX: 3; - --aspectY: 2; - padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); -} -.RV-AspectRatio--3to2:last-child { - margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); -} -.RV-AspectRatio--3to2:only-child { - margin-bottom: 0px; -} -.RV-AspectRatio--4to3 { - --aspectX: 4; - --aspectY: 3; - padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); -} -.RV-AspectRatio--4to3:last-child { - margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); -} -.RV-AspectRatio--4to3:only-child { - margin-bottom: 0px; -} -.RV-AspectRatio--16to9 { - --aspectX: 16; - --aspectY: 9; - padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); -} -.RV-AspectRatio--16to9:last-child { - margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); -} -.RV-AspectRatio--16to9:only-child { - margin-bottom: 0px; -} -.RV-FocalPoint { - --focalX: 50%; - --focalY: 50%; - height: 100%; - width: 100%; - object-fit: cover; - object-position: var(--focalX) var(--focalY); -} -.RV-FocalPoint--upperHalf { - --focalY: 25%; -} -.RV-FocalPoint--lowerHalf { - --focalY: 75%; -} -.RV-FocalPoint--leftHalf { - --focalX: 25%; -} -.RV-FocalPoint--rightHalf { - --focalX: 75%; -} -.RV-Shape--square { - padding-top: 100%; - width: 100%; - position: relative; -} -.RV-Shape--square * { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-Shape--circle { - padding-top: 100%; - width: 100%; - position: relative; -} -.RV-Shape--circle, -.RV-Shape--circle * { - border-radius: 50%; -} -.RV-Shape--circle * { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-Truncation { - --line-height: 1.3; - --height: 350px; - display: block; - overflow: hidden; - position: relative; - height: calc(100% - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); - width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); -} -.RV-Truncation * { - overflow: hidden; - display: block; - position: relative; - text-overflow: ellipsis; - background-color: #fff; - line-height: 1.3; - max-height: 332.8px; - padding: 0; - margin: 0; -} -.RV-Truncation--fade:after { - background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); - display: block; - content: '###'; - color: transparent; - opacity: 1; - position: absolute; - top: calc(var(--height) - 60px); - width: 100%; - height: 50px; - line-height: var(var(--line-height)); - z-index: 10; -} -.RV-Truncation--ellipsis:after { - position: absolute; - display: block; - right: 0; - content: '...'; - background-color: #fff; - padding-left: 5px; - padding-bottom: 10px; - box-shadow: -10px 8px 6px 0px #fff; - line-height: var(var(--line-height)); - top: calc(var(--height) - 40px); -} -* { +.RV-Fan--horizontal { + --localBreakPoint: calc(2 * var(--base-width)); + overflow-y: hidden; margin: 0; padding: 0; top: 0; @@ -1231,4 +114,29 @@ gap: 0; --inner-spacing: 0px; --outer-spacing: 0px; + gap: 0px; + flex-wrap: nowrap; + min-width: var(--base-width); +} +.RV-Fan--horizontal .RV-Fan__Surface { + flex-basis: calc(var(--localBreakPoint) * 999 - 100% * 999); + overflow: hidden; + --outer-spacing: 0; + --inner-spacing: 0; +} +.RV-Fan--horizontal .RV-Fan__Base { + flex-basis: calc(var(--localBreakPoint) * 999 - 100% * 999); + overflow: hidden; + --outer-spacing: 0; + --inner-spacing: 0; + flex-shrink: 999; + flex-basis: var(--base-width); + flex-grow: 0; +} +.RV-Fan--horizontal .RV-Fan__Base--wurst { + --wurst: wasser; +} +.RV-Fan--horizontal .RV-Fan__null { + margin-bottom: unset; + height: unset; }