@itwin/itwinui-css 0.40.0 → 0.41.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 (20) hide show
  1. package/css/all.css +213 -53
  2. package/css/breadcrumbs.css +11 -6
  3. package/css/button.css +72 -36
  4. package/css/table.css +9 -1
  5. package/css/tile.css +14 -9
  6. package/css/tree.css +107 -0
  7. package/css/user-icon.css +3 -1
  8. package/package.json +1 -1
  9. package/scss/button/borderless.scss +13 -6
  10. package/scss/button/cta.scss +15 -8
  11. package/scss/button/default.scss +16 -9
  12. package/scss/button/high-visibility.scss +15 -8
  13. package/scss/classes.scss +1 -0
  14. package/scss/index.scss +1 -0
  15. package/scss/table/paginator.scss +9 -1
  16. package/scss/table/table.scss +4 -0
  17. package/scss/tree/classes.scss +15 -0
  18. package/scss/tree/index.scss +3 -0
  19. package/scss/tree/tree.scss +137 -0
  20. package/scss/user-icon/user-icon.scss +3 -0
package/css/all.css CHANGED
@@ -601,17 +601,22 @@ html.iui-theme-dark{
601
601
  .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
602
602
  margin-left:3px;
603
603
  margin-right:3px; }
604
- .iui-breadcrumbs-item .iui-button:hover, .iui-breadcrumbs-item .iui-button:focus{
604
+ .iui-breadcrumbs-item .iui-button:focus{
605
605
  background-color:rgba(0, 0, 0, 0.1);
606
606
  border-color:transparent;
607
607
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
608
608
  border-color:transparent; }
609
- .iui-breadcrumbs-item .iui-button:focus:not(:focus-visible){
609
+ .iui-breadcrumbs-item .iui-button:focus:where(:not(:focus-visible)){
610
+ border-color:transparent;
611
+ background-color:transparent; }
612
+ .iui-breadcrumbs-item .iui-button:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
613
+ margin-left:3px;
614
+ margin-right:3px; }
615
+ .iui-breadcrumbs-item .iui-button:hover{
616
+ background-color:rgba(0, 0, 0, 0.1);
610
617
  border-color:transparent;
611
- background-color:transparent; }
612
- .iui-breadcrumbs-item .iui-button:focus:not(:focus-visible) > .iui-button-icon:only-child{
613
- margin-left:3px;
614
- margin-right:3px; }
618
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
619
+ border-color:transparent; }
615
620
  .iui-breadcrumbs-item .iui-button.iui-active{
616
621
  background-color:rgba(0, 139, 225, 0.1);
617
622
  color:#008BE1;
@@ -733,7 +738,27 @@ html.iui-theme-dark{
733
738
  background-color:var(--iui-color-background-1);
734
739
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
735
740
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
736
- .iui-button.iui-default:hover, .iui-button.iui-default:active, .iui-button.iui-default:focus{
741
+ .iui-button.iui-default:focus{
742
+ background-color:#f2f2f2;
743
+ border-color:black;
744
+ color:black;
745
+ background-color:var(--iui-color-background-1-overlay);
746
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
747
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
748
+ .iui-button.iui-default:focus .iui-notification-primary::before,
749
+ .iui-button.iui-default:focus .iui-notification-positive::before,
750
+ .iui-button.iui-default:focus .iui-notification-warning::before,
751
+ .iui-button.iui-default:focus .iui-notification-negative::before{
752
+ border-color:#f2f2f2;
753
+ border-color:var(--iui-color-background-1-overlay); }
754
+ .iui-button.iui-default:focus:where(:not(:focus-visible)){
755
+ background-color:#FFF;
756
+ border-color:rgba(0, 0, 0, 0.4);
757
+ color:rgba(0, 0, 0, 0.8);
758
+ background-color:var(--iui-color-background-1);
759
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
760
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
761
+ .iui-button.iui-default:hover, .iui-button.iui-default:active{
737
762
  background-color:#f2f2f2;
738
763
  border-color:black;
739
764
  color:black;
@@ -746,19 +771,9 @@ html.iui-theme-dark{
746
771
  .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
747
772
  .iui-button.iui-default:active .iui-notification-positive::before,
748
773
  .iui-button.iui-default:active .iui-notification-warning::before,
749
- .iui-button.iui-default:active .iui-notification-negative::before, .iui-button.iui-default:focus .iui-notification-primary::before,
750
- .iui-button.iui-default:focus .iui-notification-positive::before,
751
- .iui-button.iui-default:focus .iui-notification-warning::before,
752
- .iui-button.iui-default:focus .iui-notification-negative::before{
774
+ .iui-button.iui-default:active .iui-notification-negative::before{
753
775
  border-color:#f2f2f2;
754
776
  border-color:var(--iui-color-background-1-overlay); }
755
- .iui-button.iui-default:focus:not(:focus-visible){
756
- background-color:#FFF;
757
- border-color:rgba(0, 0, 0, 0.4);
758
- color:rgba(0, 0, 0, 0.8);
759
- background-color:var(--iui-color-background-1);
760
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
761
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
762
777
  .iui-button.iui-default.iui-dropdown{
763
778
  padding-right:8px; }
764
779
  .iui-button.iui-default.iui-dropdown.iui-small{
@@ -785,19 +800,26 @@ html.iui-theme-dark{
785
800
  background-color:var(--iui-color-background-primary);
786
801
  border-color:var(--iui-color-background-primary);
787
802
  color:var(--iui-color-foreground-accessory); }
788
- .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active, .iui-button.iui-high-visibility:focus{
803
+ .iui-button.iui-high-visibility:focus{
789
804
  background-color:#006bae;
790
805
  border-color:#006bae;
791
806
  color:#FFF;
792
807
  background-color:var(--iui-color-background-primary-overlay);
793
808
  border-color:var(--iui-color-background-primary-overlay);
794
809
  color:var(--iui-color-foreground-accessory); }
795
- .iui-button.iui-high-visibility:focus:not(:focus-visible){
796
- background-color:#008BE1;
797
- border-color:#008BE1;
810
+ .iui-button.iui-high-visibility:focus:where(:not(:focus-visible)){
811
+ background-color:#008BE1;
812
+ border-color:#008BE1;
813
+ color:#FFF;
814
+ background-color:var(--iui-color-background-primary);
815
+ border-color:var(--iui-color-background-primary);
816
+ color:var(--iui-color-foreground-accessory); }
817
+ .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
818
+ background-color:#006bae;
819
+ border-color:#006bae;
798
820
  color:#FFF;
799
- background-color:var(--iui-color-background-primary);
800
- border-color:var(--iui-color-background-primary);
821
+ background-color:var(--iui-color-background-primary-overlay);
822
+ border-color:var(--iui-color-background-primary-overlay);
801
823
  color:var(--iui-color-foreground-accessory); }
802
824
  .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
803
825
  cursor:not-allowed;
@@ -814,19 +836,26 @@ html.iui-theme-dark{
814
836
  background-color:var(--iui-color-background-positive);
815
837
  border-color:var(--iui-color-background-positive);
816
838
  color:var(--iui-color-foreground-accessory); }
817
- .iui-button.iui-cta:hover, .iui-button.iui-cta:active, .iui-button.iui-cta:focus{
839
+ .iui-button.iui-cta:focus{
818
840
  background-color:#3c7613;
819
841
  border-color:#3c7613;
820
842
  color:#FFF;
821
843
  background-color:var(--iui-color-background-positive-overlay);
822
844
  border-color:var(--iui-color-background-positive-overlay);
823
845
  color:var(--iui-color-foreground-accessory); }
824
- .iui-button.iui-cta:focus:not(:focus-visible){
825
- background-color:#53A21A;
826
- border-color:#53A21A;
846
+ .iui-button.iui-cta:focus:where(:not(:focus-visible)){
847
+ background-color:#53A21A;
848
+ border-color:#53A21A;
849
+ color:#FFF;
850
+ background-color:var(--iui-color-background-positive);
851
+ border-color:var(--iui-color-background-positive);
852
+ color:var(--iui-color-foreground-accessory); }
853
+ .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
854
+ background-color:#3c7613;
855
+ border-color:#3c7613;
827
856
  color:#FFF;
828
- background-color:var(--iui-color-background-positive);
829
- border-color:var(--iui-color-background-positive);
857
+ background-color:var(--iui-color-background-positive-overlay);
858
+ border-color:var(--iui-color-background-positive-overlay);
830
859
  color:var(--iui-color-foreground-accessory); }
831
860
  .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
832
861
  cursor:not-allowed;
@@ -848,19 +877,26 @@ html.iui-theme-dark{
848
877
  position:fixed;
849
878
  bottom:11px;
850
879
  right:16px; }
851
- .iui-button.iui-idea:hover, .iui-button.iui-idea:active, .iui-button.iui-idea:focus{
880
+ .iui-button.iui-idea:focus{
852
881
  background-color:#006bae;
853
882
  border-color:#006bae;
854
883
  color:#FFF;
855
884
  background-color:var(--iui-color-background-primary-overlay);
856
885
  border-color:var(--iui-color-background-primary-overlay);
857
886
  color:var(--iui-color-foreground-accessory); }
858
- .iui-button.iui-idea:focus:not(:focus-visible){
859
- background-color:#008BE1;
860
- border-color:#008BE1;
887
+ .iui-button.iui-idea:focus:where(:not(:focus-visible)){
888
+ background-color:#008BE1;
889
+ border-color:#008BE1;
890
+ color:#FFF;
891
+ background-color:var(--iui-color-background-primary);
892
+ border-color:var(--iui-color-background-primary);
893
+ color:var(--iui-color-foreground-accessory); }
894
+ .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
895
+ background-color:#006bae;
896
+ border-color:#006bae;
861
897
  color:#FFF;
862
- background-color:var(--iui-color-background-primary);
863
- border-color:var(--iui-color-background-primary);
898
+ background-color:var(--iui-color-background-primary-overlay);
899
+ border-color:var(--iui-color-background-primary-overlay);
864
900
  color:var(--iui-color-foreground-accessory); }
865
901
  .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
866
902
  cursor:not-allowed;
@@ -879,17 +915,22 @@ html.iui-theme-dark{
879
915
  .iui-button.iui-borderless > .iui-button-icon:only-child{
880
916
  margin-left:3px;
881
917
  margin-right:3px; }
882
- .iui-button.iui-borderless:hover, .iui-button.iui-borderless:focus{
918
+ .iui-button.iui-borderless:focus{
883
919
  background-color:rgba(0, 0, 0, 0.1);
884
920
  border-color:transparent;
885
921
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
886
922
  border-color:transparent; }
887
- .iui-button.iui-borderless:focus:not(:focus-visible){
923
+ .iui-button.iui-borderless:focus:where(:not(:focus-visible)){
924
+ border-color:transparent;
925
+ background-color:transparent; }
926
+ .iui-button.iui-borderless:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
927
+ margin-left:3px;
928
+ margin-right:3px; }
929
+ .iui-button.iui-borderless:hover{
930
+ background-color:rgba(0, 0, 0, 0.1);
888
931
  border-color:transparent;
889
- background-color:transparent; }
890
- .iui-button.iui-borderless:focus:not(:focus-visible) > .iui-button-icon:only-child{
891
- margin-left:3px;
892
- margin-right:3px; }
932
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
933
+ border-color:transparent; }
893
934
  .iui-button.iui-borderless.iui-active{
894
935
  background-color:rgba(0, 139, 225, 0.1);
895
936
  color:#008BE1;
@@ -5057,6 +5098,8 @@ html.iui-theme-dark{
5057
5098
  justify-content:center;
5058
5099
  align-items:center;
5059
5100
  flex-basis:48px; }
5101
+ .iui-cell:not(.iui-slot):last-child{
5102
+ padding-right:16px; }
5060
5103
  .iui-cell.iui-positive{
5061
5104
  background-color:rgba(83, 162, 26, 0.1);
5062
5105
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)); }
@@ -5099,7 +5142,7 @@ html.iui-theme-dark{
5099
5142
  border:none;
5100
5143
  vertical-align:baseline;
5101
5144
  display:flex;
5102
- justify-content:space-around;
5145
+ justify-content:space-between;
5103
5146
  align-items:center;
5104
5147
  min-height:55px;
5105
5148
  padding:0 16px;
@@ -5143,6 +5186,12 @@ html.iui-theme-dark{
5143
5186
  bottom:2px; }
5144
5187
  .iui-paginator > .iui-right{
5145
5188
  justify-content:flex-end; }
5189
+ .iui-paginator-page-size-label{
5190
+ color:rgba(0, 0, 0, 0.4);
5191
+ color:var(--iui-text-color-muted);
5192
+ white-space:nowrap;
5193
+ overflow:hidden;
5194
+ text-overflow:ellipsis; }
5146
5195
 
5147
5196
  .iui-column-filter{
5148
5197
  margin:0;
@@ -5670,21 +5719,26 @@ a.iui-tag{
5670
5719
  .iui-tile .iui-thumbnail > .iui-quick-action > .iui-button-icon:only-child{
5671
5720
  margin-left:3px;
5672
5721
  margin-right:3px; }
5673
- .iui-tile .iui-thumbnail > .iui-type-indicator:hover, .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
5674
- .iui-tile .iui-thumbnail > .iui-quick-action:hover,
5722
+ .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
5675
5723
  .iui-tile .iui-thumbnail > .iui-quick-action:focus{
5676
5724
  background-color:rgba(0, 0, 0, 0.1);
5677
5725
  border-color:transparent;
5678
5726
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
5679
5727
  border-color:transparent; }
5680
- .iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible),
5681
- .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible){
5728
+ .iui-tile .iui-thumbnail > .iui-type-indicator:focus:where(:not(:focus-visible)),
5729
+ .iui-tile .iui-thumbnail > .iui-quick-action:focus:where(:not(:focus-visible)){
5730
+ border-color:transparent;
5731
+ background-color:transparent; }
5732
+ .iui-tile .iui-thumbnail > .iui-type-indicator:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child,
5733
+ .iui-tile .iui-thumbnail > .iui-quick-action:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
5734
+ margin-left:3px;
5735
+ margin-right:3px; }
5736
+ .iui-tile .iui-thumbnail > .iui-type-indicator:hover,
5737
+ .iui-tile .iui-thumbnail > .iui-quick-action:hover{
5738
+ background-color:rgba(0, 0, 0, 0.1);
5682
5739
  border-color:transparent;
5683
- background-color:transparent; }
5684
- .iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible) > .iui-button-icon:only-child,
5685
- .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible) > .iui-button-icon:only-child{
5686
- margin-left:3px;
5687
- margin-right:3px; }
5740
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
5741
+ border-color:transparent; }
5688
5742
  .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active,
5689
5743
  .iui-tile .iui-thumbnail > .iui-quick-action.iui-active{
5690
5744
  background-color:rgba(0, 139, 225, 0.1);
@@ -6486,6 +6540,110 @@ a.iui-tag{
6486
6540
  background-color:rgba(0, 0, 0, var(--iui-opacity-3));
6487
6541
  color:var(--iui-color-foreground-accessory); }
6488
6542
 
6543
+ .iui-tree{
6544
+ margin:0;
6545
+ padding:0;
6546
+ border:none;
6547
+ vertical-align:baseline;
6548
+ list-style:none; }
6549
+
6550
+ .iui-sub-tree{
6551
+ margin:0;
6552
+ padding:0;
6553
+ border:none;
6554
+ vertical-align:baseline;
6555
+ list-style:none; }
6556
+
6557
+ .iui-tree-node{
6558
+ display:flex;
6559
+ cursor:pointer;
6560
+ padding:0 8px; }
6561
+ .iui-tree-node-checkbox{
6562
+ margin-right:8px; }
6563
+ .iui-tree-node-content{
6564
+ display:flex;
6565
+ align-items:center;
6566
+ box-sizing:border-box;
6567
+ min-height:33px;
6568
+ margin-left:calc(28px * (var(--level, 0)));
6569
+ overflow:hidden;
6570
+ padding-left:2px; }
6571
+ .iui-tree-node-content-icon{
6572
+ fill:rgba(0, 0, 0, 0.4);
6573
+ fill:var(--iui-icons-color);
6574
+ display:inline-flex;
6575
+ width:16px;
6576
+ height:16px;
6577
+ padding:0 6px;
6578
+ flex-shrink:0; }
6579
+ .iui-tree-node-content-icon.iui-informational{
6580
+ fill:#008BE1;
6581
+ fill:var(--iui-icons-color-primary); }
6582
+ .iui-tree-node-content-icon.iui-positive{
6583
+ fill:#53A21A;
6584
+ fill:var(--iui-icons-color-positive); }
6585
+ .iui-tree-node-content-icon.iui-warning{
6586
+ fill:#F18B12;
6587
+ fill:var(--iui-icons-color-warning); }
6588
+ .iui-tree-node-content-icon.iui-negative{
6589
+ fill:#D30A0A;
6590
+ fill:var(--iui-icons-color-negative); }
6591
+ .iui-tree-node-content-icon:first-child{
6592
+ margin-left:28px; }
6593
+ @media (prefers-reduced-motion: no-preference){
6594
+ .iui-tree-node-content-expander-icon{
6595
+ transition:transform 0.2s ease-out; } }
6596
+ .iui-tree-node-content-expander-icon-expanded{
6597
+ transform:rotate(90deg); }
6598
+ .iui-tree-node-content-label{
6599
+ min-width:0;
6600
+ padding-left:6px; }
6601
+ .iui-tree-node-content-label:first-child{
6602
+ margin-left:28px; }
6603
+ .iui-tree-node-content-title, .iui-tree-node-content-caption{
6604
+ white-space:nowrap;
6605
+ overflow:hidden;
6606
+ text-overflow:ellipsis; }
6607
+ .iui-tree-node-content-title{
6608
+ font-size:14px; }
6609
+ .iui-tree-node-content-caption{
6610
+ font-size:12px;
6611
+ color:rgba(0, 0, 0, 0.4);
6612
+ color:var(--iui-text-color-muted); }
6613
+ .iui-tree-node:focus{
6614
+ outline:thin solid rgba(0, 139, 225, 0.4);
6615
+ outline-offset:-1px;
6616
+ outline:thin solid rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
6617
+ outline-offset:-1px; }
6618
+ .iui-tree-node:focus:not(:focus-visible){
6619
+ outline-offset:-2px; }
6620
+ .iui-tree-node:hover{
6621
+ background-color:rgba(0, 139, 225, 0.1);
6622
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
6623
+ .iui-tree-node:hover .iui-tree-node-content-caption{
6624
+ color:#000;
6625
+ color:var(--iui-color-foreground-body);
6626
+ transition:color 0.2s ease; }
6627
+ .iui-tree-node.iui-active{
6628
+ background-color:rgba(0, 139, 225, 0.2);
6629
+ outline:thin solid var(--iui-color-foreground-primary);
6630
+ outline-offset:-1px;
6631
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
6632
+ outline:thin solid var(--iui-color-foreground-primary);
6633
+ outline-offset:-1px; }
6634
+ .iui-tree-node.iui-active:focus{
6635
+ outline-width:2px;
6636
+ outline-offset:-2px; }
6637
+ .iui-tree-node.iui-disabled{
6638
+ cursor:not-allowed;
6639
+ outline:none;
6640
+ background-color:transparent;
6641
+ color:rgba(0, 0, 0, 0.2);
6642
+ color:var(--iui-text-color-placeholder); }
6643
+ .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
6644
+ color:rgba(0, 0, 0, 0.2);
6645
+ color:var(--iui-text-color-placeholder); }
6646
+
6489
6647
  .iui-user-icon{
6490
6648
  margin:0;
6491
6649
  padding:0;
@@ -6549,7 +6707,9 @@ a.iui-tag{
6549
6707
  width:100%;
6550
6708
  height:100%;
6551
6709
  border-width:0;
6552
- border-radius:50%; }
6710
+ border-radius:50%;
6711
+ background-color:#FFF;
6712
+ background-color:var(--iui-color-background-1); }
6553
6713
  .iui-user-icon > .iui-status{
6554
6714
  display:flex;
6555
6715
  align-items:center;
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;
package/css/table.css CHANGED
@@ -304,6 +304,8 @@
304
304
  justify-content:center;
305
305
  align-items:center;
306
306
  flex-basis:48px; }
307
+ .iui-cell:not(.iui-slot):last-child{
308
+ padding-right:16px; }
307
309
  .iui-cell.iui-positive{
308
310
  background-color:rgba(83, 162, 26, 0.1);
309
311
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)); }
@@ -346,7 +348,7 @@
346
348
  border:none;
347
349
  vertical-align:baseline;
348
350
  display:flex;
349
- justify-content:space-around;
351
+ justify-content:space-between;
350
352
  align-items:center;
351
353
  min-height:55px;
352
354
  padding:0 16px;
@@ -390,6 +392,12 @@
390
392
  bottom:2px; }
391
393
  .iui-paginator > .iui-right{
392
394
  justify-content:flex-end; }
395
+ .iui-paginator-page-size-label{
396
+ color:rgba(0, 0, 0, 0.4);
397
+ color:var(--iui-text-color-muted);
398
+ white-space:nowrap;
399
+ overflow:hidden;
400
+ text-overflow:ellipsis; }
393
401
 
394
402
  .iui-column-filter{
395
403
  margin:0;
package/css/tile.css CHANGED
@@ -47,21 +47,26 @@
47
47
  .iui-tile .iui-thumbnail > .iui-quick-action > .iui-button-icon:only-child{
48
48
  margin-left:3px;
49
49
  margin-right:3px; }
50
- .iui-tile .iui-thumbnail > .iui-type-indicator:hover, .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
51
- .iui-tile .iui-thumbnail > .iui-quick-action:hover,
50
+ .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
52
51
  .iui-tile .iui-thumbnail > .iui-quick-action:focus{
53
52
  background-color:rgba(0, 0, 0, 0.1);
54
53
  border-color:transparent;
55
54
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
56
55
  border-color:transparent; }
57
- .iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible),
58
- .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible){
56
+ .iui-tile .iui-thumbnail > .iui-type-indicator:focus:where(:not(:focus-visible)),
57
+ .iui-tile .iui-thumbnail > .iui-quick-action:focus:where(:not(:focus-visible)){
58
+ border-color:transparent;
59
+ background-color:transparent; }
60
+ .iui-tile .iui-thumbnail > .iui-type-indicator:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child,
61
+ .iui-tile .iui-thumbnail > .iui-quick-action:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
62
+ margin-left:3px;
63
+ margin-right:3px; }
64
+ .iui-tile .iui-thumbnail > .iui-type-indicator:hover,
65
+ .iui-tile .iui-thumbnail > .iui-quick-action:hover{
66
+ background-color:rgba(0, 0, 0, 0.1);
59
67
  border-color:transparent;
60
- background-color:transparent; }
61
- .iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible) > .iui-button-icon:only-child,
62
- .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible) > .iui-button-icon:only-child{
63
- margin-left:3px;
64
- margin-right:3px; }
68
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
69
+ border-color:transparent; }
65
70
  .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active,
66
71
  .iui-tile .iui-thumbnail > .iui-quick-action.iui-active{
67
72
  background-color:rgba(0, 139, 225, 0.1);
package/css/tree.css ADDED
@@ -0,0 +1,107 @@
1
+ /*---------------------------------------------------------------------------------------------
2
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
+ * See LICENSE.md in the project root for license terms and full copyright notice.
4
+ *--------------------------------------------------------------------------------------------*/
5
+ .iui-tree{
6
+ margin:0;
7
+ padding:0;
8
+ border:none;
9
+ vertical-align:baseline;
10
+ list-style:none; }
11
+
12
+ .iui-sub-tree{
13
+ margin:0;
14
+ padding:0;
15
+ border:none;
16
+ vertical-align:baseline;
17
+ list-style:none; }
18
+
19
+ .iui-tree-node{
20
+ display:flex;
21
+ cursor:pointer;
22
+ padding:0 8px; }
23
+ .iui-tree-node-checkbox{
24
+ margin-right:8px; }
25
+ .iui-tree-node-content{
26
+ display:flex;
27
+ align-items:center;
28
+ box-sizing:border-box;
29
+ min-height:33px;
30
+ margin-left:calc(28px * (var(--level, 0)));
31
+ overflow:hidden;
32
+ padding-left:2px; }
33
+ .iui-tree-node-content-icon{
34
+ fill:rgba(0, 0, 0, 0.4);
35
+ fill:var(--iui-icons-color);
36
+ display:inline-flex;
37
+ width:16px;
38
+ height:16px;
39
+ padding:0 6px;
40
+ flex-shrink:0; }
41
+ .iui-tree-node-content-icon.iui-informational{
42
+ fill:#008BE1;
43
+ fill:var(--iui-icons-color-primary); }
44
+ .iui-tree-node-content-icon.iui-positive{
45
+ fill:#53A21A;
46
+ fill:var(--iui-icons-color-positive); }
47
+ .iui-tree-node-content-icon.iui-warning{
48
+ fill:#F18B12;
49
+ fill:var(--iui-icons-color-warning); }
50
+ .iui-tree-node-content-icon.iui-negative{
51
+ fill:#D30A0A;
52
+ fill:var(--iui-icons-color-negative); }
53
+ .iui-tree-node-content-icon:first-child{
54
+ margin-left:28px; }
55
+ @media (prefers-reduced-motion: no-preference){
56
+ .iui-tree-node-content-expander-icon{
57
+ transition:transform 0.2s ease-out; } }
58
+ .iui-tree-node-content-expander-icon-expanded{
59
+ transform:rotate(90deg); }
60
+ .iui-tree-node-content-label{
61
+ min-width:0;
62
+ padding-left:6px; }
63
+ .iui-tree-node-content-label:first-child{
64
+ margin-left:28px; }
65
+ .iui-tree-node-content-title, .iui-tree-node-content-caption{
66
+ white-space:nowrap;
67
+ overflow:hidden;
68
+ text-overflow:ellipsis; }
69
+ .iui-tree-node-content-title{
70
+ font-size:14px; }
71
+ .iui-tree-node-content-caption{
72
+ font-size:12px;
73
+ color:rgba(0, 0, 0, 0.4);
74
+ color:var(--iui-text-color-muted); }
75
+ .iui-tree-node:focus{
76
+ outline:thin solid rgba(0, 139, 225, 0.4);
77
+ outline-offset:-1px;
78
+ outline:thin solid rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
79
+ outline-offset:-1px; }
80
+ .iui-tree-node:focus:not(:focus-visible){
81
+ outline-offset:-2px; }
82
+ .iui-tree-node:hover{
83
+ background-color:rgba(0, 139, 225, 0.1);
84
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
85
+ .iui-tree-node:hover .iui-tree-node-content-caption{
86
+ color:#000;
87
+ color:var(--iui-color-foreground-body);
88
+ transition:color 0.2s ease; }
89
+ .iui-tree-node.iui-active{
90
+ background-color:rgba(0, 139, 225, 0.2);
91
+ outline:thin solid var(--iui-color-foreground-primary);
92
+ outline-offset:-1px;
93
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
94
+ outline:thin solid var(--iui-color-foreground-primary);
95
+ outline-offset:-1px; }
96
+ .iui-tree-node.iui-active:focus{
97
+ outline-width:2px;
98
+ outline-offset:-2px; }
99
+ .iui-tree-node.iui-disabled{
100
+ cursor:not-allowed;
101
+ outline:none;
102
+ background-color:transparent;
103
+ color:rgba(0, 0, 0, 0.2);
104
+ color:var(--iui-text-color-placeholder); }
105
+ .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
106
+ color:rgba(0, 0, 0, 0.2);
107
+ color:var(--iui-text-color-placeholder); }
package/css/user-icon.css CHANGED
@@ -65,7 +65,9 @@
65
65
  width:100%;
66
66
  height:100%;
67
67
  border-width:0;
68
- border-radius:50%; }
68
+ border-radius:50%;
69
+ background-color:#FFF;
70
+ background-color:var(--iui-color-background-1); }
69
71
  .iui-user-icon > .iui-status{
70
72
  display:flex;
71
73
  align-items:center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.40.0",
3
+ "version": "0.41.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/button/borderless.scss CHANGED
@@ -9,16 +9,16 @@
9
9
  @include iui-button-borderless-base;
10
10
  @include iui-button-size(medium, borderless);
11
11
 
12
- &:hover,
13
12
  &:focus {
14
- @include themed {
15
- background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
16
- border-color: transparent;
13
+ @include iui-button-borderless-hover-focus;
14
+
15
+ &:where(:not(:focus-visible)) {
16
+ @include iui-button-borderless-base;
17
17
  }
18
18
  }
19
19
 
20
- &:focus:not(:focus-visible) {
21
- @include iui-button-borderless-base;
20
+ &:hover {
21
+ @include iui-button-borderless-hover-focus;
22
22
  }
23
23
 
24
24
  &.iui-active {
@@ -46,6 +46,13 @@
46
46
  }
47
47
  }
48
48
 
49
+ @mixin iui-button-borderless-hover-focus {
50
+ @include themed {
51
+ background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
52
+ border-color: transparent;
53
+ }
54
+ }
55
+
49
56
  @mixin iui-button-borderless-base {
50
57
  border-color: transparent;
51
58
  background-color: transparent;
package/scss/button/cta.scss CHANGED
@@ -8,18 +8,17 @@
8
8
  @mixin iui-button-cta {
9
9
  @include iui-button-cta-base;
10
10
 
11
- &:hover,
12
- &:active,
13
11
  &:focus {
14
- @include themed {
15
- background-color: t(iui-color-background-positive-overlay);
16
- border-color: t(iui-color-background-positive-overlay);
17
- color: t(iui-color-foreground-accessory);
12
+ @include iui-button-cta-hover-focus;
13
+
14
+ &:where(:not(:focus-visible)) {
15
+ @include iui-button-cta-base;
18
16
  }
19
17
  }
20
18
 
21
- &:focus:not(:focus-visible) {
22
- @include iui-button-cta-base;
19
+ &:hover,
20
+ &:active {
21
+ @include iui-button-cta-hover-focus;
23
22
  }
24
23
 
25
24
  &[disabled],
@@ -28,6 +27,14 @@
28
27
  }
29
28
  }
30
29
 
30
+ @mixin iui-button-cta-hover-focus {
31
+ @include themed {
32
+ background-color: t(iui-color-background-positive-overlay);
33
+ border-color: t(iui-color-background-positive-overlay);
34
+ color: t(iui-color-foreground-accessory);
35
+ }
36
+ }
37
+
31
38
  @mixin iui-button-cta-base {
32
39
  @include themed {
33
40
  background-color: t(iui-color-background-positive);
package/scss/button/default.scss CHANGED
@@ -9,19 +9,17 @@
9
9
  @mixin iui-button-default {
10
10
  @include iui-button-default-base;
11
11
 
12
- &:hover,
13
- &:active,
14
12
  &:focus {
15
- @include themed {
16
- background-color: t(iui-color-background-1-overlay);
17
- border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
18
- color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
13
+ @include iui-button-default-hover-focus;
14
+
15
+ &:where(:not(:focus-visible)) {
16
+ @include iui-button-default-base;
19
17
  }
20
- @include iui-notification-marker-hover;
21
18
  }
22
19
 
23
- &:focus:not(:focus-visible) {
24
- @include iui-button-default-base;
20
+ &:hover,
21
+ &:active {
22
+ @include iui-button-default-hover-focus;
25
23
  }
26
24
 
27
25
  &.iui-dropdown {
@@ -54,6 +52,15 @@
54
52
  }
55
53
  }
56
54
 
55
+ @mixin iui-button-default-hover-focus {
56
+ @include themed {
57
+ background-color: t(iui-color-background-1-overlay);
58
+ border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
59
+ color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
60
+ }
61
+ @include iui-notification-marker-hover;
62
+ }
63
+
57
64
  @mixin iui-button-default-base {
58
65
  @include themed {
59
66
  background-color: t(iui-color-background-1);
package/scss/button/high-visibility.scss CHANGED
@@ -8,18 +8,17 @@
8
8
  @mixin iui-button-high-visibility {
9
9
  @include iui-button-high-visibility-base;
10
10
 
11
- &:hover,
12
- &:active,
13
11
  &:focus {
14
- @include themed {
15
- background-color: t(iui-color-background-primary-overlay);
16
- border-color: t(iui-color-background-primary-overlay);
17
- color: t(iui-color-foreground-accessory);
12
+ @include iui-button-high-visibility-hover-focus;
13
+
14
+ &:where(:not(:focus-visible)) {
15
+ @include iui-button-high-visibility-base;
18
16
  }
19
17
  }
20
18
 
21
- &:focus:not(:focus-visible) {
22
- @include iui-button-high-visibility-base;
19
+ &:hover,
20
+ &:active {
21
+ @include iui-button-high-visibility-hover-focus;
23
22
  }
24
23
 
25
24
  &[disabled],
@@ -28,6 +27,14 @@
28
27
  }
29
28
  }
30
29
 
30
+ @mixin iui-button-high-visibility-hover-focus {
31
+ @include themed {
32
+ background-color: t(iui-color-background-primary-overlay);
33
+ border-color: t(iui-color-background-primary-overlay);
34
+ color: t(iui-color-foreground-accessory);
35
+ }
36
+ }
37
+
31
38
  @mixin iui-button-high-visibility-base {
32
39
  @include themed {
33
40
  background-color: t(iui-color-background-primary);
package/scss/classes.scss CHANGED
@@ -36,5 +36,6 @@
36
36
  @import './toast-notification/classes';
37
37
  @import './toggle-switch/classes';
38
38
  @import './tooltip/classes';
39
+ @import './tree/classes';
39
40
  @import './user-icon/classes';
40
41
  @import './wizard/classes';
package/scss/index.scss CHANGED
@@ -34,5 +34,6 @@
34
34
  @import './toast-notification/index';
35
35
  @import './toggle-switch/index';
36
36
  @import './tooltip/index';
37
+ @import './tree/index';
37
38
  @import './user-icon/index';
38
39
  @import './wizard/index';
package/scss/table/paginator.scss CHANGED
@@ -3,12 +3,13 @@
3
3
  @import '../style/index';
4
4
  @import '../icon/index';
5
5
  @import '../button/index';
6
+ @import '../text/index';
6
7
  @import './variables';
7
8
 
8
9
  @mixin iui-paginator {
9
10
  @include iui-reset;
10
11
  display: flex;
11
- justify-content: space-around;
12
+ justify-content: space-between;
12
13
  align-items: center;
13
14
  min-height: $iui-baseline * 5;
14
15
  padding: 0 $iui-m;
@@ -70,4 +71,11 @@
70
71
  > .iui-right {
71
72
  justify-content: flex-end;
72
73
  }
74
+
75
+ &-page-size-label {
76
+ @include iui-text-muted;
77
+ white-space: nowrap;
78
+ overflow: hidden;
79
+ text-overflow: ellipsis;
80
+ }
73
81
  }
package/scss/table/table.scss CHANGED
@@ -325,6 +325,10 @@
325
325
  flex-basis: $iui-l * 2;
326
326
  }
327
327
 
328
+ &:not(.iui-slot):last-child {
329
+ padding-right: $iui-m;
330
+ }
331
+
328
332
  &.iui-positive {
329
333
  @include iui-table-cell-status($status: positive);
330
334
  }
package/scss/tree/classes.scss ADDED
@@ -0,0 +1,15 @@
1
+ // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
2
+ // See LICENSE.md in the project root for license terms and full copyright notice.
3
+ @import './index';
4
+
5
+ .iui-tree {
6
+ @include iui-tree;
7
+ }
8
+
9
+ .iui-sub-tree {
10
+ @include iui-sub-tree;
11
+ }
12
+
13
+ .iui-tree-node {
14
+ @include iui-tree-node;
15
+ }
package/scss/tree/index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
2
+ // See LICENSE.md in the project root for license terms and full copyright notice.
3
+ @import './tree';
package/scss/tree/tree.scss ADDED
@@ -0,0 +1,137 @@
1
+ // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
2
+ // See LICENSE.md in the project root for license terms and full copyright notice.
3
+ @import '../style/index';
4
+ @import '../icon/index';
5
+
6
+ $iui-active-outline: thin solid t(iui-color-foreground-primary);
7
+ $iui-expander-inline-padding: $iui-component-offset + $iui-xxs + 1px; // margin + padding + border
8
+ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding * 2); // icon width + inline padding on both sides
9
+
10
+ @mixin iui-tree {
11
+ @include iui-reset;
12
+ list-style: none;
13
+ }
14
+
15
+ @mixin iui-sub-tree {
16
+ @include iui-reset;
17
+ list-style: none;
18
+ }
19
+
20
+ @mixin iui-tree-node {
21
+ display: flex;
22
+ cursor: pointer;
23
+ padding: 0 $iui-s;
24
+
25
+ &-checkbox {
26
+ margin-right: $iui-s;
27
+ }
28
+
29
+ &-content {
30
+ display: flex;
31
+ align-items: center;
32
+ box-sizing: border-box;
33
+ min-height: $iui-baseline * 3;
34
+ margin-left: calc(#{$iui-expander-button-width} * (var(--level, 0)));
35
+ overflow: hidden;
36
+ padding-left: $iui-xxs;
37
+
38
+ &-icon {
39
+ @include iui-icons-default;
40
+ padding: 0 $iui-expander-inline-padding;
41
+ flex-shrink: 0;
42
+
43
+ &:first-child {
44
+ margin-left: $iui-expander-button-width;
45
+ }
46
+ }
47
+
48
+ &-expander-icon {
49
+ @media (prefers-reduced-motion: no-preference) {
50
+ transition: transform $iui-speed-fast ease-out;
51
+ }
52
+
53
+ &-expanded {
54
+ transform: rotate(90deg);
55
+ }
56
+ }
57
+
58
+ &-label {
59
+ min-width: 0;
60
+ padding-left: $iui-expander-inline-padding;
61
+
62
+ &:first-child {
63
+ margin-left: $iui-expander-button-width;
64
+ }
65
+ }
66
+
67
+ &-title,
68
+ &-caption {
69
+ white-space: nowrap;
70
+ overflow: hidden;
71
+ text-overflow: ellipsis;
72
+ }
73
+
74
+ &-title {
75
+ font-size: $iui-font-size;
76
+ }
77
+
78
+ &-caption {
79
+ font-size: $iui-font-size-small;
80
+ @include themed {
81
+ color: t(iui-text-color-muted);
82
+ }
83
+ }
84
+ }
85
+
86
+ &:focus {
87
+ @include themed {
88
+ outline: thin solid rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
89
+ outline-offset: -1px;
90
+ }
91
+ }
92
+
93
+ &:focus:not(:focus-visible) {
94
+ outline-offset: -2px;
95
+ }
96
+
97
+ &:hover {
98
+ @include themed {
99
+ background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
100
+ }
101
+
102
+ .iui-tree-node-content-caption {
103
+ @include themed {
104
+ color: t(iui-color-foreground-body);
105
+ }
106
+ transition: color $iui-speed-fast ease;
107
+ }
108
+ }
109
+
110
+ &.iui-active {
111
+ @include themed {
112
+ background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
113
+ outline: $iui-active-outline;
114
+ outline-offset: -1px;
115
+ }
116
+
117
+ &:focus {
118
+ outline-width: $iui-xxs;
119
+ outline-offset: -2px;
120
+ }
121
+ }
122
+
123
+ &.iui-disabled {
124
+ cursor: not-allowed;
125
+ outline: none;
126
+ background-color: transparent;
127
+ @include themed {
128
+ color: t(iui-text-color-placeholder);
129
+ }
130
+
131
+ .iui-tree-node-content-caption {
132
+ @include themed {
133
+ color: t(iui-text-color-placeholder);
134
+ }
135
+ }
136
+ }
137
+ }
package/scss/user-icon/user-icon.scss CHANGED
@@ -70,6 +70,9 @@
70
70
  height: 100%;
71
71
  border-width: 0;
72
72
  border-radius: 50%;
73
+ @include themed {
74
+ background-color: t(iui-color-background-1);
75
+ }
73
76
  }
74
77
 
75
78
  > .iui-status {