fix: Add rtl styling for Skip Navigation link

Without this styling, RTL languages will overflow to the left, rather than hiding the link.
zendesk · Mar 23, 2020 · 3e64455 · 3e64455
1 parent 87a2952
commit 3e64455
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/style.css b/style.css
@@ -721,6 +721,11 @@ ul {
   z-index: -999;
 }
 
+[dir="rtl"] .skip-navigation {
+  left: initial;
+  right: -999px;
+}
+
 .skip-navigation:focus, .skip-navigation:active {
   left: auto;
   overflow: auto;
@@ -730,6 +735,11 @@ ul {
   z-index: 999;
 }
 
+[dir="rtl"] .skip-navigation:focus, [dir="rtl"] .skip-navigation:active {
+  left: initial;
+  right: auto;
+}
+
 /***** User info in header *****/
 .user-info {
   display: inline-block;

diff --git a/styles/_header.scss b/styles/_header.scss
@@ -107,6 +107,12 @@ $header-height: 71px;
   top: auto;
   z-index: -999;
 
+
+  [dir="rtl"] & {
+    left: initial;
+    right: -999px;
+  }
+
   &:focus,
   &:active {
     left: auto;
@@ -115,5 +121,11 @@ $header-height: 71px;
     text-decoration: none;
     top: auto;
     z-index: 999;
+
+
+  [dir="rtl"] & {
+    left: initial;
+    right: auto;
+  }
   }
 }