Cut back specificity of dropdown menu classes, fix cascade issue with top bar <ul...

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index 5e7911aab7e8cee7e7a8170d8af343ba4c4ea649..5c4b6dd85f13048b9a51f72656a56c1921a78654 100644 (file)
--- a/docs/pages/menu.md
+++ b/docs/pages/menu.md
@@ -93,7 +93,7 @@ Add the `.simple` class to a Menu to remove the padding and color change. This s
 
 ```html_example
 <ul class="menu simple">
-  <li><a href="#">One</a></li>
+  <li>One</li>
   <li><a href="#">Two</a></li>
   <li><a href="#">Three</a></li>
   <li><a href="#">Four</a></li>

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index a4d6da793d21ef60922dd5cb39aac605b0261603..dd225df987aad0747700855c6e31155f5694e9f7 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -37,117 +37,117 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       @include disable-mouse-outline;
     }
 
-    .is-dropdown-submenu-parent {
-      position: relative;
-
-      a::after {
-        float: $global-right;
-        margin-top: 3px;
-        margin-#{$global-left}: 10px;
-      }
-
-      @if $dropdownmenu-arrows {
-        &.is-down-arrow a {
-          padding-#{$global-right}: 1.5rem;
-          position: relative;
-        }
-
-        &.is-down-arrow > a::after {
-          @include css-triangle(5px, $dropdownmenu-arrow-color, down);
-          position: absolute;
-          top: rem-calc(2px) + rem-calc(get-side($menu-item-padding, top));
-          #{$global-right}: 5px;
-        }
-
-        &.is-left-arrow > a::after {
-          @include css-triangle(5px, $dropdownmenu-arrow-color, left);
-          float: left;
-          margin-left: 0;
-          margin-right: 10px;
-        }
-
-        &.is-right-arrow > a::after {
-          @include css-triangle(5px, $dropdownmenu-arrow-color, right);
-        }
-      }
+    .no-js & ul {
+      display: none;
+    }
 
-      &.is-left-arrow.opens-inner .is-dropdown-submenu {
-        right: 0;
+    &.align-right {
+      .is-dropdown-submenu.first-sub {
+        top: 100%;
         left: auto;
+        right: 0;
       }
+    }
+  }
 
-      &.is-right-arrow.opens-inner .is-dropdown-submenu {
-        left: 0;
-        right: auto;
-      }
+  .is-dropdown-menu.vertical {
+    width: 100px;
 
-      &.opens-inner .is-dropdown-submenu {
-        top: 100%;
-      }
+    &.align-right {
+      float: right;
+    }
 
-      &.opens-left .is-dropdown-submenu {
-        left: auto;
-        right: 100%;
-      }
+    > li .is-dropdown-submenu {
+      top: 0;
+      left: 100%;
     }
+  }
 
-    .no-js & ul {
-      display: none;
+  .is-dropdown-submenu-parent {
+    position: relative;
+
+    a::after {
+      float: $global-right;
+      margin-top: 3px;
+      margin-#{$global-left}: 10px;
     }
 
-    .is-dropdown-submenu {
-      display: none;
-      position: absolute;
-      top: 0;
-      #{$global-left}: 100%;
-      min-width: $dropdownmenu-min-width;
-      z-index: 1;
-      background: $dropdownmenu-background;
-      border: $dropdownmenu-border;
-
-      @if (type-of($dropdownmenu-border-width) == 'number') {
-        .is-dropdown-submenu {
-          margin-top: (-$dropdownmenu-border-width);
-        }
+    @if $dropdownmenu-arrows {
+      &.is-down-arrow a {
+        padding-#{$global-right}: 1.5rem;
+        position: relative;
       }
 
-      > li {
-        width: 100%;
+      &.is-down-arrow > a::after {
+        @include css-triangle(5px, $dropdownmenu-arrow-color, down);
+        position: absolute;
+        top: rem-calc(2px) + rem-calc(get-side($menu-item-padding, top));
+        #{$global-right}: 5px;
       }
 
-      &.first-sub {
-        top: 100%;
-        #{$global-left}: 0;
-        #{$global-right}: auto;
+      &.is-left-arrow > a::after {
+        @include css-triangle(5px, $dropdownmenu-arrow-color, left);
+        float: left;
+        margin-left: 0;
+        margin-right: 10px;
       }
 
-      // [TODO] Cut back specificity
-      // scss-lint:disable SelectorDepth
-      &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,
-      &.js-dropdown-active {
-        display: block;
+      &.is-right-arrow > a::after {
+        @include css-triangle(5px, $dropdownmenu-arrow-color, right);
       }
     }
 
-    &.align-right {
-      .is-dropdown-submenu.first-sub {
-        top: 100%;
-        left: auto;
-        right: 0;
-      }
+    &.is-left-arrow.opens-inner .is-dropdown-submenu {
+      right: 0;
+      left: auto;
+    }
+
+    &.is-right-arrow.opens-inner .is-dropdown-submenu {
+      left: 0;
+      right: auto;
+    }
+
+    &.opens-inner .is-dropdown-submenu {
+      top: 100%;
+    }
+
+    &.opens-left .is-dropdown-submenu {
+      left: auto;
+      right: 100%;
     }
   }
 
-  .is-dropdown-menu.vertical {
-    width: 100px;
+  .is-dropdown-submenu {
+    display: none;
+    position: absolute;
+    top: 0;
+    #{$global-left}: 100%;
+    min-width: $dropdownmenu-min-width;
+    z-index: 1;
+    background: $dropdownmenu-background;
+    border: $dropdownmenu-border;
+
+    @if (type-of($dropdownmenu-border-width) == 'number') {
+      .is-dropdown-submenu {
+        margin-top: (-$dropdownmenu-border-width);
+      }
+    }
 
-    &.align-right {
-      float: right;
+    > li {
+      width: 100%;
     }
 
-    > li .is-dropdown-submenu {
-      top: 0;
-      left: 100%;
+    &.first-sub {
+      top: 100%;
+      #{$global-left}: 0;
+      #{$global-right}: auto;
+    }
+
+    // [TODO] Cut back specificity
+    // scss-lint:disable SelectorDepth
+    &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,
+    &.js-dropdown-active {
+      display: block;
     }
   }
 }

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index b8387fec5a0ec52cad9fdfb4ea6e3ad2fa807c04..9315a43fe8ad73a0b41092464ef8e341b08fe898 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -39,7 +39,7 @@ $menu-expand-max: 6 !default;
   }
 
   // Reset line height to make the height of the overall item easier to calculate
-  > li:not(.menu-text) > a {
+  > li > a {
     display: block;
     padding: $menu-item-padding;
     line-height: 1;
@@ -80,9 +80,14 @@ $menu-expand-max: 6 !default;
 
 /// Creates a simple Menu, which has no padding or hover state.
 @mixin menu-simple {
+  li {
+    line-height: 1;
+    display: inline-block;
+    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
+  }
+
   a {
     padding: 0;
-    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
   }
 }