Fix arrow alignment issues with dropdown menu

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 55a9bbdc8a7363bf08d8038cb1005ee5b6ca17db..58013b95b5d1b6452ef3cefae8aa5fd35ff88817 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -31,11 +31,12 @@ $dropdownmenu-border: 1px solid $medium-gray !default;
 // @type Length
 $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
-@mixin left-right-arrows() {
+@mixin -zf-dropdown-horizontal-arrows {
   a::after {
-    float: $global-right;
-    margin-top: 3px;
-    margin-#{$global-left}: 10px;
+    position: absolute;
+    top: 50%;
+    right: 11px;
+    margin-top: -5px;
   }
 
   &.opens-left > a::after {
@@ -47,64 +48,69 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
   }
 }
 
-@mixin dropdown-menu-direction($dir: horizontal) {
-  @if $dir == horizontal {
-    > li.opens-left {
-      > .is-dropdown-submenu {
-        left: auto;
-        right: 0;
-        top: 100%;
-      }
+@mixin -zf-dropdown-horizontal {
+  > .opens-left {
+    > .is-dropdown-submenu {
+      left: auto;
+      right: 0;
+      top: 100%;
     }
-    > li.opens-right {
-      > .is-dropdown-submenu {
-        right: auto;
-        left: 0;
-        top: 100%;
-      }
+  }
+
+  > .opens-right {
+    > .is-dropdown-submenu {
+      right: auto;
+      left: 0;
+      top: 100%;
     }
-    @if $dropdownmenu-arrows {
-      > li.is-dropdown-submenu-parent > a {
-        padding-#{$global-right}: 1.5rem;
-        position: relative;
-      }
+  }
 
-      > li.is-dropdown-submenu-parent > 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;
-      }
+  @if $dropdownmenu-arrows {
+    > .is-dropdown-submenu-parent > a {
+      padding-#{$global-right}: 1.5rem;
+      position: relative;
     }
 
-  } @else if $dir == vertical {
-    > li {
+    > .is-dropdown-submenu-parent > a::after {
+      @include css-triangle(5px, $dropdownmenu-arrow-color, down);
+      position: absolute;
+      top: 50%;
+      margin-top: -2px;
+      #{$global-right}: 5px;
+    }
+  }
+}
+
+@mixin -zf-dropdown-vertical {
+  > li {
+    .is-dropdown-submenu {
+      top: 0;
+    }
+
+    &.opens-left {
       .is-dropdown-submenu {
-        top: 0;
-      }
-      &.opens-left {
-        .is-dropdown-submenu {
-          left: auto;
-          right: 100%;
-        }
-      }
-      &.opens-right {
-        .is-dropdown-submenu {
-          right: auto;
-          left: 100%;
-        }
+        left: auto;
+        right: 100%;
       }
-      @if $dropdownmenu-arrows {
-        @include left-right-arrows();
+    }
+
+    &.opens-right {
+      .is-dropdown-submenu {
+        right: auto;
+        left: 100%;
       }
     }
-  } @else {
-    @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
+
+    @if $dropdownmenu-arrows {
+      @include -zf-dropdown-horizontal-arrows;
+    }
   }
 }
 
 @mixin foundation-dropdown-menu {
   .dropdown.menu {
+    @include -zf-dropdown-horizontal;
+
     a {
       @include disable-mouse-outline;
     }
@@ -113,21 +119,19 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       display: none;
     }
 
-    @include dropdown-menu-direction(horizontal);
-
     &.vertical {
-      @include dropdown-menu-direction(vertical);
+      @include -zf-dropdown-vertical;
     }
 
     @each $size in $breakpoint-classes {
       @if $size != small {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
-            @include dropdown-menu-direction(horizontal);
+            @include -zf-dropdown-horizontal;
           }
 
           &.#{$size}-vertical {
-            @include dropdown-menu-direction(vertical);
+            @include -zf-dropdown-vertical;
           }
         }
       }
@@ -165,7 +169,6 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
   }
 
   .is-dropdown-submenu, .top-bar .is-dropdown-submenu {
-
     display: none;
     position: absolute;
     top: 0;
@@ -177,9 +180,10 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
     .is-dropdown-submenu-parent {
       @if $dropdownmenu-arrows {
-        @include left-right-arrows()
+        @include -zf-dropdown-horizontal-arrows;
       }
     }
+
     @if (type-of($dropdownmenu-border-width) == 'number') {
       .is-dropdown-submenu {
         margin-top: (-$dropdownmenu-border-width);
@@ -190,7 +194,6 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       width: 100%;
     }
 
-
     // [TODO] Cut back specificity
     // scss-lint:disable SelectorDepth
     &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index e8bdf7b06b411d23b1a620e382680ea612640a80..3905041f9f68aee33fe2f18b9746786fde2d1da3 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -110,6 +110,7 @@ $menu-icon-spacing: 0.25rem !default;
         flex: 0 0 100%;
         max-width: 100%;
       }
+
       > li  > a {
         align-items: flex-start;
         justify-content: flex-start;