teagles / VS-America.com

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group dropdown-menu
////

/// Enables arrows for items with dropdown menus.
/// @type Boolean
$dropdownmenu-arrows: true !default;

/// Minimum width of dropdown sub-menus.
/// @type Length
$dropdownmenu-min-width: 200px !default;

/// Background color for dropdowns.
/// @type Color
$dropdownmenu-background: $white !default;

/// Border for dropdown panes.
/// @type List
$dropdown-border: 1px solid $medium-gray !default;

@mixin foundation-dropdown-menu {
  .dropdown.menu {
    .has-submenu {
      position: relative;

      a::after {
        float: right;
        margin-top: 3px;
        margin-left: 10px;
      }

      @if $dropdownmenu-arrows {
        &.is-down-arrow a {
          padding-right: 1.5rem;
          position: relative;
        }
        &.is-down-arrow > a::after {
          @include css-triangle(5px, $anchor-color, down);
          position: absolute;
          top: 12px;
          right: 5px;
        }
        &.is-left-arrow > a::after {
          @include css-triangle(5px, $anchor-color, left);
          float: left;
          margin-left: 0;
          margin-right: 10px;
        }
        &.is-right-arrow > a::after {
          @include css-triangle(5px, $anchor-color, right);
        }
      }

      &.is-left-arrow.opens-inner .submenu{
        right: 0;
        left: auto;
      }
      &.is-right-arrow.opens-inner .submenu{
        left: 0;
        right: auto;
      }
      &.opens-inner .submenu {
        top: 100%;
      }
    }

    .submenu {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      min-width: $dropdownmenu-min-width;
      z-index: 1;
      background: $dropdownmenu-background;
      border: $dropdown-border;

      > li {
        width: 100%;
      }

      &.first-sub {
        top: 100%;
        left: 0;
        right: auto;
      }

      &:not(.js-dropdown-nohover) > .has-submenu:hover > &,
      &.js-dropdown-active {
        display: block;
      }
    }

    .has-submenu.opens-left .submenu {
      left: auto;
      right: 100%;
    }

    &.align-right {
      .submenu.first-sub {
        top: 100%;
        left: auto;
        right: 0;
      }
    }
  }

  .is-dropdown-menu.vertical {
    width: 100px;

    &.align-right {
      float: right;
    }

    > li .submenu {
      top: 0;
      left: 100%;
    }
  }
}