Converting the rest to stylus

This commit is contained in:
reverend 2021-01-03 15:33:36 +01:00
parent 35a11bab6e
commit 80bed0b6c7
20 changed files with 609 additions and 194 deletions

View File

@ -1,21 +1,21 @@
RV-ContentCrop--bottom()
img
.RV-Image *
object-position bottom
RV-ContentCrop--top()
img
.RV-Image *
object-position top
RV-ContentCrop--right()
img
.RV-Image *
object-position right
RV-ContentCrop--left()
img
.RV-Image *
object-position left
RV-ContentCrop--center()
img
.RV-Image *
object-position center
RV-ContentCrop__Text--fade(background-color=white)
@ -43,18 +43,26 @@ RV-ContentCrop__Text--ellipsis(background-color=white)
padding 0 2px
RV-ContentCrop__Text(line-height=1.1, background-color=white)
p
.RV-Text
overflow hidden
display block
text-overflow ellipsis
padding 0
margin 0
line-height line-height
// Determining the max line count and caclulating the height
line-height line-height
z-index -20
position relative
background-color background-color
height floor(100% / line-height / 16) * line-height * 16
max-height floor(100% / line-height / 16) * line-height * 16
padding 0
margin 0
*
margin 0
padding-bottom line-height * 16px
*:last-child
padding-bottom unset
&--fade
RV-ContentCrop__Text--fade(background-color)
@ -67,7 +75,7 @@ RV-ContentCrop__Shapes--square()
padding-top 100%
position relative
img,
.RV-Image *,
div
position absolute
top 0
@ -84,7 +92,7 @@ RV-ContentCrop__Shapes--xtoy(-x, -y)
padding-top 100% * (-y / -x)
position relative
img
.RV-Image *
object-fit cover
position absolute
top 0
@ -116,7 +124,7 @@ RV-ContentCrop__Shapes()
RV-ContentCrop__Shapes--xtoy(3, 2)
RV-ContentCrop__Image()
img
.RV-Image *, .RV-Image
width 100%
height 100%
object-fit cover

View File

@ -1,10 +1,13 @@
<h2>Square</h2>
<div class="square RV-ContentCrop">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"><img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
<br>
<div class="square RV-ContentCrop RV-ContentCrop--ellipsis">
<div class="RV-Text">
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
</div>
<br>
<div class="square RV-ContentCrop">
@ -14,11 +17,14 @@
<br>
<h2>Landscape</h2>
<div class="landscape RV-ContentCrop">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"><img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
<div class="landscape RV-ContentCrop RV-ContentCrop--ellipsis">
<div class="RV-Text">
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
</div>
<br>
<div class="landscape RV-ContentCrop">
@ -27,11 +33,16 @@
<br>
<h2>Portrait</h2>
<div class="portrait RV-ContentCrop">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"><img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
<br>
<div class="portrait RV-ContentCrop RV-ContentCrop--fade">
<div class="RV-Text">
<p>Some Text</p>
<p>More Text</p>
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
</div>
<br>
<div class="portrait RV-ContentCrop">
@ -40,7 +51,9 @@
<br>
<h2>Full width</h2>
<div class="full-width RV-ContentCrop">
<div class="RV-Image">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
</div>
</div>
<br>
<div class="ull-width RV-ContentCrop RV-ContentCrop--ellipsis">
@ -52,13 +65,15 @@
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--square">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<br><br>
<div>
<div class="RV-ContentCrop RV-ContentCrop--circle">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div class="RV-ContentCrop--square">
@ -68,30 +83,37 @@
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--1to2">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--2to1">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--4to3">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--16to9">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--3to2">
<div class="RV-Image">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
</div>
</div>
</div>

View File

@ -1,8 +1,6 @@
<div class="RV-Fan__Container RV-Fan__Container--horizontal">
<div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface">
<p>Some content here</p>
<p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.

View File

@ -24,10 +24,8 @@ RV-FlexGrid__Container--masonry(item-width=300px)
)
RV-FlexGrid(prefix='&')
RV-FlexGrid--shorthands(prefix='&')
{prefix}__Container
RV-FlexGrid__Container()
&--autoWidth
RV-FlexGrid__Container--autoWidth()
@ -37,8 +35,13 @@ RV-FlexGrid(prefix='&')
&--masonry
RV-FlexGrid__Container--masonry()
RV-FlexGrid(prefix='&')
{prefix}__Container
RV-FlexGrid__Container()
{prefix}__Item
RV-Alignment()
.RV-FlexGrid
RV-FlexGrid()
RV-FlexGrid--shorthands()

View File

@ -1 +0,0 @@
@import 'elementList/elementList';

View File

@ -0,0 +1 @@
@import 'elementList/_elementList'

