From: Geoff Kimball <geoff@zurb.com>
Date: Tue, 24 Nov 2015 22:51:34 +0000 (-0800)
Subject: Get drilldown menu working with RTL
X-Git-Tag: v6.0.4~7^2~7
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d44dbff9a29a43798c2021df8155693a58ca72b9;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Get drilldown menu working with RTL
---

diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
index 4363c2577..6e0f24f3a 100644
--- a/scss/components/_drilldown.scss
+++ b/scss/components/_drilldown.scss
@@ -25,7 +25,7 @@ $drilldown-arrows: true !default;
   .is-drilldown-sub {
     position: absolute;
     top: 0;
-    left: 100%;
+    #{$global-left}: 100%;
     z-index: -1;
     height: 100%;
     width: 100%;
@@ -35,11 +35,11 @@ $drilldown-arrows: true !default;
     &.is-active {
       z-index: 1;
       display: block;
-      transform: translateX(-100%);
+      transform: translateX(if($global-text-direction == ltr, -100%, 100%));
     }
 
     &.is-closing {
-      transform: translateX(100%);
+      transform: translateX(if($global-text-direction == ltr, 100%, -100%));
     }
   }
 
@@ -48,19 +48,19 @@ $drilldown-arrows: true !default;
       position: relative;
 
       &::after {
-        @include css-triangle(6px, $primary-color, right);
+        @include css-triangle(6px, $primary-color, $global-right);
         position: absolute;
         top: 50%;
         margin-top: -6px;
-        right: 1rem;
+        #{$global-right}: 1rem;
       }
     }
 
     .js-drilldown-back::before {
-      @include css-triangle(6px, $primary-color, left);
-      float: left;
-      margin-right: 0.75rem; // Creates space between the arrow and the text
-      margin-left: 0.6rem; // Lines the tip of the arrow with the items below
+      @include css-triangle(6px, $primary-color, $global-left);
+      float: $global-left;
+      margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+      margin-#{$global-left}: 0.6rem; // Lines the tip of the arrow with the items below
       margin-top: 14px; // Aligns the arrow with the text
     }
   }