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

Renaming Dicts according to atomic design

Browse Source
This commit is contained in:
reverend
2021-01-17 22:54:33 +01:00
parent 4ac61a8224
commit 64b21a2c81
49 changed files with 410 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,196 +0,0 @@
RV-ContentCrop--bottom()
+RV-Block__Modifier--name('bottom')
.RV-Image *
object-position bottom
RV-ContentCrop--top()
+RV-Block__Modifier--name('top')
.RV-Image *
object-position top
RV-ContentCrop--right()
+RV-Block__Modifier--name('right')
.RV-Image *
object-position right
RV-ContentCrop--left()
+RV-Block__Modifier--name('left')
.RV-Image *
object-position left
RV-ContentCrop--center()
+RV-Block__Modifier--name('center')
.RV-Image *
object-position center
RV-ContentCrop--square()
+RV-Block__Modifier--name('square')
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--name('circle')
RV-ContentCrop__Square()
border-radius 50%
RV-ContentCrop--XtoY(x=1, y=1)
RV-CSSParameter({
x: x,
y: y
})
+RV-Block__Modifier--name('XtoY')
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--name('1to2')
RV-ContentCrop__XtoY(1, 2)
RV-ContentCrop--2to1()
+RV-Block__Modifier--name('2to1')
RV-ContentCrop__XtoY(2, 1)
RV-ContentCrop--4to3()
+RV-Block__Modifier--name('4to3')
RV-ContentCrop__XtoY(4, 3)
RV-ContentCrop--16to9()
+RV-Block__Modifier--name('16to9')
RV-ContentCrop__XtoY(16, 9)
RV-ContentCrop--3to2()
+RV-Block__Modifier--name('3to2')
RV-ContentCrop__XtoY(3, 2)
RV-ContentCrop__Image()
+RV-Element--name('Image')
.RV-Image *, .RV-Image
width 100%
height 100%
object-fit cover
display block
RV-ContentCrop__Text--fade(background-color=white)
+RV-Element__Modifier--name('fade')
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content ' '
opacity 0.8
position relative
top -25%
width 100%
height 25%
z-index 10
RV-ContentCrop__Text--ellipsis(background-color=white)
+RV-Element__Modifier--name('ellipsis')
&: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__Text(line-height=1.1, background-color=white)
+RV-Element--name('Text')
--cc 'text'
& .RV-Text
overflow hidden
display block
text-overflow ellipsis
// Determining the max line count and caclulating the height
line-height line-height
position relative
background-color background-color
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
RV-ContentCrop(line-height=1.1)
line-height = calc(line-height * 1.1)
background-color = white
display block
overflow hidden
+RV-Block('RV-ContentCrop')
line-height = 1.1
RV-ContentCrop(line-height)
+RV-Element()
RV-ContentCrop__Image()
+RV-Element()
RV-ContentCrop__Text(line-height)
+RV-Element__Modifier()
RV-ContentCrop__Text--ellipsis()
+RV-Element__Modifier()
RV-ContentCrop__Text--fade()
+RV-Block__Modifier()
RV-ContentCrop--bottom()
+RV-Block__Modifier()
RV-ContentCrop--top()
+RV-Block__Modifier()
RV-ContentCrop--right()
+RV-Block__Modifier()
RV-ContentCrop--left()
+RV-Block__Modifier()
RV-ContentCrop--center()
+RV-Block__Modifier()
RV-ContentCrop--square()
+RV-Block__Modifier()
RV-ContentCrop--1to2()
+RV-Block__Modifier()
RV-ContentCrop--2to1()
+RV-Block__Modifier()
RV-ContentCrop--4to3()
+RV-Block__Modifier()
RV-ContentCrop--16to9()
+RV-Block__Modifier()
RV-ContentCrop--3to2()

1
components/01_Layouts/contentCrop/contentCrop.config.json
View File

@@ -1 +0,0 @@
{}

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

@@ -1,119 +0,0 @@
<h2>Square</h2>
<div class="square 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="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">
<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. 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">
<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. 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">
<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. 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>
<br>
<div class="full-width RV-ContentCrop">
<div class="portrait red"></div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--square">
<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">
<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">
<div>
<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>
<div>
<div class="RV-ContentCrop 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--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--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--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>