@itwin/itwinui-css 0.41.1 → 0.42.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 (10) hide show
  1. package/css/all.css +108 -104
  2. package/css/button.css +69 -70
  3. package/css/header.css +16 -14
  4. package/css/table.css +23 -20
  5. package/package.json +1 -1
  6. package/scss/button/button-group.scss +54 -47
  7. package/scss/button/split-menu.scss +34 -20
  8. package/scss/header/header.scss +16 -8
  9. package/scss/table/paginator.scss +25 -20
  10. package/scss/table/table.scss +6 -6
package/css/all.css CHANGED
@@ -973,29 +973,15 @@ 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{
976
+ align-items:center;
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{
999
985
  content:'';
1000
986
  position:absolute;
1001
987
  height:2px;
@@ -1005,37 +991,37 @@ html.iui-theme-dark{
1005
991
  width:calc(100% - 4px);
1006
992
  background-color:#008BE1;
1007
993
  background-color:var(--iui-color-foreground-primary); }
1008
- .iui-button-group > .iui-active:disabled::after{
994
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
1009
995
  background-color:rgba(0, 0, 0, 0.2);
1010
996
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1011
-
1012
- .iui-button-split-menu{
1013
- display:inline-flex;
1014
- align-items:center;
1015
- display:inline-flex;
1016
- align-items:center; }
1017
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
997
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
1018
998
  border-radius:0; }
1019
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
999
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
1020
1000
  border-top-left-radius:3px;
1021
1001
  border-bottom-left-radius:3px; }
1022
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
1002
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
1023
1003
  border-top-right-radius:3px;
1024
1004
  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{
1005
+ .iui-button-group > *:not(:last-child){
1006
+ margin-right:-1px; }
1007
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
1036
1008
  border-left-color:#DCE0E3;
1037
1009
  border-left-color:var(--iui-color-background-4); }
1038
- .iui-button-split-menu > .iui-active::after{
1010
+
1011
+ .iui-button-split-menu{
1012
+ display:inline-flex;
1013
+ align-items:center;
1014
+ isolation:isolate;
1015
+ display:inline-flex;
1016
+ align-items:center;
1017
+ 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{
1039
1025
  content:'';
1040
1026
  position:absolute;
1041
1027
  height:2px;
@@ -1045,31 +1031,29 @@ html.iui-theme-dark{
1045
1031
  width:calc(100% - 4px);
1046
1032
  background-color:#008BE1;
1047
1033
  background-color:var(--iui-color-foreground-primary); }
1048
- .iui-button-split-menu > .iui-active:disabled::after{
1034
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1049
1035
  background-color:rgba(0, 0, 0, 0.2);
1050
1036
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1051
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
1037
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
1052
1038
  border-radius:0; }
1053
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
1039
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
1054
1040
  border-top-left-radius:3px;
1055
1041
  border-bottom-left-radius:3px; }
1056
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
1042
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
1057
1043
  border-top-right-radius:3px;
1058
1044
  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{
1045
+ .iui-button-split-menu > *:not(:last-child){
1046
+ margin-right:-1px; }
1047
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
1070
1048
  border-left-color:#DCE0E3;
1071
1049
  border-left-color:var(--iui-color-background-4); }
1072
- .iui-button-split-menu > .iui-active::after{
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{
1073
1057
  content:'';
1074
1058
  position:absolute;
1075
1059
  height:2px;
@@ -1079,24 +1063,39 @@ html.iui-theme-dark{
1079
1063
  width:calc(100% - 4px);
1080
1064
  background-color:#008BE1;
1081
1065
  background-color:var(--iui-color-foreground-primary); }
1082
- .iui-button-split-menu > .iui-active:disabled::after{
1066
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
1083
1067
  background-color:rgba(0, 0, 0, 0.2);
1084
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); }
1085
1082
  .iui-button-split-menu:hover{
1086
1083
  background-color:rgba(0, 0, 0, 0.1);
1087
1084
  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{
1085
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
1089
1086
  background-color:transparent; }
1090
- .iui-button-split-menu > .iui-button + .iui-button{
1087
+ .iui-button-split-menu > *:last-child > .iui-button{
1091
1088
  padding:4px; }
1092
- .iui-button-split-menu > .iui-small + .iui-small{
1089
+ .iui-button-split-menu > *:last-child > .iui-small{
1093
1090
  padding:2px; }
1094
- .iui-button-split-menu > .iui-large + .iui-large{
1091
+ .iui-button-split-menu > *:last-child > .iui-large{
1095
1092
  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{
1093
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
1094
+ .iui-button-split-menu > *:first-child > .iui-cta{
1095
+ border-right-color:rgba(255, 255, 255, 0.4);
1096
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
1097
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
1098
+ .iui-button-split-menu > *:last-child > .iui-cta{
1100
1099
  border-left-color:rgba(255, 255, 255, 0.4);
1101
1100
  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
1102
1101
  .iui-button-split-menu.iui-disabled{
@@ -1949,11 +1948,11 @@ html.iui-theme-dark{
1949
1948
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
1950
1949
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
1951
1950
  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{
1951
+ .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
1952
  color:rgba(0, 0, 0, 0.2);
1954
1953
  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,
1954
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-icon,
1955
+ .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
1956
  .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
1958
1957
  fill:rgba(0, 0, 0, 0.2);
1959
1958
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -1973,10 +1972,12 @@ html.iui-theme-dark{
1973
1972
  margin:0;
1974
1973
  padding:0; }
1975
1974
  .iui-page-header .iui-header-split-button{
1976
- height:100%;
1977
- display:flex;
1978
- overflow:hidden;
1979
1975
  max-width:25vw; }
1976
+ .iui-page-header .iui-header-split-button,
1977
+ .iui-page-header .iui-header-split-button > *{
1978
+ height:100%;
1979
+ display:flex;
1980
+ overflow:hidden; }
1980
1981
  .iui-page-header .iui-header-split-button .iui-button{
1981
1982
  padding:0 12px;
1982
1983
  height:49px;
@@ -2053,11 +2054,11 @@ html.iui-theme-dark{
2053
2054
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
2054
2055
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
2055
2056
  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{
2057
+ .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
2058
  color:rgba(0, 0, 0, 0.2);
2058
2059
  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,
2060
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-icon,
2061
+ .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
2062
  .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
2062
2063
  fill:rgba(0, 0, 0, 0.2);
2063
2064
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -2076,7 +2077,7 @@ html.iui-theme-dark{
2076
2077
  width:0.1px;
2077
2078
  margin:0;
2078
2079
  padding:0; }
2079
- .iui-page-header .iui-header-split-button .iui-button:first-child{
2080
+ .iui-page-header .iui-header-split-button > *:first-child .iui-button{
2080
2081
  padding-left:12px; }
2081
2082
  .iui-page-header .iui-header-split-button.iui-active svg{
2082
2083
  fill:#008BE1;
@@ -2105,11 +2106,11 @@ html.iui-theme-dark{
2105
2106
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
2106
2107
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
2107
2108
  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{
2109
+ .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
2110
  color:rgba(0, 0, 0, 0.2);
2110
2111
  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,
2112
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-icon,
2113
+ .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
2114
  .iui-page-header .iui-header-split-button.iui-active:disabled svg{
2114
2115
  fill:rgba(0, 0, 0, 0.2);
2115
2116
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -2120,7 +2121,7 @@ html.iui-theme-dark{
2120
2121
  background-color:transparent; }
2121
2122
  .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
2122
2123
  display:none; }
2123
- .iui-page-header .iui-header-split-button.iui-active .iui-button:last-child:hover{
2124
+ .iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
2124
2125
  background-color:rgba(0, 139, 225, 0.1);
2125
2126
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
2126
2127
  .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
@@ -4806,9 +4807,6 @@ html.iui-theme-dark{
4806
4807
  flex-direction:column; }
4807
4808
  .iui-table *{
4808
4809
  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
4810
  .iui-table .iui-cell-end-icon,
4813
4811
  .iui-table .iui-cell-start-icon{
4814
4812
  flex-shrink:0;
@@ -4923,6 +4921,9 @@ html.iui-theme-dark{
4923
4921
  scroll-snap-type:y mandatory; }
4924
4922
  .iui-table-body.iui-scroll-snapping .iui-row{
4925
4923
  scroll-snap-align:start; }
4924
+ .iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
4925
+ background-color:rgba(0, 0, 0, 0.02);
4926
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
4926
4927
  .iui-table-body .iui-row{
4927
4928
  display:flex;
4928
4929
  border:solid 1px transparent;
@@ -5167,23 +5168,26 @@ html.iui-theme-dark{
5167
5168
  color:var(--iui-text-color); }
5168
5169
  .iui-paginator > .iui-center .iui-button-group{
5169
5170
  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; }
5171
+ .iui-paginator > .iui-center .iui-button-group > *{
5172
+ margin-right:0;
5173
+ display:flex; }
5174
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
5175
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
5176
+ width:38px; }
5177
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
5178
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
5179
+ width:27px; }
5180
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button{
5181
+ transition:none; }
5182
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
5183
+ display:flex;
5184
+ justify-content:center;
5185
+ align-items:center;
5186
+ color:rgba(0, 0, 0, 0.4);
5187
+ color:var(--iui-text-color-muted); }
5188
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-active::after{
5189
+ top:auto;
5190
+ bottom:2px; }
5187
5191
  .iui-paginator > .iui-right{
5188
5192
  justify-content:flex-end; }
5189
5193
  .iui-paginator-page-size-label{
package/css/button.css CHANGED
@@ -303,29 +303,15 @@
303
303
 
304
304
  .iui-button-group{
305
305
  display:inline-flex;
306
- align-items:center; }
307
- .iui-button-group > .iui-button:not(.iui-borderless){
308
- border-radius:0; }
309
- .iui-button-group > .iui-button:first-of-type:not(.iui-borderless){
310
- border-top-left-radius:3px;
311
- border-bottom-left-radius:3px; }
312
- .iui-button-group > .iui-button:last-of-type:not(.iui-borderless){
313
- border-top-right-radius:3px;
314
- border-bottom-right-radius:3px; }
315
- .iui-button-group > .iui-button.iui-default:not(:last-of-type){
316
- border-right:none; }
317
- .iui-button-group > .iui-button.iui-default:not(:disabled) + :disabled{
318
- border-left-color:rgba(0, 0, 0, 0.4);
319
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
320
- .iui-button-group > .iui-button.iui-default:not(:disabled):hover + .iui-button,
321
- .iui-button-group > .iui-button.iui-default:not(:disabled):active + .iui-button,
322
- .iui-button-group > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
323
- border-left-color:black;
324
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
325
- .iui-button-group > .iui-button.iui-default:disabled + .iui-button:disabled{
326
- border-left-color:#DCE0E3;
327
- border-left-color:var(--iui-color-background-4); }
328
- .iui-button-group > .iui-active::after{
306
+ align-items:center;
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{
329
315
  content:'';
330
316
  position:absolute;
331
317
  height:2px;
@@ -335,37 +321,37 @@
335
321
  width:calc(100% - 4px);
336
322
  background-color:#008BE1;
337
323
  background-color:var(--iui-color-foreground-primary); }
338
- .iui-button-group > .iui-active:disabled::after{
324
+ .iui-button-group > * input.iui-active:disabled::after, .iui-button-group > * button.iui-active:disabled::after{
339
325
  background-color:rgba(0, 0, 0, 0.2);
340
326
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
341
-
342
- .iui-button-split-menu{
343
- display:inline-flex;
344
- align-items:center;
345
- display:inline-flex;
346
- align-items:center; }
347
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
327
+ .iui-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
348
328
  border-radius:0; }
349
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
329
+ .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
350
330
  border-top-left-radius:3px;
351
331
  border-bottom-left-radius:3px; }
352
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
332
+ .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
353
333
  border-top-right-radius:3px;
354
334
  border-bottom-right-radius:3px; }
355
- .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
356
- border-right:none; }
357
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
358
- border-left-color:rgba(0, 0, 0, 0.4);
359
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
360
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
361
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
362
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
363
- border-left-color:black;
364
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
365
- .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
335
+ .iui-button-group > *:not(:last-child){
336
+ margin-right:-1px; }
337
+ .iui-button-group > *:not(:first-child) .iui-default:disabled{
366
338
  border-left-color:#DCE0E3;
367
339
  border-left-color:var(--iui-color-background-4); }
368
- .iui-button-split-menu > .iui-active::after{
340
+
341
+ .iui-button-split-menu{
342
+ display:inline-flex;
343
+ align-items:center;
344
+ isolation:isolate;
345
+ display:inline-flex;
346
+ align-items:center;
347
+ 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{
369
355
  content:'';
370
356
  position:absolute;
371
357
  height:2px;
@@ -375,31 +361,29 @@
375
361
  width:calc(100% - 4px);
376
362
  background-color:#008BE1;
377
363
  background-color:var(--iui-color-foreground-primary); }
378
- .iui-button-split-menu > .iui-active:disabled::after{
364
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
379
365
  background-color:rgba(0, 0, 0, 0.2);
380
366
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
381
- .iui-button-split-menu > .iui-button:not(.iui-borderless){
367
+ .iui-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
382
368
  border-radius:0; }
383
- .iui-button-split-menu > .iui-button:first-of-type:not(.iui-borderless){
369
+ .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
384
370
  border-top-left-radius:3px;
385
371
  border-bottom-left-radius:3px; }
386
- .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
372
+ .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
387
373
  border-top-right-radius:3px;
388
374
  border-bottom-right-radius:3px; }
389
- .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
390
- border-right:none; }
391
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
392
- border-left-color:rgba(0, 0, 0, 0.4);
393
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
394
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
395
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
396
- .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
397
- border-left-color:black;
398
- border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
399
- .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
375
+ .iui-button-split-menu > *:not(:last-child){
376
+ margin-right:-1px; }
377
+ .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
400
378
  border-left-color:#DCE0E3;
401
379
  border-left-color:var(--iui-color-background-4); }
402
- .iui-button-split-menu > .iui-active::after{
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{
403
387
  content:'';
404
388
  position:absolute;
405
389
  height:2px;
@@ -409,24 +393,39 @@
409
393
  width:calc(100% - 4px);
410
394
  background-color:#008BE1;
411
395
  background-color:var(--iui-color-foreground-primary); }
412
- .iui-button-split-menu > .iui-active:disabled::after{
396
+ .iui-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * button.iui-active:disabled::after{
413
397
  background-color:rgba(0, 0, 0, 0.2);
414
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); }
415
412
  .iui-button-split-menu:hover{
416
413
  background-color:rgba(0, 0, 0, 0.1);
417
414
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
418
- .iui-button-split-menu .iui-button:first-child.iui-borderless:hover{
415
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
419
416
  background-color:transparent; }
420
- .iui-button-split-menu > .iui-button + .iui-button{
417
+ .iui-button-split-menu > *:last-child > .iui-button{
421
418
  padding:4px; }
422
- .iui-button-split-menu > .iui-small + .iui-small{
419
+ .iui-button-split-menu > *:last-child > .iui-small{
423
420
  padding:2px; }
424
- .iui-button-split-menu > .iui-large + .iui-large{
421
+ .iui-button-split-menu > *:last-child > .iui-large{
425
422
  padding:8px; }
426
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility,
427
- .iui-button-split-menu > .iui-high-visibility + .iui-high-visibility:hover,
428
- .iui-button-split-menu > .iui-cta + .iui-cta,
429
- .iui-button-split-menu > .iui-cta + .iui-cta:hover{
423
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
424
+ .iui-button-split-menu > *:first-child > .iui-cta{
425
+ border-right-color:rgba(255, 255, 255, 0.4);
426
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
427
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
428
+ .iui-button-split-menu > *:last-child > .iui-cta{
430
429
  border-left-color:rgba(255, 255, 255, 0.4);
431
430
  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
432
431
  .iui-button-split-menu.iui-disabled{
package/css/header.css CHANGED
@@ -114,11 +114,11 @@
114
114
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
115
115
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
116
116
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
117
- .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{
117
+ .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{
118
118
  color:rgba(0, 0, 0, 0.2);
119
119
  color:var(--iui-icons-color-actionable-disabled); }
120
- .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-icon,
121
- .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,
120
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-icon,
121
+ .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,
122
122
  .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
123
123
  fill:rgba(0, 0, 0, 0.2);
124
124
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -138,10 +138,12 @@
138
138
  margin:0;
139
139
  padding:0; }
140
140
  .iui-page-header .iui-header-split-button{
141
- height:100%;
142
- display:flex;
143
- overflow:hidden;
144
141
  max-width:25vw; }
142
+ .iui-page-header .iui-header-split-button,
143
+ .iui-page-header .iui-header-split-button > *{
144
+ height:100%;
145
+ display:flex;
146
+ overflow:hidden; }
145
147
  .iui-page-header .iui-header-split-button .iui-button{
146
148
  padding:0 12px;
147
149
  height:49px;
@@ -218,11 +220,11 @@
218
220
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
219
221
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
220
222
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
221
- .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{
223
+ .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{
222
224
  color:rgba(0, 0, 0, 0.2);
223
225
  color:var(--iui-icons-color-actionable-disabled); }
224
- .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-icon,
225
- .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,
226
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-icon,
227
+ .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,
226
228
  .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
227
229
  fill:rgba(0, 0, 0, 0.2);
228
230
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -241,7 +243,7 @@
241
243
  width:0.1px;
242
244
  margin:0;
243
245
  padding:0; }
244
- .iui-page-header .iui-header-split-button .iui-button:first-child{
246
+ .iui-page-header .iui-header-split-button > *:first-child .iui-button{
245
247
  padding-left:12px; }
246
248
  .iui-page-header .iui-header-split-button.iui-active svg{
247
249
  fill:#008BE1;
@@ -270,11 +272,11 @@
270
272
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
271
273
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
272
274
  box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
273
- .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{
275
+ .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{
274
276
  color:rgba(0, 0, 0, 0.2);
275
277
  color:var(--iui-icons-color-actionable-disabled); }
276
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-icon,
277
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled svg, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-icon,
278
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-icon,
279
+ .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,
278
280
  .iui-page-header .iui-header-split-button.iui-active:disabled svg{
279
281
  fill:rgba(0, 0, 0, 0.2);
280
282
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -285,7 +287,7 @@
285
287
  background-color:transparent; }
286
288
  .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
287
289
  display:none; }
288
- .iui-page-header .iui-header-split-button.iui-active .iui-button:last-child:hover{
290
+ .iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
289
291
  background-color:rgba(0, 139, 225, 0.1);
290
292
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
291
293
  .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
package/css/table.css CHANGED
@@ -12,9 +12,6 @@
12
12
  flex-direction:column; }
13
13
  .iui-table *{
14
14
  box-sizing:border-box; }
15
- .iui-table.iui-zebra-striping > .iui-table-body > .iui-row:nth-child(even):not(.iui-selected){
16
- background:rgba(0, 0, 0, 0.02);
17
- background:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
18
15
  .iui-table .iui-cell-end-icon,
19
16
  .iui-table .iui-cell-start-icon{
20
17
  flex-shrink:0;
@@ -129,6 +126,9 @@
129
126
  scroll-snap-type:y mandatory; }
130
127
  .iui-table-body.iui-scroll-snapping .iui-row{
131
128
  scroll-snap-align:start; }
129
+ .iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
130
+ background-color:rgba(0, 0, 0, 0.02);
131
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
132
132
  .iui-table-body .iui-row{
133
133
  display:flex;
134
134
  border:solid 1px transparent;
@@ -373,23 +373,26 @@
373
373
  color:var(--iui-text-color); }
374
374
  .iui-paginator > .iui-center .iui-button-group{
375
375
  margin:0 8px; }
376
- .iui-paginator > .iui-center .iui-button-group > .iui-button,
377
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
378
- width:38px; }
379
- .iui-paginator > .iui-center .iui-button-group > .iui-button.iui-small,
380
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis.iui-small{
381
- width:27px; }
382
- .iui-paginator > .iui-center .iui-button-group > .iui-button{
383
- transition:none; }
384
- .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
385
- display:flex;
386
- justify-content:center;
387
- align-items:center;
388
- color:rgba(0, 0, 0, 0.4);
389
- color:var(--iui-text-color-muted); }
390
- .iui-paginator > .iui-center .iui-button-group > .iui-active::after{
391
- top:auto;
392
- bottom:2px; }
376
+ .iui-paginator > .iui-center .iui-button-group > *{
377
+ margin-right:0;
378
+ display:flex; }
379
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
380
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
381
+ width:38px; }
382
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
383
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
384
+ width:27px; }
385
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-button{
386
+ transition:none; }
387
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
388
+ display:flex;
389
+ justify-content:center;
390
+ align-items:center;
391
+ color:rgba(0, 0, 0, 0.4);
392
+ color:var(--iui-text-color-muted); }
393
+ .iui-paginator > .iui-center .iui-button-group > * > .iui-active::after{
394
+ top:auto;
395
+ bottom:2px; }
393
396
  .iui-paginator > .iui-right{
394
397
  justify-content:flex-end; }
395
398
  .iui-paginator-page-size-label{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.41.1",
3
+ "version": "0.42.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/button/button-group.scss CHANGED
@@ -5,72 +5,79 @@
5
5
  @mixin iui-button-group {
6
6
  display: inline-flex;
7
7
  align-items: center;
8
+ isolation: isolate;
8
9
 
9
- > .iui-button {
10
- &:not(.iui-borderless) {
11
- border-radius: 0;
12
- }
13
-
14
- &:first-of-type:not(.iui-borderless) {
15
- border-top-left-radius: $iui-border-radius;
16
- border-bottom-left-radius: $iui-border-radius;
17
- }
10
+ $childSelector: 'input, button'; // target nested inputs and buttons
18
11
 
19
- &:last-of-type:not(.iui-borderless) {
20
- border-top-right-radius: $iui-border-radius;
21
- border-bottom-right-radius: $iui-border-radius;
22
- }
12
+ > * {
13
+ #{$childSelector} {
14
+ &:hover,
15
+ &:focus,
16
+ &:focus-within {
17
+ position: relative;
18
+ z-index: 1;
19
+ }
23
20
 
24
- &.iui-default:not(:last-of-type) {
25
- border-right: none;
26
- }
21
+ &:disabled {
22
+ position: relative;
23
+ z-index: -1;
24
+ }
27
25
 
28
- &.iui-default {
29
- // Border trick for grouped default & disabled buttons
30
- &:not(:disabled) {
31
- + :disabled {
26
+ // Adds stripe above active button
27
+ &.iui-active {
28
+ &::after {
29
+ content: '';
30
+ position: absolute;
31
+ height: $iui-xxs;
32
+ opacity: 1;
33
+ top: $iui-xxs;
34
+ left: $iui-xxs;
35
+ width: calc(100% - #{$iui-xs});
32
36
  @include themed {
33
- border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
37
+ background-color: t(iui-color-foreground-primary);
34
38
  }
35
39
  }
36
40
 
37
- &:hover + .iui-button,
38
- &:active + .iui-button,
39
- &:focus-visible + .iui-button {
40
- @include themed {
41
- border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
41
+ &:disabled {
42
+ &::after {
43
+ @include themed {
44
+ background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
45
+ }
42
46
  }
43
47
  }
44
48
  }
45
49
 
46
- // Border between 2 side-by-side disabled buttons
47
- &:disabled + .iui-button:disabled {
48
- @include themed {
49
- border-left-color: t(iui-color-background-4);
50
- }
50
+ // Reset border radius only for non-borderless items
51
+ &:not(.iui-borderless) {
52
+ border-radius: 0;
51
53
  }
52
54
  }
53
- }
54
55
 
55
- // Adds stripe above active button
56
- > .iui-active {
57
- &::after {
58
- content: '';
59
- position: absolute;
60
- height: $iui-xxs;
61
- opacity: 1;
62
- top: $iui-xxs;
63
- left: $iui-xxs;
64
- width: calc(100% - #{$iui-xs});
65
- @include themed {
66
- background-color: t(iui-color-foreground-primary);
56
+ // Add rounded corners to first and last items
57
+ &:first-child {
58
+ #{$childSelector}:not(.iui-borderless) {
59
+ border-top-left-radius: $iui-border-radius;
60
+ border-bottom-left-radius: $iui-border-radius;
67
61
  }
68
62
  }
69
63
 
70
- &:disabled {
71
- &::after {
64
+ &:last-child {
65
+ #{$childSelector}:not(.iui-borderless) {
66
+ border-top-right-radius: $iui-border-radius;
67
+ border-bottom-right-radius: $iui-border-radius;
68
+ }
69
+ }
70
+
71
+ // Use negative margin to make adjacent borders overlap
72
+ &:not(:last-child) {
73
+ margin-right: -1px;
74
+ }
75
+
76
+ // Add slight border between disabled items
77
+ &:not(:first-child) {
78
+ .iui-default:disabled {
72
79
  @include themed {
73
- background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
80
+ border-left-color: t(iui-color-background-4);
74
81
  }
75
82
  }
76
83
  }
package/scss/button/split-menu.scss CHANGED
@@ -11,31 +11,45 @@
11
11
  }
12
12
  }
13
13
 
14
- .iui-button:first-child {
15
- &.iui-borderless:hover {
16
- background-color: transparent;
14
+ > * {
15
+ &:first-child {
16
+ > .iui-borderless:hover {
17
+ background-color: transparent;
18
+ }
17
19
  }
18
- }
19
20
 
20
- // Sizes
21
- > .iui-button + .iui-button {
22
- padding: $iui-xs;
23
- }
21
+ // Sizes
22
+ &:last-child {
23
+ > .iui-button {
24
+ padding: $iui-xs;
25
+ }
24
26
 
25
- > .iui-small + .iui-small {
26
- padding: $iui-xxs;
27
- }
27
+ > .iui-small {
28
+ padding: $iui-xxs;
29
+ }
28
30
 
29
- > .iui-large + .iui-large {
30
- padding: $iui-s;
31
- }
31
+ > .iui-large {
32
+ padding: $iui-s;
33
+ }
34
+ }
32
35
 
33
- > .iui-high-visibility + .iui-high-visibility,
34
- > .iui-high-visibility + .iui-high-visibility:hover,
35
- > .iui-cta + .iui-cta,
36
- > .iui-cta + .iui-cta:hover {
37
- @include themed {
38
- border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
36
+ // Border between buttons for high-visibility and cta
37
+ &:first-child {
38
+ > .iui-high-visibility,
39
+ > .iui-cta {
40
+ @include themed {
41
+ border-right-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
42
+ }
43
+ }
44
+ }
45
+
46
+ &:last-child {
47
+ > .iui-high-visibility,
48
+ > .iui-cta {
49
+ @include themed {
50
+ border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
51
+ }
52
+ }
39
53
  }
40
54
  }
41
55
 
package/scss/header/header.scss CHANGED
@@ -314,9 +314,13 @@
314
314
  }
315
315
 
316
316
  @mixin iui-header-split-button {
317
- height: 100%;
318
- display: flex;
319
- overflow: hidden;
317
+ &,
318
+ > * {
319
+ height: 100%;
320
+ display: flex;
321
+ overflow: hidden;
322
+ }
323
+
320
324
  max-width: 25vw;
321
325
 
322
326
  .iui-button {
@@ -324,8 +328,10 @@
324
328
  padding: 0 $iui-xs;
325
329
  }
326
330
 
327
- .iui-button:first-child {
328
- padding-left: $iui-sm;
331
+ > *:first-child {
332
+ .iui-button {
333
+ padding-left: $iui-sm;
334
+ }
329
335
  }
330
336
 
331
337
  &.iui-active {
@@ -343,8 +349,10 @@
343
349
  display: none;
344
350
  }
345
351
  }
352
+ }
346
353
 
347
- &:last-child:hover {
354
+ > *:last-child {
355
+ > .iui-button:hover {
348
356
  @include themed {
349
357
  background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
350
358
  }
@@ -415,13 +423,13 @@
415
423
  box-shadow: 0 $iui-xxs 0 0 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
416
424
  }
417
425
 
418
- .iui-label {
426
+ .iui-button-label {
419
427
  @include themed {
420
428
  color: t(iui-icons-color-actionable-disabled);
421
429
  }
422
430
  }
423
431
 
424
- .iui-icon,
432
+ .iui-button-icon,
425
433
  svg {
426
434
  @include themed {
427
435
  fill: t(iui-icons-color-actionable-disabled);
package/scss/table/paginator.scss CHANGED
@@ -38,32 +38,37 @@
38
38
  .iui-button-group {
39
39
  margin: 0 $iui-s;
40
40
 
41
- > .iui-button,
42
- > .iui-ellipsis {
43
- width: $iui-component-height;
41
+ > * {
42
+ margin-right: 0; // unset negative margin from button-group
43
+ display: flex; // for vertically aligning svgs
44
44
 
45
- &.iui-small {
46
- width: $iui-component-height-small;
45
+ > .iui-button,
46
+ > .iui-ellipsis {
47
+ width: $iui-component-height;
48
+
49
+ &.iui-small {
50
+ width: $iui-component-height-small;
51
+ }
47
52
  }
48
- }
49
53
 
50
- > .iui-button {
51
- // Animation looks odd when switching pages
52
- transition: none;
53
- }
54
+ > .iui-button {
55
+ // Animation looks odd when switching pages
56
+ transition: none;
57
+ }
54
58
 
55
- > .iui-ellipsis {
56
- display: flex;
57
- justify-content: center;
58
- align-items: center;
59
- @include themed {
60
- color: t(iui-text-color-muted);
59
+ > .iui-ellipsis {
60
+ display: flex;
61
+ justify-content: center;
62
+ align-items: center;
63
+ @include themed {
64
+ color: t(iui-text-color-muted);
65
+ }
61
66
  }
62
- }
63
67
 
64
- > .iui-active::after {
65
- top: auto;
66
- bottom: $iui-xxs;
68
+ > .iui-active::after {
69
+ top: auto;
70
+ bottom: $iui-xxs;
71
+ }
67
72
  }
68
73
  }
69
74
  }
package/scss/table/table.scss CHANGED
@@ -13,12 +13,6 @@
13
13
  box-sizing: border-box;
14
14
  }
15
15
 
16
- &.iui-zebra-striping > .iui-table-body > .iui-row:nth-child(even):not(.iui-selected) {
17
- @include themed {
18
- background: rgba(t(iui-color-foreground-body-rgb), 0.02);
19
- }
20
- }
21
-
22
16
  @include iui-table-cell-icon;
23
17
  }
24
18
 
@@ -134,6 +128,12 @@
134
128
  background-color: t(iui-color-background-1);
135
129
  }
136
130
 
131
+ &.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected) {
132
+ @include themed {
133
+ background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
134
+ }
135
+ }
136
+
137
137
  .iui-row {
138
138
  display: flex;
139
139
  border: solid 1px transparent;