View File

@ -1,19 +0,0 @@
@mixin RV-ElementList__Item {
@include RV-FlexRow__Item;
}
@mixin RV-ElementList($-break_width: 500px, $prefix: '&') {
@include RV-FlexRow__Container;
@include RV-FlexRow__Container--shorthands;
@include RV-Reset;
list-style-type: none;
#{$prefix}__Item {
@include RV-ElementList__Item;
}
}
.RV-ElementList {
@include RV-ElementList;
}

View File

@ -0,0 +1,15 @@
RV-ElementList__Item()
@include RV-FlexRow__Item
RV-ElementList(break_width=500px, prefix='&')
RV-FlexRow__Container()
RV-FlexRow__Container--shorthands()
RV-Reset()
list-style-type none
{prefix}__Item
RV-ElementList__Item()
.RV-ElementList
RV-ElementList()

View File

@ -1 +0,0 @@
@import 'menu/menu';

View File

@ -0,0 +1,2 @@
@import 'menu/_menu'
@import 'imageGrid/_imageGrid'

View File

@ -0,0 +1,13 @@
RV-ImageGrid()
RV-FlexGrid()
&__Container
RV-Spacing__Inner--small()
RV-FlexGrid__Container--autoWidth()
&__Item
RV-ContentCrop()
RV-ContentCrop--center()
.RV-ImageGrid
RV-ImageGrid()

View File

@ -1,35 +0,0 @@
@mixin RV-Menu {
&--vertical &__List {
@include RV-FlexRow__Container--vertical;
width: 100%;
}
&--horizontal &__List {
@include RV-FlexRow__Container--horizontal;
@include RV-FlexRow__Container--breakPoint(400px);
}
&__List {
@include RV-FlexRow__Container($-prefix: '.RV-Menu');
@include RV-ElementList;
}
&__Item {
@include RV-FlexRow__Item;
@include RV-FlexRow__Item--shorthands;
width: 100px;
.RV-Link {
padding: $-spacing-small;
background-color: beige;
display: block;
white-space: nowrap;
}
}
}
.RV-Menu {
@include RV-Menu;
}

View File

@ -0,0 +1,26 @@
RV-Menu()
&--vertical &__List
RV-FlexRow__Container--vertical()
width 100%
&--horizontal &__List
RV-FlexRow__Container--horizontal()
RV-FlexRow__Container--breakPoint(400px)
&__List
RV-FlexRow__Container(prefix='.RV-Menu')
RV-ElementList()
&__Item
RV-FlexRow__Item()
RV-FlexRow__Item--shorthands()
width 100px
.RV-Link
padding spacing-small
background-color beige
display block
white-space nowrap
.RV-Menu
RV-Menu()

View File

@ -1,26 +0,0 @@
@mixin RV-ImageGrid {
@include RV-FlexGrid;
&__Container {
@include RV-Spacing__Inner--medium;
}
&__Item {
@include RV-ContentCrop;
@include RV-ContentCrop--center;
&--square {
height: 0;
width: 100%;
padding-bottom: 100%;
* {
height: initial;
}
}
}
}
.RV-ImageGrid {
@include RV-ImageGrid;
}

View File

@ -1,9 +1,5 @@
@import '00_Global/_global'
@import '02_Styles/_styles'
@import '01_Layouts/_layouts'
//@import '04_Molecules/_molecules'
//@import '05_Components/_components'
//@import '10_Examples/_examples'
@import '04_Molecules/_molecules'
@import '05_Components/_components'

View File

