@itwin/itwinui-css 0.40.0 → 0.42.1

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 (27) hide show
  1. package/css/all.css +386 -211
  2. package/css/breadcrumbs.css +11 -6
  3. package/css/button.css +195 -148
  4. package/css/header.css +16 -14
  5. package/css/inputs.css +12 -12
  6. package/css/table.css +31 -21
  7. package/css/tile.css +14 -9
  8. package/css/tree.css +107 -0
  9. package/css/user-icon.css +3 -1
  10. package/package.json +1 -1
  11. package/scss/button/borderless.scss +13 -6
  12. package/scss/button/button-group.scss +59 -46
  13. package/scss/button/cta.scss +15 -8
  14. package/scss/button/default.scss +16 -9
  15. package/scss/button/high-visibility.scss +15 -8
  16. package/scss/button/split-menu.scss +34 -20
  17. package/scss/classes.scss +1 -0
  18. package/scss/header/header.scss +16 -8
  19. package/scss/index.scss +1 -0
  20. package/scss/inputs/classes.scss +2 -2
  21. package/scss/inputs/labeled-inputs.scss +3 -3
  22. package/scss/table/paginator.scss +33 -21
  23. package/scss/table/table.scss +10 -6
  24. package/scss/tree/classes.scss +15 -0
  25. package/scss/tree/index.scss +3 -0
  26. package/scss/tree/tree.scss +137 -0
  27. package/scss/user-icon/user-icon.scss +3 -0
package/css/breadcrumbs.css CHANGED
@@ -58,17 +58,22 @@
58
58
  .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
59
59
  margin-left:3px;
60
60
  margin-right:3px; }
