@tmorrow/cre8-wc 1.1.4 → 1.1.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/lib/components/card/card.styles.d.ts.map +1 -1
- package/lib/components/card/card.styles.js +338 -1
- package/lib/components/card/card.styles.js.map +1 -1
- package/lib/components/field/field.styles.d.ts.map +1 -1
- package/lib/components/field/field.styles.js +359 -1
- package/lib/components/field/field.styles.js.map +1 -1
- package/lib/components/inline-alert/inline-alert.styles.d.ts.map +1 -1
- package/lib/components/inline-alert/inline-alert.styles.js +392 -1
- package/lib/components/inline-alert/inline-alert.styles.js.map +1 -1
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_brand.css +2 -0
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts +1 -1
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts.map +1 -1
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.js +7 -3
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.js.map +1 -1
- package/lib/design-tokens/core/scss/theming/component.scss +1 -1
- package/lib/design-tokens/core/scss/theming/variables.css +39 -1
- package/lib/design-tokens/core/scss/theming/variables.scss +3 -1
- package/lib/scripts/generate-mcp-manifest.d.ts +8 -0
- package/lib/scripts/generate-mcp-manifest.d.ts.map +1 -0
- package/lib/scripts/generate-mcp-manifest.js +350 -0
- package/lib/scripts/generate-mcp-manifest.js.map +1 -0
- package/mcp-manifest.json +3844 -0
- package/package.json +7 -3
|
@@ -1,4 +1,395 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
const styles = css
|
|
2
|
+
const styles = css `
|
|
3
|
+
@charset "UTF-8";
|
|
4
|
+
/**
|
|
5
|
+
* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
|
|
6
|
+
*/
|
|
7
|
+
*,
|
|
8
|
+
::slotted(*),
|
|
9
|
+
*:before,
|
|
10
|
+
*:after {
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:root {
|
|
15
|
+
--size-base-unit: 0.5rem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* RTL support for values logical properties can't automatically adjust for
|
|
20
|
+
* 1) Percentage based horizontal translate values need to be flipped
|
|
21
|
+
* 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
|
|
22
|
+
* 3) Inverse items that have 45degs
|
|
23
|
+
*/
|
|
24
|
+
[dir=rtl] {
|
|
25
|
+
--rtlTranslateX: 50%;
|
|
26
|
+
/* 1 */
|
|
27
|
+
--rtlGradientToRight: 270deg;
|
|
28
|
+
/* 2 */
|
|
29
|
+
--rtlRotate45Inverse: -45deg;
|
|
30
|
+
/* 3 */
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Visible focus outline for elements on a light background
|
|
35
|
+
*/
|
|
36
|
+
/**
|
|
37
|
+
* Visible focus outline for elements with an error status
|
|
38
|
+
*/
|
|
39
|
+
/**
|
|
40
|
+
* Visible focus outline for elements on a dark background
|
|
41
|
+
*/
|
|
42
|
+
/**
|
|
43
|
+
* Focus state for themes that need a dashed outline for focus
|
|
44
|
+
* state
|
|
45
|
+
**/
|
|
46
|
+
/**
|
|
47
|
+
* Invisible focus outline for elements that need a more visible
|
|
48
|
+
* focus state for high-contrast mode
|
|
49
|
+
*/
|
|
50
|
+
/**
|
|
51
|
+
* Visually hidden from display
|
|
52
|
+
*/
|
|
53
|
+
/*
|
|
54
|
+
=======
|
|
55
|
+
Animations
|
|
56
|
+
=======
|
|
57
|
+
*/
|
|
58
|
+
:host {
|
|
59
|
+
--cre8-z-index-1: 1;
|
|
60
|
+
--cre8-z-index-50: 50;
|
|
61
|
+
--cre8-z-index-100: 100;
|
|
62
|
+
--cre8-z-index-200: 200;
|
|
63
|
+
--cre8-z-index-1030: 1030;
|
|
64
|
+
--cre8-anim-fade-quick: 0.35s;
|
|
65
|
+
--cre8-anim-ease: ease;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes fadeIn {
|
|
69
|
+
100% {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
@keyframes slideIn {
|
|
74
|
+
100% {
|
|
75
|
+
transform: translateX(0);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
@keyframes slideInFwd {
|
|
79
|
+
100% {
|
|
80
|
+
width: 272px;
|
|
81
|
+
height: 272px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
@keyframes slideOutRight {
|
|
85
|
+
100% {
|
|
86
|
+
width: 272px;
|
|
87
|
+
height: 272px;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
@keyframes slideUp {
|
|
91
|
+
100% {
|
|
92
|
+
transform: translateY(0);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
@media (width >= 481px) {
|
|
96
|
+
@keyframes slideInFwd {
|
|
97
|
+
100% {
|
|
98
|
+
width: 417px;
|
|
99
|
+
height: 417px;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
@keyframes slideOutRight {
|
|
103
|
+
100% {
|
|
104
|
+
width: 417px;
|
|
105
|
+
height: 417px;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
@media (width >= 48rem) {
|
|
110
|
+
@keyframes slideInFwd {
|
|
111
|
+
100% {
|
|
112
|
+
width: 330px;
|
|
113
|
+
height: 330px;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
@keyframes slideOutRight {
|
|
117
|
+
100% {
|
|
118
|
+
width: 330px;
|
|
119
|
+
height: 330px;
|
|
120
|
+
transform: translateX(calc(100vw - 45px));
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
@media (width >= 60rem) {
|
|
125
|
+
@keyframes slideInFwd {
|
|
126
|
+
100% {
|
|
127
|
+
width: 460px;
|
|
128
|
+
height: 460px;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
@keyframes slideOutRight {
|
|
132
|
+
100% {
|
|
133
|
+
width: 460px;
|
|
134
|
+
height: 460px;
|
|
135
|
+
transform: translateX(calc(100vw - 45px));
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
@media (width >= 75rem) {
|
|
140
|
+
@keyframes slideInFwd {
|
|
141
|
+
100% {
|
|
142
|
+
width: 592px;
|
|
143
|
+
height: 591px;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
@keyframes slideOutRight {
|
|
147
|
+
100% {
|
|
148
|
+
width: 592px;
|
|
149
|
+
height: 591px;
|
|
150
|
+
transform: translateX(calc(100vw - 45px));
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
@media (width >= 87.5rem) {
|
|
155
|
+
@keyframes slideOutRight {
|
|
156
|
+
100% {
|
|
157
|
+
width: 592px;
|
|
158
|
+
height: 591px;
|
|
159
|
+
transform: translateX(calc(100vw - 120px));
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
@media (width >= 2200px) {
|
|
164
|
+
@keyframes slideOutRight {
|
|
165
|
+
100% {
|
|
166
|
+
width: 592px;
|
|
167
|
+
height: 591px;
|
|
168
|
+
transform: translateX(calc(100vw - 592px));
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
span.ripple {
|
|
173
|
+
position: absolute;
|
|
174
|
+
border-radius: 50%;
|
|
175
|
+
transform: scale(0);
|
|
176
|
+
animation: ripple 600ms linear;
|
|
177
|
+
background-color: var(--ripple-bg-color);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@keyframes ripple {
|
|
181
|
+
to {
|
|
182
|
+
transform: scale(4);
|
|
183
|
+
opacity: 1;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
:root {
|
|
187
|
+
--size-base-unit: 0.5rem;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/**
|
|
191
|
+
* RTL support for values logical properties can't automatically adjust for
|
|
192
|
+
* 1) Percentage based horizontal translate values need to be flipped
|
|
193
|
+
* 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
|
|
194
|
+
* 3) Inverse items that have 45degs
|
|
195
|
+
*/
|
|
196
|
+
[dir=rtl] {
|
|
197
|
+
--rtlTranslateX: 50%;
|
|
198
|
+
/* 1 */
|
|
199
|
+
--rtlGradientToRight: 270deg;
|
|
200
|
+
/* 2 */
|
|
201
|
+
--rtlRotate45Inverse: -45deg;
|
|
202
|
+
/* 3 */
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/**
|
|
206
|
+
* Visible focus outline for elements on a light background
|
|
207
|
+
*/
|
|
208
|
+
/**
|
|
209
|
+
* Visible focus outline for elements with an error status
|
|
210
|
+
*/
|
|
211
|
+
/**
|
|
212
|
+
* Visible focus outline for elements on a dark background
|
|
213
|
+
*/
|
|
214
|
+
/**
|
|
215
|
+
* Focus state for themes that need a dashed outline for focus
|
|
216
|
+
* state
|
|
217
|
+
**/
|
|
218
|
+
/**
|
|
219
|
+
* Invisible focus outline for elements that need a more visible
|
|
220
|
+
* focus state for high-contrast mode
|
|
221
|
+
*/
|
|
222
|
+
/**
|
|
223
|
+
* Visually hidden from display
|
|
224
|
+
*/
|
|
225
|
+
:host {
|
|
226
|
+
display: inline-flex;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
:host([fullWidth]) {
|
|
230
|
+
display: flex;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* Inline alert
|
|
235
|
+
*/
|
|
236
|
+
.cre8-c-inline-alert {
|
|
237
|
+
font-family: var(--cre8-typography-body-default-font-family);
|
|
238
|
+
font-size: var(--cre8-typography-body-default-font-size);
|
|
239
|
+
font-weight: var(--cre8-typography-body-default-font-weight);
|
|
240
|
+
line-height: var(--cre8-typography-body-default-line-height);
|
|
241
|
+
-webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
|
|
242
|
+
text-decoration: var(--cre8-typography-body-default-text-decoration);
|
|
243
|
+
text-transform: var(--cre8-typography-body-default-text-transform);
|
|
244
|
+
font-weight: normal;
|
|
245
|
+
display: inline-flex;
|
|
246
|
+
align-items: flex-start;
|
|
247
|
+
gap: 0.5rem;
|
|
248
|
+
padding: 1rem;
|
|
249
|
+
color: var(--cre8-color-content-default);
|
|
250
|
+
background-color: var(--cre8-color-bg-info);
|
|
251
|
+
border-color: var(--cre8-color-border-info);
|
|
252
|
+
border-width: var(--cre8-border-width-default);
|
|
253
|
+
border-style: var(--cre8-border-style-default);
|
|
254
|
+
border-radius: var(--cre8-border-radius-container);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/**
|
|
258
|
+
* Full-width inline alert
|
|
259
|
+
*/
|
|
260
|
+
.cre8-c-inline-alert--full-width {
|
|
261
|
+
width: 100%;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/**
|
|
265
|
+
* Inline alert with error variant
|
|
266
|
+
*/
|
|
267
|
+
.cre8-c-inline-alert--error {
|
|
268
|
+
background-color: var(--cre8-color-bg-error);
|
|
269
|
+
border-color: var(--cre8-color-border-error);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
/**
|
|
273
|
+
* Inline alert with warning variant
|
|
274
|
+
*/
|
|
275
|
+
.cre8-c-inline-alert--warning {
|
|
276
|
+
background-color: var(--cre8-color-bg-warning);
|
|
277
|
+
border-color: var(--cre8-color-border-warning);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/**
|
|
281
|
+
* Inline alert with success variant
|
|
282
|
+
*/
|
|
283
|
+
.cre8-c-inline-alert--success {
|
|
284
|
+
background-color: var(--cre8-color-bg-success);
|
|
285
|
+
border-color: var(--cre8-color-border-success);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/**
|
|
289
|
+
* Inline alert with attention variant
|
|
290
|
+
*/
|
|
291
|
+
.cre8-c-inline-alert--attention {
|
|
292
|
+
background-color: var(--cre8-color-bg-attention);
|
|
293
|
+
border-color: var(--cre8-color-border-attention);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/**
|
|
297
|
+
* Inline alert with neutral variant
|
|
298
|
+
*/
|
|
299
|
+
.cre8-c-inline-alert--neutral {
|
|
300
|
+
background-color: var(--cre8-color-bg-subtle);
|
|
301
|
+
border-color: var(--cre8-color-border-strong);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/**
|
|
305
|
+
* Inline alert with variant - transparent
|
|
306
|
+
*/
|
|
307
|
+
.cre8-c-inline-alert--transparent {
|
|
308
|
+
padding: 0;
|
|
309
|
+
border: none;
|
|
310
|
+
background-color: transparent;
|
|
311
|
+
gap: 0.5rem;
|
|
312
|
+
border-radius: none;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/**
|
|
316
|
+
* Inline alert with variant - transparent and error
|
|
317
|
+
*/
|
|
318
|
+
.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error {
|
|
319
|
+
color: var(--cre8-color-content-error);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/**
|
|
323
|
+
* Inline alert with variant - transparent and success
|
|
324
|
+
*/
|
|
325
|
+
.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success {
|
|
326
|
+
color: var(--cre8-color-content-success);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
/**
|
|
330
|
+
* Inline alert icon
|
|
331
|
+
*/
|
|
332
|
+
.cre8-c-inline-alert__icon {
|
|
333
|
+
position: relative;
|
|
334
|
+
color: var(--cre8-color-content-info-icon);
|
|
335
|
+
height: 1.5rem;
|
|
336
|
+
width: 1.5rem;
|
|
337
|
+
/**
|
|
338
|
+
* Inline alert icon for error variant
|
|
339
|
+
*/
|
|
340
|
+
}
|
|
341
|
+
.cre8-c-inline-alert--error .cre8-c-inline-alert__icon {
|
|
342
|
+
color: var(--cre8-color-content-error-icon);
|
|
343
|
+
}
|
|
344
|
+
.cre8-c-inline-alert__icon {
|
|
345
|
+
/**
|
|
346
|
+
* Inline alert icon for warning variant
|
|
347
|
+
*/
|
|
348
|
+
}
|
|
349
|
+
.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon {
|
|
350
|
+
color: var(--cre8-color-content-warning-icon);
|
|
351
|
+
}
|
|
352
|
+
.cre8-c-inline-alert__icon {
|
|
353
|
+
/**
|
|
354
|
+
* Inline alert icon for success variant
|
|
355
|
+
*/
|
|
356
|
+
}
|
|
357
|
+
.cre8-c-inline-alert--success .cre8-c-inline-alert__icon {
|
|
358
|
+
color: var(--cre8-color-content-success-icon);
|
|
359
|
+
}
|
|
360
|
+
.cre8-c-inline-alert__icon {
|
|
361
|
+
/**
|
|
362
|
+
* Inline alert icon for help variant
|
|
363
|
+
* Inline alert icon for info variant
|
|
364
|
+
*/
|
|
365
|
+
}
|
|
366
|
+
.cre8-c-inline-alert__icon .cre8-c-inline-alert--help, .cre8-c-inline-alert--info .cre8-c-inline-alert__icon {
|
|
367
|
+
color: var(--cre8-color-content-info-icon);
|
|
368
|
+
}
|
|
369
|
+
.cre8-c-inline-alert__icon {
|
|
370
|
+
/**
|
|
371
|
+
* Inline alert icon for attention variant
|
|
372
|
+
*/
|
|
373
|
+
}
|
|
374
|
+
.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon {
|
|
375
|
+
color: var(--cre8-color-content-attention-icon);
|
|
376
|
+
}
|
|
377
|
+
.cre8-c-inline-alert__icon {
|
|
378
|
+
/**
|
|
379
|
+
* Inline alert icon for neutral variant
|
|
380
|
+
*/
|
|
381
|
+
}
|
|
382
|
+
.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon {
|
|
383
|
+
color: var(--cre8-color-content-default);
|
|
384
|
+
}
|
|
385
|
+
.cre8-c-inline-alert__icon {
|
|
386
|
+
/**
|
|
387
|
+
* Inline alert icon
|
|
388
|
+
*/
|
|
389
|
+
}
|
|
390
|
+
.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon {
|
|
391
|
+
top: 0;
|
|
392
|
+
padding: 0.125rem;
|
|
393
|
+
}/*# sourceMappingURL=inline-alert.module.css.map */`;
|
|
3
394
|
export default styles;
|
|
4
395
|
//# sourceMappingURL=inline-alert.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inline-alert.styles.js","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"inline-alert.styles.js","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAuYmC,CAAC;AACtD,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`\n@charset \"UTF-8\";\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n --rtlTranslateX: 50%;\n /* 1 */\n --rtlGradientToRight: 270deg;\n /* 2 */\n --rtlRotate45Inverse: -45deg;\n /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n --rtlTranslateX: 50%;\n /* 1 */\n --rtlGradientToRight: 270deg;\n /* 2 */\n --rtlRotate45Inverse: -45deg;\n /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n display: inline-flex;\n}\n\n:host([fullWidth]) {\n display: flex;\n}\n\n/**\n * Inline alert\n */\n.cre8-c-inline-alert {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n font-weight: normal;\n display: inline-flex;\n align-items: flex-start;\n gap: 0.5rem;\n padding: 1rem;\n color: var(--cre8-color-content-default);\n background-color: var(--cre8-color-bg-info);\n border-color: var(--cre8-color-border-info);\n border-width: var(--cre8-border-width-default);\n border-style: var(--cre8-border-style-default);\n border-radius: var(--cre8-border-radius-container);\n}\n\n/**\n * Full-width inline alert\n */\n.cre8-c-inline-alert--full-width {\n width: 100%;\n}\n\n/**\n * Inline alert with error variant\n */\n.cre8-c-inline-alert--error {\n background-color: var(--cre8-color-bg-error);\n border-color: var(--cre8-color-border-error);\n}\n\n/**\n * Inline alert with warning variant\n */\n.cre8-c-inline-alert--warning {\n background-color: var(--cre8-color-bg-warning);\n border-color: var(--cre8-color-border-warning);\n}\n\n/**\n * Inline alert with success variant\n */\n.cre8-c-inline-alert--success {\n background-color: var(--cre8-color-bg-success);\n border-color: var(--cre8-color-border-success);\n}\n\n/**\n * Inline alert with attention variant\n */\n.cre8-c-inline-alert--attention {\n background-color: var(--cre8-color-bg-attention);\n border-color: var(--cre8-color-border-attention);\n}\n\n/**\n * Inline alert with neutral variant\n */\n.cre8-c-inline-alert--neutral {\n background-color: var(--cre8-color-bg-subtle);\n border-color: var(--cre8-color-border-strong);\n}\n\n/**\n * Inline alert with variant - transparent\n */\n.cre8-c-inline-alert--transparent {\n padding: 0;\n border: none;\n background-color: transparent;\n gap: 0.5rem;\n border-radius: none;\n}\n\n/**\n * Inline alert with variant - transparent and error\n */\n.cre8-c-inline-alert--transparent.cre8-c-inline-alert--error {\n color: var(--cre8-color-content-error);\n}\n\n/**\n * Inline alert with variant - transparent and success\n */\n.cre8-c-inline-alert--transparent.cre8-c-inline-alert--success {\n color: var(--cre8-color-content-success);\n}\n\n/**\n * Inline alert icon\n */\n.cre8-c-inline-alert__icon {\n position: relative;\n color: var(--cre8-color-content-info-icon);\n height: 1.5rem;\n width: 1.5rem;\n /**\n * Inline alert icon for error variant\n */\n}\n.cre8-c-inline-alert--error .cre8-c-inline-alert__icon {\n color: var(--cre8-color-content-error-icon);\n}\n.cre8-c-inline-alert__icon {\n /**\n * Inline alert icon for warning variant\n */\n}\n.cre8-c-inline-alert--warning .cre8-c-inline-alert__icon {\n color: var(--cre8-color-content-warning-icon);\n}\n.cre8-c-inline-alert__icon {\n /**\n * Inline alert icon for success variant\n */\n}\n.cre8-c-inline-alert--success .cre8-c-inline-alert__icon {\n color: var(--cre8-color-content-success-icon);\n}\n.cre8-c-inline-alert__icon {\n /**\n * Inline alert icon for help variant\n * Inline alert icon for info variant\n */\n}\n.cre8-c-inline-alert__icon .cre8-c-inline-alert--help, .cre8-c-inline-alert--info .cre8-c-inline-alert__icon {\n color: var(--cre8-color-content-info-icon);\n}\n.cre8-c-inline-alert__icon {\n /**\n * Inline alert icon for attention variant\n */\n}\n.cre8-c-inline-alert--attention .cre8-c-inline-alert__icon {\n color: var(--cre8-color-content-attention-icon);\n}\n.cre8-c-inline-alert__icon {\n /**\n * Inline alert icon for neutral variant\n */\n}\n.cre8-c-inline-alert--neutral .cre8-c-inline-alert__icon {\n color: var(--cre8-color-content-default);\n}\n.cre8-c-inline-alert__icon {\n /**\n * Inline alert icon\n */\n}\n.cre8-c-inline-alert--transparent .cre8-c-inline-alert__icon {\n top: 0;\n padding: 0.125rem;\n}/*# sourceMappingURL=inline-alert.module.css.map */`;\nexport default styles;\n"]}
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
:root {
|
|
6
6
|
--cre8-desktop-menu-padding-vertical-padding: 1rem;
|
|
7
7
|
--cre8-desktop-menu-padding-horizontal-padding: 0.5rem;
|
|
8
|
+
--cre8-input-padding: 1.5rem 2rem;
|
|
9
|
+
--cre8-input-label-margin-left: 1rem;
|
|
8
10
|
--cre8-color-header-bg-default: #ffffff;
|
|
9
11
|
--cre8-color-header-inverse-bg-default: #3B82F6;
|
|
10
12
|
--cre8-color-header-menu-bg-default: #ffffff;
|