@tmorrow/cre8-wc 2.0.0 → 2.0.2
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/cdn/cre8-wc.esm.js +9030 -7527
- package/cdn/cre8-wc.esm.js.map +1 -1
- package/cdn/cre8-wc.min.js +5864 -4362
- package/cdn/cre8-wc.min.js.map +1 -1
- package/lib/components/date-picker/date-picker.styles.d.ts.map +1 -1
- package/lib/components/date-picker/date-picker.styles.js +955 -1
- package/lib/components/date-picker/date-picker.styles.js.map +1 -1
- package/lib/components/icon/icon.d.ts +4 -4
- package/lib/components/icon/icon.d.ts.map +1 -1
- package/lib/components/icon/icon.js +59 -61
- package/lib/components/icon/icon.js.map +1 -1
- package/lib/components/select-tile/select-tile.styles.d.ts.map +1 -1
- package/lib/components/select-tile/select-tile.styles.js +1055 -1
- package/lib/components/select-tile/select-tile.styles.js.map +1 -1
- package/mcp-manifest.json +2 -2
- package/package.json +1 -1
|
@@ -1,4 +1,958 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
const styles = css
|
|
2
|
+
const styles = css `.cre8-u-content-knockout-brand {
|
|
3
|
+
color: var(----cre8-color-content-knockout-brand);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.cre8-u-is-hidden {
|
|
7
|
+
display: none !important;
|
|
8
|
+
visibility: hidden !important;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.cre8-u-is-vishidden {
|
|
12
|
+
position: absolute !important;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
width: 1px;
|
|
15
|
+
height: 1px;
|
|
16
|
+
padding: 0;
|
|
17
|
+
border: 0;
|
|
18
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@media all and (min-width: 23.4375rem) {
|
|
22
|
+
.cre8-u-hide-sm {
|
|
23
|
+
display: none !important;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
@media all and (min-width: 35rem) {
|
|
27
|
+
.cre8-u-hide-sm-2 {
|
|
28
|
+
display: none !important;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
@media all and (min-width: 48rem) {
|
|
32
|
+
.cre8-u-hide-md {
|
|
33
|
+
display: none !important;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
@media all and (min-width: 60rem) {
|
|
37
|
+
.cre8-u-hide-lg {
|
|
38
|
+
display: none !important;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
@media all and (min-width: 75rem) {
|
|
42
|
+
.cre8-u-hide-xl {
|
|
43
|
+
display: none !important;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
@media all and (max-width: 23.4375rem) {
|
|
47
|
+
.cre8-u-show-sm {
|
|
48
|
+
display: none !important;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
@media all and (max-width: 35rem) {
|
|
52
|
+
.cre8-u-show-sm-2 {
|
|
53
|
+
display: none !important;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
@media all and (max-width: 48rem) {
|
|
57
|
+
.cre8-u-show-md {
|
|
58
|
+
display: none !important;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
@media all and (max-width: 60rem) {
|
|
62
|
+
.cre8-u-show-lg {
|
|
63
|
+
display: none !important;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
@media all and (max-width: 75rem) {
|
|
67
|
+
.cre8-u-show-xl {
|
|
68
|
+
display: none !important;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
.cre8-u-margin-none {
|
|
72
|
+
margin: 0 !important;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.cre8-u-margin-sm {
|
|
76
|
+
margin: size(1) !important;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.cre8-u-margin-md {
|
|
80
|
+
margin: size(2) !important;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.cre8-u-margin-lg {
|
|
84
|
+
margin: size(3) !important;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.cre8-u-margin-xl {
|
|
88
|
+
margin: size(4) !important;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.cre8-u-margin-xxl {
|
|
92
|
+
margin: size(8) !important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.cre8-u-margin-top-none {
|
|
96
|
+
margin-top: 0 !important;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.cre8-u-margin-top-sm {
|
|
100
|
+
margin-top: size(1) !important;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.cre8-u-margin-top-md {
|
|
104
|
+
margin-top: size(2) !important;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.cre8-u-margin-top-lg {
|
|
108
|
+
margin-top: size(3) !important;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.cre8-u-margin-top-xl {
|
|
112
|
+
margin-top: size(4) !important;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.cre8-u-margin-top-xxl {
|
|
116
|
+
margin-top: size(8) !important;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.cre8-u-margin-right-none {
|
|
120
|
+
margin-right: 0 !important;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.cre8-u-margin-right-sm {
|
|
124
|
+
margin-right: size(1) !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.cre8-u-margin-right-md {
|
|
128
|
+
margin-right: size(2) !important;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.cre8-u-margin-right-lg {
|
|
132
|
+
margin-right: size(3) !important;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.cre8-u-margin-right-xl {
|
|
136
|
+
margin-right: size(4) !important;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.cre8-u-margin-right-xxl {
|
|
140
|
+
margin-right: size(8) !important;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.cre8-u-margin-bottom-none {
|
|
144
|
+
margin-bottom: 0 !important;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.cre8-u-margin-bottom-sm {
|
|
148
|
+
margin-bottom: size(1) !important;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.cre8-u-margin-bottom-md {
|
|
152
|
+
margin-bottom: size(2) !important;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.cre8-u-margin-bottom-lg {
|
|
156
|
+
margin-bottom: size(3) !important;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.cre8-u-margin-bottom-xl {
|
|
160
|
+
margin-bottom: size(4) !important;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.cre8-u-margin-bottom-xxl {
|
|
164
|
+
margin-bottom: size(8) !important;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.cre8-u-margin-bottom-xl-xxl {
|
|
168
|
+
margin-bottom: size(4) !important;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@media all and (min-width: 768px) {
|
|
172
|
+
.cre8-u-margin-bottom-xl-xxl {
|
|
173
|
+
margin-bottom: size(8) !important;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
.cre8-u-margin-left-none {
|
|
177
|
+
margin-left: 0 !important;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.cre8-u-margin-left-sm {
|
|
181
|
+
margin-left: size(1) !important;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.cre8-u-margin-left-md {
|
|
185
|
+
margin-left: size(2) !important;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.cre8-u-margin-left-lg {
|
|
189
|
+
margin-left: size(3) !important;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.cre8-u-margin-left-xl {
|
|
193
|
+
margin-left: size(4) !important;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.cre8-u-margin-left-xxl {
|
|
197
|
+
margin-left: size(8) !important;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.cre8-u-padding-none {
|
|
201
|
+
padding: 0 !important;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.cre8-u-padding-sm {
|
|
205
|
+
padding: size(1) !important;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.cre8-u-padding-md {
|
|
209
|
+
padding: size(2) !important;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.cre8-u-padding-lg {
|
|
213
|
+
padding: size(3) !important;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.cre8-u-padding-xl {
|
|
217
|
+
padding: size(4) !important;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.cre8-u-padding-xxl {
|
|
221
|
+
padding: size(8) !important;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.cre8-u-padding-top-none {
|
|
225
|
+
padding-top: 0 !important;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.cre8-u-padding-top-sm {
|
|
229
|
+
padding-top: size(1) !important;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.cre8-u-padding-top-md {
|
|
233
|
+
padding-top: size(2) !important;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.cre8-u-padding-top-lg {
|
|
237
|
+
padding-top: size(3) !important;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.cre8-u-padding-top-xl {
|
|
241
|
+
padding-top: size(4) !important;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.cre8-u-padding-top-xxl {
|
|
245
|
+
padding-top: size(8) !important;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.cre8-u-padding-right-none {
|
|
249
|
+
padding-right: 0 !important;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.cre8-u-padding-right-sm {
|
|
253
|
+
padding-right: size(1) !important;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.cre8-u-padding-right-md {
|
|
257
|
+
padding-right: size(2) !important;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.cre8-u-padding-right-lg {
|
|
261
|
+
padding-right: size(3) !important;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.cre8-u-padding-right-xl {
|
|
265
|
+
padding-right: size(4) !important;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.cre8-u-padding-right-xxl {
|
|
269
|
+
padding-right: size(8) !important;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.cre8-u-padding-bottom-none {
|
|
273
|
+
padding-bottom: 0 !important;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.cre8-u-padding-bottom-sm {
|
|
277
|
+
padding-bottom: size(1) !important;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.cre8-u-padding-bottom-md {
|
|
281
|
+
padding-bottom: size(2) !important;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.cre8-u-padding-bottom-lg {
|
|
285
|
+
padding-bottom: size(3) !important;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.cre8-u-padding-bottom-xl {
|
|
289
|
+
padding-bottom: size(4) !important;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.cre8-u-padding-bottom-xxl {
|
|
293
|
+
padding-bottom: size(8) !important;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.cre8-u-padding-left-none {
|
|
297
|
+
padding-left: 0 !important;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.cre8-u-padding-left-sm {
|
|
301
|
+
padding-left: size(1) !important;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.cre8-u-padding-left-md {
|
|
305
|
+
padding-left: size(2) !important;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.cre8-u-padding-left-lg {
|
|
309
|
+
padding-left: size(3) !important;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.cre8-u-padding-left-xl {
|
|
313
|
+
padding-left: size(4) !important;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.cre8-u-padding-left-xxl {
|
|
317
|
+
padding-left: size(8) !important;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.cre8-u-display-flex {
|
|
321
|
+
display: flex !important;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.cre8-u-display-block {
|
|
325
|
+
display: block !important;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
body {
|
|
329
|
+
font-family: var(--cre8-typography-body-default-font-family);
|
|
330
|
+
font-size: var(--cre8-typography-body-default-font-size);
|
|
331
|
+
font-weight: var(--cre8-typography-body-default-font-weight);
|
|
332
|
+
line-height: var(--cre8-typography-body-default-line-height);
|
|
333
|
+
-webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
|
|
334
|
+
text-decoration: var(--cre8-typography-body-default-text-decoration);
|
|
335
|
+
text-transform: var(--cre8-typography-body-default-text-transform);
|
|
336
|
+
display: flex;
|
|
337
|
+
flex-direction: column;
|
|
338
|
+
padding: 0;
|
|
339
|
+
margin: 0;
|
|
340
|
+
color: var(--cre8-color-content-default);
|
|
341
|
+
background: var(--background-default);
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
@media all and (min-width: 60rem) {
|
|
345
|
+
.page-container {
|
|
346
|
+
background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
.band__inner {
|
|
350
|
+
margin-left: 2rem;
|
|
351
|
+
margin-right: 2rem;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
@media all and (min-width: 60rem) {
|
|
355
|
+
.band__inner {
|
|
356
|
+
margin-right: 0;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
img {
|
|
360
|
+
max-width: 100%;
|
|
361
|
+
height: auto;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
/**
|
|
365
|
+
* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
|
|
366
|
+
*/
|
|
367
|
+
*,
|
|
368
|
+
::slotted(*),
|
|
369
|
+
*:before,
|
|
370
|
+
*:after {
|
|
371
|
+
box-sizing: border-box;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
:root {
|
|
375
|
+
--size-base-unit: 0.5rem;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* RTL support for values logical properties can't automatically adjust for
|
|
380
|
+
* 1) Percentage based horizontal translate values need to be flipped
|
|
381
|
+
* 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
|
|
382
|
+
* 3) Inverse items that have 45degs
|
|
383
|
+
*/
|
|
384
|
+
[dir=rtl] {
|
|
385
|
+
--rtlTranslateX: 50%;
|
|
386
|
+
/* 1 */
|
|
387
|
+
--rtlGradientToRight: 270deg;
|
|
388
|
+
/* 2 */
|
|
389
|
+
--rtlRotate45Inverse: -45deg;
|
|
390
|
+
/* 3 */
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/**
|
|
394
|
+
* Visible focus outline for elements on a light background
|
|
395
|
+
*/
|
|
396
|
+
/**
|
|
397
|
+
* Visible focus outline for elements with an error status
|
|
398
|
+
*/
|
|
399
|
+
/**
|
|
400
|
+
* Visible focus outline for elements on a dark background
|
|
401
|
+
*/
|
|
402
|
+
/**
|
|
403
|
+
* Focus state for themes that need a dashed outline for focus
|
|
404
|
+
* state
|
|
405
|
+
**/
|
|
406
|
+
/**
|
|
407
|
+
* Invisible focus outline for elements that need a more visible
|
|
408
|
+
* focus state for high-contrast mode
|
|
409
|
+
*/
|
|
410
|
+
/**
|
|
411
|
+
* Visually hidden from display
|
|
412
|
+
*/
|
|
413
|
+
/*
|
|
414
|
+
=======
|
|
415
|
+
Animations
|
|
416
|
+
=======
|
|
417
|
+
*/
|
|
418
|
+
:host {
|
|
419
|
+
--cre8-z-index-1: 1;
|
|
420
|
+
--cre8-z-index-50: 50;
|
|
421
|
+
--cre8-z-index-100: 100;
|
|
422
|
+
--cre8-z-index-200: 200;
|
|
423
|
+
--cre8-z-index-1030: 1030;
|
|
424
|
+
--cre8-anim-fade-quick: 0.35s;
|
|
425
|
+
--cre8-anim-ease: ease;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
@keyframes fadeIn {
|
|
429
|
+
100% {
|
|
430
|
+
opacity: 1;
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
@keyframes slideIn {
|
|
434
|
+
100% {
|
|
435
|
+
transform: translateX(0);
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
@keyframes slideInFwd {
|
|
439
|
+
100% {
|
|
440
|
+
width: 272px;
|
|
441
|
+
height: 272px;
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
@keyframes slideOutRight {
|
|
445
|
+
100% {
|
|
446
|
+
width: 272px;
|
|
447
|
+
height: 272px;
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
@keyframes slideUp {
|
|
451
|
+
100% {
|
|
452
|
+
transform: translateY(0);
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
@media (width >= 481px) {
|
|
456
|
+
@keyframes slideInFwd {
|
|
457
|
+
100% {
|
|
458
|
+
width: 417px;
|
|
459
|
+
height: 417px;
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
@keyframes slideOutRight {
|
|
463
|
+
100% {
|
|
464
|
+
width: 417px;
|
|
465
|
+
height: 417px;
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
@media (width >= 48rem) {
|
|
470
|
+
@keyframes slideInFwd {
|
|
471
|
+
100% {
|
|
472
|
+
width: 330px;
|
|
473
|
+
height: 330px;
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
@keyframes slideOutRight {
|
|
477
|
+
100% {
|
|
478
|
+
width: 330px;
|
|
479
|
+
height: 330px;
|
|
480
|
+
transform: translateX(calc(100vw - 45px));
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
@media (width >= 60rem) {
|
|
485
|
+
@keyframes slideInFwd {
|
|
486
|
+
100% {
|
|
487
|
+
width: 460px;
|
|
488
|
+
height: 460px;
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
@keyframes slideOutRight {
|
|
492
|
+
100% {
|
|
493
|
+
width: 460px;
|
|
494
|
+
height: 460px;
|
|
495
|
+
transform: translateX(calc(100vw - 45px));
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
@media (width >= 75rem) {
|
|
500
|
+
@keyframes slideInFwd {
|
|
501
|
+
100% {
|
|
502
|
+
width: 592px;
|
|
503
|
+
height: 591px;
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
@keyframes slideOutRight {
|
|
507
|
+
100% {
|
|
508
|
+
width: 592px;
|
|
509
|
+
height: 591px;
|
|
510
|
+
transform: translateX(calc(100vw - 45px));
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
@media (width >= 87.5rem) {
|
|
515
|
+
@keyframes slideOutRight {
|
|
516
|
+
100% {
|
|
517
|
+
width: 592px;
|
|
518
|
+
height: 591px;
|
|
519
|
+
transform: translateX(calc(100vw - 120px));
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
@media (width >= 2200px) {
|
|
524
|
+
@keyframes slideOutRight {
|
|
525
|
+
100% {
|
|
526
|
+
width: 592px;
|
|
527
|
+
height: 591px;
|
|
528
|
+
transform: translateX(calc(100vw - 592px));
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
span.ripple {
|
|
533
|
+
position: absolute;
|
|
534
|
+
border-radius: 50%;
|
|
535
|
+
transform: scale(0);
|
|
536
|
+
animation: ripple 600ms linear;
|
|
537
|
+
background-color: var(--ripple-bg-color);
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
@keyframes ripple {
|
|
541
|
+
to {
|
|
542
|
+
transform: scale(4);
|
|
543
|
+
opacity: 1;
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
:root {
|
|
547
|
+
--size-base-unit: 0.5rem;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
/**
|
|
551
|
+
* RTL support for values logical properties can't automatically adjust for
|
|
552
|
+
* 1) Percentage based horizontal translate values need to be flipped
|
|
553
|
+
* 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
|
|
554
|
+
* 3) Inverse items that have 45degs
|
|
555
|
+
*/
|
|
556
|
+
[dir=rtl] {
|
|
557
|
+
--rtlTranslateX: 50%;
|
|
558
|
+
/* 1 */
|
|
559
|
+
--rtlGradientToRight: 270deg;
|
|
560
|
+
/* 2 */
|
|
561
|
+
--rtlRotate45Inverse: -45deg;
|
|
562
|
+
/* 3 */
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
/**
|
|
566
|
+
* Visible focus outline for elements on a light background
|
|
567
|
+
*/
|
|
568
|
+
/**
|
|
569
|
+
* Visible focus outline for elements with an error status
|
|
570
|
+
*/
|
|
571
|
+
/**
|
|
572
|
+
* Visible focus outline for elements on a dark background
|
|
573
|
+
*/
|
|
574
|
+
/**
|
|
575
|
+
* Focus state for themes that need a dashed outline for focus
|
|
576
|
+
* state
|
|
577
|
+
**/
|
|
578
|
+
/**
|
|
579
|
+
* Invisible focus outline for elements that need a more visible
|
|
580
|
+
* focus state for high-contrast mode
|
|
581
|
+
*/
|
|
582
|
+
/**
|
|
583
|
+
* Visually hidden from display
|
|
584
|
+
*/
|
|
585
|
+
/**
|
|
586
|
+
* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
|
|
587
|
+
*/
|
|
588
|
+
*,
|
|
589
|
+
::slotted(*),
|
|
590
|
+
*:before,
|
|
591
|
+
*:after {
|
|
592
|
+
box-sizing: border-box;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
:root {
|
|
596
|
+
--size-base-unit: 0.5rem;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
/**
|
|
600
|
+
* RTL support for values logical properties can't automatically adjust for
|
|
601
|
+
* 1) Percentage based horizontal translate values need to be flipped
|
|
602
|
+
* 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
|
|
603
|
+
* 3) Inverse items that have 45degs
|
|
604
|
+
*/
|
|
605
|
+
[dir=rtl] {
|
|
606
|
+
--rtlTranslateX: 50%;
|
|
607
|
+
/* 1 */
|
|
608
|
+
--rtlGradientToRight: 270deg;
|
|
609
|
+
/* 2 */
|
|
610
|
+
--rtlRotate45Inverse: -45deg;
|
|
611
|
+
/* 3 */
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
/**
|
|
615
|
+
* Visible focus outline for elements on a light background
|
|
616
|
+
*/
|
|
617
|
+
/**
|
|
618
|
+
* Visible focus outline for elements with an error status
|
|
619
|
+
*/
|
|
620
|
+
/**
|
|
621
|
+
* Visible focus outline for elements on a dark background
|
|
622
|
+
*/
|
|
623
|
+
/**
|
|
624
|
+
* Focus state for themes that need a dashed outline for focus
|
|
625
|
+
* state
|
|
626
|
+
**/
|
|
627
|
+
/**
|
|
628
|
+
* Invisible focus outline for elements that need a more visible
|
|
629
|
+
* focus state for high-contrast mode
|
|
630
|
+
*/
|
|
631
|
+
/**
|
|
632
|
+
* Visually hidden from display
|
|
633
|
+
*/
|
|
634
|
+
/*
|
|
635
|
+
=======
|
|
636
|
+
Animations
|
|
637
|
+
=======
|
|
638
|
+
*/
|
|
639
|
+
:host {
|
|
640
|
+
--cre8-z-index-1: 1;
|
|
641
|
+
--cre8-z-index-50: 50;
|
|
642
|
+
--cre8-z-index-100: 100;
|
|
643
|
+
--cre8-z-index-200: 200;
|
|
644
|
+
--cre8-z-index-1030: 1030;
|
|
645
|
+
--cre8-anim-fade-quick: 0.35s;
|
|
646
|
+
--cre8-anim-ease: ease;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
@keyframes fadeIn {
|
|
650
|
+
100% {
|
|
651
|
+
opacity: 1;
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
@keyframes slideIn {
|
|
655
|
+
100% {
|
|
656
|
+
transform: translateX(0);
|
|
657
|
+
}
|
|
658
|
+
}
|
|
659
|
+
@keyframes slideInFwd {
|
|
660
|
+
100% {
|
|
661
|
+
width: 272px;
|
|
662
|
+
height: 272px;
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
@keyframes slideOutRight {
|
|
666
|
+
100% {
|
|
667
|
+
width: 272px;
|
|
668
|
+
height: 272px;
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
@keyframes slideUp {
|
|
672
|
+
100% {
|
|
673
|
+
transform: translateY(0);
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
@media (width >= 481px) {
|
|
677
|
+
@keyframes slideInFwd {
|
|
678
|
+
100% {
|
|
679
|
+
width: 417px;
|
|
680
|
+
height: 417px;
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
@keyframes slideOutRight {
|
|
684
|
+
100% {
|
|
685
|
+
width: 417px;
|
|
686
|
+
height: 417px;
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
@media (width >= 48rem) {
|
|
691
|
+
@keyframes slideInFwd {
|
|
692
|
+
100% {
|
|
693
|
+
width: 330px;
|
|
694
|
+
height: 330px;
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
@keyframes slideOutRight {
|
|
698
|
+
100% {
|
|
699
|
+
width: 330px;
|
|
700
|
+
height: 330px;
|
|
701
|
+
transform: translateX(calc(100vw - 45px));
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
@media (width >= 60rem) {
|
|
706
|
+
@keyframes slideInFwd {
|
|
707
|
+
100% {
|
|
708
|
+
width: 460px;
|
|
709
|
+
height: 460px;
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
@keyframes slideOutRight {
|
|
713
|
+
100% {
|
|
714
|
+
width: 460px;
|
|
715
|
+
height: 460px;
|
|
716
|
+
transform: translateX(calc(100vw - 45px));
|
|
717
|
+
}
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
@media (width >= 75rem) {
|
|
721
|
+
@keyframes slideInFwd {
|
|
722
|
+
100% {
|
|
723
|
+
width: 592px;
|
|
724
|
+
height: 591px;
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
@keyframes slideOutRight {
|
|
728
|
+
100% {
|
|
729
|
+
width: 592px;
|
|
730
|
+
height: 591px;
|
|
731
|
+
transform: translateX(calc(100vw - 45px));
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
@media (width >= 87.5rem) {
|
|
736
|
+
@keyframes slideOutRight {
|
|
737
|
+
100% {
|
|
738
|
+
width: 592px;
|
|
739
|
+
height: 591px;
|
|
740
|
+
transform: translateX(calc(100vw - 120px));
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
}
|
|
744
|
+
@media (width >= 2200px) {
|
|
745
|
+
@keyframes slideOutRight {
|
|
746
|
+
100% {
|
|
747
|
+
width: 592px;
|
|
748
|
+
height: 591px;
|
|
749
|
+
transform: translateX(calc(100vw - 592px));
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
}
|
|
753
|
+
span.ripple {
|
|
754
|
+
position: absolute;
|
|
755
|
+
border-radius: 50%;
|
|
756
|
+
transform: scale(0);
|
|
757
|
+
animation: ripple 600ms linear;
|
|
758
|
+
background-color: var(--ripple-bg-color);
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
@keyframes ripple {
|
|
762
|
+
to {
|
|
763
|
+
transform: scale(4);
|
|
764
|
+
opacity: 1;
|
|
765
|
+
}
|
|
766
|
+
}
|
|
767
|
+
:root {
|
|
768
|
+
--size-base-unit: 0.5rem;
|
|
769
|
+
}
|
|
770
|
+
|
|
771
|
+
/**
|
|
772
|
+
* RTL support for values logical properties can't automatically adjust for
|
|
773
|
+
* 1) Percentage based horizontal translate values need to be flipped
|
|
774
|
+
* 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
|
|
775
|
+
* 3) Inverse items that have 45degs
|
|
776
|
+
*/
|
|
777
|
+
[dir=rtl] {
|
|
778
|
+
--rtlTranslateX: 50%;
|
|
779
|
+
/* 1 */
|
|
780
|
+
--rtlGradientToRight: 270deg;
|
|
781
|
+
/* 2 */
|
|
782
|
+
--rtlRotate45Inverse: -45deg;
|
|
783
|
+
/* 3 */
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
/**
|
|
787
|
+
* Visible focus outline for elements on a light background
|
|
788
|
+
*/
|
|
789
|
+
/**
|
|
790
|
+
* Visible focus outline for elements with an error status
|
|
791
|
+
*/
|
|
792
|
+
/**
|
|
793
|
+
* Visible focus outline for elements on a dark background
|
|
794
|
+
*/
|
|
795
|
+
/**
|
|
796
|
+
* Focus state for themes that need a dashed outline for focus
|
|
797
|
+
* state
|
|
798
|
+
**/
|
|
799
|
+
/**
|
|
800
|
+
* Invisible focus outline for elements that need a more visible
|
|
801
|
+
* focus state for high-contrast mode
|
|
802
|
+
*/
|
|
803
|
+
/**
|
|
804
|
+
* Visually hidden from display
|
|
805
|
+
*/
|
|
806
|
+
:host {
|
|
807
|
+
display: block;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
/**
|
|
811
|
+
* Date Field Label
|
|
812
|
+
*/
|
|
813
|
+
.cre8-c-date-picker__label {
|
|
814
|
+
font-family: var(--cre8-typography-label-small-font-family);
|
|
815
|
+
font-size: var(--cre8-typography-label-small-font-size);
|
|
816
|
+
font-weight: var(--cre8-typography-label-small-font-weight);
|
|
817
|
+
line-height: var(--cre8-typography-label-small-line-height);
|
|
818
|
+
text-decoration: var(--cre8-typography-label-small-text-decoration);
|
|
819
|
+
text-transform: var(--cre8-typography-label-small-text-transform);
|
|
820
|
+
display: block;
|
|
821
|
+
margin-bottom: 0.5rem;
|
|
822
|
+
margin-left: var(--cre8-input-label-margin-left, 0px);
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
/**
|
|
826
|
+
* Date Field Body
|
|
827
|
+
* 1) The div that contains the input and icons
|
|
828
|
+
*/
|
|
829
|
+
.cre8-c-date-picker__body {
|
|
830
|
+
position: relative;
|
|
831
|
+
display: flex;
|
|
832
|
+
align-items: center;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
/**
|
|
836
|
+
* Date Field Default Calendar Icon Button
|
|
837
|
+
* 1) Removes default calendar button and default calendar in Chrome
|
|
838
|
+
*/
|
|
839
|
+
input::-webkit-calendar-picker-indicator {
|
|
840
|
+
display: none;
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
input[type=date]::-webkit-input-placeholder {
|
|
844
|
+
visibility: hidden !important;
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
.cre8-c-date-picker__calendar-icon-button {
|
|
848
|
+
position: absolute;
|
|
849
|
+
right: 0.5rem;
|
|
850
|
+
background: var(--cre8-color-bg-default);
|
|
851
|
+
border: none;
|
|
852
|
+
border-radius: 0;
|
|
853
|
+
--cre8-icon-height: size(3);
|
|
854
|
+
--cre8-icon-width: size(3);
|
|
855
|
+
}
|
|
856
|
+
.cre8-c-date-picker--disabled .cre8-c-date-picker__calendar-icon-button, .cre8-c-date-picker--read-only .cre8-c-date-picker__calendar-icon-button {
|
|
857
|
+
background: var(--cre8-color-bg-disabled);
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
/**
|
|
861
|
+
* Date Field Input
|
|
862
|
+
* 1) The html5 input element
|
|
863
|
+
*/
|
|
864
|
+
.cre8-c-date-picker__input {
|
|
865
|
+
font-family: var(--cre8-typography-body-default-font-family);
|
|
866
|
+
font-size: var(--cre8-typography-body-default-font-size);
|
|
867
|
+
font-weight: var(--cre8-typography-body-default-font-weight);
|
|
868
|
+
line-height: var(--cre8-typography-body-default-line-height);
|
|
869
|
+
text-decoration: var(--cre8-typography-body-default-text-decoration);
|
|
870
|
+
text-transform: var(--cre8-typography-body-default-text-transform);
|
|
871
|
+
outline: var(--cre8-border-width-focus) solid transparent;
|
|
872
|
+
outline-offset: 0.125rem;
|
|
873
|
+
--size-base-unit: .5rem;
|
|
874
|
+
-webkit-appearance: none;
|
|
875
|
+
width: 100%;
|
|
876
|
+
border-width: var(--cre8-border-width-default);
|
|
877
|
+
border-style: solid;
|
|
878
|
+
border-color: var(--cre8-color-border-strong);
|
|
879
|
+
border-radius: var(--cre8-border-radius-default);
|
|
880
|
+
padding: var(--cre8-input-padding, 0.75rem 0.5rem);
|
|
881
|
+
color: var(--cre8-color-content-default);
|
|
882
|
+
background-color: var(--cre8-color-bg-default);
|
|
883
|
+
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);
|
|
884
|
+
/**
|
|
885
|
+
* Hover, focus, active, and focus-visible styles for default input elements
|
|
886
|
+
*/
|
|
887
|
+
}
|
|
888
|
+
.cre8-c-date-picker__input:hover:not(:disabled), .cre8-c-date-picker__input:focus:not(:disabled), .cre8-c-date-picker__input:active:not(:disabled), .cre8-c-date-picker__input:focus-visible {
|
|
889
|
+
outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
|
|
890
|
+
outline-offset: 0.125rem;
|
|
891
|
+
/**
|
|
892
|
+
* Error state
|
|
893
|
+
*/
|
|
894
|
+
}
|
|
895
|
+
.cre8-is-error .cre8-c-date-picker__input:hover:not(:disabled), .cre8-is-error .cre8-c-date-picker__input:focus:not(:disabled), .cre8-is-error .cre8-c-date-picker__input:active:not(:disabled), .cre8-is-error .cre8-c-date-picker__input:focus-visible {
|
|
896
|
+
outline-color: var(--cre8-color-border-error);
|
|
897
|
+
}
|
|
898
|
+
.cre8-c-date-picker__input:hover:not(:disabled), .cre8-c-date-picker__input:focus:not(:disabled), .cre8-c-date-picker__input:active:not(:disabled), .cre8-c-date-picker__input:focus-visible {
|
|
899
|
+
/**
|
|
900
|
+
* Success state
|
|
901
|
+
*/
|
|
902
|
+
}
|
|
903
|
+
.cre8-is-success .cre8-c-date-picker__input:hover:not(:disabled), .cre8-is-success .cre8-c-date-picker__input:focus:not(:disabled), .cre8-is-success .cre8-c-date-picker__input:active:not(:disabled), .cre8-is-success .cre8-c-date-picker__input:focus-visible {
|
|
904
|
+
outline-color: var(--cre8-color-border-success);
|
|
905
|
+
}
|
|
906
|
+
.cre8-c-date-picker__input {
|
|
907
|
+
/**
|
|
908
|
+
* Disabled styles for default input elements
|
|
909
|
+
*/
|
|
910
|
+
}
|
|
911
|
+
.cre8-c-date-picker__input:disabled {
|
|
912
|
+
background-color: var(--cre8-color-bg-disabled);
|
|
913
|
+
border-color: var(--cre8-color-border-disabled);
|
|
914
|
+
color: var(--cre8-color-content-disabled);
|
|
915
|
+
cursor: not-allowed;
|
|
916
|
+
/**
|
|
917
|
+
* Disabled text colors
|
|
918
|
+
*/
|
|
919
|
+
}
|
|
920
|
+
.cre8-c-date-picker__input:disabled::placeholder {
|
|
921
|
+
color: var(--cre8-color-content-disabled);
|
|
922
|
+
}
|
|
923
|
+
.cre8-c-date-picker__input {
|
|
924
|
+
/**
|
|
925
|
+
* Placeholder styles for default input elements
|
|
926
|
+
*/
|
|
927
|
+
}
|
|
928
|
+
.cre8-c-date-picker__input::placeholder {
|
|
929
|
+
color: var(--cre8-color-content-subtle);
|
|
930
|
+
}
|
|
931
|
+
.cre8-c-date-picker__input {
|
|
932
|
+
/**
|
|
933
|
+
* Error state for default input elements
|
|
934
|
+
*/
|
|
935
|
+
}
|
|
936
|
+
.cre8-is-error .cre8-c-date-picker__input {
|
|
937
|
+
border-color: var(--cre8-color-border-error);
|
|
938
|
+
}
|
|
939
|
+
.cre8-c-date-picker__input {
|
|
940
|
+
/**
|
|
941
|
+
* Success state for default input elements
|
|
942
|
+
*/
|
|
943
|
+
}
|
|
944
|
+
.cre8-is-success .cre8-c-date-picker__input {
|
|
945
|
+
border-color: var(--cre8-color-border-success);
|
|
946
|
+
}
|
|
947
|
+
.cre8-c-date-picker__input {
|
|
948
|
+
/**
|
|
949
|
+
* Readonly input styles
|
|
950
|
+
*/
|
|
951
|
+
}
|
|
952
|
+
.cre8-c-date-picker__input:read-only {
|
|
953
|
+
background-color: var(--cre8-color-bg-disabled);
|
|
954
|
+
border-color: var(--cre8-color-border-disabled);
|
|
955
|
+
cursor: default;
|
|
956
|
+
}`;
|
|
3
957
|
export default styles;
|
|
4
958
|
//# sourceMappingURL=date-picker.styles.js.map
|