Closes #10002 - Fixes responsive menu nested bug

Changes:
1. Nested margin
a. Global Variable
- Adds a Global Variable `global-menu-nested-margin`, 1 rem by default
b. Simple Menu
- `menu-nested-margin` defaults to `global-menu-nested-margin`
- `.nested` gets a mixin `menu-nested` with default arguments
c. Accordion Menu
- `accordionmenu-nested-margin` defaults to `global-menu-nested-margin`
- `.nested` gets a mixin `menu-nested` with `accordionmenu-nested-margin` as an argument
d. Dropdown Menu
- `dropdownmenu-nested-margin` defaults to `global-menu-nested-margin`
- `.nested` gets a mixin `menu-nested` with `dropdownmenu-nested-margin` as an argument
e. Drilldown Menu
- `drilldown-nested-margin` defaults to `global-menu-nested-margin`
- `.nested` gets a mixin `menu-nested` with `drilldown-nested-margin` as an argument

2. Drilldown Nesting Fixes
3. Added visual test case for nesting!

diff --git a/scss/_global.scss b/scss/_global.scss
index 7dca4808f35e3385264188065e1f44a4bd8dd05f..9ec9fcdae41c24202e54dd4fe894f1631b0bfd7e 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -90,6 +90,9 @@ $global-radius: 0 !default;
 /// @type Number
 $global-menu-padding: 0.7rem 1rem !default;
 
+/// Global value used for all menu styles. Nested margin for submenu.
+$global-menu-nested-margin: 1rem !default;
+
 /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
 /// @type Keyword
 $global-text-direction: ltr !default;

diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
index 4beda5f0cd8b68ee0e3037994b1e2a264ca21cac..95c592a855b8ec17d25b8fa494e0acd9e0bb2097 100644 (file)
--- a/scss/components/_accordion-menu.scss
+++ b/scss/components/_accordion-menu.scss
@@ -6,6 +6,10 @@
 /// @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;
@@ -32,6 +36,10 @@ $accordionmenu-arrow-size: 6px !default;
     a {
       padding: $accordionmenu-padding;
     }
+
+    .nested.is-accordion-submenu {
+      @include menu-nested($accordionmenu-nested-margin);
+    }
   }
 
   .is-accordion-submenu-parent > a {

diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
index 7eb4f71fb30c267285f6bb9b4a1d674f3fa1fb69..1945b4d8b3aac29364259b9a64b52cd9516c64d5 100644 (file)
--- a/scss/components/_drilldown.scss
+++ b/scss/components/_drilldown.scss
@@ -18,6 +18,10 @@ $drilldown-arrows: true !default;
 /// @type Number
 $drilldown-padding: $global-menu-padding !default;
 
+/// Sets dropdown menu nested margin
+/// @type Number
+$drilldown-nested-margin: 0px !default; 
+
 /// Background color for drilldown top level items.
 /// @type Color
 $drilldown-background: $white !default;
@@ -54,63 +58,69 @@ $drilldown-arrow-size: 6px !default;
   }
 
   // The top level <ul>
