@itwin/itwinui-css 0.42.1 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/css/all.css +95 -74
  2. package/css/button.css +84 -69
  3. package/css/table.css +11 -5
  4. package/package.json +1 -1
  5. package/scss/button/button-group.scss +9 -0
  6. package/scss/style/mixins.scss +1 -1
  7. package/scss/table/paginator.scss +0 -5
  8. package/scss/table/table.scss +11 -2
package/css/all.css CHANGED
@@ -977,29 +977,34 @@ html.iui-theme-dark{
977
977
  isolation:isolate; }
978
978
  .iui-button-group > *{
979
979
  display:flex; }
980
- .iui-button-group > * input:hover, .iui-button-group > * button:hover{
981
- z-index:1; }
982
- .iui-button-group > * input:focus, .iui-button-group > * button:focus{
983
- z-index:2; }
984
- .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
985
- z-index:revert; }
986
- .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
987
- z-index:-1; }
988
- .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
989
- content:'';
990
- position:absolute;
991
- height:2px;
992
- opacity:1;
993
- top:2px;
994
- left:2px;
995
- width:calc(100% - 4px);
996
- background-color:#008BE1;
997
- background-color:var(--iui-color-foreground-primary); }
998
- .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
999
- background-color:rgba(0, 0, 0, 0.2);
1000
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1001
- .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
1002
- border-radius:0; }
980
+ .iui-button-group > * input, .iui-button-group > * button{
981
+ position:relative;
982
+ transition-duration:0ms; }
983
+ .iui-button-group > * input:hover, .iui-button-group > * button:hover{
984
+ z-index:1; }
985
+ .iui-button-group > * input:focus, .iui-button-group > * button:focus{
986
+ z-index:2; }
987
+ .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
988
+ z-index:revert; }
989
+ .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
990
+ z-index:-1; }
991
+ .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * button:hover, .iui-button-group > * button:focus{
992
+ transition-duration:0.2s; }
993
+ .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
994
+ content:'';
995
+ position:absolute;
996
+ height:2px;
997
+ opacity:1;
998
+ top:2px;
999
+ left:2px;
1000
+ width:calc(100% - 4px);
1001
+ background-color:#008BE1;
1002
+ background-color:var(--iui-color-foreground-primary); }
1003
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
1004
+ background-color:rgba(0, 0, 0, 0.2);
1005
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1006
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
1007
+ border-radius:0; }
1003
1008
  .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
1004
1009
  border-top-left-radius:3px;
1005
1010
  border-bottom-left-radius:3px; }
@@ -1021,29 +1026,34 @@ html.iui-theme-dark{
1021
1026
  isolation:isolate; }
1022
1027
  .iui-button-split-menu > *{
1023
1028
  display:flex; }
1024
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
1025
- z-index:1; }
1026
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
1027
- z-index:2; }
1028
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
1029
- z-index:revert; }
1030
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
1031
- z-index:-1; }
1032
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
1033
- content:'';
1034
- position:absolute;
1035
- height:2px;
1036
- opacity:1;
1037
- top:2px;
1038
- left:2px;
1039
- width:calc(100% - 4px);
1040
- background-color:#008BE1;
1041
- background-color:var(--iui-color-foreground-primary); }
1042
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1043
- background-color:rgba(0, 0, 0, 0.2);
1044
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1045
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
1046
- border-radius:0; }
1029
+ .iui-button-split-menu > * input, .iui-button-split-menu > * button{
1030
+ position:relative;
1031
+ transition-duration:0ms; }
1032
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
1033
+ z-index:1; }
1034
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
1035
+ z-index:2; }
1036
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
1037
+ z-index:revert; }
1038
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
1039
+ z-index:-1; }
1040
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
1041
+ transition-duration:0.2s; }
1042
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
1043
+ content:'';
1044
+ position:absolute;
1045
+ height:2px;
1046
+ opacity:1;
1047
+ top:2px;
1048
+ left:2px;
1049
+ width:calc(100% - 4px);
1050
+ background-color:#008BE1;
1051
+ background-color:var(--iui-color-foreground-primary); }
1052
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1053
+ background-color:rgba(0, 0, 0, 0.2);
1054
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1055
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
1056
+ border-radius:0; }
1047
1057
  .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1048
