Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,20 @@
$focus-indicator-width: 3px;
$focus-indicator-style: dashed;

// The outline of the `fill` appearance is achieved through a background color
// which won't be visible in high contrast mode. Add an outline to replace it.
.mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
@include a11y.high-contrast(active, off) {
outline: solid 1px;
.mat-form-field-appearance-fill {
// The outline of the `fill` appearance is achieved through a background color
// which won't be visible in high contrast mode. Add an outline to replace it.
.mat-mdc-text-field-wrapper {
@include a11y.high-contrast(active, off) {
outline: solid 1px;
}
}

// Use GreyText for the disabled outline color which will account for the user's configuration.
&.mat-form-field-disabled .mat-mdc-text-field-wrapper {
@include a11y.high-contrast(active, off) {
outline-color: GrayText;
}
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/material-experimental/mdc-select/select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ $scale: 0.75 !default;
// On Chromium browsers the `currentColor` blends in with the
// background for SVGs so we have to fall back to `CanvasText`.
fill: CanvasText;

.mat-mdc-select-disabled & {
fill: GrayText;
}
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions src/material/form-field/form-field-fill.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ $fill-subscript-padding: math.div($fill-side-padding, $fill-subscript-font-scale
}
}

&.mat-form-field-disabled .mat-form-field-flex {
@include a11y.high-contrast(active, off) {
outline-color: GrayText;
}
}

&.mat-focused .mat-form-field-flex {
@include a11y.high-contrast(active, off) {
outline: dashed 3px;
Expand Down
1 change: 1 addition & 0 deletions src/material/form-field/form-field-legacy.scss
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ $legacy-underline-height: 1px !default;
@include a11y.high-contrast(active, off) {
border-top-style: dotted;
border-top-width: 2px;
border-top-color: GrayText;
}
}

Expand Down
6 changes: 6 additions & 0 deletions src/material/form-field/form-field-outline.scss
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,12 @@ $outline-subscript-padding: math.div($outline-side-padding, $outline-subscript-f
padding: 0 $outline-subscript-padding;
}

&.mat-form-field-disabled .mat-form-field-outline {
@include a11y.high-contrast(active, off) {
color: GrayText;
}
}

&._mat-animation-noopable {
&:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline,
.mat-form-field-outline,
Expand Down
6 changes: 6 additions & 0 deletions src/material/form-field/form-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@ $default-infix-width: 180px !default;
left: auto;
right: 0;
}

.mat-form-field-disabled & {
@include a11y.high-contrast(active, off) {
color: GrayText;
}
}
}

.mat-form-field-empty.mat-form-field-label,
Expand Down