@itwin/itwinui-css 0.41.0 → 0.43.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 (14) hide show
  1. package/css/all.css +197 -161
  2. package/css/button.css +138 -112
  3. package/css/header.css +16 -14
  4. package/css/inputs.css +12 -12
  5. package/css/table.css +31 -23
  6. package/package.json +1 -1
  7. package/scss/button/button-group.scss +68 -46
  8. package/scss/button/split-menu.scss +34 -20
  9. package/scss/header/header.scss +16 -8
  10. package/scss/inputs/classes.scss +2 -2
  11. package/scss/inputs/labeled-inputs.scss +3 -3
  12. package/scss/style/mixins.scss +1 -1
  13. package/scss/table/paginator.scss +20 -21
  14. package/scss/table/table.scss +17 -8
package/css/button.css CHANGED
@@ -303,130 +303,156 @@
303
303
 
304
304
  .iui-button-group{
305
305
  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)); }
306
+ align-items:center;
307
+ isolation:isolate; }
308
+ .iui-button-group > *{
309
+ display:flex; }
310
+ .iui-button-group > * input, .iui-button-group > * button{
311
+ position:relative;
312
+ transition-duration:0ms; }
313
+ .iui-button-group > * input:hover, .iui-button-group > * button:hover{
314
+ z-index:1; }
315
+ .iui-button-group > * input:focus, .iui-button-group > * button:focus{
316
+ z-index:2; }
317
+ .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
318
+ z-index:revert; }
319
+ .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
320
+ z-index:-1; }
321
+ .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * button:hover, .iui-button-group > * button:focus{
322
+ transition-duration:0.2s; }
323
+ .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
324
+ content:'';
325
+ position:absolute;
326
+ height:2px;
327
+ opacity:1;
328
+ top:2px;
329
+ left:2px;
330
+ width:calc(100% - 4px);
331
+ background-color:#008BE1;
332
+ background-color:var(--iui-color-foreground-primary); }
333
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
334
+ background-color:rgba(0, 0, 0, 0.2);
335
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
336
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
337
+ border-radius:0; }
338
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
339
+ border-top-left-radius:3px;
340
+ border-bottom-left-radius:3px; }
341
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
342
+ border-top-right-radius:3px;
343
+ border-bottom-right-radius:3px; }
344
+ .iui-button-group > *:not(:last-child){
345
+ margin-right:-1px; }
346
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
347
+ border-left-color:#DCE0E3;
348
+ border-left-color:var(--iui-color-background-4); }
341
349
 
342
350
  .iui-button-split-menu{
343
351
  display:inline-flex;
344
352
  align-items:center;
353
+ isolation:isolate;
345
354
  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)); }
