diff --git a/components/05_Components/menu/_menu.scss b/components/05_Components/menu/_menu.scss index 0fb06cb..b6c4cd0 100644 --- a/components/05_Components/menu/_menu.scss +++ b/components/05_Components/menu/_menu.scss @@ -7,6 +7,7 @@ &--horizontal &__List { @include RV-FlexRow__Container--horizontal; + @include RV-FlexRow__Container--breakPoint; } &--spaced &__List { diff --git a/public/rcss.css b/public/rcss.css index 441049c..e7ac622 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -1,71 +1,122 @@ @import url(./pink.css); -.RV-Alignment__Container { +.RV-Alignment { display: grid; } - .RV-Alignment__Container--top { + .RV-Alignment--top { display: grid; align-content: start; } - .RV-Alignment__Container--bottom { + .RV-Alignment--bottom { display: grid; align-content: end; } - .RV-Alignment__Container--left { + .RV-Alignment--left { display: grid; justify-content: start; } - .RV-Alignment__Container--right { + .RV-Alignment--right { display: grid; justify-content: end; } - .RV-Alignment__Container--horizontalCenter { + .RV-Alignment--horizontalCenter { display: grid; justify-content: center; } - .RV-Alignment__Container--verticalCenter { + .RV-Alignment--verticalCenter { display: grid; align-items: center; } - .RV-Alignment__Container--center { + .RV-Alignment--center { display: grid; justify-content: center; display: grid; align-items: center; } +/* + * Classes for easy flexrow usage + */ +/* ########## + * Container class + ########### */ +/* + * Orientation + */ +/* + * Breaks from row to column orientation at the given breakpoint + * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint. + */ +/* + * Flexbox behavior, Row is horizontal, but item are wraped individualy + */ +/* + * Shorthand for the modifiers above + */ +/* ########## + * Item class + ########### */ +/* + * Varios relative width of items to each other + */ +/* + * Item has always the given width + */ +/* + * Item width relativ to the container + */ +/* + * Shorthand for the modifiers above + */ +/* + * Combining basic classes + */ +/* + * Combining shorthands + */ +/* + * Final CSS Class + */ .RV-FlexRow__Container { display: flex; - flex-direction: row; height: 100%; } - .RV-FlexRow__Container--multiRow { - flex-wrap: wrap; } - .RV-FlexRow__Container--column { - display: flex; - flex-direction: column; } .RV-FlexRow__Item { - min-width: min-content; - width: 100%; } - .RV-FlexRow__Item__Container { - display: grid; } - .RV-FlexRow__Item__Container--top { - display: grid; - align-content: start; } - .RV-FlexRow__Item__Container--bottom { - display: grid; - align-content: end; } - .RV-FlexRow__Item__Container--left { - display: grid; - justify-content: start; } - .RV-FlexRow__Item__Container--right { - display: grid; - justify-content: end; } - .RV-FlexRow__Item__Container--horizontalCenter { - display: grid; - justify-content: center; } - .RV-FlexRow__Item__Container--verticalCenter { - display: grid; - align-items: center; } - .RV-FlexRow__Item__Container--center { - display: grid; - justify-content: center; - display: grid; - align-items: center; } - .RV-FlexRow__Item, .RV-FlexRow__Item--normal { - flex-grow: 3; - flex-shrink: 3; } + flex-basis: max-content; + flex-grow: 3; + flex-shrink: 3; } + +.RV-FlexRow__Container--breakPoint { + flex-wrap: wrap; } + .RV-FlexRow__Container--breakPoint * { + flex-basis: calc(500px * 999 - 100% * 999); } + +.RV-FlexRow__Container--horizontal { + flex-direction: row; } + +.RV-FlexRow__Container--vertical { + flex-direction: column; } + +.RV-FlexRow__Container--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; } .RV-FlexRow__Item--narrower { flex-grow: 1; flex-shrink: 5; } @@ -83,6 +134,26 @@ 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; @@ -90,55 +161,159 @@ grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(300px, 1fr); } -.RV-FlexGrid__Item__Container { +.RV-FlexGrid__Item { display: grid; } - .RV-FlexGrid__Item__Container--top { + .RV-FlexGrid__Item--top { display: grid; align-content: start; } - .RV-FlexGrid__Item__Container--bottom { + .RV-FlexGrid__Item--bottom { display: grid; align-content: end; } - .RV-FlexGrid__Item__Container--left { + .RV-FlexGrid__Item--left { display: grid; justify-content: start; } - .RV-FlexGrid__Item__Container--right { + .RV-FlexGrid__Item--right { display: grid; justify-content: end; } - .RV-FlexGrid__Item__Container--horizontalCenter { + .RV-FlexGrid__Item--horizontalCenter { display: grid; justify-content: center; } - .RV-FlexGrid__Item__Container--verticalCenter { + .RV-FlexGrid__Item--verticalCenter { display: grid; align-items: center; } - .RV-FlexGrid__Item__Container--center { + .RV-FlexGrid__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } -.RV-ContentCrop__Container, .RV-ContentCrop__Container * { - overflow: hidden; - word-break: break-all; } - -.RV-ContentCrop__Container img { - width: 100%; - height: 100%; - object-fit: cover; } - -.RV-ContentCrop__Container--left img { - object-position: left; } - -.RV-ContentCrop__Container--center img { - object-position: center; } - -.RV-ContentCrop__Container--top img { - object-position: top; } - -.RV-ContentCrop__Container--bottom img { - object-position: botom; } - -.RV-ContentCrop__Container--center img { - object-position: 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; } .RV-Fan__Container--vertical { flex-direction: column; @@ -163,7 +338,8 @@ min-width: 320px; height: 280px; } -.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface { +.RV-Fan__Container--fullWidth .RV-Fan__Base, +.RV-Fan__Container--fullWidth .RV-Fan__Surface { flex-grow: 1; } .RV-Fan__Container { @@ -174,42 +350,255 @@ width: 320px; flex: 0 0 auto; } -.RV-Fan__Surface, .RV-Fan__Surface * { - overflow: hidden; - word-break: break-all; } - -.RV-Fan__Surface img { - width: 100%; - height: 100%; - object-fit: cover; } - -.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: botom; } - -.RV-Fan__Surface--center img { - object-position: center; } +.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; } .RV-FullWidthContent__Container { width: 100%; } .RV-FullWidthContent__Item { - width: 100%; } - .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * { - overflow: hidden; - word-break: break-all; } + width: 100%; + display: block; + overflow: hidden; } .RV-FullWidthContent__Item img { width: 100%; height: 100%; - object-fit: cover; } + 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 { @@ -217,23 +606,47 @@ .RV-FullWidthContent__Item--top img { object-position: top; } .RV-FullWidthContent__Item--bottom img { - object-position: botom; } + 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%; } + +.RV-Sizes--third { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 33.33%; + width: 33.33%; } + +.RV-Sizes--quarter { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 25%; + width: 25%; } + +.RV-Sizes--fixedSize { + flex-grow: 0; + flex-shrink: 0; } + +.RV-Sizes--content { + flex-grow: 0; + flex-shrink: 0; + width: max-content; + flex-basis: max-content; } + .RV-BoxShadow { position: relative; - float: left; - width: 40%; - margin: 2em 10px 4em; - background: #fff; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + float: left; } .RV-BoxShadow:before, .RV-BoxShadow:after { content: ""; position: absolute; z-index: -2; } .RV-BoxShadow--simple { - box-shadow: 0 0 20px #6b5690; } + 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 { @@ -249,25 +662,6 @@ left: auto; transform: rotate(3deg); } -.RV-ElementList__Container { - list-style-type: none; - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; } - -.RV-ElementList__Item { - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; } - .RV-Spacing__Outer--small { margin: 10px; } @@ -342,24 +736,146 @@ position: relative; top: 2.175em; } -.RV-ImageGrid__Container { - list-style-type: none; +.RV-ElementList { + display: flex; + height: 100%; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; - border: none; } + 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; } -.RV-ImageGrid__Item { +.RV-Menu--vertical .RV-Menu__List { + flex-direction: column; + 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; } + +.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; } + 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__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; } .RV-ImageGrid__Container { display: grid; @@ -367,27 +883,27 @@ grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(300px, 1fr); } -.RV-ImageGrid__Item__Container { +.RV-ImageGrid__Item { display: grid; } - .RV-ImageGrid__Item__Container--top { + .RV-ImageGrid__Item--top { display: grid; align-content: start; } - .RV-ImageGrid__Item__Container--bottom { + .RV-ImageGrid__Item--bottom { display: grid; align-content: end; } - .RV-ImageGrid__Item__Container--left { + .RV-ImageGrid__Item--left { display: grid; justify-content: start; } - .RV-ImageGrid__Item__Container--right { + .RV-ImageGrid__Item--right { display: grid; justify-content: end; } - .RV-ImageGrid__Item__Container--horizontalCenter { + .RV-ImageGrid__Item--horizontalCenter { display: grid; justify-content: center; } - .RV-ImageGrid__Item__Container--verticalCenter { + .RV-ImageGrid__Item--verticalCenter { display: grid; align-items: center; } - .RV-ImageGrid__Item__Container--center { + .RV-ImageGrid__Item--center { display: grid; justify-content: center; display: grid; @@ -398,29 +914,138 @@ .RV-ImageGrid__Container__Container { gap: 25px; } -.RV-ImageGrid__Item, .RV-ImageGrid__Item * { - overflow: hidden; - word-break: break-all; } - -.RV-ImageGrid__Item img { - width: 100%; - height: 100%; - object-fit: cover; } - -.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: botom; } - -.RV-ImageGrid__Item--center img { - object-position: center; } - -.RV-ImageGrid__Item img { - object-position: center; } +.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; }