@salesforcedevs/dx-components 1.3.194-alpha.0 → 1.3.194-alpha3

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.
Files changed (38) hide show
  1. package/lwc.config.json +1 -0
  2. package/package.json +5 -2
  3. package/src/modules/dx/alert/alert.css +1 -1
  4. package/src/modules/dx/breadcrumbs/breadcrumbs.css +2 -2
  5. package/src/modules/dx/cardDocs/cardDocs.css +1 -1
  6. package/src/modules/dx/cardGridDocs/cardGridDocs.css +1 -0
  7. package/src/modules/dx/cardNews/cardNews.css +7 -7
  8. package/src/modules/dx/cardStep/mockProps.ts +1 -2
  9. package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.css +2 -2
  10. package/src/modules/dx/checkbox/checkbox.css +2 -1
  11. package/src/modules/dx/checkboxNative/checkboxNative.css +3 -0
  12. package/src/modules/dx/codeBlock/codeBlock.ts +6 -6
  13. package/src/modules/dx/codeBlock/customLanguages.js +4 -2
  14. package/src/modules/dx/codeBlock/lightTheme.css +4 -4
  15. package/src/modules/dx/dropdown/dropdown.css +4 -2
  16. package/src/modules/dx/dropdownOption/dropdownOption.css +2 -2
  17. package/src/modules/dx/feature/feature.css +1 -1
  18. package/src/modules/dx/featuredContentHeader/featuredContentHeader.css +3 -3
  19. package/src/modules/dx/filterMenu/filterMenu.css +6 -2
  20. package/src/modules/dx/footer/footer.css +3 -4
  21. package/src/modules/dx/header/__benchmarks__/header.benchmark.js +45 -0
  22. package/src/modules/dx/header/header.css +99 -0
  23. package/src/modules/dx/header/header.html +132 -0
  24. package/src/modules/dx/header/header.ts +21 -0
  25. package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css +1 -1
  26. package/src/modules/dx/icon/icon.css +1 -1
  27. package/src/modules/dx/input/input.css +3 -0
  28. package/src/modules/dx/searchResults/searchResults.css +3 -2
  29. package/src/modules/dx/select/select.css +15 -1
  30. package/src/modules/dx/spinner/spinner.css +225 -28
  31. package/src/modules/dx/toast/toast.css +1 -1
  32. package/src/modules/dxHelpers/animations/animations.css +1 -1
  33. package/src/modules/dxHelpers/card/card.css +1 -1
  34. package/src/modules/dxHelpers/code/code.css +13 -5
  35. package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css +1 -1
  36. package/src/modules/dxHelpers/reset/reset.css +13 -6
  37. package/src/modules/dxHelpers/text/text.css +1 -1
  38. package/src/modules/dxUtils/prismjs/prismjs.ts +294 -168
package/src/modules/dx/spinner/spinner.css CHANGED
@@ -14,12 +14,14 @@
14
14
  top: 50%;
15
15
  left: 50%;
16
16
  z-index: 9051;
17
+ -webkit-transform: translate(-50%, -50%) rotate(90deg);
17
18
  transform: translate(-50%, -50%) rotate(90deg);
18
19
  }
19
20
 
20
21
  .spinner,
21
22
  .spinner_dot-a,
22
23
  .spinner_dot-b {
24
+ -webkit-transform-origin: 50% 50%;
23
25
  transform-origin: 50% 50%;
24
26
  will-change: transform;
25
27
  }
@@ -42,40 +44,51 @@
42
44
  position: absolute;
43
45
  background: #b0adab;
44
46
  border-radius: 50%;
47
+ -webkit-animation-duration: 1000ms;
45
48
  animation-duration: 1000ms;
49
+ -webkit-animation-iteration-count: infinite;
46
50
  animation-iteration-count: infinite;
51
+ -webkit-transform: translate3d(0, 0, 0);
47
52
  transform: translate3d(0, 0, 0);
