@workday/canvas-kit-css 11.0.0-alpha.760-next.0 → 11.0.0-alpha.764-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/checkbox.css +46 -69
- package/package.json +2 -2
- package/select.css +1 -1
package/checkbox.css
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
.cnvs-checkbox-background {
|
|
33
33
|
align-items: center;
|
|
34
|
-
background-color: var(--cnvs-
|
|
34
|
+
background-color: var(--cnvs-sys-color-bg-default);
|
|
35
35
|
border-radius: var(--cnvs-sys-shape-half);
|
|
36
36
|
box-sizing: border-box;
|
|
37
37
|
display: flex;
|
|
@@ -42,19 +42,19 @@
|
|
|
42
42
|
position: absolute;
|
|
43
43
|
transition: border 200ms ease,background 200ms;
|
|
44
44
|
width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
|
|
45
|
-
border: 0.0625rem solid var(--cnvs-
|
|
45
|
+
border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
|
|
49
49
|
.cnvs-checkbox-background--error-error {
|
|
50
|
-
--cnvs-background-
|
|
51
|
-
--cnvs-background-
|
|
50
|
+
--cnvs-checkbox-background-errorRingColorInner: var(--cnvs-brand-error-base);
|
|
51
|
+
--cnvs-checkbox-background-errorRingColorOuter: transparent;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
|
|
55
55
|
.cnvs-checkbox-background--error-alert {
|
|
56
|
-
--cnvs-background-
|
|
57
|
-
--cnvs-background-
|
|
56
|
+
--cnvs-checkbox-background-errorRingColorInner: var(--cnvs-brand-alert-base);
|
|
57
|
+
--cnvs-checkbox-background-errorRingColorOuter: var(--cnvs-brand-alert-darkest);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
max-width: 100%;
|
|
65
65
|
pointer-events: none;
|
|
66
66
|
transition: transform 200ms ease,opacity 200ms ease;
|
|
67
|
-
opacity:
|
|
67
|
+
opacity: var(--cnvs-sys-opacity-zero);
|
|
68
68
|
transform: scale(0.5);
|
|
69
69
|
}
|
|
70
70
|
|
|
@@ -75,24 +75,29 @@
|
|
|
75
75
|
|
|
76
76
|
|
|
77
77
|
.cnvs-checkbox-check--checked {
|
|
78
|
-
|
|
78
|
+
--cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
|
|
79
|
+
opacity: var(--cnvs-sys-opacity-full);
|
|
79
80
|
transform: scale(1);
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
|
|
83
84
|
.cnvs-checkbox-check--indeterminate {
|
|
84
|
-
opacity:
|
|
85
|
+
opacity: var(--cnvs-sys-opacity-full);
|
|
85
86
|
transform: scale(1);
|
|
86
87
|
}
|
|
87
88
|
|
|
88
89
|
|
|
90
|
+
.cnvs-checkbox-check--variant-inverse {
|
|
91
|
+
--cnvs-system-icon-color: var(--cnvs-brand-primary-base);
|
|
92
|
+
}
|
|
93
|
+
|
|
89
94
|
.cnvs-checkbox-check--variant-inverse>div {
|
|
90
95
|
background-color: var(--cnvs-brand-primary-base);
|
|
91
96
|
}
|
|
92
97
|
|
|
93
98
|
|
|
94
99
|
.cnvs-indeterminate-box {
|
|
95
|
-
width:
|
|
100
|
+
width: 0.625rem;
|
|
96
101
|
height: calc(var(--cnvs-sys-space-x1) / 2);
|
|
97
102
|
background-color: var(--cnvs-brand-primary-accent);
|
|
98
103
|
}
|
|
@@ -106,19 +111,19 @@
|
|
|
106
111
|
margin-top: calc(0.1875rem * -1);
|
|
107
112
|
margin-inline-start: calc(0.1875rem * -1);
|
|
108
113
|
position: absolute;
|
|
109
|
-
opacity:
|
|
114
|
+
opacity: var(--cnvs-sys-opacity-zero);
|
|
110
115
|
}
|
|
111
116
|
|
|
112
117
|
.cnvs-checkbox-input:not(:disabled) {
|
|
113
118
|
cursor: pointer;
|
|
114
119
|
}
|
|
115
120
|
|
|
116
|
-
.cnvs-checkbox-input:where(:hover
|
|
117
|
-
box-shadow: 0 0 0 0.4375rem var(--cnvs-
|
|
121
|
+
.cnvs-checkbox-input:where(:hover,.hover)~span:first-of-type {
|
|
122
|
+
box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);
|
|
118
123
|
}
|
|
119
124
|
|
|
120
125
|
.cnvs-checkbox-input:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
|
|
121
|
-
border-color: var(--cnvs-
|
|
126
|
+
border-color: var(--cnvs-sys-color-border-input-strong);
|
|
122
127
|
}
|
|
123
128
|
|
|
124
129
|
.cnvs-checkbox-input:where(:checked, :indeterminate)~div:first-of-type {
|
|
@@ -127,9 +132,9 @@
|
|
|
127
132
|
}
|
|
128
133
|
|
|
129
134
|
.cnvs-checkbox-input:disabled~div:first-of-type {
|
|
130
|
-
border-color: var(--cnvs-
|
|
131
|
-
background-color: var(--cnvs-
|
|
132
|
-
opacity:
|
|
135
|
+
border-color: var(--cnvs-sys-color-border-input-disabled);
|
|
136
|
+
background-color: var(--cnvs-sys-color-bg-alt-softer);
|
|
137
|
+
opacity: var(--cnvs-sys-opacity-full);
|
|
133
138
|
}
|
|
134
139
|
|
|
135
140
|
.cnvs-checkbox-input:disabled:where(:checked, :indeterminate)~div:first-of-type {
|
|
@@ -163,36 +168,36 @@
|
|
|
163
168
|
}
|
|
164
169
|
|
|
165
170
|
.cnvs-checkbox-input--variant-inverse~div:first-of-type {
|
|
166
|
-
border-color: var(--cnvs-
|
|
171
|
+
border-color: var(--cnvs-sys-color-border-input-inverse);
|
|
167
172
|
}
|
|
168
173
|
|
|
169
174
|
.cnvs-checkbox-input--variant-inverse:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
|
|
170
|
-
border-color: var(--cnvs-
|
|
175
|
+
border-color: var(--cnvs-sys-color-border-input-inverse);
|
|
171
176
|
}
|
|
172
177
|
|
|
173
178
|
.cnvs-checkbox-input--variant-inverse:where(:checked, :indeterminate)~div:first-of-type {
|
|
174
|
-
border-color: var(--cnvs-
|
|
175
|
-
background-color: var(--cnvs-
|
|
179
|
+
border-color: var(--cnvs-sys-color-border-input-inverse);
|
|
180
|
+
background-color: var(--cnvs-sys-color-bg-default);
|
|
176
181
|
}
|
|
177
182
|
|
|
178
183
|
.cnvs-checkbox-input--variant-inverse:disabled~div:first-of-type {
|
|
179
|
-
background-color: var(--cnvs-
|
|
184
|
+
background-color: var(--cnvs-sys-color-bg-alt-default);
|
|
180
185
|
opacity: var(--cnvs-sys-opacity-disabled);
|
|
181
186
|
}
|
|
182
187
|
|
|
183
188
|
.cnvs-checkbox-input--variant-inverse:disabled:where(:checked, :indeterminate)~div:first-of-type {
|
|
184
|
-
border-color: var(--cnvs-
|
|
185
|
-
background-color: var(--cnvs-
|
|
189
|
+
border-color: var(--cnvs-sys-color-border-input-inverse);
|
|
190
|
+
background-color: var(--cnvs-sys-color-bg-alt-default);
|
|
186
191
|
}
|
|
187
192
|
|
|
188
193
|
.cnvs-checkbox-input--variant-inverse:where(:focus-visible, .focus)~div:first-of-type {
|
|
189
|
-
border-color: var(--cnvs-
|
|
190
|
-
box-shadow: 0 0 0 0px var(--cnvs-
|
|
194
|
+
border-color: var(--cnvs-sys-color-border-contrast-default);
|
|
195
|
+
box-shadow: 0 0 0 0px var(--cnvs-sys-color-fg-strong),0 0 0 2px var(--cnvs-sys-color-fg-inverse);
|
|
191
196
|
}
|
|
192
197
|
|
|
193
198
|
.cnvs-checkbox-input--variant-inverse:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input--variant-inverse:checked.focus~div:first-of-type, .cnvs-checkbox-input--variant-inverse:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input--variant-inverse:indeterminate.focus~div:first-of-type {
|
|
194
|
-
box-shadow: 0 0 0 2px var(--cnvs-
|
|
195
|
-
border-color: var(--cnvs-
|
|
199
|
+
box-shadow: 0 0 0 2px var(--cnvs-sys-color-fg-strong),0 0 0 4px var(--cnvs-sys-color-fg-inverse);
|
|
200
|
+
border-color: var(--cnvs-sys-color-border-inverse);
|
|
196
201
|
}
|
|
197
202
|
|
|
198
203
|
|
|
@@ -201,58 +206,30 @@
|
|
|
201
206
|
}
|
|
202
207
|
|
|
203
208
|
|
|
204
|
-
.cnvs-checkbox-input--error
|
|
205
|
-
border-color: var(--cnvs-background-
|
|
206
|
-
box-shadow: 0 0 0 0.0625rem var(--cnvs-background-
|
|
209
|
+
.cnvs-checkbox-input--error:not(:where(:focus-visible, .focus))~div:first-of-type {
|
|
210
|
+
border-color: var(--cnvs-checkbox-background-errorRingColorInner);
|
|
211
|
+
box-shadow: 0 0 0 0.0625rem var(--cnvs-checkbox-background-errorRingColorInner),0 0 0 0.125rem var(--cnvs-checkbox-background-errorRingColorOuter);
|
|
207
212
|
}
|
|
208
213
|
|
|
209
|
-
.cnvs-checkbox-input--error
|
|
214
|
+
.cnvs-checkbox-input--error:where(:checked, :indeterminate)~div:first-of-type {
|
|
210
215
|
border-color: transparent;
|
|
211
|
-
box-shadow: 0 0 0 0.125rem var(--cnvs-
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.cnvs-checkbox-input--error-error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
|
|
215
|
-
border-color: var(--cnvs-background-inner);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
.cnvs-checkbox-input--error-alert:not(:where(:focus-visible, .focus))~div:first-of-type {
|
|
220
|
-
border: 0.0625rem solid var(--cnvs-background-inner);
|
|
221
|
-
box-shadow: 0 0 0 0.0625rem var(--cnvs-background-inner),0 0 0 0.125rem var(--cnvs-background-outer);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
.cnvs-checkbox-input--error-alert:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
|
|
225
|
-
border-color: var(--cnvs-background-inner);
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.cnvs-checkbox-input--error-alert:where(:checked, :indeterminate)~div:first-of-type {
|
|
229
|
-
border-color: transparent;
|
|
230
|
-
box-shadow: 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),0 0 0 0.25rem var(--cnvs-background-inner),0 0 0 0.3125rem var(--cnvs-background-outer);
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error-error:not(:where(:focus-visible, .focus))~div:first-of-type {
|
|
235
|
-
border: 0.0625rem solid var(--cnvs-base-palette-soap-300);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error-error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
|
|
239
|
-
border-color: var(--cnvs-base-palette-soap-300);
|
|
216
|
+
box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-fg-inverse),0 0 0 0.25rem var(--cnvs-checkbox-background-errorRingColorInner),0 0 0 0.3125rem var(--cnvs-checkbox-background-errorRingColorOuter);
|
|
240
217
|
}
|
|
241
218
|
|
|
242
|
-
.cnvs-checkbox-input--
|
|
243
|
-
border-color: var(--cnvs-
|
|
219
|
+
.cnvs-checkbox-input--error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
|
|
220
|
+
border-color: var(--cnvs-checkbox-background-errorRingColorInner);
|
|
244
221
|
}
|
|
245
222
|
|
|
246
223
|
|
|
247
|
-
.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error
|
|
248
|
-
border: 0.0625rem solid var(--cnvs-
|
|
224
|
+
.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:not(:where(:focus-visible, .focus))~div:first-of-type {
|
|
225
|
+
border: 0.0625rem solid var(--cnvs-sys-color-border-input-inverse);
|
|
249
226
|
}
|
|
250
227
|
|
|
251
|
-
.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error
|
|
252
|
-
border-color: var(--cnvs-
|
|
228
|
+
.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
|
|
229
|
+
border-color: var(--cnvs-sys-color-border-input-inverse);
|
|
253
230
|
}
|
|
254
231
|
|
|
255
|
-
.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error
|
|
256
|
-
border-color: var(--cnvs-
|
|
232
|
+
.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:where(:checked, :indeterminate)~div:first-of-type {
|
|
233
|
+
border-color: var(--cnvs-sys-color-border-input-inverse);
|
|
257
234
|
}
|
|
258
235
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-css",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.764-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": "d76c7698a6761ca15f9d54814fc53db72c183ebe"
|
|
29
29
|
}
|