@ -8,14 +8,10 @@
<style>
.red{
background-color: firebrick;
padding: -2px;
border: 1px black solid;
}
.green {
background-color: forestgreen;
padding: -2px;
border: 1px black solid;
}
.square {

View File

@ -1,5 +1,5 @@
// Padding and Margin sizes
line-height = 1.1
spacing-small = 10px
spacing-medium = 25px
spacing-large = 35px

View File

@ -164,23 +164,31 @@
display: block;
overflow: hidden;
}
.RV-ContentCrop img {
.RV-ContentCrop .RV-Image *,
.RV-ContentCrop .RV-Image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.RV-ContentCrop p {
.RV-ContentCrop .RV-Text {
overflow: hidden;
display: block;
text-overflow: ellipsis;
padding: 0;
margin: 0;
line-height: 1.21;
z-index: -20;
position: relative;
background-color: #fff;
height: 96.80000000000001%;
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);
@ -209,7 +217,7 @@
padding-top: 100%;
position: relative;
}
.RV-ContentCrop--square img,
.RV-ContentCrop--square .RV-Image *,
.RV-ContentCrop--square div {
position: absolute;
top: 0;
@ -223,7 +231,7 @@
position: relative;
border-radius: 50%;
}
.RV-ContentCrop--circle img,
.RV-ContentCrop--circle .RV-Image *,
.RV-ContentCrop--circle div {
position: absolute;
top: 0;
@ -236,7 +244,7 @@
padding-top: 200%;
position: relative;
}
.RV-ContentCrop--1to2 img {
.RV-ContentCrop--1to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -249,7 +257,7 @@
padding-top: 50%;
position: relative;
}
.RV-ContentCrop--2to1 img {
.RV-ContentCrop--2to1 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -262,7 +270,7 @@
padding-top: 75%;
position: relative;
}
.RV-ContentCrop--4to3 img {
.RV-ContentCrop--4to3 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -275,7 +283,7 @@
padding-top: 56.25%;
position: relative;
}
.RV-ContentCrop--16to9 img {
.RV-ContentCrop--16to9 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -288,7 +296,7 @@
padding-top: 66.66666666666666%;
position: relative;
}
.RV-ContentCrop--3to2 img {
.RV-ContentCrop--3to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -296,19 +304,19 @@
bottom: 0;
right: 0;
}
.RV-ContentCrop--left img {
.RV-ContentCrop--left .RV-Image * {
object-position: left;
}
.RV-ContentCrop--center img {
.RV-ContentCrop--center .RV-Image * {
object-position: center;
}
.RV-ContentCrop--top img {
.RV-ContentCrop--top .RV-Image * {
object-position: top;
}
.RV-ContentCrop--bottom img {
.RV-ContentCrop--bottom .RV-Image * {
object-position: bottom;
}
.RV-ContentCrop--center img {
.RV-ContentCrop--center .RV-Image * {
object-position: center;
}
.RV-Fan__Container--vertical {
@ -350,23 +358,31 @@
display: block;
overflow: hidden;
}
.RV-Fan__Surface img {
.RV-Fan__Surface .RV-Image *,
.RV-Fan__Surface .RV-Image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.RV-Fan__Surface p {
.RV-Fan__Surface .RV-Text {
overflow: hidden;
display: block;
text-overflow: ellipsis;
padding: 0;
margin: 0;
line-height: 1.21;
z-index: -20;
position: relative;
background-color: #fff;
height: 96.80000000000001%;
max-height: 96.80000000000001%;
padding: 0;
margin: 0;
}
.RV-Fan__Surface .RV-Text * {
margin: 0;
padding-bottom: 19.360000000000003px;
}
.RV-Fan__Surface .RV-Text *:last-child {
padding-bottom: unset;
}
.RV-Fan__Surface--fade:after {
background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff);
@ -395,7 +411,7 @@
padding-top: 100%;
position: relative;
}
.RV-Fan__Surface--square img,
.RV-Fan__Surface--square .RV-Image *,
.RV-Fan__Surface--square div {
position: absolute;
top: 0;
@ -409,7 +425,7 @@
position: relative;
border-radius: 50%;
}
.RV-Fan__Surface--circle img,
.RV-Fan__Surface--circle .RV-Image *,
.RV-Fan__Surface--circle div {
position: absolute;
top: 0;
@ -422,7 +438,7 @@
padding-top: 200%;
position: relative;
}
.RV-Fan__Surface--1to2 img {
.RV-Fan__Surface--1to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -435,7 +451,7 @@
padding-top: 50%;
position: relative;
}
.RV-Fan__Surface--2to1 img {
.RV-Fan__Surface--2to1 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -448,7 +464,7 @@
padding-top: 75%;
position: relative;
}
.RV-Fan__Surface--4to3 img {
.RV-Fan__Surface--4to3 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -461,7 +477,7 @@
padding-top: 56.25%;
position: relative;
}
.RV-Fan__Surface--16to9 img {
.RV-Fan__Surface--16to9 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -474,7 +490,7 @@
padding-top: 66.66666666666666%;
position: relative;
}
.RV-Fan__Surface--3to2 img {
.RV-Fan__Surface--3to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -482,41 +498,24 @@
bottom: 0;
right: 0;
}
.RV-Fan__Surface--left img {
.RV-Fan__Surface--left .RV-Image * {
object-position: left;
}
.RV-Fan__Surface--center img {
.RV-Fan__Surface--center .RV-Image * {
object-position: center;
}
.RV-Fan__Surface--top img {
.RV-Fan__Surface--top .RV-Image * {
object-position: top;
}
.RV-Fan__Surface--bottom img {
.RV-Fan__Surface--bottom .RV-Image * {
object-position: bottom;
}
.RV-Fan__Surface--center img {
.RV-Fan__Surface--center .RV-Image * {
object-position: center;
}
.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);
}
.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;
}
@ -550,6 +549,23 @@
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 {
display: flex;
height: 100%;
@ -670,23 +686,31 @@
display: block;
overflow: hidden;
}
.RV-FullWidthContent__Item img {
.RV-FullWidthContent__Item .RV-Image *,
.RV-FullWidthContent__Item .RV-Image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.RV-FullWidthContent__Item p {
.RV-FullWidthContent__Item .RV-Text {
overflow: hidden;
display: block;
text-overflow: ellipsis;
padding: 0;
margin: 0;
line-height: 1.21;
z-index: -20;
position: relative;
background-color: #fff;
height: 96.80000000000001%;
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);
@ -715,7 +739,7 @@
padding-top: 100%;
position: relative;
}
.RV-FullWidthContent__Item--square img,
.RV-FullWidthContent__Item--square .RV-Image *,
.RV-FullWidthContent__Item--square div {
position: absolute;
top: 0;
@ -729,7 +753,7 @@
position: relative;
border-radius: 50%;
}
.RV-FullWidthContent__Item--circle img,
.RV-FullWidthContent__Item--circle .RV-Image *,
.RV-FullWidthContent__Item--circle div {
position: absolute;
top: 0;
@ -742,7 +766,7 @@
padding-top: 200%;
position: relative;
}
.RV-FullWidthContent__Item--1to2 img {
.RV-FullWidthContent__Item--1to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -755,7 +779,7 @@
padding-top: 50%;
position: relative;
}
.RV-FullWidthContent__Item--2to1 img {
.RV-FullWidthContent__Item--2to1 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -768,7 +792,7 @@
padding-top: 75%;
position: relative;
}
.RV-FullWidthContent__Item--4to3 img {
.RV-FullWidthContent__Item--4to3 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -781,7 +805,7 @@
padding-top: 56.25%;
position: relative;
}
.RV-FullWidthContent__Item--16to9 img {
.RV-FullWidthContent__Item--16to9 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -794,7 +818,7 @@
padding-top: 66.66666666666666%;
position: relative;
}
.RV-FullWidthContent__Item--3to2 img {
.RV-FullWidthContent__Item--3to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
@ -802,19 +826,409 @@
bottom: 0;
right: 0;
}
.RV-FullWidthContent__Item--left img {
.RV-FullWidthContent__Item--left .RV-Image * {
object-position: left;
}
.RV-FullWidthContent__Item--center img {
.RV-FullWidthContent__Item--center .RV-Image * {
object-position: center;
}
.RV-FullWidthContent__Item--top img {
.RV-FullWidthContent__Item--top .RV-Image * {
object-position: top;
}
.RV-FullWidthContent__Item--bottom img {
.RV-FullWidthContent__Item--bottom .RV-Image * {
object-position: bottom;
}
.RV-FullWidthContent__Item--center img {
.RV-FullWidthContent__Item--center .RV-Image * {
object-position: center;
}
.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-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 {
display: grid;
}
.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;
}
.RV-ImageGrid__Container {
padding: 10px;
gap: 10px;
column-gap: 10px;
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-ImageGrid__Item {
display: block;
overflow: hidden;
}
.RV-ImageGrid__Item .RV-Image *,
.RV-ImageGrid__Item .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;
z-index: -20;
position: relative;
background-color: #fff;
max-height: 96.80000000000001%;
padding: 0;
margin: 0;
}
.RV-ImageGrid__Item .RV-Text * {
margin: 0;
padding-bottom: 19.360000000000003px;
}
.RV-ImageGrid__Item .RV-Text *:last-child {
padding-bottom: unset;
}
.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-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-ImageGrid__Item--square {
width: 100%;
padding-top: 100%;
position: relative;
}
.RV-ImageGrid__Item--square .RV-Image *,
.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 .RV-Image *,
.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 .RV-Image * {
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 .RV-Image * {
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 .RV-Image * {
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 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--3to2 {
width: 100%;
padding-top: 66.66666666666666%;
position: relative;
}
.RV-ImageGrid__Item--3to2 .RV-Image * {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.RV-ImageGrid__Item--left .RV-Image * {
object-position: left;
}
.RV-ImageGrid__Item--center .RV-Image * {
object-position: center;
}
.RV-ImageGrid__Item--top .RV-Image * {
object-position: top;
}
.RV-ImageGrid__Item--bottom .RV-Image * {
object-position: bottom;
}
.RV-ImageGrid__Item--center .RV-Image * {
object-position: center;
}
.RV-ImageGrid__Item .RV-Image * {
object-position: center;
}
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * {
@ -826,3 +1240,6 @@
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--large * {
margin-bottom: 35px;
}
.RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * {
margin-bottom: 10px;
}