@workday/canvas-kit-css 12.0.0-alpha.899-next.0 → 12.0.0-alpha.903-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 (6) 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/popup.css +2 -2
  6. package/text-input.css +66 -8
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-z8ny3c {
1
+ @keyframes animation-nuqn3c {
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-z8ny3c 0.2s ease;
15
+ animation: animation-nuqn3c 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-z8ny4s {
1
+ @keyframes animation-nuqn4y {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -19,7 +19,7 @@
19
19
  border-radius: var(--cnvs-sys-shape-round);
20
20
  transform: scale(0);
21
21
  display: inline-block;
22
- animation-name: animation-z8ny4s;
22
+ animation-name: animation-nuqn4y;
23
23
  animation-duration: calc(var(--cnvs-single-loading-dot-animation-duration-ms) * 35);
24
24
  animation-iteration-count: infinite;
25
25
  animation-timing-function: ease-in-out;
package/modal.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-z8ny4v {
1
+ @keyframes animation-nuqn51 {
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-z8ny4v;
21
+ animation-name: animation-nuqn51;
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": "12.0.0-alpha.899-next.0",
3
+ "version": "12.0.0-alpha.903-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": "56e4e94bdc7da128285ebfc3092bf95140792f9c"
28
+ "gitHead": "06b35f786069a81a2aba5fbd42b46ec88857e5a8"
29
29
  }
package/popup.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-z8nyx {
1
+ @keyframes animation-nuqnx {
2
2
  0% {
3
3
  opacity: 1;
4
4
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -27,7 +27,7 @@
27
27
  padding: var(--cnvs-sys-space-x6);
28
28
  max-height: var(--cnvs-popup-card-max-height);
29
29
  overflow-y: auto;
30
- animation-name: animation-z8nyx;
30
+ animation-name: animation-nuqnx;
31
31
  animation-duration: 150ms;
32
32
  animation-timing-function: ease-out;
33
33
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
package/text-input.css CHANGED
@@ -16,6 +16,7 @@
16
16
  width: var(--cnvs-text-input-width);
17
17
  min-width: var(--cnvs-text-input-width, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));
18
18
  color: var(--cnvs-sys-color-text-default);
19
+ text-overflow: ellipsis;
19
20
  }
20
21
 
21
22
  .cnvs-text-input ::-ms-clear {
@@ -26,23 +27,23 @@
26
27
  color: var(--cnvs-sys-color-text-hint);
27
28
  }
28
29
 
29
- .cnvs-text-input:hover, .cnvs-text-input.hover {
30
+ .cnvs-text-input:is(:hover, .hover) {
30
31
  border-color: var(--cnvs-sys-color-border-input-strong);
31
32
  }
32
33
 
33
- .cnvs-text-input:focus-visible:not([disabled]), .cnvs-text-input.focus:not([disabled]) {
34
+ .cnvs-text-input:is(:focus-visible, .focus):where(:not([disabled])) {
34
35
  border-color: var(--cnvs-brand-common-focus-outline);
35
36
  box-shadow: inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);
36
37
  outline: none;
37
38
  }
38
39
 
39
- .cnvs-text-input:disabled, .cnvs-text-input .disabled {
40
+ .cnvs-text-input:is(:disabled, .disabled) {
40
41
  background-color: var(--cnvs-sys-color-bg-alt-softer);
41
42
  border-color: var(--cnvs-sys-color-border-input-disabled);
42
43
  color: var(--cnvs-sys-color-text-disabled);
43
44
  }
44
45
 
45
- .cnvs-text-input:disabled::placeholder, .cnvs-text-input .disabled::placeholder {
46
+ .cnvs-text-input:is(:disabled, .disabled)::placeholder {
46
47
  color: var(--cnvs-sys-color-text-disabled);
47
48
  }
48
49
 
@@ -63,11 +64,11 @@
63
64
  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);
64
65
  }
65
66
 
66
- .cnvs-text-input.error-error:hover, .cnvs-text-input.error-error.hover, .cnvs-text-input.error-error:disabled, .cnvs-text-input.error-error.disabled, .cnvs-text-input.error-error:focus-visible:not([disabled]), .cnvs-text-input.error-error.focus:not([disabled]) {
67
+ .cnvs-text-input.error-error:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
67
68
  border-color: var(--cnvs-brand-error-base);
68
69
  }
69
70
 
70
- .cnvs-text-input.error-error:focus-visible:not([disabled]), .cnvs-text-input.error-error.focus:not([disabled]) {
71
+ .cnvs-text-input.error-error:is(:focus-visible, .focus):not([disabled]) {
71
72
  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
72
73
  }
73
74
 
@@ -77,11 +78,68 @@
77
78
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);
78
79
  }
79
80
 
80
- .cnvs-text-input.error-alert:hover, .cnvs-text-input.error-alert.hover, .cnvs-text-input.error-alert:disabled, .cnvs-text-input.error-alert.disabled, .cnvs-text-input.error-alert:focus-visible:not([disabled]), .cnvs-text-input.error-alert.focus:not([disabled]) {
81
+ .cnvs-text-input.error-alert:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
81
82
  border-color: var(--cnvs-brand-alert-darkest);
82
83
  }
83
84
 
84
- .cnvs-text-input.error-alert:focus-visible:not([disabled]), .cnvs-text-input.error-alert.focus:not([disabled]) {
85
+ .cnvs-text-input.error-alert:is(:focus-visible, .focus):not([disabled]) {
85
86
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
86
87
  }
87
88
 
89
+
90
+ .cnvs-input-group-inner {
91
+ --cnvs-input-group-inner-inset-inline-start: initial;
92
+ --cnvs-input-group-inner-inset-inline-end: initial;
93
+ --cnvs-input-group-inner-width: var(--cnvs-sys-space-x10);
94
+ --cnvs-input-group-inner-height: var(--cnvs-sys-space-x10);
95
+ box-sizing: border-box;
96
+ display: flex;
97
+ position: absolute;
98
+ align-items: center;
99
+ justify-content: center;
100
+ width: var(--cnvs-input-group-inner-width);
101
+ height: var(--cnvs-input-group-inner-height);
102
+ inset-inline-start: var(--cnvs-input-group-inner-inset-inline-start);
103
+ inset-inline-end: var(--cnvs-input-group-inner-inset-inline-end);
104
+ }
105
+
106
+
107
+ .cnvs-input-group-inner.pointer-events {
108
+ pointer-events: var(--cnvs-input-group-inner-pointer-events);
109
+ }
110
+
111
+
112
+ .cnvs-input-group-input {
113
+ box-sizing: border-box;
114
+ display: flex;
115
+ width: 100%;
116
+ }
117
+
118
+
119
+ .cnvs-input-group-input.padding-inline-start {
120
+ padding-inline-start: var(--cnvs-input-group-input-padding-inline-start);
121
+ }
122
+
123
+
124
+ .cnvs-input-group-input.padding-inline-end {
125
+ padding-inline-end: var(--cnvs-input-group-input-padding-inline-end);
126
+ }
127
+
128
+
129
+ .cnvs-input-group {
130
+ box-sizing: border-box;
131
+ display: flex;
132
+ position: relative;
133
+ }
134
+
135
+ .cnvs-input-group :has([data-part="input-group-clear-button"]) {
136
+ transition: opacity 300ms ease;
137
+ opacity: 1;
138
+ pointer-events: auto;
139
+ }
140
+
141
+ .cnvs-input-group:where(:has(input:placeholder-shown)) :has([data-part="input-group-clear-button"]) {
142
+ opacity: 0;
143
+ pointer-events: none;
144
+ }
145
+