From 50af637b48adf0a546c585b3abc0b87908761c3f Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 12 Jan 2018 19:34:30 +0100
Subject: [PATCH] feat(form-field): implement hover state

[Based on the spec](https://material.io/guidelines/components/text-fields.html#text-fields-states) form fields should have a hover state where the underline gets darkened while the user is hovering and gets replaced by the theme color after the focus the input.
---
 src/lib/form-field/_form-field-theme.scss | 21 ++++++++++++++-------
 src/lib/form-field/form-field.scss        | 15 +++++++++++----
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss
index ee21101bc024..ce0819f96397 100644
--- a/src/lib/form-field/_form-field-theme.scss
+++ b/src/lib/form-field/_form-field-theme.scss
@@ -19,6 +19,7 @@
 
   // Underline colors.
   $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+  $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
   $underline-color-accent: mat-color($accent);
   $underline-color-warn: mat-color($warn);
   $underline-focused-color: mat-color($primary);
@@ -56,21 +57,27 @@
   }
 
   .mat-form-field-ripple {
-    background-color: $underline-focused-color;
+    background-color: $underline-color-base;
+  }
 
-    &.mat-accent {
-      background-color: $underline-color-accent;
-    }
+  .mat-form-field.mat-focused {
+    .mat-form-field-ripple {
+      background-color: $underline-focused-color;
 
-    &.mat-warn {
-      background-color: $underline-color-warn;
+      &.mat-accent {
+        background-color: $underline-color-accent;
+      }
+
+      &.mat-warn {
+        background-color: $underline-color-warn;
+      }
     }
   }
 
   // Styling for the error state of the form field. Note that while the same can be
   // achieved with the ng-* classes, we use this approach in order to ensure that the same
   // logic is used to style the error state and to show the error messages.
-  .mat-form-field-invalid {
+  .mat-form-field.mat-form-field-invalid {
     .mat-form-field-label {
       color: $underline-color-warn;
 
diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss
index 974a46997586..0dbbf8e3d62e 100644
--- a/src/lib/form-field/form-field.scss
+++ b/src/lib/form-field/form-field.scss
@@ -179,10 +179,6 @@ $mat-form-field-default-infix-width: 180px !default;
     opacity: 0;
     transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
 
-    .mat-form-field-invalid:not(.mat-focused) & {
-      height: $mat-form-field-underline-height;
-    }
-
     .mat-focused &,
     .mat-form-field-invalid & {
       visibility: visible;
@@ -195,6 +191,17 @@ $mat-form-field-default-infix-width: 180px !default;
   }
 }
 
+// Note that we need this specific of a selector because we don't want
+// the hover effect to show when the user hovers over the hints.
+.mat-form-field:not(.mat-form-field-disabled) .mat-input-flex:hover ~ .mat-input-underline {
+  .mat-form-field-ripple {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+    transition: opacity 600ms $swift-ease-out-timing-function;
+  }
+}
+
 // Wrapper for the hints and error messages.
 .mat-form-field-subscript-wrapper {
   position: absolute;