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

Removing unused components

Browse Source
This commit is contained in:
reverend 2021-03-09 12:37:47 +01:00
parent dc794a15fa
commit 933dbbe2eb
7 changed files with 0 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/01_Layouts/_layouts.styl
View File

@ -1,6 +1,4 @@
@import 'dummy/_dummy'
@import 'contentCrop/_contentCrop'
//@import 'fullWidthContent/_fullWidthContent'
@import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid'
@import 'fan/_fan'

179
components/01_Layouts/contentCrop/_contentCrop.styl
View File

@ -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
components/01_Layouts/contentCrop/contentCrop.config.json
View File

@ -1 +0,0 @@
{}

122
components/01_Layouts/contentCrop/contentCrop.hbs
View File

@ -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>

14
components/01_Layouts/fullWidthContent/_fullWidthContent.styl
View File

@ -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
components/01_Layouts/fullWidthContent/fullWidthContent.config.json
View File

@ -1 +0,0 @@
{}

11
components/01_Layouts/fullWidthContent/fullWidthContent.hbs
View File

@ -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>