92 lines
3.4 KiB
CSS
92 lines
3.4 KiB
CSS
@import "../mixins/m3-mixins.css";
|
|
div.m3.m3-radio {
|
|
width: 20px;
|
|
height: 20px;
|
|
align-items: center;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
}
|
|
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
|
|
z-index: 5;
|
|
}
|
|
div.m3.m3-radio > span.m3.m3-radio-state-layer {
|
|
width: 40px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio {
|
|
margin: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
aspect-ratio: 1;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
position: absolute;
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
|
stroke-opacity: 38%;
|
|
stroke: var(--md-sys-color-on-surface);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
|
|
fill-opacity: 38%;
|
|
fill: var(--md-sys-color-on-surface);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
|
|
stroke: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
|
|
fill-opacity: 0;
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
|
|
stroke: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
|
|
fill-opacity: 1;
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-radio svg {
|
|
margin: 0;
|
|
width: 20px;
|
|
z-index: 10;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
aspect-ratio: inherit;
|
|
}
|
|
div.m3.m3-radio svg > circle {
|
|
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-radio svg > circle.m3-radio-outline {
|
|
r: 9px;
|
|
fill: black;
|
|
fill-opacity: 0;
|
|
stroke-width: 2px;
|
|
stroke: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
div.m3.m3-radio svg > circle.m3-radio-state {
|
|
r: 5px;
|
|
}
|
|
|
|
/*# sourceMappingURL=radio.css.map */
|