@itwin/itwinui-css 0.41.1 → 0.44.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 (60) hide show
  1. package/css/alert.css +46 -61
  2. package/css/all.css +755 -715
  3. package/css/breadcrumbs.css +7 -20
  4. package/css/button.css +172 -194
  5. package/css/code.css +6 -9
  6. package/css/color-picker.css +14 -14
  7. package/css/date-picker.css +91 -85
  8. package/css/expandable-block.css +13 -9
  9. package/css/file-upload.css +4 -3
  10. package/css/footer.css +7 -20
  11. package/css/global.css +7 -9
  12. package/css/header.css +20 -38
  13. package/css/inputs.css +111 -80
  14. package/css/side-navigation.css +1 -16
  15. package/css/slider.css +7 -10
  16. package/css/table.css +173 -34
  17. package/css/tabs.css +8 -3
  18. package/css/tag.css +17 -18
  19. package/css/tile.css +0 -14
  20. package/css/time-picker.css +26 -18
  21. package/css/toast-notification.css +12 -49
  22. package/css/toggle-switch.css +7 -4
  23. package/css/tree.css +2 -3
  24. package/css/wizard.css +4 -4
  25. package/package.json +3 -3
  26. package/scss/alert/alert.scss +4 -2
  27. package/scss/button/borderless.scss +10 -26
  28. package/scss/button/button-group.scss +68 -46
  29. package/scss/button/cta.scss +10 -25
  30. package/scss/button/default.scss +11 -26
  31. package/scss/button/high-visibility.scss +10 -25
  32. package/scss/button/split-menu.scss +34 -20
  33. package/scss/color-picker/color-picker.scss +2 -25
  34. package/scss/date-picker/classes.scss +20 -0
  35. package/scss/date-picker/date-picker.scss +88 -100
  36. package/scss/expandable-block/block.scss +1 -0
  37. package/scss/file-upload/file-upload.scss +2 -2
  38. package/scss/footer/footer.scss +0 -2
  39. package/scss/header/header.scss +17 -23
  40. package/scss/inputs/checkbox-radio.scss +28 -18
  41. package/scss/inputs/checkbox.scss +9 -8
  42. package/scss/inputs/input.scss +1 -14
  43. package/scss/inputs/labeled-inputs.scss +2 -1
  44. package/scss/inputs/radio-tile.scss +9 -4
  45. package/scss/inputs/select.scss +1 -1
  46. package/scss/side-navigation/side-navigation.scss +1 -33
  47. package/scss/slider/slider.scss +1 -2
  48. package/scss/style/mixins.scss +15 -17
  49. package/scss/table/classes.scss +12 -0
  50. package/scss/table/paginator.scss +39 -32
  51. package/scss/table/table.scss +17 -8
  52. package/scss/tabs/default.scss +5 -0
  53. package/scss/tabs/tabs.scss +1 -8
  54. package/scss/tag/tag.scss +9 -1
  55. package/scss/time-picker/time-picker.scss +1 -0
  56. package/scss/toast-notification/categories.scss +5 -2
  57. package/scss/toast-notification/toast.scss +0 -1
  58. package/scss/toggle-switch/toggle-switch.scss +7 -3
  59. package/scss/tree/tree.scss +2 -2
  60. package/scss/wizard/wizard.scss +3 -3
package/css/breadcrumbs.css CHANGED
@@ -30,20 +30,18 @@
30
30
  max-width:192px;
31
31
  margin:0 12px; }
32
32
  .iui-breadcrumbs-item a{
33
+ border-radius:3px;
33
34
  text-decoration:none;
34
35
  cursor:pointer;
35
36
  color:#008BE1;
36
37
  color:var(--iui-color-foreground-primary); }