61
- .iui-breadcrumbs-item .iui-button:hover, .iui-breadcrumbs-item .iui-button:focus{
61
+ .iui-breadcrumbs-item .iui-button:focus{
62
62
  background-color:rgba(0, 0, 0, 0.1);
63
63
  border-color:transparent;
64
64
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
65
65
  border-color:transparent; }
66
- .iui-breadcrumbs-item .iui-button:focus:not(:focus-visible){
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
+ .iui-breadcrumbs-item .iui-button:hover{
73
+ background-color:rgba(0, 0, 0, 0.1);
67
74
  border-color:transparent;
68
- background-color:transparent; }
69
- .iui-breadcrumbs-item .iui-button:focus:not(:focus-visible) > .iui-button-icon:only-child{
70
- margin-left:3px;
71
- margin-right:3px; }
75
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
76
+ border-color:transparent; }
72
77
  .iui-breadcrumbs-item .iui-button.iui-active{
73
78
  background-color:rgba(0, 139, 225, 0.1);
74
79
  color:#008BE1;
package/css/button.css CHANGED
@@ -68,7 +68,27 @@
68
68
  background-color:var(--iui-color-background-1);
69
69
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
70
70
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
71
- .iui-button.iui-default:hover, .iui-button.iui-default:active, .iui-button.iui-default:focus{
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)); }
91
+ .iui-button.iui-default:hover, .iui-button.iui-default:active{
72
92
  background-color:#f2f2f2;
73
93
  border-color:black;
74
94
  color:black;
@@ -81,19 +101,9 @@
81
101
  .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
82
102
  .iui-button.iui-default:active .iui-notification-positive::before,
83
103
  .iui-button.iui-default:active .iui-notification-warning::before,
84
- .iui-button.iui-default:active .iui-notification-negative::before, .iui-button.iui-default:focus .iui-notification-primary::before,
85
- .iui-button.iui-default:focus .iui-notification-positive::before,
86
- .iui-button.iui-default:focus .iui-notification-warning::before,
87
- .iui-button.iui-default:focus .iui-notification-negative::before{
104
+ .iui-button.iui-default:active .iui-notification-negative::before{
88
105
  border-color:#f2f2f2;
89
106
  border-color:var(--iui-color-background-1-overlay); }
90
- .iui-button.iui-default:focus:not(:focus-visible){
91
- background-color:#FFF;
92
- border-color:rgba(0, 0, 0, 0.4);
93
- color:rgba(0, 0, 0, 0.8);
94
- background-color:var(--iui-color-background-1);
95
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
96
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
97
107
  .iui-button.iui-default.iui-dropdown{
98
108
  padding-right:8px; }
99
109
  .iui-button.iui-default.iui-dropdown.iui-small{
@@ -120,19 +130,26 @@
120
130
  background-color:var(--iui-color-background-primary);
121
131
  border-color:var(--iui-color-background-primary);
122
132
  color:var(--iui-color-foreground-accessory); }
123
- .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active, .iui-button.iui-high-visibility:focus{
133
+ .iui-button.iui-high-visibility:focus{
124
134
  background-color:#006bae;
125
135
  border-color:#006bae;
126
136
  color:#FFF;
127
137
  background-color:var(--iui-color-background-primary-overlay);
128
138
  border-color:var(--iui-color-background-primary-overlay);
129
139
  color:var(--iui-color-foreground-accessory); }
130
- .iui-button.iui-high-visibility:focus:not(:focus-visible){
131
- background-color:#008BE1;
132
- border-color:#008BE1;
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); }
147
+ .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
148
+ background-color:#006bae;
149
+ border-color:#006bae;
133
150
  color:#FFF;
134
- background-color:var(--iui-color-background-primary);
135
- border-color:var(--iui-color-background-primary);
151
+ background-color:var(--iui-color-background-primary-overlay);
152
+ border-color:var(--iui-color-background-primary-overlay);
136
153
  color:var(--iui-color-foreground-accessory); }
137
154
  .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
138
155
  cursor:not-allowed;
@@ -149,19 +166,26 @@
149
166
  background-color:var(--iui-color-background-positive);
150
167
  border-color:var(--iui-color-background-positive);
151
168
  color:var(--iui-color-foreground-accessory); }
152
- .iui-button.iui-cta:hover, .iui-button.iui-cta:active, .iui-button.iui-cta:focus{
169
+ .iui-button.iui-cta:focus{
153
170
  background-color:#3c7613;
154
171
  border-color:#3c7613;
155
172
  color:#FFF;
156
173
  background-color:var(--iui-color-background-positive-overlay);
157
174
  border-color:var(--iui-color-background-positive-overlay);
158
175
  color:var(--iui-color-foreground-accessory); }
159
- .iui-button.iui-cta:focus:not(:focus-visible){
160
- background-color:#53A21A;
161
- border-color:#53A21A;
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); }
183
+ .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
184
+ background-color:#3c7613;
185
+ border-color:#3c7613;
162
186
  color:#FFF;
163
- background-color:var(--iui-color-background-positive);
164
- border-color:var(--iui-color-background-positive);
187
+ background-color:var(--iui-color-background-positive-overlay);
188
+ border-color:var(--iui-color-background-positive-overlay);
165
189
  color:var(--iui-color-foreground-accessory); }
166
190
  .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
167
191
  cursor:not-allowed;
@@ -183,19 +207,26 @@
183
207
  position:fixed;
184
208
  bottom:11px;
185
209
  right:16px; }
186
- .iui-button.iui-idea:hover, .iui-button.iui-idea:active, .iui-button.iui-idea:focus{
210
+ .iui-button.iui-idea:focus{
187
211
  background-color:#006bae;
188
212
  border-color:#006bae;
189
213
  color:#FFF;
190
214
  background-color:var(--iui-color-background-primary-overlay);
191
215
  border-color:var(--iui-color-background-primary-overlay);
192
216
  color:var(--iui-color-foreground-accessory); }
193
- .iui-button.iui-idea:focus:not(:focus-visible){
194
- background-color:#008BE1;
195
- border-color:#008BE1;
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); }
224
+ .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
225
+ background-color:#006bae;
226
+ border-color:#006bae;
196
227
  color:#FFF;
197
- background-color:var(--iui-color-background-primary);
198
- border-color:var(--iui-color-background-primary);
228
+ background-color:var(--iui-color-background-primary-overlay);
229
+ border-color:var(--iui-color-background-primary-overlay);
199
230
  color:var(--iui-color-foreground-accessory); }
