BFF RTL friendly

Author: cedric07

src/js/classes/Header.js

@@ -1,6 +1,7 @@
 import AbstractDomElement from './AbstractDomElement'
 import each from '../utils/each'
 import { Tween } from 'oneloop.js'
+import isRTL from '../utils/isRTL'
 
 class Header extends AbstractDomElement {
   constructor(element, options) {
@@ -28,7 +29,13 @@ class Header extends AbstractDomElement {
       duration: 1000,
       easing: 'easeInOutExpo',
       onUpdate: function (timestamp, tick, percent) {
-        const direction = window.innerWidth >= 768 ? -1 : 1
+        const bp = 768
+        let direction = window.innerWidth >= bp ? -1 : 1
+
+        if (isRTL()) {
+          direction = window.innerWidth >= bp ? 1 : -1
+        }
+
         menu.style.transform = 'translateX(' + 100 * (percent - 1) * direction + '%)'
       },
       onComplete: function (timestamp, tick, lastValue) {

src/js/utils/isRTL.js

@@ -0,0 +1,7 @@
+export default function isRTL() {
+  return (
+    document.documentElement.dir === 'rtl' ||
+    document.documentElement.lang === 'ar' ||
+    document.documentElement.lang === 'iw'
+  )
+}

src/scss/02-tools/_m-align.scss

@@ -22,7 +22,17 @@
 
     @if ($direction == left) {
         margin-right: var(--spacing--block-1);
+
+        @include rtl {
+            margin-right: 0;
+            margin-left: var(--spacing--block-1);
+        }
     } @else {
         margin-left: var(--spacing--block-1);
+
+        @include rtl {
+            margin-right: var(--spacing--block-1);
+            margin-left: 0;
+        }
     }
 }

src/scss/02-tools/_m-checkbox-custom.scss

@@ -30,6 +30,11 @@
         padding-left: $size + 20;
         cursor: pointer;
 
+        @include rtl {
+            padding-right: $size + 20;
+            padding-left: 0;
+        }
+
         &::before {
             position: absolute;
             top: 1px;
@@ -40,6 +45,11 @@
             content: "";
             background-color: $color-light;
             border: $border-width solid $color;
+
+            @include rtl {
+                right: 0;
+                left: auto;
+            }
         }
 
         &::after {
@@ -55,6 +65,12 @@
             opacity: 0;
             transition: opacity .2s;
             transform: translate(-50%, -50%) rotate(-45deg);
+
+            @include rtl {
+                right: math.round(math.div($size, 2));
+                left: auto;
+                transform: translate(50%, -50%) rotate(-45deg);
+            }
         }
     }
 }

src/scss/02-tools/_m-rtl.scss

@@ -20,3 +20,10 @@
         @content;
     }
 }
+
+@mixin set-rtl-direction {
+    &:lang(ar),
+    &:lang(iw) {
+        direction: rtl;
+    }
+}

src/scss/02-tools/_m-select-custom.scss

@@ -31,6 +31,10 @@
     border-radius: 10px;
     appearance: none;
 
+    @include rtl {
+        background-position: left 10px top 50%, 0 0;
+    }
+
     // Set options to normal weight
     option {
         font-weight: 400;

src/scss/03-base/_forms.scss

@@ -101,6 +101,7 @@ $all-text-inputs: assign-inputs($text-inputs-list);
             height: 16px;
             cursor: pointer;
             background-image: get-svg-url("close", $color-dark);
+            background-repeat: no-repeat;
             background-size: contain;
             -webkit-appearance: none;
             -moz-appearance: none;

src/scss/03-base/_reset.scss

@@ -39,6 +39,9 @@ h6 {
   */
 
 html {
+    /* Set automatic RTL direction depending on lang attribute */
+    @include set-rtl-direction;
+
     /* Apply border-box across the entire page. */
     box-sizing: border-box;
 

src/scss/05-components/_searchform.scss

@@ -7,6 +7,11 @@
 
     &__field[type="search"] {
         padding-right: var(--spacing--block-1);
+
+        @include rtl {
+            padding-right: 0;
+            padding-left: var(--spacing--block-1);
+        }
     }
 
     &__submit {

src/scss/05-components/_skip-links.scss

@@ -18,5 +18,10 @@
 
     li:not(:last-of-type) {
         margin-right: 1rem;
+
+        @include rtl {
+            margin-right: 0;
+            margin-left: 1rem;
+        }
     }
 }