foundation-sites/scss/components/_drilldown.scss

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

////
/// @group drilldown
////

/// Transition property to use for animating menus.
/// @type Transition
$drilldown-transition: transform 0.15s linear !default;

/// Adds arrows to drilldown items with submenus, as well as the back button.
/// @type Boolean
$drilldown-arrows: true !default;

/// Sets drilldown menu item padding.
/// @type Number
$drilldown-padding: $global-menu-padding !default;

/// Sets drilldown menu nested margin
/// @type Number
$drilldown-nested-margin: 0 !default;

/// Background color for drilldown top level items.
/// @type Color
$drilldown-background: $white !default;

/// Sets drilldown menu item padding in the submenu.
/// @type Number
$drilldown-submenu-padding: $drilldown-padding !default;

/// Background color for drilldown submenus.
/// @type Color
$drilldown-submenu-background: $white !default;

/// Sets drilldown arrow color if arrow is used.
/// @type Color
$drilldown-arrow-color: $primary-color !default;

/// Sets drilldown arrow size if arrow is used.
/// @type Length
$drilldown-arrow-size: 6px !default;

@mixin zf-drilldown-left-right-arrows {
  .is-drilldown-submenu-parent > a {
    position: relative;
    &::after {
      position: absolute;
      top: 50%;
      margin-top: -1 * $drilldown-arrow-size;
      #{$global-right}: 1rem;
      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
    }
  }

  &.align-left .is-drilldown-submenu-parent > a::after {
    left: auto;
    right: 1rem;
    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
  }

  &.align-right .is-drilldown-submenu-parent > a::after {
    right: auto;
    left: 1rem;
    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
  }

}

@mixin foundation-drilldown-menu {
  // Applied to the Menu container
  .is-drilldown {
    position: relative;
    overflow: hidden;

    li {
      display: block;
    }

    &.animate-height {
      transition: height 0.5s;
    }
  }

  // The top level <ul>
  .drilldown {
    a {
      padding: $drilldown-padding;
      background: $drilldown-background;
    }

    // Applied to submenu <ul>s
    .is-drilldown-submenu {
      position: absolute;
      top: 0;
      #{$global-left}: 100%;
      z-index: -1;

      width: 100%;
      background: $drilldown-submenu-background;
      transition: $drilldown-transition;

      &.is-active {
        z-index: 1;
        display: block;
        transform: translateX(if($global-text-direction == ltr, -100%, 100%));
      }

      &.is-closing {
        transform: translateX(if($global-text-direction == ltr, 100%, -100%));
      }

      // Submenu item padding
      a {
        padding: $drilldown-submenu-padding;
      }
    }

    .nested.is-drilldown-submenu {
      @include menu-nested($drilldown-nested-margin);
    }

    .drilldown-submenu-cover-previous {
      min-height: 100%;
    }

    @if $drilldown-arrows {
      @include zf-drilldown-left-right-arrows;

      .js-drilldown-back > a::before {
        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
        border-#{$global-left}-width: 0;
        display: inline-block;
        vertical-align: middle;
        margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text

        border-#{$global-left}-width: 0;
      }
    }
  }
}