1058
  border-top-left-radius:3px;
1049
1059
  border-bottom-left-radius:3px; }
@@ -1057,29 +1067,34 @@ html.iui-theme-dark{
1057
1067
  border-left-color:var(--iui-color-background-4); }
1058
1068
  .iui-button-split-menu > *{
1059
1069
  display:flex; }
1060
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
1061
- z-index:1; }
1062
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
1063
- z-index:2; }
1064
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
1065
- z-index:revert; }
1066
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
1067
- z-index:-1; }
1068
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
1069
- content:'';
1070
- position:absolute;
1071
- height:2px;
1072
- opacity:1;
1073
- top:2px;
1074
- left:2px;
1075
- width:calc(100% - 4px);
1076
- background-color:#008BE1;
1077
- background-color:var(--iui-color-foreground-primary); }
1078
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1079
- background-color:rgba(0, 0, 0, 0.2);
1080
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1081
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
1082
- border-radius:0; }
1070
+ .iui-button-split-menu > * input, .iui-button-split-menu > * button{
1071
+ position:relative;
1072
+ transition-duration:0ms; }
1073
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
1074
+ z-index:1; }
1075
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
1076
+ z-index:2; }
1077
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
1078
+ z-index:revert; }
1079
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
1080
+ z-index:-1; }
1081
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
1082
+ transition-duration:0.2s; }
1083
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
1084
+ content:'';
1085
+ position:absolute;
1086
+ height:2px;
1087
+ opacity:1;
1088
+ top:2px;
1089
+ left:2px;
1090
+ width:calc(100% - 4px);
1091
+ background-color:#008BE1;
1092
+ background-color:var(--iui-color-foreground-primary); }
1093
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1094
+ background-color:rgba(0, 0, 0, 0.2);
1095
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1096
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
1097
+ border-radius:0; }
1083
1098
  .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1084
1099
  border-top-left-radius:3px;
1085
1100
  border-bottom-left-radius:3px; }
@@ -4851,8 +4866,13 @@ html.iui-theme-dark{
4851
4866
  -moz-user-select:none;
4852
4867
  -ms-user-select:none;
4853
4868
  user-select:none;
4869
+ overflow:hidden;
4870
+ flex-shrink:0;
4854
4871
  background-color:#EEF0F3;
4855
4872
  background-color:var(--iui-color-background-3); }
4873
+ @supports not (overflow: overlay){
4874
+ .iui-table-header{
4875
+ overflow-y:scroll; } }
4856
4876
  .iui-table-header .iui-row{
4857
4877
  display:flex;
4858
4878
  flex-grow:1; }
@@ -4920,23 +4940,24 @@ html.iui-theme-dark{
4920
4940
  fill:var(--iui-icons-color-actionable); }
4921
4941
 
4922
4942
  .iui-table-body{
4923
- overflow-x:hidden;
4924
4943
  overflow-y:scroll;
4925
- overflow-y:overlay;
4944
+ overflow:overlay;
4926
4945
  display:flex;
4927
4946
  flex-direction:column;
4928
4947
  flex-grow:1;
4948
+ align-items:flex-start;
4929
4949
  background-color:#FFF;
4930
4950
  background-color:var(--iui-color-background-1); }
4931
4951
  .iui-table-body.iui-scroll-snapping{
4932
4952
  -ms-scroll-snap-type:y mandatory;
4933
4953
  scroll-snap-type:y mandatory; }
4934
4954
  .iui-table-body.iui-scroll-snapping .iui-row{
4935
- scroll-snap-align:start; }
4955
+ scroll-snap-align:start none; }
4936
4956
  .iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
4937
4957
  background-color:rgba(0, 0, 0, 0.02);
