@itwin/itwinui-css 0.58.0 → 0.59.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 (12) hide show
  1. package/css/all.css +128 -52
  2. package/css/information-panel.css +2 -2
  3. package/css/side-navigation.css +1 -1
  4. package/css/table.css +125 -49
  5. package/package.json +1 -1
  6. package/scss/information-panel/information-panel.scss +2 -2
  7. package/scss/side-navigation/side-navigation.scss +2 -2
  8. package/scss/style/elevation.scss +6 -5
  9. package/scss/table/classes.scss +12 -0
  10. package/scss/table/condensed.scss +4 -1
  11. package/scss/table/extra-condensed.scss +8 -1
  12. package/scss/table/table.scss +130 -37
package/css/all.css CHANGED
@@ -4358,7 +4358,7 @@ button.iui-header-logo:hover:not(:focus-visible):not(:hover), .iui-header-logo[r
4358
4358
  min-width:192px;
4359
4359
  height:100%;
4360
4360
  transform:translateX(100%);
4361
- box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
4361
+ box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
4362
4362
  -webkit-clip-path:inset(0 0 0 -15px);
4363
4363
  clip-path:inset(0 0 0 -15px);
4364
4364
  }
@@ -4391,7 +4391,7 @@ button.iui-header-logo:hover:not(:focus-visible):not(:hover), .iui-header-logo[r
4391
4391
  min-height:192px;
4392
4392
  width:100%;
4393
4393
  transform:translateY(100%);
4394
- box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
4394
+ box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
4395
4395
  -webkit-clip-path:inset(-15px 0 0 0);
4396
4396
  clip-path:inset(-15px 0 0 0);
4397
4397
  }
@@ -6957,7 +6957,7 @@ label.iui-input-label.iui-disabled{
6957
6957
  border-right:none;
6958
6958
  overflow:hidden;
6959
6959
  justify-content:flex-start;
6960
- --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0;
6960
+ --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
6961
6961
  }
6962
6962
  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
6963
6963
  height:55px;
@@ -7354,6 +7354,7 @@ label.iui-input-label.iui-disabled{
7354
7354
  vertical-align:baseline;
7355
7355
  display:flex;
7356
7356
  flex-direction:column;
7357
+ isolation:isolate;
7357
7358
  }
