• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1@mixin menu-direction($direction: default) {
2  @if $direction == default {
3    $direction: "horizontal";
4  }
5  @if $direction == "vertical" {
6    @include flex-direction(column);
7  } @else {
8    @include flex-direction(row);
9  }
10}
11
12@mixin menu($horizontal-spacer: default, $horizontal-item-vertical-spacer: default, $wrap: default) {
13  @if $horizontal-spacer == default {
14    $horizontal-spacer: map-get($menu, horizontal-spacer);
15  }
16  @if $horizontal-item-vertical-spacer == default {
17    $horizontal-item-vertical-spacer: map-get($menu, horizontal-item-vertical-spacer);
18  }
19  @if $wrap == default {
20    $wrap: wrap;
21  }
22  @include flexbox();
23  @include flex-wrap($wrap);
24  margin-top: 0;
25  margin-bottom: 0;
26  & > li {
27    @if $horizontal-item-vertical-spacer {
28      margin-top: map-get($spacers, $horizontal-item-vertical-spacer);
29      margin-bottom: map-get($spacers, $horizontal-item-vertical-spacer);
30    }
31    margin-right: map-get($spacers, $horizontal-spacer);
32    list-style-type: none;
33    &:last-child {
34      margin-right: 0;
35    }
36  }
37}
38
39.menu {
40  @include menu();
41  @include menu-direction();
42  @include align-items(center);
43}
44
45.menu--vertical {
46  @include menu-direction("vertical");
47  @include align-items(normal);
48  & > li {
49    margin-right: 0;
50  }
51}
52
53.menu--inline {
54  @include inline-flex();
55}
56
57.menu--center {
58  @include justify-content(center);
59}
60
61.menu--nowrap {
62  @include flex-wrap(nowrap);
63}
64
65.menu--grow {
66  @include flex-grow(1);
67}