Skip to content

Commit 1eb8450

Browse files
crisbetojelbourn
authored andcommitted
fix(input): align caret color with spec (angular#8692)
Based on the text field spec (https://material.io/guidelines/components/text-fields.html), the input caret color should match the underline color.
1 parent b5b39eb commit 1eb8450

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

src/lib/input/_input-theme.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66

77

88
@mixin mat-input-theme($theme) {
9+
$primary: map-get($theme, primary);
10+
$accent: map-get($theme, accent);
11+
$warn: map-get($theme, warn);
912
$foreground: map-get($theme, foreground);
1013
$is-dark-theme: map-get($theme, is-dark);
1114

@@ -14,10 +17,21 @@
1417
}
1518

1619
.mat-input-element {
20+
caret-color: mat-color($primary);
21+
1722
@include input-placeholder {
1823
color: _mat-control-placeholder-color($theme);
1924
}
2025
}
26+
27+
.mat-accent .mat-input-element {
28+
caret-color: mat-color($accent);
29+
}
30+
31+
.mat-warn .mat-input-element,
32+
.mat-form-field-invalid .mat-input-element {
33+
caret-color: mat-color($warn);
34+
}
2135
}
2236

2337
@mixin mat-input-typography($config) {

0 commit comments

Comments
 (0)