Skip to content

Commit 01f4386

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 8008218 commit 01f4386

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
@@ -15,12 +15,14 @@
1515

1616
.mat-button-toggle-standalone,
1717
.mat-button-toggle-group {
18-
@include _mat-theme-elevation(2, $config);
18+
@include _mat-theme-overridable-elevation(2, $config);
1919
}
2020

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

2628
.mat-button-toggle {

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

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

123-
.mat-button-toggle-checked & {
124-
border-bottom: solid $mat-button-toggle-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 cdk-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 cdk-high-contrast(active, off) {
127+
.mat-button-toggle-checked & {
128+
border-bottom: solid $mat-button-toggle-legacy-height;
130129
opacity: 0.5;
131130
height: 0;
132131
}

0 commit comments

Comments
 (0)