Skip to content

Commit c39a782

Browse files
committed
fix(button-toggle): unable to override elevation and high contrast styling applied incorrectly
* 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.
1 parent a58c725 commit c39a782

File tree

2 files changed

+10
-9
lines changed

2 files changed

+10
-9
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@
1010

1111
.mat-button-toggle-standalone,
1212
.mat-button-toggle-group {
13-
@include _mat-theme-elevation(2, $theme);
13+
@include _mat-theme-overridable-elevation(2, $theme);
1414
}
1515

1616
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
1717
.mat-button-toggle-group-appearance-standard {
18-
box-shadow: none;
18+
&:not([class*='mat-elevation-z']) {
19+
box-shadow: none;
20+
}
1921
}
2022

2123
.mat-button-toggle {

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -122,13 +122,12 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
122122
opacity: 0;
123123
@include mat-fill;
124124

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

0 commit comments

Comments
 (0)