Skip to content

Commit a8fde4a

Browse files
crisbetojelbourn
authored andcommitted
fix(material-experimental/mdc-button): some button variants not visible in high contrast mode (#18036)
Fixes the MDC-based fab, mini fab and icon button variants not being visible in high contrast mode, because they don't have a border or an outline.
1 parent 6ef58a2 commit a8fde4a

File tree

1 file changed

+13
-8
lines changed

1 file changed

+13
-8
lines changed

src/material-experimental/mdc-button/button.scss

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,22 @@
99

1010
.mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
1111
@include mdc-button-density(0, $mat-base-styles-query);
12+
@include _mat-button-interactive();
13+
@include _mat-button-disabled();
14+
}
1215

13-
// Add an outline to make buttons more visible in high contrast mode. Stroked buttons
14-
// don't need a special look in high-contrast mode, because those already have an outline.
16+
// Add an outline to make buttons more visible in high contrast mode. Stroked buttons
17+
// don't need a special look in high-contrast mode, because those already have an outline.
18+
.mat-mdc-button:not(.mdc-button--outlined),
19+
.mat-mdc-unelevated-button:not(.mdc-button--outlined),
20+
.mat-mdc-raised-button:not(.mdc-button--outlined),
21+
.mat-mdc-outlined-button:not(.mdc-button--outlined),
22+
.mat-mdc-fab,
23+
.mat-mdc-mini-fab,
24+
.mat-mdc-icon-button {
1525
@include cdk-high-contrast {
16-
&:not(.mdc-button--outlined) {
17-
outline: solid 1px;
18-
}
26+
outline: solid 1px;
1927
}
20-
21-
@include _mat-button-interactive();
22-
@include _mat-button-disabled();
2328
}
2429

2530
// Since the stroked button has has an actual border that reduces the available space for

0 commit comments

Comments
 (0)