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

Chaning Folder structure

Browse Source
This commit is contained in:
reverend
2021-03-09 12:36:45 +01:00
parent fd848277ff
commit 07e8b269e2
26 changed files with 0 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/05_Molecules/_molecules.styl
+3
View File
@@ -0,0 +1,3 @@
@import 'overlayButton/_overlayButton'
@import 'teaser/_teaser'
@import 'pagination/_pagination'
components/05_Molecules/overlayButton/_overlayButton.styl
+100
View File
@@ -0,0 +1,100 @@
RV-OverlayButton__Item()
position relative
&:hover > *
opacity 1
RV-OverlayButton__Button--circle()
border-radius 50%
RV-OverlayButton__Button--topRight()
right 0
top 0
RV-OverlayButton__Button--bottomLeft()
bottom 0
left 0
RV-OverlayButton__Button--bottomRight()
bottom 0
right 0
RV-OverlayButton__Button--small()
width 3*spacing-small
height 3*spacing-small
font-size 1.5*spacing-small
line-height 1.5*spacing-small
RV-OverlayButton__Button--medium()
width 2*spacing-medium
height 2*spacing-medium
font-size spacing-medium
line-height spacing-medium
RV-OverlayButton__Button--large()
width 2*spacing-large
height 2*spacing-large
font-size spacing-large
line-height spacing-large
RV-OverlayButton__Row()
RV-Alignment--center()
RV-Spacing__Inner--medium()
RV-FlexRow__Container()
position absolute
bottom 0
height 4em
opacity .2
width 100%
justify-content center
background-color alpha(white, .5)
padding-left 0
padding-right 0
*
position initial
opacity initial
margin 0
padding 0
RV-OverlayButton__Button()
text-align center
display inline-block
position absolute
background-color beige
margin spacing-small
opacity .2
border-radius spacing-small
text-decoration none
RV-Alignment--center()
RV-OverlayButton__Button--medium()
&--circle
RV-OverlayButton__Button--circle()
&--topRight
RV-OverlayButton__Button--topRight()
&--small
RV-OverlayButton__Button--small()
&--medium
RV-OverlayButton__Button--medium()
&--large
RV-OverlayButton__Button--large()
RV-OverlayButton()
&__Item
RV-OverlayButton__Item()
&__Button
RV-OverlayButton__Button()
&__Row
RV-OverlayButton__Row()
.RV-OverlayButton
RV-OverlayButton()
components/05_Molecules/overlayButton/overlayButton.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/05_Molecules/overlayButton/overlayButton.hbs
+12
View File
@@ -0,0 +1,12 @@
<div class="red square RV-OverlayButton__Item">
<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--topRight">X</a>
<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--circle">X</a>
<div class="RV-OverlayButton__Row">
<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--circle">X</a>
<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--topRight">X</a>
<a href="#" class="RV-OverlayButton__Button RV-OverlayButton__Button--topRight">X</a>
</div>
<p>some content</p>
</div>
components/05_Molecules/overlayButton/pagination/_pagination.styl
+15
View File
@@ -0,0 +1,15 @@
RV-Pagination__Item()
+RV-Element--name('Item')
RV-ElementList__Item()
+RV-Block('RV-Pagination')
max-width 600px
RV-ElementList()
RV-FlexRow--horizontal()
justify-content space-between
overflow hidden
height 2em
+RV-Element('Item')
RV-Pagination__Item()
components/05_Molecules/overlayButton/pagination/pagination.config.json
+3
View File
@@ -0,0 +1,3 @@
{
"title": "Pagnination"
}
components/05_Molecules/overlayButton/pagination/pagination.hbs
+77
View File
@@ -0,0 +1,77 @@
<ul class="RV-Pagination">
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--first">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
⟪
</div>
<div class="RV-Button__Text">
First
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--disabled RV-Pagination__Item--previous">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
⟨
</div>
<div class="RV-Button__Text">
Prev
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
1
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
2
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
3
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
4
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
5
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--next">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
Next
</div>
<div class="RV-Button__Icon">
⟩
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--last">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
Last
</div>
<div class="RV-Button__Icon">
⟫
</div>
</a>
</li>
</ul>
components/05_Molecules/pagination/_pagination.styl
+23
View File
@@ -0,0 +1,23 @@
/*RV-Pagination__Item()
RV-FlexRow__Item()
.RV-Link
padding 15px 20px
vertical-align sub
border-radius 2px
RV-Pagination__List(breakpoint=500px)
RV-FlexRow()
RV-FlexRow--breakPoint(breakpoint)
RV-ElementList()
.RV-Pagination
&__List
RV-Pagination__List()
&__Item
RV-Pagination__Item()
&__Label
RV-FlexRow__Item--outsideBreakPoint()
*/
components/05_Molecules/pagination/pagination.config.json
+3
View File
@@ -0,0 +1,3 @@
{
"title": "Pagnination"
}
components/05_Molecules/pagination/pagination.hbs
+71
View File
@@ -0,0 +1,71 @@
<div class="RV-Pagination">
<ul class="RV-Pagination__List">
<li class="RV-Pagination__Item RV-Pagination__Item--first RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟪</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--first RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">First</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--disabled RV-Pagination__Item--previous RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟨</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--disabled RV-Pagination__Item--previous RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">Previous</span>
</a>
</li>
<li class="RV-Pagination__Item">
<a href="#" class="RV-Link">
<span class="RV-Text">1</span>
</a>
</li>
<li class="RV-Pagination__Item">
<a href="#" class="RV-Link">
<span class="RV-Text">2</span>
</a>
</li>
<li class="RV-Pagination__Item">
<a href="#" class="RV-Link">
<span class="RV-Text">3</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--current">
<a href="#" class="RV-Link">
<span class="RV-Text">4</span>
</a>
</li>
<li class="RV-Pagination__Item">
<a href="#" class="RV-Link">
<span class="RV-Text">5</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--next RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">Next</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--next RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟩</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--last RV-Pagination__Label">
<a href="#" class="RV-Link">
<span class="RV-Text">Last</span>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--last RV-Pagination__Icon">
<a href="#" class="RV-Link">
<span class="RV-Icon">⟫</span>
</a>
</li>
</ul>
</div>
components/05_Molecules/teaser/_teaser.styl
+47
View File
@@ -0,0 +1,47 @@
+RV-Block('RV-Teaser')
RV-CSSParameter({
image-height: 300px,
image-width: 300px,
shadow-color: #6b5690
})
RV-Fan(--image-height, --image-width)
RV-BoxShadow()
RV-BoxShadow--drop(--shadow-color)
+RV-Element('Image')
RV-Fan__Base(--image-height, --image-width)
+RV-Element('Preview')
RV-FlexRow()
RV-FlexRow--vertical()
RV-Fan__Surface(--image-height, --image-width)
RV-Spacing__Inner--medium()
+RV-Element('Text')
color text-color
flex 1
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Text--fade()
.RV-Text
height 100%
+RV-Element('Headline')
font-family sans-serif
color primary-color
justify-self center
+RV-Element('Buttons')
RV-FlexRow__Item()
RV-FlexRow__Item--content()
RV-Spacing__Inner--small()
RV-FlexRow()
RV-FlexRow--horizontal()
padding 0
RV-Fan--auto(--image-height, --image-width)
components/05_Molecules/teaser/teaser.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/05_Molecules/teaser/teaser.hbs
+46
View File
@@ -0,0 +1,46 @@
<div class="RV-Teaser">
<div class="RV-Teaser__Image">
<div class="RV-ContentCrop">
<img class="RV-Image RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{ path '/images/landscape.jpeg' }}"/>
</div>
</div>
<div class="RV-Teaser__Preview">
<div class="RV-Teaser__Headline">
<h2>This is a headline for a teaser it is indeed dear reader</h2>
</div>
<div class="RV-Teaser__Text">
<div class="RV-Text">
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
</div>
</div>
<div class="RV-Teaser__Buttons">
<a href="#"class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/plus.svg'}}"/>
</div>
<div class="RV-Button__Text">
More
</div>
</a>
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/favourite.svg'}}"/>
</div>
<div class="RV-Button__Text">
Favorite
</div>
</a>
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/information.svg'}}"/>
</div>
<div class="RV-Button__Text">
Details
</div>
</a>
</div>
</div>
</div>