@itwin/itwinui-css 0.42.0 → 0.42.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/css/all.css +109 -98
  2. package/css/button.css +108 -96
  3. package/css/table.css +1 -2
  4. package/package.json +1 -1
  5. package/scss/button/button-group.scss +11 -5
  6. package/scss/table/paginator.scss +0 -1
package/css/all.css CHANGED
@@ -975,38 +975,42 @@ html.iui-theme-dark{
975
975
  display:inline-flex;
976
976
  align-items:center;
977
977
  isolation:isolate; }
978
- .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * input:focus-within, .iui-button-group > * button:hover, .iui-button-group > * button:focus, .iui-button-group > * button:focus-within{
979
- position:relative;
980
- z-index:1; }
981
- .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
982
- position:relative;
983
- z-index:-1; }
984
- .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
985
- content:'';
986
- position:absolute;
987
- height:2px;
988
- opacity:1;
989
- top:2px;
990
- left:2px;
991
- width:calc(100% - 4px);
992
- background-color:#008BE1;
993
- background-color:var(--iui-color-foreground-primary); }
994
- .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
995
- background-color:rgba(0, 0, 0, 0.2);
996
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
997
- .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
998
- border-radius:0; }
999
- .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
1000
- border-top-left-radius:3px;
1001
- border-bottom-left-radius:3px; }
1002
- .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
1003
- border-top-right-radius:3px;
1004
- border-bottom-right-radius:3px; }
1005
- .iui-button-group > *:not(:last-child){
1006
- margin-right:-1px; }
1007
- .iui-button-group > *:not(:first-child) .iui-default:disabled{
1008
- border-left-color:#DCE0E3;
1009
- border-left-color:var(--iui-color-background-4); }
978
+ .iui-button-group > *{
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; }
1003
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
1004
+ border-top-left-radius:3px;
1005
+ border-bottom-left-radius:3px; }
1006
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
1007
+ border-top-right-radius:3px;
1008
+ border-bottom-right-radius:3px; }
1009
+ .iui-button-group > *:not(:last-child){
1010
+ margin-right:-1px; }
1011
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
1012
+ border-left-color:#DCE0E3;
1013
+ border-left-color:var(--iui-color-background-4); }
1010
1014
 
1011
1015
  .iui-button-split-menu{
1012
1016
  display:inline-flex;
@@ -1015,70 +1019,78 @@ html.iui-theme-dark{
1015
1019
  display:inline-flex;
1016
1020
  align-items:center;
1017
1021
  isolation:isolate; }
1018
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * input:focus-within, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus, .iui-button-split-menu > * button:focus-within{
1019
- position:relative;
1020
- z-index:1; }
1021
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
1022
- position:relative;
1023
- z-index:-1; }
1024
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
1025
- content:'';
1026
- position:absolute;
1027
- height:2px;
1028
- opacity:1;
1029
- top:2px;
1030
- left:2px;
1031
- width:calc(100% - 4px);
1032
- background-color:#008BE1;
1033
- background-color:var(--iui-color-foreground-primary); }
1034
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1035
- background-color:rgba(0, 0, 0, 0.2);
1036
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1037
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
1038
- border-radius:0; }
1039
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1040
- border-top-left-radius:3px;
1041
- border-bottom-left-radius:3px; }
1042
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
1043
- border-top-right-radius:3px;
1044
- border-bottom-right-radius:3px; }
1045
- .iui-button-split-menu > *:not(:last-child){
1046
- margin-right:-1px; }
1047
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
1048
- border-left-color:#DCE0E3;
1049
- border-left-color:var(--iui-color-background-4); }
1050
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * input:focus-within, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus, .iui-button-split-menu > * button:focus-within{
1051
- position:relative;
1052
- z-index:1; }
1053
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
1054
- position:relative;
1055
- z-index:-1; }
1056
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
1057
- content:'';
1058
- position:absolute;
1059
- height:2px;
1060
- opacity:1;
1061
- top:2px;
1062
- left:2px;
1063
- width:calc(100% - 4px);
1064
- background-color:#008BE1;
1065
- background-color:var(--iui-color-foreground-primary); }
1066
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1067
- background-color:rgba(0, 0, 0, 0.2);
1068
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1069
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
1070
- border-radius:0; }
1071
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1072
- border-top-left-radius:3px;
1073
- border-bottom-left-radius:3px; }
1074
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
1075
- border-top-right-radius:3px;
1076
- border-bottom-right-radius:3px; }
1077
- .iui-button-split-menu > *:not(:last-child){
1078
- margin-right:-1px; }
1079
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
1080
- border-left-color:#DCE0E3;
1081
- border-left-color:var(--iui-color-background-4); }
1022
+ .iui-button-split-menu > *{
1023
+ 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; }
1047
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1048
+ border-top-left-radius:3px;
1049
+ border-bottom-left-radius:3px; }
1050
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
1051
+ border-top-right-radius:3px;
1052
+ border-bottom-right-radius:3px; }
1053
+ .iui-button-split-menu > *:not(:last-child){
1054
+ margin-right:-1px; }
1055
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
1056
+ border-left-color:#DCE0E3;
1057
+ border-left-color:var(--iui-color-background-4); }
1058
+ .iui-button-split-menu > *{
1059
+ 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; }
1083
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1084
+ border-top-left-radius:3px;
1085
+ border-bottom-left-radius:3px; }
1086
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
1087
+ border-top-right-radius:3px;
1088
+ border-bottom-right-radius:3px; }
1089
+ .iui-button-split-menu > *:not(:last-child){
1090
+ margin-right:-1px; }
1091
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
1092
+ border-left-color:#DCE0E3;
1093
+ border-left-color:var(--iui-color-background-4); }
1082
1094
  .iui-button-split-menu:hover{
1083
1095
  background-color:rgba(0, 0, 0, 0.1);
1084
1096
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
@@ -5169,8 +5181,7 @@ html.iui-theme-dark{
5169
5181
  .iui-paginator > .iui-center .iui-button-group{
5170
5182
  margin:0 8px; }
5171
5183
  .iui-paginator > .iui-center .iui-button-group > *{
5172
- margin-right:0;
5173
- display:flex; }
5184
+ margin-right:0; }
5174
5185
  .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
5175
5186
  .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
5176
5187
  width:38px; }
