diff options
Diffstat (limited to '_sass/common/components/_menu.scss')
-rw-r--r-- | _sass/common/components/_menu.scss | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/_sass/common/components/_menu.scss b/_sass/common/components/_menu.scss new file mode 100644 index 0000000..222676a --- /dev/null +++ b/_sass/common/components/_menu.scss @@ -0,0 +1,67 @@ +@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); +} |