mirror of
https://github.com/material-components/material-web.git
synced 2026-01-09 07:21:09 +08:00
chore(radio): simplify hcm styles
PiperOrigin-RevId: 569317421
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
edb2eb7207
commit
50037a1338
@ -33,153 +33,168 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-radio-values();
|
||||
|
||||
:host {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: var(--md-radio-#{$token}, #{$value});
|
||||
@layer {
|
||||
:host {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: var(--md-radio-#{$token}, #{$value});
|
||||
}
|
||||
|
||||
@include ripple.theme(
|
||||
(
|
||||
hover-color: var(--_hover-state-layer-color),
|
||||
hover-opacity: var(--_hover-state-layer-opacity),
|
||||
pressed-color: var(--_pressed-state-layer-color),
|
||||
pressed-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
|
||||
display: inline-flex;
|
||||
height: var(--_icon-size);
|
||||
outline: none;
|
||||
position: relative;
|
||||
vertical-align: top; // Fix extra space when placed inside display: block
|
||||
width: var(--_icon-size);
|
||||
// Remove highlight color for mobile Safari
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@include ripple.theme(
|
||||
(
|
||||
hover-color: var(--_hover-state-layer-color),
|
||||
hover-opacity: var(--_hover-state-layer-opacity),
|
||||
pressed-color: var(--_pressed-state-layer-color),
|
||||
pressed-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
|
||||
display: inline-flex;
|
||||
height: var(--_icon-size);
|
||||
outline: none;
|
||||
position: relative;
|
||||
vertical-align: top; // Fix extra space when placed inside display: block
|
||||
width: var(--_icon-size);
|
||||
// Remove highlight color for mobile Safari
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:host([touch-target='wrapper']) {
|
||||
margin: max(0px, ((48px - var(--_icon-size)) / 2));
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
md-focus-ring {
|
||||
height: 44px;
|
||||
inset: unset;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.checked {
|
||||
@include ripple.theme(
|
||||
(
|
||||
hover-color: var(--_selected-hover-state-layer-color),
|
||||
hover-opacity: var(--_selected-hover-state-layer-opacity),
|
||||
pressed-color: var(--_selected-pressed-state-layer-color),
|
||||
pressed-opacity: var(--_selected-pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// <input> is also the touch target
|
||||
input {
|
||||
appearance: none;
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
:host([touch-target='none']) input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
border-radius: 50%;
|
||||
height: var(--_state-layer-size);
|
||||
inset: unset;
|
||||
width: var(--_state-layer-size);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--_icon-color);
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.outer.circle {
|
||||
// Outline color enter/exit transition
|
||||
transition: fill 50ms linear;
|
||||
}
|
||||
|
||||
.inner.circle {
|
||||
opacity: 0;
|
||||
transform-origin: center;
|
||||
transition: opacity 50ms linear;
|
||||
}
|
||||
|
||||
.checked .icon {
|
||||
fill: var(--_selected-icon-color);
|
||||
}
|
||||
|
||||
.checked .inner.circle {
|
||||
animation: inner-circle-grow 300ms
|
||||
map.get($_md-sys-motion, easing-emphasized-decelerate);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes inner-circle-grow {
|
||||
from {
|
||||
transform: scale(0);
|
||||
:host([touch-target='wrapper']) {
|
||||
margin: max(0px, ((48px - var(--_icon-size)) / 2));
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
md-focus-ring {
|
||||
height: 44px;
|
||||
inset: unset;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.checked {
|
||||
@include ripple.theme(
|
||||
(
|
||||
hover-color: var(--_selected-hover-state-layer-color),
|
||||
hover-opacity: var(--_selected-hover-state-layer-opacity),
|
||||
pressed-color: var(--_selected-pressed-state-layer-color),
|
||||
pressed-opacity: var(--_selected-pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// <input> is also the touch target
|
||||
input {
|
||||
appearance: none;
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
:host([touch-target='none']) input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
border-radius: 50%;
|
||||
height: var(--_state-layer-size);
|
||||
inset: unset;
|
||||
width: var(--_state-layer-size);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--_icon-color);
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.outer.circle {
|
||||
// Outline color enter/exit transition
|
||||
transition: fill 50ms linear;
|
||||
}
|
||||
|
||||
.inner.circle {
|
||||
opacity: 0;
|
||||
transform-origin: center;
|
||||
transition: opacity 50ms linear;
|
||||
}
|
||||
|
||||
.checked .icon {
|
||||
fill: var(--_selected-icon-color);
|
||||
}
|
||||
|
||||
.checked .inner.circle {
|
||||
animation: inner-circle-grow 300ms
|
||||
map.get($_md-sys-motion, easing-emphasized-decelerate);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes inner-circle-grow {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Don't animate when disabled
|
||||
:host([disabled]) .circle {
|
||||
animation-duration: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
:host(:hover) .icon {
|
||||
fill: var(--_hover-icon-color);
|
||||
}
|
||||
|
||||
:host(:focus-within) .icon {
|
||||
fill: var(--_focus-icon-color);
|
||||
}
|
||||
|
||||
:host(:active) .icon {
|
||||
fill: var(--_pressed-icon-color);
|
||||
}
|
||||
|
||||
:host([disabled]) .icon {
|
||||
fill: var(--_disabled-unselected-icon-color);
|
||||
opacity: var(--_disabled-unselected-icon-opacity);
|
||||
}
|
||||
|
||||
:host(:hover) .checked .icon {
|
||||
fill: var(--_selected-hover-icon-color);
|
||||
}
|
||||
|
||||
:host(:focus-within) .checked .icon {
|
||||
fill: var(--_selected-focus-icon-color);
|
||||
}
|
||||
|
||||
:host(:active) .checked .icon {
|
||||
fill: var(--_selected-pressed-icon-color);
|
||||
}
|
||||
|
||||
:host([disabled]) .checked .icon {
|
||||
fill: var(--_disabled-selected-icon-color);
|
||||
opacity: var(--_disabled-selected-icon-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
// Don't animate when disabled
|
||||
:host([disabled]) .circle {
|
||||
animation-duration: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
@layer hcm {
|
||||
@media (forced-colors: active) {
|
||||
.icon {
|
||||
fill: CanvasText;
|
||||
}
|
||||
|
||||
:host(:hover) .icon {
|
||||
fill: var(--_hover-icon-color);
|
||||
}
|
||||
|
||||
:host(:focus-within) .icon {
|
||||
fill: var(--_focus-icon-color);
|
||||
}
|
||||
|
||||
:host(:active) .icon {
|
||||
fill: var(--_pressed-icon-color);
|
||||
}
|
||||
|
||||
:host([disabled]) .icon {
|
||||
fill: var(--_disabled-unselected-icon-color);
|
||||
opacity: var(--_disabled-unselected-icon-opacity);
|
||||
}
|
||||
|
||||
:host(:hover) .checked .icon {
|
||||
fill: var(--_selected-hover-icon-color);
|
||||
}
|
||||
|
||||
:host(:focus-within) .checked .icon {
|
||||
fill: var(--_selected-focus-icon-color);
|
||||
}
|
||||
|
||||
:host(:active) .checked .icon {
|
||||
fill: var(--_selected-pressed-icon-color);
|
||||
}
|
||||
|
||||
:host([disabled]) .checked .icon {
|
||||
fill: var(--_disabled-selected-icon-color);
|
||||
opacity: var(--_disabled-selected-icon-opacity);
|
||||
:host([disabled]) .icon {
|
||||
fill: GrayText;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
//
|
||||
// Copyright 2023 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use './radio';
|
||||
// go/keep-sorted end
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:host {
|
||||
@include radio.theme(
|
||||
(
|
||||
disabled-selected-icon-color: GrayText,
|
||||
disabled-selected-icon-opacity: 1,
|
||||
disabled-unselected-icon-color: GrayText,
|
||||
disabled-unselected-icon-opacity: 1,
|
||||
selected-icon-color: CanvasText,
|
||||
selected-hover-icon-color: CanvasText,
|
||||
selected-focus-icon-color: CanvasText,
|
||||
selected-pressed-icon-color: CanvasText,
|
||||
icon-color: CanvasText,
|
||||
hover-icon-color: CanvasText,
|
||||
focus-icon-color: CanvasText,
|
||||
pressed-icon-color: CanvasText,
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,6 @@
|
||||
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {styles as forcedColorsStyles} from './internal/forced-colors-styles.css.js';
|
||||
import {Radio} from './internal/radio.js';
|
||||
import {styles} from './internal/radio-styles.css.js';
|
||||
|
||||
@ -34,5 +33,5 @@ declare global {
|
||||
*/
|
||||
@customElement('md-radio')
|
||||
export class MdRadio extends Radio {
|
||||
static override styles = [styles, forcedColorsStyles];
|
||||
static override styles = [styles];
|
||||
}
|
||||
|
||||
@ -96,7 +96,7 @@ export function transformPseudoClasses(
|
||||
function visitRule(
|
||||
rule: CSSRule, stylesheet: CSSStyleSheet|CSSGroupingRule, index: number,
|
||||
pseudoClasses: string[]) {
|
||||
if (rule instanceof CSSMediaRule || rule instanceof CSSSupportsRule) {
|
||||
if (rule instanceof CSSGroupingRule) {
|
||||
for (let i = rule.cssRules.length - 1; i >= 0; i--) {
|
||||
visitRule(rule.cssRules[i], rule, i, pseudoClasses);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user