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

4
components/01_Layouts/_layouts.styl
View File

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

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

@@ -60,7 +60,7 @@ RV-ContentCrop--XtoY(x=1, y=1)
+RV-Block__Modifier--name('XtoY')
width 100%
padding-top 100% * (y / x)
padding-top 100% * (--y / --x)
position relative
.RV-Image *
@@ -96,12 +96,13 @@ RV-ContentCrop__Text--fade(background-color=white)
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content ' '
opacity 0.8
content '###'
color transparent
opacity 1
position relative
top -25%
top -30px
width 100%
height 25%
height 30px
z-index 10
RV-ContentCrop__Text--ellipsis(background-color=white)

47
components/01_Layouts/dummy/_dummy.styl
View File

@@ -1,4 +1,49 @@
+RV-Block('RV-Dummy')
background-color #F4A460
&:nth-child(2n)
background-color #6495ED
&:nth-child(3n)
background-color #90EE90
&--oranage
background-color #F4A460
&--blue
background-color #6495ED
&--green
background-color #90EE90
&--red
background-color #ce6d6d
&--yellow
background-color #eae144
+RV-Element('Landscape')
min-width 200px
width 100%
min-height 130px
+RV-Element('Portrait')
min-width 130px
width 100%
min-height 200px
+RV-Element('Square')
min-width 300px
width 100%
min-height 300px
+RV-Element__Modifier('large')
height 500px
width 500px
+RV-Element__Modifier('small')
height 100px
width 100px
+RV-Block__Modifier('square')
height 350px
width 350px
@@ -10,6 +55,6 @@
+RV-Block__Modifier('landscape')
width 350px
height 150px
+RV-Block__Modifier('red')
background-color #d8583e

28
components/01_Layouts/fan/_fan.styl
View File

