fix(input): thicken underline in error state, add underline animation (#4506)

Author: mmalerba

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;
     }

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;
     }
   }
 }