package/css/button.css CHANGED
@@ -305,38 +305,42 @@
305
305
  display:inline-flex;
306
306
  align-items:center;
307
307
  isolation:isolate; }
308
- .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * input:focus-within, .iui-button-group > * button:hover, .iui-button-group > * button:focus, .iui-button-group > * button:focus-within{
309
- position:relative;
310
- z-index:1; }
311
- .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
312
- position:relative;
313
- z-index:-1; }
314
- .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
315
- content:'';
316
- position:absolute;
317
- height:2px;
318
- opacity:1;
319
- top:2px;
320
- left:2px;
321
- width:calc(100% - 4px);
322
- background-color:#008BE1;
323
- background-color:var(--iui-color-foreground-primary); }
324
- .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
325
- background-color:rgba(0, 0, 0, 0.2);
326
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
327
- .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
328
- border-radius:0; }
329
- .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
330
- border-top-left-radius:3px;
331
- border-bottom-left-radius:3px; }
332
- .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
333
- border-top-right-radius:3px;
334
- border-bottom-right-radius:3px; }
335
- .iui-button-group > *:not(:last-child){
336
- margin-right:-1px; }
337
- .iui-button-group > *:not(:first-child) .iui-default:disabled{
338
- border-left-color:#DCE0E3;
339
- border-left-color:var(--iui-color-background-4); }
308
+ .iui-button-group > *{
309
+ display:flex; }
310
+ .iui-button-group > * input:hover, .iui-button-group > * button:hover{
311
+ z-index:1; }
312
+ .iui-button-group > * input:focus, .iui-button-group > * button:focus{
313
+ z-index:2; }
314
+ .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
315
+ z-index:revert; }
316
+ .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
317
+ z-index:-1; }
318
+ .iui-button-group > * input.iui-active::after, .iui-button-group > * button.iui-active::after{
319
+ content:'';
320
+ position:absolute;
321
+ height:2px;
322
+ opacity:1;
323
+ top:2px;
324
+ left:2px;
325
+ width:calc(100% - 4px);
326
+ background-color:#008BE1;
327
+ background-color:var(--iui-color-foreground-primary); }
328
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
329
+ background-color:rgba(0, 0, 0, 0.2);
330
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
331
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
332
+ border-radius:0; }
333
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
334
+ border-top-left-radius:3px;
335
+ border-bottom-left-radius:3px; }
336
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
337
+ border-top-right-radius:3px;
338
+ border-bottom-right-radius:3px; }
339
+ .iui-button-group > *:not(:last-child){
340
+ margin-right:-1px; }
341
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
342
+ border-left-color:#DCE0E3;
343
+ border-left-color:var(--iui-color-background-4); }
340
344
 
341
345
  .iui-button-split-menu{
342
346
  display:inline-flex;
@@ -345,70 +349,78 @@
345
349
  display:inline-flex;
346
350
  align-items:center;
347
351
  isolation:isolate; }
