Skip to content

Commit

Permalink
fix(material-experimental/mdc-slide-toggle): increase contrast in hig…
Browse files Browse the repository at this point in the history
…h contrast mode

Increases the contrast of disabled slide toggles in high contrast mode make them easier to see.

Fixes angular#22941.
  • Loading branch information
crisbeto committed Jun 10, 2021
1 parent 76186ad commit 92d907f
Showing 1 changed file with 10 additions and 7 deletions.
17 changes: 10 additions & 7 deletions src/material-experimental/mdc-slide-toggle/slide-toggle.scss
Expand Up @@ -83,12 +83,15 @@


@include a11y.high-contrast(active, off) {
.mat-mdc-slide-toggle-focused {
.mdc-switch__track {
// Usually 1px would be enough, but MDC reduces the opacity on the
// element so we need to make this a bit more prominent.
outline: solid 2px;
outline-offset: private.private-div(mdc-switch.$track-height, 2);
}
// Bump the opacity on the disable slide toggle to make it easier to see.
.mat-mdc-slide-toggle .mdc-switch--disabled {
opacity: 0.75;
}

.mat-mdc-slide-toggle-focused .mdc-switch__track {
// Usually 1px would be enough, but MDC reduces the opacity on the
// element so we need to make this a bit more prominent.
outline: solid 2px;
outline-offset: private.private-div(mdc-switch.$track-height, 2);
}
}

0 comments on commit 92d907f

Please sign in to comment.