Revert "Fix arrow alignment issues with dropdown menu"

This reverts commit 265f08470337bc70db43d71bffc0625e1ad9cdf2.

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 58013b95b5d1b6452ef3cefae8aa5fd35ff88817..55a9bbdc8a7363bf08d8038cb1005ee5b6ca17db 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -31,12 +31,11 @@ $dropdownmenu-border: 1px solid $medium-gray !default;
 // @type Length
 $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
-@mixin -zf-dropdown-horizontal-arrows {
+@mixin left-right-arrows() {
   a::after {
-    position: absolute;
-    top: 50%;
-    right: 11px;
-    margin-top: -5px;
+    float: $global-right;
+    margin-top: 3px;
+    margin-#{$global-left}: 10px;
   }
 
   &.opens-left > a::after {
@@ -48,69 +47,64 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
   }
 }
 
-@mixin -zf-dropdown-horizontal {
-  > .opens-left {
-    > .is-dropdown-submenu {
-      left: auto;
-      right: 0;
-      top: 100%;
-    }
-  }
-
-  > .opens-right {
-    > .is-dropdown-submenu {
-      right: auto;
-      left: 0;
-      top: 100%;
-    }
-  }
-
-  @if $dropdownmenu-arrows {
-    > .is-dropdown-submenu-parent > a {
-      padding-#{$global-right}: 1.5rem;
-      position: relative;
-    }
-
-    > .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 dropdown-menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    > li.opens-left {
+      > .is-dropdown-submenu {
+        left: auto;
+        right: 0;
+        top: 100%;
+      }
     }
-  }
-}
-
-@mixin -zf-dropdown-vertical {
-  > li {
-    .is-dropdown-submenu {
-      top: 0;
+    > li.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;
+      }
 
-    &.opens-left {
-      .is-dropdown-submenu {
-        left: auto;
-        right: 100%;
+      > 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;
       }
     }
 
-    &.opens-right {
+  } @else if $dir == vertical {
+    > li {
       .is-dropdown-submenu {
-        right: auto;
-        left: 100%;
+        top: 0;
+      }
+      &.opens-left {
+        .is-dropdown-submenu {
+          left: auto;
+          right: 100%;
+        }
+      }
+      &.opens-right {
+        .is-dropdown-submenu {
+          right: auto;
+          left: 100%;
+        }
+      }
+      @if $dropdownmenu-arrows {
+        @include left-right-arrows();
       }
     }
-
-    @if $dropdownmenu-arrows {
-      @include -zf-dropdown-horizontal-arrows;
-    }
+  } @else {
+    @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
   }
 }
 
 @mixin foundation-dropdown-menu {
   .dropdown.menu {
-    @include -zf-dropdown-horizontal;
-
     a {
       @include disable-mouse-outline;
     }
@@ -119,19 +113,21 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       display: none;
     }
 
+    @include dropdown-menu-direction(horizontal);
+
     &.vertical {
-      @include -zf-dropdown-vertical;
+      @include dropdown-menu-direction(vertical);
     }
 
     @each $size in $breakpoint-classes {
       @if $size != small {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
-            @include -zf-dropdown-horizontal;
+            @include dropdown-menu-direction(horizontal);
           }
 
           &.#{$size}-vertical {
-            @include -zf-dropdown-vertical;
+            @include dropdown-menu-direction(vertical);
           }
         }
       }
@@ -169,6 +165,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
   }
 
   .is-dropdown-submenu, .top-bar .is-dropdown-submenu {
+
     display: none;
     position: absolute;
     top: 0;
@@ -180,10 +177,9 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
     .is-dropdown-submenu-parent {
       @if $dropdownmenu-arrows {
-        @include -zf-dropdown-horizontal-arrows;
+        @include left-right-arrows()
       }
     }
-
     @if (type-of($dropdownmenu-border-width) == 'number') {
       .is-dropdown-submenu {
         margin-top: (-$dropdownmenu-border-width);
@@ -194,6 +190,7 @@ $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 3905041f9f68aee33fe2f18b9746786fde2d1da3..e8bdf7b06b411d23b1a620e382680ea612640a80 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -110,7 +110,6 @@ $menu-icon-spacing: 0.25rem !default;
         flex: 0 0 100%;
         max-width: 100%;
       }
-
       > li  > a {
         align-items: flex-start;
         justify-content: flex-start;