From: harry <harmanmanchanda182@gmail.com>
Date: Sun, 28 May 2017 17:26:24 +0000 (+0530)
Subject: Add nested class condition for right alignment!
X-Git-Tag: v6.4.0-rc1~20^2~8
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6adc2952286a39eefe776a54521c23ec3621377d;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add nested class condition for right alignment!
---

diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
index 774cee664..ab7043d24 100644
--- 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 46c543fe5..c2e28019c 100644
--- 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 71d695edd..01f536e8b 100644
--- 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 bba83a302..d442115b9 100644
--- 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">