Skip to content

Commit 9a12eab

Browse files
crisbetoandrewseguin
authored andcommitted
fix(material/button-toggle): unable to override elevation and high contrast styling applied incorrectly (#14722)
* Fixes not being able to override the elevation of a button toggle. Similar to #7909, but makes avoids issues with the new appearance. * Fixes some of the styles that are only intended to be applied in high contrast mode being active all the time. Seems like an issue while rebasing. Fixes #14721. (cherry picked from commit b703cb3)
1 parent 73ebb0b commit 9a12eab

File tree

2 files changed

+10
-9
lines changed

2 files changed

+10
-9
lines changed

src/material/button-toggle/_button-toggle-theme.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@
1414

1515
.mat-button-toggle-standalone,
1616
.mat-button-toggle-group {
17-
@include private.private-theme-elevation(2, $config);
17+
@include private.private-theme-overridable-elevation(2, $config);
1818
}
1919

2020
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
2121
.mat-button-toggle-group-appearance-standard {
22-
box-shadow: none;
22+
&:not([class*='mat-elevation-z']) {
23+
box-shadow: none;
24+
}
2325
}
2426

2527
.mat-button-toggle {

src/material/button-toggle/button-toggle.scss

+6-7
Original file line numberDiff line numberDiff line change
@@ -120,13 +120,12 @@ $legacy-border-radius: 2px !default;
120120
opacity: 0;
121121
@include layout-common.fill;
122122

123-
.mat-button-toggle-checked & {
124-
border-bottom: solid $legacy-height;
125-
126-
// Changing the background color for the selected item won't be visible in high contrast mode.
127-
// We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
128-
// It uses a border, because the browser will render it using a brighter color.
129-
@include a11y.high-contrast(active, off) {
123+
// Changing the background color for the selected item won't be visible in high contrast mode.
124+
// We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
125+
// It uses a border, because the browser will render it using a brighter color.
126+
@include a11y.high-contrast(active, off) {
127+
.mat-button-toggle-checked & {
128+
border-bottom: solid $legacy-height;
130129
opacity: 0.5;
131130
height: 0;
132131
}

0 commit comments

Comments
 (0)