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