@itwin/itwinui-css 0.41.1 → 0.44.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 (60) hide show
  1. package/css/alert.css +46 -61
  2. package/css/all.css +755 -715
  3. package/css/breadcrumbs.css +7 -20
  4. package/css/button.css +172 -194
  5. package/css/code.css +6 -9
  6. package/css/color-picker.css +14 -14
  7. package/css/date-picker.css +91 -85
  8. package/css/expandable-block.css +13 -9
  9. package/css/file-upload.css +4 -3
  10. package/css/footer.css +7 -20
  11. package/css/global.css +7 -9
  12. package/css/header.css +20 -38
  13. package/css/inputs.css +111 -80
  14. package/css/side-navigation.css +1 -16
  15. package/css/slider.css +7 -10
  16. package/css/table.css +173 -34
  17. package/css/tabs.css +8 -3
  18. package/css/tag.css +17 -18
  19. package/css/tile.css +0 -14
  20. package/css/time-picker.css +26 -18
  21. package/css/toast-notification.css +12 -49
  22. package/css/toggle-switch.css +7 -4
  23. package/css/tree.css +2 -3
  24. package/css/wizard.css +4 -4
  25. package/package.json +3 -3
  26. package/scss/alert/alert.scss +4 -2
  27. package/scss/button/borderless.scss +10 -26
  28. package/scss/button/button-group.scss +68 -46
  29. package/scss/button/cta.scss +10 -25
  30. package/scss/button/default.scss +11 -26
  31. package/scss/button/high-visibility.scss +10 -25
  32. package/scss/button/split-menu.scss +34 -20
  33. package/scss/color-picker/color-picker.scss +2 -25
  34. package/scss/date-picker/classes.scss +20 -0
  35. package/scss/date-picker/date-picker.scss +88 -100
  36. package/scss/expandable-block/block.scss +1 -0
  37. package/scss/file-upload/file-upload.scss +2 -2
  38. package/scss/footer/footer.scss +0 -2
  39. package/scss/header/header.scss +17 -23
  40. package/scss/inputs/checkbox-radio.scss +28 -18
  41. package/scss/inputs/checkbox.scss +9 -8
  42. package/scss/inputs/input.scss +1 -14
  43. package/scss/inputs/labeled-inputs.scss +2 -1
  44. package/scss/inputs/radio-tile.scss +9 -4
  45. package/scss/inputs/select.scss +1 -1
  46. package/scss/side-navigation/side-navigation.scss +1 -33
  47. package/scss/slider/slider.scss +1 -2
  48. package/scss/style/mixins.scss +15 -17
  49. package/scss/table/classes.scss +12 -0
  50. package/scss/table/paginator.scss +39 -32
  51. package/scss/table/table.scss +17 -8
  52. package/scss/tabs/default.scss +5 -0
  53. package/scss/tabs/tabs.scss +1 -8
  54. package/scss/tag/tag.scss +9 -1
  55. package/scss/time-picker/time-picker.scss +1 -0
  56. package/scss/toast-notification/categories.scss +5 -2
  57. package/scss/toast-notification/toast.scss +0 -1
  58. package/scss/toggle-switch/toggle-switch.scss +7 -3
  59. package/scss/tree/tree.scss +2 -2
  60. package/scss/wizard/wizard.scss +3 -3
package/css/date-picker.css CHANGED
@@ -22,90 +22,96 @@
22
22
  display:inline-flex;
23
23
  background-color:#FFF;
24
24
  background-color:var(--iui-color-background-1); }
