80 lines
2.2 KiB
Sass
80 lines
2.2 KiB
Sass
div.m3.m3-segmented-buttons
|
|
padding: 0
|
|
height: 40px
|
|
display: flex
|
|
border-radius: 20px
|
|
box-sizing: border-box
|
|
|
|
& > button.m3.m3-button-segment
|
|
width: auto
|
|
height: 40px
|
|
padding: 10px
|
|
min-width: 108px
|
|
border-radius: 0
|
|
margin: 0 -0.5px
|
|
display: inline-flex
|
|
background-color: transparent
|
|
border: 1px solid var(--md-sys-color-outline)
|
|
|
|
&:first-child
|
|
border-radius: 20px 0 0 20px
|
|
|
|
&:last-child
|
|
border-radius: 0 20px 20px 0
|
|
|
|
& > span
|
|
color: var(--md-sys-color-on-surface)
|
|
|
|
& > svg
|
|
opacity: 0
|
|
|
|
& > text
|
|
fill: var(--md-sys-color-on-surface)
|
|
|
|
&:not(.selected)
|
|
& > svg
|
|
display: none
|
|
|
|
&::after, &::before
|
|
content: ''
|
|
width: 6px
|
|
position: relative
|
|
|
|
&:disabled
|
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
|
|
|
|
& > *
|
|
opacity: 38%
|
|
|
|
&.selected
|
|
background-color: var(--md-sys-color-secondary-container)
|
|
|
|
& > svg
|
|
opacity: 1
|
|
|
|
& > span
|
|
color: var(--md-sys-color-on-secondary-container)
|
|
|
|
& > text
|
|
fill: var(--md-sys-color-on-secondary-container)
|
|
|
|
& > span.m3.m3-button-segment-state-layer
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
|
|
& > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
|
|
transition: .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
&:hover
|
|
& > span.m3.m3-button-segment-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
|
|
|
&:is(&:active, &:focus-visible)
|
|
& > span.m3.m3-button-segment-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
|
|
|
&:active
|
|
& > span.m3.m3-ripple-domain > span.m3.ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|