142 lines
5.9 KiB
Sass
142 lines
5.9 KiB
Sass
@mixin m3-icon-button-state-colors($opacity)
|
|
&:is(.default, .outlined)::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
|
|
|
|
&.outlined.selected.toggled::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) $opacity, transparent)
|
|
|
|
&.filled::before,
|
|
&.filled.selected.toggled::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) $opacity, transparent)
|
|
|
|
&.filled:not(.selected).toggled::before,
|
|
&.default.selected.toggled::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) $opacity, transparent)
|
|
|
|
&.tonal::before,
|
|
&.tonal.selected.toggled::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) $opacity, transparent)
|
|
|
|
&.tonal.toggled::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) $opacity, transparent)
|
|
|
|
@mixin m3-icon-color-palette($border, $border-opacity, $fill, $fill-opacity, $background, $background-opacity)
|
|
@if $border != none
|
|
@if $border == transparent
|
|
border: 0 solid transparent
|
|
@else
|
|
border: 1px solid color-mix(in srgb, var($border) $border-opacity, transparent)
|
|
|
|
@if $fill != none
|
|
@if $fill == transparent
|
|
fill: $fill
|
|
@else
|
|
fill: color-mix(in srgb, var($fill) $fill-opacity, transparent)
|
|
|
|
@if $background != none
|
|
@if $background == transparent
|
|
background-color: $background
|
|
@else
|
|
background-color: color-mix(in srgb, var($background) $background-opacity, transparent)
|
|
|
|
|
|
button.m3.m3-icon-button
|
|
@include center(inline-flex)
|
|
|
|
padding: 0
|
|
width: 40px
|
|
height: 40px
|
|
border: none
|
|
contain: content
|
|
border-radius: 50%
|
|
position: relative
|
|
flex-direction: row
|
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
|
|
|
&::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: 24px
|
|
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48
|
|
|
|
&.default
|
|
&, &:not(.selected).toggled
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, transparent, 0%)
|
|
|
|
&.selected.toggled
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, transparent, 0%)
|
|
|
|
&:disabled,
|
|
&.selected:disabled,
|
|
&.selected.toggled:disabled
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
|
|
|
|
&.filled
|
|
&
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)
|
|
|
|
&:not(.selected).toggled
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-primary, 100%, --md-sys-color-surface-container-highest, 100%)
|
|
|
|
&.selected.toggled
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-on-primary, 100%, --md-sys-color-primary, 100%)
|
|
|
|
&.tonal
|
|
&:not(.selected).toggled
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface-variant, 100%, --md-sys-color-surface-container-highest, 100%)
|
|
|
|
&.selected.toggled, &
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-on-secondary-container, 100%, --md-sys-color-secondary-container, 100%)
|
|
|
|
&:is(.tonal, .filled, .toggled.selected):disabled
|
|
@include m3-icon-color-palette(none, none, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)
|
|
|
|
&.outlined
|
|
&
|
|
@include m3-icon-color-palette(--md-sys-color-outline, 100%, --md-sys-color-on-surface-variant, 100%, transparent, 0%)
|
|
|
|
&.selected.toggled
|
|
@include m3-icon-color-palette(transparent, 0%, --md-sys-color-inverse-on-surface, 100%, --md-sys-color-inverse-surface, 100%)
|
|
|
|
&:disabled
|
|
@include m3-icon-color-palette(--md-sys-color-outline, 12%, --md-sys-color-on-surface-variant, 38%, transparent, 0%)
|
|
|
|
&.selected.toggled:disabled
|
|
@include m3-icon-color-palette(none, 0%, --md-sys-color-on-surface, 38%, --md-sys-color-on-surface, 12%)
|
|
|
|
&.filled:not(:disabled)
|
|
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
|
|
|
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
|
|
|
&:is(.outlined, .default):not(:disabled)
|
|
& > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
|
|
|
&:not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
|
|
|
&:not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
|
|
|
|
&.tonal:not(:disabled)
|
|
&:is(&.selected.toggled, &) > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
|
|
|
&:is(&.toggled):not(&.toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
|
|
|
|
&:hover:not(:disabled)
|
|
@include m3-icon-button-state-colors(8%)
|
|
|
|
&:is(&:focus-visible:not(:disabled), &:active:not(:disabled, &:has(span.m3.m3-ripple-domain)))
|
|
@include m3-icon-button-state-colors(12%)
|