25
- .iui-date-picker > .iui-calendar > .iui-header{
26
- border:none;
27
- padding:0;
28
- position:relative;
29
- font-weight:700;
30
- background-color:#FFF;
31
- background-color:var(--iui-color-background-1); }
32
- .iui-date-picker > .iui-calendar > .iui-header > .iui-month-year{
33
- display:inline-flex;
34
- width:100%;
35
- align-items:center;
36
- justify-content:space-between;
37
- padding:0 4px;
38
- box-sizing:border-box; }
39
- .iui-date-picker > .iui-calendar > .iui-header > .iui-month-year > span{
40
- margin:0 4px;
41
- width:156px;
42
- white-space:nowrap;
43
- display:inline-flex;
44
- flex-shrink:0;
45
- align-items:center;
46
- justify-content:center;
47
- line-height:44px; }
48
- .iui-date-picker > .iui-calendar > .iui-header > .iui-month-year .iui-month{
49
- overflow:hidden;
50
- max-width:15ch;
51
- text-overflow:ellipsis;
52
- white-space:nowrap;
53
- flex-shrink:0; }
54
- .iui-date-picker > .iui-calendar > .iui-header > .iui-weekdays{
55
- line-height:33px;
56
- display:flex;
57
- justify-content:space-evenly;
58
- align-items:center;
59
- padding:0 8px;
60
- background-color:#F8F9FB;
61
- background-color:var(--iui-color-background-2); }
62
- .iui-date-picker > .iui-calendar > .iui-header > .iui-weekdays > div{
63
- white-space:nowrap;
64
- overflow:hidden;
65
- width:32px;
66
- text-align:center; }
67
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week{
25
+
26
+ .iui-calendar-month-year{
27
+ display:inline-flex;
28
+ width:100%;
29
+ align-items:center;
30
+ justify-content:space-between;
31
+ padding:0 4px;
32
+ box-sizing:border-box;
33
+ font-weight:700;
34
+ background-color:#FFF;
35
+ background-color:var(--iui-color-background-1); }
36
+ .iui-calendar-month-year > span{
37
+ margin:0 4px;
38
+ width:156px;
68
39
  white-space:nowrap;
69
- height:33px;
70
- display:flex;
40
+ display:inline-flex;
41
+ flex-shrink:0;
71
42
  align-items:center;
72
- justify-content:space-evenly;
73
- padding:0 8px; }
74
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date{
75
- cursor:pointer;
76
- display:inline-block;
77
- width:33px;
78
- line-height:33px; }
79
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus{
80
- outline:0;
81
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
82
- box-shadow:var(--iui-focus-box-shadow); }
83
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus:not(:focus-visible){
84
- box-shadow:none; }
85
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus-visible{
86
- outline:0;
87
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
88
- box-shadow:var(--iui-focus-box-shadow); }
89
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:hover:not(.iui-selected){
90
- border-radius:3px;
91
- font-weight:600;
92
- color:#008BE1;
93
- background-color:rgba(0, 139, 225, 0.1);
94
- color:var(--iui-color-foreground-primary);
95
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
96
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date.iui-today{
97
- font-weight:600;
98
- border-radius:50%;
99
- background-color:rgba(0, 0, 0, 0.1);
100
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
101
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date.iui-selected{
102
- font-weight:600;
103
- border-radius:3px;
104
- cursor:default;
105
- background-color:#008BE1;
106
- color:#FFF;
107
- background-color:var(--iui-color-background-primary);
108
- color:var(--iui-color-foreground-accessory); }
109
- .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date.iui-outside-month{
110
- color:rgba(0, 0, 0, 0.4);
111
- color:var(--iui-text-color-muted); }
43
+ justify-content:center;
44
+ line-height:44px; }
45
+
46
+ .iui-calendar-month{
47
+ overflow:hidden;
48
+ max-width:15ch;
49
+ text-overflow:ellipsis;
50
+ white-space:nowrap;
51
+ flex-shrink:0; }
52
+
53
+ .iui-calendar-weekdays{
54
+ line-height:33px;
55
+ display:flex;
56
+ justify-content:space-evenly;
57
+ align-items:center;
58
+ padding:0 8px;
59
+ font-weight:700;
60
+ background-color:#F8F9FB;
61
+ background-color:var(--iui-color-background-2); }
62
+ .iui-calendar-weekdays > div{
63
+ white-space:nowrap;
64
+ overflow:hidden;
65
+ width:32px;
66
+ text-align:center; }
67
+
68
+ .iui-calendar-week{
69
+ white-space:nowrap;
70
+ height:33px;
71
+ display:flex;
72
+ align-items:center;
73
+ justify-content:space-evenly;
74
+ padding:0 8px; }
75
+
76
+ .iui-calendar-day{
77
+ cursor:pointer;
78
+ display:inline-block;
79
+ width:33px;
80
+ line-height:33px;
81
+ border-radius:3px; }
82
+ .iui-calendar-day:focus-visible{
83
+ outline:1px solid var(--iui-color-foreground-primary);
84
+ outline-offset:-1px; }
85
+ @supports not selector(*:focus-visible){
86
+ .iui-calendar-day:focus{
87
+ outline:1px solid var(--iui-color-foreground-primary);
88
+ outline-offset:-1px; } }
89
+ .iui-calendar-day.iui-today{
90
+ font-weight:600;
91
+ border-radius:50%;
92
+ background-color:rgba(0, 0, 0, 0.1);
93
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
94
+ .iui-calendar-day:hover{
95
+ font-weight:600;
96
+ color:#008BE1;
97
+ background-color:rgba(0, 139, 225, 0.1);
98
+ color:var(--iui-color-foreground-primary);
99
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
100
+ .iui-calendar-day.iui-selected{
101
+ font-weight:600;
102
+ border-radius:3px;
103
+ cursor:default;
104
+ background-color:#008BE1;
105
+ color:#FFF;
106
+ background-color:var(--iui-color-background-primary);
107
+ color:var(--iui-color-foreground-accessory); }
108
+ .iui-calendar-day.iui-selected:focus-visible{
109
+ outline:1px solid var(--iui-color-foreground-accessory);
110
+ outline-offset:-3px; }
111
+ @supports not selector(*:focus-visible){
112
+ .iui-calendar-day.iui-selected:focus{
113
+ outline:1px solid var(--iui-color-foreground-accessory);
114
+ outline-offset:-3px; } }
115
+ .iui-calendar-day.iui-outside-month{
116
+ color:rgba(0, 0, 0, 0.4);
117
+ color:var(--iui-text-color-muted); }
package/css/expandable-block.css CHANGED
@@ -29,6 +29,13 @@
29
29
  border:1px solid var(--iui-color-background-3);
30
30
  border-bottom-color:var(--iui-color-background-4);
31
31
  background-color:var(--iui-color-background-3); }
32
+ .iui-expandable-block > .iui-header:focus-visible{
33
+ outline:1px solid var(--iui-color-foreground-primary);
34
+ outline-offset:-1px; }
35
+ @supports not selector(*:focus-visible){
36
+ .iui-expandable-block > .iui-header:focus{
37
+ outline:1px solid var(--iui-color-foreground-primary);
38
+ outline-offset:-1px; } }
32
39
  @media (prefers-reduced-motion: no-preference){
33
40
  .iui-expandable-block > .iui-header{
34
41
  transition:background-color 0.2s ease-out; } }
@@ -82,16 +89,13 @@
82
89
  font-size:12px;
83
90
  color:rgba(0, 0, 0, 0.4);
84
91
  color:var(--iui-text-color-muted); }
85
- .iui-expandable-block > .iui-header:focus{
86
- outline:0;
87
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
88
- box-shadow:var(--iui-focus-box-shadow); }
89
- .iui-expandable-block > .iui-header:focus:not(:focus-visible){
90
- box-shadow:none; }
91
92
  .iui-expandable-block > .iui-header:focus-visible{
92
- outline:0;
93
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
94
- box-shadow:var(--iui-focus-box-shadow); }
93
+ outline:1px solid var(--iui-color-foreground-primary);
94
+ outline-offset:-1px; }
95
+ @supports not selector(*:focus-visible){
96
+ .iui-expandable-block > .iui-header:focus{
97
+ outline:1px solid var(--iui-color-foreground-primary);
98
+ outline-offset:-1px; } }
95
99
  .iui-expandable-block .iui-expandable-content{
96
100
  overflow:hidden;
97
101
  box-sizing:border-box;
package/css/file-upload.css CHANGED
@@ -69,9 +69,10 @@
69
69
  position:relative;
70
70
  flex-direction:row; }
71
71
  .iui-file-upload > .iui-content:only-child:focus-within{
72
- outline:0;
73
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
74
- box-shadow:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
72
+ outline:2px solid #008BE1;
73
+ outline-offset:-2px;
74
+ outline:2px solid var(--iui-color-foreground-primary);
75
+ outline-offset:-2px; }
75
76
  .iui-file-upload > .iui-content .iui-template-text{
76
77
  margin-left:24px; }
77
78
  .iui-file-upload > .iui-content .iui-template-text > label{
package/css/footer.css CHANGED
@@ -15,7 +15,6 @@
15
15
  list-style-type:none;
16
16
  margin:0 auto;
17
17
  padding:0;
18
- overflow:hidden;
19
18
  display:flex;
20
19
  justify-content:center;
21
20
  align-items:center;
@@ -38,34 +37,22 @@
38
37
  background-color:rgba(0, 0, 0, 0.4);
39
38
  background-color:var(--iui-text-color-muted); }
40
39
  .iui-legal-footer > ul > li > a{
40
+ border-radius:3px;
41
41
  text-decoration:none;
42
42
  cursor:pointer;
43
43
  color:#008BE1;
44
44
  color:var(--iui-color-foreground-primary); }
45
- .iui-legal-footer > ul > li > a:focus{
46
- outline:0;
47
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
48
- box-shadow:var(--iui-focus-box-shadow); }
49
- .iui-legal-footer > ul > li > a:focus:not(:focus-visible){
50
- box-shadow:none; }
51
45
  .iui-legal-footer > ul > li > a:focus-visible{
52
- outline:0;
53
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
54
- box-shadow:var(--iui-focus-box-shadow); }
46
+ outline:1px solid var(--iui-color-foreground-primary);
47
+ outline-offset:2px; }
48
+ @supports not selector(*:focus-visible){
49
+ .iui-legal-footer > ul > li > a:focus{
50
+ outline:1px solid var(--iui-color-foreground-primary);
51
+ outline-offset:2px; } }
55
52
  .iui-legal-footer > ul > li > a:hover{
56
53
  color:#006bae;
57
54
  color:var(--iui-color-foreground-primary-overlay);
58
55
  text-decoration:underline; }
