Fix expanded menu #8325

Fix https://github.com/zurb/foundation-sites/issues/8325.
See also: https://github.com/zurb/foundation-sites/pull/8779. Thanks to
@natewiebe13.

`.expanded` is a modifier for a horizontal menu, and should not be
applied on a vertical one.

Changes:
- Move the `.expanded` modifier after `.horizontal` and before
`.vertical`.
- Add the `.expanded` modifiers for each breakpoint with the
corresponding prefixes.

Other changes:
- Use `-zf-each-breakpoint` to generate responsive modifiers.

Note: The `.expanded` modifier should be applied only when the menu is
horizontal. For example, on a menu which is made horizontal on the
medium breakpoint, `.medium-expanded` should be used :
`.menu.vertical.medium-horizontal.medium-expanded`.

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index b53d67f5c41cb1d078cbf4aa403f0c0709290343..8a1b88405006f04a3567e3ff11a9008aef98fda8 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -91,6 +91,10 @@ $menu-border: $light-gray !default;
     width: 100%;
     table-layout: fixed;
   }
+
+  > li:first-child:last-child {
+    width: 100%;
+  }
 }
 
 /// Sets the direction of a Menu.
@@ -237,24 +241,32 @@ $menu-border: $light-gray !default;
     @include menu-base;
     @include menu-icons;
 
-    // Orientation
-    @include menu-direction(horizontal);
+    // Default orientation: horizontal
+    &, &.horizontal {
+      @include menu-direction(horizontal);
+    }
+
+    // Even-width modifier for horizontal orientation
+    &.expanded {
+      @include menu-expand;
+    }
 
+    // Vertical orientation modifier
     &.vertical {
       @include menu-direction(vertical);
     }
 
-    @each $size in $breakpoint-classes {
-      @if $size != $-zf-zero-breakpoint {
-        @include breakpoint($size) {
-          &.#{$size}-horizontal {
-            @include menu-direction(horizontal);
-          }
+    @include -zf-each-breakpoint($small: false) {
+      &.#{$-zf-size}-horizontal {
+        @include menu-direction(horizontal);
+      }
 
-          &.#{$size}-vertical {
-            @include menu-direction(vertical);
-          }
-        }
+      &.#{$-zf-size}-expanded {
+        @include menu-expand;
+      }
+
+      &.#{$-zf-size}-vertical {
+        @include menu-direction(vertical);
       }
     }
 
@@ -277,15 +289,6 @@ $menu-border: $light-gray !default;
       }
     }
 
-    // Even-width
-    &.expanded {
-      @include menu-expand;
-
-      > li:first-child:last-child {
-        width: 100%;
-      }
-    }
-
     // Vertical icons
     &.icon-top {
       @include menu-icons(top, $base: false);