diff --git a/components/01_Layouts/flexGrid/flexGrid.hbs b/components/01_Layouts/flexGrid/flexGrid.hbs index df6718b..e8798bb 100644 --- a/components/01_Layouts/flexGrid/flexGrid.hbs +++ b/components/01_Layouts/flexGrid/flexGrid.hbs @@ -1,4 +1,4 @@ -
+
Heres
some
totally
@@ -15,7 +15,24 @@

-
+
+
Heres
+
some
+
totally
+
awesome
+
content
+
for
+
you
+
only
+
for
+
you
+
to
+
enjoy
+
+ +

+ +
Heres
some
totally (right)
diff --git a/components/02_Styles/spacing/_spacing.scss b/components/02_Styles/spacing/_spacing.scss index 9a28cbb..96eb270 100644 --- a/components/02_Styles/spacing/_spacing.scss +++ b/components/02_Styles/spacing/_spacing.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + @mixin RV-Spacing__Outer--small { margin: $-spacing-small; } @@ -10,30 +12,60 @@ margin: $-spacing-large; } +@mixin _flexrow_breakpoint_min_width($-gap) { -@mixin RV-Spacing__Inner--small($-container-suffix: '__Container') { - padding: $-spacing-small; - &#{$-container-suffix} { - gap: $-spacing-small; - } + @include RV-Utils__Hook--catch { + $-breakpoint: get-hook-value('breakPoint'); + + @include RV-Utils__ElementAmount using($-index) { + min-width: calc((#{$-breakpoint} - (#{$-gap} * (#{$-index} - 1))) / #{$-index} - (2 * #{$-gap})); + + * { + min-width: initial; + } + } + } } -@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container') { +@mixin _flexgrid_masonry_column_gap($-gap) { + + @include RV-Utils__Hook--catch { + * { + margin: $-gap/2 0; + } + } +} + + +@mixin RV-Spacing__Inner--small() { + padding: $-spacing-small; + gap: $-spacing-small; + column-gap: $-spacing-small; + + @include _flexrow_breakpoint_min_width($-spacing-small); + @include _flexgrid_masonry_column_gap($-spacing-small); +} + +@mixin RV-Spacing__Inner--medium() { padding: $-spacing-medium; - &#{$-container-suffix} { - gap: $-spacing-medium; - } + gap: $-spacing-medium; + column-gap: $-spacing-medium; + + @include _flexrow_breakpoint_min_width($-spacing-medium); + @include _flexgrid_masonry_column_gap($-spacing-medium); } -@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') { +@mixin RV-Spacing__Inner--large() { padding: $-spacing-large; - &#{$-container-suffix} { - gap: $-spacing-large; - } + gap: $-spacing-large; + column-gap: $-spacing-large; + + @include _flexrow_breakpoint_min_width($-spacing-large); + @include _flexgrid_masonry_column_gap($-spacing-medium); } @mixin RV-Spacing { - &__Outer{ + &__Outer { &--small { @include RV-Spacing__Outer--small; } @@ -47,17 +79,17 @@ } } - &__Inner{ + &__Inner { &--small { - @include RV-Spacing__Inner--small(''); + @include RV-Spacing__Inner--small; } &--medium { - @include RV-Spacing__Inner--medium(''); + @include RV-Spacing__Inner--medium; } &--large { - @include RV-Spacing__Inner--large(''); + @include RV-Spacing__Inner--large; } } } diff --git a/components/05_Components/menu/_menu.scss b/components/05_Components/menu/_menu.scss index b6c4cd0..1bf5ca8 100644 --- a/components/05_Components/menu/_menu.scss +++ b/components/05_Components/menu/_menu.scss @@ -7,22 +7,18 @@ &--horizontal &__List { @include RV-FlexRow__Container--horizontal; - @include RV-FlexRow__Container--breakPoint; - } - - &--spaced &__List { - gap: $-spacing-medium; + @include RV-FlexRow__Container--breakPoint(400px); } &__List { @include RV-FlexRow__Container($-prefix: '.RV-Menu'); @include RV-ElementList; - padding: $-spacing-small; } &__Item { @include RV-FlexRow__Item; @include RV-FlexRow__Item--shorthands; + width: 100px; .RV-Link { padding: $-spacing-small; diff --git a/components/05_Components/menu/menu.hbs b/components/05_Components/menu/menu.hbs index 0082ec7..cd12337 100644 --- a/components/05_Components/menu/menu.hbs +++ b/components/05_Components/menu/menu.hbs @@ -20,7 +20,7 @@

-
+
  • Home
  • Projects
    • @@ -31,7 +31,7 @@

    -
    +
    • Home
    • Projects
      • diff --git a/public/pink.css b/public/pink.css new file mode 100644 index 0000000..066f4c6 --- /dev/null +++ b/public/pink.css @@ -0,0 +1,3 @@ +.pink { + background-color: #ffc0cb; +} diff --git a/public/playground.css.map b/public/playground.css.map new file mode 100644 index 0000000..156f19f --- /dev/null +++ b/public/playground.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../components/playground.styl"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;AA8BA;EAZI,SAAS,IAAT;EACA,kBAAkB,QAAlB;EACA,QAAQ,eAAR;EACA,SAAS,OAAT;;AAaJ;EARC,SAAS,OAAT;EACG,OAAO,IAAP;;AAWJ;EApBI,SAAS,IAAT;EACA,kBAAkB,QAAlB;EACA,QAAQ,eAAR;EACA,SAAS,OAAT;EAKH,SAAS,OAAT;EACG,OAAO,IAAP;;AATA,SAAS,IAAT;AACA,kBAAkB,QAAlB;AACA,QAAQ,eAAR;AACA,SAAS,OAAT","file":"playground.css"} \ No newline at end of file diff --git a/public/rcss.css b/public/rcss.css index e7ac622..2a14376 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -1,29 +1,44 @@ -@import url(./pink.css); +@import './pink.css'; +/* + * A system to store a context for a CSS-Selector. + * Can be used to apply speacial rules when mixins are combined + */ +/* + * Generates a key-safe version of the selector + */ .RV-Alignment { - display: grid; } - .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; } + display: grid; +} +.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; +} /* * Classes for easy flexrow usage @@ -70,633 +85,764 @@ */ .RV-FlexRow__Container { display: flex; - height: 100%; } - + height: 100%; +} .RV-FlexRow__Item { flex-basis: max-content; flex-grow: 3; - flex-shrink: 3; } - + flex-shrink: 3; +} .RV-FlexRow__Container--breakPoint { - flex-wrap: wrap; } - .RV-FlexRow__Container--breakPoint * { - flex-basis: calc(500px * 999 - 100% * 999); } - + flex-wrap: wrap; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; + gap: 0px; +} +.RV-FlexRow__Container--breakPoint * { + flex-basis: calc(500px * 999 - 100% * 999); +} .RV-FlexRow__Container--horizontal { - flex-direction: row; } - + flex-direction: row; +} .RV-FlexRow__Container--vertical { - flex-direction: column; } - + flex-direction: column; +} .RV-FlexRow__Container--auto { flex-direction: row; - flex-wrap: wrap; } - + 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; } - .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--fixedSize { - flex-grow: 0; - flex-shrink: 0; - width: min-content; - flex-basis: 100px; } - .RV-FlexRow__Item--half { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 50%; - width: 50%; } - .RV-FlexRow__Item--third { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 33.33%; - width: 33.33%; } - .RV-FlexRow__Item--quarter { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 25%; - width: 25%; } - .RV-FlexRow__Item--content { - flex-grow: 0; - flex-shrink: 0; - width: max-content; - flex-basis: max-content; } + 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; +} +.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--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100px; +} +.RV-FlexRow__Item--half { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 50%; + width: 50%; +} +.RV-FlexRow__Item--third { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 33.33%; + width: 33.33%; +} +.RV-FlexRow__Item--quarter { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 25%; + width: 25%; +} +.RV-FlexRow__Item--content { + flex-grow: 0; + flex-shrink: 0; + width: max-content; + flex-basis: max-content; +} .RV-FlexGrid__Container { display: grid; +} +.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); } - + 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-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; } + 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-ContentCrop { display: block; - overflow: hidden; } - .RV-ContentCrop img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; } - .RV-ContentCrop p { - overflow: hidden; - display: block; - text-overflow: ellipsis; - padding: 0; - margin: 0; - line-height: 1.21; - z-index: -20; - position: relative; - background-color: white; - height: 96.8%; } - .RV-ContentCrop--fade--fade:after { - background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); - display: block; - content: ' '; - opacity: 0.8; - position: relative; - top: -25%; - width: 100%; - height: 25%; - z-index: -10; } - .RV-ContentCrop--ellipsis--ellipsis:after { - position: relative; - display: block; - bottom: 1.2em; - left: calc(100% - 3ch); - content: '...'; - font-size: 1.2em; - min-width: 2em; - background-color: white; - padding: 0 2px; } - .RV-ContentCrop--square { - width: 100%; - padding-top: 100%; - position: relative; } - .RV-ContentCrop--square img, - .RV-ContentCrop--square div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ContentCrop--circle { - width: 100%; - padding-top: 100%; - position: relative; - border-radius: 50%; } - .RV-ContentCrop--circle img, - .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 img { - 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 img { - 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 img { - 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 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ContentCrop--3to2 { - width: 100%; - padding-top: 66.66667%; - position: relative; } - .RV-ContentCrop--3to2 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ContentCrop--left img { - object-position: left; } - .RV-ContentCrop--center img { - object-position: center; } - .RV-ContentCrop--top img { - object-position: top; } - .RV-ContentCrop--bottom img { - object-position: bottom; } - .RV-ContentCrop--center img { - object-position: center; } + overflow: hidden; +} +.RV-ContentCrop img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.RV-ContentCrop p { + overflow: hidden; + display: block; + text-overflow: ellipsis; + padding: 0; + margin: 0; + line-height: 1.21; + z-index: -20; + position: relative; + background-color: white; + height: 96.8%; +} +.RV-ContentCrop--fade--fade:after { + background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); + display: block; + content: " "; + opacity: 0.8; + position: relative; + top: -25%; + width: 100%; + height: 25%; + z-index: -10; +} +.RV-ContentCrop--ellipsis--ellipsis:after { + position: relative; + display: block; + bottom: 1.2em; + left: calc(100% - 3ch); + content: "..."; + font-size: 1.2em; + min-width: 2em; + background-color: white; + padding: 0 2px; +} +.RV-ContentCrop--square { + width: 100%; + padding-top: 100%; + position: relative; +} +.RV-ContentCrop--square img, +.RV-ContentCrop--square div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ContentCrop--circle { + width: 100%; + padding-top: 100%; + position: relative; + border-radius: 50%; +} +.RV-ContentCrop--circle img, +.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 img { + 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 img { + 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 img { + 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 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ContentCrop--3to2 { + width: 100%; + padding-top: 66.6666666667%; + position: relative; +} +.RV-ContentCrop--3to2 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ContentCrop--left img { + object-position: left; +} +.RV-ContentCrop--center img { + object-position: center; +} +.RV-ContentCrop--top img { + object-position: top; +} +.RV-ContentCrop--bottom img { + object-position: bottom; +} +.RV-ContentCrop--center img { + object-position: center; +} .RV-Fan__Container--vertical { flex-direction: column; - width: max-content; } - + width: max-content; +} .RV-Fan__Container--vertical .RV-Fan__Surface { width: 320px; - min-height: 280px; } - + min-height: 280px; +} .RV-Fan__Container--horizontal { - flex-direction: row; } - + flex-direction: row; +} .RV-Fan__Container--horizontal .RV-Fan__Surface { min-width: 320px; - height: 280px; } - + height: 280px; +} .RV-Fan__Container--auto { - flex-flow: row wrap; } - + flex-flow: row wrap; +} .RV-Fan__Container--auto .RV-Fan__Surface { width: calc(100% - 320px); min-width: 320px; - height: 280px; } - -.RV-Fan__Container--fullWidth .RV-Fan__Base, -.RV-Fan__Container--fullWidth .RV-Fan__Surface { - flex-grow: 1; } - + height: 280px; +} +.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface { + flex-grow: 1; +} .RV-Fan__Container { - display: flex; } - + display: flex; +} .RV-Fan__Base { height: 280px; width: 320px; - flex: 0 0 auto; } - + flex: 0 0 auto; +} .RV-Fan__Surface { display: block; - overflow: hidden; } - .RV-Fan__Surface img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; } - .RV-Fan__Surface p { - overflow: hidden; - display: block; - text-overflow: ellipsis; - padding: 0; - margin: 0; - line-height: 1.21; - z-index: -20; - position: relative; - background-color: white; - height: 96.8%; } - .RV-Fan__Surface--fade--fade:after { - background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); - display: block; - content: ' '; - opacity: 0.8; - position: relative; - top: -25%; - width: 100%; - height: 25%; - z-index: -10; } - .RV-Fan__Surface--ellipsis--ellipsis:after { - position: relative; - display: block; - bottom: 1.2em; - left: calc(100% - 3ch); - content: '...'; - font-size: 1.2em; - min-width: 2em; - background-color: white; - padding: 0 2px; } - .RV-Fan__Surface--square { - width: 100%; - padding-top: 100%; - position: relative; } - .RV-Fan__Surface--square img, - .RV-Fan__Surface--square div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-Fan__Surface--circle { - width: 100%; - padding-top: 100%; - position: relative; - border-radius: 50%; } - .RV-Fan__Surface--circle img, - .RV-Fan__Surface--circle div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-Fan__Surface--1to2 { - width: 100%; - padding-top: 200%; - position: relative; } - .RV-Fan__Surface--1to2 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-Fan__Surface--2to1 { - width: 100%; - padding-top: 50%; - position: relative; } - .RV-Fan__Surface--2to1 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-Fan__Surface--4to3 { - width: 100%; - padding-top: 75%; - position: relative; } - .RV-Fan__Surface--4to3 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-Fan__Surface--16to9 { - width: 100%; - padding-top: 56.25%; - position: relative; } - .RV-Fan__Surface--16to9 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-Fan__Surface--3to2 { - width: 100%; - padding-top: 66.66667%; - position: relative; } - .RV-Fan__Surface--3to2 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-Fan__Surface--left img { - object-position: left; } - .RV-Fan__Surface--center img { - object-position: center; } - .RV-Fan__Surface--top img { - object-position: top; } - .RV-Fan__Surface--bottom img { - object-position: bottom; } - .RV-Fan__Surface--center img { - object-position: center; } + overflow: hidden; +} +.RV-Fan__Surface img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.RV-Fan__Surface p { + overflow: hidden; + display: block; + text-overflow: ellipsis; + padding: 0; + margin: 0; + line-height: 1.21; + z-index: -20; + position: relative; + background-color: white; + height: 96.8%; +} +.RV-Fan__Surface--fade--fade:after { + background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); + display: block; + content: " "; + opacity: 0.8; + position: relative; + top: -25%; + width: 100%; + height: 25%; + z-index: -10; +} +.RV-Fan__Surface--ellipsis--ellipsis:after { + position: relative; + display: block; + bottom: 1.2em; + left: calc(100% - 3ch); + content: "..."; + font-size: 1.2em; + min-width: 2em; + background-color: white; + padding: 0 2px; +} +.RV-Fan__Surface--square { + width: 100%; + padding-top: 100%; + position: relative; +} +.RV-Fan__Surface--square img, +.RV-Fan__Surface--square div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-Fan__Surface--circle { + width: 100%; + padding-top: 100%; + position: relative; + border-radius: 50%; +} +.RV-Fan__Surface--circle img, +.RV-Fan__Surface--circle div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-Fan__Surface--1to2 { + width: 100%; + padding-top: 200%; + position: relative; +} +.RV-Fan__Surface--1to2 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-Fan__Surface--2to1 { + width: 100%; + padding-top: 50%; + position: relative; +} +.RV-Fan__Surface--2to1 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-Fan__Surface--4to3 { + width: 100%; + padding-top: 75%; + position: relative; +} +.RV-Fan__Surface--4to3 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-Fan__Surface--16to9 { + width: 100%; + padding-top: 56.25%; + position: relative; +} +.RV-Fan__Surface--16to9 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-Fan__Surface--3to2 { + width: 100%; + padding-top: 66.6666666667%; + position: relative; +} +.RV-Fan__Surface--3to2 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-Fan__Surface--left img { + object-position: left; +} +.RV-Fan__Surface--center img { + object-position: center; +} +.RV-Fan__Surface--top img { + object-position: top; +} +.RV-Fan__Surface--bottom img { + object-position: bottom; +} +.RV-Fan__Surface--center img { + object-position: center; +} .RV-FullWidthContent__Container { - width: 100%; } - + width: 100%; +} .RV-FullWidthContent__Item { width: 100%; display: block; - overflow: hidden; } - .RV-FullWidthContent__Item img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; } - .RV-FullWidthContent__Item p { - overflow: hidden; - display: block; - text-overflow: ellipsis; - padding: 0; - margin: 0; - line-height: 1.21; - z-index: -20; - position: relative; - background-color: white; - height: 96.8%; } - .RV-FullWidthContent__Item--fade--fade:after { - background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); - display: block; - content: ' '; - opacity: 0.8; - position: relative; - top: -25%; - width: 100%; - height: 25%; - z-index: -10; } - .RV-FullWidthContent__Item--ellipsis--ellipsis:after { - position: relative; - display: block; - bottom: 1.2em; - left: calc(100% - 3ch); - content: '...'; - font-size: 1.2em; - min-width: 2em; - background-color: white; - padding: 0 2px; } - .RV-FullWidthContent__Item--square { - width: 100%; - padding-top: 100%; - position: relative; } - .RV-FullWidthContent__Item--square img, - .RV-FullWidthContent__Item--square div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-FullWidthContent__Item--circle { - width: 100%; - padding-top: 100%; - position: relative; - border-radius: 50%; } - .RV-FullWidthContent__Item--circle img, - .RV-FullWidthContent__Item--circle div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-FullWidthContent__Item--1to2 { - width: 100%; - padding-top: 200%; - position: relative; } - .RV-FullWidthContent__Item--1to2 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-FullWidthContent__Item--2to1 { - width: 100%; - padding-top: 50%; - position: relative; } - .RV-FullWidthContent__Item--2to1 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-FullWidthContent__Item--4to3 { - width: 100%; - padding-top: 75%; - position: relative; } - .RV-FullWidthContent__Item--4to3 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-FullWidthContent__Item--16to9 { - width: 100%; - padding-top: 56.25%; - position: relative; } - .RV-FullWidthContent__Item--16to9 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-FullWidthContent__Item--3to2 { - width: 100%; - padding-top: 66.66667%; - position: relative; } - .RV-FullWidthContent__Item--3to2 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-FullWidthContent__Item--left img { - object-position: left; } - .RV-FullWidthContent__Item--center img { - object-position: center; } - .RV-FullWidthContent__Item--top img { - object-position: top; } - .RV-FullWidthContent__Item--bottom img { - object-position: bottom; } - .RV-FullWidthContent__Item--center img { - object-position: center; } + overflow: hidden; +} +.RV-FullWidthContent__Item img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.RV-FullWidthContent__Item p { + overflow: hidden; + display: block; + text-overflow: ellipsis; + padding: 0; + margin: 0; + line-height: 1.21; + z-index: -20; + position: relative; + background-color: white; + height: 96.8%; +} +.RV-FullWidthContent__Item--fade--fade:after { + background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); + display: block; + content: " "; + opacity: 0.8; + position: relative; + top: -25%; + width: 100%; + height: 25%; + z-index: -10; +} +.RV-FullWidthContent__Item--ellipsis--ellipsis:after { + position: relative; + display: block; + bottom: 1.2em; + left: calc(100% - 3ch); + content: "..."; + font-size: 1.2em; + min-width: 2em; + background-color: white; + padding: 0 2px; +} +.RV-FullWidthContent__Item--square { + width: 100%; + padding-top: 100%; + position: relative; +} +.RV-FullWidthContent__Item--square img, +.RV-FullWidthContent__Item--square div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-FullWidthContent__Item--circle { + width: 100%; + padding-top: 100%; + position: relative; + border-radius: 50%; +} +.RV-FullWidthContent__Item--circle img, +.RV-FullWidthContent__Item--circle div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-FullWidthContent__Item--1to2 { + width: 100%; + padding-top: 200%; + position: relative; +} +.RV-FullWidthContent__Item--1to2 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-FullWidthContent__Item--2to1 { + width: 100%; + padding-top: 50%; + position: relative; +} +.RV-FullWidthContent__Item--2to1 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-FullWidthContent__Item--4to3 { + width: 100%; + padding-top: 75%; + position: relative; +} +.RV-FullWidthContent__Item--4to3 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-FullWidthContent__Item--16to9 { + width: 100%; + padding-top: 56.25%; + position: relative; +} +.RV-FullWidthContent__Item--16to9 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-FullWidthContent__Item--3to2 { + width: 100%; + padding-top: 66.6666666667%; + position: relative; +} +.RV-FullWidthContent__Item--3to2 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-FullWidthContent__Item--left img { + object-position: left; +} +.RV-FullWidthContent__Item--center img { + object-position: center; +} +.RV-FullWidthContent__Item--top img { + object-position: top; +} +.RV-FullWidthContent__Item--bottom img { + object-position: bottom; +} +.RV-FullWidthContent__Item--center img { + object-position: center; +} .RV-Sizes--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; - width: 50%; } - + width: 50%; +} .RV-Sizes--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.33%; - width: 33.33%; } - + width: 33.33%; +} .RV-Sizes--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; - width: 25%; } - + width: 25%; +} .RV-Sizes--fixedSize { flex-grow: 0; - flex-shrink: 0; } - + flex-shrink: 0; +} .RV-Sizes--content { flex-grow: 0; flex-shrink: 0; width: max-content; - flex-basis: max-content; } + flex-basis: max-content; +} .RV-BoxShadow { position: relative; - float: left; } - .RV-BoxShadow:before, .RV-BoxShadow:after { - 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; } - .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { - bottom: 15px; - left: 10px; - width: 50%; - height: 20%; - max-width: 300px; - box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); - transform: rotate(-3deg); } - .RV-BoxShadow--liftedCorners:after { - right: 10px; - left: auto; - transform: rotate(3deg); } + float: left; +} +.RV-BoxShadow:before, .RV-BoxShadow:after { + 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; +} +.RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { + bottom: 15px; + left: 10px; + width: 50%; + height: 20%; + max-width: 300px; + box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); + transform: rotate(-3deg); +} +.RV-BoxShadow--liftedCorners:after { + right: 10px; + left: auto; + transform: rotate(3deg); +} .RV-Spacing__Outer--small { - margin: 10px; } - + margin: 10px; +} .RV-Spacing__Outer--medium { - margin: 25px; } - + margin: 25px; +} .RV-Spacing__Outer--large { - margin: 35px; } - + margin: 35px; +} .RV-Spacing__Inner--small { - padding: 10px; } - .RV-Spacing__Inner--small { - gap: 10px; } - + padding: 10px; + gap: 10px; + column-gap: 10px; +} .RV-Spacing__Inner--medium { - padding: 25px; } - .RV-Spacing__Inner--medium { - gap: 25px; } - + padding: 25px; + gap: 25px; + column-gap: 25px; +} .RV-Spacing__Inner--large { - padding: 35px; } - .RV-Spacing__Inner--large { - gap: 35px; } + padding: 35px; + gap: 35px; + column-gap: 35px; +} .RV-Iconized__Container { - position: relative; } - .RV-Iconized__Container--small { - top: -.25em; } - .RV-Iconized__Container--medium { - top: -.5em; } - .RV-Iconized__Container--large { - top: -1.03073em; } - .RV-Iconized__Container--huge { - top: -2.05em; } - + 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__Icon { margin: 0; padding: 0; @@ -704,37 +850,38 @@ bottom: 0; left: 0; right: 0; - border: none; } - + border: none; +} .RV-Iconized__Container--extraSmall .RV-Iconized__Icon { width: 1em; height: 1em; position: relative; - top: .125em; } - + top: 0.125em; +} .RV-Iconized__Container--small .RV-Iconized__Icon { width: 1.5em; height: 1.5em; position: relative; - top: .45em; } - + top: 0.45em; +} .RV-Iconized__Container--medium .RV-Iconized__Icon { width: 2em; height: 2em; position: relative; - top: .625em; } - + top: 0.625em; +} .RV-Iconized__Container--large .RV-Iconized__Icon { width: 3em; height: 3em; position: relative; - top: 1.15573em; } - + top: 1.15573em; +} .RV-Iconized__Container--huge .RV-Iconized__Icon { width: 5em; height: 5em; position: relative; - top: 2.175em; } + top: 2.175em; +} .RV-ElementList { display: flex; @@ -746,36 +893,57 @@ left: 0; right: 0; border: none; - list-style-type: none; } - .RV-ElementList--breakPoint { - flex-wrap: wrap; } - .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; } - .RV-ElementList__Item { - flex-basis: max-content; - flex-grow: 3; - flex-shrink: 3; } + 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; +} +.RV-ElementList__Item { + flex-basis: max-content; + flex-grow: 3; + flex-shrink: 3; +} .RV-Menu--vertical .RV-Menu__List { flex-direction: column; - width: 100%; } - + width: 100%; +} .RV-Menu--horizontal .RV-Menu__List { flex-direction: row; - flex-wrap: wrap; } - .RV-Menu--horizontal .RV-Menu__List * { - flex-basis: calc(500px * 999 - 100% * 999); } - -.RV-Menu--spaced .RV-Menu__List { - gap: 25px; } - + 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%; @@ -789,263 +957,345 @@ right: 0; border: none; list-style-type: none; - padding: 10px; } - .RV-Menu__List--breakPoint { - flex-wrap: wrap; } - .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; } - .RV-Menu__List__Item { - flex-basis: max-content; - flex-grow: 3; - flex-shrink: 3; } - +} +.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; +} +.RV-Menu__List__Item { + flex-basis: max-content; + flex-grow: 3; + flex-shrink: 3; +} .RV-Menu__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; - display: grid; } - .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.33%; - width: 33.33%; } - .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: beige; - display: block; - white-space: nowrap; } + 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.33%; + width: 33.33%; +} +.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: beige; + display: block; + white-space: nowrap; +} .RV-ImageGrid__Container { display: grid; +} +.RV-ImageGrid__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); } - + grid-auto-rows: minmax(300px, 1fr); +} +.RV-ImageGrid__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-ImageGrid__Container--masonry { + display: block; + column-count: auto; + column-width: 300px; +} .RV-ImageGrid__Item { - display: grid; } - .RV-ImageGrid__Item--top { - display: grid; - align-content: start; } - .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; } - + display: grid; +} +.RV-ImageGrid__Item--top { + display: grid; + align-content: start; +} +.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: 25px; } - .RV-ImageGrid__Container__Container { - gap: 25px; } - + padding: 25px; + gap: 25px; + column-gap: 25px; +} .RV-ImageGrid__Item { display: block; - overflow: hidden; } - .RV-ImageGrid__Item img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; } - .RV-ImageGrid__Item p { - overflow: hidden; - display: block; - text-overflow: ellipsis; - padding: 0; - margin: 0; - line-height: 1.21; - z-index: -20; - position: relative; - background-color: white; - height: 96.8%; } - .RV-ImageGrid__Item--fade--fade:after { - background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); - display: block; - content: ' '; - opacity: 0.8; - position: relative; - top: -25%; - width: 100%; - height: 25%; - z-index: -10; } - .RV-ImageGrid__Item--ellipsis--ellipsis:after { - position: relative; - display: block; - bottom: 1.2em; - left: calc(100% - 3ch); - content: '...'; - font-size: 1.2em; - min-width: 2em; - background-color: white; - padding: 0 2px; } - .RV-ImageGrid__Item--square { - width: 100%; - padding-top: 100%; - position: relative; } - .RV-ImageGrid__Item--square img, - .RV-ImageGrid__Item--square div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ImageGrid__Item--circle { - width: 100%; - padding-top: 100%; - position: relative; - border-radius: 50%; } - .RV-ImageGrid__Item--circle img, - .RV-ImageGrid__Item--circle div { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ImageGrid__Item--1to2 { - width: 100%; - padding-top: 200%; - position: relative; } - .RV-ImageGrid__Item--1to2 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ImageGrid__Item--2to1 { - width: 100%; - padding-top: 50%; - position: relative; } - .RV-ImageGrid__Item--2to1 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ImageGrid__Item--4to3 { - width: 100%; - padding-top: 75%; - position: relative; } - .RV-ImageGrid__Item--4to3 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ImageGrid__Item--16to9 { - width: 100%; - padding-top: 56.25%; - position: relative; } - .RV-ImageGrid__Item--16to9 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ImageGrid__Item--3to2 { - width: 100%; - padding-top: 66.66667%; - position: relative; } - .RV-ImageGrid__Item--3to2 img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; } - .RV-ImageGrid__Item--left img { - object-position: left; } - .RV-ImageGrid__Item--center img { - object-position: center; } - .RV-ImageGrid__Item--top img { - object-position: top; } - .RV-ImageGrid__Item--bottom img { - object-position: bottom; } - .RV-ImageGrid__Item--center img { - object-position: center; } - .RV-ImageGrid__Item img { - object-position: center; } - .RV-ImageGrid__Item--square { - height: 0; - width: 100%; - padding-bottom: 100%; } - .RV-ImageGrid__Item--square * { - height: initial; } + overflow: hidden; +} +.RV-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.RV-ImageGrid__Item p { + overflow: hidden; + display: block; + text-overflow: ellipsis; + padding: 0; + margin: 0; + line-height: 1.21; + z-index: -20; + position: relative; + background-color: white; + height: 96.8%; +} +.RV-ImageGrid__Item--fade--fade:after { + background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); + display: block; + content: " "; + opacity: 0.8; + position: relative; + top: -25%; + width: 100%; + height: 25%; + z-index: -10; +} +.RV-ImageGrid__Item--ellipsis--ellipsis:after { + position: relative; + display: block; + bottom: 1.2em; + left: calc(100% - 3ch); + content: "..."; + font-size: 1.2em; + min-width: 2em; + background-color: white; + padding: 0 2px; +} +.RV-ImageGrid__Item--square { + width: 100%; + padding-top: 100%; + position: relative; +} +.RV-ImageGrid__Item--square img, +.RV-ImageGrid__Item--square div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ImageGrid__Item--circle { + width: 100%; + padding-top: 100%; + position: relative; + border-radius: 50%; +} +.RV-ImageGrid__Item--circle img, +.RV-ImageGrid__Item--circle div { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ImageGrid__Item--1to2 { + width: 100%; + padding-top: 200%; + position: relative; +} +.RV-ImageGrid__Item--1to2 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ImageGrid__Item--2to1 { + width: 100%; + padding-top: 50%; + position: relative; +} +.RV-ImageGrid__Item--2to1 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ImageGrid__Item--4to3 { + width: 100%; + padding-top: 75%; + position: relative; +} +.RV-ImageGrid__Item--4to3 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ImageGrid__Item--16to9 { + width: 100%; + padding-top: 56.25%; + position: relative; +} +.RV-ImageGrid__Item--16to9 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ImageGrid__Item--3to2 { + width: 100%; + padding-top: 66.6666666667%; + position: relative; +} +.RV-ImageGrid__Item--3to2 img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.RV-ImageGrid__Item--left img { + object-position: left; +} +.RV-ImageGrid__Item--center img { + object-position: center; +} +.RV-ImageGrid__Item--top img { + object-position: top; +} +.RV-ImageGrid__Item--bottom img { + object-position: bottom; +} +.RV-ImageGrid__Item--center img { + object-position: center; +} +.RV-ImageGrid__Item img { + object-position: center; +} +.RV-ImageGrid__Item--square { + height: 0; + width: 100%; + padding-bottom: 100%; +} +.RV-ImageGrid__Item--square * { + height: initial; +} + +/*# sourceMappingURL=rcss.css.map */ diff --git a/public/rcss.css.map b/public/rcss.css.map new file mode 100644 index 0000000..909ff61 --- /dev/null +++ b/public/rcss.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../components/rcss.scss","../components/00_Global/_selectorHook.scss","../components/01_Layouts/alignment/_alignment.scss","../components/01_Layouts/flexRow/_flexRow.scss","../components/00_Global/_alignment.scss","../components/01_Layouts/flexGrid/_flexGrid.scss","../components/01_Layouts/contentCrop/_contentCrop.scss","../components/01_Layouts/fan/_fan.scss","../components/01_Layouts/fullWidthContent/_fullWidthContent.scss","../components/01_Layouts/sizes/_sizes.scss","../components/02_Styles/boxShadow/_boxShadow.scss","../components/02_Styles/spacing/_spacing.scss","../components/02_Styles/iconized/_iconized.scss","../components/04_Molecules/elementList/_elementList.scss","../components/05_Components/menu/_menu.scss","../components/10_Examples/imageGrid/_imageGrid.scss"],"names":[],"mappings":"AAMQ;ACFR;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;ACgDA;EA/BI;;AAEA;EArCA;EACA;;AAwCA;EApCA;EACA;;AAuCA;EAnCA;EACA;;AAsCA;EAlCA;EACA;;AAqCA;EAjCA;EACA;;AAoCA;EAhCA;EACA;;AAmCA;EAzCA;EACA;EAIA;EACA;;;AC3BJ;AAAA;AAAA;AAKA;AAAA;AAAA;AAQA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AA0BA;AAAA;AAAA;AAQA;AAAA;AAAA;AAqBA;AAAA;AAAA;AAQA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAUA;AAAA;AAAA;AA+BA;AAAA;AAAA;AA2CA;AAAA;AAAA;AAaA;AAAA;AAAA;AAaA;AAAA;AAAA;AAtBI;EAlMA;EACA;;AAqMA;EA5HA;EAQA;EACA;;AA9BA;EAjCA;EC5BH;EACA;EACA;EACA;EACA;EACA;EACA;EDwBG;;AAQA;EACI;;AA0BJ;EAjDA;;AAqDA;EAjDA;;AAqDA;EAzDA;EAsCA;;AAqKA;EDxLA;;AAEA;EArCA;EACA;;AAwCA;EApCA;EACA;;AAuCA;EAnCA;EACA;;AAsCA;EAlCA;EACA;;AAqCA;EAjCA;EACA;;AAoCA;EAhCA;EACA;;AAmCA;EAzCA;EACA;EAIA;EACA;;ACuIA;EAlEA;EACA;;AAqEA;EAjEA;EACA;;AAoEA;EAhEA;EACA;;AAmEA;EA/DA;EACA;;AAkEA;EA3DA;EACA;EACA;EACA,YAJwC;;AAgExC;EArDA;EACA;EACA;EACA;;AAsDA;EAlDA;EACA;EACA;EACA;;AAmDA;EA/CA;EACA;EACA;EACA;;AAgDA;EA5CA;EACA;EACA;EACA;;;AEhIA;EAxBA;;AA2BI;EAvBJ;EACA;EACA;;AAyBI;EA3BJ;EACA;EACA;EAKA;EACA;;AAuBI;EAnBJ;EACA;EACA,cAHiD;;AAyBjD;EHLA;;AAEA;EArCA;EACA;;AAwCA;EApCA;EACA;;AAuCA;EAnCA;EACA;;AAsCA;EAlCA;EACA;;AAqCA;EAjCA;EACA;;AAoCA;EAhCA;EACA;;AAmCA;EAzCA;EACA;EAIA;EACA;;;AI0KJ;EA7BI;EACA;;AAfA;EACI;EACA;EACA;EACA;;AA9FJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AA3CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAMwD;EALxD;;AAmER;EApCA;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;EACA;;AA8BJ;EAxCA;EACA;EACA;EAcA;;AAZA;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAkCJ;EAxBA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAkBJ;EA5BA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAsBJ;EAhCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AA0BJ;EApCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AA8BJ;EAxCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAnGJ;EACI;;AAKJ;EACI;;AAnBJ;EACI;;AAPJ;EACI;;AAuBJ;EACI;;;ACbJ;EACI;EACA;;AAGJ;EACI,OAgDmB;EA/CnB,YA+CY;;AAjEhB;EACI;;AAGJ;EACI,WA4DmB;EA3DnB,QA2DY;;AAzChB;EACI;;AAGJ;EACI;EACA,WAmCmB;EAlCnB,QAkCY;;AA5BhB;EAEI;;AAUJ;EACI;;AAGJ;EACI,QAWY;EAVZ,OAUmB;EATnB;;AAGJ;ED2GA;EACA;;AAfA;EACI;EACA;EACA;EACA;;AA9FJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AA3CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAMwD;EALxD;;AAmER;EApCA;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;EACA;;AA8BJ;EAxCA;EACA;EACA;EAcA;;AAZA;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAkCJ;EAxBA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAkBJ;EA5BA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAsBJ;EAhCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AA0BJ;EApCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AA8BJ;EAxCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAnGJ;EACI;;AAKJ;EACI;;AAnBJ;EACI;;AAPJ;EACI;;AAuBJ;EACI;;;AEhBJ;EATA;;AAaA;EATA;EFmKA;EACA;;AAfA;EACI;EACA;EACA;EACA;;AA9FJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AA3CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAMwD;EALxD;;AAmER;EApCA;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;EACA;;AA8BJ;EAxCA;EACA;EACA;EAcA;;AAZA;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAkCJ;EAxBA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAkBJ;EA5BA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAsBJ;EAhCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AA0BJ;EApCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AA8BJ;EAxCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAnGJ;EACI;;AAKJ;EACI;;AAnBJ;EACI;;AAPJ;EACI;;AAuBJ;EACI;;;AGxBJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;ACaR;EAvCI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EAdH;;AAmBO;EACI;;AAMJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AC4BJ;EAjEJ,QXDa;;AWsET;EAjEJ,QXJc;;AWyEV;EAjEJ,QXPa;;AW8ET;EA1CJ,SXtCa;EWuCb,KXvCa;EWwCb,YXxCa;;AWoFT;EArCJ,SX9Cc;EW+Cd,KX/Cc;EWgDd,YXhDc;;AWuFV;EAhCJ,SXtDa;EWuDb,KXvDa;EWwDb,YXxDa;;;AYHhB;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;ERpBA;EACA;EACA;EACA;EACA;EACA;EACA;;AQkBA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;;ACvCF;EVPI;EACA;ECTH;EACA;EACA;EACA;EACA;EACA;EACA;ESEG;;AVqDA;EAjCA;EC5BH;EACA;EACA;EACA;EACA;EACA;EACA;EDwBG;;AAQA;EACI;;AA0BJ;EAjDA;;AAqDA;EAjDA;;AAqDA;EAzDA;EAsCA;;AU5CA;EVwEA;EAQA;EACA;;;AW1FA;EXmBA;EWjBI;;AAGJ;EXUA;EAYA;EC5BH;EACA;EACA;EACA;EACA;EACA;EACA;EDwBG;;AAQA;EACI;;AW5BJ;EXHA;EACA;EADA;EACA;ECTH;EACA;EACA;EACA;EACA;EACA;EACA;ESEG;;AVqDA;EAjCA;EC5BH;EACA;EACA;EACA;EACA;EACA;EACA;EDwBG;;AAQA;EACI;;AA0BJ;EAjDA;;AAqDA;EAjDA;;AAqDA;EAzDA;EAsCA;;AU5CA;EVwEA;EAQA;EACA;;AW3EA;EXkEA;EAQA;EACA;EDxDA;EYhBI;;AZkBJ;EArCA;EACA;;AAwCA;EApCA;EACA;;AAuCA;EAnCA;EACA;;AAsCA;EAlCA;EACA;;AAqCA;EAjCA;EACA;;AAoCA;EAhCA;EACA;;AAmCA;EAzCA;EACA;EAIA;EACA;;ACuIA;EAlEA;EACA;;AAqEA;EAjEA;EACA;;AAoEA;EAhEA;EACA;;AAmEA;EA/DA;EACA;;AAkEA;EA3DA;EACA;EACA;EACA,YAJwC;;AAgExC;EArDA;EACA;EACA;EACA;;AAsDA;EAlDA;EACA;EACA;EACA;;AAmDA;EA/CA;EACA;EACA;EACA;;AAgDA;EA5CA;EACA;EACA;EACA;;AWnII;EACI,SdrBK;EcsBL;EACA;EACA;;;ATDR;EAxBA;;AA2BI;EAvBJ;EACA;EACA;;AAyBI;EA3BJ;EACA;EACA;EAKA;EACA;;AAuBI;EAnBJ;EACA;EACA,cAHiD;;AAyBjD;EHLA;;AAEA;EArCA;EACA;;AAwCA;EApCA;EACA;;AAuCA;EAnCA;EACA;;AAsCA;EAlCA;EACA;;AAqCA;EAjCA;EACA;;AAoCA;EAhCA;EACA;;AAmCA;EAzCA;EACA;EAIA;EACA;;AaxBA;EJ8CA,SX9Cc;EW+Cd,KX/Cc;EWgDd,YXhDc;;AeId;ETiKA;EACA;;AAfA;EACI;EACA;EACA;EACA;;AA9FJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AA3CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAMwD;EALxD;;AAmER;EApCA;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;EACA;;AA8BJ;EAxCA;EACA;EACA;EAcA;;AAZA;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAkCJ;EAxBA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAkBJ;EA5BA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAsBJ;EAhCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AA0BJ;EApCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AA8BJ;EAxCA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAnGJ;EACI;;AAKJ;EACI;;AAnBJ;EACI;;AAPJ;EACI;;AAuBJ;EACI;;AADJ;EACI;;ASfA;EACI;EACA;EACA;;AAEA;EACI","file":"rcss.css"} \ No newline at end of file