-  .drilldown a {
-    padding: $drilldown-padding;
-    background: $drilldown-background;
-  }
+  .drilldown {
+    a {
+      padding: $drilldown-padding;
+      background: $drilldown-background;
+    }
 
-  // Applied to nested <ul>s
-  .is-drilldown-submenu {
-    position: absolute;
-    top: 0;
-    #{$global-left}: 100%;
-    z-index: -1;
+    // Applied to submenu <ul>s
+    .is-drilldown-submenu {
+      position: absolute;
+      top: 0;
+      #{$global-left}: 100%;
+      z-index: -1;
+
+      width: 100%;
+      background: $drilldown-submenu-background;
+      transition: $drilldown-transition;
+
+      &.is-active {
+        z-index: 1;
+        display: block;
+        transform: translateX(if($global-text-direction == ltr, -100%, 100%));
+      }
 
-    width: 100%;
-    background: $drilldown-submenu-background;
-    transition: $drilldown-transition;
+      &.is-closing {
+        transform: translateX(if($global-text-direction == ltr, 100%, -100%));
+      }
 
-    &.is-active {
-      z-index: 1;
-      display: block;
-      transform: translateX(if($global-text-direction == ltr, -100%, 100%));
+      // Submenu item padding
+      a {
+        padding: $drilldown-submenu-padding;
+      }
     }
 
-    &.is-closing {
-      transform: translateX(if($global-text-direction == ltr, 100%, -100%));
+    .nested.is-drilldown-submenu {
+      @include menu-nested($drilldown-nested-margin);
     }
 
-    // Submenu item padding
-    a {
-      padding: $drilldown-submenu-padding;
+    .drilldown-submenu-cover-previous {
+      min-height: 100%;
     }
-  }
-
-  .drilldown-submenu-cover-previous {
-    min-height: 100%;
-  }
-
-  @if $drilldown-arrows {
-    .is-drilldown-submenu-parent > a {
-      position: relative;
 
-      &::after {
-        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
-        position: absolute;
-        top: 50%;
-        margin-top: -1 * $drilldown-arrow-size;
-        #{$global-right}: 1rem;
+    @if $drilldown-arrows {
+      .is-drilldown-submenu-parent > a {
+        position: relative;
+
+        &::after {
+          @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
+          position: absolute;
+          top: 50%;
+          margin-top: -1 * $drilldown-arrow-size;
+          #{$global-right}: 1rem;
+        }
       }
-    }
 
-    .js-drilldown-back > a::before {
-      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
-      border-#{$global-left}-width: 0;
-      display: inline-block;
-      vertical-align: middle;
-      margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+      .js-drilldown-back > a::before {
+        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
+        border-#{$global-left}-width: 0;
+        display: inline-block;
+        vertical-align: middle;
+        margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
 
-      border-#{$global-left}-width: 0;
+        border-#{$global-left}-width: 0;
+      }
     }
   }
 }

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 6a3d1bdb16203d85429903e6f6c608d57ffdb62a..a0a11af06c6072a5b666fb9d5125a77bed37a1d1 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -34,6 +34,10 @@ $dropdownmenu-submenu-background: $dropdownmenu-background !default;
 /// @type Number
 $dropdownmenu-padding: $global-menu-padding !default;
 
+/// Sets dropdown menu nested margin
+/// @type Number
+$dropdownmenu-nested-margin: 0px !default; 
+
 /// Padding for sub-menu items.
 /// @type Number
 $dropdownmenu-submenu-padding: $dropdownmenu-padding !default;
@@ -135,6 +139,10 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       display: none;
     }
 
+    .nested.is-dropdown-submenu {
+      @include menu-nested($dropdownmenu-nested-margin);
+    }
+
     &.vertical {
       @include dropdown-menu-direction(vertical);
     }

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 7b0dd2bc03b74d38ec3f494a23fefd363a8853fc..a6b09d42b686b9724f4d644b9e8b78aff0901963 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -12,7 +12,7 @@ $menu-margin: 0 !default;
 
 /// Left-hand margin of a nested menu.
 /// @type Number
-$menu-nested-margin: 1rem !default;
+$menu-nested-margin: $global-menu-nested-margin !default;
 
 /// Padding for items in a pill menu.
 /// @type Number

diff --git a/test/visual/menu/all-menus-flex.html b/test/visual/menu/all-menus-flex.html
index d7e09e115ae68db1636b3035f7a70f9f68f0cbc6..71d695eddf6e6df1844842c46c034701ee265fed 100644 (file)
--- a/test/visual/menu/all-menus-flex.html
+++ b/test/visual/menu/all-menus-flex.html
@@ -241,7 +241,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>
@@ -259,7 +259,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>
@@ -277,7 +277,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>
@@ -295,7 +295,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>
@@ -314,7 +314,7 @@
           <li><a href="#">Two</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical vertical">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>
@@ -332,7 +332,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>
@@ -352,7 +352,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li> 
               <li><a href="#">Two C</a></li>
@@ -370,7 +370,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>
@@ -388,7 +388,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu">
+            <ul class="menu nested vertical">
               <li><a href="#">Two A</a></li>
               <li><a href="#">Two B</a></li>
               <li><a href="#">Two C</a></li>

diff --git a/test/visual/menu/all-menus.html b/test/visual/menu/all-menus.html
index c00c36cfba6c32709e175a746d0fe9414789e31e..bba83a3020323c02382d4d5f74a7abced4534862 100644 (file)
--- a/test/visual/menu/all-menus.html
+++ b/test/visual/menu/all-menus.html
@@ -235,7 +235,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <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>
@@ -253,7 +253,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <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>
@@ -271,7 +271,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <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>
@@ -289,7 +289,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <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>
@@ -308,7 +308,7 @@
           <li><a href="#">Two</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical vertical">
+            <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>
@@ -326,7 +326,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu vertical">
+            <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>
@@ -346,7 +346,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu">
+            <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>
@@ -364,7 +364,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu">
+            <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>
@@ -382,7 +382,7 @@
           <li><a href="#">One</a></li>
           <li>
             <a href="#">Two</a>
-            <ul class="menu">
+            <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>