igniteui-webcomponents 4.1.0 → 4.2.0
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/CHANGELOG.md +25 -2
- package/animations/easings.d.ts +31 -0
- package/animations/easings.js +35 -0
- package/animations/easings.js.map +1 -0
- package/animations/index.d.ts +3 -0
- package/animations/index.js +4 -0
- package/animations/index.js.map +1 -0
- package/animations/player.d.ts +9 -0
- package/animations/player.js +47 -0
- package/animations/player.js.map +1 -0
- package/animations/presets/grow/index.d.ts +3 -0
- package/animations/presets/grow/index.js +18 -0
- package/animations/presets/grow/index.js.map +1 -0
- package/animations/presets/index.d.ts +1 -0
- package/animations/presets/index.js +2 -0
- package/animations/presets/index.js.map +1 -0
- package/animations/types.d.ts +5 -0
- package/animations/types.js +7 -0
- package/animations/types.js.map +1 -0
- package/components/accordion/accordion.js +4 -4
- package/components/accordion/accordion.js.map +1 -1
- package/components/accordion/themes/accordion.base.css.js +10 -0
- package/components/accordion/themes/accordion.base.css.js.map +1 -1
- package/components/badge/themes/light/badge.base.css.js +15 -11
- package/components/badge/themes/light/badge.base.css.js.map +1 -1
- package/components/badge/themes/light/badge.bootstrap.css.js +4 -5
- package/components/badge/themes/light/badge.bootstrap.css.js.map +1 -1
- package/components/card/themes/light/card.content.bootstrap.css.js +2 -4
- package/components/card/themes/light/card.content.bootstrap.css.js.map +1 -1
- package/components/card/themes/light/card.content.indigo.css.js +1 -6
- package/components/card/themes/light/card.content.indigo.css.js.map +1 -1
- package/components/card/themes/light/card.content.material.css.js +1 -2
- package/components/card/themes/light/card.content.material.css.js.map +1 -1
- package/components/card/themes/light/card.header.bootstrap.css.js +2 -5
- package/components/card/themes/light/card.header.bootstrap.css.js.map +1 -1
- package/components/card/themes/light/card.header.fluent.css.js +2 -3
- package/components/card/themes/light/card.header.fluent.css.js.map +1 -1
- package/components/card/themes/light/card.header.indigo.css.js +2 -5
- package/components/card/themes/light/card.header.indigo.css.js.map +1 -1
- package/components/card/themes/light/card.header.material.css.js +2 -3
- package/components/card/themes/light/card.header.material.css.js.map +1 -1
- package/components/checkbox/checkbox-base.js +1 -0
- package/components/checkbox/checkbox-base.js.map +1 -1
- package/components/combo/combo-item.d.ts +2 -0
- package/components/combo/combo-item.js +16 -9
- package/components/combo/combo-item.js.map +1 -1
- package/components/combo/combo-list.d.ts +1 -1
- package/components/combo/combo-list.js +2 -1
- package/components/combo/combo-list.js.map +1 -1
- package/components/combo/combo.d.ts +56 -8
- package/components/combo/combo.js +102 -17
- package/components/combo/combo.js.map +1 -1
- package/components/combo/controllers/navigation.d.ts +8 -4
- package/components/combo/controllers/navigation.js +50 -10
- package/components/combo/controllers/navigation.js.map +1 -1
- package/components/combo/controllers/selection.d.ts +4 -3
- package/components/combo/controllers/selection.js +21 -10
- package/components/combo/controllers/selection.js.map +1 -1
- package/components/combo/themes/light/combo.base.css.js +23 -16
- package/components/combo/themes/light/combo.base.css.js.map +1 -1
- package/components/combo/themes/light/combo.bootstrap.css.js +32 -0
- package/components/combo/themes/light/combo.bootstrap.css.js.map +1 -1
- package/components/combo/themes/light/combo.fluent.css.js +35 -2
- package/components/combo/themes/light/combo.fluent.css.js.map +1 -1
- package/components/combo/themes/light/combo.indigo.css.js +22 -12
- package/components/combo/themes/light/combo.indigo.css.js.map +1 -1
- package/components/combo/themes/light/combo.material.css.js +47 -3
- package/components/combo/themes/light/combo.material.css.js.map +1 -1
- package/components/combo/types.d.ts +1 -0
- package/components/combo/types.js.map +1 -1
- package/components/dialog/themes/light/dialog.base.css.js +2 -2
- package/components/dialog/themes/light/dialog.base.css.js.map +1 -1
- package/components/expansion-panel/expansion-panel.d.ts +4 -0
- package/components/expansion-panel/expansion-panel.js +32 -6
- package/components/expansion-panel/expansion-panel.js.map +1 -1
- package/components/expansion-panel/themes/light/expansion-panel.base.css.js +49 -2
- package/components/expansion-panel/themes/light/expansion-panel.base.css.js.map +1 -1
- package/components/input/input-base.js +1 -1
- package/components/input/input-base.js.map +1 -1
- package/components/input/themes/light/input.bootstrap.css.js +20 -3
- package/components/input/themes/light/input.bootstrap.css.js.map +1 -1
- package/components/input/themes/light/input.fluent.css.js +19 -5
- package/components/input/themes/light/input.fluent.css.js.map +1 -1
- package/components/input/themes/light/input.indigo.css.js +31 -7
- package/components/input/themes/light/input.indigo.css.js.map +1 -1
- package/components/input/themes/light/input.material.css.js +66 -72
- package/components/input/themes/light/input.material.css.js.map +1 -1
- package/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.js +1 -1
- package/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.js.map +1 -1
- package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js +1 -1
- package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js.map +1 -1
- package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js +11 -11
- package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js.map +1 -1
- package/components/radio/radio.js +1 -0
- package/components/radio/radio.js.map +1 -1
- package/components/radio/themes/dark/radio.material.css.d.ts +1 -0
- package/components/radio/themes/dark/radio.material.css.js +3 -0
- package/components/radio/themes/dark/radio.material.css.js.map +1 -0
- package/components/radio/themes/light/radio.base.css.js +0 -3
- package/components/radio/themes/light/radio.base.css.js.map +1 -1
- package/components/radio/themes/light/radio.fluent.css.js +10 -9
- package/components/radio/themes/light/radio.fluent.css.js.map +1 -1
- package/components/radio/themes/light/radio.material.css.js +17 -3
- package/components/radio/themes/light/radio.material.css.js.map +1 -1
- package/components/radio-group/radio-group.base.css.js +2 -8
- package/components/radio-group/radio-group.base.css.js.map +1 -1
- package/components/radio-group/radio-group.fluent.css.d.ts +1 -0
- package/components/radio-group/radio-group.fluent.css.js +6 -0
- package/components/radio-group/radio-group.fluent.css.js.map +1 -0
- package/components/radio-group/radio-group.js +9 -2
- package/components/radio-group/radio-group.js.map +1 -1
- package/components/radio-group/radio-group.material.css.d.ts +1 -0
- package/components/radio-group/radio-group.material.css.js +10 -0
- package/components/radio-group/radio-group.material.css.js.map +1 -0
- package/components/select/select-group.js +1 -0
- package/components/select/select-group.js.map +1 -1
- package/components/select/themes/light/select.base.css.js +16 -15
- package/components/select/themes/light/select.base.css.js.map +1 -1
- package/components/select/themes/light/select.bootstrap.css.js +7 -0
- package/components/select/themes/light/select.bootstrap.css.js.map +1 -1
- package/components/select/themes/light/select.fluent.css.js +11 -0
- package/components/select/themes/light/select.fluent.css.js.map +1 -1
- package/components/select/themes/light/select.indigo.css.js +10 -1
- package/components/select/themes/light/select.indigo.css.js.map +1 -1
- package/components/select/themes/light/select.material.css.js +14 -0
- package/components/select/themes/light/select.material.css.js.map +1 -1
- package/components/slider/slider-base.js +1 -0
- package/components/slider/slider-base.js.map +1 -1
- package/components/stepper/themes/stepper/stepper.base.css.js +1 -1
- package/components/stepper/themes/stepper/stepper.base.css.js.map +1 -1
- package/components/toggle/toggle.controller.js.map +1 -1
- package/components/toggle/toggle.directive.js.map +1 -1
- package/custom-elements.json +37 -9
- package/package.json +4 -4
- package/themes/dark/bootstrap.css +3 -1
- package/themes/dark/fluent.css +4 -3
- package/themes/dark/indigo.css +3 -1
- package/themes/dark/material.css +12 -1
- package/vscode-html-custom-data.json +14 -4
|
@@ -24,10 +24,11 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
24
24
|
:host [part=suffix] {
|
|
25
25
|
grid-area: 1/3;
|
|
26
26
|
}
|
|
27
|
-
:host [part
|
|
28
|
-
color: hsla(var(--ig-gray-
|
|
29
|
-
|
|
30
|
-
font-
|
|
27
|
+
:host [part~=label] {
|
|
28
|
+
color: hsla(var(--ig-gray-900), var(--ig-gray-a));
|
|
29
|
+
font-size: 0.875rem;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
line-height: 1;
|
|
31
32
|
}
|
|
32
33
|
:host [part^=container] {
|
|
33
34
|
background: transparent;
|
|
@@ -61,12 +62,22 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
61
62
|
:host [part~=input] {
|
|
62
63
|
font-size: 1rem;
|
|
63
64
|
background: initial;
|
|
64
|
-
padding: 0.5rem;
|
|
65
|
+
padding-block: 0.5rem;
|
|
66
|
+
padding-inline: max(var(--is-large, 1) * 1rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 0.75rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.5rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
|
|
65
67
|
border: none;
|
|
66
68
|
grid-area: 1/2;
|
|
67
69
|
}
|
|
70
|
+
:host [part*="input prefixed"] {
|
|
71
|
+
-webkit-padding-start: 0;
|
|
72
|
+
padding-inline-start: 0;
|
|
73
|
+
}
|
|
74
|
+
:host [part*="input suffixed"] {
|
|
75
|
+
-webkit-padding-end: 0;
|
|
76
|
+
padding-inline-end: 0;
|
|
77
|
+
}
|
|
68
78
|
:host [part=helper-text] {
|
|
69
|
-
|
|
79
|
+
margin-top: 0.375rem;
|
|
80
|
+
padding-inline: max(var(--is-large, 1) * 1rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 0.75rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.5rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
|
|
70
81
|
color: hsla(var(--ig-gray-600), var(--ig-gray-a));
|
|
71
82
|
}
|
|
72
83
|
|
|
@@ -107,10 +118,23 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
107
118
|
border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
|
|
108
119
|
color: hsla(var(--ig-gray-300), var(--ig-gray-a));
|
|
109
120
|
}
|
|
121
|
+
:host([disabled]) [part~=input]::-webkit-input-placeholder {
|
|
122
|
+
color: hsla(var(--ig-gray-300), var(--ig-gray-a));
|
|
123
|
+
}
|
|
124
|
+
:host([disabled]) [part~=input]::-moz-placeholder {
|
|
125
|
+
color: hsla(var(--ig-gray-300), var(--ig-gray-a));
|
|
126
|
+
}
|
|
127
|
+
:host([disabled]) [part~=input]:-ms-input-placeholder {
|
|
128
|
+
color: hsla(var(--ig-gray-300), var(--ig-gray-a));
|
|
129
|
+
}
|
|
130
|
+
:host([disabled]) [part~=input]::-ms-input-placeholder {
|
|
131
|
+
color: hsla(var(--ig-gray-300), var(--ig-gray-a));
|
|
132
|
+
}
|
|
110
133
|
:host([disabled]) [part=prefix],
|
|
111
134
|
:host([disabled]) [part=suffix],
|
|
112
135
|
:host([disabled]) [part=label],
|
|
113
|
-
:host([disabled]) [part=helper-text]
|
|
136
|
+
:host([disabled]) [part=helper-text],
|
|
137
|
+
:host([disabled]) [part~=input]::placeholder {
|
|
114
138
|
color: hsla(var(--ig-gray-300), var(--ig-gray-a));
|
|
115
139
|
}`;
|
|
116
140
|
//# sourceMappingURL=input.indigo.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"input.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host [part=suffix] ::slotted(*), :host [part=prefix] ::slotted(*) {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: calc(100% - 0.125rem);\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host [part=prefix],\n:host [part=suffix] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n:host [part=prefix] {\n grid-area: 1/1;\n}\n:host [part=suffix] {\n grid-area: 1/3;\n}\n:host [part~=label] {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1;\n}\n:host [part^=container] {\n background: transparent;\n border-bottom: 1px solid hsla(var(--ig-gray-500), var(--ig-gray-a));\n -webkit-transition: background 0.25s ease-out;\n -o-transition: background 0.25s ease-out;\n transition: background 0.25s ease-out;\n grid-template-columns: auto 1fr auto;\n}\n:host [part^=container]::after {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 0.125rem;\n left: 0;\n right: 0;\n bottom: -1px;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n -webkit-transform: scaleY(0);\n -ms-transform: scaleY(0);\n transform: scaleY(0);\n -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transform-origin: bottom center;\n -ms-transform-origin: bottom center;\n transform-origin: bottom center;\n}\n:host [part~=input] {\n font-size: 1rem;\n background: initial;\n padding-block: 0.5rem;\n padding-inline: max(var(--is-large, 1) * 1rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 0.75rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.5rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n border: none;\n grid-area: 1/2;\n}\n:host [part*=\"input prefixed\"] {\n -webkit-padding-start: 0;\n padding-inline-start: 0;\n}\n:host [part*=\"input suffixed\"] {\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n}\n:host [part=helper-text] {\n margin-top: 0.375rem;\n padding-inline: max(var(--is-large, 1) * 1rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 0.75rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.5rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host(:hover) [part^=container],\n:host([outlined]:hover) [part^=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part^=container],\n:host([outlined]:focus-within) [part^=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host(:focus-within) [part^=container]::after,\n:host([outlined]:focus-within) [part^=container]::after {\n -webkit-transform: scaleY(1);\n -ms-transform: scaleY(1);\n transform: scaleY(1);\n}\n:host(:focus-within) [part=label],\n:host([outlined]:focus-within) [part=label] {\n color: var(--label-focus-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n\n:host([invalid]) [part^=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part^=container]::after {\n background: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part=label] {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part^=container] {\n border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input]::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input]::-moz-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input]:-ms-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part~=input]::-ms-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=label],\n:host([disabled]) [part=helper-text],\n:host([disabled]) [part~=input]::placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}
|
|
@@ -1,57 +1,22 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
input:-moz-placeholder-shown + [part=notch] [part=label] {
|
|
4
|
+
--label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);
|
|
5
|
+
transform: translateY(calc(var(--label-position) * -1));
|
|
5
6
|
font-size: 0.75rem;
|
|
6
7
|
}
|
|
7
|
-
|
|
8
|
-
-
|
|
9
|
-
|
|
8
|
+
input:-ms-input-placeholder + [part=notch] [part=label] {
|
|
9
|
+
--label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);
|
|
10
|
+
-ms-transform: translateY(calc(var(--label-position) * -1));
|
|
11
|
+
transform: translateY(calc(var(--label-position) * -1));
|
|
10
12
|
font-size: 0.75rem;
|
|
11
13
|
}
|
|
12
|
-
:host(
|
|
13
|
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
:host([size=medium]) input:-moz-placeholder-shown + [part=notch] [part=label] {
|
|
21
|
-
transform: translateY(-22px);
|
|
22
|
-
font-size: 0.75rem;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:host([size=medium]) input:-ms-input-placeholder + [part=notch] [part=label] {
|
|
26
|
-
-ms-transform: translateY(-22px);
|
|
27
|
-
transform: translateY(-22px);
|
|
28
|
-
font-size: 0.75rem;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:host([size=medium]:focus-within) [part=label], :host([size=medium]) input:placeholder-shown + [part=notch] [part=label],
|
|
32
|
-
:host([size=medium]) [part~=filled] + [part=notch] [part=label] {
|
|
33
|
-
-webkit-transform: translateY(-22px);
|
|
34
|
-
-ms-transform: translateY(-22px);
|
|
35
|
-
transform: translateY(-22px);
|
|
36
|
-
font-size: 0.75rem;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
:host([size=small]) input:-moz-placeholder-shown + [part=notch] [part=label] {
|
|
40
|
-
transform: translateY(-18px);
|
|
41
|
-
font-size: 0.75rem;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
:host([size=small]) input:-ms-input-placeholder + [part=notch] [part=label] {
|
|
45
|
-
-ms-transform: translateY(-18px);
|
|
46
|
-
transform: translateY(-18px);
|
|
47
|
-
font-size: 0.75rem;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
:host([size=small]:focus-within) [part=label], :host([size=small]) input:placeholder-shown + [part=notch] [part=label],
|
|
51
|
-
:host([size=small]) [part~=filled] + [part=notch] [part=label] {
|
|
52
|
-
-webkit-transform: translateY(-18px);
|
|
53
|
-
-ms-transform: translateY(-18px);
|
|
54
|
-
transform: translateY(-18px);
|
|
14
|
+
:host(:focus-within) [part=label], input:placeholder-shown + [part=notch] [part=label],
|
|
15
|
+
[part~=filled] + [part=notch] [part=label] {
|
|
16
|
+
--label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);
|
|
17
|
+
-webkit-transform: translateY(calc(var(--label-position) * -1));
|
|
18
|
+
-ms-transform: translateY(calc(var(--label-position) * -1));
|
|
19
|
+
transform: translateY(calc(var(--label-position) * -1));
|
|
55
20
|
font-size: 0.75rem;
|
|
56
21
|
}
|
|
57
22
|
|
|
@@ -80,7 +45,27 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
80
45
|
width: -moz-max-content;
|
|
81
46
|
width: max-content;
|
|
82
47
|
height: 100%;
|
|
83
|
-
padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) *
|
|
48
|
+
padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 14px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 12px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:host input::-webkit-input-placeholder {
|
|
52
|
+
color: hsla(var(--ig-gray-700), var(--ig-gray-a));
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:host input::-moz-placeholder {
|
|
56
|
+
color: hsla(var(--ig-gray-700), var(--ig-gray-a));
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:host input:-ms-input-placeholder {
|
|
60
|
+
color: hsla(var(--ig-gray-700), var(--ig-gray-a));
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:host input::-ms-input-placeholder {
|
|
64
|
+
color: hsla(var(--ig-gray-700), var(--ig-gray-a));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:host input::placeholder {
|
|
68
|
+
color: hsla(var(--ig-gray-700), var(--ig-gray-a));
|
|
84
69
|
}
|
|
85
70
|
|
|
86
71
|
[part~=input] {
|
|
@@ -91,14 +76,12 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
91
76
|
}
|
|
92
77
|
|
|
93
78
|
[part=label] {
|
|
94
|
-
color: hsla(var(--ig-gray-
|
|
95
|
-
/* stylelint-disable */
|
|
79
|
+
color: hsla(var(--ig-gray-700), var(--ig-gray-a));
|
|
96
80
|
-webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
97
81
|
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
98
82
|
-o-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
99
83
|
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
100
84
|
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
101
|
-
/* stylelint-enable */
|
|
102
85
|
line-height: 1;
|
|
103
86
|
-o-text-overflow: ellipsis;
|
|
104
87
|
text-overflow: ellipsis;
|
|
@@ -130,6 +113,15 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
130
113
|
:host(:focus-within) [part=label] {
|
|
131
114
|
color: hsla(var(--ig-primary-500), var(--ig-primary-a));
|
|
132
115
|
}
|
|
116
|
+
:host(:focus-within) [part~=prefix],
|
|
117
|
+
:host(:focus-within) [part~=suffix] {
|
|
118
|
+
color: hsla(var(--ig-gray-900), var(--ig-gray-a));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
[part~=filled] [part~=prefix],
|
|
122
|
+
[part~=filled] [part~=suffix] {
|
|
123
|
+
color: hsla(var(--ig-gray-900), var(--ig-gray-a));
|
|
124
|
+
}
|
|
133
125
|
|
|
134
126
|
[part^=container] {
|
|
135
127
|
grid-template-columns: auto auto 1fr auto;
|
|
@@ -141,7 +133,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
141
133
|
justify-content: flex-start;
|
|
142
134
|
grid-area: 1/1;
|
|
143
135
|
border-style: solid;
|
|
144
|
-
border-color: hsla(var(--ig-gray-
|
|
136
|
+
border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
145
137
|
border-inline-start-width: 0.0625rem;
|
|
146
138
|
border-inline-end-width: 0;
|
|
147
139
|
border-block-start-width: 0.0625rem;
|
|
@@ -163,7 +155,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
163
155
|
padding: 0 0.25rem;
|
|
164
156
|
border-width: 0.0625rem;
|
|
165
157
|
border-style: solid;
|
|
166
|
-
border-color: hsla(var(--ig-gray-
|
|
158
|
+
border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
167
159
|
border-left: none;
|
|
168
160
|
border-right: none;
|
|
169
161
|
overflow: visible;
|
|
@@ -176,7 +168,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
176
168
|
grid-area: 1/3;
|
|
177
169
|
border-width: 0.0625rem;
|
|
178
170
|
border-style: solid;
|
|
179
|
-
border-color: hsla(var(--ig-gray-
|
|
171
|
+
border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
180
172
|
border-left: none;
|
|
181
173
|
border-right: none;
|
|
182
174
|
}
|
|
@@ -187,7 +179,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
187
179
|
justify-content: flex-end;
|
|
188
180
|
grid-area: 1/4;
|
|
189
181
|
border-style: solid;
|
|
190
|
-
border-color: hsla(var(--ig-gray-
|
|
182
|
+
border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
191
183
|
border-inline-start-width: 0;
|
|
192
184
|
border-inline-end-width: 0.0625rem;
|
|
193
185
|
border-block-start-width: 0.0625rem;
|
|
@@ -200,7 +192,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
200
192
|
display: -webkit-box;
|
|
201
193
|
display: -ms-flexbox;
|
|
202
194
|
display: flex;
|
|
203
|
-
min-width: 0.75rem;
|
|
195
|
+
min-width: max(var(--is-large, 1) * 0.875rem, var(--is-medium, 1) * 0.75rem, var(--is-small, 1) * 0.625rem);
|
|
204
196
|
height: var(--size);
|
|
205
197
|
overflow: hidden;
|
|
206
198
|
}
|
|
@@ -215,9 +207,9 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
215
207
|
text-transform: var(--ig-caption-text-transform);
|
|
216
208
|
margin-top: var(--ig-caption-margin-top);
|
|
217
209
|
margin-bottom: var(--ig-caption-margin-bottom);
|
|
218
|
-
padding:
|
|
219
|
-
margin-top: 0.
|
|
220
|
-
color: hsla(var(--ig-gray-
|
|
210
|
+
padding-inline: max(var(--is-large, 1) * 1.125rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 1rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.875rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
|
|
211
|
+
margin-top: 0.3125rem;
|
|
212
|
+
color: hsla(var(--ig-gray-700), var(--ig-gray-a));
|
|
221
213
|
}
|
|
222
214
|
|
|
223
215
|
:host([invalid]) [part=start],
|
|
@@ -246,29 +238,29 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
246
238
|
:host([disabled]) [part=prefix],
|
|
247
239
|
:host([disabled]) [part=suffix],
|
|
248
240
|
:host([disabled]) [part=helper-text] {
|
|
249
|
-
color: hsla(var(--ig-gray-
|
|
241
|
+
color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
250
242
|
}
|
|
251
243
|
:host([disabled]) [part=start],
|
|
252
244
|
:host([disabled]) [part=filler],
|
|
253
245
|
:host([disabled]) [part=notch],
|
|
254
246
|
:host([disabled]) [part=end] {
|
|
255
|
-
color: hsla(var(--ig-gray-
|
|
256
|
-
border-color: hsla(var(--ig-gray-
|
|
247
|
+
color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
248
|
+
border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
257
249
|
}
|
|
258
250
|
:host([disabled]) input::-webkit-input-placeholder {
|
|
259
|
-
color: hsla(var(--ig-gray-
|
|
251
|
+
color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
260
252
|
}
|
|
261
253
|
:host([disabled]) input::-moz-placeholder {
|
|
262
|
-
color: hsla(var(--ig-gray-
|
|
254
|
+
color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
263
255
|
}
|
|
264
256
|
:host([disabled]) input:-ms-input-placeholder {
|
|
265
|
-
color: hsla(var(--ig-gray-
|
|
257
|
+
color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
266
258
|
}
|
|
267
259
|
:host([disabled]) input::-ms-input-placeholder {
|
|
268
|
-
color: hsla(var(--ig-gray-
|
|
260
|
+
color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
269
261
|
}
|
|
270
262
|
:host([disabled]) input::placeholder {
|
|
271
|
-
color: hsla(var(--ig-gray-
|
|
263
|
+
color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
272
264
|
}
|
|
273
265
|
:host([outlined]:active) [part=suffix],
|
|
274
266
|
:host([outlined]:focus) [part=suffix],
|
|
@@ -312,8 +304,8 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
312
304
|
inset-inline-start: 0.125rem;
|
|
313
305
|
}
|
|
314
306
|
:host(:not([outlined])) [part~=container] {
|
|
315
|
-
background: hsla(var(--ig-gray-
|
|
316
|
-
border-bottom: 1px solid hsla(var(--ig-gray-
|
|
307
|
+
background: hsla(var(--ig-gray-200), var(--ig-gray-a));
|
|
308
|
+
border-bottom: 1px solid hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
317
309
|
border-start-end-radius: 0.25rem;
|
|
318
310
|
border-start-start-radius: 0.25rem;
|
|
319
311
|
-webkit-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -401,9 +393,11 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
401
393
|
:host(:not([outlined])[disabled]) [part=prefix],
|
|
402
394
|
:host(:not([outlined])[disabled]) [part=suffix],
|
|
403
395
|
:host(:not([outlined])[disabled]) [part=helper-text] {
|
|
404
|
-
color: hsla(var(--ig-gray-
|
|
396
|
+
color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
405
397
|
}
|
|
406
398
|
:host(:not([outlined])[disabled]) [part~=container] {
|
|
407
|
-
|
|
399
|
+
background: hsla(var(--ig-gray-100), var(--ig-gray-a));
|
|
400
|
+
border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
|
|
401
|
+
border-bottom-style: dashed;
|
|
408
402
|
}`;
|
|
409
403
|
//# sourceMappingURL=input.material.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.material.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsZvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host([size=large]) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-26px);\n font-size: 0.75rem;\n}\n:host([size=large]) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-26px);\n transform: translateY(-26px);\n font-size: 0.75rem;\n}\n:host([size=large]:focus-within) [part=label], :host([size=large]) input:placeholder-shown + [part=notch] [part=label],\n:host([size=large]) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-26px);\n -ms-transform: translateY(-26px);\n transform: translateY(-26px);\n font-size: 0.75rem;\n}\n\n:host([size=medium]) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-22px);\n font-size: 0.75rem;\n}\n\n:host([size=medium]) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-22px);\n transform: translateY(-22px);\n font-size: 0.75rem;\n}\n\n:host([size=medium]:focus-within) [part=label], :host([size=medium]) input:placeholder-shown + [part=notch] [part=label],\n:host([size=medium]) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-22px);\n -ms-transform: translateY(-22px);\n transform: translateY(-22px);\n font-size: 0.75rem;\n}\n\n:host([size=small]) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-18px);\n font-size: 0.75rem;\n}\n\n:host([size=small]) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-18px);\n transform: translateY(-18px);\n font-size: 0.75rem;\n}\n\n:host([size=small]:focus-within) [part=label], :host([size=small]) input:placeholder-shown + [part=notch] [part=label],\n:host([size=small]) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-18px);\n -ms-transform: translateY(-18px);\n transform: translateY(-18px);\n font-size: 0.75rem;\n}\n\n:host input:-moz-placeholder-shown + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host input:-ms-input-placeholder + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host([disabled]) [part~=filled] + [part=notch], :host([invalid]) [part~=filled] + [part=notch],\n:host([invalid]:focus-within) [part~=filled] + [part=notch], :host input:placeholder-shown + [part=notch],\n:host [part~=filled] + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n[part=end] > [part=suffix] ::slotted(*), [part=start] > [part=prefix] ::slotted(*) {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: 100%;\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n[part~=input] {\n background: transparent;\n padding: 0 0.25rem;\n font-size: 1rem;\n grid-area: 1/2/span 1/span 2;\n}\n\n[part=label] {\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n /* stylelint-disable */\n -webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n /* stylelint-enable */\n line-height: 1;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n overflow: hidden;\n will-change: font-size, color, transform;\n}\n\n:host(:focus-within) [part=start] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-inline-start-width: 0.125rem;\n border-block-start-width: 0.125rem;\n border-block-end-width: 0.125rem;\n}\n:host(:focus-within) [part=notch] {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-top: 0.0625rem solid transparent;\n}\n:host(:focus-within) [part=filler] {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:focus-within) [part=end] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-inline-end-width: 0.125rem;\n border-block-start-width: 0.125rem;\n border-block-end-width: 0.125rem;\n}\n:host(:focus-within) [part=label] {\n color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part^=container] {\n grid-template-columns: auto auto 1fr auto;\n}\n\n[part=start] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n grid-area: 1/1;\n border-style: solid;\n border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-inline-start-width: 0.0625rem;\n border-inline-end-width: 0;\n border-block-start-width: 0.0625rem;\n border-block-end-width: 0.0625rem;\n border-start-start-radius: 0.25rem;\n border-end-start-radius: 0.25rem;\n}\n[part=notch] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: auto;\n min-width: 0;\n height: 100%;\n grid-area: 1/2;\n padding: 0 0.25rem;\n border-width: 0.0625rem;\n border-style: solid;\n border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-left: none;\n border-right: none;\n overflow: visible;\n}\n[part=notch]:empty {\n display: none;\n}\n\n[part=filler] {\n grid-area: 1/3;\n border-width: 0.0625rem;\n border-style: solid;\n border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-left: none;\n border-right: none;\n}\n\n[part=end] {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n grid-area: 1/4;\n border-style: solid;\n border-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-inline-start-width: 0;\n border-inline-end-width: 0.0625rem;\n border-block-start-width: 0.0625rem;\n border-block-end-width: 0.0625rem;\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n[part=start],\n[part=end] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: 0.75rem;\n height: var(--size);\n overflow: hidden;\n}\n\n[part=helper-text] {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n padding: 0 0.5rem;\n margin-top: 0.25rem;\n color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host([invalid]) [part=start],\n:host([invalid]) [part=notch],\n:host([invalid]) [part=filler],\n:host([invalid]) [part=end],\n:host([invalid]:focus-within) [part=start],\n:host([invalid]:focus-within) [part=notch],\n:host([invalid]:focus-within) [part=filler],\n:host([invalid]:focus-within) [part=end] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part=label],\n:host([invalid]:focus-within) [part=label] {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]:focus-within) [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part~=input],\n:host([disabled]) [part=label],\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part=start],\n:host([disabled]) [part=filler],\n:host([disabled]) [part=notch],\n:host([disabled]) [part=end] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) input::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) input::-moz-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) input:-ms-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) input::-ms-input-placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([disabled]) input::placeholder {\n color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([outlined]:active) [part=suffix],\n:host([outlined]:focus) [part=suffix],\n:host([outlined]:focus-within) [part=suffix] {\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n}\n:host([outlined]:active) [part=prefix],\n:host([outlined]:focus) [part=prefix],\n:host([outlined]:focus-within) [part=prefix] {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n}\n:host([outlined]:active) [part=suffix] ::slotted(*),\n:host([outlined]:active) [part=prefix] ::slotted(*),\n:host([outlined]:focus) [part=suffix] ::slotted(*),\n:host([outlined]:focus) [part=prefix] ::slotted(*),\n:host([outlined]:focus-within) [part=suffix] ::slotted(*),\n:host([outlined]:focus-within) [part=prefix] ::slotted(*) {\n padding-block: max(var(--is-large, 1) * 14px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 10px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:not([outlined])) [part=start],\n:host(:not([outlined])) [part=end] {\n border-color: transparent;\n border-width: 0.0625rem;\n}\n:host(:not([outlined])) [part=start] {\n border-end-start-radius: 0;\n}\n:host(:not([outlined])) [part=end] {\n border-end-end-radius: 0;\n}\n:host(:not([outlined])) [part=notch],\n:host(:not([outlined])) [part=filler] {\n border-top: 1px solid transparent;\n border-bottom: transparent;\n border-bottom-width: 0.0625rem;\n}\n:host(:not([outlined])) [part=label] {\n inset-inline-start: 0.125rem;\n}\n:host(:not([outlined])) [part~=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n border-bottom: 1px solid hsla(var(--ig-gray-600), var(--ig-gray-a));\n border-start-end-radius: 0.25rem;\n border-start-start-radius: 0.25rem;\n -webkit-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host(:not([outlined])) [part~=container]::after {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 0.125rem;\n left: 0;\n right: 0;\n bottom: -1px;\n background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n -webkit-transform: scaleX(0);\n -ms-transform: scaleX(0);\n transform: scaleX(0);\n -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host(:not([outlined])) [part~=labelled] [part~=input] {\n padding-top: 1.25rem;\n padding-bottom: 0.375rem;\n}\n:host(:not([outlined])) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-106%);\n}\n:host(:not([outlined])) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n:host(:not([outlined])) input:placeholder-shown + [part=notch] [part=label],\n:host(:not([outlined])) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-106%);\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n\n:host(:not([outlined]):hover) [part~=container] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom: 1px solid hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n:host(:not([outlined]):focus-within) [part~=container] {\n background: var(--focus-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n border-bottom: 1px solid hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:not([outlined]):focus-within) [part~=container]::after {\n -webkit-transform: scaleX(1);\n -ms-transform: scaleX(1);\n transform: scaleX(1);\n opacity: 1;\n}\n:host(:not([outlined]):focus-within) [part=notch] [part=label] {\n -webkit-transform: translateY(-106%);\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n\n:host(:not([outlined])[invalid]) [part=start],\n:host(:not([outlined])[invalid]) [part=notch],\n:host(:not([outlined])[invalid]) [part=filler],\n:host(:not([outlined])[invalid]) [part=end],\n:host(:not([outlined])[invalid]:focus-within) [part=start],\n:host(:not([outlined])[invalid]:focus-within) [part=notch],\n:host(:not([outlined])[invalid]:focus-within) [part=filler],\n:host(:not([outlined])[invalid]:focus-within) [part=end] {\n border-color: transparent;\n}\n:host(:not([outlined])[invalid]) [part~=container],\n:host(:not([outlined])[invalid]:focus-within) [part~=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host(:not([outlined])[invalid]) [part~=container]::after,\n:host(:not([outlined])[invalid]:focus-within) [part~=container]::after {\n background: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host(:not([outlined])[disabled]) [part~=input],\n:host(:not([outlined])[disabled]) [part=label],\n:host(:not([outlined])[disabled]) [part=prefix],\n:host(:not([outlined])[disabled]) [part=suffix],\n:host(:not([outlined])[disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host(:not([outlined])[disabled]) [part~=container] {\n border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}
|
|
1
|
+
{"version":3,"file":"input.material.css.js","sourceRoot":"","sources":["../../../../../src/components/input/themes/light/input.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgZvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\ninput:-moz-placeholder-shown + [part=notch] [part=label] {\n --label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);\n transform: translateY(calc(var(--label-position) * -1));\n font-size: 0.75rem;\n}\ninput:-ms-input-placeholder + [part=notch] [part=label] {\n --label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);\n -ms-transform: translateY(calc(var(--label-position) * -1));\n transform: translateY(calc(var(--label-position) * -1));\n font-size: 0.75rem;\n}\n:host(:focus-within) [part=label], input:placeholder-shown + [part=notch] [part=label],\n[part~=filled] + [part=notch] [part=label] {\n --label-position: max(var(--is-large, 1) * 26px, var(--is-medium, 1) * 22px, var(--is-small, 1) * 18px);\n -webkit-transform: translateY(calc(var(--label-position) * -1));\n -ms-transform: translateY(calc(var(--label-position) * -1));\n transform: translateY(calc(var(--label-position) * -1));\n font-size: 0.75rem;\n}\n\n:host input:-moz-placeholder-shown + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host input:-ms-input-placeholder + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host([disabled]) [part~=filled] + [part=notch], :host([invalid]) [part~=filled] + [part=notch],\n:host([invalid]:focus-within) [part~=filled] + [part=notch], :host input:placeholder-shown + [part=notch],\n:host [part~=filled] + [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n[part=end] > [part=suffix] ::slotted(*), [part=start] > [part=prefix] ::slotted(*) {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n height: 100%;\n padding-inline: max(var(--is-large, 1) * 16px * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 14px * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 12px * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host input::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host input::-moz-placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host input:-ms-input-placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host input::-ms-input-placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host input::placeholder {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part~=input] {\n background: transparent;\n padding: 0 0.25rem;\n font-size: 1rem;\n grid-area: 1/2/span 1/span 2;\n}\n\n[part=label] {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n -webkit-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), font-size 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n line-height: 1;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n overflow: hidden;\n will-change: font-size, color, transform;\n}\n\n:host(:focus-within) [part=start] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-inline-start-width: 0.125rem;\n border-block-start-width: 0.125rem;\n border-block-end-width: 0.125rem;\n}\n:host(:focus-within) [part=notch] {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-top: 0.0625rem solid transparent;\n}\n:host(:focus-within) [part=filler] {\n border-width: 0.125rem;\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:focus-within) [part=end] {\n border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n border-inline-end-width: 0.125rem;\n border-block-start-width: 0.125rem;\n border-block-end-width: 0.125rem;\n}\n:host(:focus-within) [part=label] {\n color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:focus-within) [part~=prefix],\n:host(:focus-within) [part~=suffix] {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=filled] [part~=prefix],\n[part~=filled] [part~=suffix] {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part^=container] {\n grid-template-columns: auto auto 1fr auto;\n}\n\n[part=start] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n grid-area: 1/1;\n border-style: solid;\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-inline-start-width: 0.0625rem;\n border-inline-end-width: 0;\n border-block-start-width: 0.0625rem;\n border-block-end-width: 0.0625rem;\n border-start-start-radius: 0.25rem;\n border-end-start-radius: 0.25rem;\n}\n[part=notch] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: auto;\n min-width: 0;\n height: 100%;\n grid-area: 1/2;\n padding: 0 0.25rem;\n border-width: 0.0625rem;\n border-style: solid;\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-left: none;\n border-right: none;\n overflow: visible;\n}\n[part=notch]:empty {\n display: none;\n}\n\n[part=filler] {\n grid-area: 1/3;\n border-width: 0.0625rem;\n border-style: solid;\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-left: none;\n border-right: none;\n}\n\n[part=end] {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n grid-area: 1/4;\n border-style: solid;\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-inline-start-width: 0;\n border-inline-end-width: 0.0625rem;\n border-block-start-width: 0.0625rem;\n border-block-end-width: 0.0625rem;\n border-start-end-radius: 0.25rem;\n border-end-end-radius: 0.25rem;\n}\n[part=start],\n[part=end] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: max(var(--is-large, 1) * 0.875rem, var(--is-medium, 1) * 0.75rem, var(--is-small, 1) * 0.625rem);\n height: var(--size);\n overflow: hidden;\n}\n\n[part=helper-text] {\n font-family: var(--ig-caption-font-family);\n font-size: var(--ig-caption-font-size);\n font-weight: var(--ig-caption-font-weight);\n font-style: var(--ig-caption-font-style);\n line-height: var(--ig-caption-line-height);\n letter-spacing: var(--ig-caption-letter-spacing);\n text-transform: var(--ig-caption-text-transform);\n margin-top: var(--ig-caption-margin-top);\n margin-bottom: var(--ig-caption-margin-bottom);\n padding-inline: max(var(--is-large, 1) * 1.125rem * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * 1rem * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * 0.875rem * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n margin-top: 0.3125rem;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host([invalid]) [part=start],\n:host([invalid]) [part=notch],\n:host([invalid]) [part=filler],\n:host([invalid]) [part=end],\n:host([invalid]:focus-within) [part=start],\n:host([invalid]:focus-within) [part=notch],\n:host([invalid]:focus-within) [part=filler],\n:host([invalid]:focus-within) [part=end] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]) [part=label],\n:host([invalid]:focus-within) [part=label] {\n color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([invalid]:focus-within) [part=notch] {\n border-top: 0.0625rem solid transparent;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n:host([disabled]) [part~=input],\n:host([disabled]) [part=label],\n:host([disabled]) [part=prefix],\n:host([disabled]) [part=suffix],\n:host([disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part=start],\n:host([disabled]) [part=filler],\n:host([disabled]) [part=notch],\n:host([disabled]) [part=end] {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input::-webkit-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input::-moz-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input:-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input::-ms-input-placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) input::placeholder {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([outlined]:active) [part=suffix],\n:host([outlined]:focus) [part=suffix],\n:host([outlined]:focus-within) [part=suffix] {\n -webkit-margin-end: -0.0625rem;\n margin-inline-end: -0.0625rem;\n}\n:host([outlined]:active) [part=prefix],\n:host([outlined]:focus) [part=prefix],\n:host([outlined]:focus-within) [part=prefix] {\n -webkit-margin-start: -0.0625rem;\n margin-inline-start: -0.0625rem;\n}\n:host([outlined]:active) [part=suffix] ::slotted(*),\n:host([outlined]:active) [part=prefix] ::slotted(*),\n:host([outlined]:focus) [part=suffix] ::slotted(*),\n:host([outlined]:focus) [part=prefix] ::slotted(*),\n:host([outlined]:focus-within) [part=suffix] ::slotted(*),\n:host([outlined]:focus-within) [part=prefix] ::slotted(*) {\n padding-block: max(var(--is-large, 1) * 14px * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * 10px * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:not([outlined])) [part=start],\n:host(:not([outlined])) [part=end] {\n border-color: transparent;\n border-width: 0.0625rem;\n}\n:host(:not([outlined])) [part=start] {\n border-end-start-radius: 0;\n}\n:host(:not([outlined])) [part=end] {\n border-end-end-radius: 0;\n}\n:host(:not([outlined])) [part=notch],\n:host(:not([outlined])) [part=filler] {\n border-top: 1px solid transparent;\n border-bottom: transparent;\n border-bottom-width: 0.0625rem;\n}\n:host(:not([outlined])) [part=label] {\n inset-inline-start: 0.125rem;\n}\n:host(:not([outlined])) [part~=container] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom: 1px solid hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-start-end-radius: 0.25rem;\n border-start-start-radius: 0.25rem;\n -webkit-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: border-bottom-width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host(:not([outlined])) [part~=container]::after {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 0.125rem;\n left: 0;\n right: 0;\n bottom: -1px;\n background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n -webkit-transform: scaleX(0);\n -ms-transform: scaleX(0);\n transform: scaleX(0);\n -webkit-transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n -o-transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);\n transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host(:not([outlined])) [part~=labelled] [part~=input] {\n padding-top: 1.25rem;\n padding-bottom: 0.375rem;\n}\n:host(:not([outlined])) input:-moz-placeholder-shown + [part=notch] [part=label] {\n transform: translateY(-106%);\n}\n:host(:not([outlined])) input:-ms-input-placeholder + [part=notch] [part=label] {\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n:host(:not([outlined])) input:placeholder-shown + [part=notch] [part=label],\n:host(:not([outlined])) [part~=filled] + [part=notch] [part=label] {\n -webkit-transform: translateY(-106%);\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n\n:host(:not([outlined]):hover) [part~=container] {\n background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n border-bottom: 1px solid hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\n:host(:not([outlined]):focus-within) [part~=container] {\n background: var(--focus-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n border-bottom: 1px solid hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:not([outlined]):focus-within) [part~=container]::after {\n -webkit-transform: scaleX(1);\n -ms-transform: scaleX(1);\n transform: scaleX(1);\n opacity: 1;\n}\n:host(:not([outlined]):focus-within) [part=notch] [part=label] {\n -webkit-transform: translateY(-106%);\n -ms-transform: translateY(-106%);\n transform: translateY(-106%);\n}\n\n:host(:not([outlined])[invalid]) [part=start],\n:host(:not([outlined])[invalid]) [part=notch],\n:host(:not([outlined])[invalid]) [part=filler],\n:host(:not([outlined])[invalid]) [part=end],\n:host(:not([outlined])[invalid]:focus-within) [part=start],\n:host(:not([outlined])[invalid]:focus-within) [part=notch],\n:host(:not([outlined])[invalid]:focus-within) [part=filler],\n:host(:not([outlined])[invalid]:focus-within) [part=end] {\n border-color: transparent;\n}\n:host(:not([outlined])[invalid]) [part~=container],\n:host(:not([outlined])[invalid]:focus-within) [part~=container] {\n border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host(:not([outlined])[invalid]) [part~=container]::after,\n:host(:not([outlined])[invalid]:focus-within) [part~=container]::after {\n background: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host(:not([outlined])[disabled]) [part~=input],\n:host(:not([outlined])[disabled]) [part=label],\n:host(:not([outlined])[disabled]) [part=prefix],\n:host(:not([outlined])[disabled]) [part=suffix],\n:host(:not([outlined])[disabled]) [part=helper-text] {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host(:not([outlined])[disabled]) [part~=container] {\n background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n border-color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n border-bottom-style: dashed;\n}`;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
3
|
-
[part=
|
|
3
|
+
[part=content] {
|
|
4
4
|
font-family: var(--ig-body-2-font-family);
|
|
5
5
|
font-size: var(--ig-body-2-font-size);
|
|
6
6
|
font-weight: var(--ig-body-2-font-weight);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-drawer-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;EAevB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part=
|
|
1
|
+
{"version":3,"file":"nav-drawer-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;EAevB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part=content] {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n}\n\n:host([active]) [part=icon] {\n color: var(--active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}`;\n"]}
|
|
@@ -5,7 +5,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
|
|
|
5
5
|
gap: 1.5rem;
|
|
6
6
|
color: var(--text-color, hsla(var(--ig-gray-300), 0.8));
|
|
7
7
|
padding: 0.25rem;
|
|
8
|
-
margin: 0.9375rem 0.5rem
|
|
8
|
+
margin: 0.9375rem 0.5rem;
|
|
9
9
|
}
|
|
10
10
|
:host [part~=base]:hover, :host [part~=base]:focus-within {
|
|
11
11
|
background: transparent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-drawer-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;EAoBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host [part~=base] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1.5rem), 1.5rem);\n gap: 1.5rem;\n color: var(--text-color, hsla(var(--ig-gray-300), 0.8));\n padding: 0.25rem;\n margin: 0.9375rem 0.5rem
|
|
1
|
+
{"version":3,"file":"nav-drawer-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;EAoBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host [part~=base] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1.5rem), 1.5rem);\n gap: 1.5rem;\n color: var(--text-color, hsla(var(--ig-gray-300), 0.8));\n padding: 0.25rem;\n margin: 0.9375rem 0.5rem;\n}\n:host [part~=base]:hover, :host [part~=base]:focus-within {\n background: transparent;\n color: var(--hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n}\n:host [part=content] {\n -webkit-padding-start: 0.5rem;\n padding-inline-start: 0.5rem;\n}\n\n:host([active]) [part~=base] {\n background: var(--active-background, hsla(var(--ig-gray-600), 0.8));\n color: hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}
|
|
@@ -34,6 +34,7 @@ export const styles = css `:host {
|
|
|
34
34
|
|
|
35
35
|
/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
|
|
36
36
|
[part~=base] {
|
|
37
|
+
border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
|
|
37
38
|
display: -webkit-box;
|
|
38
39
|
display: -ms-flexbox;
|
|
39
40
|
display: flex;
|
|
@@ -48,7 +49,7 @@ export const styles = css `:host {
|
|
|
48
49
|
position: relative;
|
|
49
50
|
color: hsla(var(--ig-gray-700), var(--ig-gray-a));
|
|
50
51
|
max-height: 3rem;
|
|
51
|
-
margin: 0.5rem
|
|
52
|
+
margin: 0.5rem;
|
|
52
53
|
padding: 0.75rem 0.5rem;
|
|
53
54
|
cursor: pointer;
|
|
54
55
|
-webkit-user-select: none;
|
|
@@ -66,16 +67,6 @@ export const styles = css `:host {
|
|
|
66
67
|
-webkit-transition: background 0.15s ease-out;
|
|
67
68
|
-o-transition: background 0.15s ease-out;
|
|
68
69
|
transition: background 0.15s ease-out;
|
|
69
|
-
border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
|
|
70
|
-
font-family: var(--ig-subtitle-2-font-family);
|
|
71
|
-
font-size: var(--ig-subtitle-2-font-size);
|
|
72
|
-
font-weight: var(--ig-subtitle-2-font-weight);
|
|
73
|
-
font-style: var(--ig-subtitle-2-font-style);
|
|
74
|
-
line-height: var(--ig-subtitle-2-line-height);
|
|
75
|
-
letter-spacing: var(--ig-subtitle-2-letter-spacing);
|
|
76
|
-
text-transform: var(--ig-subtitle-2-text-transform);
|
|
77
|
-
margin-top: var(--ig-subtitle-2-margin-top);
|
|
78
|
-
margin-bottom: var(--ig-subtitle-2-margin-bottom);
|
|
79
70
|
}
|
|
80
71
|
[part~=base] ::slotted(igc-icon) {
|
|
81
72
|
display: -webkit-box;
|
|
@@ -93,6 +84,15 @@ export const styles = css `:host {
|
|
|
93
84
|
-o-text-overflow: ellipsis;
|
|
94
85
|
text-overflow: ellipsis;
|
|
95
86
|
overflow: hidden;
|
|
87
|
+
font-family: var(--ig-subtitle-2-font-family);
|
|
88
|
+
font-size: var(--ig-subtitle-2-font-size);
|
|
89
|
+
font-weight: var(--ig-subtitle-2-font-weight);
|
|
90
|
+
font-style: var(--ig-subtitle-2-font-style);
|
|
91
|
+
line-height: var(--ig-subtitle-2-line-height);
|
|
92
|
+
letter-spacing: var(--ig-subtitle-2-letter-spacing);
|
|
93
|
+
text-transform: var(--ig-subtitle-2-text-transform);
|
|
94
|
+
margin-top: var(--ig-subtitle-2-margin-top);
|
|
95
|
+
margin-bottom: var(--ig-subtitle-2-margin-bottom);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
[part="base mini"] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-drawer-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part~=base] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n gap: 2rem;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row nowrap;\n flex-flow: row nowrap;\n position: relative;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n max-height: 3rem;\n margin: 0.5rem
|
|
1
|
+
{"version":3,"file":"nav-drawer-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part~=base] {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n gap: 2rem;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row nowrap;\n flex-flow: row nowrap;\n position: relative;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n max-height: 3rem;\n margin: 0.5rem;\n padding: 0.75rem 0.5rem;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n outline: transparent;\n white-space: nowrap;\n text-decoration: none;\n width: calc(100% - 1rem);\n border: none;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-transition: background 0.15s ease-out;\n -o-transition: background 0.15s ease-out;\n transition: background 0.15s ease-out;\n}\n[part~=base] ::slotted(igc-icon) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font: inherit;\n}\n[part~=base]:hover, [part~=base]:focus-within {\n background: var(--hover-background, hsla(var(--ig-gray-200), 0.8));\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part=content] {\n white-space: nowrap;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n overflow: hidden;\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n}\n\n[part=\"base mini\"] {\n display: block;\n}\n[part=\"base mini\"] [part=content] {\n display: none;\n}\n[part=\"base mini\"] ::slotted(igc-icon) {\n width: 100%;\n}\n\n:host([disabled]) {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: initial;\n pointer-events: none;\n}\n:host([disabled]) [part~=base] {\n color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([active]) [part~=base] {\n background: var(--active-background, hsla(var(--ig-primary-500), 0.12));\n color: var(--active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}`;\n"]}
|