From 05ee88475f0e681359e28526377d02f7c002516b Mon Sep 17 00:00:00 2001
From: Karim Tayie <karimsherif2597@gmail.com>
Date: Sun, 26 Apr 2020 14:46:35 +0200
Subject: [PATCH] Added rtl support (#286)

* added "rtl" support for horizontal and vertical wizard layouts
---
 src/css/wizard-navigation-bar.scss | 35 ++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/css/wizard-navigation-bar.scss b/src/css/wizard-navigation-bar.scss
index 8456620b..e0f4dd44 100644
--- a/src/css/wizard-navigation-bar.scss
+++ b/src/css/wizard-navigation-bar.scss
@@ -16,6 +16,11 @@ $aw-param-indicator-state: null;
 // wizard step state: 'default', 'current', 'done' etc.
 $aw-param-step-state: null;
 
+@mixin rtl {
+  @at-root [dir="rtl"] #{&} {
+    @content;
+  }
+}
 
 // Defines the line that strings together circles representing wizard steps, in the horizontal layout
 @mixin aw-horizontal-line($dot-width, $dot-height, $line-color) {
@@ -26,6 +31,11 @@ $aw-param-step-state: null;
   width: calc(100% - #{$dot-width});
   top: -($dot-height / 2);
   left: calc(50% + #{$dot-width / 2});
+
+  @include rtl {
+    left: auto;
+    right: calc(50% + #{$dot-width / 2});
+  }
 }
 
 // Defines the line that strings together circles representing wizard steps, in the vertical layout
@@ -37,6 +47,11 @@ $aw-param-step-state: null;
   top: $dot-height;
   height: calc(100% - #{$dot-height});
   width: 1px;
+
+  @include rtl {
+    left: auto;
+    right: -($dot-height / 2);
+  }
 }
 
 // Defines a circle representing a wizard step
@@ -55,12 +70,22 @@ $aw-param-step-state: null;
 @mixin aw-circle-position-horizontal($dot-width, $dot-height, $dot-border-width) {
   top: -$dot-height;
   left: calc(50% - #{$dot-width / 2});
+
+  @include rtl {
+    left: auto;
+    right: calc(50% - #{$dot-width / 2});;
+  }
 }
 
 // Positions a circle in the vertical layout of the navigation bar
 @mixin aw-circle-position-vertical($dot-width, $dot-height, $dot-border-width) {
   top: 0;
   left: -$dot-width;
+
+  @include rtl {
+    left: auto;
+    right: -$dot-width;
+  }
 }
 
 // Define a step indicator style like 'small', 'large-filled' etc.
@@ -97,6 +122,10 @@ $aw-param-step-state: null;
   }
   @else if ($layout == 'vertical') {
     padding: ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2 + $height);
+
+    @include rtl {
+      padding: ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2 + $height) ($aw-distance-between-steps / 2) ($aw-distance-between-steps / 2);
+    }
   }
 
   li {
@@ -408,6 +437,12 @@ aw-wizard-navigation-bar {
           .label {
             margin-left: $aw-text-margin-left;
             text-align: left;
+
+            @include rtl {
+              margin-left: 0;
+              margin-right: $aw-text-margin-left;
+              text-align: right;
+            }
           }
         }
       }