fix(DateRange): update dash position and color

also fixed incorrect spelling within the code ISSUES CLOSED: #1716
GetTerminus · Oct 30, 2019 · 97b4c10 · 97b4c10
1 parent 67f10d1
commit 97b4c10
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/terminus-ui/date-range/src/date-range.component.html b/terminus-ui/date-range/src/date-range.component.html
@@ -1,4 +1,9 @@
-<div class="c-date-range qa-date-range" fxLayout="row">
+<div
+  class="c-date-range qa-date-range"
+  fxLayout="row"
+  fxLayoutAlign="start center"
+  fxLayoutGap=".6em"
+>
   <ts-input
     class="c-date-range--start qa-date-range-start-datepicker"
     [formControl]="internalStartControl"
@@ -15,7 +20,7 @@
     #start
   ></ts-input>
 
-  <span class="c-date-range__seperator">
+  <span class="c-date-range__separator">
     {{ separator }}
   </span>
 

diff --git a/terminus-ui/date-range/src/date-range.component.scss b/terminus-ui/date-range/src/date-range.component.scss
@@ -1,3 +1,4 @@
+@import './../../scss/helpers/color';
 @import './../../scss/helpers/reset';
 
 
@@ -13,9 +14,10 @@
 }
 
 .c-date-range {
-  .c-date-range__seperator {
-    $seperator-spacing: 1.8em .6em;
-
-    margin: $seperator-spacing;
+  .c-date-range__separator {
+    // NOTE: Needed to offset the space created for validation messages
+    $negative-adjustment: -1.2em;
+    color: color(utility);
+    margin-top: $negative-adjustment;
   }
 }