135 lines
5.4 KiB
CSS
135 lines
5.4 KiB
CSS
button:not(.m3-fab, .m3-icon-button) {
|
|
width: min-content;
|
|
height: min-content;
|
|
box-sizing: border-box;
|
|
font-size: var(--md-sys-typescale-label-large-font-size);
|
|
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
|
line-height: var(--md-sys-typescale-label-large-line-height);
|
|
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).m3 {
|
|
gap: 8px;
|
|
border: none;
|
|
contain: content;
|
|
text-align: center;
|
|
padding: 10px 24px;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
display: inline-flex;
|
|
border-radius: 100px;
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).filled {
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-on-primary);
|
|
color: var(--md-sys-color-on-primary);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).outlined {
|
|
outline-offset: -1px;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: var(--md-sys-color-primary);
|
|
outline: 1px solid var(--md-sys-color-outline) !important;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).text {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
padding: 10px 12px !important;
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).elevated {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
color: var(--md-sys-color-primary);
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).tonal {
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button)::before {
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
content: "";
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
|
box-shadow: none !important;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):active.elevated {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
|
|
border-color: var(--md-sys-color-primary) !important;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):hover.elevated {
|
|
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):disabled {
|
|
pointer-events: none;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
|
|
box-shadow: none;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
|
|
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
|
}
|
|
|
|
/*# sourceMappingURL=button.css.map */
|