59
- .iui-legal-footer > ul > li > a:focus{
60
- outline:0;
61
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
62
- box-shadow:var(--iui-focus-box-shadow); }
63
- .iui-legal-footer > ul > li > a:focus:not(:focus-visible){
64
- box-shadow:none; }
65
- .iui-legal-footer > ul > li > a:focus-visible{
66
- outline:0;
67
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
68
- box-shadow:var(--iui-focus-box-shadow); }
69
56
  .iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
70
57
  color:rgba(0, 0, 0, 0.4);
71
58
  color:var(--iui-text-color-muted); }
package/css/global.css CHANGED
@@ -30,20 +30,18 @@
30
30
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; }
31
31
 
32
32
  .iui-anchor{
33
+ border-radius:3px;
33
34
  text-decoration:none;
34
35
  cursor:pointer;
35
36
  color:#008BE1;
36
37
  color:var(--iui-color-foreground-primary); }
37
- .iui-anchor:focus{
38
- outline:0;
39
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
40
- box-shadow:var(--iui-focus-box-shadow); }
41
- .iui-anchor:focus:not(:focus-visible){
42
- box-shadow:none; }
43
38
  .iui-anchor:focus-visible{
44
- outline:0;
45
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
46
- box-shadow:var(--iui-focus-box-shadow); }
39
+ outline:1px solid var(--iui-color-foreground-primary);
40
+ outline-offset:2px; }
41
+ @supports not selector(*:focus-visible){
42
+ .iui-anchor:focus{
43
+ outline:1px solid var(--iui-color-foreground-primary);
44
+ outline-offset:2px; } }
47
45
  .iui-anchor:hover{
48
46
  color:#006bae;
49
47
  color:var(--iui-color-foreground-primary-overlay);
package/css/header.css CHANGED
@@ -103,22 +103,16 @@
103
103
  .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
104
104
  color:#008BE1;
105
105
  color:var(--iui-color-foreground-primary); }