4938
4958
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
4939
4959
  .iui-table-body .iui-row{
4960
+ min-width:100%;
4940
4961
  display:flex;
4941
4962
  border:solid 1px transparent;
4942
4963
  border-bottom-color:#DCE0E3;
@@ -5087,6 +5108,8 @@ html.iui-theme-dark{
5087
5108
  justify-content:center;
5088
5109
  align-items:center;
5089
5110
  flex-grow:1;
5111
+ -ms-grid-row-align:center;
5112
+ align-self:center;
5090
5113
  color:rgba(0, 0, 0, 0.4);
5091
5114
  background-color:#FFF;
5092
5115
  color:var(--iui-text-color-muted);
@@ -5188,8 +5211,6 @@ html.iui-theme-dark{
5188
5211
  .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
5189
5212
  .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
5190
5213
  width:27px; }
5191
- .iui-paginator > .iui-center .iui-button-group > * > .iui-button{
5192
- transition:none; }
5193
5214
  .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
5194
5215
  display:flex;
5195
5216
  justify-content:center;
package/css/button.css CHANGED
@@ -307,29 +307,34 @@
307
307
  isolation:isolate; }
308
308
  .iui-button-group > *{
309
309
  display:flex; }
310
- .iui-button-group > * input:hover, .iui-button-group > * button:hover{
311
- z-index:1; }
312
- .iui-button-group > * input:focus, .iui-button-group > * button:focus{
313
- z-index:2; }
314
- .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
315
- z-index:revert; }
316
- .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
317
- z-index:-1; }
318
- .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
319
- content:'';
320
- position:absolute;
321
- height:2px;
322
- opacity:1;
323
- top:2px;
324
- left:2px;
325
- width:calc(100% - 4px);
326
- background-color:#008BE1;
327
- background-color:var(--iui-color-foreground-primary); }
328
- .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
329
- background-color:rgba(0, 0, 0, 0.2);
330
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
331
- .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
332
- border-radius:0; }
310
+ .iui-button-group > * input, .iui-button-group > * button{
311
+ position:relative;
312
+ transition-duration:0ms; }
313
+ .iui-button-group > * input:hover, .iui-button-group > * button:hover{
314
+ z-index:1; }
315
+ .iui-button-group > * input:focus, .iui-button-group > * button:focus{
316
+ z-index:2; }
317
+ .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
318
+ z-index:revert; }
319
+ .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
320
+ z-index:-1; }
321
+ .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * button:hover, .iui-button-group > * button:focus{
322
+ transition-duration:0.2s; }
323
+ .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
324
+ content:'';
325
+ position:absolute;
326
+ height:2px;
327
+ opacity:1;
328
+ top:2px;
329
+ left:2px;
330
+ width:calc(100% - 4px);
331
+ background-color:#008BE1;
332
+ background-color:var(--iui-color-foreground-primary); }
333
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
334
+ background-color:rgba(0, 0, 0, 0.2);
335
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
336
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
337
+ border-radius:0; }
333
338
  .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
334
339
  border-top-left-radius:3px;
335
340
  border-bottom-left-radius:3px; }
@@ -351,29 +356,34 @@
351
356
  isolation:isolate; }
352
357
  .iui-button-split-menu > *{
353
358
  display:flex; }
354
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
355
- z-index:1; }
356
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
357
- z-index:2; }
358
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
359
- z-index:revert; }
360
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
361
- z-index:-1; }
362
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
363
- content:'';
364
- position:absolute;
365
- height:2px;
366
- opacity:1;
367
- top:2px;
368
- left:2px;
369
- width:calc(100% - 4px);
370
- background-color:#008BE1;
371
- background-color:var(--iui-color-foreground-primary); }
372
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
373
- background-color:rgba(0, 0, 0, 0.2);
374
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
375
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
376
- border-radius:0; }
359
+ .iui-button-split-menu > * input, .iui-button-split-menu > * button{
360
+ position:relative;
361
+ transition-duration:0ms; }
362
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
363
+ z-index:1; }
364
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
365
+ z-index:2; }
366
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
367
+ z-index:revert; }
368
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
369
+ z-index:-1; }
370
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
371
+ transition-duration:0.2s; }
372
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
373
+ content:'';
374
+ position:absolute;
375
+ height:2px;
376
+ opacity:1;
377
+ top:2px;
378
+ left:2px;
379
+ width:calc(100% - 4px);
380
+ background-color:#008BE1;
381
+ background-color:var(--iui-color-foreground-primary); }
382
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
383
+ background-color:rgba(0, 0, 0, 0.2);
384
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
385
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
386
+ border-radius:0; }
377
387
  .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