37
- .iui-breadcrumbs-item a:focus{
38
- outline:0;
39
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
40
- box-shadow:var(--iui-focus-box-shadow); }
41
- .iui-breadcrumbs-item a:focus:not(:focus-visible){
42
- box-shadow:none; }
43
38
  .iui-breadcrumbs-item a:focus-visible{
44
- outline:0;
45
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
46
- box-shadow:var(--iui-focus-box-shadow); }
39
+ outline:1px solid var(--iui-color-foreground-primary);
40
+ outline-offset:2px; }
41
+ @supports not selector(*:focus-visible){
42
+ .iui-breadcrumbs-item a:focus{
43
+ outline:1px solid var(--iui-color-foreground-primary);
44
+ outline-offset:2px; } }
47
45
  .iui-breadcrumbs-item a:hover{
48
46
  color:#006bae;
49
47
  color:var(--iui-color-foreground-primary-overlay);
@@ -58,17 +56,6 @@
58
56
  .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
59
57
  margin-left:3px;
60
58
  margin-right:3px; }
61
- .iui-breadcrumbs-item .iui-button:focus{
62
- background-color:rgba(0, 0, 0, 0.1);
63
- border-color:transparent;
64
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
65
- border-color:transparent; }
66
- .iui-breadcrumbs-item .iui-button:focus:where(:not(:focus-visible)){
67
- border-color:transparent;
68
- background-color:transparent; }
69
- .iui-breadcrumbs-item .iui-button:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
70
- margin-left:3px;
71
- margin-right:3px; }
72
59
  .iui-breadcrumbs-item .iui-button:hover{
73
60
  background-color:rgba(0, 0, 0, 0.1);
74
61
  border-color:transparent;
package/css/button.css CHANGED
@@ -43,16 +43,13 @@
43
43
  text-decoration:none;
44
44
  color:black;
45
45
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
46
- .iui-button:focus{
47
- outline:0;
48
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
49
- box-shadow:var(--iui-focus-box-shadow); }
50
- .iui-button:focus:not(:focus-visible){
51
- box-shadow:none; }
52
46
  .iui-button:focus-visible{
53
- outline:0;
54
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
55
- box-shadow:var(--iui-focus-box-shadow); }
47
+ outline:1px solid var(--iui-color-foreground-primary);
48
+ outline-offset:-1px; }
49
+ @supports not selector(*:focus-visible){
50
+ .iui-button:focus{
51
+ outline:1px solid var(--iui-color-foreground-primary);
52
+ outline-offset:-1px; } }
56
53
  .iui-button[disabled], .iui-button:disabled{
57
54
  cursor:not-allowed;
58
55
  background:#EEF0F3;
@@ -68,26 +65,13 @@
68
65
  background-color:var(--iui-color-background-1);
69
66
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
70
67
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
71
- .iui-button.iui-default:focus{
72
- background-color:#f2f2f2;
73
- border-color:black;
74
- color:black;
75
- background-color:var(--iui-color-background-1-overlay);
76
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
77
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
78
- .iui-button.iui-default:focus .iui-notification-primary::before,
79
- .iui-button.iui-default:focus .iui-notification-positive::before,
80
- .iui-button.iui-default:focus .iui-notification-warning::before,
81
- .iui-button.iui-default:focus .iui-notification-negative::before{
82
- border-color:#f2f2f2;
83
- border-color:var(--iui-color-background-1-overlay); }
84
- .iui-button.iui-default:focus:where(:not(:focus-visible)){
85
- background-color:#FFF;
86
- border-color:rgba(0, 0, 0, 0.4);
87
- color:rgba(0, 0, 0, 0.8);
88
- background-color:var(--iui-color-background-1);
89
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
90
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
68
+ .iui-button.iui-default:focus-visible{
69
+ outline:2px solid var(--iui-color-foreground-primary);
70
+ outline-offset:-2px; }
71
+ @supports not selector(*:focus-visible){
72
+ .iui-button.iui-default:focus{
73
+ outline:2px solid var(--iui-color-foreground-primary);
74
+ outline-offset:-2px; } }
91
75
  .iui-button.iui-default:hover, .iui-button.iui-default:active{
92
76
  background-color:#f2f2f2;
93
77
  border-color:black;
@@ -130,20 +114,13 @@
130
114
  background-color:var(--iui-color-background-primary);
131
115
  border-color:var(--iui-color-background-primary);
132
116
  color:var(--iui-color-foreground-accessory); }
133
- .iui-button.iui-high-visibility:focus{
134
- background-color:#006bae;
135
- border-color:#006bae;
136
- color:#FFF;
137
- background-color:var(--iui-color-background-primary-overlay);
138
- border-color:var(--iui-color-background-primary-overlay);
139
- color:var(--iui-color-foreground-accessory); }
140
- .iui-button.iui-high-visibility:focus:where(:not(:focus-visible)){
141
- background-color:#008BE1;
142
- border-color:#008BE1;
143
- color:#FFF;
144
- background-color:var(--iui-color-background-primary);
145
- border-color:var(--iui-color-background-primary);
146
- color:var(--iui-color-foreground-accessory); }
117
+ .iui-button.iui-high-visibility:focus-visible{
118
+ outline:1px solid var(--iui-color-foreground-accessory);
119
+ outline-offset:-3px; }
120
+ @supports not selector(*:focus-visible){
121
+ .iui-button.iui-high-visibility:focus{
122
+ outline:1px solid var(--iui-color-foreground-accessory);
123
+ outline-offset:-3px; } }
147
124
  .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
148
125
  background-color:#006bae;
149
126
  border-color:#006bae;
@@ -166,20 +143,13 @@
166
143
  background-color:var(--iui-color-background-positive);
167
144
  border-color:var(--iui-color-background-positive);
168
145
  color:var(--iui-color-foreground-accessory); }
169
- .iui-button.iui-cta:focus{
170
- background-color:#3c7613;
171
- border-color:#3c7613;
172
- color:#FFF;
173
- background-color:var(--iui-color-background-positive-overlay);
174
- border-color:var(--iui-color-background-positive-overlay);
175
- color:var(--iui-color-foreground-accessory); }
176
- .iui-button.iui-cta:focus:where(:not(:focus-visible)){
177
- background-color:#53A21A;
178
- border-color:#53A21A;
179
- color:#FFF;
180
- background-color:var(--iui-color-background-positive);
181
- border-color:var(--iui-color-background-positive);
182
- color:var(--iui-color-foreground-accessory); }
146
+ .iui-button.iui-cta:focus-visible{
147
+ outline:1px solid var(--iui-color-foreground-accessory);
148
+ outline-offset:-3px; }
149
+ @supports not selector(*:focus-visible){
150
+ .iui-button.iui-cta:focus{
151
+ outline:1px solid var(--iui-color-foreground-accessory);
152
+ outline-offset:-3px; } }
183
153
  .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
184
154
  background-color:#3c7613;
185
155
  border-color:#3c7613;
@@ -207,20 +177,13 @@
207
177
  position:fixed;
208
178
  bottom:11px;
209
179
  right:16px; }
210
- .iui-button.iui-idea:focus{
211
- background-color:#006bae;
212
- border-color:#006bae;
213
- color:#FFF;
214
- background-color:var(--iui-color-background-primary-overlay);
215
- border-color:var(--iui-color-background-primary-overlay);
216
- color:var(--iui-color-foreground-accessory); }
217
- .iui-button.iui-idea:focus:where(:not(:focus-visible)){
218
- background-color:#008BE1;
219
- border-color:#008BE1;
220
- color:#FFF;
221
- background-color:var(--iui-color-background-primary);
222
- border-color:var(--iui-color-background-primary);
223
- color:var(--iui-color-foreground-accessory); }
180
+ .iui-button.iui-idea:focus-visible{
181
+ outline:1px solid var(--iui-color-foreground-accessory);
182
+ outline-offset:-3px; }
183
+ @supports not selector(*:focus-visible){
184
+ .iui-button.iui-idea:focus{
185
+ outline:1px solid var(--iui-color-foreground-accessory);
186
+ outline-offset:-3px; } }
224
187
  .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
225
188
  background-color:#006bae;
226
189
  border-color:#006bae;
@@ -245,17 +208,6 @@
245
208
  .iui-button.iui-borderless > .iui-button-icon:only-child{
246
209
  margin-left:3px;
247
210
  margin-right:3px; }
248
- .iui-button.iui-borderless:focus{
249
- background-color:rgba(0, 0, 0, 0.1);
250
- border-color:transparent;
251
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
252
- border-color:transparent; }
253
- .iui-button.iui-borderless:focus:where(:not(:focus-visible)){
254
- border-color:transparent;
255
- background-color:transparent; }
256
- .iui-button.iui-borderless:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
257
- margin-left:3px;
258
- margin-right:3px; }
259
211
  .iui-button.iui-borderless:hover{
260
212
  background-color:rgba(0, 0, 0, 0.1);
261
213
  border-color:transparent;
@@ -303,130 +255,156 @@
303
255
 
304
256
  .iui-button-group{
305
257
  display:inline-flex;
306
- align-items:center; }
307
- .iui-button-group > .iui-button:not(.iui-borderless){
308
- border-radius:0; }
309
- .iui-button-group > .iui-button:first-of-type:not(.iui-borderless){
310
- border-top-left-radius:3px;
311
- border-bottom-left-radius:3px; }
312
- .iui-button-group > .iui-button:last-of-type:not(.iui-borderless){
313
- border-top-right-radius:3px;
314
- border-bottom-right-radius:3px; }
315
- .iui-button-group > .iui-button.iui-default:not(:last-of-type){
316
- border-right:none; }
317
- .iui-button-group > .iui-button.iui-default:not(:disabled) + :disabled{
318
- border-left-color:rgba(0, 0, 0, 0.4);
319
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
320
- .iui-button-group > .iui-button.iui-default:not(:disabled):hover + .iui-button,
321
- .iui-button-group > .iui-button.iui-default:not(:disabled):active + .iui-button,
322
- .iui-button-group > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
323
- border-left-color:black;
324
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
325
- .iui-button-group > .iui-button.iui-default:disabled + .iui-button:disabled{
326
- border-left-color:#DCE0E3;
327
- border-left-color:var(--iui-color-background-4); }
328
- .iui-button-group > .iui-active::after{
329
- content:'';
330
- position:absolute;
331
- height:2px;
332
- opacity:1;
333
- top:2px;
334
- left:2px;
335
- width:calc(100% - 4px);
336
- background-color:#008BE1;
337
- background-color:var(--iui-color-foreground-primary); }
338
- .iui-button-group > .iui-active:disabled::after{
339
- background-color:rgba(0, 0, 0, 0.2);
340
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
258
+ align-items:center;
259
+ isolation:isolate; }
260
+ .iui-button-group > *{
261
+ display:flex; }
262
+ .iui-button-group > * input, .iui-button-group > * button{
263
+ position:relative;
264
+ transition-duration:0ms; }
265
+ .iui-button-group > * input:hover, .iui-button-group > * button:hover{
266
+ z-index:1; }
267
+ .iui-button-group > * input:focus, .iui-button-group > * button:focus{
268
+ z-index:2; }
269
+ .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
270
+ z-index:revert; }
271
+ .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
272
+ z-index:-1; }
273
+ .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * button:hover, .iui-button-group > * button:focus{
274
+ transition-duration:0.2s; }
275
+ .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
276
+ content:'';
277
+ position:absolute;
278
+ height:2px;
279
+ opacity:1;
280
+ top:2px;
281
+ left:2px;
282
+ width:calc(100% - 4px);
283
+ background-color:#008BE1;
284
+ background-color:var(--iui-color-foreground-primary); }
285
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
286
+ background-color:rgba(0, 0, 0, 0.2);
287
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
288
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
289
+ border-radius:0; }
290
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
291
+ border-top-left-radius:3px;
292
+ border-bottom-left-radius:3px; }
293
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
294
+ border-top-right-radius:3px;
295
+ border-bottom-right-radius:3px; }
296
+ .iui-button-group > * + *{
297
+ margin-left:-1px; }
298
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
299
+ border-left-color:#DCE0E3;
300
+ border-left-color:var(--iui-color-background-4); }
341
301
 
