135 lines
5.7 KiB
Sass
135 lines
5.7 KiB
Sass
|
button.m3.m3-icon-button
|
||
|
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||
|
|
contain: content
|
||
|
|
border-radius: 50%
|
||
|
|
position: relative
|
||
|
|
display: inline-flex
|
||
|
|
flex-direction: row
|
||
|
|
justify-content: center
|
||
|
|
align-items: center
|
||
|
|
width: 40px
|
||
|
|
height: 40px
|
||
|
|
border: none
|
||
|
|
padding: 0
|
||
|
|
|
||
|
|
&::before
|
||
|
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||
|
|
content: ""
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
position: absolute
|
||
|
|
|
||
|
|
& > span.m3-icon
|
||
|
|
z-index: 25
|
||
|
|
font-size: 2em
|
||
|
|
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48
|
||
|
|
|
||
|
|
&.default
|
||
|
|
&
|
||
|
|
fill: var(--md-sys-color-on-surface-variant)
|
||
|
|
background-color: #00000000
|
||
|
|
|
||
|
|
&:disabled, &.selected:disabled, &.selected.toggled:disabled
|
||
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
|
||
|
|
background-color: #00000000
|
||
|
|
|
||
|
|
&.selected.toggled
|
||
|
|
fill: var(--md-sys-color-primary)
|
||
|
|
|
||
|
|
&.filled
|
||
|
|
&
|
||
|
|
fill: var(--md-sys-color-on-primary)
|
||
|
|
background-color: var(--md-sys-color-primary)
|
||
|
|
|
||
|
|
&.toggled
|
||
|
|
fill: var(--md-sys-color-primary)
|
||
|
|
background-color: var(--md-sys-color-surface-container-highest)
|
||
|
|
|
||
|
|
&.selected.toggled
|
||
|
|
fill: var(--md-sys-color-on-primary)
|
||
|
|
background-color: var(--md-sys-color-primary)
|
||
|
|
|
||
|
|
&.tonal
|
||
|
|
&.toggled
|
||
|
|
fill: var(--md-sys-color-on-surface-variant)
|
||
|
|
background-color: var(--md-sys-color-surface-container-highest)
|
||
|
|
|
||
|
|
&.selected.toggled, &
|
||
|
|
fill: var(--md-sys-color-on-secondary-container)
|
||
|
|
background-color: var(--md-sys-color-secondary-container)
|
||
|
|
|
||
|
|
&:is(.tonal, .filled, .toggled.selected):disabled
|
||
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||
|
|
|
||
|
|
&.outlined
|
||
|
|
&
|
||
|
|
border: 1px solid var(--md-sys-color-outline)
|
||
|
|
fill: var(--md-sys-color-on-surface-variant)
|
||
|
|
background-color: #00000000
|
||
|
|
|
||
|
|
&:disabled
|
||
|
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
|
||
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
|
||
|
|
background-color: #00000000
|
||
|
|
|
||
|
|
&.toggled.selected:disabled
|
||
|
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent)
|
||
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||
|
|
|
||
|
|
&.selected.toggled
|
||
|
|
border: 1px solid #00000000
|
||
|
|
background-color: var(--md-sys-color-inverse-surface)
|
||
|
|
fill: var(--md-sys-color-inverse-on-surface)
|
||
|
|
|
||
|
|
&.filled:not(:disabled)
|
||
|
|
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||
|
|
&.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||
|
|
|
||
|
|
&:is(.outlined, .default):not(:disabled)
|
||
|
|
& > .m3.m3-ripple-domain > .m3.ripple
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||
|
|
|
||
|
|
&:not(.outlined).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||
|
|
|
||
|
|
&:not(.default).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
|
||
|
|
|
||
|
|
&.tonal:not(:disabled)
|
||
|
|
& > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||
|
|
&.toggled > .m3.m3-ripple-domain > .m3.ripple
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||
|
|
|
||
|
|
&:hover:not(:disabled)
|
||
|
|
&:is(.default, .outlined)::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
|
||
|
|
|
||
|
|
&.filled::before, &.filled.toggled.selected::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
||
|
|
&.filled.toggled::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||
|
|
|
||
|
|
&.tonal::before, &.tonal.toggled.selected::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||
|
|
&.tonal.toggled::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent)
|
||
|
|
|
||
|
|
&:focus-visible:not(:disabled)
|
||
|
|
&:is(.default, .outlined)::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
||
|
|
|
||
|
|
&.filled::before, &.filled.toggled.selected::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||
|
|
&.filled.toggled::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||
|
|
|
||
|
|
&.tonal::before, &.tonal.toggled.selected::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||
|
|
&.tonal.toggled::before
|
||
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|