95 lines
3.0 KiB
Sass
95 lines
3.0 KiB
Sass
div.m3.m3-radio-container
|
|
@include center(inline-flex)
|
|
|
|
width: 20px
|
|
height: 20px
|
|
|
|
& + label.m3.m3-radio-label
|
|
margin-inline: 3px
|
|
|
|
& > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
|
|
z-index: 5
|
|
width: 40px
|
|
height: 40px
|
|
aspect-ratio: 1
|
|
|
|
& > span.m3.m3-radio-state-layer
|
|
border-radius: 50%
|
|
position: absolute
|
|
pointer-events: none
|
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
& > input[type="radio"].m3.m3-radio
|
|
margin: 0
|
|
width: 20px
|
|
height: 20px
|
|
aspect-ratio: 1
|
|
cursor: pointer
|
|
appearance: none
|
|
position: absolute
|
|
|
|
&:not(:disabled)
|
|
&:checked:hover + span.m3.m3-radio-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
|
|
|
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
|
& ~ span.m3-ripple-domain > .m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
|
|
|
|
&:hover
|
|
& + span.m3.m3-radio-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
|
|
|
&:active + span.m3.m3-radio-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
|
& ~ span.m3-ripple-domain > .m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
|
|
|
|
&:disabled
|
|
&:is(:not(:checked), &:checked) ~ svg
|
|
& > circle.m3-radio-outline
|
|
stroke-opacity: 38%
|
|
stroke: var(--md-sys-color-on-surface)
|
|
|
|
&:checked ~ svg > circle.m3-radio-state
|
|
fill-opacity: 38%
|
|
fill: var(--md-sys-color-on-surface)
|
|
|
|
&:not(:checked) ~ svg
|
|
& > circle.m3-radio-outline
|
|
stroke: var(--md-sys-color-on-surface-variant)
|
|
|
|
& > circle.m3-radio-state
|
|
fill-opacity: 0
|
|
fill: var(--md-sys-color-primary)
|
|
|
|
&:checked ~ svg
|
|
& > circle.m3-radio-outline
|
|
stroke: var(--md-sys-color-primary)
|
|
|
|
& > circle.m3-radio-state
|
|
fill-opacity: 1
|
|
fill: var(--md-sys-color-primary)
|
|
|
|
svg
|
|
margin: 0
|
|
width: 20px
|
|
z-index: 10
|
|
border-radius: 50%
|
|
pointer-events: none
|
|
aspect-ratio: inherit
|
|
|
|
& > circle
|
|
transition: fill, stroke, .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
&.m3-radio-outline
|
|
r: 9px
|
|
fill: black
|
|
fill-opacity: 0
|
|
stroke-width: 2px
|
|
stroke: var(--md-sys-color-on-surface-variant)
|
|
|
|
&.m3-radio-state
|
|
r: 5px
|