Converting the rest to stylus
This commit is contained in:
parent
35a11bab6e
commit
80bed0b6c7
@ -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
|
||||
|
||||
@ -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">
|
||||
<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 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">
|
||||
<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 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">
|
||||
<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 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">
|
||||
<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="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">
|
||||
<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>
|
||||
@ -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.
|
||||
|
||||
@ -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()
|
||||
RV-FlexGrid--shorthands()
|
||||
@ -1 +0,0 @@
|
||||
@import 'elementList/elementList';
|
||||
1
components/04_Molecules/_molecules.styl
Normal file
1
components/04_Molecules/_molecules.styl
Normal file
@ -0,0 +1 @@
|
||||
@import 'elementList/_elementList'
|
||||
@ -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
15
components/04_Molecules/elementList/_elementList.styl
Normal 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 +0,0 @@
|
||||
@import 'menu/menu';
|
||||
2
components/05_Components/_components.styl
Normal file
2
components/05_Components/_components.styl
Normal file
@ -0,0 +1,2 @@
|
||||
@import 'menu/_menu'
|
||||
@import 'imageGrid/_imageGrid'
|
||||
13
components/05_Components/imageGrid/_imageGrid.styl
Normal file
13
components/05_Components/imageGrid/_imageGrid.styl
Normal 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()
|
||||
@ -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
26
components/05_Components/menu/_menu.styl
Normal 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()
|
||||
@ -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;
|
||||
}
|
||||
@ -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'
|
||||
@ -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 {
|
||||
|
||||
@ -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
553
public/rcss.css
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user