mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
dfc87f32e8
A lot of the changes are in order to fix filter chips with VoiceOver. With the extra divs and no aria-hidden on ripple/focus ring, VoiceOver got stuck on the first filter chip with linear navigation. Elevated link chips also got their border changed to white instead of yellow in HCM to match Wiz. PiperOrigin-RevId: 559908582
71 lines
1.3 KiB
SCSS
71 lines
1.3 KiB
SCSS
//
|
|
// Copyright 2023 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// go/keep-sorted start
|
|
@use '../../elevation/elevation';
|
|
// go/keep-sorted end
|
|
|
|
@mixin styles() {
|
|
.elevated {
|
|
@include elevation.theme(
|
|
(
|
|
'level': var(--_elevated-container-elevation),
|
|
'shadow-color': var(--_elevated-container-shadow-color),
|
|
)
|
|
);
|
|
}
|
|
|
|
.elevated::before {
|
|
background: var(--_elevated-container-color);
|
|
}
|
|
|
|
.elevated:hover {
|
|
@include elevation.theme(
|
|
(
|
|
'level': var(--_elevated-hover-container-elevation),
|
|
)
|
|
);
|
|
}
|
|
|
|
.elevated:focus-within {
|
|
@include elevation.theme(
|
|
(
|
|
'level': var(--_elevated-focus-container-elevation),
|
|
)
|
|
);
|
|
}
|
|
|
|
.elevated:active {
|
|
@include elevation.theme(
|
|
(
|
|
'level': var(--_elevated-pressed-container-elevation),
|
|
)
|
|
);
|
|
}
|
|
|
|
.elevated.disabled {
|
|
@include elevation.theme(
|
|
(
|
|
'level': var(--_elevated-disabled-container-elevation),
|
|
)
|
|
);
|
|
}
|
|
|
|
.elevated.disabled::before {
|
|
background: var(--_elevated-disabled-container-color);
|
|
opacity: var(--_elevated-disabled-container-opacity);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.elevated md-elevation {
|
|
border: 1px solid CanvasText;
|
|
}
|
|
|
|
.elevated.disabled md-elevation {
|
|
border-color: GrayText;
|
|
}
|
|
}
|
|
}
|