update(textfield): improved dashed lines

src/components/textField/_textField.scss

@@ -76,7 +76,7 @@ material-input-group,
 
     @include text-field( $tff-input-disabled, $tff-line-disabled, false, $tff-line-disabled-width );
     input, textarea {
-      @include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed, bottom );
+      @include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size, $tff-line-dashed );
       pointer-events: none;
       tabindex : -1;
     }
@@ -117,7 +117,7 @@ material-input-group,
 
     @include text-field( $tff-input-disabled-dark, $tff-line-disabled-dark, false, $tff-line-disabled-width );
     input, textarea {
-      @include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed-dark, bottom );
+      @include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size, $tff-line-dashed-dark );
       pointer-events: none;
       tabindex : -1;
     }

src/core/style/_mixins.scss

@@ -296,10 +296,18 @@
   }
 }
 
+@mixin text-dashed-line( $dotGap, $dotSize, $color ) {
+  @include dashed-border(1px, 1px, $dotGap, $color, bottom );
+  background-size: $dotSize $dotGap;
+}
+
 @mixin dashed-border($dashlength, $spacelength, $borderwidth, $color, $position: top) {
   $per: percentage($dashlength / ($dashlength + $spacelength));
   background-image: linear-gradient(to right, $color 0%, $color $per, rgba(0, 0, 0, 0) 0%);
   background-position: 0 $position;
+
   background-size: ($dashlength + $spacelength) $borderwidth;
   background-repeat: repeat-x;
 }
+
+

src/core/style/theme/_variables.scss

@@ -171,7 +171,7 @@ $tff-font-size: 0.75em;
 $tff-line-height:26px;
 $tff-margin: 10px 0 10px 0;
 $tff-placeholder-color: darken($text-light, 30%);
-$tff-transition: all ease-out 300ms;
+$tff-transition: all ease-out 150ms;
 // - `label` element (aka hint)
 $tff-hint-offset-large : 22px;
 $tff-hint-offset-small : 4px;
@@ -187,6 +187,7 @@ $tff-input-disabled: #bcbcbc;
 $tff-line-focused-width: 2px;
 $tff-line-disabled-width: 0px;
 $tff-line-dot-width: 1px;
+$tff-line-dot-size: 3px;
 $tff-line-normal: #c7c7c7;
 $tff-line-focused: #EE008B;
 $tff-line-disabled: #bcbcbc;