From 193bc90762ee90ca96904c4d888ea8818789bb47 Mon Sep 17 00:00:00 2001
From: Ed Morales <emoralesb05@gmail.com>
Date: Wed, 12 Apr 2017 11:46:17 -0700
Subject: [PATCH] fix(steps): issue margin-inline style in certain conditions.
 (closes #501) (#503)

* fix(steps): issue margin-inline style in certain conditions

instead of using margin-inline-start or margin-inline-end, its better to just use proper styles depending on ltr or rtl

* fix(): set proper style for not(dir="rtl") cases

* fix(): added auto styles for line
---
 .../step-header/step-header.component.scss    | 20 +++++++++++++++----
 src/platform/core/steps/steps.component.scss  | 19 +++++++++++++++---
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/platform/core/steps/step-header/step-header.component.scss b/src/platform/core/steps/step-header/step-header.component.scss
index d573185628..8f2414752c 100644
--- a/src/platform/core/steps/step-header/step-header.component.scss
+++ b/src/platform/core/steps/step-header/step-header.component.scss
@@ -53,12 +53,24 @@ $step-circle: 24px;
     font-size: 0;
   }
   .td-circle,
+  .td-triangle,
   .td-complete {
-    margin-inline-start: 8px;
-    font-size: 14px;
+    /deep/ :not([dir='rtl']) & {
+      margin: {
+        left: 8px;
+        right: 0px;
+      }
+    }
+    /deep/ [dir='rtl'] & {
+      margin: {
+        left: 0px;
+        right: 8px;
+      }
+    }
   }
-  .td-triangle {
-    margin-inline-start: 8px;
+  .td-circle,
+  .td-complete {
+    font-size: 14px;
   }
   .td-step-label-wrapper {
     padding-left: 8px;
diff --git a/src/platform/core/steps/steps.component.scss b/src/platform/core/steps/steps.component.scss
index ce2eaa2907..5299be6d3d 100644
--- a/src/platform/core/steps/steps.component.scss
+++ b/src/platform/core/steps/steps.component.scss
@@ -14,14 +14,27 @@
   height: 1px;
   position: relative;
   top: 36px;
-  margin-inline-start: -6px;
-  margin-inline-end: -3px;
+  /deep/ :not([dir='rtl']) & {
+    left: -6px;
+    right: -3px;
+  }
+  /deep/ [dir='rtl'] & {
+    left: -3px;
+    right: -6px;
+  }
   min-width: 15px;
 }
 
 .td-vertical-line {
   position: absolute;
-  margin-inline-start: 20px;
+  /deep/ :not([dir='rtl']) & {
+    left: 20px;
+    right: auto;
+  }
+  /deep/ [dir='rtl'] & {
+    left: auto;
+    right: 20px;
+  }
   bottom: -16px;
   top: -16px;
   border-left-width: 1px;