@itwin/itwinui-css 0.41.0 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/css/all.css +197 -161
  2. package/css/button.css +138 -112
  3. package/css/header.css +16 -14
  4. package/css/inputs.css +12 -12
  5. package/css/table.css +31 -23
  6. package/package.json +1 -1
  7. package/scss/button/button-group.scss +68 -46
  8. package/scss/button/split-menu.scss +34 -20
  9. package/scss/header/header.scss +16 -8
  10. package/scss/inputs/classes.scss +2 -2
  11. package/scss/inputs/labeled-inputs.scss +3 -3
  12. package/scss/style/mixins.scss +1 -1
  13. package/scss/table/paginator.scss +20 -21
  14. package/scss/table/table.scss +17 -8
package/css/all.css CHANGED
@@ -973,130 +973,156 @@ html.iui-theme-dark{
973
973
 
974
974
  .iui-button-group{
975
975
  display:inline-flex;
976
- align-items:center; }
977
- .iui-button-group > .iui-button:not(.iui-borderless){
978
- border-radius:0; }
979
- .iui-button-group > .iui-button:first-of-type:not(.iui-borderless){
980
- border-top-left-radius:3px;
981
- border-bottom-left-radius:3px; }
982
- .iui-button-group > .iui-button:last-of-type:not(.iui-borderless){
983
- border-top-right-radius:3px;
984
- border-bottom-right-radius:3px; }
985
- .iui-button-group > .iui-button.iui-default:not(:last-of-type){
986
- border-right:none; }
987
- .iui-button-group > .iui-button.iui-default:not(:disabled) + :disabled{
988
- border-left-color:rgba(0, 0, 0, 0.4);
989
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
990
- .iui-button-group > .iui-button.iui-default:not(:disabled):hover + .iui-button,
991
- .iui-button-group > .iui-button.iui-default:not(:disabled):active + .iui-button,
992
- .iui-button-group > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
993
- border-left-color:black;
994
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
995
- .iui-button-group > .iui-button.iui-default:disabled + .iui-button:disabled{
996
- border-left-color:#DCE0E3;
997
- border-left-color:var(--iui-color-background-4); }
998
- .iui-button-group > .iui-active::after{
999
- content:'';
1000
- position:absolute;
1001
- height:2px;
1002
- opacity:1;
1003
- top:2px;
1004
- left:2px;
1005
- width:calc(100% - 4px);
1006
- background-color:#008BE1;
1007
- background-color:var(--iui-color-foreground-primary); }
1008
- .iui-button-group > .iui-active:disabled::after{
1009
- background-color:rgba(0, 0, 0, 0.2);
1010
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
976
+ align-items:center;
977
+ isolation:isolate; }
978
+ .iui-button-group > *{
979
+ display:flex; }
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; }
1008
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
1009
+ border-top-left-radius:3px;
1010
+ border-bottom-left-radius:3px; }
1011
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
1012
+ border-top-right-radius:3px;
1013
+ border-bottom-right-radius:3px; }
1014
+ .iui-button-group > *:not(:last-child){
1015
+ margin-right:-1px; }
1016
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
1017
+ border-left-color:#DCE0E3;
1018
+ border-left-color:var(--iui-color-background-4); }
1011
1019
 
