feat(input): add invalid state styling (#3114)

Author: mmalerba

src/lib/input/_input-theme.scss

@@ -25,7 +25,7 @@
 
     // :focus is applied to the input, but we apply mat-focused to the other elements
     // that need to listen to it.
-    &.mat-focused {
+    .mat-focused & {
       color: $input-floating-placeholder-color;
 
       &.mat-accent {
@@ -43,7 +43,7 @@
 
   // See mat-input-placeholder-floating mixin in input.scss
   input.mat-input-element:-webkit-autofill + .mat-input-placeholder,
-  .mat-input-placeholder.mat-float.mat-focused {
+  .mat-focused .mat-input-placeholder.mat-float {
     .mat-placeholder-required {
       color: $input-required-placeholder-color;
     }
@@ -63,4 +63,15 @@
       }
     }
   }
+
+  .mat-input-container.ng-invalid.ng-touched:not(.mat-focused) {
+    .mat-input-placeholder,
+    .mat-placeholder-required {
+      color: $input-underline-color-warn;
+    }
+
+    .mat-input-underline {
+      border-color: $input-underline-color-warn;
+    }
+  }
 }

src/lib/input/input-container.html

@@ -12,7 +12,6 @@
         <label class="mat-input-placeholder"
                [attr.for]="_mdInputChild.id"
                [class.mat-empty]="_mdInputChild.empty && !_shouldAlwaysFloat"
-               [class.mat-focused]="_mdInputChild.focused"
                [class.mat-float]="_canPlaceholderFloat"
                [class.mat-accent]="dividerColor == 'accent'"
                [class.mat-warn]="dividerColor == 'warn'"
@@ -33,7 +32,6 @@
   <div class="mat-input-underline"
        [class.mat-disabled]="_mdInputChild.disabled">
     <span class="mat-input-ripple"
-          [class.mat-focused]="_mdInputChild.focused"
           [class.mat-accent]="dividerColor == 'accent'"
           [class.mat-warn]="dividerColor == 'warn'"></span>
   </div>

src/lib/input/input-container.scss

@@ -149,7 +149,7 @@ $mat-input-underline-disabled-background-image:
   }
 
   // Show the placeholder above the input when it's not empty, or focused.
-  &.mat-float:not(.mat-empty), &.mat-float.mat-focused {
+  &.mat-float:not(.mat-empty), .mat-focused &.mat-float {
     @include mat-input-placeholder-floating;
   }
 
@@ -207,7 +207,7 @@ $mat-input-underline-disabled-background-image:
     transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
                 opacity $swift-ease-out-duration $swift-ease-out-timing-function;
 
-    &.mat-focused {
+    .mat-focused & {
       opacity: 1;
       transform: scaleY(1);
     }

src/lib/input/input-container.ts

@@ -235,9 +235,10 @@ export class MdInputDirective {
   templateUrl: 'input-container.html',
   styleUrls: ['input-container.css'],
   host: {
-    '[class.mat-input-container]': 'true',
     // Remove align attribute to prevent it from interfering with layout.
     '[attr.align]': 'null',
+    '[class.mat-input-container]': 'true',
+    '[class.mat-focused]': '_mdInputChild.focused',
     '[class.ng-untouched]': '_shouldForward("untouched")',
     '[class.ng-touched]': '_shouldForward("touched")',
     '[class.ng-pristine]': '_shouldForward("pristine")',