Add nested class condition for right alignment!

diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
index 774cee6648781eef59cc9caad00cdf77b94fe64b..ab7043d2452f4921e1e84bb73bf2ccb59ebc4fdf 100644 (file)
--- a/scss/components/_accordion-menu.scss
+++ b/scss/components/_accordion-menu.scss
@@ -61,6 +61,12 @@ $accordionmenu-arrow-size: 6px !default;
     .nested.is-accordion-submenu {
       @include menu-nested($accordionmenu-nested-margin);
     }
+
+    &.align-#{$global-right} {
+      .nested.is-accordion-submenu {
+        @include menu-nested($accordionmenu-nested-margin, right);
+      }
+    }
   }
 
   .is-accordion-submenu-parent > a {

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 46c543fe5611dcb4bd5737dc2fde78f11a39a07f..c2e28019c770a9fa3ee1a04d29362b31fe676e2a 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -200,8 +200,20 @@ $menu-item-background-hover: $light-gray !default;
 
 /// Adds styles for a nested Menu, by adding `margin-left` to the menu.
 /// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin.
-@mixin menu-nested($margin: $menu-nested-margin) {
-  margin-#{$global-left}: $margin;
+/// @param {Keyword} $nested-alignment [left] - Alignment of the nested class
+@mixin menu-nested(
+  $margin: $menu-nested-margin,
+  $nested-alignment: left
+) {
+  @if $nested-alignment == right {
+    margin-#{$global-right}: $margin;
+    margin-#{$global-left}: 0;
+  } 
+  @else {
+    margin-#{$global-right}: 0;
+    margin-#{$global-left}: $margin;
+  }
+  
 }
 
 /// Adds basic styles for icons in menus.
@@ -405,6 +417,10 @@ $menu-item-background-hover: $light-gray !default;
     // Align right
     &.align-#{$global-right} {
       @include menu-align(right);
+
+      .nested {
+        @include menu-nested($nested-alignment: right);
+      }
     }
 
     // Align center

diff --git a/test/visual/menu/all-menus-flex.html b/test/visual/menu/all-menus-flex.html
index 71d695eddf6e6df1844842c46c034701ee265fed..01f536e8b2fd35f3c001171b9c1d0ba25fba8c47 100644 (file)
--- a/test/visual/menu/all-menus-flex.html
+++ b/test/visual/menu/all-menus-flex.html
@@ -110,6 +110,24 @@
         </ul>
       </div>
 
+      <h3>Nested Menu - Align Right</h3>
+      <div class="example">
+        <ul class="menu vertical align-right">
+          <li><a href="#">One</a></li>
+          <li>
+            <a href="#">Two</a>
+            <ul class="menu vertical nested">
+              <li><a href="#">Two A</a></li>
+              <li><a href="#">Two B</a></li>
+              <li><a href="#">Two C</a></li>
+              <li><a href="#">Two D</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Three</a></li>
+          <li><a href="#">Four</a></li>
+        </ul>
+      </div>
+
       <h3>Simple Menu</h3>
       <div class="example">
         <ul class="menu simple">

diff --git a/test/visual/menu/all-menus.html b/test/visual/menu/all-menus.html
index bba83a3020323c02382d4d5f74a7abced4534862..d442115b906edb45a71f8989bf18dc3992a51e6d 100644 (file)
--- a/test/visual/menu/all-menus.html
+++ b/test/visual/menu/all-menus.html
@@ -104,6 +104,24 @@
         </ul>
       </div>
 
+      <h3>Nested Menu - Align Right</h3>
+      <div class="example">
+        <ul class="menu vertical align-right">
+          <li><a href="#">One</a></li>
+          <li>
+            <a href="#">Two</a>
+            <ul class="menu vertical nested">
+              <li><a href="#">Two A</a></li>
+              <li><a href="#">Two B</a></li>
+              <li><a href="#">Two C</a></li>
+              <li><a href="#">Two D</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Three</a></li>
+          <li><a href="#">Four</a></li>
+        </ul>
+      </div>
+
       <h3>Simple Menu</h3>
       <div class="example">
         <ul class="menu simple">