@itwin/itwinui-css 0.45.0 → 0.48.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 (43) hide show
  1. package/css/all.css +699 -710
  2. package/css/badge.css +4 -2
  3. package/css/button.css +31 -96
  4. package/css/color-picker.css +26 -21
  5. package/css/expandable-block.css +12 -0
  6. package/css/inputs.css +498 -503
  7. package/css/popover.css +3 -3
  8. package/css/side-navigation.css +2 -4
  9. package/css/skip-to-content.css +51 -0
  10. package/css/table.css +10 -49
  11. package/css/tile.css +42 -15
  12. package/css/tree.css +21 -15
  13. package/package.json +2 -2
  14. package/scss/badge/badge.scss +5 -2
  15. package/scss/button/button-group.scss +19 -41
  16. package/scss/button/button.scss +19 -1
  17. package/scss/button/classes.scss +0 -1
  18. package/scss/button/default.scss +1 -0
  19. package/scss/classes.scss +1 -0
  20. package/scss/color-picker/color-picker.scss +57 -52
  21. package/scss/expandable-block/block.scss +23 -0
  22. package/scss/index.scss +1 -0
  23. package/scss/inputs/checkbox-radio.scss +17 -136
  24. package/scss/inputs/checkbox.scss +77 -43
  25. package/scss/inputs/classes.scss +15 -9
  26. package/scss/inputs/index.scss +1 -0
  27. package/scss/inputs/input-with-icon.scss +36 -0
  28. package/scss/inputs/input.scss +1 -0
  29. package/scss/inputs/labeled-inputs.scss +49 -14
  30. package/scss/inputs/radio.scss +9 -3
  31. package/scss/inputs/select.scss +44 -93
  32. package/scss/popover/popover.scss +7 -6
  33. package/scss/side-navigation/side-navigation.scss +3 -6
  34. package/scss/skip-to-content/classes.scss +7 -0
  35. package/scss/skip-to-content/index.scss +3 -0
  36. package/scss/skip-to-content/skip-to-content.scss +37 -0
  37. package/scss/style/mixins.scss +29 -4
  38. package/scss/style/variables.scss +1 -0
  39. package/scss/table/paginator.scss +5 -10
  40. package/scss/tile/classes.scss +4 -0
  41. package/scss/tile/tile.scss +17 -16
  42. package/scss/tree/classes.scss +4 -0
  43. package/scss/tree/tree.scss +17 -4
package/css/inputs.css CHANGED
@@ -29,9 +29,9 @@
29
29
  .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
30
30
  margin-top:3px; }
31
31
  .iui-input-container .iui-input,
32
+ .iui-input-container .iui-input-with-icon,
32
33
  .iui-input-container .iui-textarea,
33
- .iui-input-container .iui-input-group,
34
- .iui-input-container .iui-select{
34
+ .iui-input-container .iui-input-group{
35
35
  -ms-grid-row:2;
36
36
  -ms-grid-column:1;
37
37
  -ms-grid-column-span:2;
@@ -45,8 +45,8 @@
45
45
  cursor:not-allowed; }
46
46
  .iui-input-container.iui-disabled label{
47
47
  cursor:not-allowed; }
48
- .iui-input-container .iui-checkbox,
49
- .iui-input-container .iui-radio{
48
+ .iui-input-container .iui-checkbox-wrapper,
49
+ .iui-input-container .iui-radio-wrapper{
50
50
  min-height:22px; }
51
51
  .iui-input-container.iui-inline-label{
52
52
  -ms-grid-rows: auto;
@@ -55,9 +55,9 @@
55
55
  div.iui-input-container.iui-inline-label{
56
56
  -ms-grid-columns:auto min-content auto; }
57
57
  .iui-input-container.iui-inline-label .iui-input,
58
+ .iui-input-container.iui-inline-label .iui-input-with-icon,
58
59
  .iui-input-container.iui-inline-label .iui-textarea,
59
- .iui-input-container.iui-inline-label .iui-input-group,
60
- .iui-input-container.iui-inline-label .iui-select{
60
+ .iui-input-container.iui-inline-label .iui-input-group{
61
61
  -ms-grid-row:1;
62
62
  -ms-grid-column:2; }
63
63
  .iui-input-container.iui-inline-label .iui-input-icon{
@@ -101,7 +101,7 @@
101
101
  margin-left:4px;
102
102
  color:#D30A0A;
103
103
  color:var(--iui-color-foreground-negative); }
104
- .iui-input-container > .iui-input-icon{
104
+ .iui-input-container .iui-input-icon{
105
105
  -ms-grid-row:3;
106
106
  -ms-grid-column:1;
107
107
  display:flex;
@@ -112,7 +112,7 @@
112
112
  align-self:center;
113
113
  fill:rgba(0, 0, 0, 0.4);
114
114
  fill:var(--iui-icons-color); }
115
- .iui-input-container > .iui-input-icon:not(:last-child){
115
+ .iui-input-container .iui-input-icon:not(:last-child){
116
116
  margin-right:4px; }
117
117
  .iui-input-container .iui-message{
118
118
  -ms-grid-row:3;
@@ -127,19 +127,17 @@
127
127
  -moz-user-select:none;
128
128
  -ms-user-select:none;
129
129
  user-select:none; }
130
- .iui-input-container.iui-inline-label > .iui-label{
131
- margin:0 16px 0 0;
132
- -ms-grid-column-span:1; }
133
- .iui-input-container.iui-inline-label > .iui-label.iui-required{
134
- margin-right:6px; }
135
130
  .iui-input-container.iui-inline-icon > .iui-input-icon{
136
131
  -ms-grid-row:1;
137
132
  -ms-grid-column:3;
138
133
  grid-area:inputs;
139
134
  -ms-grid-column-align:end;
140
135
  justify-self:end;
141
- margin:0 12px 0 0;
136
+ margin:0 14px 0 0;
142
137
  position:relative; }
138
+ .iui-input-container.iui-inline-icon > .iui-input-icon svg{
139
+ width:16px;
140
+ height:16px; }
143
141
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
144
142
  height:100%;
145
143
  width:-webkit-fit-content;
@@ -147,11 +145,13 @@
147
145
  width:fit-content;
148
146
  margin-right:0;
149
147
  border-top-left-radius:0;
150
- border-bottom-left-radius:0; }
148
+ border-bottom-left-radius:0;
149
+ border-top-right-radius:inherit;
150
+ border-bottom-right-radius:inherit; }
151
151
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
152
152
  align-items:center;
153
153
  height:90%;
154
- margin-right:1px;
154
+ margin-right:2px;
155
155
  padding:0 12px;
156
156
  cursor:pointer;
157
157
  background-position:center;
@@ -163,13 +163,21 @@
163
163
  background-size:100%;
164
164
  transition:background 0s; }
165
165
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
166
- width:16px;
167
- height:16px;
168
166
  fill:rgba(0, 0, 0, 0.4);
169
167
  fill:var(--iui-icons-color);
170
168
  transition:transform 0.2s ease-out; }
171
169
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
172
170
  transform:rotate(180deg); }
171
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
172
+ cursor:not-allowed; }
173
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
174
+ fill:rgba(0, 0, 0, 0.2);
175
+ fill:var(--iui-icons-color-actionable-disabled); }
176
+ .iui-input-container.iui-inline-label > .iui-label{
177
+ margin:0 16px 0 0;
178
+ -ms-grid-column-span:1; }
179
+ .iui-input-container.iui-inline-label > .iui-label.iui-required{
180
+ margin-right:6px; }
173
181
  .iui-input-container.iui-positive *::-moz-selection{
174
182
  background-color:rgba(83, 162, 26, 0.4);
175
183
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
@@ -190,29 +198,39 @@
190
198
  text-decoration:none;
191
199
  color:#3c7613;
192
200
  color:var(--iui-color-foreground-positive-overlay); }