48
53
  }
49
54
 
50
55
  .spinner_dot-a {
56
+ -webkit-transform: rotate(60deg);
51
57
  transform: rotate(60deg);
52
58
  }
53
59
 
54
60
  .spinner_dot-b {
61
+ -webkit-transform: rotate(120deg);
55
62
  transform: rotate(120deg);
56
63
  }
57
64
 
58
65
  .spinner::before {
59
- animation-delay: -83.3333ms;
66
+ -webkit-animation-delay: -83.33333ms;
67
+ animation-delay: -83.33333ms;
60
68
  }
61
69
 
62
70
  .spinner_dot-a::before {
63
- animation-delay: 83.3333ms;
71
+ -webkit-animation-delay: 83.33333ms;
72
+ animation-delay: 83.33333ms;
64
73
  }
65
74
 
66
75
  .spinner_dot-b::before {
76
+ -webkit-animation-delay: 250ms;
67
77
  animation-delay: 250ms;
68
78
  }
69
79
 
70
80
  .spinner::after {
71
- animation-delay: 416.6667ms;
81
+ -webkit-animation-delay: 416.66667ms;
82
+ animation-delay: 416.66667ms;
72
83
  }
73
84
 
74
85
  .spinner_dot-a::after {
75
- animation-delay: 583.3333ms;
86
+ -webkit-animation-delay: 583.33333ms;
87
+ animation-delay: 583.33333ms;
76
88
  }
77
89
 
78
90
  .spinner_dot-b::after {
91
+ -webkit-animation-delay: 750ms;
79
92
  animation-delay: 750ms;
80
93
  }
81
94
 
@@ -112,6 +125,7 @@
112
125
  .spinner_x-small .spinner_dot-b::before {
113
126
  top: -0.125rem;
114
127
  left: -0.125rem;
128
+ -webkit-animation-name: dotsbouncebefore-extrasmall;
115
129
  animation-name: dotsbouncebefore-extrasmall;
116
130
  }
117
131
 
@@ -120,6 +134,7 @@
120
134
  .spinner_x-small .spinner_dot-b::after {
121
135
  top: -0.125rem;
122
136
  right: -0.125rem;
137
+ -webkit-animation-name: dotsbounceafter-extrasmall;
123
138
  animation-name: dotsbounceafter-extrasmall;
124
139
  }
125
140
 
@@ -131,82 +146,126 @@
131
146
  height: 1rem;
132
147
  }
133
148
 