1012
1020
  .iui-button-split-menu{
1013
1021
  display:inline-flex;
1014
1022
  align-items:center;
1023
+ isolation:isolate;
1015
1024
  display:inline-flex;
1016
- align-items:center; }
1017
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
1018
- border-radius:0; }
1019
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
1020
- border-top-left-radius:3px;
1021
- border-bottom-left-radius:3px; }
1022
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
1023
- border-top-right-radius:3px;
1024
- border-bottom-right-radius:3px; }
1025
- .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
1026
- border-right:none; }
1027
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
1028
- border-left-color:rgba(0, 0, 0, 0.4);
1029
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
1030
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
1031
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
1032
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
1033
- border-left-color:black;
1034
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
1035
- .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
1036
- border-left-color:#DCE0E3;
1037
- border-left-color:var(--iui-color-background-4); }
1038
- .iui-button-split-menu > .iui-active::after{
1039
- content:'';
1040
- position:absolute;
1041
- height:2px;
1042
- opacity:1;
1043
- top:2px;
1044
- left:2px;
1045
- width:calc(100% - 4px);
1046
- background-color:#008BE1;
1047
- background-color:var(--iui-color-foreground-primary); }
1048
- .iui-button-split-menu > .iui-active:disabled::after{
1049
- background-color:rgba(0, 0, 0, 0.2);
1050
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1051
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
1052
- border-radius:0; }
1053
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
1054
- border-top-left-radius:3px;
1055
- border-bottom-left-radius:3px; }
1056
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
1057
- border-top-right-radius:3px;
1058
- border-bottom-right-radius:3px; }
1059
- .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
1060
- border-right:none; }
1061
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
1062
- border-left-color:rgba(0, 0, 0, 0.4);
1063
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
1064
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
1065
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
1066
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
1067
- border-left-color:black;
1068
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
1069
- .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
1070
- border-left-color:#DCE0E3;
1071
- border-left-color:var(--iui-color-background-4); }
1072
- .iui-button-split-menu > .iui-active::after{
1073
- content:'';
1074
- position:absolute;
1075
- height:2px;
1076
- opacity:1;
1077
- top:2px;
1078
- left:2px;
1079
- width:calc(100% - 4px);
1080
- background-color:#008BE1;
1081
- background-color:var(--iui-color-foreground-primary); }
1082
- .iui-button-split-menu > .iui-active:disabled::after{
1083
- background-color:rgba(0, 0, 0, 0.2);
1084
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1025
+ align-items:center;
1026
+ isolation:isolate; }
1027
+ .iui-button-split-menu > *{
1028
+ display:flex; }
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; }
1057
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1058
+ border-top-left-radius:3px;
1059
+ border-bottom-left-radius:3px; }
1060
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
1061
+ border-top-right-radius:3px;
1062
+ border-bottom-right-radius:3px; }
1063
+ .iui-button-split-menu > *:not(:last-child){
1064
+ margin-right:-1px; }
1065
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
1066
+ border-left-color:#DCE0E3;
1067
+ border-left-color:var(--iui-color-background-4); }
1068
+ .iui-button-split-menu > *{
1069
+ display:flex; }
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; }
1098
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1099
+ border-top-left-radius:3px;
1100
+ border-bottom-left-radius:3px; }
1101
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
1102
+ border-top-right-radius:3px;
1103
+ border-bottom-right-radius:3px; }
1104
+ .iui-button-split-menu > *:not(:last-child){
1105
+ margin-right:-1px; }
1106
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
1107
+ border-left-color:#DCE0E3;
1108
+ border-left-color:var(--iui-color-background-4); }
1085
1109
  .iui-button-split-menu:hover{
1086
1110
  background-color:rgba(0, 0, 0, 0.1);
1087
1111
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
1088
- .iui-button-split-menu .iui-button:first-child.iui-borderless:hover{
1112
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
1089
1113
  background-color:transparent; }
1090
- .iui-button-split-menu > .iui-button + .iui-button{
1114
+ .iui-button-split-menu > *:last-child > .iui-button{
1091
1115
  padding:4px; }
1092
- .iui-button-split-menu > .iui-small + .iui-small{
1116
+ .iui-button-split-menu > *:last-child > .iui-small{
1093
1117
  padding:2px; }
1094
- .iui-button-split-menu > .iui-large + .iui-large{
1118
+ .iui-button-split-menu > *:last-child > .iui-large{
1095
1119
  padding:8px; }
1096
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility,
1097
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility:hover,
1098
- .iui-button-split-menu > .iui-cta + .iui-cta,
1099
- .iui-button-split-menu > .iui-cta + .iui-cta:hover{
1120
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
1121
+ .iui-button-split-menu > *:first-child > .iui-cta{
1122
+ border-right-color:rgba(255, 255, 255, 0.4);
1123
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
1124
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
1125
+ .iui-button-split-menu > *:last-child > .iui-cta{
1100
1126
  border-left-color:rgba(255, 255, 255, 0.4);
1101
1127
  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
1102
1128
  .iui-button-split-menu.iui-disabled{
@@ -1949,11 +1975,11 @@ html.iui-theme-dark{
1949
1975
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
1950
1976
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
1951
1977
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
1952
- .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-label{
1978
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-button-label{
1953
1979
  color:rgba(0, 0, 0, 0.2);
1954
1980
  color:var(--iui-icons-color-actionable-disabled); }
1955
- .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-icon,
1956
- .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-icon,
1981
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-icon,
1982
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-button-icon,
1957
1983
  .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
1958
1984
  fill:rgba(0, 0, 0, 0.2);
1959
1985
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -1973,10 +1999,12 @@ html.iui-theme-dark{
1973
1999
  margin:0;
1974
2000
  padding:0; }
1975
2001
  .iui-page-header .iui-header-split-button{
1976
- height:100%;
1977
- display:flex;
1978
- overflow:hidden;
1979
2002
  max-width:25vw; }
2003
+ .iui-page-header .iui-header-split-button,
2004
+ .iui-page-header .iui-header-split-button > *{
2005
+ height:100%;
2006
+ display:flex;
2007
+ overflow:hidden; }
1980
2008
  .iui-page-header .iui-header-split-button .iui-button{
1981
2009
  padding:0 12px;
1982
2010
  height:49px;
@@ -2053,11 +2081,11 @@ html.iui-theme-dark{
2053
2081
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
2054
2082
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
2055
2083
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
2056
- .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-label{
2084
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-button-label{
2057
2085
  color:rgba(0, 0, 0, 0.2);
2058
2086
  color:var(--iui-icons-color-actionable-disabled); }
2059
- .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-icon,
2060
- .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-icon,
2087
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-icon,
2088
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-button-icon,
2061
2089
  .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
2062
2090
  fill:rgba(0, 0, 0, 0.2);
2063
2091
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -2076,7 +2104,7 @@ html.iui-theme-dark{
2076
2104
  width:0.1px;
2077
2105
  margin:0;
2078
2106
  padding:0; }
2079
- .iui-page-header .iui-header-split-button .iui-button:first-child{
2107
+ .iui-page-header .iui-header-split-button > *:first-child .iui-button{
2080
2108
  padding-left:12px; }
2081
2109
  .iui-page-header .iui-header-split-button.iui-active svg{
2082
2110
  fill:#008BE1;
@@ -2105,11 +2133,11 @@ html.iui-theme-dark{
2105
2133
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
2106
2134
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
2107
2135
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
2108
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-label, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-label{
2136
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-label, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-button-label{
2109
2137
  color:rgba(0, 0, 0, 0.2);
2110
2138
  color:var(--iui-icons-color-actionable-disabled); }
2111
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-icon,
2112
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-icon,
2139
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-icon,
2140
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-button-icon,
2113
2141
  .iui-page-header .iui-header-split-button.iui-active:disabled svg{
2114
2142
  fill:rgba(0, 0, 0, 0.2);
2115
2143
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -2120,7 +2148,7 @@ html.iui-theme-dark{
2120
2148
  background-color:transparent; }
2121
2149
  .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
2122
2150
  display:none; }
2123
- .iui-page-header .iui-header-split-button.iui-active .iui-button:last-child:hover{
2151
+ .iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
2124
2152
  background-color:rgba(0, 139, 225, 0.1);
2125
2153
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
2126
2154
  .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
@@ -2526,7 +2554,7 @@ html.iui-theme-dark{
2526
2554
  -ms-grid-columns:auto 1fr;
2527
2555
  grid-template:'label label' 'inputs inputs' / auto 1fr;
2528
2556
  cursor:default; }
2529
- .iui-input-container.iui-inline-icon:not(.iui-inline-label) .iui-input-icon{
2557
+ .iui-input-container.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon{
2530
2558
  -ms-grid-row:2;
2531
2559
  -ms-grid-column:2; }
2532
2560
  .iui-input-container.iui-inline-icon > .iui-input,
@@ -2539,7 +2567,7 @@ html.iui-theme-dark{
2539
2567
  -ms-grid-rows:auto auto auto;
2540
2568
  -ms-grid-columns:auto 1fr;
2541
2569
  grid-template:'label label' 'inputs inputs' 'icon message' / auto 1fr; }
2542
- .iui-input-container.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
2570
+ .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
2543
2571
  margin-top:3px; }
2544
2572
  .iui-input-container .iui-input,
2545
2573
  .iui-input-container .iui-textarea,
@@ -2580,7 +2608,7 @@ html.iui-theme-dark{
2580
2608
  -ms-grid-rows:auto auto;
2581
2609
  -ms-grid-columns:auto auto 1fr;
2582
2610
  grid-template:'label inputs inputs' '. icon message' / auto auto 1fr; }
2583
- .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
2611
+ .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
2584
2612
  -ms-grid-row:2;
2585
2613
  -ms-grid-column:2; }
2586
2614
  .iui-input-container.iui-inline-label.iui-with-message .iui-message{
@@ -2614,7 +2642,7 @@ html.iui-theme-dark{
2614
2642
  margin-left:4px;
2615
2643
  color:#D30A0A;
2616
2644
  color:var(--iui-color-foreground-negative); }
2617
- .iui-input-container .iui-input-icon{
2645
+ .iui-input-container > .iui-input-icon{
2618
2646
  -ms-grid-row:3;
2619
2647
  -ms-grid-column:1;
2620
2648
  display:flex;
@@ -2625,7 +2653,7 @@ html.iui-theme-dark{
2625
2653
  align-self:center;
2626
2654
  fill:rgba(0, 0, 0, 0.4);
2627
2655
  fill:var(--iui-icons-color); }
2628
- .iui-input-container .iui-input-icon:not(:last-child){
2656
+ .iui-input-container > .iui-input-icon:not(:last-child){
2629
2657
  margin-right:4px; }
2630
2658
  .iui-input-container .iui-message{
2631
2659
  -ms-grid-row:3;
@@ -2645,7 +2673,7 @@ html.iui-theme-dark{
2645
2673
  -ms-grid-column-span:1; }
2646
2674
  .iui-input-container.iui-inline-label > .iui-label.iui-required{
2647
2675
  margin-right:6px; }
2648
- .iui-input-container.iui-inline-icon .iui-input-icon{
2676
+ .iui-input-container.iui-inline-icon > .iui-input-icon{
2649
2677
  -ms-grid-row:1;
2650
2678
  -ms-grid-column:3;
2651
2679
  grid-area:inputs;
@@ -2653,7 +2681,7 @@ html.iui-theme-dark{
2653
2681
  justify-self:end;
2654
2682
  margin:0 12px 0 0;
2655
2683
  position:relative; }
2656
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-button{
2684
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
2657
2685
  height:100%;
2658
2686
  width:-webkit-fit-content;
2659
2687
  width:-moz-fit-content;
@@ -2661,7 +2689,7 @@ html.iui-theme-dark{
2661
2689
  margin-right:0;
2662
2690
  border-top-left-radius:0;
2663
2691
  border-bottom-left-radius:0; }
2664
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable{
2692
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
2665
2693
  align-items:center;
2666
2694
  height:90%;
2667
2695
  margin-right:1px;
@@ -2669,19 +2697,19 @@ html.iui-theme-dark{
2669
2697
  cursor:pointer;
2670
2698
  background-position:center;
2671
2699
  transition:background 0.4s ease-out; }
2672
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:hover{
2700
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
2673
2701
  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
2674
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:active{
2702
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
2675
2703
  background-color:var(--iui-color-background-2);
2676
2704
  background-size:100%;
2677
2705
  transition:background 0s; }
2678
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable svg{
2706
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
2679
2707
  width:16px;
2680
2708
  height:16px;
2681
2709
  fill:rgba(0, 0, 0, 0.4);
2682
2710
  fill:var(--iui-icons-color);
2683
2711
  transition:transform 0.2s ease-out; }
2684
- .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable.iui-open svg{
2712
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
2685
2713
  transform:rotate(180deg); }
2686
2714
  .iui-input-container.iui-positive *::-moz-selection{
2687
2715
  background-color:rgba(83, 162, 26, 0.4);
@@ -4806,9 +4834,6 @@ html.iui-theme-dark{
4806
4834
  flex-direction:column; }
4807
4835
  .iui-table *{
4808
4836
  box-sizing:border-box; }
4809
- .iui-table.iui-zebra-striping > .iui-table-body > .iui-row:nth-child(even):not(.iui-selected){
4810
- background:rgba(0, 0, 0, 0.02);
4811
- background:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
4812
4837
  .iui-table .iui-cell-end-icon,
4813
4838
  .iui-table .iui-cell-start-icon{
4814
4839
  flex-shrink:0;
@@ -4841,8 +4866,13 @@ html.iui-theme-dark{
4841
4866
  -moz-user-select:none;
4842
4867
  -ms-user-select:none;
4843
4868
  user-select:none;
4869
+ overflow:hidden;
4870
+ flex-shrink:0;
4844
4871
  background-color:#EEF0F3;
4845
4872
  background-color:var(--iui-color-background-3); }
4873
+ @supports not (overflow: overlay){
4874
+ .iui-table-header{
4875
+ overflow-y:scroll; } }
4846
4876
  .iui-table-header .iui-row{
4847
4877
  display:flex;
4848
4878
  flex-grow:1; }
@@ -4910,20 +4940,24 @@ html.iui-theme-dark{
4910
4940
  fill:var(--iui-icons-color-actionable); }
4911
4941
 
4912
4942
  .iui-table-body{
4913
- overflow-x:hidden;
4914
4943
  overflow-y:scroll;
4915
- overflow-y:overlay;
4944
+ overflow:overlay;
4916
4945
  display:flex;
4917
4946
  flex-direction:column;
4918
4947
  flex-grow:1;
4948
+ align-items:flex-start;
4919
4949
  background-color:#FFF;
4920
4950
  background-color:var(--iui-color-background-1); }
4921
4951
  .iui-table-body.iui-scroll-snapping{
4922
4952
  -ms-scroll-snap-type:y mandatory;
4923
4953
  scroll-snap-type:y mandatory; }
4924
4954
  .iui-table-body.iui-scroll-snapping .iui-row{
4925
- scroll-snap-align:start; }
4955
+ scroll-snap-align:start none; }
4956
+ .iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
4957
+ background-color:rgba(0, 0, 0, 0.02);
4958
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
4926
4959
  .iui-table-body .iui-row{
4960
+ min-width:100%;
4927
4961
  display:flex;
4928
4962
  border:solid 1px transparent;
4929
4963
  border-bottom-color:#DCE0E3;
@@ -5074,6 +5108,8 @@ html.iui-theme-dark{
5074
5108
  justify-content:center;
5075
5109
  align-items:center;
5076
5110
  flex-grow:1;
5111
+ -ms-grid-row-align:center;
5112
+ align-self:center;
5077
5113
  color:rgba(0, 0, 0, 0.4);
5078
5114
  background-color:#FFF;
5079
5115
  color:var(--iui-text-color-muted);
@@ -5167,23 +5203,23 @@ html.iui-theme-dark{
5167
5203
  color:var(--iui-text-color); }
5168
5204
  .iui-paginator > .iui-center .iui-button-group{
5169
5205
  margin:0 8px; }
5170
- .iui-paginator > .iui-center .iui-button-group > .iui-button,
5171
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
5172
- width:38px; }
5173
- .iui-paginator > .iui-center .iui-button-group > .iui-button.iui-small,
5174
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis.iui-small{
5175
- width:27px; }
5176
- .iui-paginator > .iui-center .iui-button-group > .iui-button{
5177
- transition:none; }
5178
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
5179
- display:flex;
5180
- justify-content:center;
5181
- align-items:center;
5182
- color:rgba(0, 0, 0, 0.4);
5183
- color:var(--iui-text-color-muted); }
5184
- .iui-paginator > .iui-center .iui-button-group > .iui-active::after{
5185
- top:auto;
5186
- bottom:2px; }
5206
+ .iui-paginator > .iui-center .iui-button-group > *{
5207
+ margin-right:0; }
5208
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
5209
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
5210
+ width:38px; }
5211
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
5212
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
5213
+ width:27px; }
5214
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
5215
+ display:flex;
5216
+ justify-content:center;
5217
+ align-items:center;
5218
+ color:rgba(0, 0, 0, 0.4);
5219
+ color:var(--iui-text-color-muted); }
5220
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-active::after{
5221
+ top:auto;
5222
+ bottom:2px; }
5187
5223
  .iui-paginator > .iui-right{
5188
5224
  justify-content:flex-end; }
5189
5225
  .iui-paginator-page-size-label{