@workday/canvas-kit-css 14.0.0-alpha.1203-next.0 → 14.0.0-alpha.1206-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/badge.css +2 -2
- package/button.css +72 -100
- package/loading-dots.css +2 -2
- package/modal.css +2 -2
- package/package.json +2 -2
- package/popup.css +2 -2
- package/skeleton.css +2 -2
- package/tooltip.css +2 -2
package/badge.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes animation-
|
|
1
|
+
@keyframes animation-3lodh8 {
|
|
2
2
|
from {
|
|
3
3
|
transform: scale(0.85);
|
|
4
4
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
.cnvs-count-badge {
|
|
13
13
|
box-sizing: border-box;
|
|
14
14
|
align-items: center;
|
|
15
|
-
animation: animation-
|
|
15
|
+
animation: animation-3lodh8 0.2s ease;
|
|
16
16
|
border-radius: var(--cnvs-sys-shape-round);
|
|
17
17
|
display: inline-flex;
|
|
18
18
|
font-family: var(--cnvs-sys-font-family-default);
|
package/button.css
CHANGED
|
@@ -223,46 +223,44 @@
|
|
|
223
223
|
box-sizing: border-box;
|
|
224
224
|
padding-inline: var(--cnvs-sys-space-x2);
|
|
225
225
|
min-width: auto;
|
|
226
|
-
|
|
227
|
-
border: var(--cnvs-sys-
|
|
228
|
-
--cnvs-button-background: transparent;
|
|
229
|
-
--cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
|
|
226
|
+
border-width: 0.125rem;
|
|
227
|
+
--cnvs-button-border-radius: var(--cnvs-sys-shape-round);
|
|
228
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
|
|
230
229
|
--cnvs-button-label: var(--cnvs-brand-primary-base);
|
|
231
|
-
--cnvs-system-icon-color:
|
|
230
|
+
--cnvs-system-icon-color: currentColor;
|
|
232
231
|
}
|
|
233
232
|
|
|
234
233
|
.cnvs-tertiary-button:focus-visible, .cnvs-tertiary-button.focus {
|
|
235
|
-
--cnvs-button-background: transparent;
|
|
234
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
|
|
236
235
|
--cnvs-button-label: var(--cnvs-brand-primary-base);
|
|
237
|
-
--cnvs-
|
|
238
|
-
--cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
|
|
239
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-primary-base));
|
|
236
|
+
--cnvs-system-icon-color: currentColor;
|
|
240
237
|
box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
|
|
241
238
|
}
|
|
242
239
|
|
|
243
240
|
.cnvs-tertiary-button:hover, .cnvs-tertiary-button.hover {
|
|
244
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-
|
|
241
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
|
|
245
242
|
--cnvs-button-label: var(--cnvs-brand-primary-dark);
|
|
246
|
-
--cnvs-system-icon-color:
|
|
243
|
+
--cnvs-system-icon-color: currentColor;
|
|
244
|
+
text-decoration: underline;
|
|
247
245
|
}
|
|
248
246
|
|
|
249
247
|
.cnvs-tertiary-button:active, .cnvs-tertiary-button.active {
|
|
250
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-
|
|
248
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
|
|
251
249
|
--cnvs-button-label: var(--cnvs-brand-primary-darkest);
|
|
252
|
-
--cnvs-system-icon-color:
|
|
250
|
+
--cnvs-system-icon-color: currentColor;
|
|
251
|
+
text-decoration: underline;
|
|
253
252
|
}
|
|
254
253
|
|
|
255
254
|
.cnvs-tertiary-button:disabled, .cnvs-tertiary-button.disabled {
|
|
256
|
-
--cnvs-button-background: transparent;
|
|
255
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
|
|
257
256
|
--cnvs-button-label: var(--cnvs-brand-primary-base);
|
|
258
257
|
--cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
|
|
259
|
-
--cnvs-system-icon-color:
|
|
258
|
+
--cnvs-system-icon-color: currentColor;
|
|
260
259
|
}
|
|
261
260
|
|
|
262
261
|
|
|
263
262
|
.cnvs-tertiary-button.icon-position-only {
|
|
264
263
|
padding: 0;
|
|
265
|
-
border-radius: var(--cnvs-sys-shape-round);
|
|
266
264
|
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));
|
|
267
265
|
}
|
|
268
266
|
|
|
@@ -285,56 +283,35 @@
|
|
|
285
283
|
|
|
286
284
|
|
|
287
285
|
|
|
288
|
-
.cnvs-tertiary-button.is-themeable {
|
|
289
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-primary-base));
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
.cnvs-tertiary-button.is-themeable:focus-visible, .cnvs-tertiary-button.is-themeable.focus {
|
|
293
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-primary-base));
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.cnvs-tertiary-button.is-themeable:hover, .cnvs-tertiary-button.is-themeable.hover {
|
|
297
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-primary-dark));
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
.cnvs-tertiary-button.is-themeable:active, .cnvs-tertiary-button.is-themeable.active {
|
|
301
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-darkest));
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
.cnvs-tertiary-button.is-themeable:disabled, .cnvs-tertiary-button.is-themeable.disabled {
|
|
305
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-primary-base));
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
|
|
309
286
|
.cnvs-tertiary-button.variant-inverse {
|
|
310
287
|
--cnvs-button-background: transparent;
|
|
311
288
|
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
312
|
-
--cnvs-system-icon-color:
|
|
289
|
+
--cnvs-system-icon-color: currentColor;
|
|
313
290
|
}
|
|
314
291
|
|
|
315
292
|
.cnvs-tertiary-button.variant-inverse:focus-visible, .cnvs-tertiary-button.variant-inverse.focus {
|
|
316
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-
|
|
317
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-
|
|
318
|
-
--cnvs-system-icon-color:
|
|
319
|
-
box-shadow:
|
|
293
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-translucent);
|
|
294
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
295
|
+
--cnvs-system-icon-color: currentColor;
|
|
296
|
+
box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 2px var(--cnvs-sys-color-border-inverse);
|
|
320
297
|
}
|
|
321
298
|
|
|
322
299
|
.cnvs-tertiary-button.variant-inverse:hover, .cnvs-tertiary-button.variant-inverse.hover {
|
|
323
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-
|
|
324
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-
|
|
325
|
-
--cnvs-system-icon-color:
|
|
300
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-transparent-strong);
|
|
301
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
302
|
+
--cnvs-system-icon-color: currentColor;
|
|
326
303
|
}
|
|
327
304
|
|
|
328
305
|
.cnvs-tertiary-button.variant-inverse:active, .cnvs-tertiary-button.variant-inverse.active {
|
|
329
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-
|
|
330
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-
|
|
331
|
-
--cnvs-system-icon-color:
|
|
306
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-transparent-stronger);
|
|
307
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
308
|
+
--cnvs-system-icon-color: currentColor;
|
|
332
309
|
}
|
|
333
310
|
|
|
334
311
|
.cnvs-tertiary-button.variant-inverse:disabled, .cnvs-tertiary-button.variant-inverse.disabled {
|
|
335
312
|
--cnvs-button-background: transparent;
|
|
336
313
|
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
337
|
-
--cnvs-system-icon-color:
|
|
314
|
+
--cnvs-system-icon-color: currentColor;
|
|
338
315
|
}
|
|
339
316
|
|
|
340
317
|
|
|
@@ -603,7 +580,7 @@
|
|
|
603
580
|
--cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
|
|
604
581
|
--cnvs-button-border-radius: var(--cnvs-sys-shape-round);
|
|
605
582
|
--cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
|
|
606
|
-
--cnvs-system-icon-color:
|
|
583
|
+
--cnvs-system-icon-color: currentColor;
|
|
607
584
|
}
|
|
608
585
|
|
|
609
586
|
.cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
|
|
@@ -611,101 +588,96 @@
|
|
|
611
588
|
--cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
|
|
612
589
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
|
|
613
590
|
--cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
|
|
614
|
-
--cnvs-system-icon-color:
|
|
591
|
+
--cnvs-system-icon-color: currentColor;
|
|
615
592
|
}
|
|
616
593
|
|
|
617
594
|
.cnvs-primary-button:hover, .cnvs-primary-button.hover {
|
|
618
595
|
--cnvs-button-background: var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));
|
|
619
596
|
--cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
|
|
620
|
-
--cnvs-system-icon-color:
|
|
597
|
+
--cnvs-system-icon-color: currentColor;
|
|
621
598
|
}
|
|
622
599
|
|
|
623
600
|
.cnvs-primary-button:active, .cnvs-primary-button.active {
|
|
624
601
|
--cnvs-button-background: var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));
|
|
625
602
|
--cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
|
|
626
|
-
--cnvs-system-icon-color:
|
|
603
|
+
--cnvs-system-icon-color: currentColor;
|
|
627
604
|
}
|
|
628
605
|
|
|
629
606
|
.cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
|
|
630
607
|
--cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
|
|
631
608
|
--cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
|
|
632
609
|
--cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
|
|
633
|
-
--cnvs-system-icon-color:
|
|
610
|
+
--cnvs-system-icon-color: currentColor;
|
|
634
611
|
}
|
|
635
612
|
|
|
636
613
|
|
|
637
614
|
.cnvs-primary-button.variant-inverse {
|
|
638
|
-
--cnvs-button-background: var(--cnvs-
|
|
615
|
+
--cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
|
|
639
616
|
--cnvs-button-border-radius: var(--cnvs-sys-shape-round);
|
|
640
617
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
641
|
-
--cnvs-system-icon-color:
|
|
618
|
+
--cnvs-system-icon-color: currentColor;
|
|
642
619
|
}
|
|
643
620
|
|
|
644
621
|
.cnvs-primary-button.variant-inverse:focus-visible, .cnvs-primary-button.variant-inverse.focus {
|
|
645
|
-
--cnvs-button-background: var(--cnvs-
|
|
622
|
+
--cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
|
|
646
623
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
647
624
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
|
|
648
625
|
--cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
|
|
649
|
-
--cnvs-system-icon-color:
|
|
626
|
+
--cnvs-system-icon-color: currentColor;
|
|
650
627
|
}
|
|
651
628
|
|
|
652
629
|
.cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
|
|
653
|
-
--cnvs-button-background: var(--cnvs-
|
|
630
|
+
--cnvs-button-background: var(--cnvs-brand-action-lighter, var(--cnvs-brand-primary-lightest));
|
|
654
631
|
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
655
|
-
--cnvs-system-icon-color:
|
|
632
|
+
--cnvs-system-icon-color: currentColor;
|
|
656
633
|
}
|
|
657
634
|
|
|
658
635
|
.cnvs-primary-button.variant-inverse:active, .cnvs-primary-button.variant-inverse.active {
|
|
659
|
-
--cnvs-button-background: var(--cnvs-
|
|
636
|
+
--cnvs-button-background: var(--cnvs-brand-action-light, var(--cnvs-brand-primary-light));
|
|
660
637
|
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
661
|
-
--cnvs-system-icon-color:
|
|
638
|
+
--cnvs-system-icon-color: currentColor;
|
|
662
639
|
}
|
|
663
640
|
|
|
664
641
|
.cnvs-primary-button.variant-inverse:disabled, .cnvs-primary-button.variant-inverse.disabled {
|
|
665
|
-
--cnvs-button-background: var(--cnvs-
|
|
642
|
+
--cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
|
|
666
643
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
667
|
-
--cnvs-system-icon-color:
|
|
644
|
+
--cnvs-system-icon-color: currentColor;
|
|
668
645
|
}
|
|
669
646
|
|
|
670
647
|
|
|
671
648
|
.cnvs-secondary-button {
|
|
672
649
|
box-sizing: border-box;
|
|
673
|
-
--cnvs-button-background:
|
|
674
|
-
--cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
|
|
650
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
|
|
675
651
|
--cnvs-button-border-radius: var(--cnvs-sys-shape-round);
|
|
676
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-
|
|
677
|
-
--cnvs-system-icon-color:
|
|
652
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
653
|
+
--cnvs-system-icon-color: currentColor;
|
|
678
654
|
}
|
|
679
655
|
|
|
680
656
|
.cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
|
|
681
|
-
--cnvs-button-background:
|
|
682
|
-
--cnvs-button-
|
|
683
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
657
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
|
|
658
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
684
659
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
|
|
685
660
|
--cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
|
|
686
|
-
--cnvs-system-icon-color:
|
|
661
|
+
--cnvs-system-icon-color: currentColor;
|
|
687
662
|
}
|
|
688
663
|
|
|
689
664
|
.cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
|
|
690
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-
|
|
691
|
-
--cnvs-button-
|
|
692
|
-
--cnvs-
|
|
693
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-primary-accent));
|
|
665
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
|
|
666
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
667
|
+
--cnvs-system-icon-color: currentColor;
|
|
694
668
|
}
|
|
695
669
|
|
|
696
670
|
.cnvs-secondary-button:active, .cnvs-secondary-button.active {
|
|
697
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-
|
|
698
|
-
--cnvs-button-
|
|
699
|
-
--cnvs-
|
|
700
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-accent));
|
|
671
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
|
|
672
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
673
|
+
--cnvs-system-icon-color: currentColor;
|
|
701
674
|
}
|
|
702
675
|
|
|
703
676
|
.cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
|
|
704
|
-
--cnvs-button-background:
|
|
705
|
-
--cnvs-button-
|
|
706
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
677
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
|
|
678
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
707
679
|
--cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
|
|
708
|
-
--cnvs-system-icon-color:
|
|
680
|
+
--cnvs-system-icon-color: currentColor;
|
|
709
681
|
}
|
|
710
682
|
|
|
711
683
|
|
|
@@ -713,37 +685,37 @@
|
|
|
713
685
|
--cnvs-button-background: transparent;
|
|
714
686
|
--cnvs-button-border: var(--cnvs-sys-color-border-inverse);
|
|
715
687
|
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
716
|
-
--cnvs-system-icon-color:
|
|
688
|
+
--cnvs-system-icon-color: currentColor;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.cnvs-secondary-button.variant-inverse:hover, .cnvs-secondary-button.variant-inverse.hover {
|
|
692
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-transparent-strong);
|
|
693
|
+
--cnvs-button-border: var(--cnvs-sys-color-border-inverse);
|
|
694
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
695
|
+
--cnvs-system-icon-color: currentColor;
|
|
717
696
|
}
|
|
718
697
|
|
|
719
698
|
.cnvs-secondary-button.variant-inverse:focus-visible, .cnvs-secondary-button.variant-inverse.focus {
|
|
720
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-
|
|
699
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-translucent);
|
|
721
700
|
--cnvs-button-border: transparent;
|
|
722
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-
|
|
701
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
723
702
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
|
|
724
703
|
--cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
|
|
725
|
-
--cnvs-system-icon-color:
|
|
726
|
-
}
|
|
727
|
-
|
|
728
|
-
.cnvs-secondary-button.variant-inverse:hover, .cnvs-secondary-button.variant-inverse.hover {
|
|
729
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
|
|
730
|
-
--cnvs-button-border: transparent;
|
|
731
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
732
|
-
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));
|
|
704
|
+
--cnvs-system-icon-color: currentColor;
|
|
733
705
|
}
|
|
734
706
|
|
|
735
707
|
.cnvs-secondary-button.variant-inverse:active, .cnvs-secondary-button.variant-inverse.active {
|
|
736
|
-
--cnvs-button-background: var(--cnvs-sys-color-bg-
|
|
737
|
-
--cnvs-button-border:
|
|
738
|
-
--cnvs-button-label: var(--cnvs-sys-color-fg-
|
|
739
|
-
--cnvs-system-icon-color:
|
|
708
|
+
--cnvs-button-background: var(--cnvs-sys-color-bg-transparent-stronger);
|
|
709
|
+
--cnvs-button-border: var(--cnvs-sys-color-border-inverse);
|
|
710
|
+
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
711
|
+
--cnvs-system-icon-color: currentColor;
|
|
740
712
|
}
|
|
741
713
|
|
|
742
714
|
.cnvs-secondary-button.variant-inverse:disabled, .cnvs-secondary-button.variant-inverse.disabled {
|
|
743
715
|
--cnvs-button-background: transparent;
|
|
744
716
|
--cnvs-button-border: var(--cnvs-sys-color-border-inverse);
|
|
745
717
|
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
746
|
-
--cnvs-system-icon-color:
|
|
718
|
+
--cnvs-system-icon-color: currentColor;
|
|
747
719
|
}
|
|
748
720
|
|
|
749
721
|
|
package/loading-dots.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes animation-
|
|
1
|
+
@keyframes animation-jwx1y {
|
|
2
2
|
0%, 80%, 100% {
|
|
3
3
|
transform: scale(0);
|
|
4
4
|
}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
outline: 0.125rem solid transparent;
|
|
27
27
|
transform: scale(0);
|
|
28
28
|
display: inline-block;
|
|
29
|
-
animation-name: animation-
|
|
29
|
+
animation-name: animation-jwx1y;
|
|
30
30
|
animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
|
|
31
31
|
animation-iteration-count: infinite;
|
|
32
32
|
animation-timing-function: ease-in-out;
|
package/modal.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes animation-
|
|
1
|
+
@keyframes animation-qn0d7 {
|
|
2
2
|
0% {
|
|
3
3
|
background: none;
|
|
4
4
|
}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
height: 100vh;
|
|
19
19
|
background: var(--cnvs-sys-color-bg-overlay);
|
|
20
20
|
animation-duration: 0.3s;
|
|
21
|
-
animation-name: animation-
|
|
21
|
+
animation-name: animation-qn0d7;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.wd-no-animation .cnvs-modal-overlay-container {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-css",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1206-next.0",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit CSS components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"components",
|
|
26
26
|
"workday"
|
|
27
27
|
],
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "5f2128b722fff5b086358ff3bd3ab009b0e07ef4"
|
|
29
29
|
}
|
package/popup.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
@keyframes animation-
|
|
6
|
+
@keyframes animation-42qp3t {
|
|
7
7
|
0% {
|
|
8
8
|
opacity: 1;
|
|
9
9
|
transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
padding: var(--cnvs-sys-space-x6);
|
|
32
32
|
max-height: var(--cnvs-popup-card-max-height);
|
|
33
33
|
overflow-y: auto;
|
|
34
|
-
animation-name: animation-
|
|
34
|
+
animation-name: animation-42qp3t;
|
|
35
35
|
animation-duration: 150ms;
|
|
36
36
|
animation-timing-function: ease-out;
|
|
37
37
|
transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
|
package/skeleton.css
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
@keyframes animation-
|
|
39
|
+
@keyframes animation-3gq2be {
|
|
40
40
|
from {
|
|
41
41
|
opacity: 0.4;
|
|
42
42
|
}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
|
|
50
50
|
.cnvs-skeleton {
|
|
51
51
|
box-sizing: border-box;
|
|
52
|
-
animation: animation-
|
|
52
|
+
animation: animation-3gq2be 0.8s linear infinite alternate;
|
|
53
53
|
position: relative;
|
|
54
54
|
overflow: hidden;
|
|
55
55
|
height: 100%;
|
package/tooltip.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes animation-
|
|
1
|
+
@keyframes animation-3pocsn {
|
|
2
2
|
0% {
|
|
3
3
|
opacity: 0;
|
|
4
4
|
transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
position: relative;
|
|
23
23
|
padding: var(--cnvs-sys-space-x3);
|
|
24
24
|
color: var(--cnvs-sys-color-text-inverse);
|
|
25
|
-
animation-name: animation-
|
|
25
|
+
animation-name: animation-3pocsn;
|
|
26
26
|
animation-duration: 150ms;
|
|
27
27
|
animation-timing-function: ease-out;
|
|
28
28
|
transform-origin: var(--cnvs-tooltip-container-tooltip-transform-origin-vertical) var(--cnvs-tooltip-container-tooltip-transform-origin-horizontal);
|