Converting the rest to stylus

This commit is contained in:
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">
<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 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">
<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 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">
<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 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">
<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>

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()
RV-FlexGrid--shorthands()