@universal-material/web 3.6.4 → 3.6.6
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/icon-button.styles.js +5 -5
- package/button/icon-button.styles.js.map +1 -1
- package/custom-elements.json +5100 -5100
- package/package.json +1 -1
- package/tab-bar/tab.styles.d.ts.map +1 -1
- package/tab-bar/tab.styles.js +5 -1
- package/tab-bar/tab.styles.js.map +1 -1
- package/vscode.html-custom-data.json +369 -369
|
@@ -3,11 +3,11 @@ export const styles = css `
|
|
|
3
3
|
:host {
|
|
4
4
|
--_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));
|
|
5
5
|
--_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);
|
|
6
|
-
--_extra-small-size: var(--u-icon-button-extra-small-
|
|
7
|
-
--_small-size: var(--u-icon-button-small-
|
|
8
|
-
--_medium-size: var(--u-icon-button-medium-
|
|
9
|
-
--_large-size: var(--u-icon-button-large-
|
|
10
|
-
--_extra-large-size: var(--u-icon-button-extra-large-
|
|
6
|
+
--_extra-small-size: var(--u-icon-button-extra-small-size, 32px);
|
|
7
|
+
--_small-size: var(--u-icon-button-small-size, 40px);
|
|
8
|
+
--_medium-size: var(--u-icon-button-medium-size, 56px);
|
|
9
|
+
--_large-size: var(--u-icon-button-large-size, 96px);
|
|
10
|
+
--_extra-large-size: var(--u-icon-button-extra-large-size, 136px);
|
|
11
11
|
--_extra-small-narrow-width: var(--u-icon-button-extra-small-narrow-width, 28px);
|
|
12
12
|
--_small-narrow-width: var(--u-icon-button-small-narrow-width, 32px);
|
|
13
13
|
--_medium-narrow-width: var(--u-icon-button-medium-narrow-width, 48px);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));\n --_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);\n --_extra-small-size: var(--u-icon-button-extra-small-
|
|
1
|
+
{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));\n --_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);\n --_extra-small-size: var(--u-icon-button-extra-small-size, 32px);\n --_small-size: var(--u-icon-button-small-size, 40px);\n --_medium-size: var(--u-icon-button-medium-size, 56px);\n --_large-size: var(--u-icon-button-large-size, 96px);\n --_extra-large-size: var(--u-icon-button-extra-large-size, 136px);\n --_extra-small-narrow-width: var(--u-icon-button-extra-small-narrow-width, 28px);\n --_small-narrow-width: var(--u-icon-button-small-narrow-width, 32px);\n --_medium-narrow-width: var(--u-icon-button-medium-narrow-width, 48px);\n --_large-narrow-width: var(--u-icon-button-large-narrow-width, 64px);\n --_extra-large-narrow-width: var(--u-icon-button-extra-large-narrow-width, 104px);\n --_extra-small-wide-width: var(--u-icon-button-extra-small-wide-width, 40px);\n --_small-wide-width: var(--u-icon-button-small-wide-width, 52px);\n --_medium-wide-width: var(--u-icon-button-medium-wide-width, 72px);\n --_large-wide-width: var(--u-icon-button-large-wide-width, 128px);\n --_extra-large-wide-width: var(--u-icon-button-extra-large-wide-width, 184px);\n --_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);\n --_small-icon-size: var(--u-icon-button-small-icon-size, 1.5rem);\n --_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);\n --_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);\n --_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);\n --_extra-small-square-shape-corner: var(--u-icon-button-extra-small-square-shape-corner, 12px);\n --_small-square-shape-corner: var(--u-icon-button-small-square-shape-corner, 12px);\n --_medium-square-shape-corner: var(--u-icon-button-medium-square-shape-corner, 16px);\n --_large-square-shape-corner: var(--u-icon-button-large-square-shape-corner, 28px);\n --_extra-large-square-shape-corner: var(--u-icon-button-extra-large-square-shape-corner, 28px);\n --_extra-small-pressed-shape-corner: var(--u-icon-button-extra-small-pressed-shape-corner, 8px);\n --_small-pressed-shape-corner: var(--u-icon-button-small-pressed-shape-corner, 8px);\n --_medium-pressed-shape-corner: var(--u-icon-button-medium-pressed-shape-corner, 12px);\n --_large-pressed-shape-corner: var(--u-icon-button-large-pressed-shape-corner, 16px);\n --_extra-large-pressed-shape-corner: var(--u-icon-button-extra-large-pressed-shape-corner, 16px);\n --_narrow-width: var(--_small-narrow-width);\n --_wide-width: var(--_small-wide-width);\n }\n\n .container {\n width: var(--_size);\n height: var(--_size);\n 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\");\n }\n\n .extra-small {\n --_narrow-width: var(--_extra-small-narrow-width);\n --_wide-width: var(--_extra-small-wide-width);\n }\n\n .medium {\n --_narrow-width: var(--_medium-narrow-width);\n --_wide-width: var(--_medium-wide-width);\n }\n\n .large {\n --_narrow-width: var(--_large-narrow-width);\n --_wide-width: var(--_large-wide-width);\n }\n\n .extra-large {\n --_narrow-width: var(--_extra-large-narrow-width);\n --_wide-width: var(--_extra-large-wide-width);\n }\n\n .narrow {\n width: var(--_narrow-width);\n }\n\n .wide {\n width: var(--_wide-width);\n }\n\n .filled, .filled.selected {\n background-color: var(--u-filled-icon-button-container-color, var(--u-color-primary, rgb(103, 80, 164)));\n color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n .filled.toggle {\n background-color: var(--u-filled-icon-button-unselected-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n color: var(--u-filled-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .tonal {\n background-color: var(--u-total-icon-button-unselected-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n .tonal.selected {\n background-color: var(--u-tonal-icon-button-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n .standard {\n color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n .standard.selected {\n color: var(--u-standard-icon-button-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n background-color: var(--u-standard-icon-button-selected-container-color, transparent);\n }\n\n .outlined {\n color: var(--u-outlined-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n .outlined, .outlined.selected.disabled {\n border: 1px solid var(--u-color-outline-variant, rgb(202, 196, 208));\n }\n .outlined.selected {\n border: none;\n background-color: var(--u-outlined-icon-button-selected-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n }\n .outlined.disabled {\n color: var(--u-outlined-icon-button-disabled-icon-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-icon-button-disabled-border-opacity, 10%), transparent)) !important;\n }\n`;\n"]}
|