135 lines
6.6 KiB
CSS
135 lines
6.6 KiB
CSS
button.m3.m3-icon-button {
|
|
transition: background-color, box-shadow, 0.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;
|
|
}
|
|
button.m3.m3-icon-button::before {
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
button.m3.m3-icon-button > span.m3-icon {
|
|
z-index: 25;
|
|
font-size: 2em;
|
|
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
|
|
}
|
|
button.m3.m3-icon-button.default {
|
|
fill: var(--md-sys-color-on-surface-variant);
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
button.m3.m3-icon-button.default.selected.toggled {
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-icon-button.filled {
|
|
fill: var(--md-sys-color-on-primary);
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-icon-button.filled.toggled {
|
|
fill: var(--md-sys-color-primary);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
button.m3.m3-icon-button.filled.selected.toggled {
|
|
fill: var(--md-sys-color-on-primary);
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-icon-button.tonal.toggled {
|
|
fill: var(--md-sys-color-on-surface-variant);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
|
fill: var(--md-sys-color-on-secondary-container);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
}
|
|
button.m3.m3-icon-button: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);
|
|
}
|
|
button.m3.m3-icon-button.outlined {
|
|
border: 1px solid var(--md-sys-color-outline);
|
|
fill: var(--md-sys-color-on-surface-variant);
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
button.m3.m3-icon-button.outlined: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: rgba(0, 0, 0, 0);
|
|
}
|
|
button.m3.m3-icon-button.outlined.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);
|
|
}
|
|
button.m3.m3-icon-button.outlined.selected.toggled {
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
|
background-color: var(--md-sys-color-inverse-surface);
|
|
fill: var(--md-sys-color-inverse-on-surface);
|
|
}
|
|
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button: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);
|
|
}
|
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):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);
|
|
}
|
|
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
|
}
|
|
|
|
/*# sourceMappingURL=icon-button.css.map */
|