foundation-sites/scss/components/_menu.scss

// 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;

/// Backward compatibility for using `icon-*` classes without `.icons` classes
/// But please note that this backward compatibility will be removed in upcoming versions.
/// @type Boolean
$menu-icons-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;
    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 `<li>` that receives the margin.
/// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`.
@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;
    }

    // Backward Compatibility for active state
    @if $menu-icons-back-compat {
      &.icon-top,
      &.icon-right,
      &.icon-bottom,
      &.icon-left {
        @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;
  }
}