_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-margin-nested: 1rem !default;

/// Padding for items in a menu.
/// @type Number
$menu-item-padding: 0.7rem 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: map-get($foundation-palette, primary) !default;

/// Spacing between an icon and text in a menu item.
/// @type Number
$menu-icon-spacing: 0.25rem !default;

/// Creates the base styles for a Menu.
@mixin menu-base {
  margin: $menu-margin;
  list-style-type: none;

  @if $global-flexbox {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  // List items are table cell to allow for vertical alignment
  > li {
    @include disable-mouse-outline;

    @if $global-flexbox {
      flex: 0 0 auto;
    }
    @else {
      display: table-cell;
      vertical-align: middle;
    }
  }

  // Reset line height to make the height of the overall item easier to calculate
  > li > a {
    display: block;
    padding: $menu-item-padding;
    line-height: 1;
  }

  // Reset styles of inner elements
  input,
  a,
  button {
    margin-bottom: 0;
  }
}

/// Expands the items of a Menu, so each item is the same width.
@mixin menu-expand {
  @if $global-flexbox {
    // scss-lint:disable ZeroUnit
    > li {
      flex: 1 1 0px;
    }
  }
  @else {
    width: 100%;
    display: table;
    table-layout: fixed;
  }
}

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

      > li {
        flex: 0 0 auto;
      }
    }
    @else {
      > li {
        display: table-cell;
      }
    }
  }
  @else if $dir == vertical {
    @if $global-flexbox {
      flex-wrap: wrap;

      > li {
        flex: 0 0 100%;
        max-width: 100%;
      }

      > li  > a {
        align-items: flex-start;
        justify-content: flex-start;
      }
    }
    @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.
@mixin menu-simple {
  li {
    line-height: 1;
    display: inline-block;
    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
  }

  a {
    padding: 0;
  }
}

/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
/// @param {Keyword|Number} $padding [auto] - Length of the margin.
@mixin menu-nested($margin: $menu-margin-nested) {
  margin-#{$global-left}: $margin;
}

/// Adds support for icons to Menu items.
/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
@mixin menu-icons($position: side, $base: true) {
  @if $base {
    @if $global-flexbox {
      > li > a {
        display: flex;
      }
    }
    @else {
      > li > a {
        img,
        i {
          vertical-align: middle;
        }

        i + span,
        img + span {
          vertical-align: middle;
        }
      }
    }
  }

  @if $position == side {
    > li > a {
      @if $global-flexbox {
        flex-flow: row nowrap;
      }

      img,
      i {
        margin-#{$global-right}: $menu-icon-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 {
        @if not $global-flexbox {
          display: block;
          margin: 0 auto $menu-icon-spacing;
        }
        @else {
          align-self: stretch;
          text-align: center;
          margin-bottom: $menu-icon-spacing;
        }
      }
    }
  }
}

@mixin menu-text {
  font-weight: bold;
  color: inherit;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  padding: $menu-item-padding;
}

@mixin foundation-menu {
  .menu {
    @include menu-base;
    @include menu-icons;

    // Orientation
    @include menu-direction(horizontal);

    &.vertical {
      @include menu-direction(vertical);
    }

    @each $size in $breakpoint-classes {
      @if $size != small {
        @include breakpoint($size) {
          &.#{$size}-horizontal {
            @include menu-direction(horizontal);
          }

          &.#{$size}-vertical {
            @include menu-direction(vertical);
          }
        }
      }
    }

    // Simple
    &.simple {
      @include menu-simple;
    }

    // Align right
    &.align-#{$global-right} {
      @if $global-flexbox {
        justify-content: flex-end;
      }
      @else {
        @include clearfix;

        > li {
          float: $global-right;
        }
      }
    }

    // Even-width
    &.expanded {
      @include menu-expand;

      > li:first-child:last-child {
        width: 100%;
      }
    }

    // Vertical icons
    &.icon-top {
      @include menu-icons(top, $base: false);
    }

    // Nesting
    &.nested {
      @include menu-nested;
    }

    // Active state
    .active > a {
      color: $menu-item-color-active;
      background: $menu-item-background-active;
    }
  }

  .menu-text {
    @include menu-text;
  }

  // Align center
  .menu-centered {
    text-align: center;

    > .menu {
      display: inline-block;
    }
  }

  // Prevent FOUC when using the Responsive Menu plugin
  .no-js [data-responsive-menu] ul {
    display: none;
  }
}