reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Converting the rest to stylus

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/01_Layouts/contentCrop/_contentCrop.styl
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

40
components/01_Layouts/contentCrop/contentCrop.hbs
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, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re 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, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re 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, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re 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>

2
components/01_Layouts/fan/fan.hbs
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.

9
components/01_Layouts/flexGrid/_flexGrid.styl
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()

1
components/04_Molecules/_molecules.scss
View File

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

1
components/04_Molecules/_molecules.styl Normal file
View File

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

19
components/04_Molecules/elementList/_elementList.scss
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;
}

15
components/04_Molecules/elementList/_elementList.styl Normal file
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()

1
components/05_Components/_components.scss
View File

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

2
components/05_Components/_components.styl Normal file
View File

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

13
components/05_Components/imageGrid/_imageGrid.styl Normal file
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()

0
components/10_Examples/imageGrid/imageGrid.config.json → components/05_Components/imageGrid/imageGrid.config.json
View File

0
components/10_Examples/imageGrid/imageGrid.hbs → components/05_Components/imageGrid/imageGrid.hbs
View File

35
components/05_Components/menu/_menu.scss
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;
}

26
components/05_Components/menu/_menu.styl Normal file
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()

26
components/10_Examples/imageGrid/_imageGrid.scss
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;
}

8
components/_components.styl
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'

4
components/_preview.hbs
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 {

2
components/rcss.styl
View File

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

553
public/rcss.css
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;
}