@universal-material/web 3.0.11 → 3.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/button/button.styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n --_common-button-height: var(--u-common-button-height, 2.5rem);\n --_common-button-padding: var(--u-common-button-padding, 24px);\n --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n font-family: var(--u-font-family-base, system-ui);\n height: var(--u-common-button-height, 40px);\n font-size: var(--u-common-button-font-size);\n font-weight: var(--u-common-button-font-weight);\n padding-inline: var(--_common-button-padding);\n box-sizing: border-box;\n }\n\n :host([variant=filled]),\n :host([variant=filled][color=primary]) {\n background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=secondary]) {\n background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=tertiary]) {\n background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=error]) {\n background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=elevated]) {\n background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:hover:not(:focus-within):not(:active)),\n :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n }\n }\n :host([variant=outlined]),\n :host([variant=text]),\n :host([variant=elevated]) {\n color: var(--_color-primary);\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline
|
|
1
|
+
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n --_common-button-height: var(--u-common-button-height, 2.5rem);\n --_common-button-padding: var(--u-common-button-padding, 24px);\n --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n font-family: var(--u-font-family-base, system-ui);\n height: var(--u-common-button-height, 40px);\n font-size: var(--u-common-button-font-size);\n font-weight: var(--u-common-button-font-weight);\n padding-inline: var(--_common-button-padding);\n box-sizing: border-box;\n }\n\n :host([variant=filled]),\n :host([variant=filled][color=primary]) {\n background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=secondary]) {\n background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=tertiary]) {\n background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=error]) {\n background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=elevated]) {\n background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:hover:not(:focus-within):not(:active)),\n :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n }\n }\n :host([variant=outlined]),\n :host([variant=text]),\n :host([variant=elevated]) {\n color: var(--_color-primary);\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n }\n\n :host([variant=elevated]) {\n --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host([variant=elevated]:hover) {\n --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n }\n }\n :host([has-icon]) {\n padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n }\n\n :host([has-icon][trailing-icon]) {\n padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n }\n\n ::slotted([slot=icon]) {\n display: inline-block;\n width: var(--u-common-button-icon-size, 1.125rem);\n height: var(--u-common-button-icon-size, 1.125rem);\n margin-inline-end: 8px;\n font-size: var(--u-common-button-icon-size, 1.125rem);\n line-height: var(--u-common-button-icon-size, 1.125rem);\n }\n\n :host([trailing-icon]) ::slotted([slot=icon]) {\n margin-inline: 8px 0;\n }\n`;\n"]}
|