parametrize drilldown menu arrow and use translateY to center vertically

diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
index a9d2d906fa8d07f891f18fe624a6862491f065ed..31732ad60a1b5570b380ac74548218d43648c2cd 100644 (file)
--- a/scss/components/_drilldown.scss
+++ b/scss/components/_drilldown.scss
@@ -18,6 +18,10 @@ $drilldown-arrows: true !default;
 /// @type Color
 $drilldown-arrow-color: $primary-color !default;
 
+/// Sets drilldown arrow size if arrow is used.
+/// @type Length
+$drilldown-arrow-size: 6px !default;
+
 /// Background color for drilldown submenus.
 /// @type Color
 $drilldown-background: $white !default;
@@ -64,16 +68,16 @@ $drilldown-background: $white !default;
       position: relative;
 
       &::after {
-        @include css-triangle(6px, $drilldown-arrow-color, $global-right);
+        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
         position: absolute;
         top: 50%;
-        margin-top: -6px;
+        transform: translateY(-50%);
         #{$global-right}: 1rem;
       }
     }
 
     .js-drilldown-back > a::before {
-      @include css-triangle(6px, $drilldown-arrow-color, $global-left);
+      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
       border-#{$global-left}-width: 0;
       display: inline-block;
       vertical-align: middle;