Reorganise output classes.

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index bfd75b03432e639b446cd98be6292a7bc40f9c0f..f2eea47c58c897737c5b2a7e2f84c2df55563360 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -16,7 +16,7 @@ $menu-nested-margin: 1rem !default;
 
 /// Padding for items in a pill menu.
 /// @type Number
-$menu-pills-padding: $global-menu-padding !default;
+$menu-items-padding: $global-menu-padding !default;
 
 /// margin for items in a simple menu.
 /// @type Number
@@ -59,6 +59,7 @@ $menu-item-background-hover: $light-gray !default;
     text-decoration: none;
     white-space: nowrap;
     display: block;
+    padding: $menu-items-padding;
   }
 
   // Reset styles of inner elements
@@ -90,26 +91,35 @@ $menu-item-background-hover: $light-gray !default;
 
 /// Align menu items.
 @mixin menu-align($alignment) {
-  @if $alignment == center {
+  
+  @if $alignment == left {
     @if $global-flexbox {
-      li {
-        justify-content: center;
-      }
+      justify-content: flex-start;
     }
     @else {
-      text-align: center;
+      text-align: $global-left;
+    }
+  }
+  @else if $alignment == right {
+    @if $global-flexbox {
+      justify-content: flex-end;
+    }
+    @else {
+      text-align: $global-right;
 
       li {
         text-align: $global-left;
       }
     }
   }
-  @else if $alignment == right {
+  @else if $alignment == center {
     @if $global-flexbox {
-      justify-content: flex-end;
+      li {
+        justify-content: center;
+      }
     }
     @else {
-      text-align: $global-right;
+      text-align: center;
 
       li {
         text-align: $global-left;
@@ -155,13 +165,9 @@ $menu-item-background-hover: $light-gray !default;
   li + li {
     margin-#{$dir}: $margin;
   }
-}
 
-/// Creates a simple padded Menu.
-/// @param {Number} $padding [$menu-pills-padding] - Padding of each menu item.
-@mixin menu-pills($padding: $menu-pills-padding) {
   a {
-    padding: $padding;
+    padding: 0;
   }
 }
 
@@ -301,41 +307,33 @@ $menu-item-background-hover: $light-gray !default;
       @include menu-direction(vertical);
     }
 
-    @include -zf-each-breakpoint($small: false) {
-      &.#{$-zf-size}-vertical {
-        @include menu-direction(vertical);
-      }
-
-      &.#{$-zf-size}-horizontal {
-        @include menu-direction(horizontal);
-      }
+    // Even-width modifier for horizontal orientation
+    &.expanded {
+      @include menu-expand;
     }
 
     // Simple
-    &.simple:not(.vertical) {
+    &.simple {
       @include menu-simple;
     }
 
-    // Vertical simple
-    &.vertical.simple {
-      @include menu-simple(top);
-    }
-
-    // Pills
-    &.pills {
-      @include menu-pills;
-    }
+    // Breakpoint specific versions
+    @include -zf-each-breakpoint($small: false) {
+      &.#{$-zf-size}-horizontal {
+        @include menu-direction(horizontal);
+      }
 
-    // Even-width modifier for horizontal orientation
-    &.expanded {
-      @include menu-expand;
-    }
+      &.#{$-zf-size}-vertical {
+        @include menu-direction(vertical);
+      }
 
-    // Responsive expanded
-    @include -zf-each-breakpoint($small: false) {
       &.#{$-zf-size}-expanded {
         @include menu-expand;
       }
+
+      &.#{$-zf-size}-simple {
+        @include menu-expand;
+      }
     }
 
     // Nesting
@@ -374,9 +372,9 @@ $menu-item-background-hover: $light-gray !default;
       color: $menu-item-color-active;
     }
 
-    // Align center
-    &.align-center {
-      @include menu-align(center);
+    // Align left
+    &.align-#{$global-left} {
+      @include menu-align(left);
     }
 
     // Align right
@@ -384,6 +382,11 @@ $menu-item-background-hover: $light-gray !default;
       @include menu-align(right);
     }
 
+    // Align center
+    &.align-center {
+      @include menu-align(center);
+    }
+
     .menu-text {
       @include menu-text;
     }

diff --git a/test/visual/menu/all-menus-flex.html b/test/visual/menu/all-menus-flex.html
index 67b57a1f31a16848e501156301d07a69197e320e..250f29ef1de02caeae5bafc3e9cf6f60756c18b9 100644 (file)
--- a/test/visual/menu/all-menus-flex.html
+++ b/test/visual/menu/all-menus-flex.html
@@ -120,16 +120,6 @@
         </ul>
       </div>
 
-      <h3>Pills Menu</h3>
-      <div class="example">
-        <ul class="menu pills">
-          <li><a href="#">One</a></li>
-          <li><a href="#">Two</a></li>
-          <li><a href="#">Three</a></li>
-          <li><a href="#">Four</a></li>
-        </ul>
-      </div>
-
       <h3>Expanded Menu</h3>
       <div class="example">
         <ul class="menu expanded">
@@ -192,7 +182,7 @@
 
       <h3>Menu with input, select and buttons</h3>
       <div class="example">
-        <ul class="menu horizontal pills">
+        <ul class="menu horizontal">
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
           <li><a href="#">Three</a></li>
@@ -213,7 +203,7 @@
 
       <h3>Active Menu Item Class</h3>
       <div class="example">
-        <ul class="menu pills">
+        <ul class="menu">
           <li><a href="#">One</a></li>
           <li class="active"><a href="#">Two (.active)</a></li>
           <li><a href="#">Three</a></li>

diff --git a/test/visual/menu/all-menus.html b/test/visual/menu/all-menus.html
index 2d8b353fbf0166584f5ef53f10c4cdc6a462414a..eda07d33903dd275c52441e16d9d9e73e7e8b9ec 100644 (file)
--- a/test/visual/menu/all-menus.html
+++ b/test/visual/menu/all-menus.html
@@ -114,16 +114,6 @@
         </ul>
       </div>
 
-      <h3>Pills Menu</h3>
-      <div class="example">
-        <ul class="menu pills">
-          <li><a href="#">One</a></li>
-          <li><a href="#">Two</a></li>
-          <li><a href="#">Three</a></li>
-          <li><a href="#">Four</a></li>
-        </ul>
-      </div>
-
       <h3>Expanded Menu</h3>
       <div class="example">
         <ul class="menu expanded">
@@ -186,7 +176,7 @@
 
       <h3>Menu with input, select and buttons</h3>
       <div class="example">
-        <ul class="menu horizontal pills">
+        <ul class="menu horizontal">
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
           <li><a href="#">Three</a></li>
@@ -207,7 +197,7 @@
 
       <h3>Active Menu Item Class</h3>
       <div class="example">
-        <ul class="menu pills">
+        <ul class="menu">
           <li><a href="#">One</a></li>
           <li class="active"><a href="#">Two (.active)</a></li>
           <li><a href="#">Three</a></li>