fix(form-field,select): handle form field controls inside toolbar (#10627)

This commit is contained in:
Kristiyan Kostadinov
2018-05-01 17:35:51 -04:00
committed by Joey Perrott
parent 54c0b001d3
commit 1a3993e056
2 changed files with 48 additions and 0 deletions
+26
View File
@@ -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="">
+22
View File
@@ -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;
}
}