@workday/canvas-kit-css 14.0.0-alpha.1129-next.0 → 14.0.0-alpha.1135-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.
Files changed (8) hide show
  1. package/badge.css +2 -2
  2. package/loading-dots.css +2 -2
  3. package/modal.css +2 -2
  4. package/package.json +2 -2
  5. package/pagination.css +143 -0
  6. package/popup.css +2 -2
  7. package/skeleton.css +2 -2
  8. package/tooltip.css +2 -2
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-mq0g3q {
1
+ @keyframes animation-qev63q {
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-mq0g3q 0.2s ease;
15
+ animation: animation-qev63q 0.2s ease;
16
16
  background: var(--cnvs-sys-color-static-red-default);
17
17
  border-radius: var(--cnvs-sys-shape-round);
18
18
  color: var(--cnvs-sys-color-text-inverse);
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-mq0g66 {
1
+ @keyframes animation-qev666 {
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-mq0g66;
29
+ animation-name: animation-qev666;
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-mq0g68 {
1
+ @keyframes animation-qev668 {
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-mq0g68;
21
+ animation-name: animation-qev668;
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.1129-next.0",
3
+ "version": "14.0.0-alpha.1135-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": "27f7b4b0b968875921295a1640e043018e8a0716"
28
+ "gitHead": "3c15a81810dfe2232ca4519ae857a0e3b2a3d484"
29
29
  }
package/pagination.css ADDED
@@ -0,0 +1,143 @@
1
+ .cnvs-pagination-controls {
2
+ box-sizing: border-box;
3
+ display: flex;
4
+ gap: var(--cnvs-sys-space-x1);
5
+ align-items: center;
6
+ }
7
+
8
+
9
+ .cnvs-pagination-list {
10
+ box-sizing: border-box;
11
+ display: flex;
12
+ margin-block: var(--cnvs-sys-space-zero);
13
+ margin-inline: var(--cnvs-sys-space-zero);
14
+ padding: var(--cnvs-sys-space-zero);
15
+ list-style: none;
16
+ }
17
+
18
+
19
+ .cnvs-pagination-list-item {
20
+ box-sizing: border-box;
21
+ display: flex;
22
+ }
23
+
24
+
25
+ .cnvs-pagination-page-list {
26
+ box-sizing: border-box;
27
+ display: flex;
28
+ margin: var(--cnvs-sys-space-zero);
29
+ padding-inline-start: var(--cnvs-sys-space-zero);
30
+ padding-inline-end: var(--cnvs-sys-space-zero);
31
+ gap: var(--cnvs-sys-space-x1);
32
+ }
33
+
34
+
35
+ .cnvs-pagination-page-button {
36
+ box-sizing: border-box;
37
+ min-width: var(--cnvs-sys-space-x8);
38
+ padding: var(--cnvs-sys-space-zero);
39
+ font-weight: var(--cnvs-sys-font-weight-normal);
40
+ --cnvs-button-label: var(--cnvs-sys-color-fg-default);
41
+ }
42
+
43
+ .cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
44
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
45
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
46
+ }
47
+
48
+ .cnvs-pagination-page-button:active, .cnvs-pagination-page-button.active, .cnvs-pagination-page-button:focus-visible, .cnvs-pagination-page-button.focus {
49
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
50
+ }
51
+
52
+ .cnvs-pagination-page-button:disabled, .cnvs-pagination-page-button.disabled {
53
+ --cnvs-button-background: var(--cnvs-sys-color-fg-disabled);
54
+ }
55
+
56
+
57
+ .cnvs-pagination-page-button.toggled {
58
+ font-weight: var(--cnvs-sys-font-weight-bold);
59
+ --cnvs-button-background: var(--cnvs-brand-primary-base);
60
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
61
+ }
62
+
63
+ .cnvs-pagination-page-button.toggled:hover, .cnvs-pagination-page-button.toggled.hover, .cnvs-pagination-page-button.toggled:active, .cnvs-pagination-page-button.toggled.active, .cnvs-pagination-page-button.toggled:focus-visible, .cnvs-pagination-page-button.toggled.focus {
64
+ --cnvs-button-background: var(--cnvs-brand-primary-base);
65
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
66
+ }
67
+
68
+ .cnvs-pagination-page-button.toggled:disabled, .cnvs-pagination-page-button.toggled.disabled {
69
+ --cnvs-button-background: var(--cnvs-sys-color-fg-disabled);
70
+ }
71
+
72
+
73
+ .cnvs-pagination-additional-details {
74
+ box-sizing: border-box;
75
+ display: flex;
76
+ font-family: var(--cnvs-sys-font-family-default);
77
+ font-weight: var(--cnvs-sys-font-weight-normal);
78
+ line-height: var(--cnvs-sys-line-height-subtext-medium);
79
+ font-size: var(--cnvs-sys-font-size-subtext-medium);
80
+ letter-spacing: var(--cnvs-base-letter-spacing-100);
81
+ color: var(--cnvs-sys-color-text-hint);
82
+ margin-block-start: var(--cnvs-sys-space-x3);
83
+ }
84
+
85
+
86
+ .cnvs-pagination-additional-details.should-hide-details {
87
+ clip: rect(1px, 1px, 1px, 1px);
88
+ clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
89
+ position: absolute;
90
+ overflow: hidden;
91
+ white-space: nowrap;
92
+ height: 1px;
93
+ min-height: 1px;
94
+ width: 1px;
95
+ min-width: 1px;
96
+ margin: -1px;
97
+ padding: 0;
98
+ border: 0;
99
+ margin-block-start: var(--cnvs-sys-space-zero);
100
+ }
101
+
102
+
103
+ .cnvs-pagination-go-to-form {
104
+ box-sizing: border-box;
105
+ display: flex;
106
+ align-items: center;
107
+ gap: var(--cnvs-sys-space-x2);
108
+ }
109
+
110
+ .cnvs-pagination-go-to-form :dir(rtl) {
111
+ padding-inline-start: var(--cnvs-sys-space-x2);
112
+ padding-inline-end: var(--cnvs-sys-space-x2);
113
+ }
114
+
115
+
116
+ .cnvs-pagination-go-to-text-input {
117
+ box-sizing: border-box;
118
+ min-width: 3.4375rem;
119
+ width: 3.4375rem;
120
+ }
121
+
122
+
123
+ .cnvs-pagination-go-to-label {
124
+ box-sizing: border-box;
125
+ white-space: nowrap;
126
+ }
127
+
128
+
129
+ .cnvs-pagination {
130
+ box-sizing: border-box;
131
+ display: inline-flex;
132
+ flex-direction: column;
133
+ align-items: center;
134
+ }
135
+
136
+
137
+ .cnvs-pagination-nav {
138
+ box-sizing: border-box;
139
+ display: inline-flex;
140
+ flex-direction: column;
141
+ align-items: center;
142
+ }
143
+
package/popup.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
 
6
- @keyframes animation-mq0gy {
6
+ @keyframes animation-qev6y {
7
7
  0% {
8
8
  opacity: 1;
9
9
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -32,7 +32,7 @@
32
32
  padding: var(--cnvs-sys-space-x6);
33
33
  max-height: var(--cnvs-popup-card-max-height);
34
34
  overflow-y: auto;
35
- animation-name: animation-mq0gy;
35
+ animation-name: animation-qev6y;
36
36
  animation-duration: 150ms;
37
37
  animation-timing-function: ease-out;
38
38
  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-mq0g6n {
39
+ @keyframes animation-qev66z {
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-mq0g6n 0.8s linear infinite alternate;
52
+ animation: animation-qev66z 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-mq0g2v {
1
+ @keyframes animation-qev62v {
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-mq0g2v;
25
+ animation-name: animation-qev62v;
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);