378
388
  border-top-left-radius:3px;
379
389
  border-bottom-left-radius:3px; }
@@ -387,29 +397,34 @@
387
397
  border-left-color:var(--iui-color-background-4); }
388
398
  .iui-button-split-menu > *{
389
399
  display:flex; }
390
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
391
- z-index:1; }
392
- .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
393
- z-index:2; }
394
- .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
395
- z-index:revert; }
396
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
397
- z-index:-1; }
398
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
399
- content:'';
400
- position:absolute;
401
- height:2px;
402
- opacity:1;
403
- top:2px;
404
- left:2px;
405
- width:calc(100% - 4px);
406
- background-color:#008BE1;
407
- background-color:var(--iui-color-foreground-primary); }
408
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
409
- background-color:rgba(0, 0, 0, 0.2);
410
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
411
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
412
- border-radius:0; }
400
+ .iui-button-split-menu > * input, .iui-button-split-menu > * button{
401
+ position:relative;
402
+ transition-duration:0ms; }
403
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
404
+ z-index:1; }
405
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
406
+ z-index:2; }
407
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
408
+ z-index:revert; }
409
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
410
+ z-index:-1; }
411
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
412
+ transition-duration:0.2s; }
413
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
414
+ content:'';
415
+ position:absolute;
416
+ height:2px;
417
+ opacity:1;
418
+ top:2px;
419
+ left:2px;
420
+ width:calc(100% - 4px);
421
+ background-color:#008BE1;
422
+ background-color:var(--iui-color-foreground-primary); }
423
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
424
+ background-color:rgba(0, 0, 0, 0.2);
425
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
426
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
427
+ border-radius:0; }
413
428
  .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
414
429
  border-top-left-radius:3px;
415
430
  border-bottom-left-radius:3px; }
package/css/table.css CHANGED
@@ -44,8 +44,13 @@
44
44
  -moz-user-select:none;
45
45
  -ms-user-select:none;
46
46
  user-select:none;
47
+ overflow:hidden;
48
+ flex-shrink:0;
47
49
  background-color:#EEF0F3;
48
50
  background-color:var(--iui-color-background-3); }
51
+ @supports not (overflow: overlay){
52
+ .iui-table-header{
53
+ overflow-y:scroll; } }
49
54
  .iui-table-header .iui-row{
50
55
  display:flex;
51
56
  flex-grow:1; }
@@ -113,23 +118,24 @@
113
118
  fill:var(--iui-icons-color-actionable); }
114
119
 
115
120
  .iui-table-body{
116
- overflow-x:hidden;
117
121
  overflow-y:scroll;
118
- overflow-y:overlay;
122
+ overflow:overlay;
119
123
  display:flex;
120
124
  flex-direction:column;
121
125
  flex-grow:1;
126
+ align-items:flex-start;
122
127
  background-color:#FFF;
123
128
  background-color:var(--iui-color-background-1); }
124
129
  .iui-table-body.iui-scroll-snapping{
125
130
  -ms-scroll-snap-type:y mandatory;
126
131
  scroll-snap-type:y mandatory; }
127
132
  .iui-table-body.iui-scroll-snapping .iui-row{
128
- scroll-snap-align:start; }
133
+ scroll-snap-align:start none; }
129
134
  .iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
130
135
  background-color:rgba(0, 0, 0, 0.02);