200
231
  .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
201
232
  cursor:not-allowed;
@@ -214,17 +245,22 @@
214
245
  .iui-button.iui-borderless > .iui-button-icon:only-child{
215
246
  margin-left:3px;
216
247
  margin-right:3px; }
217
- .iui-button.iui-borderless:hover, .iui-button.iui-borderless:focus{
248
+ .iui-button.iui-borderless:focus{
218
249
  background-color:rgba(0, 0, 0, 0.1);
219
250
  border-color:transparent;
220
251
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
221
252
  border-color:transparent; }
222
- .iui-button.iui-borderless:focus:not(:focus-visible){
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
+ .iui-button.iui-borderless:hover{
260
+ background-color:rgba(0, 0, 0, 0.1);
223
261
  border-color:transparent;
224
- background-color:transparent; }
225
- .iui-button.iui-borderless:focus:not(:focus-visible) > .iui-button-icon:only-child{
226
- margin-left:3px;
227
- margin-right:3px; }
262
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
263
+ border-color:transparent; }
228
264
  .iui-button.iui-borderless.iui-active{
229
265
  background-color:rgba(0, 139, 225, 0.1);
230
266
  color:#008BE1;
@@ -267,130 +303,141 @@
267
303
 
268
304
  .iui-button-group{
269
305
  display:inline-flex;
270
- align-items:center; }
271
- .iui-button-group > .iui-button:not(.iui-borderless){
272
- border-radius:0; }
273
- .iui-button-group > .iui-button:first-of-type:not(.iui-borderless){
274
- border-top-left-radius:3px;
275
- border-bottom-left-radius:3px; }
276
- .iui-button-group > .iui-button:last-of-type:not(.iui-borderless){
277
- border-top-right-radius:3px;
278
- border-bottom-right-radius:3px; }
279
- .iui-button-group > .iui-button.iui-default:not(:last-of-type){
280
- border-right:none; }
281
- .iui-button-group > .iui-button.iui-default:not(:disabled) + :disabled{
282
- border-left-color:rgba(0, 0, 0, 0.4);
283
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
284
- .iui-button-group > .iui-button.iui-default:not(:disabled):hover + .iui-button,
285
- .iui-button-group > .iui-button.iui-default:not(:disabled):active + .iui-button,
286
- .iui-button-group > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
287
- border-left-color:black;
288
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
289
- .iui-button-group > .iui-button.iui-default:disabled + .iui-button:disabled{
290
- border-left-color:#DCE0E3;
291
- border-left-color:var(--iui-color-background-4); }
292
- .iui-button-group > .iui-active::after{
293
- content:'';
294
- position:absolute;
295
- height:2px;
296
- opacity:1;
297
- top:2px;
298
- left:2px;
299
- width:calc(100% - 4px);
300
- background-color:#008BE1;
301
- background-color:var(--iui-color-foreground-primary); }
302
- .iui-button-group > .iui-active:disabled::after{
303
- background-color:rgba(0, 0, 0, 0.2);
304
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
306
+ align-items:center;
307
+ isolation:isolate; }
308
+ .iui-button-group > *{
309
+ display:flex; }
310
+ .iui-button-group > * input:hover, .iui-button-group > * button:hover{
311
+ z-index:1; }
312
+ .iui-button-group > * input:focus, .iui-button-group > * button:focus{
313
+ z-index:2; }
314
+ .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
315
+ z-index:revert; }
316
+ .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
317
+ z-index:-1; }
318
+ .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
319
+ content:'';
320
+ position:absolute;
321
+ height:2px;
322
+ opacity:1;
323
+ top:2px;
324
+ left:2px;
325
+ width:calc(100% - 4px);
326
+ background-color:#008BE1;
327
+ background-color:var(--iui-color-foreground-primary); }
328
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
329
+ background-color:rgba(0, 0, 0, 0.2);
330
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
331
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
332
+ border-radius:0; }
333
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
334
+ border-top-left-radius:3px;
335
+ border-bottom-left-radius:3px; }
336
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
337
+ border-top-right-radius:3px;
338
+ border-bottom-right-radius:3px; }
339
+ .iui-button-group > *:not(:last-child){
340
+ margin-right:-1px; }
341
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
342
+ border-left-color:#DCE0E3;
343
+ border-left-color:var(--iui-color-background-4); }
305
344
 