7358
7359
  .iui-table *{
7359
7360
  box-sizing:border-box;
@@ -7381,41 +7382,57 @@ label.iui-input-label.iui-disabled{
7381
7382
  margin-left:auto;
7382
7383
  }
7383
7384
  .iui-table.iui-condensed .iui-table-header .iui-cell,
7384
- .iui-table.iui-condensed .iui-row .iui-cell,
7385
7385
  .iui-table.iui-condensed .iui-paginator{
7386
7386
  min-height:44px;
7387
7387
  }
7388
+ .iui-table.iui-condensed .iui-row .iui-cell{
7389
+ min-height:46px;
7390
+ }
7388
7391
  .iui-table.iui-extra-condensed .iui-table-header .iui-cell,
7389
- .iui-table.iui-extra-condensed .iui-row .iui-cell,
7390
7392
  .iui-table.iui-extra-condensed .iui-paginator{
7391
7393
  min-height:33px;
7392
7394
  }
7395
+ .iui-table.iui-extra-condensed .iui-row .iui-cell{
7396
+ min-height:35px;
7397
+ }
7398
+ .iui-table.iui-extra-condensed .iui-table-header .iui-cell{
7399
+ padding-block:2.75px;
7400
+ }
7393
7401
 
7394
- .iui-table-header{
7395
- -webkit-user-select:none;
7396
- -moz-user-select:none;
7397
- -ms-user-select:none;
7398
- user-select:none;
7402
+ .iui-table-header-wrapper{
7399
7403
  overflow:hidden;
7404
+ display:flex;
7400
7405
  flex-shrink:0;
7401
- background-color:#edeff2;
7402
- background-color:var(--iui-color-background-3);
7403
7406
  }
7404
7407
  @supports not (overflow: overlay){
7405
- .iui-table-header{
7408
+ .iui-table-header-wrapper{
7406
7409
  overflow-y:scroll;
7407
7410
  }
7408
7411
  }
7412
+
7413
+ .iui-table-header{
7414
+ display:flex;
7415
+ -webkit-user-select:none;
7416
+ -moz-user-select:none;
7417
+ -ms-user-select:none;
7418
+ user-select:none;
7419
+ min-width:100%;
7420
+ flex-shrink:0;
7421
+ }
7409
7422
  .iui-table-header .iui-row{
7410
7423
  display:flex;
7411
7424
  flex-grow:1;
7412
- border-left:solid 1px transparent;
7413
- border-right:solid 1px transparent;
7425
+ min-width:100%;
7426
+ }
7427
+ .iui-table-header .iui-cell{
7428
+ min-height:55px;
7429
+ background-color:#edeff2;
7430
+ background-color:var(--iui-color-background-3);
7414
7431
  }
7415
7432
  .iui-table-header .iui-cell:not(.iui-slot){
7416
- flex-wrap:wrap;
7417
7433
  -moz-column-gap:4px;
7418
7434
  column-gap:4px;
7435
+ padding-block:5.5px;
7419
7436
  }
7420
7437
  .iui-table-header .iui-cell:not(.iui-slot):focus-visible{
7421
7438
  outline:1px solid var(--iui-color-foreground-primary);
@@ -7434,9 +7451,6 @@ label.iui-input-label.iui-disabled{
7434
7451
  cursor:-webkit-grabbing;
7435
7452
  cursor:grabbing;
7436
7453
  }
7437
- .iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button{
7438
- margin-right:8px;
7439
- }
7440
7454
  .iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button:not(.iui-active){
7441
7455
  visibility:hidden;
7442
7456
  }
@@ -7517,6 +7531,15 @@ label.iui-input-label.iui-disabled{
7517
7531
  display:flex;
7518
7532
  flex-grow:1;
7519
7533
  align-items:center;
7534
+ flex-wrap:wrap;
7535
+ justify-content:flex-end;
7536
+ margin-right:12px;
7537
+ }
7538
+ .iui-table-header-actions-container .iui-cell-end-icon{
7539
+ width:28px;
7540
+ height:28px;
7541
+ margin-right:initial;
7542
+ margin-left:auto;
7520
7543
  }
7521
7544
 
7522
7545
  .iui-table-body{
@@ -7543,21 +7566,26 @@ label.iui-input-label.iui-disabled{
7543
7566
  .iui-table-body .iui-row{
7544
7567
  min-width:100%;
7545
7568
  display:flex;
7546
- border:solid 1px transparent;
7569
+ }
7570
+ .iui-table-body .iui-row .iui-cell{
7571
+ border-top:solid 1px transparent;
7572
+ border-bottom:solid 1px transparent;
7547
7573
  border-bottom-color:#c7ccd1;
7548
7574
  border-bottom-color:var(--iui-color-background-border);
7575
+ background-color:white;
7576
+ background-color:var(--iui-color-background-1);
7549
7577
  }
7550
7578
  @media (prefers-reduced-motion: no-preference){
7551
- .iui-table-body .iui-row{
7579
+ .iui-table-body .iui-row .iui-cell{
7552
7580
  transition:border 0.2s ease-out;
7553
7581
  }
7554
7582
  }
7555
7583
  .iui-table-body .iui-row > .iui-slot > .iui-more-options{
7556
7584
  visibility:hidden;
7557
7585
  }
7558
- .iui-table-body .iui-row:hover:not(.iui-disabled):not(.iui-expanded-content){
7559
- background-color:rgba(0, 138, 224, 0.1);
7560
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
7586
+ .iui-table-body .iui-row:hover:not(.iui-disabled) .iui-cell{
7587
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
7588
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
7561
7589
  }
7562
7590
  .iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot:not(.iui-disabled) > .iui-more-options{
7563
7591
  visibility:visible;
@@ -7572,9 +7600,10 @@ label.iui-input-label.iui-disabled{
7572
7600
  }
7573
7601
  .iui-table-body .iui-row.iui-row-expanded{
7574
7602
  overflow:hidden;
7603
+ }
7604
+ .iui-table-body .iui-row.iui-row-expanded .iui-cell{
7575
7605
  border-left-color:#dde1e4;
7576
7606
  border-right-color:#dde1e4;
7577
- border-bottom-color:transparent;
7578
7607
  border-left-color:var(--iui-color-background-4);
7579
7608
  border-right-color:var(--iui-color-background-4);
7580
7609
  border-bottom-color:transparent;
@@ -7590,6 +7619,10 @@ label.iui-input-label.iui-disabled{
7590
7619
  }
7591
7620
  .iui-table-body .iui-row.iui-expanded-content{
7592
7621
  overflow:hidden;
7622
+ border-left:1px solid transparent;
7623
+ border-right:1px solid transparent;
7624
+ border-bottom:1px solid #c7ccd1;
7625
+ border-bottom:1px solid var(--iui-color-background-border);
7593
7626
  }
7594
7627
  .iui-table-body .iui-row.iui-expanded-content.iui-enter{
7595
7628
  opacity:0;
@@ -7613,26 +7646,26 @@ label.iui-input-label.iui-disabled{
7613
7646
  transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
7614
7647
  }
7615
7648
  }
7616
- .iui-table-body .iui-row:not(.iui-selected) + .iui-selected, .iui-table-body .iui-row.iui-selected:first-child{
7649
+ .iui-table-body .iui-row:not(.iui-selected) + .iui-selected .iui-cell, .iui-table-body .iui-row.iui-selected:first-child .iui-cell{
7617
7650
  border-bottom-color:transparent;
7618
7651
  }
7619
- .iui-table-body .iui-row.iui-selected{
7652
+ .iui-table-body .iui-row.iui-selected .iui-cell{
7620
7653
  border-color:#008ae0;
7621
- background:rgba(0, 138, 224, 0.1);
7654
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
7622
7655
  border-color:var(--iui-color-foreground-primary);
7623
- background:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
7656
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
7624
7657
  }
7625
- .iui-table-body .iui-row.iui-selected + .iui-selected{
7658
+ .iui-table-body .iui-row.iui-selected + .iui-selected .iui-cell{
7626
7659
  border-bottom-color:transparent;
7627
7660
  border-top-color:rgba(0, 138, 224, 0.4);
7628
7661
  border-top-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
7629
7662
  }
7630
- .iui-table-body .iui-row.iui-selected:last-child{
7663
+ .iui-table-body .iui-row.iui-selected:last-child .iui-cell{
7631
7664
  border-bottom-color:#008ae0;
7632
7665
  border-bottom-color:var(--iui-color-foreground-primary);
7633
7666
  }
7634
- .iui-table-body .iui-row.iui-selected + :not(.iui-selected),
7635
- .iui-table-body .iui-row.iui-selected + .iui-expanded-content + :not(.iui-selected){
7667
+ .iui-table-body .iui-row.iui-selected + :not(.iui-selected) .iui-cell,
7668
+ .iui-table-body .iui-row.iui-selected + .iui-expanded-content + .iui-row:not(.iui-selected) .iui-cell{
7636
7669
  border-top-color:#008ae0;
7637
7670
  border-top-color:var(--iui-color-foreground-primary);
7638
7671
  }
@@ -7673,17 +7706,17 @@ label.iui-input-label.iui-disabled{
7673
7706
  .iui-table-body .iui-row.iui-expanded-content.iui-disabled .iui-user-icon{
7674
7707
  filter:grayscale(100%);
7675
7708
  }
7676
- .iui-table-body .iui-row.iui-positive,
7709
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type,
7677
7710
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content{
7678
7711
  box-shadow:inset 2px 0 0 0 #53a21a;
7679
7712
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-positive);
7680
7713
  }
7681
- .iui-table-body .iui-row.iui-positive::-moz-selection, .iui-table-body .iui-row.iui-positive *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
7714
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
7682
7715
  background-color:rgba(83, 162, 26, 0.2);
7683
7716
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
7684
7717
  }
7685
- .iui-table-body .iui-row.iui-positive::selection,
7686
- .iui-table-body .iui-row.iui-positive *::selection,
7718
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::selection,
7719
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::selection,
7687
7720
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content::selection,
7688
7721
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::selection{
7689
7722
  background-color:rgba(83, 162, 26, 0.2);
@@ -7693,17 +7726,17 @@ label.iui-input-label.iui-disabled{
7693
7726
  fill:#53a21a;
7694
7727
  fill:var(--iui-icons-color-positive);
7695
7728
  }
7696
- .iui-table-body .iui-row.iui-warning,
7729
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type,
7697
7730
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content{
7698
7731
  box-shadow:inset 2px 0 0 0 #f18d13;
7699
7732
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-warning);
7700
7733
  }
7701
- .iui-table-body .iui-row.iui-warning::-moz-selection, .iui-table-body .iui-row.iui-warning *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
7734
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
7702
7735
  background-color:rgba(241, 141, 19, 0.2);
7703
7736
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
7704
7737
  }
7705
- .iui-table-body .iui-row.iui-warning::selection,
7706
- .iui-table-body .iui-row.iui-warning *::selection,
7738
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::selection,
7739
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::selection,
7707
7740
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content::selection,
7708
7741
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::selection{
7709
7742
  background-color:rgba(241, 141, 19, 0.2);
@@ -7713,17 +7746,17 @@ label.iui-input-label.iui-disabled{
7713
7746
  fill:#f18d13;
7714
7747
  fill:var(--iui-icons-color-warning);
7715
7748
  }
7716
- .iui-table-body .iui-row.iui-negative,
7749
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type,
7717
7750
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content{
7718
7751
  box-shadow:inset 2px 0 0 0 #d10a0a;
7719
7752
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-negative);
7720
7753
  }
7721
- .iui-table-body .iui-row.iui-negative::-moz-selection, .iui-table-body .iui-row.iui-negative *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
7754
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
7722
7755
  background-color:rgba(209, 10, 10, 0.2);
7723
7756
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
7724
7757
  }
7725
- .iui-table-body .iui-row.iui-negative::selection,
7726
- .iui-table-body .iui-row.iui-negative *::selection,
7758
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::selection,
7759
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::selection,
7727
7760
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content::selection,
7728
7761
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::selection{
7729
7762
  background-color:rgba(209, 10, 10, 0.2);
@@ -7754,12 +7787,18 @@ label.iui-input-label.iui-disabled{
7754
7787
  display:flex;
7755
7788
  flex-grow:1;
7756
7789
  min-width:64px;
7757
- min-height:55px;
7790
+ min-height:57px;
7758
7791
  padding-left:16px;
7759
7792
  flex-basis:64px;
7760
7793
  position:relative;
7761
7794
  word-break:break-word;
7762
7795
  }
7796
+ .iui-cell:first-of-type{
7797
+ border-left:solid 1px transparent;
7798
+ }
7799
+ .iui-cell:last-of-type{
7800
+ border-right:solid 1px transparent;
7801
+ }
7763
7802
  .iui-cell.iui-slot{
7764
7803
  width:48px;
7765
7804
  padding:0;
@@ -7770,12 +7809,19 @@ label.iui-input-label.iui-disabled{
7770
7809
  align-items:center;
7771
7810
  flex-basis:48px;
7772
7811
  }
7812
+ .iui-cell.iui-cell-sticky{
7813
+ position:-webkit-sticky;
7814
+ position:sticky;
7815
+ z-index:1;
7816
+ left:var(--iui-table-sticky-left, initial);
7817
+ right:var(--iui-table-sticky-right, initial);
7818
+ }
7773
7819
  .iui-cell:not(.iui-slot):last-child{
7774
7820
  padding-right:16px;
7775
7821
  }
7776
7822
  .iui-cell.iui-positive{
7777
- background-color:rgba(83, 162, 26, 0.1);
7778
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
7823
+ background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
7824
+ background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
7779
7825
  }
7780
7826
  .iui-cell.iui-positive::-moz-selection, .iui-cell.iui-positive *::-moz-selection{
7781
7827
  background-color:rgba(83, 162, 26, 0.2);
@@ -7787,8 +7833,8 @@ label.iui-input-label.iui-disabled{
7787
7833
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
7788
7834
  }
7789
7835
  .iui-cell.iui-warning{
7790
- background-color:rgba(241, 141, 19, 0.1);
7791
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6));
7836
+ background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
7837
+ background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
7792
7838
  }
7793
7839
  .iui-cell.iui-warning::-moz-selection, .iui-cell.iui-warning *::-moz-selection{
7794
7840
  background-color:rgba(241, 141, 19, 0.2);
@@ -7800,8 +7846,8 @@ label.iui-input-label.iui-disabled{
7800
7846
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
7801
7847
  }
7802
7848
  .iui-cell.iui-negative{
7803
- background-color:rgba(209, 10, 10, 0.1);
7804
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6));
7849
+ background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
7850
+ background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
7805
7851
  }
7806
7852
  .iui-cell.iui-negative::-moz-selection, .iui-cell.iui-negative *::-moz-selection{
7807
7853
  background-color:rgba(209, 10, 10, 0.2);
@@ -7824,6 +7870,36 @@ label.iui-input-label.iui-disabled{
7824
7870
  background-color:var(--iui-color-background-1);
7825
7871
  }
7826
7872
 
7873
+ .iui-cell-shadow-left{
7874
+ position:absolute;
7875
+ top:-1px;
7876
+ bottom:-1px;
7877
+ width:24px;
7878
+ pointer-events:none;
7879
+ left:0;
7880
+ transform:translate(-100%);
7881
+ box-shadow:inset -10px 0 5px -10px rgba(0, 0, 0, 0.25);
7882
+ }
7883
+ .iui-table-header .iui-cell-shadow-left{
7884
+ top:0;
7885
+ bottom:0;
7886
+ }
7887
+
7888
+ .iui-cell-shadow-right{
7889
+ position:absolute;
7890
+ top:-1px;
7891
+ bottom:-1px;
7892
+ width:24px;
7893
+ pointer-events:none;
7894
+ right:0;
7895
+ transform:translate(100%);
7896
+ box-shadow:inset 10px 0 5px -10px rgba(0, 0, 0, 0.25);
7897
+ }
7898
+ .iui-table-header .iui-cell-shadow-right{
7899
+ top:0;
7900
+ bottom:0;
7901
+ }
7902
+
7827
7903
  .iui-paginator{
7828
7904
  margin:0;
7829
7905
  padding:0;
package/css/information-panel.css CHANGED
@@ -98,7 +98,7 @@
98
98
  min-width:192px;
99
99
  height:100%;
100
100
  transform:translateX(100%);
101
- box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
101
+ box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
102
102
  -webkit-clip-path:inset(0 0 0 -15px);
103
103
  clip-path:inset(0 0 0 -15px);
104
104
  }
@@ -131,7 +131,7 @@
131
131
  min-height:192px;
132
132
  width:100%;
133
133
  transform:translateY(100%);
134
- box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
134
+ box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
135
135
  -webkit-clip-path:inset(-15px 0 0 0);
136
136
  clip-path:inset(-15px 0 0 0);
137
137
  }
package/css/side-navigation.css CHANGED
@@ -71,7 +71,7 @@
71
71
  border-right:none;
72
72
  overflow:hidden;
73
73
  justify-content:flex-start;
74
- --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0;
74
+ --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
75
75
  }
76
76
  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
77
77
  height:55px;
package/css/table.css CHANGED
@@ -10,6 +10,7 @@
10
10
  vertical-align:baseline;
11
11
  display:flex;
12
12
  flex-direction:column;
13
+ isolation:isolate;
13
14
  }
14
15
  .iui-table *{
15
16
  box-sizing:border-box;
@@ -37,41 +38,57 @@
37
38
  margin-left:auto;
38
39
  }
39
40
  .iui-table.iui-condensed .iui-table-header .iui-cell,
40
- .iui-table.iui-condensed .iui-row .iui-cell,
41
41
  .iui-table.iui-condensed .iui-paginator{
42
42
  min-height:44px;
43
43
  }
44
+ .iui-table.iui-condensed .iui-row .iui-cell{
45
+ min-height:46px;
46
+ }
44
47
  .iui-table.iui-extra-condensed .iui-table-header .iui-cell,
45
- .iui-table.iui-extra-condensed .iui-row .iui-cell,
46
48
  .iui-table.iui-extra-condensed .iui-paginator{
47
49
  min-height:33px;
48
50
  }
51
+ .iui-table.iui-extra-condensed .iui-row .iui-cell{
52
+ min-height:35px;
53
+ }
54
+ .iui-table.iui-extra-condensed .iui-table-header .iui-cell{
55
+ padding-block:2.75px;
56
+ }
49
57
 
50
- .iui-table-header{
51
- -webkit-user-select:none;
52
- -moz-user-select:none;
53
- -ms-user-select:none;
54
- user-select:none;
58
+ .iui-table-header-wrapper{
55
59
  overflow:hidden;
60
+ display:flex;
56
61
  flex-shrink:0;
57
- background-color:#edeff2;
58
- background-color:var(--iui-color-background-3);
59
62
  }
60
63
  @supports not (overflow: overlay){
61
- .iui-table-header{
64
+ .iui-table-header-wrapper{
62
65
  overflow-y:scroll;
63
66
  }
64
67
  }
68
+
69
+ .iui-table-header{
70
+ display:flex;
71
+ -webkit-user-select:none;
72
+ -moz-user-select:none;
73
+ -ms-user-select:none;
74
+ user-select:none;
75
+ min-width:100%;
76
+ flex-shrink:0;
77
+ }
65
78
  .iui-table-header .iui-row{
66
79
  display:flex;
67
80
  flex-grow:1;
68
- border-left:solid 1px transparent;
69
- border-right:solid 1px transparent;
81
+ min-width:100%;
82
+ }
83
+ .iui-table-header .iui-cell{
84
+ min-height:55px;
85
+ background-color:#edeff2;
86
+ background-color:var(--iui-color-background-3);
70
87
  }
71
88
  .iui-table-header .iui-cell:not(.iui-slot){
72
- flex-wrap:wrap;
73
89
  -moz-column-gap:4px;
74
90
  column-gap:4px;
91
+ padding-block:5.5px;
75
92
  }
76
93
  .iui-table-header .iui-cell:not(.iui-slot):focus-visible{
77
94
  outline:1px solid var(--iui-color-foreground-primary);
@@ -90,9 +107,6 @@
90
107
  cursor:-webkit-grabbing;
91
108
  cursor:grabbing;
92
109
  }
93
- .iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button{
94
- margin-right:8px;
95
- }
96
110
  .iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button:not(.iui-active){
97
111
  visibility:hidden;
98
112
  }
@@ -173,6 +187,15 @@
173
187
  display:flex;
174
188
  flex-grow:1;
175
189
  align-items:center;
190
+ flex-wrap:wrap;
191
+ justify-content:flex-end;
192
+ margin-right:12px;
193
+ }
194
+ .iui-table-header-actions-container .iui-cell-end-icon{
195
+ width:28px;
196
+ height:28px;
197
+ margin-right:initial;
198
+ margin-left:auto;
176
199
  }
177
200
 
178
201
  .iui-table-body{
@@ -199,21 +222,26 @@
199
222
  .iui-table-body .iui-row{
200
223
  min-width:100%;
201
224
  display:flex;
202
- border:solid 1px transparent;
225
+ }
226
+ .iui-table-body .iui-row .iui-cell{
227
+ border-top:solid 1px transparent;
228
+ border-bottom:solid 1px transparent;
203
229
  border-bottom-color:#c7ccd1;
204
230
  border-bottom-color:var(--iui-color-background-border);
231
+ background-color:white;
232
+ background-color:var(--iui-color-background-1);
205
233
  }
206
234
  @media (prefers-reduced-motion: no-preference){
207
- .iui-table-body .iui-row{
235
+ .iui-table-body .iui-row .iui-cell{
208
236
  transition:border 0.2s ease-out;
209
237
  }
210
238
  }
211
239
  .iui-table-body .iui-row > .iui-slot > .iui-more-options{
212
240
  visibility:hidden;
213
241
  }
214
- .iui-table-body .iui-row:hover:not(.iui-disabled):not(.iui-expanded-content){
215
- background-color:rgba(0, 138, 224, 0.1);
216
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
242
+ .iui-table-body .iui-row:hover:not(.iui-disabled) .iui-cell{
243
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
244
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
217
245
  }
218
246
  .iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot:not(.iui-disabled) > .iui-more-options{
219
247
  visibility:visible;
@@ -228,9 +256,10 @@
228
256
  }
229
257
  .iui-table-body .iui-row.iui-row-expanded{
230
258
  overflow:hidden;
259
+ }
260
+ .iui-table-body .iui-row.iui-row-expanded .iui-cell{
231
261
  border-left-color:#dde1e4;
232
262
  border-right-color:#dde1e4;
233
- border-bottom-color:transparent;
234
263
  border-left-color:var(--iui-color-background-4);
235
264
  border-right-color:var(--iui-color-background-4);
236
265
  border-bottom-color:transparent;
@@ -246,6 +275,10 @@
246
275
  }
247
276
  .iui-table-body .iui-row.iui-expanded-content{
248
277
  overflow:hidden;
278
+ border-left:1px solid transparent;
279
+ border-right:1px solid transparent;
280
+ border-bottom:1px solid #c7ccd1;
281
+ border-bottom:1px solid var(--iui-color-background-border);
249
282
  }
250
283
  .iui-table-body .iui-row.iui-expanded-content.iui-enter{
251
284
  opacity:0;
@@ -269,26 +302,26 @@
269
302
  transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
270
303
  }
271
304
  }
272
- .iui-table-body .iui-row:not(.iui-selected) + .iui-selected, .iui-table-body .iui-row.iui-selected:first-child{
305
+ .iui-table-body .iui-row:not(.iui-selected) + .iui-selected .iui-cell, .iui-table-body .iui-row.iui-selected:first-child .iui-cell{
273
306
  border-bottom-color:transparent;
274
307
  }
275
- .iui-table-body .iui-row.iui-selected{
308
+ .iui-table-body .iui-row.iui-selected .iui-cell{
276
309
  border-color:#008ae0;
277
- background:rgba(0, 138, 224, 0.1);
310
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
278
311
  border-color:var(--iui-color-foreground-primary);
279
- background:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
312
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
280
313
  }
281
- .iui-table-body .iui-row.iui-selected + .iui-selected{
314
+ .iui-table-body .iui-row.iui-selected + .iui-selected .iui-cell{
282
315
  border-bottom-color:transparent;
283
316
  border-top-color:rgba(0, 138, 224, 0.4);
284
317
  border-top-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
285
318
  }
286
- .iui-table-body .iui-row.iui-selected:last-child{
319
+ .iui-table-body .iui-row.iui-selected:last-child .iui-cell{
287
320
  border-bottom-color:#008ae0;
288
321
  border-bottom-color:var(--iui-color-foreground-primary);
289
322
  }
290
- .iui-table-body .iui-row.iui-selected + :not(.iui-selected),
291
- .iui-table-body .iui-row.iui-selected + .iui-expanded-content + :not(.iui-selected){
323
+ .iui-table-body .iui-row.iui-selected + :not(.iui-selected) .iui-cell,
324
+ .iui-table-body .iui-row.iui-selected + .iui-expanded-content + .iui-row:not(.iui-selected) .iui-cell{
292
325
  border-top-color:#008ae0;
293
326
  border-top-color:var(--iui-color-foreground-primary);
294
327
  }
@@ -329,17 +362,17 @@
329
362
  .iui-table-body .iui-row.iui-expanded-content.iui-disabled .iui-user-icon{
330
363
  filter:grayscale(100%);
331
364
  }
332
- .iui-table-body .iui-row.iui-positive,
365
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type,
333
366
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content{
334
367
  box-shadow:inset 2px 0 0 0 #53a21a;
335
368
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-positive);
336
369
  }
337
- .iui-table-body .iui-row.iui-positive::-moz-selection, .iui-table-body .iui-row.iui-positive *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
370
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
338
371
  background-color:rgba(83, 162, 26, 0.2);
339
372
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
340
373
  }
341
- .iui-table-body .iui-row.iui-positive::selection,
342
- .iui-table-body .iui-row.iui-positive *::selection,
374
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::selection,
375
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::selection,
343
376
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content::selection,
344
377
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::selection{
345
378
  background-color:rgba(83, 162, 26, 0.2);
@@ -349,17 +382,17 @@
349
382
  fill:#53a21a;
350
383
  fill:var(--iui-icons-color-positive);
351
384
  }
352
- .iui-table-body .iui-row.iui-warning,
385
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type,
353
386
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content{
354
387
  box-shadow:inset 2px 0 0 0 #f18d13;
355
388
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-warning);
356
389
  }
357
- .iui-table-body .iui-row.iui-warning::-moz-selection, .iui-table-body .iui-row.iui-warning *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
390
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
358
391
  background-color:rgba(241, 141, 19, 0.2);
359
392
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
360
393
  }
361
- .iui-table-body .iui-row.iui-warning::selection,
362
- .iui-table-body .iui-row.iui-warning *::selection,
394
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::selection,
395
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::selection,
363
396
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content::selection,
364
397
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::selection{
365
398
  background-color:rgba(241, 141, 19, 0.2);
@@ -369,17 +402,17 @@
369
402
  fill:#f18d13;
370
403
  fill:var(--iui-icons-color-warning);
371
404
  }
372
- .iui-table-body .iui-row.iui-negative,
405
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type,
373
406
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content{
374
407
  box-shadow:inset 2px 0 0 0 #d10a0a;
375
408
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-negative);
376
409
  }
377
- .iui-table-body .iui-row.iui-negative::-moz-selection, .iui-table-body .iui-row.iui-negative *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
410
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
378
411
  background-color:rgba(209, 10, 10, 0.2);
379
412
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
380
413
  }
381
- .iui-table-body .iui-row.iui-negative::selection,
382
- .iui-table-body .iui-row.iui-negative *::selection,
414
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::selection,
415
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::selection,
383
416
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content::selection,
384
417
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::selection{
385
418
  background-color:rgba(209, 10, 10, 0.2);
@@ -410,12 +443,18 @@
410
443
  display:flex;
411
444
  flex-grow:1;
412
445
  min-width:64px;
413
- min-height:55px;
446
+ min-height:57px;
414
447
  padding-left:16px;
415
448
  flex-basis:64px;
416
449
  position:relative;
417
450
  word-break:break-word;
418
451
  }
452
+ .iui-cell:first-of-type{
453
+ border-left:solid 1px transparent;
454
+ }
455
+ .iui-cell:last-of-type{
456
+ border-right:solid 1px transparent;
457
+ }
419
458
  .iui-cell.iui-slot{
420
459
  width:48px;
421
460
  padding:0;
@@ -426,12 +465,19 @@
426
465
  align-items:center;
427
466
  flex-basis:48px;
428
467
  }
468
+ .iui-cell.iui-cell-sticky{
469
+ position:-webkit-sticky;
470
+ position:sticky;
471
+ z-index:1;
472
+ left:var(--iui-table-sticky-left, initial);
473
+ right:var(--iui-table-sticky-right, initial);
474
+ }
429
475
  .iui-cell:not(.iui-slot):last-child{
430
476
  padding-right:16px;
431
477
  }
432
478
  .iui-cell.iui-positive{
433
- background-color:rgba(83, 162, 26, 0.1);
434
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
479
+ background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
480
+ background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
435
481
  }
436
482
  .iui-cell.iui-positive::-moz-selection, .iui-cell.iui-positive *::-moz-selection{
437
483
  background-color:rgba(83, 162, 26, 0.2);
@@ -443,8 +489,8 @@
443
489
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
444
490
  }
445
491
  .iui-cell.iui-warning{
446
- background-color:rgba(241, 141, 19, 0.1);
447
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6));
492
+ background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
493
+ background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
448
494
  }
449
495
  .iui-cell.iui-warning::-moz-selection, .iui-cell.iui-warning *::-moz-selection{
450
496
  background-color:rgba(241, 141, 19, 0.2);
@@ -456,8 +502,8 @@
456
502
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
457
503
  }
458
504
  .iui-cell.iui-negative{
459
- background-color:rgba(209, 10, 10, 0.1);
460
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6));
505
+ background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
506
+ background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
461
507
  }
462
508
  .iui-cell.iui-negative::-moz-selection, .iui-cell.iui-negative *::-moz-selection{
463
509
  background-color:rgba(209, 10, 10, 0.2);
@@ -480,6 +526,36 @@
480
526
  background-color:var(--iui-color-background-1);
481
527
  }
482
528
 
529
+ .iui-cell-shadow-left{
530
+ position:absolute;
531
+ top:-1px;
532
+ bottom:-1px;
533
+ width:24px;
534
+ pointer-events:none;
535
+ left:0;
536
+ transform:translate(-100%);
537
+ box-shadow:inset -10px 0 5px -10px rgba(0, 0, 0, 0.25);
538
+ }
539
+ .iui-table-header .iui-cell-shadow-left{
540
+ top:0;
541
+ bottom:0;
542
+ }
543
+
544
+ .iui-cell-shadow-right{
545
+ position:absolute;
546
+ top:-1px;
547
+ bottom:-1px;
548
+ width:24px;
549
+ pointer-events:none;
550
+ right:0;
551
+ transform:translate(100%);
552
+ box-shadow:inset 10px 0 5px -10px rgba(0, 0, 0, 0.25);
553
+ }
554
+ .iui-table-header .iui-cell-shadow-right{
555
+ top:0;
556
+ bottom:0;
557
+ }
558
+
483
559
  .iui-paginator{
484
560
  margin:0;
485
561
  padding:0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.58.0",
3
+ "version": "0.59.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/information-panel/information-panel.scss CHANGED
@@ -181,7 +181,7 @@
181
181
  @mixin iui-information-panel-right {
182
182
  @include iui-information-panel-vertical;
183
183
  transform: translateX(100%); // hide off screen
184
- box-shadow: -1px 0 14px rgba(0, 0, 0, 0.25);
184
+ box-shadow: -1px 0 10px $iui-elevation-color;
185
185
  clip-path: inset(0 0 0 -15px); // show box-shadow only on the left
186
186
 
187
187
  > .iui-resizer {
@@ -192,7 +192,7 @@
192
192
  @mixin iui-information-panel-bottom {
193
193
  @include iui-information-panel-horizontal;
194
194
  transform: translateY(100%); // hide off screen
195
- box-shadow: 0 -1px 14px rgba(0, 0, 0, 0.25);
195
+ box-shadow: 0 -1px 10px $iui-elevation-color;
196
196
  clip-path: inset(-15px 0 0 0); // show box-shadow only on top
197
197
 
198
198
  > .iui-resizer {
package/scss/side-navigation/side-navigation.scss CHANGED
@@ -84,8 +84,8 @@
84
84
  overflow: hidden;
85
85
  justify-content: flex-start;
86
86
 
87
- // Adds stripe to the left of active button
88
- --_iui-button-active-stripe-inset: 0 calc(100% - #{$iui-xxs}) 0 0;
87
+ // Adds stripe to the right of active button
88
+ --_iui-button-active-stripe-inset: 0 0 0 calc(100% - #{$iui-xxs});
89
89
 
90
90
  &:not(.iui-expand) {
91
91
  height: $iui-baseline * 5;
package/scss/style/elevation.scss CHANGED
@@ -1,10 +1,11 @@
1
1
  // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  /// Elevations:
4
+ $iui-elevation-color: hsla(200, 12%, 0%, 0.25);
4
5
 
5
6
  $iui-elevation-0: 0;
6
- $iui-elevation-2: 0 1px 5px hsla(200, 12%, 0%, 0.25);
7
- $iui-elevation-4: 0 1px 10px hsla(200, 12%, 0%, 0.25);
8
- $iui-elevation-8: 0 3px 14px hsla(200, 12%, 0%, 0.25);
9
- $iui-elevation-16: 0 6px 30px hsla(200, 12%, 0%, 0.25);
10
- $iui-elevation-24: 0 9px 46px hsla(200, 12%, 0%, 0.25);
7
+ $iui-elevation-2: 0 1px 5px $iui-elevation-color;
8
+ $iui-elevation-4: 0 1px 10px $iui-elevation-color;
9
+ $iui-elevation-8: 0 3px 14px $iui-elevation-color;
10
+ $iui-elevation-16: 0 6px 30px $iui-elevation-color;
11
+ $iui-elevation-24: 0 9px 46px $iui-elevation-color;
package/scss/table/classes.scss CHANGED
@@ -14,6 +14,10 @@
14
14
  }
15
15
  }
16
16
 
17
+ .iui-table-header-wrapper {
18
+ @include iui-table-header-wrapper;
19
+ }
20
+
17
21
  .iui-table-header {
18
22
  @include iui-table-header;
19
23
  }
@@ -30,6 +34,14 @@
30
34
  @include iui-table-cell;
31
35
  }
32
36
 
37
+ .iui-cell-shadow-left {
38
+ @include iui-table-cell-shadow-left;
39
+ }
40
+
41
+ .iui-cell-shadow-right {
42
+ @include iui-table-cell-shadow-right;
43
+ }
44
+
33
45
  .iui-paginator {
34
46
  @include iui-paginator;
35
47
  }
package/scss/table/condensed.scss CHANGED
@@ -5,8 +5,11 @@
5
5
 
6
6
  @mixin iui-table-condensed {
7
7
  .iui-table-header .iui-cell,
8
- .iui-row .iui-cell,
9
8
  .iui-paginator {
10
9
  min-height: $iui-baseline * 4;
11
10
  }
11
+
12
+ .iui-row .iui-cell {
13
+ min-height: $iui-baseline * 4 + 2px;
14
+ }
12
15
  }
package/scss/table/extra-condensed.scss CHANGED
@@ -5,8 +5,15 @@
5
5
 
6
6
  @mixin iui-table-extra-condensed {
7
7
  .iui-table-header .iui-cell,
8
- .iui-row .iui-cell,
9
8
  .iui-paginator {
10
9
  min-height: $iui-baseline * 3;
11
10
  }
11
+
12
+ .iui-row .iui-cell {
13
+ min-height: $iui-baseline * 3 + 2px;
14
+ }
15
+
16
+ .iui-table-header .iui-cell {
17
+ padding-block: $iui-baseline * 0.25;
18
+ }
12
19
  }
package/scss/table/table.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  @include iui-reset;
9
9
  display: flex;
10
10
  flex-direction: column;
11
+ isolation: isolate;
11
12
 
12
13
  * {
13
14
  box-sizing: border-box;
@@ -16,29 +17,39 @@
16
17
  @include iui-table-cell-icon;
17
18
  }
18
19
 
19
- @mixin iui-table-header {
20
- user-select: none;
20
+ @mixin iui-table-header-wrapper {
21
21
  overflow: hidden;
22
22
  // Fix for Firefox columns misalignment
23
23
  @supports not (overflow: overlay) {
24
24
  overflow-y: scroll;
25
25
  }
26
+ display: flex;
27
+ flex-shrink: 0;
28
+ }
29
+
30
+ @mixin iui-table-header {
31
+ display: flex;
32
+ user-select: none;
33
+ min-width: 100%;
26
34
  flex-shrink: 0;
27
- @include themed {
28
- background-color: t(iui-color-background-3);
29
- }
30
35
 
31
36
  .iui-row {
32
37
  display: flex;
33
38
  flex-grow: 1;
34
- border-left: solid 1px transparent;
35
- border-right: solid 1px transparent;
39
+ min-width: 100%;
40
+ }
41
+
42
+ .iui-cell {
43
+ min-height: $iui-baseline * 5;
44
+ @include themed {
45
+ background-color: t(iui-color-background-3);
46
+ }
36
47
  }
37
48
 
38
49
  .iui-cell:not(.iui-slot) {
39
50
  @include iui-focus;
40
- flex-wrap: wrap;
41
51
  column-gap: $iui-xs;
52
+ padding-block: $iui-baseline * 0.5;
42
53
 
43
54
  &.iui-actionable {
44
55
  cursor: pointer;
@@ -48,12 +59,8 @@
48
59
  cursor: grabbing;
49
60
  }
50
61
 
51
- .iui-filter-button {
52
- margin-right: $iui-s;
53
-
54
- &:not(.iui-active) {
55
- visibility: hidden;
56
- }
62
+ .iui-filter-button:not(.iui-active) {
63
+ visibility: hidden;
57
64
  }
58
65
 
59
66
  > .iui-resizer {
@@ -160,6 +167,17 @@
160
167
  display: flex;
161
168
  flex-grow: 1;
162
169
  align-items: center;
170
+ flex-wrap: wrap;
171
+ justify-content: flex-end;
172
+ margin-right: $iui-sm;
173
+
174
+ .iui-cell-end-icon {
175
+ // Hardcoded size of the borderless button so that the icons are centered
176
+ width: 28px;
177
+ height: 28px;
178
+ margin-right: initial;
179
+ margin-left: auto;
180
+ }
163
181
  }
164
182
 
165
183
  @mixin iui-table-body {
@@ -184,12 +202,21 @@
184
202
  .iui-row {
185
203
  min-width: 100%;
186
204
  display: flex;
187
- border: solid 1px transparent;
188
- @media (prefers-reduced-motion: no-preference) {
189
- transition: border $iui-speed-fast ease-out;
190
- }
191
- @include themed {
192
- border-bottom-color: t(iui-color-background-border);
205
+
206
+ .iui-cell {
207
+ border-top: solid 1px transparent;
208
+ border-bottom: solid 1px transparent;
209
+ @media (prefers-reduced-motion: no-preference) {
210
+ transition: border $iui-speed-fast ease-out;
211
+ }
212
+
213
+ @include themed {
214
+ border-bottom-color: t(iui-color-background-border);
215
+ }
216
+
217
+ @include themed {
218
+ background-color: t(iui-color-background-1);
219
+ }
193
220
  }
194
221
 
195
222
  > .iui-slot > .iui-more-options {
@@ -197,9 +224,13 @@
197
224
  }
198
225
 
199
226
  &:hover:not(.iui-disabled) {
200
- &:not(.iui-expanded-content) {
227
+ .iui-cell {
201
228
  @include themed {
202
- background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
229
+ background: linear-gradient(
230
+ rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
231
+ rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
232
+ ),
233
+ linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
203
234
  }
204
235
  }
205
236
 
@@ -220,9 +251,12 @@
220
251
 
221
252
  &.iui-row-expanded {
222
253
  overflow: hidden;
223
- @include themed {
224
- border-left-color: t(iui-color-background-4);
225
- border-right-color: t(iui-color-background-4);
254
+
255
+ .iui-cell {
256
+ @include themed {
257
+ border-left-color: t(iui-color-background-4);
258
+ border-right-color: t(iui-color-background-4);
259
+ }
226
260
  border-bottom-color: transparent;
227
261
  }
228
262
 
@@ -240,36 +274,47 @@
240
274
 
241
275
  &.iui-expanded-content {
242
276
  overflow: hidden;
277
+ border-left: 1px solid transparent;
278
+ border-right: 1px solid transparent;
279
+ @include themed {
280
+ border-bottom: 1px solid t(iui-color-background-border);
281
+ }
243
282
  @include iui-transition-group;
244
283
  }
245
284
 
246
285
  // #region Selection
247
- &:not(.iui-selected) + .iui-selected,
248
- &.iui-selected:first-child {
286
+ &:not(.iui-selected) + .iui-selected .iui-cell,
287
+ &.iui-selected:first-child .iui-cell {
249
288
  border-bottom-color: transparent;
250
289
  }
251
290
 
252
291
  &.iui-selected {
253
- @include themed {
254
- border-color: t(iui-color-foreground-primary);
255
- background: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
292
+ .iui-cell {
293
+ @include themed {
294
+ border-color: t(iui-color-foreground-primary);
295
+ background: linear-gradient(
296
+ rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
297
+ rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
298
+ ),
299
+ linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
300
+ }
256
301
  }
257
302
 
258
- + .iui-selected {
303
+ + .iui-selected .iui-cell {
259
304
  border-bottom-color: transparent;
260
305
  @include themed {
261
306
  border-top-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
262
307
  }
263
308
  }
264
309
 
265
- &:last-child {
310
+ &:last-child .iui-cell {
266
311
  @include themed {
267
312
  border-bottom-color: t(iui-color-foreground-primary);
268
313
  }
269
314
  }
270
315
 
271
- + :not(.iui-selected),
272
- + .iui-expanded-content + :not(.iui-selected) {
316
+ + :not(.iui-selected) .iui-cell,
317
+ + .iui-expanded-content + .iui-row:not(.iui-selected) .iui-cell {
273
318
  @include themed {
274
319
  border-top-color: t(iui-color-foreground-primary);
275
320
  }
@@ -357,12 +402,20 @@
357
402
  display: flex;
358
403
  flex-grow: 1;
359
404
  min-width: $iui-xxl;
360
- min-height: $iui-baseline * 5;
405
+ min-height: $iui-baseline * 5 + 2px; // +2px for border
361
406
  padding-left: $iui-m;
362
407
  flex-basis: $iui-xxl;
363
408
  position: relative;
364
409
  word-break: break-word;
365
410
 
411
+ &:first-of-type {
412
+ border-left: solid 1px transparent;
413
+ }
414
+
415
+ &:last-of-type {
416
+ border-right: solid 1px transparent;
417
+ }
418
+
366
419
  &.iui-slot {
367
420
  width: $iui-l * 2;
368
421
  padding: 0;
@@ -374,6 +427,13 @@
374
427
  flex-basis: $iui-l * 2;
375
428
  }
376
429
 
430
+ &.iui-cell-sticky {
431
+ position: sticky;
432
+ z-index: 1;
433
+ left: var(--iui-table-sticky-left, initial);
434
+ right: var(--iui-table-sticky-right, initial);
435
+ }
436
+
377
437
  &:not(.iui-slot):last-child {
378
438
  padding-right: $iui-m;
379
439
  }
@@ -409,7 +469,7 @@
409
469
  }
410
470
 
411
471
  @mixin iui-table-row-status($status) {
412
- &,
472
+ .iui-cell:first-of-type,
413
473
  + .iui-expanded-content {
414
474
  @include themed {
415
475
  box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-#{$status});
@@ -427,7 +487,11 @@
427
487
 
428
488
  @mixin iui-table-cell-status($status) {
429
489
  @include themed {
430
- background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-6));
490
+ background: linear-gradient(
491
+ rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-6)),
492
+ rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-6))
493
+ ),
494
+ linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
431
495
  }
432
496
 
433
497
  @include iui-text-selection($status);
@@ -459,3 +523,32 @@
459
523
  margin-left: auto;
460
524
  }
461
525
  }
526
+
527
+ @mixin iui-table-cell-shadow-base {
528
+ position: absolute;
529
+ top: -1px;
530
+ bottom: -1px;
531
+ width: $iui-l;
532
+ pointer-events: none;
533
+
534
+ // Prevents scrollbar from appearing because `top: -1px` and `bottom: -1px`
535
+ // makes content to overflow
536
+ @at-root .iui-table-header & {
537
+ top: 0;
538
+ bottom: 0;
539
+ }
540
+ }
541
+
542
+ @mixin iui-table-cell-shadow-left {
543
+ @include iui-table-cell-shadow-base;
544
+ left: 0;
545
+ transform: translate(-100%);
546
+ box-shadow: inset -10px 0 5px -10px $iui-elevation-color;
547
+ }
548
+
549
+ @mixin iui-table-cell-shadow-right {
550
+ @include iui-table-cell-shadow-base;
551
+ right: 0;
552
+ transform: translate(100%);
553
+ box-shadow: inset 10px 0 5px -10px $iui-elevation-color;
554
+ }