make input underline thick when in error state.

also add underline ripple effect from the mocks
angular · May 12, 2017 · 2ad6057 · 2ad6057
1 parent 123d7ec
commit 2ad6057
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
@@ -74,10 +74,6 @@
       color: $input-underline-color-warn;
     }
 
-    .mat-input-underline {
-      border-color: $input-underline-color-warn;
-    }
-
     .mat-input-ripple {
       background-color: $input-underline-color-warn;
     }

diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
@@ -217,12 +217,17 @@ $mat-input-underline-disabled-background-image:
     z-index: 1;
     top: -1px;
     width: 100%;
-    transform-origin: top;
-    opacity: 0;
-    transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
-
-    .mat-focused & {
-      opacity: 1;
+    transform-origin: 50%;
+    transform: scaleX(0.5);
+    visibility: hidden;
+    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
+
+    .mat-focused &,
+    .mat-input-invalid & {
+      visibility: visible;
+      transform: scaleX(1);
+      transition: transform 150ms linear,
+                  background-color $swift-ease-in-duration $swift-ease-in-timing-function;
     }
   }
 }