Merge branch 'develop' into brettsmason-menu-rework

diff --cc scss/components/_accordion-menu.scss
index ab7043d2452f4921e1e84bb73bf2ccb59ebc4fdf,67e0d62813f6d02f0a2a8163c96af1bb28625c8c..a86ad5df46ae90933ce8e6052709dc5e51ae6f6e
--- 1/scss/components/_accordion-menu.scss
--- 2/scss/components/_accordion-menu.scss
+++ b/scss/components/_accordion-menu.scss
@@@ -2,18 -2,6 +2,18 @@@
  /// @group accordion-menu
  ////
  
- $accordionmenu-nested-margin: $global-menu-nested-margin !default; 
 +/// Sets accordion menu padding.
 +/// @type Number
 +$accordionmenu-padding: $global-menu-padding !default;
 +
 +/// Sets accordion menu nested margin
 +/// @type Number
++$accordionmenu-nested-margin: $global-menu-nested-margin !default;
 +
 +/// Sets accordion menu submenu padding.
 +/// @type Number
 +$accordionmenu-submenu-padding: $accordionmenu-padding !default;
 +
  /// Sets if accordion menus have the default arrow styles.
  /// @type Boolean
  $accordionmenu-arrows: true !default;
@@@ -26,55 -38,92 +50,117 @@@ $accordionmenu-submenu-toggle-height: $
  /// @type Length
  $accordionmenu-arrow-size: 6px !default;
  
-   .is-accordion-submenu-parent > a {
 +@mixin zf-accordion-menu-left-right-arrows {
++  .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
 +    position: relative;
 +
 +    &::after {
 +      @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
 +      position: absolute;
 +      top: 50%;
 +      margin-top: -1 * ($accordionmenu-arrow-size / 2);
 +      #{$global-right}: 1rem;
 +    }
 +  }
 +  &.align-left .is-accordion-submenu-parent > a::after {
 +    left: auto;
 +    right: 1rem;
 +  }
 +  &.align-right .is-accordion-submenu-parent > a::after {
 +    right: auto;
 +    left: 1rem;
 +  }
 +}
  @mixin foundation-accordion-menu {
 +
    .accordion-menu {
+     @if $accordionmenu-border {
+       border-bottom: $accordionmenu-border;
+     }
+ 
      li {
 -    }
 -
 -    .is-accordion-submenu li {
 -      @if $accordionmenu-border {
 -        border-right: 0;
 -        border-left: 0;
 -      }
+       @if $accordionmenu-border {
+         border-top: $accordionmenu-border;
+         border-right: $accordionmenu-border;
+         border-left: $accordionmenu-border;
+       }
 +      width: 100%;
      }
  
      a {
+       @if $accordionmenu-item-background {
+         background: $accordionmenu-item-background;
+       }
 +      padding: $accordionmenu-padding;
      }
  
 -    // Submenu li styling
 -    .is-accordion-submenu-parent {
 -      position: relative;
 +    .nested.is-accordion-submenu {
 +      @include menu-nested($accordionmenu-nested-margin);
 +    }
  
 -      & > a {
 -        margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
 +    &.align-#{$global-right} {
 +      .nested.is-accordion-submenu {
 +        @include menu-nested($accordionmenu-nested-margin, right);
        }
      }
 +  }
  
 -    // Submenu toggle
 -    .submenu-toggle {
 -      position: absolute;
 -      top: 0;
 -      #{$global-right}: 0;
++  .is-accordion-submenu li {
++    @if $accordionmenu-border {
++      border-right: 0;
++      border-left: 0;
++    }
++  }
+ 
 -      width: $accordionmenu-submenu-toggle-width;
 -      height: $accordionmenu-submenu-toggle-height;
++  .is-accordion-submenu-parent {
++    position: relative;
++  }
+ 
 -      border-#{$global-left}: $accordion-submenu-toggle-border;
 +  .is-accordion-submenu-parent > a {
 +    padding: $accordionmenu-submenu-padding;
 +  }
  
 -      @if $accordionmenu-submenu-toggle-background {
 -        background: $accordionmenu-submenu-toggle-background;
 -      }
++  .has-submenu-toggle > a {
++    margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
++  }
+ 
 -      // Add the arrow to the toggle
 -      &::after {
 -        @include css-triangle(6px, $accordionmenu-arrow-color, down);
++  // Submenu toggle
++  .submenu-toggle {
++    position: absolute;
++    top: 0;
++    #{$global-right}: 0;
+ 
 -        top: 0;
 -        bottom: 0;
 -        margin: auto;
 -      }
 -    }
++    width: $accordionmenu-submenu-toggle-width;
++    height: $accordionmenu-submenu-toggle-height;
+ 
 -    // Rotate the arrow when menu is open
 -    .submenu-toggle[aria-expanded='true']::after {
 -      transform: scaleY(-1);
 -      transform-origin: 50% 50%;
++    border-#{$global-left}: $accordion-submenu-toggle-border;
++
++    @if $accordionmenu-submenu-toggle-background {
++      background: $accordionmenu-submenu-toggle-background;
+     }
+ 
 -    .submenu-toggle-text {
 -      @include element-invisible;
++    // Add the arrow to the toggle
++    &::after {
++      @include css-triangle(6px, $accordionmenu-arrow-color, down);
++
++      top: 0;
++      bottom: 0;
++      margin: auto;
+     }
+   }
+ 
 -  // If arrows are enabled, display them
 -  @if $accordionmenu-arrows {
 -    .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
 -      position: relative;
++  // Rotate the arrow when menu is open
++  .submenu-toggle[aria-expanded='true']::after {
++    transform: scaleY(-1);
++    transform-origin: 50% 50%;
++  }
+ 
 -      &::after {
 -        @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
++  .submenu-toggle-text {
++    @include element-invisible;
++  }
+ 
 -        position: absolute;
 -        top: 50%;
 -        margin-top: -1 * ($accordionmenu-arrow-size / 2);
 -        #{$global-right}: 1rem;
 -      }
 -    }
 +  @if $accordionmenu-arrows {
 +    @include zf-accordion-menu-left-right-arrows;
  
      .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
        transform: rotate(180deg);