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

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>