355
+ align-items:center;
356
+ isolation:isolate; }
357
+ .iui-button-split-menu > *{
358
+ display:flex; }
359
+ .iui-button-split-menu > * input, .iui-button-split-menu > * button{
360
+ position:relative;
361
+ transition-duration:0ms; }
362
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
363
+ z-index:1; }
364
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
365
+ z-index:2; }
366
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
367
+ z-index:revert; }
368
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
369
+ z-index:-1; }
370
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
371
+ transition-duration:0.2s; }
372
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
373
+ content:'';
374
+ position:absolute;
375
+ height:2px;
376
+ opacity:1;
377
+ top:2px;
378
+ left:2px;
379
+ width:calc(100% - 4px);
380
+ background-color:#008BE1;
381
+ background-color:var(--iui-color-foreground-primary); }
382
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
383
+ background-color:rgba(0, 0, 0, 0.2);
384
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
385
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
386
+ border-radius:0; }
387
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
388
+ border-top-left-radius:3px;
389
+ border-bottom-left-radius:3px; }
390
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
391
+ border-top-right-radius:3px;
392
+ border-bottom-right-radius:3px; }
393
+ .iui-button-split-menu > *:not(:last-child){
394
+ margin-right:-1px; }
395
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
396
+ border-left-color:#DCE0E3;
397
+ border-left-color:var(--iui-color-background-4); }
398
+ .iui-button-split-menu > *{
399
+ display:flex; }
400
+ .iui-button-split-menu > * input, .iui-button-split-menu > * button{
401
+ position:relative;
402
+ transition-duration:0ms; }
403
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
404
+ z-index:1; }
405
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
406
+ z-index:2; }
407
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
408
+ z-index:revert; }
409
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
410
+ z-index:-1; }
411
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
412
+ transition-duration:0.2s; }
413
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
414
+ content:'';
415
+ position:absolute;
416
+ height:2px;
417
+ opacity:1;
418
+ top:2px;
419
+ left:2px;
420
+ width:calc(100% - 4px);
421
+ background-color:#008BE1;
422
+ background-color:var(--iui-color-foreground-primary); }
423
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
424
+ background-color:rgba(0, 0, 0, 0.2);
425
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
426
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
427
+ border-radius:0; }
428
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
429
+ border-top-left-radius:3px;
430
+ border-bottom-left-radius:3px; }
431
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
432
+ border-top-right-radius:3px;
433
+ border-bottom-right-radius:3px; }
434
+ .iui-button-split-menu > *:not(:last-child){
435
+ margin-right:-1px; }
436
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
437
+ border-left-color:#DCE0E3;
438
+ border-left-color:var(--iui-color-background-4); }
415
439
  .iui-button-split-menu:hover{
416
440
  background-color:rgba(0, 0, 0, 0.1);
417
441
  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{
442
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
419
443
  background-color:transparent; }
420
- .iui-button-split-menu > .iui-button + .iui-button{
444
+ .iui-button-split-menu > *:last-child > .iui-button{
421
445
  padding:4px; }
422
- .iui-button-split-menu > .iui-small + .iui-small{
446
+ .iui-button-split-menu > *:last-child > .iui-small{
423
447
  padding:2px; }
424
- .iui-button-split-menu > .iui-large + .iui-large{
448
+ .iui-button-split-menu > *:last-child > .iui-large{
425
449
  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{
450
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
451
+ .iui-button-split-menu > *:first-child > .iui-cta{
452
+ border-right-color:rgba(255, 255, 255, 0.4);
453
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
454
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
455
+ .iui-button-split-menu > *:last-child > .iui-cta{
430
456
  border-left-color:rgba(255, 255, 255, 0.4);
431
457
  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
432
458
  .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);
package/css/table.css CHANGED
@@ -12,9 +12,6 @@
12
12
  flex-direction:column; }
13
13
  .iui-table *{
14
14
  box-sizing:border-box; }
15
- .iui-table.iui-zebra-striping > .iui-table-body > .iui-row:nth-child(even):not(.iui-selected){
16
- background:rgba(0, 0, 0, 0.02);
17
- background:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
18
15
  .iui-table .iui-cell-end-icon,
19
16
  .iui-table .iui-cell-start-icon{
20
17
  flex-shrink:0;
@@ -47,8 +44,13 @@
47
44
  -moz-user-select:none;
48
45
  -ms-user-select:none;
49
46
  user-select:none;
47
+ overflow:hidden;
48
+ flex-shrink:0;
50
49
  background-color:#EEF0F3;
51
50
  background-color:var(--iui-color-background-3); }
51
+ @supports not (overflow: overlay){
52
+ .iui-table-header{
53
+ overflow-y:scroll; } }
52
54
  .iui-table-header .iui-row{
53
55
  display:flex;
54
56
  flex-grow:1; }
@@ -116,20 +118,24 @@
116
118
  fill:var(--iui-icons-color-actionable); }
117
119
 
118
120
  .iui-table-body{
119
- overflow-x:hidden;
120
121
  overflow-y:scroll;
121
- overflow-y:overlay;
122
+ overflow:overlay;
122
123
  display:flex;
123
124
  flex-direction:column;
124
125
  flex-grow:1;
126
+ align-items:flex-start;
125
127
  background-color:#FFF;
126
128
  background-color:var(--iui-color-background-1); }
127
129
  .iui-table-body.iui-scroll-snapping{
128
130
  -ms-scroll-snap-type:y mandatory;
129
131
  scroll-snap-type:y mandatory; }
130
132
  .iui-table-body.iui-scroll-snapping .iui-row{
131
- scroll-snap-align:start; }
133
+ scroll-snap-align:start none; }
134
+ .iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
135
+ background-color:rgba(0, 0, 0, 0.02);
136
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
132
137
  .iui-table-body .iui-row{
138
+ min-width:100%;
133
139
  display:flex;
134
140
  border:solid 1px transparent;
135
141
  border-bottom-color:#DCE0E3;
@@ -280,6 +286,8 @@
280
286
  justify-content:center;
281
287
  align-items:center;
282
288
  flex-grow:1;
289
+ -ms-grid-row-align:center;
290
+ align-self:center;
283
291
  color:rgba(0, 0, 0, 0.4);
284
292
  background-color:#FFF;
285
293
  color:var(--iui-text-color-muted);
@@ -373,23 +381,23 @@
373
381
  color:var(--iui-text-color); }
374
382
  .iui-paginator > .iui-center .iui-button-group{
375
383
  margin:0 8px; }
376
- .iui-paginator > .iui-center .iui-button-group > .iui-button,
377
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
378
- width:38px; }
379
- .iui-paginator > .iui-center .iui-button-group > .iui-button.iui-small,
380
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis.iui-small{
381
- width:27px; }
382
- .iui-paginator > .iui-center .iui-button-group > .iui-button{
383
- transition:none; }
384
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
385
- display:flex;
386
- justify-content:center;
387
- align-items:center;
388
- color:rgba(0, 0, 0, 0.4);
389
- color:var(--iui-text-color-muted); }
390
- .iui-paginator > .iui-center .iui-button-group > .iui-active::after{
391
- top:auto;
392
- bottom:2px; }
384
+ .iui-paginator > .iui-center .iui-button-group > *{
385
+ margin-right:0; }
386
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
387
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
388
+ width:38px; }
389
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
390
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
391
+ width:27px; }
392
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
393
+ display:flex;
394
+ justify-content:center;
395
+ align-items:center;
396
+ color:rgba(0, 0, 0, 0.4);
397
+ color:var(--iui-text-color-muted); }
398
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-active::after{
399
+ top:auto;
400
+ bottom:2px; }
393
401
  .iui-paginator > .iui-right{
394
402
  justify-content:flex-end; }
395
403
  .iui-paginator-page-size-label{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.41.0",
3
+ "version": "0.43.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",