From 0666207527299758293a9587a5b79212167a9a70 Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Mon, 15 May 2017 14:27:40 -0700
Subject: [PATCH] fix(input): thicken underline in error state, add underline
 animation (#4506)

---
 src/lib/input/_input-theme.scss    |  4 ----
 src/lib/input/input-container.scss | 15 ++++++++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
index e57be1583fb..bade7495061 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 9437d700447..b365bb600a2 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;
+    transform-origin: 50%;
+    transform: scaleX(0.5);
+    visibility: hidden;
+    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
 
-    .mat-focused & {
-      opacity: 1;
+    .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;
     }
   }
 }