Removing unused components
This commit is contained in:
parent
dc794a15fa
commit
933dbbe2eb
|
|
@ -1,6 +1,4 @@
|
|||
@import 'dummy/_dummy'
|
||||
@import 'contentCrop/_contentCrop'
|
||||
//@import 'fullWidthContent/_fullWidthContent'
|
||||
@import 'flexRow/_flexRow'
|
||||
@import 'flexGrid/_flexGrid'
|
||||
@import 'fan/_fan'
|
||||
|
|
|
|||
|
|
@ -1,179 +0,0 @@
|
|||
RV-ContentCrop--bottom()
|
||||
+RV-Block--modifier()
|
||||
.RV-Image *
|
||||
object-position bottom
|
||||
|
||||
RV-ContentCrop--top()
|
||||
+RV-Block--modifier()
|
||||
.RV-Image *
|
||||
object-position top
|
||||
|
||||
RV-ContentCrop--right()
|
||||
+RV-Block--modifier()
|
||||
.RV-Image *
|
||||
object-position right
|
||||
|
||||
RV-ContentCrop--left()
|
||||
+RV-Block--modifier()
|
||||
.RV-Image *
|
||||
object-position left
|
||||
|
||||
RV-ContentCrop--center()
|
||||
+RV-Block--modifier()
|
||||
.RV-Image *
|
||||
object-position center
|
||||
|
||||
RV-ContentCrop--square()
|
||||
+RV-Block--modifier()
|
||||
width 100%
|
||||
padding-top 100%
|
||||
position relative
|
||||
|
||||
.RV-Image *,
|
||||
div
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
RV-ContentCrop--circle()
|
||||
+RV-Block--modifier()
|
||||
border-radius 50%
|
||||
width 100%
|
||||
padding-top 100%
|
||||
position relative
|
||||
|
||||
.RV-Image *,
|
||||
div
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
RV-ContentCrop--XtoY(x=1, y=1)
|
||||
RV-CSSParameter({
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
|
||||
+RV-Block--modifier()
|
||||
width 100%
|
||||
padding-top 100% * (--y / --x)
|
||||
position relative
|
||||
|
||||
.RV-Image *
|
||||
object-fit cover
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
RV-ContentCrop--1to2()
|
||||
+RV-Block--modifier()
|
||||
RV-ContentCrop__XtoY(1, 2)
|
||||
|
||||
RV-ContentCrop--2to1()
|
||||
+RV-Block--modifier()
|
||||
RV-ContentCrop__XtoY(2, 1)
|
||||
|
||||
RV-ContentCrop--4to3()
|
||||
+RV-Block--modifier()
|
||||
RV-ContentCrop__XtoY(4, 3)
|
||||
|
||||
RV-ContentCrop--16to9()
|
||||
+RV-Block--modifier()
|
||||
RV-ContentCrop__XtoY(16, 9)
|
||||
|
||||
RV-ContentCrop--3to2()
|
||||
+RV-Block--modifier()
|
||||
RV-ContentCrop__XtoY(3, 2)
|
||||
|
||||
RV-ContentCrop__Text--fade(background-color=white)
|
||||
+RV-Element--modifier()
|
||||
&:after
|
||||
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
|
||||
display block
|
||||
content '###'
|
||||
color transparent
|
||||
opacity 1
|
||||
position relative
|
||||
top -30px
|
||||
width 100%
|
||||
height 30px
|
||||
z-index 10
|
||||
|
||||
RV-ContentCrop__Text--ellipsis(background-color=white)
|
||||
+RV-Element--modifier()
|
||||
&:after
|
||||
position relative
|
||||
display block
|
||||
bottom 1.2em
|
||||
left calc(100% - 3ch)
|
||||
content '...'
|
||||
font-size 1.2em
|
||||
min-width 2em
|
||||
background-color background-color
|
||||
padding 0 2px
|
||||
|
||||
|
||||
RV-ContentCrop(line-height=1.1, height=350px)
|
||||
background-color = white
|
||||
display block
|
||||
overflow hidden
|
||||
|
||||
height 100%
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
|
||||
|
||||
.RV-Image
|
||||
width 100%
|
||||
height 100%
|
||||
object-fit cover
|
||||
display block
|
||||
|
||||
.RV-Text
|
||||
overflow hidden
|
||||
display block
|
||||
position relative
|
||||
text-overflow ellipsis
|
||||
background-color background-color
|
||||
|
||||
line-height line-height
|
||||
max-height floor(height / (line-height * 16)) * (line-height * 16)
|
||||
|
||||
padding 0
|
||||
margin 0
|
||||
|
||||
|
||||
+RV-Block('RV-ContentCrop')
|
||||
RV-CSSParameter({
|
||||
|
||||
})
|
||||
|
||||
line-height = 1.1
|
||||
height = 350px
|
||||
|
||||
RV-ContentCrop(line-height, height)
|
||||
|
||||
RV-ContentCrop__Image()
|
||||
|
||||
+RV-Element('Text')
|
||||
RV-ContentCrop__Text--ellipsis()
|
||||
RV-ContentCrop__Text--fade()
|
||||
|
||||
RV-ContentCrop--bottom()
|
||||
RV-ContentCrop--top()
|
||||
RV-ContentCrop--right()
|
||||
RV-ContentCrop--left()
|
||||
RV-ContentCrop--center()
|
||||
RV-ContentCrop--square()
|
||||
RV-ContentCrop--circle()
|
||||
RV-ContentCrop--1to2()
|
||||
RV-ContentCrop--2to1()
|
||||
RV-ContentCrop--4to3()
|
||||
RV-ContentCrop--16to9()
|
||||
RV-ContentCrop--3to2()
|
||||
|
|
@ -1 +0,0 @@
|
|||
{}
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
|
||||
<div class="RV-Dummy__Square RV-ContentCrop">
|
||||
<img class="RV-Image" src="{{path '/images/hasi05.png'}}"/>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="RV-Dummy__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. . 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">
|
||||
<div class="portrait red"></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<h2>Landscape</h2>
|
||||
<div class="landscape 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>
|
||||
|
||||
<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. . 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">
|
||||
<div class="portrait red"></div>
|
||||
</div>
|
||||
<br>
|
||||
<h2>Portrait</h2>
|
||||
<div class="portrait 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="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. . 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">
|
||||
<div class="landscape red"></div>
|
||||
</div>
|
||||
<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">
|
||||
<p>You could see there was text coming out of her eyes, text coming out of her wherever. . 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>
|
||||
<br>
|
||||
<div class="full-width RV-ContentCrop">
|
||||
<div class="portrait red"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="RV-ContentCrop RV-ContentCrop--square">
|
||||
<div class="RV-ContentCrop__Image">
|
||||
<img class="RV-Image" 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">
|
||||
<div class="RV-ContentCrop__Image">
|
||||
<img class="RV-Image" 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">
|
||||
<div>
|
||||
<p>You could see there was text coming out of her eyes, text coming out of her wherever. . 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>
|
||||
<div>
|
||||
<div class="RV-ContentCrop RV-ContentCrop__Image RV-ContentCrop--1to2">
|
||||
<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__Image RV-ContentCrop--2to1">
|
||||
<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">
|
||||
<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__Image RV-ContentCrop--16to9">
|
||||
<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__Image 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>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
RV-FullWidthContent()
|
||||
width 100%
|
||||
|
||||
RV-FullWidthContent__Item()
|
||||
+RV-Element()
|
||||
width 100%
|
||||
RV-ContentCrop__Text()
|
||||
RV-ContentCrop__Image()
|
||||
|
||||
|
||||
+RV-Block('RV-FullWidthContent')
|
||||
RV-FullWidthContent()
|
||||
|
||||
RV-FullWidthContent__Item()
|
||||
|
|
@ -1 +0,0 @@
|
|||
{}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<div clas="RV-FullWidthContent__Container">
|
||||
<div class="RV-FullWidthContent__Item">
|
||||
<img src="http://via.placeholder.com/780x600"/>
|
||||
</div>
|
||||
<div class="RV-FullWidthContent__Item">
|
||||
<img src="http://via.placeholder.com/360x280"/>
|
||||
</div>
|
||||
<div class="RV-FullWidthContent__Item"></div>
|
||||
<div class="RV-FullWidthContent__Item"></div>
|
||||
<div class="RV-FullWidthContent__Item"></div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue