add variants section to input demo

Author: mmalerba

src/demo-app/input/input-demo.html

@@ -526,3 +526,50 @@ <h3>&lt;textarea&gt; with ngModel</h3>
     </label>
   </mat-card-content>
 </mat-card>
+
+<mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary">Variants</mat-toolbar>
+  <mat-card-content>
+    <mat-form-field variant="legacy">
+      <input matInput placeholder="example" [(ngModel)]="legacyVariant" required>
+      <mat-error>This field is required</mat-error>
+      <mat-hint>Please type something here</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field variant="standard">
+      <input matInput placeholder="example" [(ngModel)]="standardVariant" required>
+      <mat-error>This field is required</mat-error>
+      <mat-hint>Please type something here</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field variant="box">
+      <input matInput placeholder="example" [(ngModel)]="boxVariant" required>
+      <mat-error>This field is required</mat-error>
+      <mat-hint>Please type something here</mat-hint>
+    </mat-form-field>
+
+    <table style="width: 100%" cellspacing="0"><tr>
+      <td>
+        <mat-form-field variant="legacy" style="width: 100%">
+          <input matInput placeholder="example" [(ngModel)]="legacyVariant" required>
+          <mat-error>This field is required</mat-error>
+          <mat-hint>Please type something here</mat-hint>
+        </mat-form-field>
+      </td>
+      <td>
+        <mat-form-field variant="standard" style="width: 100%">
+          <input matInput placeholder="example" [(ngModel)]="standardVariant" required>
+          <mat-error>This field is required</mat-error>
+          <mat-hint>Please type something here</mat-hint>
+        </mat-form-field>
+      </td>
+      <td>
+        <mat-form-field variant="box" style="width: 100%">
+          <input matInput placeholder="example" [(ngModel)]="boxVariant" required>
+          <mat-error>This field is required</mat-error>
+          <mat-hint>Please type something here</mat-hint>
+        </mat-form-field>
+      </td>
+    </tr></table>
+  </mat-card-content>
+</mat-card>

src/demo-app/input/input-demo.ts

@@ -52,6 +52,10 @@ export class InputDemo {
   delayedFormControl = new FormControl('');
   model = 'hello';
 
+  legacyVariant: string;
+  standardVariant: string;
+  boxVariant: string;
+
   constructor() {
     setTimeout(() => this.delayedFormControl.setValue('hello'), 100);
   }

src/lib/form-field/form-field-box.scss

@@ -53,6 +53,16 @@ $mat-form-field-box-subscript-padding:
     height: $mat-form-field-box-underline-height;
   }
 
+  // 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.
+  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
+    .mat-form-field-ripple {
+      opacity: 1;
+      transform: none;
+      transition: opacity 600ms $swift-ease-out-timing-function;
+    }
+  }
+
   .mat-form-field-subscript-wrapper {
     padding: 0 $mat-form-field-box-subscript-padding;
   }

src/lib/form-field/form-field-standard.scss

@@ -37,7 +37,7 @@ $mat-form-field-standard-padding-top: .5em !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-form-field-flex:hover ~ .mat-form-field-underline {
+  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
     .mat-form-field-ripple {
       opacity: 1;
       transform: none;