Fix drilldown menu arrow alignment

diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
index d81af358f86a96d741fea2b1d279452214cff910..1719080780e3a2fa1c485273d0ecef4588bc3174 100644 (file)
--- a/scss/components/_drilldown.scss
+++ b/scss/components/_drilldown.scss
@@ -20,7 +20,7 @@ $drilldown-padding: $global-menu-padding !default;
 
 /// Sets drilldown menu nested margin
 /// @type Number
-$drilldown-nested-margin: 0 !default; 
+$drilldown-nested-margin: 0 !default;
 
 /// Background color for drilldown top level items.
 /// @type Color
@@ -42,6 +42,32 @@ $drilldown-arrow-color: $primary-color !default;
 /// @type Length
 $drilldown-arrow-size: 6px !default;
 
+@mixin zf-drilldown-left-right-arrows {
+  .is-drilldown-submenu-parent > a {
+    position: relative;
+    &::after {
+      position: absolute;
+      top: 50%;
+      margin-top: -1 * $drilldown-arrow-size;
+      #{$global-right}: 1rem;
+      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
+    }
+  }
+
+  &.align-left .is-drilldown-submenu-parent > a::after {
+    left: auto;
+    right: 1rem;
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+  }
+
+  &.align-right .is-drilldown-submenu-parent > a::after {
+    right: auto;
+    left: 1rem;
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
+  }
+
+}
+
 @mixin foundation-drilldown-menu {
   // Applied to the Menu container
   .is-drilldown {
@@ -100,17 +126,7 @@ $drilldown-arrow-size: 6px !default;
     }
 
     @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;
-        }
-      }
+      @include zf-drilldown-left-right-arrows;
 
       .js-drilldown-back > a::before {
         @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);