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

new component for a menu

Browse Source
This commit is contained in:
reverend 2020-12-27 23:49:06 +01:00
parent 904169cdc6
commit ab16a7652e
3 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/05_Components/menu/_menu.scss Normal file
View File

@ -0,0 +1,38 @@
@mixin RV-Menu {
&--vertical &__List {
@include RV-FlexRow__Container--vertical;
width: 100%;
}
&--horizontal &__List {
@include RV-FlexRow__Container--horizontal;
}
&--spaced &__List {
gap: $-spacing-medium;
}
&__List {
@include RV-FlexRow__Container($-prefix: '.RV-Menu');
@include RV-ElementList;
padding: $-spacing-small;
}
&__Item {
@include RV-FlexRow__Item;
@include RV-FlexRow__Item--shorthands;
.RV-Link {
padding: $-spacing-small;
background-color: beige;
display: block;
white-space: nowrap;
}
}
}
.RV-Menu {
@include RV-Menu;
}

41
components/05_Components/menu/menu.hbs Normal file
View File

@ -0,0 +1,41 @@
<div class="RV-Menu RV-Menu--horizontal">
<ul class="RV-Menu__List">
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">About</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Legal</a></li>
</ul>
</div>
<br><br>
<div class="RV-Menu RV-Menu--vertical RV-Menu">
<ul class="RV-Menu__List">
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">About</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Legal</a></li>
</ul>
</div>
<br><br>
<div class="RV-Menu RV-Menu--horizontal RV-Menu--spaced">
<ul class="RV-Menu__List">
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">About</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Legal</a></li>
</ul>
</div>
<br><br>
<div class="RV-Menu RV-Menu--vertical RV-Menu--spaced">
<ul class="RV-Menu__List">
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">About</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Legal</a></li>
</ul>
</div>

1
components/05_Components/menu/meun.config.json Normal file
View File

@ -0,0 +1 @@
{}