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

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;

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;