@@ -19,7 +19,7 @@ RV-Fan--horizontal(base-height, base-width)
flex-direction row
+RV-Element('Surface')
min-width calc_width(base-width)
min-width calc_width('calc(%s * 1.5)' % base-width)
height calc_height(base-height)
/*
@@ -35,6 +35,7 @@ RV-Fan--vertical(base-height, base-width)
+RV-Element('Surface')
width calc_width(base-width)
min-width initial
min-height base-height
@@ -71,6 +72,7 @@ RV-Fan--fullWidth(base-height, base-width)
+RV-Element('Surface')
flex-grow 1
min-width calc_width('calc(%s * 1.5)' % base-width)
/* ###############
@@ -94,14 +96,10 @@ RV-Fan__Surface--fixedWidth(width)
RV-Fan__Surface(base-height, base-width)
+RV-Element--name('Surface')
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Image()
overflow hidden
height calc_height(base-height)
width calc_width()
min-width calc_width('calc(%s * 1.5)' % base-width)
flex-grow 20
flex-shrink 0
@@ -113,7 +111,7 @@ RV-Fan__Surface(base-height, base-width)
RV-Fan()
display flex
position relative
min-width calc(2 * var(--base-width))
min-width min-content
/* #########
* CSS-Class
@@ -128,23 +126,23 @@ RV-Fan()
RV-Fan()
+RV-Element()
RV-Fan__Surface(base-height, base-width)
RV-Fan__Surface(--base-height, --base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedWidth(base-width)
RV-Fan__Surface--fixedWidth(--base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Surface--fixedHeight(--base-height)
+RV-Element()
RV-Fan__Base(base-height, base-width)
RV-Fan__Base(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--fullWidth(base-height, base-width)
RV-Fan--fullWidth(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--vertical(base-height, base-width)
RV-Fan--vertical(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--horizontal(base-height, base-width)
RV-Fan--horizontal(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--auto(base-height, base-width)
RV-Fan--auto(--base-height, --base-width)

15
components/01_Layouts/fan/fan.hbs
View File

@@ -1,4 +1,12 @@
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop RV-Spacing__Outer--large">
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow">
<div class="RV-Fan__Base RV-Dummy"></div>
<div class="RV-Fan__Surface RV-Dummy"></div>
</div>
<br>
<br>
<br>
<br>
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop">
<div class="RV-Fan__Base RV-Spacing__Inner--small">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
@@ -17,7 +25,4 @@
</p>
</div>
</div>
</div>
</div>

16
components/01_Layouts/flexGrid/_flexGrid.styl
View File

@@ -20,6 +20,7 @@ RV-FlexGrid--masonry(item-height=300px,item-width=300px)
+RV-Element('Item')
display inline-block
width 100%
height unset
margin-bottom: var(--inner-spacing);
& > * {
@@ -63,29 +64,28 @@ RV-FlexGrid(item-height, item-width)
display grid
grid-template-columns: repeat(auto-fill, var(--item-width));
+RV-Block('RV-FlexGrid')
RV-CSSParameter({
item-height: 300px,
item-width: 300px
})
RV-FlexGrid(item-height, item-width)
RV-FlexGrid(--item-height, --item-width)
+RV-Element()
RV-FlexGrid__Item(item-height, item-width)
RV-FlexGrid__Item(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--autoWidth(item-height, item-width)
RV-FlexGrid--autoWidth(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--fixedSize(item-height, item-width)
RV-FlexGrid--fixedSize(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--masonry(item-height,item-width)
RV-FlexGrid--masonry(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--verticalMasonry(item-height,item-width)
RV-FlexGrid--verticalMasonry(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--horizontalMasonry(item-height,item-width)
RV-FlexGrid--horizontalMasonry(--item-height, --item-width)

30
components/01_Layouts/flexGrid/flexGrid.hbs
View File

@@ -1,3 +1,33 @@
<div class="RV-FlexGrid RV-FlexGrid{{modifier}}">
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
</div>
<div class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium">
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">

6
components/01_Layouts/flexRow/_flexRow.styl
View File

@@ -23,7 +23,7 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
RV-Reset()
gap 0px
RV-Utils__ElementAmount(@(index, total){
RV-Utils__ElementAmount--range(0, 20, @(index, total){
min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
}
)
@@ -144,7 +144,7 @@ RV-FlexRow()
RV-FlexRow__Item--wider()
+RV-Element__Modifier()
RV-FlexRow__Item--fixedSize(width)
RV-FlexRow__Item--fixedSize(--width)
+RV-Element__Modifier()
RV-FlexRow__Item--narrower()
@@ -168,7 +168,7 @@ RV-FlexRow()
RV-FlexRow--vertical()
+RV-Block__Modifier()
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
+RV-Block__Modifier()
RV-FlexRow--auto()

33
components/01_Layouts/flexRow/flexRow.config.json
View File

@@ -1 +1,32 @@
{}
{
"title": "FlexRow",
"context": {
"item-shadow" : "drop"
},
"variants": [
{
"name": "Horizontal",
"context": {
"modifier": "--horizontal"
}
},
{
"name": "Vertical",
"context": {
"modifier": "--vertical"
}
},
{
"name": "Breakpoint",
"context": {
"modifier": "--breakPoint"
}
},
{
"name": "Auto",
"context": {
"modifier": "--auto"
}
}
]
}

53
components/01_Layouts/flexRow/flexRow.hbs
View File

@@ -1,38 +1,17 @@
<div class="RV-FlexRow">
<div class="red RV-FlexRow__Item">Im normal</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--left"><span>wrapped content left</span></div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
</div>
<br></br>
<div class="RV-FlexRow">
<div class="red RV-FlexRow__Item">Im normal</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div>
</div>
<br><br>
<div class="RV-FlexRow RV-FlexRow--multiRow">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">narrower</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">wide</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">wider</div>
</div>
<br><br>
<div class="RV-FlexRow RV-Spacing__Inner--small">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">.</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
</div>
<br><br>
<div class="RV-FlexRow RV-FlexRow--breakPoint">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">sdfkjsakfjsdök</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">blubbber</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
<div class="RV-FlexRow RV-FlexRow{{modifier}}">
<div class="RV-FlexRow__Item RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--right RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--center RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--left RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--fixedSize RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
</div>