// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source //// /// @group menu //// /// Margin of a menu. /// @type Number $menu-margin: 0 !default; /// Left-hand margin of a nested menu. /// @type Number $menu-nested-margin: $global-menu-nested-margin !default; /// Padding for items in a pill menu. /// @type Number $menu-items-padding: $global-menu-padding !default; /// margin for items in a simple menu. /// @type Number $menu-simple-margin: 1rem !default; /// Text color of an active menu item. /// @type Color $menu-item-color-active: $white !default; /// Background color of an active menu item. /// @type Color $menu-item-background-active: get-color(primary) !default; /// Spacing between an icon and text in a menu item. /// @type Number $menu-icon-spacing: 0.25rem !default; /// Background color for an hovered menu item. /// @type Color $menu-item-background-hover: $light-gray !default; /// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`. /// But please note that `active` will be removed in upcoming versions. /// @type Boolean $menu-state-back-compat: true !default; /// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`. /// But please note that `menu-centered` will be removed in upcoming versions. /// @type Boolean $menu-centered-back-compat: true !default; /// Creates the base styles for a Menu. @mixin menu-base { padding: 0; margin: 0; list-style: none; position: relative; @if $global-flexbox { display: flex; flex-wrap: wrap; } li { @include disable-mouse-outline; } a, .button { line-height: 1; text-decoration: none; white-space: nowrap; display: block; padding: $menu-items-padding; } // Reset styles of inner elements input, select, a, button { margin-bottom: 0; } input { display: inline-block; } } /// Expands the items of a Menu, so each item is the same width. @mixin menu-expand { @if $global-flexbox { li { flex: 1 1 0px; // sass-lint:disable-line zero-unit } } @else { display: table; width: 100%; > li { display: table-cell; vertical-align: middle; } } } /// Align menu items. @mixin menu-align($alignment) { @if $alignment == left { @if $global-flexbox { justify-content: flex-start; } @else { text-align: $global-left; } } @else if $alignment == right { @if $global-flexbox { li { display: flex; justify-content: flex-end; .submenu li { justify-content: flex-start; } } &.vertical li { display: block; text-align: $global-right; .submenu li { text-align: $global-right; } } } @else { text-align: $global-right; .submenu li { text-align: $global-left; } &.vertical { .submenu li { text-align: $global-right; } } } } @else if $alignment == center { @if $global-flexbox { li { display: flex; justify-content: center; .submenu li { justify-content: flex-start; } } } @else { text-align: center; .submenu li { text-align: $global-left; } } } } /// Sets the direction of a Menu. /// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`. @mixin menu-direction($dir: horizontal) { @if $dir == horizontal { @if $global-flexbox { flex-wrap: wrap; flex-direction: row; } @else { li { display: inline-block; } } } @else if $dir == vertical { @if $global-flexbox { flex-wrap: nowrap; flex-direction: column; } @else { li { display: block; } } } @else { @warn 'The direction used for menu-direction() must be horizontal or vertical.'; } } /// Creates a simple Menu, which has no padding or hover state. /// @param {Keyword} $dir [$global-left] - Direction of the menu. This effects the side of the `
  • ` that receives the margin. /// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `
  • `. @mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) { @if $global-flexbox { align-items: center; } li + li { margin-#{$dir}: $margin; } a { padding: 0; } } /// Adds styles for a nested Menu, by adding `margin-left` to the menu. /// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin. /// @param {Keyword} $nested-alignment [left] - Alignment of the nested class @mixin menu-nested( $margin: $menu-nested-margin, $nested-alignment: left ) { @if $nested-alignment == right { margin-#{$global-right}: $margin; margin-#{$global-left}: 0; } @else { margin-#{$global-right}: 0; margin-#{$global-left}: $margin; } } /// Adds basic styles for icons in menus. @mixin menu-icons() { @if $global-flexbox { a { display: flex; } } @else { img, i, svg { vertical-align: middle; + span { vertical-align: middle; } } } } /// Adds position classes for icons within a menu. @mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) { @if $position == left { li a { @if $global-flexbox { flex-flow: row nowrap; } img, i, svg { margin-#{$global-right}: $spacing; @if not $global-flexbox { display: inline-block; } } } } @else if $position == right { li a { @if $global-flexbox { flex-flow: row nowrap; } img, i, svg { margin-#{$global-left}: $spacing; @if not $global-flexbox { display: inline-block; } } } } @else if $position == top { li a { @if $global-flexbox { flex-flow: column nowrap; } @else { text-align: center; } img, i, svg { @if not $global-flexbox { display: block; margin: 0 auto $spacing; } @else { align-self: stretch; margin-bottom: $spacing; text-align: center; } } } } @else if $position == bottom { li a { @if $global-flexbox { flex-flow: column nowrap; } @else { text-align: center; } img, i, svg { @if not $global-flexbox { display: block; margin: $spacing auto 0; } @else { align-self: stretch; margin-bottom: $spacing; text-align: center; } } } } } @mixin menu-text { padding: $global-menu-padding; font-weight: bold; line-height: 1; color: inherit; } @mixin menu-state-active { background: $menu-item-background-active; color: $menu-item-color-active; } @mixin foundation-menu { .menu { @include menu-base; // Default orientation: horizontal &, &.horizontal { @include menu-direction(horizontal); } // Vertical orientation modifier &.vertical { @include menu-direction(vertical); } // Even-width modifier for horizontal orientation &.expanded { @include menu-expand; } // Simple &.simple { @include menu-simple; } // Breakpoint specific versions @include -zf-each-breakpoint($small: false) { &.#{$-zf-size}-horizontal { @include menu-direction(horizontal); } &.#{$-zf-size}-vertical { @include menu-direction(vertical); } &.#{$-zf-size}-expanded { @include menu-expand; } &.#{$-zf-size}-simple { @include menu-expand; } } // Nesting &.nested { @include menu-nested; } // Icon Base Styles &.icons { @include menu-icons; } // Icon Left &.icon-left { @include menu-icon-position(left); } // Icon Right &.icon-right { @include menu-icon-position(right); } // Icon Top &.icon-top { @include menu-icon-position(top); } // Icon Bottom &.icon-bottom { @include menu-icon-position(bottom); } // Active state .is-active > a { @include menu-state-active; } // Backward Compatibility for active state @if $menu-state-back-compat { .active > a { @include menu-state-active; } } // Align left &.align-#{$global-left} { @include menu-align(left); } // Align right &.align-#{$global-right} { @include menu-align(right); .nested { @include menu-nested($nested-alignment: right); } } // Align center &.align-center { @include menu-align(center); } .menu-text { @include menu-text; } } @if $menu-centered-back-compat { .menu-centered { > .menu { @if $global-flexbox { justify-content: center; } @include menu-align(center); } } } // Prevent FOUC when using the Responsive Menu plugin .no-js [data-responsive-menu] ul { display: none; } }