Skip to content

Commit

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

Increases the specificity of disable 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 6af32ad
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 6af32ad

Please sign in to comment.