parametrize accordion-menu arrow and use translateY to center vertically

diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
index 0241030cfcb934f592b04356ea277a047d3a5726..9f4c0e0eb4c194db3a855c6e344e9ed1a53115cf 100644 (file)
--- a/scss/components/_accordion-menu.scss
+++ b/scss/components/_accordion-menu.scss
@@ -10,23 +10,27 @@ $accordionmenu-arrows: true !default;
 /// @type Color
 $accordionmenu-arrow-color: $primary-color !default;
 
+/// Sets accordion menu arrow size if arrow is used.
+/// @type Length
+$accordionmenu-arrow-size: 6px !default;
+
 @mixin foundation-accordion-menu {
   @if $accordionmenu-arrows {
     .is-accordion-submenu-parent > a {
       position: relative;
 
       &::after {
-        @include css-triangle(6px, $accordionmenu-arrow-color, down);
+        @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
         position: absolute;
         top: 50%;
-        margin-top: -4px;
+        transform: translateY(-50%);
         right: 1rem;
       }
     }
 
     .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
       transform-origin: 50% 50%;
-      transform: scaleY(-1);
+      transform: scaleY(-1) translateY(50%);
     }
   }
 }