348
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * input:focus-within, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus, .iui-button-split-menu > * button:focus-within{
349
- position:relative;
350
- z-index:1; }
351
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
352
- position:relative;
353
- z-index:-1; }
354
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
355
- content:'';
356
- position:absolute;
357
- height:2px;
358
- opacity:1;
359
- top:2px;
360
- left:2px;
361
- width:calc(100% - 4px);
362
- background-color:#008BE1;
363
- background-color:var(--iui-color-foreground-primary); }
364
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
365
- background-color:rgba(0, 0, 0, 0.2);
366
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
367
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
368
- border-radius:0; }
369
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
370
- border-top-left-radius:3px;
371
- border-bottom-left-radius:3px; }
372
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
373
- border-top-right-radius:3px;
374
- border-bottom-right-radius:3px; }
375
- .iui-button-split-menu > *:not(:last-child){
376
- margin-right:-1px; }
377
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
378
- border-left-color:#DCE0E3;
379
- border-left-color:var(--iui-color-background-4); }
380
- .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * input:focus-within, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus, .iui-button-split-menu > * button:focus-within{
381
- position:relative;
382
- z-index:1; }
383
- .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
384
- position:relative;
385
- z-index:-1; }
386
- .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
387
- content:'';
388
- position:absolute;
389
- height:2px;
390
- opacity:1;
391
- top:2px;
392
- left:2px;
393
- width:calc(100% - 4px);
394
- background-color:#008BE1;
395
- background-color:var(--iui-color-foreground-primary); }
396
- .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
397
- background-color:rgba(0, 0, 0, 0.2);
398
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
399
- .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
400
- border-radius:0; }
401
- .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
402
- border-top-left-radius:3px;
403
- border-bottom-left-radius:3px; }
404
- .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
405
- border-top-right-radius:3px;
406
- border-bottom-right-radius:3px; }
407
- .iui-button-split-menu > *:not(:last-child){
408
- margin-right:-1px; }
409
- .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
410
- border-left-color:#DCE0E3;
411
- border-left-color:var(--iui-color-background-4); }
352
+ .iui-button-split-menu > *{
353
+ display:flex; }
354
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
355
+ z-index:1; }
356
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
357
+ z-index:2; }
358
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
359
+ z-index:revert; }
360
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
361
+ z-index:-1; }
362
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
363
+ content:'';
364
+ position:absolute;
365
+ height:2px;
366
+ opacity:1;
367
+ top:2px;
368
+ left:2px;
369
+ width:calc(100% - 4px);
370
+ background-color:#008BE1;
371
+ background-color:var(--iui-color-foreground-primary); }
372
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
373
+ background-color:rgba(0, 0, 0, 0.2);
374
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
375
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
376
+ border-radius:0; }
377
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
378
+ border-top-left-radius:3px;
379
+ border-bottom-left-radius:3px; }
380
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
381
+ border-top-right-radius:3px;
382
+ border-bottom-right-radius:3px; }
383
+ .iui-button-split-menu > *:not(:last-child){
384
+ margin-right:-1px; }
385
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
386
+ border-left-color:#DCE0E3;
387
+ border-left-color:var(--iui-color-background-4); }
388
+ .iui-button-split-menu > *{
389
+ display:flex; }
390
+ .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
391
+ z-index:1; }
392
+ .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
393
+ z-index:2; }
394
+ .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
395
+ z-index:revert; }
396
+ .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
397
+ z-index:-1; }
398
+ .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * button.iui-active::after{
399
+ content:'';
400
+ position:absolute;
401
+ height:2px;
402
+ opacity:1;
403
+ top:2px;
404
+ left:2px;
405
+ width:calc(100% - 4px);
406
+ background-color:#008BE1;
407
+ background-color:var(--iui-color-foreground-primary); }
408
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
409
+ background-color:rgba(0, 0, 0, 0.2);
410
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
411
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
412
+ border-radius:0; }
413
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
414
+ border-top-left-radius:3px;
415
+ border-bottom-left-radius:3px; }
416
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
417
+ border-top-right-radius:3px;
418
+ border-bottom-right-radius:3px; }
419
+ .iui-button-split-menu > *:not(:last-child){
420
+ margin-right:-1px; }
421
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
422
+ border-left-color:#DCE0E3;
423
+ border-left-color:var(--iui-color-background-4); }
412
424
  .iui-button-split-menu:hover{
413
425
  background-color:rgba(0, 0, 0, 0.1);
414
426
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
package/css/table.css CHANGED
@@ -374,8 +374,7 @@
374
374
  .iui-paginator > .iui-center .iui-button-group{
375
375
  margin:0 8px; }
376
376
  .iui-paginator > .iui-center .iui-button-group > *{
377
- margin-right:0;
378
- display:flex; }
377
+ margin-right:0; }
379
378
  .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
380
379
  .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
381
380
  width:38px; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.42.0",
3
+ "version": "0.42.1",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/button/button-group.scss CHANGED
@@ -10,16 +10,22 @@
10
10
  $childSelector: 'input, button'; // target nested inputs and buttons
11
11
 
12
12
  > * {
13
+ display: flex;
14
+
13
15
  #{$childSelector} {
14
- &:hover,
15
- &:focus,
16
- &:focus-within {
17
- position: relative;
16
+ &:hover {
18
17
  z-index: 1;
19
18
  }
20
19
 
20
+ &:focus {
21
+ z-index: 2;
22
+
23
+ &:where(:not(:focus-visible):not(:hover)) {
24
+ z-index: revert;
25
+ }
26
+ }
27
+
21
28
  &:disabled {
22
- position: relative;
23
29
  z-index: -1;
24
30
  }
25
31
 
package/scss/table/paginator.scss CHANGED
@@ -40,7 +40,6 @@
40
40
 
41
41
  > * {
42
42
  margin-right: 0; // unset negative margin from button-group
43
- display: flex; // for vertically aligning svgs
44
43
 
45
44
  > .iui-button,
46
45
  > .iui-ellipsis {