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

Honsely, I don't know what happened here

Browse Source
This commit is contained in:
reverend
2021-03-03 00:49:21 +01:00
parent a0240b2ec8
commit 6f4170af8e
70 changed files with 2415 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/04_Molecules/_molecules.styl
View File

@@ -1,2 +1,3 @@
@import 'elementList/_elementList'
@import 'overlayButton/_overlayButton'
@import 'overlayButton/_overlayButton'
@import 'teaser/_teaser'
//@import 'pagination/_pagination'

15
components/04_Molecules/elementList/_elementList.styl
View File

@@ -1,15 +0,0 @@
RV-ElementList__Item()
@include RV-FlexRow__Item
RV-ElementList(break_width=500px, prefix='&')
RV-FlexRow__Container()
RV-FlexRow__Container--shorthands()
RV-Reset()
list-style-type none
{prefix}__Item
RV-ElementList__Item()
.RV-ElementList
RV-ElementList()

22
components/04_Molecules/elementList/elementList.hbs
View File

@@ -1,22 +0,0 @@
<ul class="RV-ElementList RV-ElementList--vertical">
<li class="RV-ElementList__Item">Item</li>
<li class="RV-ElementList__Item">Item</li>
<li class="RV-ElementList__Item">Item</li>
<li class="RV-ElementList__Item">Item</li>
</ul>
<br><br>
<ul class="RV-ElementList RV-ElementList--horizontal">
<li class="RV-ElementList__Item">Item</li>
<li class="RV-ElementList__Item">Item</li>
<li class="RV-ElementList__Item">Item</li>
<li class="RV-ElementList__Item">Item</li>
</ul>
<br><br>
<ul class="RV-ElementList RV-ElementList--auto">
<li class="RV-ElementList__Item">ItemItem</li>
<li class="RV-ElementList__Item">ItemItemItem</li>
<li class="RV-ElementList__Item">ItemItem</li>
<li class="RV-ElementList__Item">Item</li>
</ul>

15
components/04_Molecules/overlayButton/pagination/_pagination.styl Normal file
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()

3
components/04_Molecules/overlayButton/pagination/pagination.config.json Normal file
View File

@@ -0,0 +1,3 @@
{
"title": "Pagnination"
}

77
components/04_Molecules/overlayButton/pagination/pagination.hbs Normal file
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>

47
components/04_Molecules/teaser/_teaser.styl Normal file
View File

@@ -0,0 +1,47 @@
+RV-Block('RV-Teaser')
RV-CSSParameter({
image-height: 300px,
image-width: 300px,
shadow-color: #6b5690
})
RV-Fan()
RV-BoxShadow()
RV-BoxShadow--drop(--shadow-color)
+RV-Element('Image')
RV-Fan__Base(--image-height, --image-width)
+RV-Element('Preview')
RV-Fan__Surface(--image-height, --image-width)
RV-Spacing__Inner--medium()
RV-FlexRow()
RV-FlexRow--vertical()
+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--fullWidth(--image-height, --image-width)

0
components/04_Molecules/elementList/elementList.config.json → components/04_Molecules/teaser/teaser.config.json
View File

46
components/04_Molecules/teaser/teaser.hbs Normal file
View File

@@ -0,0 +1,46 @@
<div class="RV-Teaser">
<div class="RV-Teaser__Image">
<div class="RV-ContentCrop">
<img class="RV-Image" 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>