From 1a3993e0567266350a7bf940c71d628f0b091db5 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 1 May 2018 17:35:51 -0400
Subject: [PATCH] fix(form-field,select): handle form field controls inside
 toolbar (#10627)

---
 src/demo-app/toolbar/toolbar-demo.html | 26 ++++++++++++++++++++++++++
 src/lib/toolbar/_toolbar-theme.scss    | 22 ++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/demo-app/toolbar/toolbar-demo.html
index 3e2ec07f5cd..2311c9569d2 100644
--- a/src/demo-app/toolbar/toolbar-demo.html
+++ b/src/demo-app/toolbar/toolbar-demo.html
@@ -28,6 +28,19 @@
       <span>Primary Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
+      <mat-form-field>
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="legacy">
+        <mat-label>Input</mat-label>
+        <input matInput>
+      </mat-form-field>
+
       <button mat-raised-button>Text</button>
       <button mat-raised-button color="accent">Accent</button>
       <button mat-stroked-button>Stroked</button>
@@ -43,6 +56,19 @@
       <span>Accent Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
+      <mat-form-field>
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="legacy">
+        <mat-label>Input</mat-label>
+        <input matInput>
+      </mat-form-field>
+
       <button mat-button>Text</button>
       <button mat-flat-button>Flat</button>
       <button mat-mini-fab color="">
diff --git a/src/lib/toolbar/_toolbar-theme.scss b/src/lib/toolbar/_toolbar-theme.scss
index 947631b0a29..5afc9f4c901 100644
--- a/src/lib/toolbar/_toolbar-theme.scss
+++ b/src/lib/toolbar/_toolbar-theme.scss
@@ -8,6 +8,26 @@
   color: mat-color($palette, default-contrast);
 }
 
+@mixin _mat-toolbar-form-field-overrides {
+  .mat-form-field-underline,
+  .mat-form-field-ripple,
+  .mat-focused .mat-form-field-ripple {
+    background-color: currentColor;
+  }
+
+  .mat-form-field-label,
+  .mat-focused .mat-form-field-label,
+  .mat-select-value,
+  .mat-select-arrow,
+  .mat-form-field.mat-focused .mat-select-arrow {
+    color: inherit;
+  }
+
+  .mat-input-element {
+    caret-color: currentColor;
+  }
+}
+
 @mixin mat-toolbar-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
@@ -30,6 +50,8 @@
     &.mat-warn {
       @include _mat-toolbar-color($warn);
     }
+
+    @include _mat-toolbar-form-field-overrides;
   }
 }