Merge pull request #389 from BeAPI/feature/rtl

Feature/rtl

Author: francoistibo

config/loaders.js

@@ -64,6 +64,12 @@ module.exports = {
                     'postcss-preset-env': {
                       browsers: 'last 2 versions, > 2%, not dead',
                       stage: 2,
+                      features: {
+                        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
+                        // https://stackoverflow.com/questions/64565180/how-to-prevent-postcss-preset-env-from-removing-css-logical-properties#answer-66966232
+                        // Use stage 2 features + disable logical properties and values rule
+                        'logical-properties-and-values': false,
+                      },
                     },
                     'postcss-pxtorem': { propWhiteList: [] },
                     'postcss-sort-media-queries': {},

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/_f-get-svg-url.scss

@@ -35,7 +35,8 @@
     $svgs: (
         // name-of-the-svg: (viewBox, content of the svg element)
         "arrow": ("0 0 18 14", "%3Cpath d='M17.25 7 10.37.12l-.96.97 5.2 5.22H.76V7.7h13.87L9.4 12.9l.96.96L17.25 7Z'/%3E"),
-        "down": ("0 0 11.2 6.7", "3Cpath d='M0 .5C0 .4.1.2.2.1c.2-.2.5-.1.7.1l4.6 5.3.1.1s.1 0 .1-.1L10.3.1c.2-.1.5-.2.7 0 .2.2.2.5.1.7L6.5 6.2c-.2.3-.5.5-.9.5s-.7-.2-.9-.6L.1.8C0 .7 0 .6 0 .5z'/%3E")
+        "down": ("0 0 11.2 6.7", "3Cpath d='M0 .5C0 .4.1.2.2.1c.2-.2.5-.1.7.1l4.6 5.3.1.1s.1 0 .1-.1L10.3.1c.2-.1.5-.2.7 0 .2.2.2.5.1.7L6.5 6.2c-.2.3-.5.5-.9.5s-.7-.2-.9-.6L.1.8C0 .7 0 .6 0 .5z'/%3E"),
+        "close": ("0 0 20 20", "3Cpath d='M5.442 5.442 5 5.883l2.058 2.059L9.116 10l-2.058 2.058L5 14.117l.442.441.441.442 2.059-2.058L10 10.884l2.058 2.058L14.117 15l.441-.442.442-.441-2.058-2.059L10.884 10l2.058-2.058L15 5.883l-.442-.441L14.117 5l-2.059 2.058L10 9.116 7.942 7.058 5.883 5l-.441.442'/%3E"),
     );
 
     @if not map-has-key($svgs, $name) {

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

@@ -21,8 +21,8 @@
     float: $direction;
 
     @if ($direction == left) {
-        margin-right: var(--spacing--block-1);
+        margin-inline-end: var(--spacing--block-1);
     } @else {
-        margin-left: var(--spacing--block-1);
+        margin-inline-start: var(--spacing--block-1);
     }
 }

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

@@ -27,7 +27,7 @@
     + label {
         position: relative;
         display: block;
-        padding-left: $size + 20;
+        padding-inline-start: $size + 20;
         cursor: pointer;
 
         &::before {
@@ -40,6 +40,11 @@
             content: "";
             background-color: $color-light;
             border: $border-width solid $color;
+
+            @include rtl {
+                right: 0;
+                left: auto;
+            }
         }
 
         &::after {
@@ -55,6 +60,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;