193
- .iui-input-container.iui-positive > .iui-input,
194
- .iui-input-container.iui-positive > .iui-textarea,
195
- .iui-input-container.iui-positive > .iui-select > .iui-select-button{
201
+ .iui-input-container.iui-positive .iui-input,
202
+ .iui-input-container.iui-positive .iui-textarea{
196
203
  padding-bottom:6px;
197
204
  border-bottom:2px solid #53A21A;
198
205
  border-bottom:2px solid var(--iui-color-foreground-positive); }
199
- .iui-input-container.iui-positive > .iui-input.iui-small,
200
- .iui-input-container.iui-positive > .iui-textarea.iui-small,
201
- .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-small{
206
+ .iui-input-container.iui-positive .iui-input.iui-small,
207
+ .iui-input-container.iui-positive .iui-textarea.iui-small{
202
208
  padding-bottom:0.5px; }
203
- .iui-input-container.iui-positive > .iui-input.iui-large,
204
- .iui-input-container.iui-positive > .iui-textarea.iui-large,
205
- .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-large{
209
+ .iui-input-container.iui-positive .iui-input.iui-large,
210
+ .iui-input-container.iui-positive .iui-textarea.iui-large{
206
211
  padding-bottom:11.5px; }
207
- .iui-input-container.iui-positive > .iui-input:focus,
208
- .iui-input-container.iui-positive > .iui-textarea:focus,
209
- .iui-input-container.iui-positive > .iui-select > .iui-select-button:focus{
212
+ .iui-input-container.iui-positive .iui-input:focus,
213
+ .iui-input-container.iui-positive .iui-textarea:focus{
210
214
  border-bottom:2px solid #53A21A;
211
215
  outline:2px solid #53A21A;
212
216
  outline-offset:-2px;
213
217
  border-bottom:2px solid var(--iui-color-foreground-positive);
214
218
  outline:2px solid var(--iui-color-foreground-positive);
215
219
  outline-offset:-2px; }
220
+ .iui-input-container.iui-positive .iui-input-with-icon{
221
+ --_hover-color:var(--iui-color-foreground-positive);
222
+ --_focus-color:var(--iui-color-foreground-positive); }
223
+ .iui-input-container.iui-positive .iui-select-button{
224
+ border-bottom:transparent; }
225
+ .iui-input-container.iui-positive .iui-select-button::after{
226
+ content:'';
227
+ width:100%;
228
+ position:absolute;
229
+ bottom:0;
230
+ left:0;
231
+ height:2px;
232
+ background-color:#53A21A;
233
+ background-color:var(--iui-color-foreground-positive); }
216
234
  .iui-input-container.iui-negative *::-moz-selection{
217
235
  background-color:rgba(211, 10, 10, 0.4);
218
236
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
@@ -233,29 +251,39 @@
233
251
  text-decoration:none;
234
252
  color:#a20808;
235
253
  color:var(--iui-color-foreground-negative-overlay); }
236
- .iui-input-container.iui-negative > .iui-input,
237
- .iui-input-container.iui-negative > .iui-textarea,
238
- .iui-input-container.iui-negative > .iui-select > .iui-select-button{
254
+ .iui-input-container.iui-negative .iui-input,
255
+ .iui-input-container.iui-negative .iui-textarea{
239
256
  padding-bottom:6px;
240
257
  border-bottom:2px solid #D30A0A;
241
258
  border-bottom:2px solid var(--iui-color-foreground-negative); }
242
- .iui-input-container.iui-negative > .iui-input.iui-small,
243
- .iui-input-container.iui-negative > .iui-textarea.iui-small,
244
- .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-small{
259
+ .iui-input-container.iui-negative .iui-input.iui-small,
260
+ .iui-input-container.iui-negative .iui-textarea.iui-small{
245
261
  padding-bottom:0.5px; }
246
- .iui-input-container.iui-negative > .iui-input.iui-large,
247
- .iui-input-container.iui-negative > .iui-textarea.iui-large,
248
- .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-large{
262
+ .iui-input-container.iui-negative .iui-input.iui-large,
263
+ .iui-input-container.iui-negative .iui-textarea.iui-large{
249
264
  padding-bottom:11.5px; }
250
- .iui-input-container.iui-negative > .iui-input:focus,
251
- .iui-input-container.iui-negative > .iui-textarea:focus,
252
- .iui-input-container.iui-negative > .iui-select > .iui-select-button:focus{
265
+ .iui-input-container.iui-negative .iui-input:focus,
266
+ .iui-input-container.iui-negative .iui-textarea:focus{
253
267
  border-bottom:2px solid #D30A0A;
254
268
  outline:2px solid #D30A0A;
255
269
  outline-offset:-2px;
256
270
  border-bottom:2px solid var(--iui-color-foreground-negative);
257
271
  outline:2px solid var(--iui-color-foreground-negative);
258
272
  outline-offset:-2px; }
273
+ .iui-input-container.iui-negative .iui-input-with-icon{
274
+ --_hover-color:var(--iui-color-foreground-negative);
275
+ --_focus-color:var(--iui-color-foreground-negative); }
276
+ .iui-input-container.iui-negative .iui-select-button{
277
+ border-bottom:transparent; }
278
+ .iui-input-container.iui-negative .iui-select-button::after{
279
+ content:'';
280
+ width:100%;
281
+ position:absolute;
282
+ bottom:0;
283
+ left:0;
284
+ height:2px;
285
+ background-color:#D30A0A;
286
+ background-color:var(--iui-color-foreground-negative); }
259
287
  .iui-input-container.iui-warning *::-moz-selection{
260
288
  background-color:rgba(241, 139, 18, 0.4);
261
289
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
@@ -276,29 +304,39 @@
276
304
  text-decoration:none;
277
305
  color:#c4700c;
278
306
  color:var(--iui-color-foreground-warning-overlay); }
279
- .iui-input-container.iui-warning > .iui-input,
280
- .iui-input-container.iui-warning > .iui-textarea,
281
- .iui-input-container.iui-warning > .iui-select > .iui-select-button{
307
+ .iui-input-container.iui-warning .iui-input,
308
+ .iui-input-container.iui-warning .iui-textarea{
282
309
  padding-bottom:6px;
283
310
  border-bottom:2px solid #F18B12;
284
311
  border-bottom:2px solid var(--iui-color-foreground-warning); }
285
- .iui-input-container.iui-warning > .iui-input.iui-small,
286
- .iui-input-container.iui-warning > .iui-textarea.iui-small,
287
- .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-small{
312
+ .iui-input-container.iui-warning .iui-input.iui-small,
313
+ .iui-input-container.iui-warning .iui-textarea.iui-small{
288
314
  padding-bottom:0.5px; }
289
- .iui-input-container.iui-warning > .iui-input.iui-large,
290
- .iui-input-container.iui-warning > .iui-textarea.iui-large,
291
- .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-large{
315
+ .iui-input-container.iui-warning .iui-input.iui-large,
316
+ .iui-input-container.iui-warning .iui-textarea.iui-large{
292
317
  padding-bottom:11.5px; }
293
- .iui-input-container.iui-warning > .iui-input:focus,
294
- .iui-input-container.iui-warning > .iui-textarea:focus,
295
- .iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
318
+ .iui-input-container.iui-warning .iui-input:focus,
319
+ .iui-input-container.iui-warning .iui-textarea:focus{
296
320
  border-bottom:2px solid #F18B12;
297
321
  outline:2px solid #F18B12;
298
322
  outline-offset:-2px;
299
323
  border-bottom:2px solid var(--iui-color-foreground-warning);
300
324
  outline:2px solid var(--iui-color-foreground-warning);
301
325
  outline-offset:-2px; }
326
+ .iui-input-container.iui-warning .iui-input-with-icon{
327
+ --_hover-color:var(--iui-color-foreground-warning);
328
+ --_focus-color:var(--iui-color-foreground-warning); }
329
+ .iui-input-container.iui-warning .iui-select-button{
330
+ border-bottom:transparent; }
331
+ .iui-input-container.iui-warning .iui-select-button::after{
332
+ content:'';
333
+ width:100%;
334
+ position:absolute;
335
+ bottom:0;
336
+ left:0;
337
+ height:2px;
338
+ background-color:#F18B12;
339
+ background-color:var(--iui-color-foreground-warning); }
302
340
 
303
341
  .iui-input-label{
304
342
  font-weight:600;
@@ -406,7 +444,70 @@
406
444
  border-color:#EEF0F3;
407
445
  background-color:var(--iui-color-background-disabled);
408
446
  border-color:var(--iui-color-background-disabled);
447
+ cursor:not-allowed;
448
+ --_hover-color:var(--iui-color-background-disabled); }
449
+
450
+ .iui-select-button{
451
+ width:100%;
452
+ margin:0;
453
+ border-radius:3px;
454
+ box-sizing:border-box;
455
+ padding:7px 12px;
456
+ min-height:38px;
457
+ transition:border-color 0.2s ease-out;
458
+ display:flex;
459
+ align-items:center;
460
+ -webkit-user-select:none;
461
+ -moz-user-select:none;
462
+ -ms-user-select:none;
463
+ user-select:none;
464
+ position:relative;
465
+ overflow:hidden;
466
+ color:rgba(0, 0, 0, 0.8);
467
+ background-color:#FFF;
468
+ border:1px solid rgba(0, 0, 0, 0.4);
469
+ color:var(--iui-text-color);
470
+ background-color:var(--iui-color-background-1);
471
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
472
+ .iui-select-button:focus-visible{
473
+ outline:2px solid var(--iui-color-foreground-primary);
474
+ outline-offset:-2px; }
475
+ @supports not selector(*:focus-visible){
476
+ .iui-select-button:focus{
477
+ outline:2px solid var(--iui-color-foreground-primary);
478
+ outline-offset:-2px; } }
479
+ .iui-select-button.iui-small{
480
+ padding-top:1.5px;
481
+ padding-bottom:1.5px;
482
+ min-height:27px; }
483
+ .iui-select-button.iui-large{
484
+ padding-top:12.5px;
485
+ padding-bottom:12.5px;
486
+ min-height:49px;
487
+ font-size:16px; }
488
+ .iui-select-button.iui-disabled{
489
+ background-color:#EEF0F3;
490
+ border-color:#EEF0F3;
491
+ background-color:var(--iui-color-background-disabled);
492
+ border-color:var(--iui-color-background-disabled);
493
+ --_hover-color:var(--iui-color-background-disabled);
409
494
  cursor:not-allowed; }
495
+ .iui-select-button .iui-icon{
496
+ width:16px;
497
+ height:16px;
498
+ flex:0 0 auto;
499
+ fill:rgba(0, 0, 0, 0.8);
500
+ fill:var(--iui-icons-color-actionable);
501
+ fill:currentColor; }
502
+ .iui-select-button .iui-icon + .iui-content{
503
+ margin-left:8px; }
504
+ .iui-select-button .iui-content{
505
+ overflow:hidden;
506
+ white-space:nowrap;
507
+ text-overflow:ellipsis; }
508
+ .iui-select-button.iui-placeholder{
509
+ color:rgba(0, 0, 0, 0.2);
510
+ color:var(--iui-text-color-placeholder); }
410
511
 
411
512
  .iui-textarea{
412
513
  margin:0;
@@ -494,487 +595,381 @@
494
595
  border-color:#EEF0F3;
495
596
  background-color:var(--iui-color-background-disabled);
496
597
  border-color:var(--iui-color-background-disabled);
497
- cursor:not-allowed; }
598
+ cursor:not-allowed;
599
+ --_hover-color:var(--iui-color-background-disabled); }
498
600
  .iui-textarea[disabled], .iui-textarea[readonly]{
499
601
  resize:none; }
500
602
 
501
- .iui-select{
502
- margin:0;
503
- padding:0;
504
- border:none;
505
- vertical-align:baseline;
603
+ .iui-input-with-icon{
604
+ display:-ms-grid;
605
+ display:grid;
606
+ align-items:center;
607
+ cursor:pointer; }
608
+ .iui-input-with-icon > :first-child{
609
+ -ms-grid-row:1;
610
+ grid-area:1 / -1;
611
+ padding-right:40px; }
612
+ .iui-input-with-icon:focus-within > :first-child{
613
+ outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
614
+ outline-offset:-2px; }
615
+ .iui-input-with-icon:hover > :first-child{
616
+ border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2))); }
617
+
618
+ .iui-end-icon{
619
+ -ms-grid-row:1;
620
+ -ms-grid-column:3;
621
+ grid-area:inputs;
622
+ -ms-grid-column-align:end;
623
+ justify-self:end;
624
+ margin:0 14px 0 0;
625
+ position:relative;
506
626
  display:flex;
507
- flex-direction:column;
627
+ grid-area:1 / -1; }
628
+ .iui-end-icon svg{
629
+ width:16px;
630
+ height:16px; }
631
+ .iui-end-icon.iui-button{
632
+ height:100%;
633
+ width:-webkit-fit-content;
634
+ width:-moz-fit-content;
635
+ width:fit-content;
636
+ margin-right:0;
637
+ border-top-left-radius:0;
638
+ border-bottom-left-radius:0;
639
+ border-top-right-radius:inherit;
640
+ border-bottom-right-radius:inherit; }
641
+ .iui-end-icon.iui-actionable{
642
+ align-items:center;
643
+ height:90%;
644
+ margin-right:2px;
645
+ padding:0 12px;
646
+ cursor:pointer;
647
+ background-position:center;
648
+ transition:background 0.4s ease-out; }
649
+ .iui-end-icon.iui-actionable:hover{
650
+ background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
651
+ .iui-end-icon.iui-actionable:active{
652
+ background-color:var(--iui-color-background-2);
653
+ background-size:100%;
654
+ transition:background 0s; }
655
+ .iui-end-icon.iui-actionable svg{
656
+ fill:rgba(0, 0, 0, 0.4);
657
+ fill:var(--iui-icons-color);
658
+ transition:transform 0.2s ease-out; }
659
+ .iui-end-icon.iui-actionable.iui-open svg{
660
+ transform:rotate(180deg); }
661
+ .iui-end-icon.iui-disabled{
662
+ cursor:not-allowed; }
663
+ .iui-end-icon.iui-disabled svg{
664
+ fill:rgba(0, 0, 0, 0.2);
665
+ fill:var(--iui-icons-color-actionable-disabled); }
666
+
667
+ .iui-checkbox{
668
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
669
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
670
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
671
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
672
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
673
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
674
+ --_iui-checkbox-mask-image:initial;
675
+ -webkit-appearance:none;
676
+ -moz-appearance:none;
677
+ appearance:none;
678
+ margin:0;
679
+ width:16px;
680
+ height:16px;
508
681
  position:relative;
509
- width:100%;
510
- min-width:0; }
511
- .iui-select > .iui-select-button{
682
+ border-radius:3px;
683
+ background-color:var(--_iui-checkbox-background-color);
684
+ cursor:pointer; }
685
+ .iui-checkbox-wrapper{
512
686
  margin:0;
513
687
  padding:0;
514
688
  border:none;
515
689
  vertical-align:baseline;
516
- width:100%;
517
- font-family:inherit;
518
- font-size:14px;
519
- font-weight:400;
520
- line-height:22px;
521
- border-radius:3px;
522
- -webkit-appearance:none;
523
- -moz-appearance:none;
524
- appearance:none;
525
- box-sizing:border-box;
526
- padding:7px 12px;
527
- min-height:38px;
528
- color:rgba(0, 0, 0, 0.8);
529
- background-color:#FFF;
530
- border:1px solid rgba(0, 0, 0, 0.4);
531
- color:var(--iui-text-color);
532
- background-color:var(--iui-color-background-1);
533
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
534
690
  display:flex;
535
691
  align-items:center;
536
- min-height:38px;
537
- padding-right:32px;
692
+ font-size:14px;
693
+ width:-webkit-fit-content;
694
+ width:-moz-fit-content;
695
+ width:fit-content;
538
696
  -webkit-user-select:none;
539
697
  -moz-user-select:none;
540
698
  -ms-user-select:none;
541
699
  user-select:none;
542
- position:relative; }
543
- .iui-select > .iui-select-button:focus-visible{
544
- outline:2px solid var(--iui-color-foreground-primary);
545
- outline-offset:-2px; }
546
- @supports not selector(*:focus-visible){
547
- .iui-select > .iui-select-button:focus{
548
- outline:2px solid var(--iui-color-foreground-primary);
549
- outline-offset:-2px; } }
550
- @media (prefers-reduced-motion: no-preference){
551
- .iui-select > .iui-select-button{
552
- transition:border-color 0.2s ease-out; } }
553
- .iui-select > .iui-select-button.iui-small{
554
- padding-top:1.5px;
555
- padding-bottom:1.5px;
556
- min-height:27px; }
557
- .iui-select > .iui-select-button.iui-large{
558
- padding-top:12.5px;
559
- padding-bottom:12.5px;
560
- min-height:49px;
561
- font-size:16px; }
562
- .iui-select > .iui-select-button::-moz-placeholder{
563
- -moz-user-select:none;
564
- user-select:none;
565
- color:rgba(0, 0, 0, 0.2);
566
- color:var(--iui-text-color-placeholder); }
567
- .iui-select > .iui-select-button:-ms-input-placeholder{
568
- -ms-user-select:none;
569
- user-select:none;
570
- color:rgba(0, 0, 0, 0.2);
571
- color:var(--iui-text-color-placeholder); }
572
- .iui-select > .iui-select-button::placeholder{
573
- -webkit-user-select:none;
574
- -moz-user-select:none;
575
- -ms-user-select:none;
576
- user-select:none;
577
- color:rgba(0, 0, 0, 0.2);
578
- color:var(--iui-text-color-placeholder); }
579
- .iui-select > .iui-select-button:-webkit-autofill{
580
- border-color:#008be1;
581
- color:#008be1;
582
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
583
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
584
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
585
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
586
- .iui-select > .iui-select-button:autofill{
587
- border-color:#008be1;
588
- color:#008be1;
589
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
590
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
591
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
592
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
593
- .iui-select > .iui-select-button:hover{
594
- border-color:rgba(0, 0, 0, 0.8);
595
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
596
- @media (prefers-reduced-motion: no-preference){
597
- .iui-select > .iui-select-button:hover{
598
- transition:border-color 0.2s ease-out; } }
599
- .iui-select > .iui-select-button[disabled]{
600
- background-color:#EEF0F3;
601
- border-color:#EEF0F3;
602
- background-color:var(--iui-color-background-disabled);
603
- border-color:var(--iui-color-background-disabled);
604
- cursor:not-allowed; }
605
- .iui-select > .iui-select-button:focus-visible{
606
- outline:2px solid var(--iui-color-foreground-primary);
607
- outline-offset:-2px; }
608
- @supports not selector(*:focus-visible){
609
- .iui-select > .iui-select-button:focus{
610
- outline:2px solid var(--iui-color-foreground-primary);
611
- outline-offset:-2px; } }
612
- @media (prefers-reduced-motion: no-preference){
613
- .iui-select > .iui-select-button{
614
- transition:border-color 0.2s ease-out; } }
615
- .iui-select > .iui-select-button > .iui-icon{
616
- width:16px;
617
- height:16px;
618
- flex:0 0 auto;
619
- fill:rgba(0, 0, 0, 0.8);
620
- fill:var(--iui-icons-color-actionable); }
621
- .iui-select > .iui-select-button > .iui-icon + .iui-content{
622
- margin-left:8px; }
623
- .iui-select > .iui-select-button > .iui-content{
624
- overflow:hidden;
625
- white-space:nowrap;
626
- text-overflow:ellipsis; }
627
- .iui-select > .iui-select-button.iui-placeholder{
628
- color:rgba(0, 0, 0, 0.2);
629
- color:var(--iui-text-color-placeholder); }
630
- .iui-select > .iui-select-button::after{
631
- content:'';
632
- position:absolute;
633
- top:50%;
634
- right:16px;
635
- transform:translateY(-50%);
636
- width:0;
637
- height:0;
638
- border-left:5px solid transparent;
639
- border-right:5px solid transparent;
640
- border-top:5px solid rgba(0, 0, 0, 0.8);
641
- border-top:5px solid var(--iui-icons-color-actionable); }
642
- .iui-select > .iui-select-button:hover{
643
- border-color:rgba(0, 0, 0, 0.8);
644
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
645
- .iui-select > .iui-select-button:hover::after{
646
- border-bottom:none;
647
- border-top:5px solid black;
648
- border-top:5px solid var(--iui-icons-color-actionable-hover); }
649
- .iui-select > .iui-select-button.iui-active::after{
650
- border-top:none;
651
- border-bottom:5px solid rgba(0, 0, 0, 0.8);
652
- border-bottom:5px solid var(--iui-icons-color-actionable); }
653
- .iui-select > .iui-select-button.iui-active:hover::after{
654
- border-bottom:5px solid black;
655
- border-bottom:5px solid var(--iui-icons-color-actionable-hover); }
656
- .iui-select > .iui-select-button.iui-disabled{
657
- cursor:not-allowed;
658
- background-color:#EEF0F3;
659
- border-color:#EEF0F3;
660
- background-color:var(--iui-color-background-disabled);
661
- border-color:var(--iui-color-background-disabled); }
662
- .iui-select > .iui-select-button.iui-disabled::after{
663
- border-top:5px solid rgba(0, 0, 0, 0.2);
664
- border-top:5px solid var(--iui-icons-color-actionable-disabled); }
665
- .iui-select.iui-small .iui-select-button{
666
- padding-top:1.5px;
667
- padding-bottom:1.5px;
668
- min-height:27px; }
669
- .iui-select.iui-large .iui-select-button{
670
- padding-top:12.5px;
671
- padding-bottom:12.5px;
672
- min-height:49px;
673
- font-size:16px; }
674
-
675
- .iui-checkbox{
676
- margin:0;
677
- padding:0;
678
- border:none;
679
- vertical-align:baseline;
680
- display:flex;
681
- align-items:center;
682
- font-size:14px;
683
- width:-webkit-fit-content;
684
- width:-moz-fit-content;
685
- width:fit-content;
686
- -webkit-user-select:none;
687
- -moz-user-select:none;
688
- -ms-user-select:none;
689
- user-select:none;
690
- position:relative;
691
- cursor:pointer;
692
- color:rgba(0, 0, 0, 0.8);
693
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
694
- .iui-checkbox > input{
695
- width:0;
696
- height:0;
697
- -webkit-appearance:none;
698
- -moz-appearance:none;
699
- appearance:none;
700
- opacity:0;
701
- position:absolute; }
702
- .iui-checkbox.iui-disabled{
703
- cursor:not-allowed; }
704
- .iui-checkbox .iui-checkbox-checkmark,
705
- .iui-checkbox .iui-radio-dot{
706
- width:16px;
707
- height:16px;
708
- margin:0;
709
- display:flex;
710
- flex-shrink:0;
711
- justify-content:center;
712
- align-items:center;
713
700
  position:relative;
714
- isolation:isolate;
715
- border-color:rgba(0, 0, 0, 0.4);
716
- background-color:#FFF;
717
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
718
- background-color:var(--iui-color-background-1); }
719
- .iui-checkbox .iui-checkbox-checkmark::after,
720
- .iui-checkbox .iui-radio-dot::after{
721
- content:'';
722
- position:absolute;
723
- inset:0;
724
- z-index:-1;
725
- transition:border-color 0.2s ease-out;
726
- border-radius:inherit;
727
- border-style:solid;
728
- border-width:1px;
729
- border-color:inherit; }
730
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial),
731
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial){
732
- width:100%;
733
- height:100%;
734
- fill:#008BE1;
735
- fill:var(--iui-icons-color-primary); }
736
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
737
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
738
- opacity:0; }
739
- @media (prefers-reduced-motion: no-preference){
740
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
741
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
742
- transition:opacity 0.2s ease; } }
743
- .iui-checkbox > .iui-label{
744
- margin-right:8px;
745
- display:flex;
746
- align-items:center; }
747
- .iui-checkbox > .iui-label svg{
748
- width:16px;
749
- height:16px;
750
- vertical-align:middle;
751
- fill:rgba(0, 0, 0, 0.8);
752
- fill:var(--iui-icons-color-actionable); }
753
- .iui-checkbox .iui-checkbox-checkmark ~ .iui-label,
754
- .iui-checkbox .iui-radio-dot ~ .iui-label{
755
- margin-left:8px;
756
- margin-right:0; }
757
- .iui-checkbox:hover > input:enabled ~ .iui-checkbox-checkmark,
758
- .iui-checkbox:hover > input:enabled ~ .iui-radio-dot{
759
- border-color:rgba(0, 0, 0, 0.8);
760
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
761
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark,
762
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark,
763
- .iui-checkbox input:checked ~ .iui-radio-dot{
764
- border-color:rgba(0, 0, 0, 0.6);
765
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
766
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
767
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
768
- .iui-checkbox input:checked ~ .iui-radio-dot circle{
769
- opacity:1; }
770
- @media (prefers-reduced-motion: no-preference){
771
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
772
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
773
- .iui-checkbox input:checked ~ .iui-radio-dot circle{
774
- transition:opacity 0.2s ease; } }
775
- .iui-checkbox input:enabled:focus ~ .iui-checkbox-checkmark,
776
- .iui-checkbox input:enabled:focus ~ .iui-radio-dot{
777
- outline:2px solid #008BE1;
701
+ cursor:pointer;
702
+ color:rgba(0, 0, 0, 0.8);
703
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
704
+ gap:8px; }
705
+ .iui-checkbox-wrapper > * + *{
706
+ margin-left:8px; }
707
+ @supports (gap: 8px){
708
+ .iui-checkbox-wrapper > * + *{
709
+ margin-left:0; } }
710
+ .iui-checkbox-wrapper.iui-loading{
711
+ cursor:wait;
712
+ color:var(--iui-text-color-muted); }
713
+ .iui-checkbox-wrapper > .iui-checkbox-label,
714
+ .iui-checkbox-wrapper > .iui-radio-label{
715
+ display:flex;
716
+ align-items:center; }
717
+ .iui-checkbox-wrapper > .iui-checkbox-label svg,
718
+ .iui-checkbox-wrapper > .iui-radio-label svg{
719
+ width:16px;
720
+ height:16px;
721
+ vertical-align:middle;
722
+ fill:currentColor; }
723
+ .iui-checkbox-wrapper.iui-disabled{
724
+ cursor:not-allowed;
725
+ color:var(--iui-text-color-muted); }
726
+ .iui-checkbox-wrapper.iui-disabled svg{
727
+ fill:var(--iui-icons-color-actionable-disabled); }
728
+ .iui-checkbox-wrapper.iui-positive{
729
+ color:#53A21A;
730
+ color:var(--iui-color-foreground-positive); }
731
+ .iui-checkbox-wrapper.iui-warning{
732
+ color:#F18B12;
733
+ color:var(--iui-color-foreground-warning); }
734
+ .iui-checkbox-wrapper.iui-negative{
735
+ color:#D30A0A;
736
+ color:var(--iui-color-foreground-negative); }
737
+ .iui-checkbox::before{
738
+ content:'';
739
+ position:absolute;
740
+ inset:0;
741
+ transition:border-color 0.2s ease-out;
742
+ border-radius:inherit;
743
+ border-style:solid;
744
+ border-width:1px;
745
+ border-color:var(--_iui-checkbox-border-color); }
746
+ .iui-checkbox::after{
747
+ content:'';
748
+ position:absolute;
749
+ inset:0;
750
+ background-color:var(--_iui-checkbox-svg-color);
751
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
752
+ mask:var(--_iui-checkbox-mask-image) no-repeat center; }
753
+ .iui-checkbox:not(:checked){
754
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
755
+ .iui-checkbox:checked{
756
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
757
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg); }
758
+ .iui-checkbox:indeterminate{
759
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
760
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg); }
761
+ .iui-checkbox:hover{
762
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
763
+ .iui-checkbox:focus-visible{
778
764
  outline:2px solid var(--iui-color-foreground-primary);
779
765
  outline-offset:-1px; }
780
- .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
781
- .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
782
- outline:none; }
783
- .iui-checkbox input:disabled ~ .iui-checkbox-checkmark,
784
- .iui-checkbox input:disabled ~ .iui-radio-dot{
785
- cursor:not-allowed;
786
- background-color:#EEF0F3;
787
- border-color:#EEF0F3;
788
- background-color:var(--iui-color-background-disabled);
789
- border-color:var(--iui-color-background-disabled); }
790
- .iui-checkbox input:disabled ~ .iui-checkbox-checkmark svg,
791
- .iui-checkbox input:disabled ~ .iui-radio-dot svg{
792
- fill:rgba(0, 0, 0, 0.2);
793
- fill:var(--iui-icons-color-actionable-disabled); }
794
- .iui-checkbox input:disabled ~ .iui-label{
795
- cursor:not-allowed;
796
- color:rgba(0, 0, 0, 0.4);
797
- color:var(--iui-text-color-muted); }
798
- .iui-checkbox input:disabled ~ .iui-label svg{
799
- fill:rgba(0, 0, 0, 0.2);
800
- fill:var(--iui-icons-color-actionable-disabled); }
801
- .iui-checkbox.iui-positive{
802
- color:#53A21A;
803
- color:var(--iui-color-foreground-positive); }
804
- .iui-checkbox.iui-warning{
805
- color:#F18B12;
806
- color:var(--iui-color-foreground-warning); }
807
- .iui-checkbox.iui-negative{
808
- color:#D30A0A;
809
- color:var(--iui-color-foreground-negative); }
810
- .iui-checkbox .iui-checkbox-checkmark{
811
- border-radius:3px; }
766
+ @supports not selector(*:focus-visible){
767
+ .iui-checkbox:focus{
768
+ outline:2px solid var(--iui-color-foreground-primary);
769
+ outline-offset:-1px; } }
770
+ .iui-checkbox.iui-checkbox-visibility{
771
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
772
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
773
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
774
+ --_iui-checkbox-border-color:transparent;
775
+ --_iui-checkbox-background-color:transparent; }
776
+ .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
777
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable); }
778
+ .iui-checkbox.iui-checkbox-visibility:where(:hover){
779
+ --_iui-checkbox-border-color:transparent;
780
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
781
+ .iui-checkbox:disabled{
782
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
783
+ --_iui-checkbox-border-color:var(--iui-color-background-disabled);
784
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
785
+ cursor:not-allowed; }
812
786
  .iui-checkbox.iui-loading{
787
+ --_iui-checkbox-border-color:transparent;
788
+ --_iui-checkbox-background-color:transparent;
789
+ opacity:0;
790
+ position:absolute;
813
791
  cursor:wait; }
814
- .iui-checkbox.iui-loading input ~ .iui-checkbox-checkmark{
815
- border-color:transparent;
816
- background-color:transparent; }
817
- .iui-checkbox.iui-loading input:disabled ~ .iui-checkbox-checkmark{
818
- cursor:wait; }
819
- .iui-checkbox.iui-loading input:disabled ~ .iui-label{
820
- cursor:wait; }
821
- .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
822
- background-color:rgba(0, 0, 0, 0.1);
823
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
824
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark::after,
825
- .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark::after{
826
- border:none; }
827
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark{
828
- background-color:transparent; }
829
- .iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
830
- .iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
831
- opacity:0; }
832
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
833
- opacity:1;
834
- transition:opacity 0.2s ease;
835
- fill:rgba(0, 0, 0, 0.8);
836
- fill:var(--iui-icons-color-actionable); }
837
- .iui-checkbox-visibility input:disabled ~ .iui-checkbox-checkmark .iui-uncheck{
838
- fill:rgba(0, 0, 0, 0.2);
839
- fill:var(--iui-icons-color-actionable-disabled); }
840
792
 
841
793
  .iui-radio{
794
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
795
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
796
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
797
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
798
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
799
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
800
+ --_iui-checkbox-mask-image:initial;
801
+ -webkit-appearance:none;
802
+ -moz-appearance:none;
803
+ appearance:none;
842
804
  margin:0;
843
- padding:0;
844
- border:none;
845
- vertical-align:baseline;
846
- display:flex;
847
- align-items:center;
848
- font-size:14px;
849
- width:-webkit-fit-content;
850
- width:-moz-fit-content;
851
- width:fit-content;
852
- -webkit-user-select:none;
853
- -moz-user-select:none;
854
- -ms-user-select:none;
855
- user-select:none;
805
+ width:16px;
806
+ height:16px;
856
807
  position:relative;
808
+ border-radius:3px;
809
+ background-color:var(--_iui-checkbox-background-color);
857
810
  cursor:pointer;
858
- color:rgba(0, 0, 0, 0.8);
859
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
860
- .iui-radio > input{
861
- width:0;
862
- height:0;
863
- -webkit-appearance:none;
864
- -moz-appearance:none;
865
- appearance:none;
866
- opacity:0;
867
- position:absolute; }
868
- .iui-radio.iui-disabled{
869
- cursor:not-allowed; }
870
- .iui-radio .iui-checkbox-checkmark,
871
- .iui-radio .iui-radio-dot{
872
- width:16px;
873
- height:16px;
811
+ border-radius:50%; }
812
+ .iui-radio-wrapper{
874
813
  margin:0;
814
+ padding:0;
815
+ border:none;
816
+ vertical-align:baseline;
875
817
  display:flex;
876
- flex-shrink:0;
877
- justify-content:center;
878
818
  align-items:center;
819
+ font-size:14px;
820
+ width:-webkit-fit-content;
821
+ width:-moz-fit-content;
822
+ width:fit-content;
823
+ -webkit-user-select:none;
824
+ -moz-user-select:none;
825
+ -ms-user-select:none;
826
+ user-select:none;
879
827
  position:relative;
880
- isolation:isolate;
881
- border-color:rgba(0, 0, 0, 0.4);
882
- background-color:#FFF;
883
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
884
- background-color:var(--iui-color-background-1); }
885
- .iui-radio .iui-checkbox-checkmark::after,
886
- .iui-radio .iui-radio-dot::after{
887
- content:'';
888
- position:absolute;
889
- inset:0;
890
- z-index:-1;
891
- transition:border-color 0.2s ease-out;
892
- border-radius:inherit;
893
- border-style:solid;
894
- border-width:1px;
895
- border-color:inherit; }
896
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial),
897
- .iui-radio .iui-radio-dot svg:not(.iui-radial){
898
- width:100%;
899
- height:100%;
900
- fill:#008BE1;
901
- fill:var(--iui-icons-color-primary); }
902
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
903
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
904
- opacity:0; }
905
- @media (prefers-reduced-motion: no-preference){
906
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
907
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
908
- transition:opacity 0.2s ease; } }
909
- .iui-radio > .iui-label{
910
- margin-right:8px;
828
+ cursor:pointer;
829
+ color:rgba(0, 0, 0, 0.8);
830
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
831
+ gap:8px; }
832
+ .iui-radio-wrapper > * + *{
833
+ margin-left:8px; }
834
+ @supports (gap: 8px){
835
+ .iui-radio-wrapper > * + *{
836
+ margin-left:0; } }
837
+ .iui-radio-wrapper.iui-loading{
838
+ cursor:wait;
839
+ color:var(--iui-text-color-muted); }
840
+ .iui-radio-wrapper > .iui-checkbox-label,
841
+ .iui-radio-wrapper > .iui-radio-label{
842
+ display:flex;
843
+ align-items:center; }
844
+ .iui-radio-wrapper > .iui-checkbox-label svg,
845
+ .iui-radio-wrapper > .iui-radio-label svg{
846
+ width:16px;
847
+ height:16px;
848
+ vertical-align:middle;
849
+ fill:currentColor; }
850
+ .iui-radio-wrapper.iui-disabled{
851
+ cursor:not-allowed;
852
+ color:var(--iui-text-color-muted); }
853
+ .iui-radio-wrapper.iui-disabled svg{
854
+ fill:var(--iui-icons-color-actionable-disabled); }
855
+ .iui-radio-wrapper.iui-positive{
856
+ color:#53A21A;
857
+ color:var(--iui-color-foreground-positive); }
858
+ .iui-radio-wrapper.iui-warning{
859
+ color:#F18B12;
860
+ color:var(--iui-color-foreground-warning); }
861
+ .iui-radio-wrapper.iui-negative{
862
+ color:#D30A0A;
863
+ color:var(--iui-color-foreground-negative); }
864
+ .iui-radio-wrapper{
865
+ margin:0;
866
+ padding:0;
867
+ border:none;
868
+ vertical-align:baseline;
911
869
  display:flex;
912
- align-items:center; }
913
- .iui-radio > .iui-label svg{
914
- width:16px;
915
- height:16px;
916
- vertical-align:middle;
917
- fill:rgba(0, 0, 0, 0.8);
918
- fill:var(--iui-icons-color-actionable); }
919
- .iui-radio .iui-checkbox-checkmark ~ .iui-label,
920
- .iui-radio .iui-radio-dot ~ .iui-label{
921
- margin-left:8px;
922
- margin-right:0; }
923
- .iui-radio:hover > input:enabled ~ .iui-checkbox-checkmark,
924
- .iui-radio:hover > input:enabled ~ .iui-radio-dot{
925
- border-color:rgba(0, 0, 0, 0.8);
926
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
927
- .iui-radio input:checked ~ .iui-checkbox-checkmark,
928
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark,
929
- .iui-radio input:checked ~ .iui-radio-dot{
930
- border-color:rgba(0, 0, 0, 0.6);
931
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
932
- .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
933
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
934
- .iui-radio input:checked ~ .iui-radio-dot circle{
935
- opacity:1; }
936
- @media (prefers-reduced-motion: no-preference){
937
- .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
938
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
939
- .iui-radio input:checked ~ .iui-radio-dot circle{
940
- transition:opacity 0.2s ease; } }
941
- .iui-radio input:enabled:focus ~ .iui-checkbox-checkmark,
942
- .iui-radio input:enabled:focus ~ .iui-radio-dot{
943
- outline:2px solid #008BE1;
870
+ align-items:center;
871
+ font-size:14px;
872
+ width:-webkit-fit-content;
873
+ width:-moz-fit-content;
874
+ width:fit-content;
875
+ -webkit-user-select:none;
876
+ -moz-user-select:none;
877
+ -ms-user-select:none;
878
+ user-select:none;
879
+ position:relative;
880
+ cursor:pointer;
881
+ color:rgba(0, 0, 0, 0.8);
882
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
883
+ gap:8px; }
884
+ .iui-radio-wrapper > * + *{
885
+ margin-left:8px; }
886
+ @supports (gap: 8px){
887
+ .iui-radio-wrapper > * + *{
888
+ margin-left:0; } }
889
+ .iui-radio-wrapper.iui-loading{
890
+ cursor:wait;
891
+ color:var(--iui-text-color-muted); }
892
+ .iui-radio-wrapper > .iui-checkbox-label,
893
+ .iui-radio-wrapper > .iui-radio-label{
894
+ display:flex;
895
+ align-items:center; }
896
+ .iui-radio-wrapper > .iui-checkbox-label svg,
897
+ .iui-radio-wrapper > .iui-radio-label svg{
898
+ width:16px;
899
+ height:16px;
900
+ vertical-align:middle;
901
+ fill:currentColor; }
902
+ .iui-radio-wrapper.iui-disabled{
903
+ cursor:not-allowed;
904
+ color:var(--iui-text-color-muted); }
905
+ .iui-radio-wrapper.iui-disabled svg{
906
+ fill:var(--iui-icons-color-actionable-disabled); }
907
+ .iui-radio-wrapper.iui-positive{
908
+ color:#53A21A;
909
+ color:var(--iui-color-foreground-positive); }
910
+ .iui-radio-wrapper.iui-warning{
911
+ color:#F18B12;
912
+ color:var(--iui-color-foreground-warning); }
913
+ .iui-radio-wrapper.iui-negative{
914
+ color:#D30A0A;
915
+ color:var(--iui-color-foreground-negative); }
916
+ .iui-radio::before{
917
+ content:'';
918
+ position:absolute;
919
+ inset:0;
920
+ transition:border-color 0.2s ease-out;
921
+ border-radius:inherit;
922
+ border-style:solid;
923
+ border-width:1px;
924
+ border-color:var(--_iui-checkbox-border-color); }
925
+ .iui-radio::after{
926
+ content:'';
927
+ position:absolute;
928
+ inset:0;
929
+ background-color:var(--_iui-checkbox-svg-color);
930
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
931
+ mask:var(--_iui-checkbox-mask-image) no-repeat center; }
932
+ .iui-radio:not(:checked){
933
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
934
+ .iui-radio:checked{
935
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
936
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg); }
937
+ .iui-radio:indeterminate{
938
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
939
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg); }
940
+ .iui-radio:hover{
941
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
942
+ .iui-radio:focus-visible{
944
943
  outline:2px solid var(--iui-color-foreground-primary);
945
944
  outline-offset:-1px; }
946
- .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
947
- .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
948
- outline:none; }
949
- .iui-radio input:disabled ~ .iui-checkbox-checkmark,
950
- .iui-radio input:disabled ~ .iui-radio-dot{
951
- cursor:not-allowed;
952
- background-color:#EEF0F3;
953
- border-color:#EEF0F3;
954
- background-color:var(--iui-color-background-disabled);
955
- border-color:var(--iui-color-background-disabled); }
956
- .iui-radio input:disabled ~ .iui-checkbox-checkmark svg,
957
- .iui-radio input:disabled ~ .iui-radio-dot svg{
958
- fill:rgba(0, 0, 0, 0.2);
959
- fill:var(--iui-icons-color-actionable-disabled); }
960
- .iui-radio input:disabled ~ .iui-label{
961
- cursor:not-allowed;
962
- color:rgba(0, 0, 0, 0.4);
963
- color:var(--iui-text-color-muted); }
964
- .iui-radio input:disabled ~ .iui-label svg{
965
- fill:rgba(0, 0, 0, 0.2);
966
- fill:var(--iui-icons-color-actionable-disabled); }
967
- .iui-radio.iui-positive{
968
- color:#53A21A;
969
- color:var(--iui-color-foreground-positive); }
970
- .iui-radio.iui-warning{
971
- color:#F18B12;
972
- color:var(--iui-color-foreground-warning); }
973
- .iui-radio.iui-negative{
974
- color:#D30A0A;
975
- color:var(--iui-color-foreground-negative); }
976
- .iui-radio .iui-radio-dot{
977
- border-radius:50%; }
945
+ @supports not selector(*:focus-visible){
946
+ .iui-radio:focus{
947
+ outline:2px solid var(--iui-color-foreground-primary);
948
+ outline-offset:-1px; } }
949
+ .iui-radio.iui-checkbox-visibility{
950
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
951
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
952
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
953
+ --_iui-checkbox-border-color:transparent;
954
+ --_iui-checkbox-background-color:transparent; }
955
+ .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
956
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable); }
957
+ .iui-radio.iui-checkbox-visibility:where(:hover){
958
+ --_iui-checkbox-border-color:transparent;
959
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
960
+ .iui-radio:disabled{
961
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
962
+ --_iui-checkbox-border-color:var(--iui-color-background-disabled);
963
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
964
+ cursor:not-allowed; }
965
+ .iui-radio.iui-loading{
966
+ --_iui-checkbox-border-color:transparent;
967
+ --_iui-checkbox-background-color:transparent;
968
+ opacity:0;
969
+ position:absolute;
970
+ cursor:wait; }
971
+ .iui-radio:checked{
972
+ --_iui-checkbox-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>'); }
978
973
 
979
974
  .iui-radio-tile-container{
980
975
  display:inline-flex;