68 lines
1.4 KiB
SCSS
68 lines
1.4 KiB
SCSS
|
@mixin menu-direction($direction: default) {
|
||
|
|
@if $direction == default {
|
||
|
|
$direction: "horizontal";
|
||
|
|
}
|
||
|
|
@if $direction == "vertical" {
|
||
|
|
@include flex-direction(column);
|
||
|
|
} @else {
|
||
|
|
@include flex-direction(row);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin menu($horizontal-spacer: default, $horizontal-item-vertical-spacer: default, $wrap: default) {
|
||
|
|
@if $horizontal-spacer == default {
|
||
|
|
$horizontal-spacer: map-get($menu, horizontal-spacer);
|
||
|
|
}
|
||
|
|
@if $horizontal-item-vertical-spacer == default {
|
||
|
|
$horizontal-item-vertical-spacer: map-get($menu, horizontal-item-vertical-spacer);
|
||
|
|
}
|
||
|
|
@if $wrap == default {
|
||
|
|
$wrap: wrap;
|
||
|
|
}
|
||
|
|
@include flexbox();
|
||
|
|
@include flex-wrap($wrap);
|
||
|
|
margin-top: 0;
|
||
|
|
margin-bottom: 0;
|
||
|
|
& > li {
|
||
|
|
@if $horizontal-item-vertical-spacer {
|
||
|
|
margin-top: map-get($spacers, $horizontal-item-vertical-spacer);
|
||
|
|
margin-bottom: map-get($spacers, $horizontal-item-vertical-spacer);
|
||
|
|
}
|
||
|
|
margin-right: map-get($spacers, $horizontal-spacer);
|
||
|
|
list-style-type: none;
|
||
|
|
&:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu {
|
||
|
|
@include menu();
|
||
|
|
@include menu-direction();
|
||
|
|
@include align-items(center);
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu--vertical {
|
||
|
|
@include menu-direction("vertical");
|
||
|
|
@include align-items(normal);
|
||
|
|
& > li {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu--inline {
|
||
|
|
@include inline-flex();
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu--center {
|
||
|
|
@include justify-content(center);
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu--nowrap {
|
||
|
|
@include flex-wrap(nowrap);
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu--grow {
|
||
|
|
@include flex-grow(1);
|
||
|
|
}
|