From 2ad60571be6da2c4edcfd6f89e8a12a99c7be0b8 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 12 May 2017 10:43:25 -0700
Subject: [PATCH] make input underline thick when in error state.

also add underline ripple effect from the mocks
---
 src/lib/input/_input-theme.scss    |  4 ----
 src/lib/input/input-container.scss | 17 +++++++++++------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
index e57be1583fb0..bade74950614 100644
--- 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
index 9437d7004478..b365bb600a29 100644
--- 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;
     }
   }
 }