106
- .iui-page-header .iui-header-button.iui-header-button.iui-active:focus{
107
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px, 0 2px 0 0 #008BE1;
108
- box-shadow:var(--iui-focus-box-shadow), 0 2px 0 0 var(--iui-color-foreground-primary); }
109
- .iui-page-header .iui-header-button.iui-header-button.iui-active:focus:not(:focus-visible){
110
- box-shadow:0 2px 0 0 #008BE1;
111
- box-shadow:0 2px 0 0 var(--iui-color-foreground-primary); }
112
106
  .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled{
113
107
  background-color:rgba(0, 0, 0, 0.05);
114
108
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
115
109
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
116
110
  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{
111
+ .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
112
  color:rgba(0, 0, 0, 0.2);
119
113
  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,
114
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-icon,
115
+ .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
116
  .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
123
117
  fill:rgba(0, 0, 0, 0.2);
124
118
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -138,10 +132,12 @@
138
132
  margin:0;
139
133
  padding:0; }
140
134
  .iui-page-header .iui-header-split-button{
141
- height:100%;
142
- display:flex;
143
- overflow:hidden;
144
135
  max-width:25vw; }
136
+ .iui-page-header .iui-header-split-button,
137
+ .iui-page-header .iui-header-split-button > *{
138
+ height:100%;
139
+ display:flex;
140
+ overflow:hidden; }
145
141
  .iui-page-header .iui-header-split-button .iui-button{
146
142
  padding:0 12px;
147
143
  height:49px;
@@ -207,22 +203,16 @@
207
203
  .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
208
204
  color:#008BE1;
209
205
  color:var(--iui-color-foreground-primary); }
210
- .iui-page-header .iui-header-split-button .iui-button.iui-active:focus{
211
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px, 0 2px 0 0 #008BE1;
212
- box-shadow:var(--iui-focus-box-shadow), 0 2px 0 0 var(--iui-color-foreground-primary); }
213
- .iui-page-header .iui-header-split-button .iui-button.iui-active:focus:not(:focus-visible){
214
- box-shadow:0 2px 0 0 #008BE1;
215
- box-shadow:0 2px 0 0 var(--iui-color-foreground-primary); }
216
206
  .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled{
217
207
  background-color:rgba(0, 0, 0, 0.05);
218
208
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
219
209
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
220
210
  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{
211
+ .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
212
  color:rgba(0, 0, 0, 0.2);
223
213
  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,
214
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-icon,
215
+ .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
216
  .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
227
217
  fill:rgba(0, 0, 0, 0.2);
228
218
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -241,7 +231,7 @@
241
231
  width:0.1px;
242
232
  margin:0;
243
233
  padding:0; }
244
- .iui-page-header .iui-header-split-button .iui-button:first-child{
234
+ .iui-page-header .iui-header-split-button > *:first-child .iui-button{
245
235
  padding-left:12px; }
246
236
  .iui-page-header .iui-header-split-button.iui-active svg{
247
237
  fill:#008BE1;
@@ -259,22 +249,16 @@
259
249
  .iui-page-header .iui-header-split-button.iui-active .iui-button-label{
260
250
  color:#008BE1;
261
251
  color:var(--iui-color-foreground-primary); }
262
- .iui-page-header .iui-header-split-button.iui-active:focus{
263
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px, 0 2px 0 0 #008BE1;
264
- box-shadow:var(--iui-focus-box-shadow), 0 2px 0 0 var(--iui-color-foreground-primary); }
265
- .iui-page-header .iui-header-split-button.iui-active:focus:not(:focus-visible){
266
- box-shadow:0 2px 0 0 #008BE1;
267
- box-shadow:0 2px 0 0 var(--iui-color-foreground-primary); }
268
252
  .iui-page-header .iui-header-split-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button.iui-active:disabled{
269
253
  background-color:rgba(0, 0, 0, 0.05);
270
254
  box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
271
255
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
272
256
  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{
257
+ .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
258
  color:rgba(0, 0, 0, 0.2);
275
259
  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,
260
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-icon,
261
+ .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
262
  .iui-page-header .iui-header-split-button.iui-active:disabled svg{
279
263
  fill:rgba(0, 0, 0, 0.2);
280
264
  fill:var(--iui-icons-color-actionable-disabled); }
@@ -285,7 +269,7 @@
285
269
  background-color:transparent; }
286
270
  .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
287
271
  display:none; }
288
- .iui-page-header .iui-header-split-button.iui-active .iui-button:last-child:hover{
272
+ .iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
289
273
  background-color:rgba(0, 139, 225, 0.1);
290
274
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
291
275
  .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
@@ -391,14 +375,12 @@
391
375
  a.iui-header-logo:focus:not(:focus-visible),
392
376
  button.iui-header-logo:focus:not(:focus-visible), .iui-header-logo[role='button']:focus:not(:focus-visible){
393
377
  outline:0; }
394
- a.iui-header-logo:hover, a.iui-header-logo:focus,
395
- button.iui-header-logo:hover,
396
- button.iui-header-logo:focus, .iui-header-logo[role='button']:hover, .iui-header-logo[role='button']:focus{
378
+ a.iui-header-logo:hover,
379
+ button.iui-header-logo:hover, .iui-header-logo[role='button']:hover{
397
380
  background-color:rgba(0, 0, 0, 0.1);
398
381
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
399
- a.iui-header-logo:hover:not(:focus-visible):not(:hover), a.iui-header-logo:focus:not(:focus-visible):not(:hover),
400
- button.iui-header-logo:hover:not(:focus-visible):not(:hover),
401
- button.iui-header-logo:focus:not(:focus-visible):not(:hover), .iui-header-logo[role='button']:hover:not(:focus-visible):not(:hover), .iui-header-logo[role='button']:focus:not(:focus-visible):not(:hover){
382
+ a.iui-header-logo:hover:not(:focus-visible):not(:hover),
383
+ button.iui-header-logo:hover:not(:focus-visible):not(:hover), .iui-header-logo[role='button']:hover:not(:focus-visible):not(:hover){
402
384
  background-color:#FFF;
403
385
  background-color:var(--iui-color-background-1); }
404
386
  .iui-header-logo .iui-header-button-icon{