@universal-material/web
Version:
Material web components
229 lines (201 loc) • 10.5 kB
JavaScript
import { css } from 'lit';
export const styles = css `
:host {
--u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);
--u-common-button-font-size: var(--u-label-large-font-size, .875rem);
--u-common-button-font-weight: var(--u-font-weight-medium, 500);
--_common-button-padding: var(--u-common-button-padding, 16px);
--_extra-small-font-size: var(--u-common-button-extra-small-font-size, .875rem);
--_small-font-size: var(--u-common-button-small-font-size, .875rem);
--_medium-font-size: var(--u-common-button-medium-font-size, 1rem);
--_large-font-size: var(--u-common-button-large-font-size, 1.5rem);
--_extra-large-font-size: var(--u-common-button-extra-large-font-size, 2rem);
--_extra-small-font-weight: var(--u-common-button-extra-small-font-weight, var(--u-font-weight-medium, 500));
--_small-font-weight: var(--u-common-button-small-font-weight, var(--u-font-weight-medium, 500));
--_medium-font-weight: var(--u-common-button-medium-font-weight, var(--u-font-weight-medium, 500));
--_large-font-weight: var(--u-common-button-large-font-weight, var(--u-font-weight-regular, 400));
--_extra-large-font-weight: var(--u-common-button-extra-large-font-weight, var(--u-font-weight-regular, 400));
--_extra-small-size: var(--u-common-button-extra-small-height, 32px);
--_small-size: var(--u-common-button-small-height, 40px);
--_medium-size: var(--u-common-button-medium-height, 56px);
--_large-size: var(--u-common-button-large-height, 96px);
--_extra-large-size: var(--u-common-button-extra-large-height, 136px);
--_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);
--_small-icon-size: var(--u-icon-button-small-icon-size, 1.25rem);
--_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);
--_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);
--_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);
--_extra-small-icon-margin: var(--u-icon-button-extra-small-icon-margin, 8px);
--_small-icon-margin: var(--u-icon-button-small-icon-margin, 8px);
--_medium-icon-margin: var(--u-icon-button-medium-icon-margin, 8px);
--_large-icon-margin: var(--u-icon-button-large-icon-margin, 12px);
--_extra-large-icon-margin: var(--u-icon-button-extra-large-icon-margin, 16px);
--_extra-small-padding: var(--u-common-button-extra-small-padding, 12px);
--_small-padding: var(--u-common-button-small-padding, 16px);
--_medium-padding: var(--u-common-button-medium-padding, 24px);
--_large-padding: var(--u-common-button-large-padding, 48px);
--_extra-large-padding: var(--u-common-button-extra-large-padding, 64px);
--_extra-small-square-shape-corner: var(--u-common-button-extra-small-square-shape-corner, 12px);
--_small-square-shape-corner: var(--u-common-button-small-square-shape-corner, 12px);
--_medium-square-shape-corner: var(--u-common-button-medium-square-shape-corner, 16px);
--_large-square-shape-corner: var(--u-common-button-large-square-shape-corner, 28px);
--_extra-large-square-shape-corner: var(--u-common-button-extra-large-square-shape-corner, 28px);
--_extra-small-pressed-shape-corner: var(--u-common-button-extra-small-pressed-shape-corner, 8px);
--_small-pressed-shape-corner: var(--u-common-button-small-pressed-shape-corner, 8px);
--_medium-pressed-shape-corner: var(--u-common-button-medium-pressed-shape-corner, 12px);
--_large-pressed-shape-corner: var(--u-common-button-large-pressed-shape-corner, 16px);
--_extra-large-pressed-shape-corner: var(--u-common-button-extra-large-pressed-shape-corner, 16px);
--_font-size: var(--_small-font-size);
--_font-weight: var(--_small-font-weight);
--_padding: var(--_small-padding);
--_icon-margin: var(--_small-icon-margin);
--_round-shape-corner: var(--u-common-button-round-shape-corner, calc(var(--_size) / 2));
font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-size: var(--_font-size);
font-weight: var(--_font-weight);
padding-inline: var(--_padding);
box-sizing: border-box;
}
:host([size=extra-small]) {
--_font-size: var(--_extra-small-font-size);
--_font-weight: var(--_extra-small-font-weight);
--_padding: var(--_extra-small-padding);
--_icon-margin: var(--_extra-small-icon-margin);
}
:host([size=medium]) {
--_font-size: var(--_medium-font-size);
--_font-weight: var(--_medium-font-weight);
--_padding: var(--_medium-padding);
--_icon-margin: var(--_medium-icon-margin);
}
:host([size=large]) {
--_font-size: var(--_large-font-size);
--_font-weight: var(--_large-font-weight);
--_padding: var(--_large-padding);
--_icon-margin: var(--_large-icon-margin);
}
:host([size=extra-large]) {
--_font-size: var(--_extra-large-font-size);
--_font-weight: var(--_extra-large-font-weight);
--_padding: var(--_extra-large-padding);
--_icon-margin: var(--_extra-large-icon-margin);
}
:host([variant=filled][toggle]) {
background-color: var(--u-filled-button-primary-container-unselected-color, var(--u-color-surface-container, rgb(243, 237, 247)));
color: var(--u-filled-button-primary-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
}
:host([variant=filled]:not([toggle])),
:host([variant=filled][selected]),
:host([variant=filled][color=primary]:not([toggle])),
:host([variant=filled][color=primary][selected]) {
background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));
color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
}
:host([variant=filled][color=secondary]:not([toggle])),
:host([variant=filled][color=secondary][selected]) {
background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));
color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));
}
:host([variant=filled][color=tertiary]:not([toggle])),
:host([variant=filled][color=tertiary][selected]) {
background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));
color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));
}
:host([variant=filled][color=error]:not([toggle])),
:host([variant=filled][color=error][selected]) {
background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));
color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));
}
:host([variant=tonal]) {
background-color: var(--u-tonal-button-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
}
:host([variant=tonal][selected]) {
background-color: var(--u-tonal-button-container-selected-color, var(--u-color-secondary, rgb(98, 91, 113)));
color: var(--u-tonal-button-text-selected-color, var(--u-color-on-secondary, rgb(255, 255, 255)));
}
:host([variant=elevated]) {
background-color: var(--u-elevated-button-container-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
color: var(--u-elevated-button-text-color, var(--u-color-primary, rgb(103, 80, 164)));
}
:host([variant=elevated][selected]) {
background-color: var(--u-elevated-button-container-selected-color, var(--u-color-primary, rgb(103, 80, 164)));
color: var(--u-elevated-button-text-selected-color, var(--u-color-on-primary, rgb(255, 255, 255)));
}
@media (hover: hover) {
:host([variant=filled]:hover:not(:focus-within):not(:active)),
:host([variant=tonal]:hover:not(:focus-within):not(:active)) {
--u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);
}
}
:host([variant=text]) {
color: var(--u-text-button-text-color, var(--_color-primary));
}
:host([variant=outlined]) {
color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));
border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));
}
:host([variant=outlined][selected]) {
background-color: var(--u-outlined-button-container-selected-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
color: var(--u-outlined-button-text-selected-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));
}
:host([variant=elevated]) {
--u-elevation-level: var(--u-elevated-button-elevation-level, 1);
color: var(--u-elevated-button-text-color, var(--_color-primary));
}
:host([disabled][variant=outlined]) {
background-color: transparent !important;
border-color: var(--u-outlined-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-button-disabled-border-opacity, 12%), transparent)) !important;
}
@media (hover: hover) {
:host([variant=elevated]:hover) {
--u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);
}
}
:host(:not([has-icon])) .icon-container {
display: none;
}
.content {
gap: var(--_icon-margin);
}
.icon {
font-size: var(--_icon-size);
}
:host([trailing-icon]) .content {
flex-direction: row-reverse;
}
#label {
display: inline-block;
}
.label {
display: inline-block;
inset-inline-start: 0;
transition-duration: calc(var(--_morph-duration) * 0.7);
}
.label-container {
position: relative;
}
.label-container.animate {
transition: width var(--_morph-duration) linear;
}
.label-default {
opacity: 1;
transition-delay: calc(var(--_morph-duration) / 2);
}
.label-selected {
position: absolute;
opacity: 0;
transition-delay: 0ms;
}
:host([selected][has-selection-label]) .label-default {
position: absolute;
opacity: 0;
transition-delay: 0ms;
}
:host([selected][has-selection-label]) .label-selected {
position: static;
opacity: 1;
transition-delay: calc(var(--_morph-duration) / 2);
}
`;
//# sourceMappingURL=button.styles.js.map