new component for a menu
This commit is contained in:
parent
904169cdc6
commit
ab16a7652e
38
components/05_Components/menu/_menu.scss
Normal file
38
components/05_Components/menu/_menu.scss
Normal 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
41
components/05_Components/menu/menu.hbs
Normal 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
1
components/05_Components/menu/meun.config.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
{}
|
Loading…
Reference in New Issue
Block a user