From 64b21a2c8132cfeee9b93f7be321b33d3bfc6e63 Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 17 Jan 2021 22:54:33 +0100 Subject: [PATCH] Renaming Dicts according to atomic design --- .../{02_Styles => 01_Styles}/_styles.styl | 0 .../boxShadow/_boxShadow.styl | 0 .../boxShadow/boxShadow.hbs | 0 .../boxShadow/boxShadow.json | 0 .../iconized/_iconized.styl | 0 .../iconized/iconized.config.json | 0 .../iconized/iconized.hbs | 0 .../spacing/_spacing.styl | 0 .../spacing/spacing.config.json | 0 .../spacing/spacing.hbs | 0 components/02_Atoms/_atoms.styl | 0 .../_molecules.styl | 0 .../elementList/_elementList.styl | 0 .../elementList/elementList.config.json | 0 .../elementList/elementList.hbs | 0 .../overlayButton/_overlayButton.styl | 0 .../overlayButton/overlayButton.config.json | 0 .../overlayButton/overlayButton.hbs | 0 .../{01_Layouts => 04_Layouts}/_layouts.styl | 0 .../alignment/_alignment.styl | 0 .../alignment/alignment.config.json | 0 .../alignment/alignment.hbs | 0 .../contentCrop/_contentCrop.styl | 0 .../contentCrop/contentCrop.config.json | 0 .../contentCrop/contentCrop.hbs | 0 .../{01_Layouts => 04_Layouts}/fan/_fan.styl | 0 .../fan/fan.config.json | 0 .../{01_Layouts => 04_Layouts}/fan/fan.hbs | 0 .../flexGrid/_flexGrid.styl | 0 .../flexGrid/flexGrid.config.json | 0 .../flexGrid/flexGrid.hbs | 0 .../flexRow/_flexRow.styl | 0 .../flexRow/flexRow.config.json | 0 .../flexRow/flexRow.hbs | 0 .../fullWidthContent/_fullWidthContent.styl | 0 .../fullWidthContent.config.json | 0 .../fullWidthContent/fullWidthContent.hbs | 0 .../sizes/_sizes.styl | 0 .../sizes/sizes.config.json | 0 .../sizes/sizes.hbs | 0 .../_organisms.styl} | 0 .../imageGrid/_imageGrid.styl | 0 .../imageGrid/imageGrid.config.json | 0 .../imageGrid/imageGrid.hbs | 0 .../menu/_menu.styl | 0 .../menu/menu.hbs | 0 .../menu/meun.config.json | 0 components/_components.styl | 15 +- public/rcss.css | 1224 ++++++----------- 49 files changed, 410 insertions(+), 829 deletions(-) rename components/{02_Styles => 01_Styles}/_styles.styl (100%) rename components/{02_Styles => 01_Styles}/boxShadow/_boxShadow.styl (100%) rename components/{02_Styles => 01_Styles}/boxShadow/boxShadow.hbs (100%) rename components/{02_Styles => 01_Styles}/boxShadow/boxShadow.json (100%) rename components/{02_Styles => 01_Styles}/iconized/_iconized.styl (100%) rename components/{02_Styles => 01_Styles}/iconized/iconized.config.json (100%) rename components/{02_Styles => 01_Styles}/iconized/iconized.hbs (100%) rename components/{02_Styles => 01_Styles}/spacing/_spacing.styl (100%) rename components/{02_Styles => 01_Styles}/spacing/spacing.config.json (100%) rename components/{02_Styles => 01_Styles}/spacing/spacing.hbs (100%) create mode 100644 components/02_Atoms/_atoms.styl rename components/{04_Molecules => 03_Molecules}/_molecules.styl (100%) rename components/{04_Molecules => 03_Molecules}/elementList/_elementList.styl (100%) rename components/{04_Molecules => 03_Molecules}/elementList/elementList.config.json (100%) rename components/{04_Molecules => 03_Molecules}/elementList/elementList.hbs (100%) rename components/{04_Molecules => 03_Molecules}/overlayButton/_overlayButton.styl (100%) rename components/{04_Molecules => 03_Molecules}/overlayButton/overlayButton.config.json (100%) rename components/{04_Molecules => 03_Molecules}/overlayButton/overlayButton.hbs (100%) rename components/{01_Layouts => 04_Layouts}/_layouts.styl (100%) rename components/{01_Layouts => 04_Layouts}/alignment/_alignment.styl (100%) rename components/{01_Layouts => 04_Layouts}/alignment/alignment.config.json (100%) rename components/{01_Layouts => 04_Layouts}/alignment/alignment.hbs (100%) rename components/{01_Layouts => 04_Layouts}/contentCrop/_contentCrop.styl (100%) rename components/{01_Layouts => 04_Layouts}/contentCrop/contentCrop.config.json (100%) rename components/{01_Layouts => 04_Layouts}/contentCrop/contentCrop.hbs (100%) rename components/{01_Layouts => 04_Layouts}/fan/_fan.styl (100%) rename components/{01_Layouts => 04_Layouts}/fan/fan.config.json (100%) rename components/{01_Layouts => 04_Layouts}/fan/fan.hbs (100%) rename components/{01_Layouts => 04_Layouts}/flexGrid/_flexGrid.styl (100%) rename components/{01_Layouts => 04_Layouts}/flexGrid/flexGrid.config.json (100%) rename components/{01_Layouts => 04_Layouts}/flexGrid/flexGrid.hbs (100%) rename components/{01_Layouts => 04_Layouts}/flexRow/_flexRow.styl (100%) rename components/{01_Layouts => 04_Layouts}/flexRow/flexRow.config.json (100%) rename components/{01_Layouts => 04_Layouts}/flexRow/flexRow.hbs (100%) rename components/{01_Layouts => 04_Layouts}/fullWidthContent/_fullWidthContent.styl (100%) rename components/{01_Layouts => 04_Layouts}/fullWidthContent/fullWidthContent.config.json (100%) rename components/{01_Layouts => 04_Layouts}/fullWidthContent/fullWidthContent.hbs (100%) rename components/{01_Layouts => 04_Layouts}/sizes/_sizes.styl (100%) rename components/{01_Layouts => 04_Layouts}/sizes/sizes.config.json (100%) rename components/{01_Layouts => 04_Layouts}/sizes/sizes.hbs (100%) rename components/{05_Components/_components.styl => 05_Organisms/_organisms.styl} (100%) rename components/{05_Components => 05_Organisms}/imageGrid/_imageGrid.styl (100%) rename components/{05_Components => 05_Organisms}/imageGrid/imageGrid.config.json (100%) rename components/{05_Components => 05_Organisms}/imageGrid/imageGrid.hbs (100%) rename components/{05_Components => 05_Organisms}/menu/_menu.styl (100%) rename components/{05_Components => 05_Organisms}/menu/menu.hbs (100%) rename components/{05_Components => 05_Organisms}/menu/meun.config.json (100%) diff --git a/components/02_Styles/_styles.styl b/components/01_Styles/_styles.styl similarity index 100% rename from components/02_Styles/_styles.styl rename to components/01_Styles/_styles.styl diff --git a/components/02_Styles/boxShadow/_boxShadow.styl b/components/01_Styles/boxShadow/_boxShadow.styl similarity index 100% rename from components/02_Styles/boxShadow/_boxShadow.styl rename to components/01_Styles/boxShadow/_boxShadow.styl diff --git a/components/02_Styles/boxShadow/boxShadow.hbs b/components/01_Styles/boxShadow/boxShadow.hbs similarity index 100% rename from components/02_Styles/boxShadow/boxShadow.hbs rename to components/01_Styles/boxShadow/boxShadow.hbs diff --git a/components/02_Styles/boxShadow/boxShadow.json b/components/01_Styles/boxShadow/boxShadow.json similarity index 100% rename from components/02_Styles/boxShadow/boxShadow.json rename to components/01_Styles/boxShadow/boxShadow.json diff --git a/components/02_Styles/iconized/_iconized.styl b/components/01_Styles/iconized/_iconized.styl similarity index 100% rename from components/02_Styles/iconized/_iconized.styl rename to components/01_Styles/iconized/_iconized.styl diff --git a/components/02_Styles/iconized/iconized.config.json b/components/01_Styles/iconized/iconized.config.json similarity index 100% rename from components/02_Styles/iconized/iconized.config.json rename to components/01_Styles/iconized/iconized.config.json diff --git a/components/02_Styles/iconized/iconized.hbs b/components/01_Styles/iconized/iconized.hbs similarity index 100% rename from components/02_Styles/iconized/iconized.hbs rename to components/01_Styles/iconized/iconized.hbs diff --git a/components/02_Styles/spacing/_spacing.styl b/components/01_Styles/spacing/_spacing.styl similarity index 100% rename from components/02_Styles/spacing/_spacing.styl rename to components/01_Styles/spacing/_spacing.styl diff --git a/components/02_Styles/spacing/spacing.config.json b/components/01_Styles/spacing/spacing.config.json similarity index 100% rename from components/02_Styles/spacing/spacing.config.json rename to components/01_Styles/spacing/spacing.config.json diff --git a/components/02_Styles/spacing/spacing.hbs b/components/01_Styles/spacing/spacing.hbs similarity index 100% rename from components/02_Styles/spacing/spacing.hbs rename to components/01_Styles/spacing/spacing.hbs diff --git a/components/02_Atoms/_atoms.styl b/components/02_Atoms/_atoms.styl new file mode 100644 index 0000000..e69de29 diff --git a/components/04_Molecules/_molecules.styl b/components/03_Molecules/_molecules.styl similarity index 100% rename from components/04_Molecules/_molecules.styl rename to components/03_Molecules/_molecules.styl diff --git a/components/04_Molecules/elementList/_elementList.styl b/components/03_Molecules/elementList/_elementList.styl similarity index 100% rename from components/04_Molecules/elementList/_elementList.styl rename to components/03_Molecules/elementList/_elementList.styl diff --git a/components/04_Molecules/elementList/elementList.config.json b/components/03_Molecules/elementList/elementList.config.json similarity index 100% rename from components/04_Molecules/elementList/elementList.config.json rename to components/03_Molecules/elementList/elementList.config.json diff --git a/components/04_Molecules/elementList/elementList.hbs b/components/03_Molecules/elementList/elementList.hbs similarity index 100% rename from components/04_Molecules/elementList/elementList.hbs rename to components/03_Molecules/elementList/elementList.hbs diff --git a/components/04_Molecules/overlayButton/_overlayButton.styl b/components/03_Molecules/overlayButton/_overlayButton.styl similarity index 100% rename from components/04_Molecules/overlayButton/_overlayButton.styl rename to components/03_Molecules/overlayButton/_overlayButton.styl diff --git a/components/04_Molecules/overlayButton/overlayButton.config.json b/components/03_Molecules/overlayButton/overlayButton.config.json similarity index 100% rename from components/04_Molecules/overlayButton/overlayButton.config.json rename to components/03_Molecules/overlayButton/overlayButton.config.json diff --git a/components/04_Molecules/overlayButton/overlayButton.hbs b/components/03_Molecules/overlayButton/overlayButton.hbs similarity index 100% rename from components/04_Molecules/overlayButton/overlayButton.hbs rename to components/03_Molecules/overlayButton/overlayButton.hbs diff --git a/components/01_Layouts/_layouts.styl b/components/04_Layouts/_layouts.styl similarity index 100% rename from components/01_Layouts/_layouts.styl rename to components/04_Layouts/_layouts.styl diff --git a/components/01_Layouts/alignment/_alignment.styl b/components/04_Layouts/alignment/_alignment.styl similarity index 100% rename from components/01_Layouts/alignment/_alignment.styl rename to components/04_Layouts/alignment/_alignment.styl diff --git a/components/01_Layouts/alignment/alignment.config.json b/components/04_Layouts/alignment/alignment.config.json similarity index 100% rename from components/01_Layouts/alignment/alignment.config.json rename to components/04_Layouts/alignment/alignment.config.json diff --git a/components/01_Layouts/alignment/alignment.hbs b/components/04_Layouts/alignment/alignment.hbs similarity index 100% rename from components/01_Layouts/alignment/alignment.hbs rename to components/04_Layouts/alignment/alignment.hbs diff --git a/components/01_Layouts/contentCrop/_contentCrop.styl b/components/04_Layouts/contentCrop/_contentCrop.styl similarity index 100% rename from components/01_Layouts/contentCrop/_contentCrop.styl rename to components/04_Layouts/contentCrop/_contentCrop.styl diff --git a/components/01_Layouts/contentCrop/contentCrop.config.json b/components/04_Layouts/contentCrop/contentCrop.config.json similarity index 100% rename from components/01_Layouts/contentCrop/contentCrop.config.json rename to components/04_Layouts/contentCrop/contentCrop.config.json diff --git a/components/01_Layouts/contentCrop/contentCrop.hbs b/components/04_Layouts/contentCrop/contentCrop.hbs similarity index 100% rename from components/01_Layouts/contentCrop/contentCrop.hbs rename to components/04_Layouts/contentCrop/contentCrop.hbs diff --git a/components/01_Layouts/fan/_fan.styl b/components/04_Layouts/fan/_fan.styl similarity index 100% rename from components/01_Layouts/fan/_fan.styl rename to components/04_Layouts/fan/_fan.styl diff --git a/components/01_Layouts/fan/fan.config.json b/components/04_Layouts/fan/fan.config.json similarity index 100% rename from components/01_Layouts/fan/fan.config.json rename to components/04_Layouts/fan/fan.config.json diff --git a/components/01_Layouts/fan/fan.hbs b/components/04_Layouts/fan/fan.hbs similarity index 100% rename from components/01_Layouts/fan/fan.hbs rename to components/04_Layouts/fan/fan.hbs diff --git a/components/01_Layouts/flexGrid/_flexGrid.styl b/components/04_Layouts/flexGrid/_flexGrid.styl similarity index 100% rename from components/01_Layouts/flexGrid/_flexGrid.styl rename to components/04_Layouts/flexGrid/_flexGrid.styl diff --git a/components/01_Layouts/flexGrid/flexGrid.config.json b/components/04_Layouts/flexGrid/flexGrid.config.json similarity index 100% rename from components/01_Layouts/flexGrid/flexGrid.config.json rename to components/04_Layouts/flexGrid/flexGrid.config.json diff --git a/components/01_Layouts/flexGrid/flexGrid.hbs b/components/04_Layouts/flexGrid/flexGrid.hbs similarity index 100% rename from components/01_Layouts/flexGrid/flexGrid.hbs rename to components/04_Layouts/flexGrid/flexGrid.hbs diff --git a/components/01_Layouts/flexRow/_flexRow.styl b/components/04_Layouts/flexRow/_flexRow.styl similarity index 100% rename from components/01_Layouts/flexRow/_flexRow.styl rename to components/04_Layouts/flexRow/_flexRow.styl diff --git a/components/01_Layouts/flexRow/flexRow.config.json b/components/04_Layouts/flexRow/flexRow.config.json similarity index 100% rename from components/01_Layouts/flexRow/flexRow.config.json rename to components/04_Layouts/flexRow/flexRow.config.json diff --git a/components/01_Layouts/flexRow/flexRow.hbs b/components/04_Layouts/flexRow/flexRow.hbs similarity index 100% rename from components/01_Layouts/flexRow/flexRow.hbs rename to components/04_Layouts/flexRow/flexRow.hbs diff --git a/components/01_Layouts/fullWidthContent/_fullWidthContent.styl b/components/04_Layouts/fullWidthContent/_fullWidthContent.styl similarity index 100% rename from components/01_Layouts/fullWidthContent/_fullWidthContent.styl rename to components/04_Layouts/fullWidthContent/_fullWidthContent.styl diff --git a/components/01_Layouts/fullWidthContent/fullWidthContent.config.json b/components/04_Layouts/fullWidthContent/fullWidthContent.config.json similarity index 100% rename from components/01_Layouts/fullWidthContent/fullWidthContent.config.json rename to components/04_Layouts/fullWidthContent/fullWidthContent.config.json diff --git a/components/01_Layouts/fullWidthContent/fullWidthContent.hbs b/components/04_Layouts/fullWidthContent/fullWidthContent.hbs similarity index 100% rename from components/01_Layouts/fullWidthContent/fullWidthContent.hbs rename to components/04_Layouts/fullWidthContent/fullWidthContent.hbs diff --git a/components/01_Layouts/sizes/_sizes.styl b/components/04_Layouts/sizes/_sizes.styl similarity index 100% rename from components/01_Layouts/sizes/_sizes.styl rename to components/04_Layouts/sizes/_sizes.styl diff --git a/components/01_Layouts/sizes/sizes.config.json b/components/04_Layouts/sizes/sizes.config.json similarity index 100% rename from components/01_Layouts/sizes/sizes.config.json rename to components/04_Layouts/sizes/sizes.config.json diff --git a/components/01_Layouts/sizes/sizes.hbs b/components/04_Layouts/sizes/sizes.hbs similarity index 100% rename from components/01_Layouts/sizes/sizes.hbs rename to components/04_Layouts/sizes/sizes.hbs diff --git a/components/05_Components/_components.styl b/components/05_Organisms/_organisms.styl similarity index 100% rename from components/05_Components/_components.styl rename to components/05_Organisms/_organisms.styl diff --git a/components/05_Components/imageGrid/_imageGrid.styl b/components/05_Organisms/imageGrid/_imageGrid.styl similarity index 100% rename from components/05_Components/imageGrid/_imageGrid.styl rename to components/05_Organisms/imageGrid/_imageGrid.styl diff --git a/components/05_Components/imageGrid/imageGrid.config.json b/components/05_Organisms/imageGrid/imageGrid.config.json similarity index 100% rename from components/05_Components/imageGrid/imageGrid.config.json rename to components/05_Organisms/imageGrid/imageGrid.config.json diff --git a/components/05_Components/imageGrid/imageGrid.hbs b/components/05_Organisms/imageGrid/imageGrid.hbs similarity index 100% rename from components/05_Components/imageGrid/imageGrid.hbs rename to components/05_Organisms/imageGrid/imageGrid.hbs diff --git a/components/05_Components/menu/_menu.styl b/components/05_Organisms/menu/_menu.styl similarity index 100% rename from components/05_Components/menu/_menu.styl rename to components/05_Organisms/menu/_menu.styl diff --git a/components/05_Components/menu/menu.hbs b/components/05_Organisms/menu/menu.hbs similarity index 100% rename from components/05_Components/menu/menu.hbs rename to components/05_Organisms/menu/menu.hbs diff --git a/components/05_Components/menu/meun.config.json b/components/05_Organisms/menu/meun.config.json similarity index 100% rename from components/05_Components/menu/meun.config.json rename to components/05_Organisms/menu/meun.config.json diff --git a/components/_components.styl b/components/_components.styl index 254b31c..d77e149 100644 --- a/components/_components.styl +++ b/components/_components.styl @@ -1,12 +1,11 @@ @import '00_Tools/_tools' -@import '02_Styles/_styles' -@import '01_Layouts/_layouts' +@import '01_Styles/_styles' +//@import '02_Atoms/_atoms' +//@import '03_Molecules/_molecules' +@import '04_Layouts/_layouts' +//@import '05_Organisms/_organisms' + * { RV-Reset() -} - -/* -@import '04_Molecules/_molecules' -@import '05_Components/_components' -*/ \ No newline at end of file +} \ No newline at end of file diff --git a/public/rcss.css b/public/rcss.css index b99cdf2..d4bb3c7 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -1,44 +1,47 @@ -@import './pink.css'; .RV-Spacing__Outer--small { margin: 10px; + --outer-spacing: 10px; } .RV-Spacing__Outer--medium { margin: 25px; + --outer-spacing: 25px; } .RV-Spacing__Outer--large { margin: 35px; + --outer-spacing: 35px; } .RV-Spacing__Inner--small { padding: 10px; gap: 10px; column-gap: 10px; + --inner-spacing: 10px; } .RV-Spacing__Inner--medium { padding: 25px; gap: 25px; column-gap: 25px; + --inner-spacing: 25px; } .RV-Spacing__Inner--large { padding: 35px; gap: 35px; column-gap: 35px; + --inner-spacing: 35px; } .RV-BoxShadow { + --color: #6b5690; position: relative; float: left; background-color: #fff; } .RV-BoxShadow:before, .RV-BoxShadow:after { - content: ""; + content: ''; position: absolute; z-index: -2; } .RV-BoxShadow--simple { - box-shadow: 0 0 10px #6b5690; -} -.RV-BoxShadow--raised:after { - box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset; + box-shadow: 0 0 10px 3px var(--color); } .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { @@ -46,16 +49,77 @@ left: 10px; width: 50%; height: 20%; - max-width: 300px; - box-shadow: 0 15px 10px rgba(0,0,0,0.7); - transform: rotate(-3deg); + box-shadow: 0 15px 8px var(--color); + transform: rotate(-5deg); } .RV-BoxShadow--liftedCorners:after { right: 10px; left: auto; - transform: rotate(3deg); + transform: rotate(5deg); } -.RV-Iconized { +.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-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-Iconized__Icon { margin: 0; padding: 0; top: 0; @@ -63,51 +127,7 @@ left: 0; right: 0; border: none; -} -.RV-Iconized__Container { - position: relative; -} -.RV-Iconized__Container--small { - top: -0.25em; -} -.RV-Iconized__Container--medium { - top: -0.5em; -} -.RV-Iconized__Container--large { - top: -1.03073em; -} -.RV-Iconized__Container--huge { - top: -2.05em; -} -.RV-Iconized__Container--extraSmall .RV-Iconized__Icon { - width: 1em; - height: 1em; - position: relative; - top: 0.125em; -} -.RV-Iconized__Container--small .RV-Iconized__Icon { - width: 1.5em; - height: 1.5em; - position: relative; - top: 0.45em; -} -.RV-Iconized__Container--medium .RV-Iconized__Icon { - width: 2em; - height: 2em; - position: relative; - top: 0.625em; -} -.RV-Iconized__Container--large .RV-Iconized__Icon { - width: 3em; - height: 3em; - position: relative; - top: 1.15573em; -} -.RV-Iconized__Container--huge .RV-Iconized__Icon { - width: 5em; - height: 5em; - position: relative; - top: 2.175em; + gap: 0; } .RV-Sizes--half { flex-grow: 0; @@ -127,101 +147,33 @@ flex-basis: 25%; width: 25%; } -.RV-Alignment { - display: grid; +.RV-Sizes--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100px; } -.RV-Alignment--top { - display: grid; - align-content: start; -} -.RV-Alignment--bottom { - display: grid; - align-content: end; -} -.RV-Alignment--left { - display: grid; - justify-content: start; -} -.RV-Alignment--right { - display: grid; - justify-content: end; -} -.RV-Alignment--horizontalCenter { - display: grid; - justify-content: center; -} -.RV-Alignment--verticalCenter { - display: grid; - align-items: center; -} -.RV-Alignment--center { - display: grid; - justify-content: center; - display: grid; - align-items: center; +.RV-Sizes--content { + flex-grow: 0; + flex-shrink: 0; + width: max-content; + flex-basis: max-content; } .RV-ContentCrop { display: block; overflow: hidden; } -.RV-ContentCrop .RV-Image *, -.RV-ContentCrop .RV-Image { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} -.RV-ContentCrop .RV-Text { - overflow: hidden; - display: block; - text-overflow: ellipsis; - line-height: 1.21; - position: relative; - background-color: #fff; - max-height: 96.80000000000001%; - padding: 0; - margin: 0; -} -.RV-ContentCrop .RV-Text * { - margin: 0; - padding-bottom: 19.360000000000003px; -} -.RV-ContentCrop .RV-Text *:last-child { - padding-bottom: unset; -} -.RV-ContentCrop--fade:after { - background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); - display: block; - content: ' '; - opacity: 0.8; - position: relative; - top: -25%; - width: 100%; - height: 25%; - z-index: 10; -} -.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--left .RV-Image * { - object-position: left; -} -.RV-ContentCrop--center .RV-Image * { - object-position: center; +.RV-ContentCrop--bottom .RV-Image * { + object-position: bottom; } .RV-ContentCrop--top .RV-Image * { object-position: top; } -.RV-ContentCrop--bottom .RV-Image * { - object-position: bottom; +.RV-ContentCrop--right .RV-Image * { + object-position: right; +} +.RV-ContentCrop--left .RV-Image * { + object-position: left; } .RV-ContentCrop--center .RV-Image * { object-position: center; @@ -239,158 +191,102 @@ bottom: 0; right: 0; } -.RV-ContentCrop--circle { +.RV-ContentCrop__Image .RV-Image *, +.RV-ContentCrop__Image .RV-Image { width: 100%; - padding-top: 100%; - position: relative; - border-radius: 50%; -} -.RV-ContentCrop--circle .RV-Image *, -.RV-ContentCrop--circle div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-ContentCrop--1to2 { - width: 100%; - padding-top: 200%; - position: relative; -} -.RV-ContentCrop--1to2 .RV-Image * { + height: 100%; object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-ContentCrop--2to1 { - width: 100%; - padding-top: 50%; - position: relative; -} -.RV-ContentCrop--2to1 .RV-Image * { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-ContentCrop--4to3 { - width: 100%; - padding-top: 75%; - position: relative; -} -.RV-ContentCrop--4to3 .RV-Image * { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-ContentCrop--16to9 { - width: 100%; - padding-top: 56.25%; - position: relative; -} -.RV-ContentCrop--16to9 .RV-Image * { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.RV-ContentCrop--3to2 { - width: 100%; - padding-top: 66.66666666666666%; - position: relative; -} -.RV-ContentCrop--3to2 .RV-Image * { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.wurstwasser .Fächer { - --wurst: yeet; -} -.wurstwasser .Fächer .Fächer__BLubb { - color: #000; - --blubb: wasser; -} -.wurstwasser .Fächer .Fächer__BLubb--pp { - --wasser: 'wurst'; -} -.RV-FlexGrid__Container { - display: grid; -} -.RV-FlexGrid__Item { - display: grid; -} -.RV-FlexGrid__Item--top { - display: grid; - align-content: start; -} -.RV-FlexGrid__Item--bottom { - display: grid; - align-content: end; -} -.RV-FlexGrid__Item--left { - display: grid; - justify-content: start; -} -.RV-FlexGrid__Item--right { - display: grid; - justify-content: end; -} -.RV-FlexGrid__Item--horizontalCenter { - display: grid; - justify-content: center; -} -.RV-FlexGrid__Item--verticalCenter { - display: grid; - align-items: center; -} -.RV-FlexGrid__Item--center { - display: grid; - justify-content: center; - display: grid; - align-items: center; -} -.RV-FlexGrid__Container--autoWidth { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); - grid-auto-rows: minmax(300px, 1fr); -} -.RV-FlexGrid__Container--fixedSize { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); - grid-auto-rows: minmax(300px, 1fr); - grid-template-columns: repeat(auto-fill, 300px); - justify-content: space-between; -} -.RV-FlexGrid__Container--masonry { display: block; - column-count: auto; - column-width: 300px; } -.RV-FlexRow__Container { +.RV-ContentCrop__Text { + --cc: 'text'; +} +.RV-ContentCrop__Text .RV-Text { + overflow: hidden; + display: block; + text-overflow: ellipsis; + line-height: 1.1; + position: relative; + background-color: #fff; + max-height: 88%; + padding: 0; + margin: 0; +} +.RV-ContentCrop__Text .RV-Text * { + margin: 0; + padding-bottom: 17.6px; +} +.RV-ContentCrop__Text .RV-Text *:last-child { + padding-bottom: unset; +} +.RV-ContentCrop__Text--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__Text--fade:after { + background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); + display: block; + content: ' '; + opacity: 0.8; + position: relative; + top: -25%; + width: 100%; + height: 25%; + z-index: 10; +} +.RV-FullWidthContent { + width: 100%; +} +.RV-FullWidthContent__Item { + --cc: 'text'; + width: 100%; +} +.RV-FullWidthContent__Item .RV-Text { + overflow: hidden; + display: block; + text-overflow: ellipsis; + line-height: 1.1; + position: relative; + background-color: #fff; + max-height: 88%; + padding: 0; + margin: 0; +} +.RV-FullWidthContent__Item .RV-Text * { + margin: 0; + padding-bottom: 17.6px; +} +.RV-FullWidthContent__Item .RV-Text *:last-child { + padding-bottom: unset; +} +.RV-FullWidthContent__Item .RV-Image *, +.RV-FullWidthContent__Item .RV-Image { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.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--auto { + flex-direction: row; } -.RV-FlexRow__Container--breakPoint { +.RV-FlexRow--vertical { + flex-direction: column; +} +.RV-FlexRow--breakPoint { flex-wrap: wrap; margin: 0; padding: 0; @@ -399,53 +295,107 @@ left: 0; right: 0; border: none; + gap: 0; gap: 0px; } -.RV-FlexRow__Container--breakPoint * { - flex-basis: calc(500px * 999 - 100% * 999); +.RV-FlexRow--breakPoint *:first-child:nth-last-child(1), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(1)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (1 - 1))) / 1 - (2 * var(--spacing-inner))); } -.RV-FlexRow__Container--horizontal { - flex-direction: row; +.RV-FlexRow--breakPoint *:first-child:nth-last-child(2), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(2)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (2 - 1))) / 2 - (2 * var(--spacing-inner))); } -.RV-FlexRow__Container--vertical { - flex-direction: column; +.RV-FlexRow--breakPoint *:first-child:nth-last-child(3), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(3)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (3 - 1))) / 3 - (2 * var(--spacing-inner))); } -.RV-FlexRow__Container--auto { +.RV-FlexRow--breakPoint *:first-child:nth-last-child(4), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(4)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (4 - 1))) / 4 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(5), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(5)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (5 - 1))) / 5 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(6), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(6)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (6 - 1))) / 6 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(7), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(7)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (7 - 1))) / 7 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(8), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(8)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (8 - 1))) / 8 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(9), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(9)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (9 - 1))) / 9 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(10), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(10)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (10 - 1))) / 10 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(11), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(11)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (11 - 1))) / 11 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(12), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(12)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (12 - 1))) / 12 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(13), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(13)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (13 - 1))) / 13 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(14), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(14)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (14 - 1))) / 14 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(15), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(15)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (15 - 1))) / 15 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(16), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(16)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (16 - 1))) / 16 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(17), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(17)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (17 - 1))) / 17 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(18), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(18)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (18 - 1))) / 18 - (2 * var(--spacing-inner))); +} +.RV-FlexRow--breakPoint *:first-child:nth-last-child(19), +.RV-FlexRow--breakPoint *:first-child:nth-last-child(19)~* { + min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (19 - 1))) / 19 - (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) * (20 - 1))) / 20 - (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); + overflow: hidden; +} +.RV-FlexRow--auto { flex-direction: row; flex-wrap: wrap; } .RV-FlexRow__Item { - display: grid; -} -.RV-FlexRow__Item--top { - display: grid; - align-content: start; -} -.RV-FlexRow__Item--bottom { - display: grid; - align-content: end; -} -.RV-FlexRow__Item--left { - display: grid; - justify-content: start; -} -.RV-FlexRow__Item--right { - display: grid; - justify-content: end; -} -.RV-FlexRow__Item--horizontalCenter { - display: grid; - justify-content: center; -} -.RV-FlexRow__Item--verticalCenter { - display: grid; - align-items: center; -} -.RV-FlexRow__Item--center { - display: grid; - justify-content: center; - display: grid; - align-items: center; + flex-basis: max-content; + flex-grow: 3; + flex-shrink: 3; } .RV-FlexRow__Item--narrower { flex-grow: 1; @@ -455,7 +405,7 @@ flex-grow: 2; flex-shrink: 4; } -.RV-FlexRow__Item--wide() { +.RV-FlexRow__Item--wide { flex-grow: 4; flex-shrink: 2; } @@ -467,7 +417,11 @@ flex-grow: 0; flex-shrink: 0; width: min-content; - flex-basis: 100px; + flex-basis: var(--width); +} +.RV-FlexRow__Item--narrower { + flex-grow: 1; + flex-shrink: 5; } .RV-FlexRow__Item--half { flex-grow: 0; @@ -493,528 +447,156 @@ width: max-content; flex-basis: max-content; } -.RV-FullWidthContent__Container { - width: 100%; -} -.RV-FullWidthContent__Item { - width: 100%; - display: block; - overflow: hidden; -} -.RV-FullWidthContent__Item .RV-Image *, -.RV-FullWidthContent__Item .RV-Image { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} -.RV-FullWidthContent__Item .RV-Text { - overflow: hidden; - display: block; - text-overflow: ellipsis; - line-height: 1.21; - position: relative; - background-color: #fff; - max-height: 96.80000000000001%; - padding: 0; - margin: 0; -} -.RV-FullWidthContent__Item .RV-Text * { - margin: 0; - padding-bottom: 19.360000000000003px; -} -.RV-FullWidthContent__Item .RV-Text *:last-child { - padding-bottom: unset; -} -.RV-FullWidthContent__Item--fade:after { - background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); - display: block; - content: ' '; - opacity: 0.8; - position: relative; - top: -25%; - width: 100%; - height: 25%; - z-index: 10; -} -.RV-FullWidthContent__Item--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-ElementList { - display: flex; - height: 100%; - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - list-style-type: none; -} -.RV-ElementList--breakPoint { - flex-wrap: wrap; - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - gap: 0px; -} -.RV-ElementList--breakPoint * { - flex-basis: calc(500px * 999 - 100% * 999); -} -.RV-ElementList--horizontal { - flex-direction: row; -} -.RV-ElementList--vertical { - flex-direction: column; -} -.RV-ElementList--auto { - flex-direction: row; - flex-wrap: wrap; -} -@include RV-FlexRow__Item; -.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; - display: grid; - justify-content: center; - display: grid; - align-items: 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 { - display: grid; - justify-content: center; - display: grid; - align-items: center; - padding: 25px; - gap: 25px; - column-gap: 25px; - display: flex; - height: 100%; - 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 * { - position: initial; - opacity: initial; - margin: 0; - padding: 0; -} -.RV-Menu--vertical .RV-Menu__List { - flex-direction: column; - width: 100%; -} -.RV-Menu--horizontal .RV-Menu__List { - flex-direction: row; - flex-wrap: wrap; - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - gap: 0px; -} -.RV-Menu--horizontal .RV-Menu__List * { - flex-basis: calc(400px * 999 - 100% * 999); -} -.RV-Menu__List { - display: flex; - height: 100%; - display: flex; - height: 100%; - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - list-style-type: none; -} -.RV-Menu__List--breakPoint { - flex-wrap: wrap; - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; - gap: 0px; -} -.RV-Menu__List--breakPoint * { - flex-basis: calc(500px * 999 - 100% * 999); -} -.RV-Menu__List--horizontal { - flex-direction: row; -} -.RV-Menu__List--vertical { - flex-direction: column; -} -.RV-Menu__List--auto { - flex-direction: row; - flex-wrap: wrap; -} -@include RV-FlexRow__Item; -.RV-Menu__Item { - flex-basis: max-content; - flex-grow: 3; - flex-shrink: 3; - display: grid; - width: 100px; -} -.RV-Menu__Item--top { - display: grid; - align-content: start; -} -.RV-Menu__Item--bottom { - display: grid; - align-content: end; -} -.RV-Menu__Item--left { - display: grid; - justify-content: start; -} -.RV-Menu__Item--right { - display: grid; - justify-content: end; -} -.RV-Menu__Item--horizontalCenter { - display: grid; - justify-content: center; -} -.RV-Menu__Item--verticalCenter { - display: grid; - align-items: center; -} -.RV-Menu__Item--center { - display: grid; - justify-content: center; - display: grid; - align-items: center; -} -.RV-Menu__Item--narrower { - flex-grow: 1; - flex-shrink: 5; -} -.RV-Menu__Item--narrow { - flex-grow: 2; - flex-shrink: 4; -} -.RV-Menu__Item--wide() { - flex-grow: 4; - flex-shrink: 2; -} -.RV-Menu__Item--wider { - flex-grow: 5; - flex-shrink: 1; -} -.RV-Menu__Item--fixedSize { - flex-grow: 0; - flex-shrink: 0; - width: min-content; - flex-basis: 100px; -} -.RV-Menu__Item--half { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 50%; - width: 50%; -} -.RV-Menu__Item--third { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 33.333333333333336%; - width: 33.333333333333336%; -} -.RV-Menu__Item--quarter { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 25%; - width: 25%; -} -.RV-Menu__Item--content { - flex-grow: 0; - flex-shrink: 0; - width: max-content; - flex-basis: max-content; -} -.RV-Menu__Item .RV-Link { - padding: 10px; - background-color: #f5f5dc; - display: block; - white-space: nowrap; -} -.RV-ImageGrid__Container { +.RV-FlexGrid { + --item-height: 300px; + --item-width: 300px; display: grid; } -.RV-ImageGrid__Item { - display: grid; +.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); } -.RV-ImageGrid__Item--top { - display: grid; - align-content: start; +.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; } -.RV-ImageGrid__Item--bottom { - display: grid; - align-content: end; -} -.RV-ImageGrid__Item--left { - display: grid; - justify-content: start; -} -.RV-ImageGrid__Item--right { - display: grid; - justify-content: end; -} -.RV-ImageGrid__Item--horizontalCenter { - display: grid; - justify-content: center; -} -.RV-ImageGrid__Item--verticalCenter { - display: grid; - align-items: center; -} -.RV-ImageGrid__Item--center { - display: grid; - justify-content: center; - display: grid; - align-items: center; -} -.RV-ImageGrid__Container { - padding: 10px; - gap: 10px; - column-gap: 10px; +.RV-FlexGrid--masonry { display: block; column-count: auto; - column-width: 300px; + column-width: var(--item-width); } -.RV-ImageGrid__Item { +.RV-FlexGrid--masonry .RV-FlexGrid__Item { + margin-bottom: var(--inner-spacing); +} +.RV-FlexGrid--masonry .RV-FlexGrid__Item * { + margin-bottom: unset; +} +.RV-Fan { + --base-height: 280px; + --base-width: 320px; + display: flex; +} +.RV-Fan--fullWidth { + flex-flow: row wrap; +} +.RV-Fan--fullWidth .RV-Fan__Surface { + width: calc(100% - var(--base-width)); + min-width: var(--base-width); + height: var(--base-height); +} +.RV-Fan--fullWidth .RV-Fan__Base { + flex-grow: 1; +} +.RV-Fan--fullWidth .RV-Fan__Surface { + flex-grow: 1; +} +.RV-Fan--vertical { + flex-direction: column; + width: max-content; +} +.RV-Fan--vertical .RV-Fan__Surface { + width: var(--base-width); + min-height: var(--base-height); +} +.RV-Fan--horizontal { + flex-direction: row; +} +.RV-Fan--horizontal .RV-Fan__Surface { + min-width: var(--base-width); + height: var(--base-height); +} +.RV-Fan--auto { + flex-flow: row wrap; +} +.RV-Fan--auto .RV-Fan__Surface { + width: calc(100% - var(--base-width)); + min-width: var(--base-width); + height: var(--base-height); +} +.RV-Fan__Surface { + --cc: 'text'; display: block; overflow: hidden; - position: relative; } -.RV-ImageGrid__Item .RV-Image *, -.RV-ImageGrid__Item .RV-Image { +.RV-Fan__Surface .RV-Text { + overflow: hidden; + display: block; + text-overflow: ellipsis; + line-height: 1.1; + position: relative; + background-color: #fff; + max-height: 88%; + padding: 0; + margin: 0; +} +.RV-Fan__Surface .RV-Text * { + margin: 0; + padding-bottom: 17.6px; +} +.RV-Fan__Surface .RV-Text *:last-child { + padding-bottom: unset; +} +.RV-Fan__Surface .RV-Image *, +.RV-Fan__Surface .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } -.RV-ImageGrid__Item .RV-Text { - overflow: hidden; - display: block; - text-overflow: ellipsis; - line-height: 1.21; - position: relative; - background-color: #fff; - max-height: 96.80000000000001%; - padding: 0; - margin: 0; +.RV-Fan__Surface--fixedWidth { + max-width: var(--base-width); } -.RV-ImageGrid__Item .RV-Text * { - margin: 0; - padding-bottom: 19.360000000000003px; +.RV-Fan__Surface--fixedHeight { + height: var(--base-height); } -.RV-ImageGrid__Item .RV-Text *:last-child { - padding-bottom: unset; +.RV-Fan__Base { + height: var(--base-height); + width: var(--base-width); + flex: 0 0 auto; } -.RV-ImageGrid__Item--fade:after { - background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); - display: block; - content: ' '; - opacity: 0.8; - position: relative; - top: -25%; - width: 100%; - height: 25%; - z-index: 10; +.RV-Alignment { + display: grid; } -.RV-ImageGrid__Item--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-Alignment--top { + display: grid; + align-content: start; } -.RV-ImageGrid__Item .RV-Image * { - object-position: center; +.RV-Alignment--bottom { + display: grid; + align-content: end; } -.RV-ImageGrid__Item:hover > * { - opacity: 1; +.RV-Alignment--left { + display: grid; + justify-content: start; } -.RV-ImageGrid__Button { - text-align: center; - display: inline-block; - position: absolute; - background-color: #f5f5dc; - margin: 10px; - opacity: 0.2; - border-radius: 10px; - text-decoration: none; +.RV-Alignment--right { + display: grid; + justify-content: end; +} +.RV-Alignment--center { + display: grid; + justify-content: center; +} +.RV-Alignment--center { + display: grid; + align-items: center; +} +.RV-Alignment--center { display: grid; justify-content: center; display: grid; align-items: center; - width: 50px; - height: 50px; - font-size: 25px; - line-height: 25px; - right: 0; +} +* { + margin: 0; + padding: 0; top: 0; - width: 50px; - height: 50px; - font-size: 25px; - line-height: 25px; -} -.RV-ImageGrid__Button--circle { - border-radius: 50%; -} -.RV-ImageGrid__Button--topRight { + bottom: 0; + left: 0; right: 0; - top: 0; -} -.RV-ImageGrid__Button--small { - width: 30px; - height: 30px; - font-size: 15px; - line-height: 15px; -} -.RV-ImageGrid__Button--medium { - width: 50px; - height: 50px; - font-size: 25px; - line-height: 25px; -} -.RV-ImageGrid__Button--large { - width: 70px; - height: 70px; - font-size: 35px; - line-height: 35px; -} -.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * { - margin-bottom: 10px; -} -.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * * { - margin-bottom: unset; -} -.RV-ImageGrid__Container.RV-Spacing__Inner--small * { - margin-bottom: 10px; -} -.RV-ImageGrid__Container.RV-Spacing__Inner--small * * { - margin-bottom: unset; -} -.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--medium * { - margin-bottom: 25px; -} -.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--medium * * { - margin-bottom: unset; -} -.RV-ImageGrid__Container.RV-Spacing__Inner--medium * { - margin-bottom: 25px; -} -.RV-ImageGrid__Container.RV-Spacing__Inner--medium * * { - margin-bottom: unset; -} -.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--large * { - margin-bottom: 35px; -} -.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--large * * { - margin-bottom: unset; -} -.RV-ImageGrid__Container.RV-Spacing__Inner--large * { - margin-bottom: 35px; -} -.RV-ImageGrid__Container.RV-Spacing__Inner--large * * { - margin-bottom: unset; -} -.RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * { - margin-bottom: 25px; -} -.RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * * { - margin-bottom: unset; -} -.RV-ImageGrid__Container.RV-OverlayButton__Row * { - margin-bottom: 25px; -} -.RV-ImageGrid__Container.RV-OverlayButton__Row * * { - margin-bottom: unset; -} -.RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * { - margin-bottom: 10px; -} -.RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * * { - margin-bottom: unset; -} -.RV-ImageGrid__Container.RV-ImageGrid__Container * { - margin-bottom: 10px; -} -.RV-ImageGrid__Container.RV-ImageGrid__Container * * { - margin-bottom: unset; + border: none; + gap: 0; }