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

Creating Layout/Semantic component

Browse Source
This commit is contained in:
reverend 2020-12-27 23:47:07 +01:00
parent d9b6543998
commit b2b32b190f
3 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/04_Molecules/elementList/_elementList.scss Normal file
View File

@ -0,0 +1,19 @@
@mixin RV-ElementList__Item {
@include RV-FlexRow__Item;
}
@mixin RV-ElementList($-break_width: 500px, $prefix: '&') {
@include RV-FlexRow__Container;
@include RV-FlexRow__Container--shorthands;
@include RV-Reset;
list-style-type: none;
#{$prefix}__Item {
@include RV-ElementList__Item;
}
}
.RV-ElementList {
@include RV-ElementList;
}

1
components/04_Molecules/elementList/elementList.config.json Normal file
View File

@ -0,0 +1 @@
{}

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

@ -0,0 +1,22 @@
<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>