306
345
  .iui-button-split-menu{
307
346
  display:inline-flex;
308
347
  align-items:center;
348
+ isolation:isolate;
309
349
  display:inline-flex;
310
- align-items:center; }
311
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
312
- border-radius:0; }
313
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
314
- border-top-left-radius:3px;
315
- border-bottom-left-radius:3px; }
316
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
317
- border-top-right-radius:3px;
318
- border-bottom-right-radius:3px; }
319
- .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
320
- border-right:none; }
321
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
322
- border-left-color:rgba(0, 0, 0, 0.4);
323
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
324
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
325
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
326
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
327
- border-left-color:black;
328
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
329
- .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
330
- border-left-color:#DCE0E3;
331
- border-left-color:var(--iui-color-background-4); }
332
- .iui-button-split-menu > .iui-active::after{
333
- content:'';
334
- position:absolute;
335
- height:2px;
336
- opacity:1;
337
- top:2px;
338
- left:2px;
339
- width:calc(100% - 4px);
340
- background-color:#008BE1;
341
- background-color:var(--iui-color-foreground-primary); }
342
- .iui-button-split-menu > .iui-active:disabled::after{
343
- background-color:rgba(0, 0, 0, 0.2);
344
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
345
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
346
- border-radius:0; }
347
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
348
- border-top-left-radius:3px;
349
- border-bottom-left-radius:3px; }
350
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
351
- border-top-right-radius:3px;
352
- border-bottom-right-radius:3px; }
353
- .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
354
- border-right:none; }
355
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
356
- border-left-color:rgba(0, 0, 0, 0.4);
357
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
358
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
359
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
360
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
361
- border-left-color:black;
362
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
363
- .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
364
- border-left-color:#DCE0E3;
365
- border-left-color:var(--iui-color-background-4); }
366
- .iui-button-split-menu > .iui-active::after{
367
- content:'';
368
- position:absolute;
369
- height:2px;
370
- opacity:1;
371
- top:2px;
372
- left:2px;
373
- width:calc(100% - 4px);
374
- background-color:#008BE1;
375
- background-color:var(--iui-color-foreground-primary); }
376
- .iui-button-split-menu > .iui-active:disabled::after{
377
- background-color:rgba(0, 0, 0, 0.2);
378
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
350
+ align-items:center;
351
+ isolation:isolate; }
352
+ .iui-button-split-menu > *{
353
+ display:flex; }
354
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
355
+ z-index:1; }
356
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
357
+ z-index:2; }
358
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
359
+ z-index:revert; }
360
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
361
+ z-index:-1; }
362
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
363
+ content:'';
364
+ position:absolute;
365
+ height:2px;
366
+ opacity:1;
367
+ top:2px;
368
+ left:2px;
369
+ width:calc(100% - 4px);
370
+ background-color:#008BE1;
371
+ background-color:var(--iui-color-foreground-primary); }
372
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
373
+ background-color:rgba(0, 0, 0, 0.2);
374
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
375
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
376
+ border-radius:0; }
377
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
378
+ border-top-left-radius:3px;
379
+ border-bottom-left-radius:3px; }
380
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
381
+ border-top-right-radius:3px;
382
+ border-bottom-right-radius:3px; }
383
+ .iui-button-split-menu > *:not(:last-child){
384
+ margin-right:-1px; }
385
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
386
+ border-left-color:#DCE0E3;
387
+ border-left-color:var(--iui-color-background-4); }
388
+ .iui-button-split-menu > *{
389
+ display:flex; }
390
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
391
+ z-index:1; }
392
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
393
+ z-index:2; }
394
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
395
+ z-index:revert; }
396
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
397
+ z-index:-1; }
398
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
399
+ content:'';
400
+ position:absolute;
401
+ height:2px;
402
+ opacity:1;
403
+ top:2px;
404
+ left:2px;
405
+ width:calc(100% - 4px);
406
+ background-color:#008BE1;
407
+ background-color:var(--iui-color-foreground-primary); }
408
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
409
+ background-color:rgba(0, 0, 0, 0.2);
410
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
411
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
412
+ border-radius:0; }
413
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
414
+ border-top-left-radius:3px;
415
+ border-bottom-left-radius:3px; }
416
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
417
+ border-top-right-radius:3px;
418
+ border-bottom-right-radius:3px; }
419
+ .iui-button-split-menu > *:not(:last-child){
420
+ margin-right:-1px; }
421
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
422
+ border-left-color:#DCE0E3;
423
+ border-left-color:var(--iui-color-background-4); }
379
424
  .iui-button-split-menu:hover{
380
425
  background-color:rgba(0, 0, 0, 0.1);
381
426
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
382
- .iui-button-split-menu .iui-button:first-child.iui-borderless:hover{
427
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
383
428
  background-color:transparent; }
384
- .iui-button-split-menu > .iui-button + .iui-button{
429
+ .iui-button-split-menu > *:last-child > .iui-button{
385
430
  padding:4px; }
386
- .iui-button-split-menu > .iui-small + .iui-small{
431
+ .iui-button-split-menu > *:last-child > .iui-small{
387
432
  padding:2px; }
388
- .iui-button-split-menu > .iui-large + .iui-large{
433
+ .iui-button-split-menu > *:last-child > .iui-large{
389
434
  padding:8px; }
390
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility,
391
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility:hover,
392
- .iui-button-split-menu > .iui-cta + .iui-cta,
393
- .iui-button-split-menu > .iui-cta + .iui-cta:hover{
435
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
436
+ .iui-button-split-menu > *:first-child > .iui-cta{
437
+ border-right-color:rgba(255, 255, 255, 0.4);
438
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
439
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
440
+ .iui-button-split-menu > *:last-child > .iui-cta{
394
441
  border-left-color:rgba(255, 255, 255, 0.4);
395
442
  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
396
443
  .iui-button-split-menu.iui-disabled{
package/css/header.css CHANGED
@@ -114,11 +114,11 @@
114
114
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
115
115
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
116
116
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
117
- .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-label{
117
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-button-label{
118
118
  color:rgba(0, 0, 0, 0.2);
119
119
  color:var(--iui-icons-color-actionable-disabled); }
120
- .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-icon,
121
- .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-icon,
120
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-icon,
121
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-button-icon,
122
122
  .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
123
123
  fill:rgba(0, 0, 0, 0.2);
124
124
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -138,10 +138,12 @@
138
138
  margin:0;
139
139
  padding:0; }
140
140
  .iui-page-header .iui-header-split-button{
141
- height:100%;
142
- display:flex;
143
- overflow:hidden;
144
141
  max-width:25vw; }
142
+ .iui-page-header .iui-header-split-button,
143
+ .iui-page-header .iui-header-split-button > *{
144
+ height:100%;
145
+ display:flex;
146
+ overflow:hidden; }
145
147
  .iui-page-header .iui-header-split-button .iui-button{
146
148
  padding:0 12px;
147
149
  height:49px;
@@ -218,11 +220,11 @@
218
220
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
219
221
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
220
222
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
221
- .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-label{
223
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-button-label{
222
224
  color:rgba(0, 0, 0, 0.2);
223
225
  color:var(--iui-icons-color-actionable-disabled); }
224
- .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-icon,
225
- .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-icon,
226
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-icon,
227
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-button-icon,
226
228
  .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
227
229
  fill:rgba(0, 0, 0, 0.2);
228
230
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -241,7 +243,7 @@
241
243
  width:0.1px;
242
244
  margin:0;
243
245
  padding:0; }
244
- .iui-page-header .iui-header-split-button .iui-button:first-child{
246
+ .iui-page-header .iui-header-split-button > *:first-child .iui-button{
245
247
  padding-left:12px; }
246
248
  .iui-page-header .iui-header-split-button.iui-active svg{
247
249
  fill:#008BE1;
@@ -270,11 +272,11 @@
270
272
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
271
273
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
272
274
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
273
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-label{
275
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-button-label{
274
276
  color:rgba(0, 0, 0, 0.2);
275
277
  color:var(--iui-icons-color-actionable-disabled); }
276
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-icon,
277
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-icon,
278
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-icon,
279
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-button-icon,
278
280
  .iui-page-header .iui-header-split-button.iui-active:disabled svg{
279
281
  fill:rgba(0, 0, 0, 0.2);
280
282
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -285,7 +287,7 @@
285
287
  background-color:transparent; }
286
288
  .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
287
289
  display:none; }
288
- .iui-page-header .iui-header-split-button.iui-active .iui-button:last-child:hover{
290
+ .iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
289
291
  background-color:rgba(0, 139, 225, 0.1);
290
292
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
291
293
  .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
package/css/inputs.css CHANGED
@@ -13,7 +13,7 @@
13
13
  -ms-grid-columns:auto 1fr;
14
14
  grid-template:'label label' 'inputs inputs' / auto 1fr;
15
15
  cursor:default; }
16
- .iui-input-container.iui-inline-icon:not(.iui-inline-label) .iui-input-icon{
16
+ .iui-input-container.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon{
17
17
  -ms-grid-row:2;
18
18
  -ms-grid-column:2; }
19
19
  .iui-input-container.iui-inline-icon > .iui-input,
@@ -26,7 +26,7 @@
26
26
  -ms-grid-rows:auto auto auto;
27
27
  -ms-grid-columns:auto 1fr;
28
28
  grid-template:'label label' 'inputs inputs' 'icon message' / auto 1fr; }
29
- .iui-input-container.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
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
32
  .iui-input-container .iui-textarea,
@@ -67,7 +67,7 @@
67
67
  -ms-grid-rows:auto auto;
68
68
  -ms-grid-columns:auto auto 1fr;
69
69
  grid-template:'label inputs inputs' '. icon message' / auto auto 1fr; }
70
- .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
70
+ .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
71
71
  -ms-grid-row:2;
72
72
  -ms-grid-column:2; }
73
73
  .iui-input-container.iui-inline-label.iui-with-message .iui-message{
@@ -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;
@@ -132,7 +132,7 @@
132
132
  -ms-grid-column-span:1; }
133
133
  .iui-input-container.iui-inline-label > .iui-label.iui-required{
134
134
  margin-right:6px; }
135
- .iui-input-container.iui-inline-icon .iui-input-icon{
135
+ .iui-input-container.iui-inline-icon > .iui-input-icon{
136
136
  -ms-grid-row:1;
137
137
  -ms-grid-column:3;
138
138
  grid-area:inputs;
@@ -140,7 +140,7 @@
140
140
  justify-self:end;
141
141
  margin:0 12px 0 0;
142
142
  position:relative; }
143
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-button{
143
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
144
144
  height:100%;
145
145
  width:-webkit-fit-content;
146
146
  width:-moz-fit-content;
@@ -148,7 +148,7 @@
148
148
  margin-right:0;
149
149
  border-top-left-radius:0;
150
150
  border-bottom-left-radius:0; }
151
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable{
151
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
152
152
  align-items:center;
153
153
  height:90%;
154
154
  margin-right:1px;
@@ -156,19 +156,19 @@
156
156
  cursor:pointer;
157
157
  background-position:center;
158
158
  transition:background 0.4s ease-out; }
159
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:hover{
159
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
160
160
  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
161
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:active{
161
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
162
162
  background-color:var(--iui-color-background-2);
163
163
  background-size:100%;
164
164
  transition:background 0s; }
165
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable svg{
165
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
166
166
  width:16px;
167
167
  height:16px;
168
168
  fill:rgba(0, 0, 0, 0.4);
169
169
  fill:var(--iui-icons-color);
170
170
  transition:transform 0.2s ease-out; }
171
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable.iui-open svg{
171
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
172
172
  transform:rotate(180deg); }
173
173
  .iui-input-container.iui-positive *::-moz-selection{
174
174
  background-color:rgba(83, 162, 26, 0.4);