342
302
  .iui-button-split-menu{
343
303
  display:inline-flex;
344
304
  align-items:center;
305
+ isolation:isolate;
345
306
  display:inline-flex;
346
- align-items:center; }
347
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
348
- border-radius:0; }
349
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
350
- border-top-left-radius:3px;
351
- border-bottom-left-radius:3px; }
352
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
353
- border-top-right-radius:3px;
354
- border-bottom-right-radius:3px; }
355
- .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
356
- border-right:none; }
357
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
358
- border-left-color:rgba(0, 0, 0, 0.4);
359
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
360
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
361
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
362
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
363
- border-left-color:black;
364
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
365
- .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
366
- border-left-color:#DCE0E3;
367
- border-left-color:var(--iui-color-background-4); }
368
- .iui-button-split-menu > .iui-active::after{
369
- content:'';
370
- position:absolute;
371
- height:2px;
372
- opacity:1;
373
- top:2px;
374
- left:2px;
375
- width:calc(100% - 4px);
376
- background-color:#008BE1;
377
- background-color:var(--iui-color-foreground-primary); }
378
- .iui-button-split-menu > .iui-active:disabled::after{
379
- background-color:rgba(0, 0, 0, 0.2);
380
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
381
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
382
- border-radius:0; }
383
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
384
- border-top-left-radius:3px;
385
- border-bottom-left-radius:3px; }
386
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
387
- border-top-right-radius:3px;
388
- border-bottom-right-radius:3px; }
389
- .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
390
- border-right:none; }
391
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
392
- border-left-color:rgba(0, 0, 0, 0.4);
393
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
394
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
395
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
396
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
397
- border-left-color:black;
398
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
399
- .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
400
- border-left-color:#DCE0E3;
401
- border-left-color:var(--iui-color-background-4); }
402
- .iui-button-split-menu > .iui-active::after{
403
- content:'';
404
- position:absolute;
405
- height:2px;
406
- opacity:1;
407
- top:2px;
408
- left:2px;
409
- width:calc(100% - 4px);
410
- background-color:#008BE1;
411
- background-color:var(--iui-color-foreground-primary); }
412
- .iui-button-split-menu > .iui-active:disabled::after{
413
- background-color:rgba(0, 0, 0, 0.2);
414
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
307
+ align-items:center;
308
+ isolation:isolate; }
309
+ .iui-button-split-menu > *{
310
+ display:flex; }
311
+ .iui-button-split-menu > * input, .iui-button-split-menu > * button{
312
+ position:relative;
313
+ transition-duration:0ms; }
314
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
315
+ z-index:1; }
316
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
317
+ z-index:2; }
318
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
319
+ z-index:revert; }
320
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
321
+ z-index:-1; }
322
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
323
+ transition-duration:0.2s; }
324
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
325
+ content:'';
326
+ position:absolute;
327
+ height:2px;
328
+ opacity:1;
329
+ top:2px;
330
+ left:2px;
331
+ width:calc(100% - 4px);
332
+ background-color:#008BE1;
333
+ background-color:var(--iui-color-foreground-primary); }
334
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
335
+ background-color:rgba(0, 0, 0, 0.2);
336
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
337
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
338
+ border-radius:0; }
339
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
340
+ border-top-left-radius:3px;
341
+ border-bottom-left-radius:3px; }
342
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
343
+ border-top-right-radius:3px;
344
+ border-bottom-right-radius:3px; }
345
+ .iui-button-split-menu > * + *{
346
+ margin-left:-1px; }
347
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
348
+ border-left-color:#DCE0E3;
349
+ border-left-color:var(--iui-color-background-4); }
350
+ .iui-button-split-menu > *{
351
+ display:flex; }
352
+ .iui-button-split-menu > * input, .iui-button-split-menu > * button{
353
+ position:relative;
354
+ transition-duration:0ms; }
355
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
356
+ z-index:1; }
357
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
358
+ z-index:2; }
359
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
360
+ z-index:revert; }
361
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
362
+ z-index:-1; }
363
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
364
+ transition-duration:0.2s; }
365
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
366
+ content:'';
367
+ position:absolute;
368
+ height:2px;
369
+ opacity:1;
370
+ top:2px;
371
+ left:2px;
372
+ width:calc(100% - 4px);
373
+ background-color:#008BE1;
374
+ background-color:var(--iui-color-foreground-primary); }
375
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
376
+ background-color:rgba(0, 0, 0, 0.2);
377
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
378
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
379
+ border-radius:0; }
380
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
381
+ border-top-left-radius:3px;
382
+ border-bottom-left-radius:3px; }
383
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
384
+ border-top-right-radius:3px;
385
+ border-bottom-right-radius:3px; }
386
+ .iui-button-split-menu > * + *{
387
+ margin-left:-1px; }
388
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
389
+ border-left-color:#DCE0E3;
390
+ border-left-color:var(--iui-color-background-4); }
415
391
  .iui-button-split-menu:hover{
416
392
  background-color:rgba(0, 0, 0, 0.1);
417
393
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
418
- .iui-button-split-menu .iui-button:first-child.iui-borderless:hover{
394
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
419
395
  background-color:transparent; }
420
- .iui-button-split-menu > .iui-button + .iui-button{
396
+ .iui-button-split-menu > *:last-child > .iui-button{
421
397
  padding:4px; }
422
- .iui-button-split-menu > .iui-small + .iui-small{
398
+ .iui-button-split-menu > *:last-child > .iui-small{
423
399
  padding:2px; }
424
- .iui-button-split-menu > .iui-large + .iui-large{
400
+ .iui-button-split-menu > *:last-child > .iui-large{
425
401
  padding:8px; }
426
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility,
427
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility:hover,
428
- .iui-button-split-menu > .iui-cta + .iui-cta,
429
- .iui-button-split-menu > .iui-cta + .iui-cta:hover{
402
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
403
+ .iui-button-split-menu > *:first-child > .iui-cta{
404
+ border-right-color:rgba(255, 255, 255, 0.4);
405
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
406
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
407
+ .iui-button-split-menu > *:last-child > .iui-cta{
430
408
  border-left-color:rgba(255, 255, 255, 0.4);
431
409
  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
432
410
  .iui-button-split-menu.iui-disabled{
package/css/code.css CHANGED
@@ -49,16 +49,13 @@
49
49
  white-space:normal;
50
50
  border:1px solid #EEF0F3;
51
51
  border:1px solid var(--iui-color-background-3); }
52
- .iui-codeblock > .iui-codeblock-content:focus{
53
- outline:0;
54
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
55
- box-shadow:var(--iui-focus-box-shadow); }
56
- .iui-codeblock > .iui-codeblock-content:focus:not(:focus-visible){
57
- box-shadow:none; }
58
52
  .iui-codeblock > .iui-codeblock-content:focus-visible{
59
- outline:0;
60
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
61
- box-shadow:var(--iui-focus-box-shadow); }
53
+ outline:1px solid var(--iui-color-foreground-primary);
54
+ outline-offset:-1px; }
55
+ @supports not selector(*:focus-visible){
56
+ .iui-codeblock > .iui-codeblock-content:focus{
57
+ outline:1px solid var(--iui-color-foreground-primary);
58
+ outline-offset:-1px; } }
62
59
  .iui-codeblock > .iui-codeblock-content > code{
63
60
  display:block;
64
61
  width:100%;
package/css/color-picker.css CHANGED
@@ -99,22 +99,19 @@
99
99
  .iui-color-swatch:hover{
100
100
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
101
101
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
102
- .iui-color-swatch:focus{
103
- outline:0;
104
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
105
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
102
+ .iui-color-swatch:focus-visible{
103
+ outline:2px solid var(--iui-color-foreground-primary);
104
+ outline-offset:0; }
105
+ @supports not selector(*:focus-visible){
106
+ .iui-color-swatch:focus{
107
+ outline:2px solid var(--iui-color-foreground-primary);
108
+ outline-offset:0; } }
106
109
  .iui-color-swatch.iui-active{
107
110
  box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
108
111
  box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
109
112
  .iui-color-swatch.iui-active:hover{
110
113
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
111
114
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
112
- .iui-color-swatch.iui-active:focus{
113
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
114
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
115
- .iui-color-swatch.iui-active:focus:not(:focus-visible){
116
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
117
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
118
115
 
119
116
  .iui-color-picker-section-label{
120
117
  margin-bottom:5.5px;
@@ -180,7 +177,10 @@
180
177
  .iui-color-dot:hover{
181
178
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
182
179
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
183
- .iui-color-dot:focus{
184
- outline:0;
185
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
186
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
180
+ .iui-color-dot:focus-visible{
181
+ outline:2px solid var(--iui-color-foreground-primary);
182
+ outline-offset:0; }
183
+ @supports not selector(*:focus-visible){
184
+ .iui-color-dot:focus{
185
+ outline:2px solid var(--iui-color-foreground-primary);
186
+ outline-offset:0; } }