131
136
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
132
137
  .iui-table-body .iui-row{
138
+ min-width:100%;
133
139
  display:flex;
134
140
  border:solid 1px transparent;
135
141
  border-bottom-color:#DCE0E3;
@@ -280,6 +286,8 @@
280
286
  justify-content:center;
281
287
  align-items:center;
282
288
  flex-grow:1;
289
+ -ms-grid-row-align:center;
290
+ align-self:center;
283
291
  color:rgba(0, 0, 0, 0.4);
284
292
  background-color:#FFF;
285
293
  color:var(--iui-text-color-muted);
@@ -381,8 +389,6 @@
381
389
  .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
382
390
  .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
383
391
  width:27px; }
384
- .iui-paginator > .iui-center .iui-button-group > * > .iui-button{
385
- transition:none; }
386
392
  .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
387
393
  display:flex;
388
394
  justify-content:center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.42.1",
3
+ "version": "0.43.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/button/button-group.scss CHANGED
@@ -13,6 +13,8 @@
13
13
  display: flex;
14
14
 
15
15
  #{$childSelector} {
16
+ position: relative;
17
+
16
18
  &:hover {
17
19
  z-index: 1;
18
20
  }
@@ -29,6 +31,13 @@
29
31
  z-index: -1;
30
32
  }
31
33
 
34
+ transition-duration: 0ms; // disable exit animation to avoid border flicker
35
+
36
+ &:hover,
37
+ &:focus {
38
+ transition-duration: $iui-speed-fast; // re-enable enter animation
39
+ }
40
+
32
41
  // Adds stripe above active button
33
42
  &.iui-active {
34
43
  &::after {
package/scss/style/mixins.scss CHANGED
@@ -167,7 +167,7 @@
167
167
  scroll-snap-type: y mandatory;
168
168
 
169
169
  #{$selector} {
170
- scroll-snap-align: start;
170
+ scroll-snap-align: start none;
171
171
  }
172
172
  }
173
173
  }
package/scss/table/paginator.scss CHANGED
@@ -50,11 +50,6 @@
50
50
  }
51
51
  }
52
52
 
53
- > .iui-button {
54
- // Animation looks odd when switching pages
55
- transition: none;
56
- }
57
-
58
53
  > .iui-ellipsis {
59
54
  display: flex;
60
55
  justify-content: center;
package/scss/table/table.scss CHANGED
@@ -18,6 +18,12 @@
18
18
 
19
19
  @mixin iui-table-header {
20
20
  user-select: none;
21
+ overflow: hidden;
22
+ // Fix for Firefox columns misalignment
23
+ @supports not (overflow: overlay) {
24
+ overflow-y: scroll;
25
+ }
26
+ flex-shrink: 0;
21
27
  @include themed {
22
28
  background-color: t(iui-color-background-3);
23
29
  }
@@ -117,12 +123,13 @@
117
123
  }
118
124
 
119
125
  @mixin iui-table-body {
120
- overflow-x: hidden;
121
126
  overflow-y: scroll;
122
- overflow-y: overlay;
127
+ overflow: overlay;
123
128
  display: flex;
124
129
  flex-direction: column;
125
130
  flex-grow: 1;
131
+ // Allows columns with static width to take more space than the table width
132
+ align-items: flex-start;
126
133
  @include iui-scroll-snapping('.iui-row');
127
134
  @include themed {
128
135
  background-color: t(iui-color-background-1);
@@ -135,6 +142,7 @@
135
142
  }
136
143
 
137
144
  .iui-row {
145
+ min-width: 100%;
138
146
  display: flex;
139
147
  border: solid 1px transparent;
140
148
  @media (prefers-reduced-motion: no-preference) {
@@ -296,6 +304,7 @@
296
304
  justify-content: center;
297
305
  align-items: center;
298
306
  flex-grow: 1;
307
+ align-self: center;
299
308
  @include themed {
300
309
  color: t(iui-text-color-muted);
301
310
  background-color: t(iui-color-background-1);