make input underline thick when in error state.

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

Hide file tree

Showing 2 changed files with 9 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,15 @@ $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: top center;
+    transform: scale(0, 0.5);
+    transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
+
+    .mat-focused &,
+    .mat-input-invalid & {
+      transform: scale(1, 1);
+      transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+                  background-color $swift-ease-out-duration $swift-ease-out-timing-function;
     }
   }
 }