134
- @keyframes dotsbouncebefore-extrasmall {
149
+ @-webkit-keyframes dotsbouncebefore-extrasmall {
135
150
  0% {
151
+ -webkit-transform: translate3d(0, 0, 0);
136
152
  transform: translate3d(0, 0, 0);
137
153
  }
138
154
 
139
155
  60% {
140
- transform: translate3d(0, 0, 0);
156
+ -webkit-transform: translate3d(0, 0, 0);
157
+ transform: translate3d(0, 0, 0);
158
+ -webkit-animation-timing-function: cubic-bezier(
159
+ 0.55,
160
+ 0.085,
161
+ 0.68,
162
+ 0.53
163
+ );
141
164
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
142
165
  }
143
166
 
144
167
  80% {
168
+ -webkit-transform: translate3d(-0.25rem, 0, 0);
145
169
  transform: translate3d(-0.25rem, 0, 0);
170
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
146
171
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
147
172
  }
148
173
 
149
174
  100% {
175
+ -webkit-transform: translate3d(0, 0, 0);
150
176
  transform: translate3d(0, 0, 0);
151
177
  }
152
178
  }
153
179
 
154
180
  @keyframes dotsbouncebefore-extrasmall {
155
181
  0% {
182
+ -webkit-transform: translate3d(0, 0, 0);
156
183
  transform: translate3d(0, 0, 0);
157
184
  }
158
185
 
159
186
  60% {
160
- transform: translate3d(0, 0, 0);
187
+ -webkit-transform: translate3d(0, 0, 0);
188
+ transform: translate3d(0, 0, 0);
189
+ -webkit-animation-timing-function: cubic-bezier(
190
+ 0.55,
191
+ 0.085,
192
+ 0.68,
193
+ 0.53
194
+ );
161
195
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
162
196
  }
163
197
 
164
198
  80% {
199
+ -webkit-transform: translate3d(-0.25rem, 0, 0);
165
200
  transform: translate3d(-0.25rem, 0, 0);
201
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
166
202
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
167
203
  }
168
204
 
169
205
  100% {
206
+ -webkit-transform: translate3d(0, 0, 0);
170
207
  transform: translate3d(0, 0, 0);
171
208
  }
172
209
  }
173
210
 
174
- @keyframes dotsbounceafter-extrasmall {
211
+ @-webkit-keyframes dotsbounceafter-extrasmall {
175
212
  0% {
213
+ -webkit-transform: translate3d(0, 0, 0);
176
214
  transform: translate3d(0, 0, 0);
177
215
  }
178
216
 
179
217
  60% {
180
- transform: translate3d(0, 0, 0);
218
+ -webkit-transform: translate3d(0, 0, 0);
219
+ transform: translate3d(0, 0, 0);
220
+ -webkit-animation-timing-function: cubic-bezier(
221
+ 0.55,
222
+ 0.085,
223
+ 0.68,
224
+ 0.53
225
+ );
181
226
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
182
227
  }
183
228
 
184
229
  80% {
230
+ -webkit-transform: translate3d(0.25rem, 0, 0);
185
231
  transform: translate3d(0.25rem, 0, 0);
232
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
186
233
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
187
234
  }
188
235
 
189
236
  100% {
237
+ -webkit-transform: translate3d(0, 0, 0);
190
238
  transform: translate3d(0, 0, 0);
191
239
  }
192
240
  }
193
241
 
194
242
  @keyframes dotsbounceafter-extrasmall {
195
243
  0% {
244
+ -webkit-transform: translate3d(0, 0, 0);
196
245
  transform: translate3d(0, 0, 0);
197
246
  }
198
247
 
199
248
  60% {
200
- transform: translate3d(0, 0, 0);
249
+ -webkit-transform: translate3d(0, 0, 0);
250
+ transform: translate3d(0, 0, 0);
251
+ -webkit-animation-timing-function: cubic-bezier(
252
+ 0.55,
253
+ 0.085,
254
+ 0.68,
255
+ 0.53
256
+ );
201
257
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
202
258
  }
203
259
 
204
260
  80% {
261
+ -webkit-transform: translate3d(0.25rem, 0, 0);
205
262
  transform: translate3d(0.25rem, 0, 0);
263
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
206
264
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
207
265
  }
208
266
 
209
267
  100% {
268
+ -webkit-transform: translate3d(0, 0, 0);
210
269
  transform: translate3d(0, 0, 0);
211
270
  }
212
271
  }
@@ -234,6 +293,7 @@
234
293
  .spinner_small .spinner_dot-b::before {
235
294
  top: -0.125rem;
236
295
  left: -0.125rem;
296
+ -webkit-animation-name: dotsbouncebefore-small;
237
297
  animation-name: dotsbouncebefore-small;
238
298
  }
239
299
 
@@ -242,85 +302,130 @@
242
302
  .spinner_small .spinner_dot-b::after {
243
303
  top: -0.125rem;
244
304
  right: -0.125rem;
305
+ -webkit-animation-name: dotsbounceafter-small;
245
306
  animation-name: dotsbounceafter-small;
246
307
  }
247
308
 
248
- @keyframes dotsbouncebefore-small {
309
+ @-webkit-keyframes dotsbouncebefore-small {
249
310
  0% {
311
+ -webkit-transform: translate3d(0, 0, 0);
250
312
  transform: translate3d(0, 0, 0);
251
313
  }
252
314
 
253
315
  60% {
254
- transform: translate3d(0, 0, 0);
316
+ -webkit-transform: translate3d(0, 0, 0);
317
+ transform: translate3d(0, 0, 0);
318
+ -webkit-animation-timing-function: cubic-bezier(
319
+ 0.55,
320
+ 0.085,
321
+ 0.68,
322
+ 0.53
323
+ );
255
324
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
256
325
  }
257
326
 
258
327
  80% {
328
+ -webkit-transform: translate3d(-0.375rem, 0, 0);
259
329
  transform: translate3d(-0.375rem, 0, 0);
330
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
260
331
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
261
332
  }
262
333
 
263
334
  100% {
335
+ -webkit-transform: translate3d(0, 0, 0);
264
336
  transform: translate3d(0, 0, 0);
265
337
  }
266
338
  }
267
339
 
268
340
  @keyframes dotsbouncebefore-small {
269
341
  0% {
342
+ -webkit-transform: translate3d(0, 0, 0);
270
343
  transform: translate3d(0, 0, 0);
271
344
  }
272
345
 
273
346
  60% {
274
- transform: translate3d(0, 0, 0);
347
+ -webkit-transform: translate3d(0, 0, 0);
348
+ transform: translate3d(0, 0, 0);
349
+ -webkit-animation-timing-function: cubic-bezier(
350
+ 0.55,
351
+ 0.085,
352
+ 0.68,
353
+ 0.53
354
+ );
275
355
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
276
356
  }
277
357
 
278
358
  80% {
359
+ -webkit-transform: translate3d(-0.375rem, 0, 0);
279
360
  transform: translate3d(-0.375rem, 0, 0);
361
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
280
362
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
281
363
  }
282
364
 
283
365
  100% {
366
+ -webkit-transform: translate3d(0, 0, 0);
284
367
  transform: translate3d(0, 0, 0);
285
368
  }
286
369
  }
287
370
 
288
- @keyframes dotsbounceafter-small {
371
+ @-webkit-keyframes dotsbounceafter-small {
289
372
  0% {
373
+ -webkit-transform: translate3d(0, 0, 0);
290
374
  transform: translate3d(0, 0, 0);
291
375
  }
292
376
 
293
377
  60% {
294
- transform: translate3d(0, 0, 0);
378
+ -webkit-transform: translate3d(0, 0, 0);
379
+ transform: translate3d(0, 0, 0);
380
+ -webkit-animation-timing-function: cubic-bezier(
381
+ 0.55,
382
+ 0.085,
383
+ 0.68,
384
+ 0.53
385
+ );
295
386
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
296
387
  }
297
388
 
298
389
  80% {
390
+ -webkit-transform: translate3d(0.375rem, 0, 0);
299
391
  transform: translate3d(0.375rem, 0, 0);
392
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
300
393
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
301
394
  }
302
395
 
303
396
  100% {
397
+ -webkit-transform: translateX(0);
304
398
  transform: translateX(0);
305
399
  }
306
400
  }
307
401
 
308
402
  @keyframes dotsbounceafter-small {
309
403
  0% {
404
+ -webkit-transform: translate3d(0, 0, 0);
310
405
  transform: translate3d(0, 0, 0);
311
406
  }
312
407
 
313
408
  60% {
314
- transform: translate3d(0, 0, 0);
409
+ -webkit-transform: translate3d(0, 0, 0);
410
+ transform: translate3d(0, 0, 0);
411
+ -webkit-animation-timing-function: cubic-bezier(
412
+ 0.55,
413
+ 0.085,
414
+ 0.68,
415
+ 0.53
416
+ );
315
417
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
316
418
  }
317
419
 
318
420
  80% {
421
+ -webkit-transform: translate3d(0.375rem, 0, 0);
319
422
  transform: translate3d(0.375rem, 0, 0);
423
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
320
424
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
321
425
  }
322
426
 
323
427
  100% {
428
+ -webkit-transform: translateX(0);
324
429
  transform: translateX(0);
325
430
  }
326
431
  }
@@ -342,6 +447,7 @@
342
447
  .spinner_medium.spinner::before,
343
448
  .spinner_medium .spinner_dot-a::before,
344
449
  .spinner_medium .spinner_dot-b::before {
450
+ -webkit-animation-name: dotsbouncebefore-medium;
345
451
  animation-name: dotsbouncebefore-medium;
346
452
  top: -0.25rem;
347
453
  left: -0.25rem;
@@ -350,87 +456,132 @@
350
456
  .spinner_medium.spinner::after,
351
457
  .spinner_medium .spinner_dot-a::after,
352
458
  .spinner_medium .spinner_dot-b::after {
459
+ -webkit-animation-name: dotsbounceafter-medium;
353
460
  animation-name: dotsbounceafter-medium;
354
461
  top: -0.25rem;
355
462
  right: -0.25rem;
356
463
  }
357
464
 
358
- @keyframes dotsbouncebefore-medium {
465
+ @-webkit-keyframes dotsbouncebefore-medium {
359
466
  0% {
467
+ -webkit-transform: translate3d(0, 0, 0);
360
468
  transform: translate3d(0, 0, 0);
361
469
  }
362
470
 
363
471
  60% {
364
- transform: translate3d(0, 0, 0);
472
+ -webkit-transform: translate3d(0, 0, 0);
473
+ transform: translate3d(0, 0, 0);
474
+ -webkit-animation-timing-function: cubic-bezier(
475
+ 0.55,
476
+ 0.085,
477
+ 0.68,
478
+ 0.53
479
+ );
365
480
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
366
481
  }
367
482
 
368
483
  80% {
484
+ -webkit-transform: translate3d(-0.5rem, 0, 0);
369
485
  transform: translate3d(-0.5rem, 0, 0);
486
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
370
487
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
371
488
  }
372
489
 
373
490
  100% {
491
+ -webkit-transform: translate3d(0, 0, 0);
374
492
  transform: translate3d(0, 0, 0);
375
493
  }
376
494
  }
377
495
 
378
496
  @keyframes dotsbouncebefore-medium {
379
497
  0% {
498
+ -webkit-transform: translate3d(0, 0, 0);
380
499
  transform: translate3d(0, 0, 0);
381
500
  }
382
501
 
383
502
  60% {
384
- transform: translate3d(0, 0, 0);
503
+ -webkit-transform: translate3d(0, 0, 0);
504
+ transform: translate3d(0, 0, 0);
505
+ -webkit-animation-timing-function: cubic-bezier(
506
+ 0.55,
507
+ 0.085,
508
+ 0.68,
509
+ 0.53
510
+ );
385
511
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
386
512
  }
387
513
 
388
514
  80% {
515
+ -webkit-transform: translate3d(-0.5rem, 0, 0);
389
516
  transform: translate3d(-0.5rem, 0, 0);
517
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
390
518
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
391
519
  }
392
520
 
393
521
  100% {
522
+ -webkit-transform: translate3d(0, 0, 0);
394
523
  transform: translate3d(0, 0, 0);
395
524
  }
396
525
  }
397
526
 
398
- @keyframes dotsbounceafter-medium {
527
+ @-webkit-keyframes dotsbounceafter-medium {
399
528
  0% {
529
+ -webkit-transform: translate3d(0, 0, 0);
400
530
  transform: translate3d(0, 0, 0);
401
531
  }
402
532
 
403
533
  60% {
404
- transform: translate3d(0, 0, 0);
534
+ -webkit-transform: translate3d(0, 0, 0);
535
+ transform: translate3d(0, 0, 0);
536
+ -webkit-animation-timing-function: cubic-bezier(
537
+ 0.55,
538
+ 0.085,
539
+ 0.68,
540
+ 0.53
541
+ );
405
542
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
406
543
  }
407
544
 
408
545
  80% {
546
+ -webkit-transform: translate3d(0.5rem, 0, 0);
409
547
  transform: translate3d(0.5rem, 0, 0);
548
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
410
549
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
411
550
  }
412
551
 
413
552
  100% {
553
+ -webkit-transform: translateX(0);
414
554
  transform: translateX(0);
415
555
  }
416
556
  }
417
557
 
418
558
  @keyframes dotsbounceafter-medium {
419
559
  0% {
560
+ -webkit-transform: translate3d(0, 0, 0);
420
561
  transform: translate3d(0, 0, 0);
421
562
  }
422
563
 
423
564
  60% {
424
- transform: translate3d(0, 0, 0);
565
+ -webkit-transform: translate3d(0, 0, 0);
566
+ transform: translate3d(0, 0, 0);
567
+ -webkit-animation-timing-function: cubic-bezier(
568
+ 0.55,
569
+ 0.085,
570
+ 0.68,
571
+ 0.53
572
+ );
425
573
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
426
574
  }
427
575
 
428
576
  80% {
577
+ -webkit-transform: translate3d(0.5rem, 0, 0);
429
578
  transform: translate3d(0.5rem, 0, 0);
579
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
430
580
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
431
581
  }
432
582
 
433
583
  100% {
584
+ -webkit-transform: translateX(0);
434
585
  transform: translateX(0);
435
586
  }
436
587
  }
@@ -452,6 +603,7 @@
452
603
  .spinner_large.spinner::before,
453
604
  .spinner_large .spinner_dot-a::before,
454
605
  .spinner_large .spinner_dot-b::before {
606
+ -webkit-animation-name: dotsbouncebefore-medium;
455
607
  animation-name: dotsbouncebefore-medium;
456
608
  top: -0.3125rem;
457
609
  left: -0.3125rem;
@@ -460,87 +612,132 @@
460
612
  .spinner_large.spinner::after,
461
613
  .spinner_large .spinner_dot-a::after,
462
614
  .spinner_large .spinner_dot-b::after {
615
+ -webkit-animation-name: dotsbounceafter-medium;
463
616
  animation-name: dotsbounceafter-medium;
464
617
  top: -0.3125rem;
465
618
  right: -0.3125rem;
466
619
  }
467
620
 
468
- @keyframes dotsbouncebefore-large {
621
+ @-webkit-keyframes dotsbouncebefore-large {
469
622
  0% {
623
+ -webkit-transform: translate3d(0, 0, 0);
470
624
  transform: translate3d(0, 0, 0);
471
625
  }
472
626
 
473
627
  60% {
474
- transform: translate3d(0, 0, 0);
628
+ -webkit-transform: translate3d(0, 0, 0);
629
+ transform: translate3d(0, 0, 0);
630
+ -webkit-animation-timing-function: cubic-bezier(
631
+ 0.55,
632
+ 0.085,
633
+ 0.68,
634
+ 0.53
635
+ );
475
636
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
476
637
  }
477
638
 
478
639
  80% {
640
+ -webkit-transform: translate3d(-0.75rem, 0, 0);
479
641
  transform: translate3d(-0.75rem, 0, 0);
642
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
480
643
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
481
644
  }
482
645
 
483
646
  100% {
647
+ -webkit-transform: translateX(0);
484
648
  transform: translateX(0);
485
649
  }
486
650
  }
487
651
 
488
652
  @keyframes dotsbouncebefore-large {
489
653
  0% {
654
+ -webkit-transform: translate3d(0, 0, 0);
490
655
  transform: translate3d(0, 0, 0);
491
656
  }
492
657
 
493
658
  60% {
494
- transform: translate3d(0, 0, 0);
659
+ -webkit-transform: translate3d(0, 0, 0);
660
+ transform: translate3d(0, 0, 0);
661
+ -webkit-animation-timing-function: cubic-bezier(
662
+ 0.55,
663
+ 0.085,
664
+ 0.68,
665
+ 0.53
666
+ );
495
667
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
496
668
  }
497
669
 
498
670
  80% {
671
+ -webkit-transform: translate3d(-0.75rem, 0, 0);
499
672
  transform: translate3d(-0.75rem, 0, 0);
673
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
500
674
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
501
675
  }
502
676
 
503
677
  100% {
678
+ -webkit-transform: translateX(0);
504
679
  transform: translateX(0);
505
680
  }
506
681
  }
507
682
 
508
- @keyframes dotsbounceafter-large {
683
+ @-webkit-keyframes dotsbounceafter-large {
509
684
  0% {
685
+ -webkit-transform: translate3d(0, 0, 0);
510
686
  transform: translate3d(0, 0, 0);
511
687
  }
512
688
 
513
689
  60% {
514
- transform: translate3d(0, 0, 0);
690
+ -webkit-transform: translate3d(0, 0, 0);
691
+ transform: translate3d(0, 0, 0);
692
+ -webkit-animation-timing-function: cubic-bezier(
693
+ 0.55,
694
+ 0.085,
695
+ 0.68,
696
+ 0.53
697
+ );
515
698
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
516
699
  }
517
700
 
518
701
  80% {
702
+ -webkit-transform: translate3d(0.75rem, 0, 0);
519
703
  transform: translate3d(0.75rem, 0, 0);
704
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
520
705
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
521
706
  }
522
707
 
523
708
  100% {
709
+ -webkit-transform: translateX(0);
524
710
  transform: translateX(0);
525
711
  }
526
712
  }
527
713
 
528
714
  @keyframes dotsbounceafter-large {
529
715
  0% {
716
+ -webkit-transform: translate3d(0, 0, 0);
530
717
  transform: translate3d(0, 0, 0);
531
718
  }
532
719
 
533
720
  60% {
534
- transform: translate3d(0, 0, 0);
721
+ -webkit-transform: translate3d(0, 0, 0);
722
+ transform: translate3d(0, 0, 0);
723
+ -webkit-animation-timing-function: cubic-bezier(
724
+ 0.55,
725
+ 0.085,
726
+ 0.68,
727
+ 0.53
728
+ );
535
729
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
536
730
  }
537
731
 
538
732
  80% {
733
+ -webkit-transform: translate3d(0.75rem, 0, 0);
539
734
  transform: translate3d(0.75rem, 0, 0);
735
+ -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
540
736
  animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
541
737
  }
542
738
 
543
739
  100% {
740
+ -webkit-transform: translateX(0);
544
741
  transform: translateX(0);
545
742
  }
546
743
  }
package/src/modules/dx/toast/toast.css CHANGED
@@ -39,7 +39,7 @@
39
39
  align-items: center;
40
40
  justify-content: center;
41
41
  max-width: 926px;
42
- background-color: rgb(22 50 92);
42
+ background-color: rgb(22, 50, 92);
43
43
  padding: var(--dx-g-spacing-mlg);
44
44
  border-radius: 4px;
45
45
  width: 100%;
package/src/modules/dxHelpers/animations/animations.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes fadein {
1
+ @keyframes fadeIn {
2
2
  0% {
3
3
  opacity: 0;
4
4
  transform: translateY(var(--dx-g-spacing-sm));
package/src/modules/dxHelpers/card/card.css CHANGED
@@ -180,7 +180,7 @@ a.dx-card-base:hover dx-card-title {
180
180
  /* Line Limits */
181
181
  .dx-text-body-2,
182
182
  .dx-text-body-3 {
183
- display: box;
183
+ display: -webkit-box;
184
184
  -webkit-line-clamp: var(--dx-c-body-max-lines);
185
185
  -webkit-box-orient: vertical;
186
186
  overflow: hidden;