@itwin/itwinui-css 0.50.1 → 0.53.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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  23. package/css/modal.css +114 -44
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
package/css/header.css CHANGED
@@ -17,379 +17,497 @@
17
17
  user-select:none;
18
18
  box-sizing:border-box;
19
19
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
20
- background-color:#FFF;
21
- border-bottom:2px solid #C7CCD1;
20
+ background-color:white;
21
+ border-bottom:2px solid #c7ccd1;
22
22
  color:rgba(0, 0, 0, 0.8);
23
23
  background-color:var(--iui-color-background-1);
24
- border-bottom:2px solid var(--iui-color-background-5);
25
- color:var(--iui-text-color); }
26
- @media (prefers-reduced-motion: no-preference){
27
- .iui-page-header{
28
- transition:height 0.2s ease-out; } }
29
- .iui-page-header > .iui-left,
30
- .iui-page-header > .iui-center,
31
- .iui-page-header > .iui-right{
32
- display:flex;
33
- align-items:center;
34
- height:100%; }
24
+ border-bottom:2px solid var(--iui-color-background-border);
25
+ color:var(--iui-text-color);
26
+ }
27
+ @media (prefers-reduced-motion: no-preference){
28
+ .iui-page-header{
29
+ transition:height 0.2s ease-out;
30
+ }
31
+ }
32
+ .iui-page-header > .iui-left,
33
+ .iui-page-header > .iui-center,
34
+ .iui-page-header > .iui-right{
35
+ display:flex;
36
+ align-items:center;
37
+ height:100%;
38
+ }
39
+ .iui-page-header .iui-header-button-icon{
40
+ width:24px;
41
+ height:24px;
42
+ border-radius:3px;
43
+ }
44
+ @media (prefers-reduced-motion: no-preference){
35
45
  .iui-page-header .iui-header-button-icon{
36
- width:24px;
37
- height:24px;
38
- border-radius:3px; }
39
- @media (prefers-reduced-motion: no-preference){
40
- .iui-page-header .iui-header-button-icon{
41
- transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
42
- .iui-page-header .iui-header-button.iui-header-button{
43
- padding:0 12px;
44
- height:49px;
45
- font-size:16px;
46
- gap:12px;
47
- gap:0;
48
- max-width:25vw;
49
- height:100%;
50
- border-radius:0;
51
- overflow:hidden;
52
- padding-right:8px; }
53
- .iui-page-header .iui-header-button.iui-header-button:focus{
54
- box-shadow:none;
55
- outline-offset:-1px;
56
- outline:1px solid #008BE1;
57
- outline:1px solid var(--iui-color-foreground-primary); }
58
- .iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
59
- outline:0; }
60
- .iui-page-header .iui-header-button.iui-header-button > .iui-button-label{
61
- text-align:left;
62
- font-size:14px;
63
- overflow:hidden; }
64
- .iui-page-header .iui-header-button.iui-header-button > .iui-button-label > div{
65
- overflow:hidden;
66
- text-overflow:ellipsis; }
67
- .iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
68
- height:22px;
69
- opacity:0.6;
70
- opacity:var(--iui-opacity-3); }
71
- @media (prefers-reduced-motion: no-preference){
72
- .iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
73
- transition:all 0.2s ease; } }
74
- .iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
75
- flex-shrink:0; }
76
- .iui-page-header .iui-header-button.iui-header-button > * + *{
77
- margin-left:12px; }
78
- .iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
79
- padding:4px;
80
- width:16px;
81
- height:16px;
82
- border-radius:3px;
83
- background-color:#EEF0F3;
84
- fill:rgba(0, 0, 0, 0.4);
85
- background-color:var(--iui-color-background-3);
86
- fill:var(--iui-icons-color); }
87
- @media (prefers-reduced-motion: no-preference){
88
- .iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
89
- transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
90
- .iui-page-header .iui-header-button.iui-header-button.iui-active svg{
91
- fill:#008BE1;
92
- fill:var(--iui-icons-color-primary); }
93
- .iui-page-header .iui-header-button.iui-header-button.iui-active, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover{
94
- box-shadow:0 2px 0 0 #008BE1;
95
- background-color:rgba(0, 139, 225, 0.1);
96
- box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
97
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
98
- .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover .iui-header-button-icon{
99
- fill:#008BE1;
100
- background-color:rgba(0, 139, 225, 0.1);
101
- fill:var(--iui-icons-color-primary);
102
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
103
- .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
104
- color:#008BE1;
105
- color:var(--iui-color-foreground-primary); }
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{
107
- background-color:rgba(0, 0, 0, 0.05);
108
- box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
109
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
110
- box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
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{
112
- color:rgba(0, 0, 0, 0.2);
113
- color:var(--iui-icons-color-actionable-disabled); }
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,
116
- .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
117
- fill:rgba(0, 0, 0, 0.2);
118
- fill:var(--iui-icons-color-actionable-disabled); }
119
- .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-header-button-icon{
120
- background-color:rgba(0, 0, 0, 0.05);
121
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
122
- .iui-page-header .iui-header-button.iui-header-button:disabled .iui-header-button-icon{
123
- filter:grayscale(1) opacity(0.7); }
124
- .iui-page-header.iui-slim > .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
125
- width:12px;
126
- height:12px;
127
- padding:2px; }
128
- .iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
129
- opacity:0;
130
- height:0.1px;
131
- width:0.1px;
132
- margin:0;
133
- padding:0; }
134
- .iui-page-header .iui-header-split-button{
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; }
141
- .iui-page-header .iui-header-split-button .iui-button{
142
- padding:0 12px;
143
- height:49px;
144
- font-size:16px;
145
- gap:12px;
146
- gap:0;
147
- max-width:25vw;
148
- height:100%;
149
- border-radius:0;
150
- overflow:hidden;
151
- padding-right:8px;
152
- padding:0 4px; }
153
- .iui-page-header .iui-header-split-button .iui-button:focus{
154
- box-shadow:none;
155
- outline-offset:-1px;
156
- outline:1px solid #008BE1;
157
- outline:1px solid var(--iui-color-foreground-primary); }
158
- .iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
159
- outline:0; }
160
- .iui-page-header .iui-header-split-button .iui-button > .iui-button-label{
161
- text-align:left;
162
- font-size:14px;
163
- overflow:hidden; }
164
- .iui-page-header .iui-header-split-button .iui-button > .iui-button-label > div{
165
- overflow:hidden;
166
- text-overflow:ellipsis; }
167
- .iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
168
- height:22px;
169
- opacity:0.6;
170
- opacity:var(--iui-opacity-3); }
171
- @media (prefers-reduced-motion: no-preference){
172
- .iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
173
- transition:all 0.2s ease; } }
174
- .iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
175
- flex-shrink:0; }
176
- .iui-page-header .iui-header-split-button .iui-button > * + *{
177
- margin-left:12px; }
178
- .iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
179
- padding:4px;
180
- width:16px;
181
- height:16px;
182
- border-radius:3px;
183
- background-color:#EEF0F3;
184
- fill:rgba(0, 0, 0, 0.4);
185
- background-color:var(--iui-color-background-3);
186
- fill:var(--iui-icons-color); }
187
- @media (prefers-reduced-motion: no-preference){
188
- .iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
189
- transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
190
- .iui-page-header .iui-header-split-button .iui-button.iui-active svg{
191
- fill:#008BE1;
192
- fill:var(--iui-icons-color-primary); }
193
- .iui-page-header .iui-header-split-button .iui-button.iui-active, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover{
194
- box-shadow:0 2px 0 0 #008BE1;
195
- background-color:rgba(0, 139, 225, 0.1);
196
- box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
197
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
198
- .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover .iui-header-button-icon{
199
- fill:#008BE1;
200
- background-color:rgba(0, 139, 225, 0.1);
201
- fill:var(--iui-icons-color-primary);
202
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
203
- .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
204
- color:#008BE1;
205
- color:var(--iui-color-foreground-primary); }
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{
207
- background-color:rgba(0, 0, 0, 0.05);
208
- box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
209
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
210
- box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
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{
212
- color:rgba(0, 0, 0, 0.2);
213
- color:var(--iui-icons-color-actionable-disabled); }
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,
216
- .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
217
- fill:rgba(0, 0, 0, 0.2);
218
- fill:var(--iui-icons-color-actionable-disabled); }
219
- .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-header-button-icon{
220
- background-color:rgba(0, 0, 0, 0.05);
221
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
222
- .iui-page-header .iui-header-split-button .iui-button:disabled .iui-header-button-icon{
223
- filter:grayscale(1) opacity(0.7); }
224
- .iui-page-header.iui-slim > .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
225
- width:12px;
226
- height:12px;
227
- padding:2px; }
228
- .iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
229
- opacity:0;
230
- height:0.1px;
231
- width:0.1px;
232
- margin:0;
233
- padding:0; }
234
- .iui-page-header .iui-header-split-button > *:first-child .iui-button{
235
- padding-left:12px; }
236
- .iui-page-header .iui-header-split-button.iui-active svg{
237
- fill:#008BE1;
238
- fill:var(--iui-icons-color-primary); }
239
- .iui-page-header .iui-header-split-button.iui-active, .iui-page-header .iui-header-split-button.iui-active:hover{
240
- box-shadow:0 2px 0 0 #008BE1;
241
- background-color:rgba(0, 139, 225, 0.1);
242
- box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
243
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
244
- .iui-page-header .iui-header-split-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:hover .iui-header-button-icon{
245
- fill:#008BE1;
246
- background-color:rgba(0, 139, 225, 0.1);
247
- fill:var(--iui-icons-color-primary);
248
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
249
- .iui-page-header .iui-header-split-button.iui-active .iui-button-label{
250
- color:#008BE1;
251
- color:var(--iui-color-foreground-primary); }
252
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button.iui-active:disabled{
253
- background-color:rgba(0, 0, 0, 0.05);
254
- box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
255
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
256
- box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
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{
258
- color:rgba(0, 0, 0, 0.2);
259
- color:var(--iui-icons-color-actionable-disabled); }
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,
262
- .iui-page-header .iui-header-split-button.iui-active:disabled svg{
263
- fill:rgba(0, 0, 0, 0.2);
264
- fill:var(--iui-icons-color-actionable-disabled); }
265
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-header-button-icon{
266
- background-color:rgba(0, 0, 0, 0.05);
267
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
268
- .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless, .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless:hover{
269
- background-color:transparent; }
270
- .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
271
- display:none; }
272
- .iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
273
- background-color:rgba(0, 139, 225, 0.1);
274
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
275
- .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
276
- background-color:transparent;
277
- background-color:transparent; }
278
- .iui-page-header > .iui-left > nav{
279
- display:flex;
280
- align-items:center;
281
- height:100%; }
282
- .iui-page-header > .iui-left,
283
- .iui-page-header > .iui-left > nav{
284
- overflow:hidden;
285
- box-sizing:content-box;
286
- margin-bottom:-4px;
287
- padding-bottom:4px; }
288
- .iui-page-header > .iui-left .iui-chevron{
289
- fill:rgba(0, 0, 0, 0.4);
290
- fill:var(--iui-icons-color);
291
- display:inline-flex;
292
- width:12px;
293
- height:12px;
294
- flex-shrink:0;
295
- margin:0 4px; }
296
- .iui-page-header > .iui-left .iui-chevron.iui-informational{
297
- fill:#008BE1;
298
- fill:var(--iui-icons-color-primary); }
299
- .iui-page-header > .iui-left .iui-chevron.iui-positive{
300
- fill:#53A21A;
301
- fill:var(--iui-icons-color-positive); }
302
- .iui-page-header > .iui-left .iui-chevron.iui-warning{
303
- fill:#F18B12;
304
- fill:var(--iui-icons-color-warning); }
305
- .iui-page-header > .iui-left .iui-chevron.iui-negative{
306
- fill:#D30A0A;
307
- fill:var(--iui-icons-color-negative); }
308
- .iui-page-header > .iui-center{
309
- justify-content:center; }
310
- .iui-page-header > .iui-right{
311
- justify-content:flex-end; }
312
- @media (prefers-reduced-motion: no-preference){
313
- .iui-page-header > .iui-right .iui-user-icon,
314
- .iui-page-header > .iui-right .iui-user-icon *{
315
- transition:all 0.2s ease-out; } }
316
- .iui-page-header .iui-button{
317
- height:100%;
318
- border-radius:0; }
319
- .iui-page-header .iui-divider{
320
- width:1px;
321
- height:22px;
322
- background-color:#DCE0E3;
323
- background-color:var(--iui-color-background-4); }
324
- .iui-page-header.iui-slim{
325
- height:30px; }
326
- .iui-page-header.iui-slim > .iui-left .iui-header-logo > .iui-label{
327
- font-size:14px; }
328
- .iui-page-header.iui-slim > .iui-left .iui-header-logo .iui-header-button-icon{
329
- margin:0 28px; }
330
- .iui-page-header.iui-slim > .iui-left .iui-header-button-icon{
331
- width:16px;
332
- height:16px;
333
- margin:0 4px;
334
- display:inline-flex; }
335
- .iui-page-header.iui-slim > .iui-right .iui-user-icon{
336
- width:24px;
337
- height:24px; }
338
- .iui-page-header.iui-slim > .iui-right .iui-user-icon > .iui-initials{
339
- line-height:24px;
340
- font-size:12px; }
341
- @media (max-width: 768px){
342
- .iui-page-header .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
343
- opacity:0;
344
- height:0.1px;
345
- width:0.1px;
346
- margin:0;
347
- padding:0; }
348
- .iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-button-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-button-label{
349
- margin-left:0; } }
350
- @media (max-width: 1024px){
351
- .iui-page-header .iui-left .iui-header-logo > .iui-label{
352
- display:none; } }
46
+ transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out;
47
+ }
48
+ }
49
+ .iui-page-header .iui-header-button.iui-header-button{
50
+ padding:0 12px;
51
+ height:49px;
52
+ font-size:16px;
53
+ gap:12px;
54
+ gap:0;
55
+ max-width:25vw;
56
+ height:100%;
57
+ border-radius:0;
58
+ overflow:hidden;
59
+ padding-right:8px;
60
+ }
61
+ .iui-page-header .iui-header-button.iui-header-button:focus{
62
+ box-shadow:none;
63
+ outline-offset:-1px;
64
+ outline:1px solid #008ae0;
65
+ outline:1px solid var(--iui-color-foreground-primary);
66
+ }
67
+ .iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
68
+ outline:0;
69
+ }
70
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-label{
71
+ text-align:left;
72
+ font-size:14px;
73
+ overflow:hidden;
74
+ }
75
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-label > div{
76
+ overflow:hidden;
77
+ text-overflow:ellipsis;
78
+ }
79
+ .iui-page-header .iui-header-button.iui-header-button .iui-description{
80
+ height:22px;
81
+ font-size:12px;
82
+ opacity:0.6;
83
+ opacity:var(--iui-opacity-3);
84
+ }
85
+ @media (prefers-reduced-motion: no-preference){
86
+ .iui-page-header .iui-header-button.iui-header-button .iui-description{
87
+ transition:all 0.2s ease;
88
+ }
89
+ }
90
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
91
+ flex-shrink:0;
92
+ }
93
+ .iui-page-header .iui-header-button.iui-header-button > * + *{
94
+ margin-left:12px;
95
+ }
96
+ .iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
97
+ padding:4px;
98
+ width:16px;
99
+ height:16px;
100
+ border-radius:3px;
101
+ background-color:#edeff2;
102
+ fill:rgba(0, 0, 0, 0.4);
103
+ background-color:var(--iui-color-background-3);
104
+ fill:var(--iui-icons-color);
105
+ }
106
+ @media (prefers-reduced-motion: no-preference){
107
+ .iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
108
+ transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out;
109
+ }
110
+ }
111
+ .iui-page-header .iui-header-button.iui-header-button.iui-active svg{
112
+ fill:#008ae0;
113
+ fill:var(--iui-icons-color-primary);
114
+ }
115
+ .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-description{
116
+ opacity:1;
117
+ }
118
+ .iui-page-header .iui-header-button.iui-header-button.iui-active, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover{
119
+ box-shadow:0 2px 0 0 #008ae0;
120
+ background-color:rgba(0, 138, 224, 0.1);
121
+ box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
122
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
123
+ }
124
+ .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:hover .iui-header-button-icon{
125
+ fill:#008ae0;
126
+ background-color:rgba(0, 138, 224, 0.1);
127
+ fill:var(--iui-icons-color-primary);
128
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
129
+ }
130
+ .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
131
+ color:#008ae0;
132
+ color:var(--iui-color-foreground-primary);
133
+ }
134
+ .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{
135
+ background-color:rgba(0, 0, 0, 0.05);
136
+ box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
137
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
138
+ box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
139
+ }
140
+ .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{
141
+ color:rgba(0, 0, 0, 0.2);
142
+ color:var(--iui-icons-color-actionable-disabled);
143
+ }
144
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-button-icon,
145
+ .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,
146
+ .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled svg{
147
+ fill:rgba(0, 0, 0, 0.2);
148
+ fill:var(--iui-icons-color-actionable-disabled);
149
+ }
150
+ .iui-page-header .iui-header-button.iui-header-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-button.iui-header-button.iui-active:disabled .iui-header-button-icon{
151
+ background-color:rgba(0, 0, 0, 0.05);
152
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
153
+ }
154
+ .iui-page-header .iui-header-button.iui-header-button:disabled .iui-header-button-icon{
155
+ filter:grayscale(1) opacity(0.7);
156
+ }
157
+ .iui-page-header.iui-slim > .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
158
+ width:12px;
159
+ height:12px;
160
+ padding:2px;
161
+ }
162
+ .iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
163
+ opacity:0;
164
+ height:0.1px;
165
+ width:0.1px;
166
+ margin:0;
167
+ padding:0;
168
+ }
169
+
170
+ .iui-page-header .iui-header-split-button{
171
+ max-width:25vw;
172
+ }
173
+ .iui-page-header .iui-header-split-button,
174
+ .iui-page-header .iui-header-split-button > *{
175
+ height:100%;
176
+ display:flex;
177
+ overflow:hidden;
178
+ }
179
+ .iui-page-header .iui-header-split-button .iui-button{
180
+ padding:0 12px;
181
+ height:49px;
182
+ font-size:16px;
183
+ gap:12px;
184
+ gap:0;
185
+ max-width:25vw;
186
+ height:100%;
187
+ border-radius:0;
188
+ overflow:hidden;
189
+ padding-right:8px;
190
+ padding:0 4px;
191
+ }
192
+ .iui-page-header .iui-header-split-button .iui-button:focus{
193
+ box-shadow:none;
194
+ outline-offset:-1px;
195
+ outline:1px solid #008ae0;
196
+ outline:1px solid var(--iui-color-foreground-primary);
197
+ }
198
+ .iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
199
+ outline:0;
200
+ }
201
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-label{
202
+ text-align:left;
203
+ font-size:14px;
204
+ overflow:hidden;
205
+ }
206
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-label > div{
207
+ overflow:hidden;
208
+ text-overflow:ellipsis;
209
+ }
210
+ .iui-page-header .iui-header-split-button .iui-button .iui-description{
211
+ height:22px;
212
+ font-size:12px;
213
+ opacity:0.6;
214
+ opacity:var(--iui-opacity-3);
215
+ }
216
+ @media (prefers-reduced-motion: no-preference){
217
+ .iui-page-header .iui-header-split-button .iui-button .iui-description{
218
+ transition:all 0.2s ease;
219
+ }
220
+ }
221
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
222
+ flex-shrink:0;
223
+ }
224
+ .iui-page-header .iui-header-split-button .iui-button > * + *{
225
+ margin-left:12px;
226
+ }
227
+ .iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
228
+ padding:4px;
229
+ width:16px;
230
+ height:16px;
231
+ border-radius:3px;
232
+ background-color:#edeff2;
233
+ fill:rgba(0, 0, 0, 0.4);
234
+ background-color:var(--iui-color-background-3);
235
+ fill:var(--iui-icons-color);
236
+ }
237
+ @media (prefers-reduced-motion: no-preference){
238
+ .iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
239
+ transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out;
240
+ }
241
+ }
242
+ .iui-page-header .iui-header-split-button .iui-button.iui-active svg{
243
+ fill:#008ae0;
244
+ fill:var(--iui-icons-color-primary);
245
+ }
246
+ .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-description{
247
+ opacity:1;
248
+ }
249
+ .iui-page-header .iui-header-split-button .iui-button.iui-active, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover{
250
+ box-shadow:0 2px 0 0 #008ae0;
251
+ background-color:rgba(0, 138, 224, 0.1);
252
+ box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
253
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
254
+ }
255
+ .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:hover .iui-header-button-icon{
256
+ fill:#008ae0;
257
+ background-color:rgba(0, 138, 224, 0.1);
258
+ fill:var(--iui-icons-color-primary);
259
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
260
+ }
261
+ .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
262
+ color:#008ae0;
263
+ color:var(--iui-color-foreground-primary);
264
+ }
265
+ .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{
266
+ background-color:rgba(0, 0, 0, 0.05);
267
+ box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
268
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
269
+ box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
270
+ }
271
+ .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{
272
+ color:rgba(0, 0, 0, 0.2);
273
+ color:var(--iui-icons-color-actionable-disabled);
274
+ }
275
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-button-icon,
276
+ .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,
277
+ .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled svg{
278
+ fill:rgba(0, 0, 0, 0.2);
279
+ fill:var(--iui-icons-color-actionable-disabled);
280
+ }
281
+ .iui-page-header .iui-header-split-button .iui-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-split-button .iui-button.iui-active:disabled .iui-header-button-icon{
282
+ background-color:rgba(0, 0, 0, 0.05);
283
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
284
+ }
285
+ .iui-page-header .iui-header-split-button .iui-button:disabled .iui-header-button-icon{
286
+ filter:grayscale(1) opacity(0.7);
287
+ }
288
+ .iui-page-header.iui-slim > .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
289
+ width:12px;
290
+ height:12px;
291
+ padding:2px;
292
+ }
293
+ .iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
294
+ opacity:0;
295
+ height:0.1px;
296
+ width:0.1px;
297
+ margin:0;
298
+ padding:0;
299
+ }
300
+
301
+ .iui-page-header .iui-header-split-button > *:first-child .iui-button{
302
+ padding-left:12px;
303
+ }
304
+ .iui-page-header .iui-header-split-button.iui-active svg{
305
+ fill:#008ae0;
306
+ fill:var(--iui-icons-color-primary);
307
+ }
308
+ .iui-page-header .iui-header-split-button.iui-active .iui-description{
309
+ opacity:1;
310
+ }
311
+ .iui-page-header .iui-header-split-button.iui-active, .iui-page-header .iui-header-split-button.iui-active:hover{
312
+ box-shadow:0 2px 0 0 #008ae0;
313
+ background-color:rgba(0, 138, 224, 0.1);
314
+ box-shadow:0 2px 0 0 var(--iui-color-foreground-primary);
315
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
316
+ }
317
+ .iui-page-header .iui-header-split-button.iui-active .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:hover .iui-header-button-icon{
318
+ fill:#008ae0;
319
+ background-color:rgba(0, 138, 224, 0.1);
320
+ fill:var(--iui-icons-color-primary);
321
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
322
+ }
323
+ .iui-page-header .iui-header-split-button.iui-active .iui-button-label{
324
+ color:#008ae0;
325
+ color:var(--iui-color-foreground-primary);
326
+ }
327
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled, .iui-page-header .iui-header-split-button.iui-active:disabled{
328
+ background-color:rgba(0, 0, 0, 0.05);
329
+ box-shadow:0 2px 0 0 rgba(0, 0, 0, 0.4);
330
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
331
+ box-shadow:0 2px 0 0 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
332
+ }
333
+ .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{
334
+ color:rgba(0, 0, 0, 0.2);
335
+ color:var(--iui-icons-color-actionable-disabled);
336
+ }
337
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button-icon,
338
+ .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,
339
+ .iui-page-header .iui-header-split-button.iui-active:disabled svg{
340
+ fill:rgba(0, 0, 0, 0.2);
341
+ fill:var(--iui-icons-color-actionable-disabled);
342
+ }
343
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-header-button-icon, .iui-page-header .iui-header-split-button.iui-active:disabled .iui-header-button-icon{
344
+ background-color:rgba(0, 0, 0, 0.05);
345
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
346
+ }
347
+ .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless, .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless:hover{
348
+ background-color:transparent;
349
+ }
350
+ .iui-page-header .iui-header-split-button.iui-active .iui-button.iui-borderless::after{
351
+ display:none;
352
+ }
353
+ .iui-page-header .iui-header-split-button.iui-active > *:last-child > .iui-button:hover{
354
+ background-color:rgba(0, 138, 224, 0.1);
355
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
356
+ }
357
+ .iui-page-header .iui-header-split-button.iui-active.iui-disabled .iui-button:last-child:hover{
358
+ background-color:transparent;
359
+ background-color:transparent;
360
+ }
361
+ .iui-page-header > .iui-left > nav{
362
+ display:flex;
363
+ align-items:center;
364
+ height:100%;
365
+ }
366
+ .iui-page-header > .iui-left,
367
+ .iui-page-header > .iui-left > nav{
368
+ overflow:hidden;
369
+ box-sizing:content-box;
370
+ margin-bottom:-4px;
371
+ padding-bottom:4px;
372
+ }
373
+ .iui-page-header > .iui-left .iui-chevron{
374
+ fill:rgba(0, 0, 0, 0.4);
375
+ fill:var(--iui-icons-color);
376
+ display:inline-flex;
377
+ width:12px;
378
+ height:12px;
379
+ flex-shrink:0;
380
+ margin:0 4px;
381
+ }
382
+ .iui-page-header > .iui-left .iui-chevron.iui-informational{
383
+ fill:#008ae0;
384
+ fill:var(--iui-icons-color-primary);
385
+ }
386
+ .iui-page-header > .iui-left .iui-chevron.iui-positive{
387
+ fill:#53a21a;
388
+ fill:var(--iui-icons-color-positive);
389
+ }
390
+ .iui-page-header > .iui-left .iui-chevron.iui-warning{
391
+ fill:#f18d13;
392
+ fill:var(--iui-icons-color-warning);
393
+ }
394
+ .iui-page-header > .iui-left .iui-chevron.iui-negative{
395
+ fill:#d10a0a;
396
+ fill:var(--iui-icons-color-negative);
397
+ }
398
+ .iui-page-header > .iui-center{
399
+ justify-content:center;
400
+ }
401
+ .iui-page-header > .iui-right{
402
+ justify-content:flex-end;
403
+ }
404
+ @media (prefers-reduced-motion: no-preference){
405
+ .iui-page-header > .iui-right .iui-user-icon,
406
+ .iui-page-header > .iui-right .iui-user-icon *{
407
+ transition:all 0.2s ease-out;
408
+ }
409
+ }
410
+ .iui-page-header .iui-button{
411
+ height:100%;
412
+ border-radius:0;
413
+ }
414
+ .iui-page-header .iui-divider{
415
+ width:1px;
416
+ height:22px;
417
+ background-color:#c7ccd1;
418
+ background-color:var(--iui-color-background-border);
419
+ }
420
+ .iui-page-header.iui-slim{
421
+ height:30px;
422
+ }
423
+ .iui-page-header.iui-slim > .iui-left .iui-header-logo > .iui-label{
424
+ font-size:14px;
425
+ }
426
+ .iui-page-header.iui-slim > .iui-left .iui-header-logo .iui-header-button-icon{
427
+ margin:0 28px;
428
+ }
429
+ .iui-page-header.iui-slim > .iui-left .iui-header-button-icon{
430
+ width:16px;
431
+ height:16px;
432
+ margin:0 4px;
433
+ display:inline-flex;
434
+ }
435
+ .iui-page-header.iui-slim > .iui-right .iui-user-icon{
436
+ width:24px;
437
+ height:24px;
438
+ }
439
+ .iui-page-header.iui-slim > .iui-right .iui-user-icon > .iui-initials{
440
+ line-height:24px;
441
+ font-size:12px;
442
+ }
443
+ @media (max-width: 768px){
444
+ .iui-page-header .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon.iui-header-button-icon{
445
+ opacity:0;
446
+ height:0.1px;
447
+ width:0.1px;
448
+ margin:0;
449
+ padding:0;
450
+ }
451
+ .iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-button-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-button-label{
452
+ margin-left:0;
453
+ }
454
+ }
455
+ @media (max-width: 1024px){
456
+ .iui-page-header .iui-left .iui-header-logo > .iui-label{
457
+ display:none;
458
+ }
459
+ }
353
460
 
354
461
  .iui-header-logo{
355
462
  display:inline-flex;
356
463
  align-items:center;
357
464
  white-space:nowrap;
358
- height:100%; }
359
- a.iui-header-logo,
360
- button.iui-header-logo, .iui-header-logo[role='button']{
361
- cursor:pointer;
362
- margin:0;
363
- padding:0;
364
- border:none;
365
- vertical-align:baseline;
366
- font-family:inherit;
367
- background-color:unset;
368
- color:unset; }
369
- a.iui-header-logo:focus,
370
- button.iui-header-logo:focus, .iui-header-logo[role='button']:focus{
371
- box-shadow:none;
372
- outline-offset:-1px;
373
- outline:1px solid #008BE1;
374
- outline:1px solid var(--iui-color-foreground-primary); }
375
- a.iui-header-logo:focus:not(:focus-visible),
376
- button.iui-header-logo:focus:not(:focus-visible), .iui-header-logo[role='button']:focus:not(:focus-visible){
377
- outline:0; }
378
- a.iui-header-logo:hover,
379
- button.iui-header-logo:hover, .iui-header-logo[role='button']:hover{
380
- background-color:rgba(0, 0, 0, 0.1);
381
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
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){
384
- background-color:#FFF;
385
- background-color:var(--iui-color-background-1); }
386
- .iui-header-logo .iui-header-button-icon{
387
- margin:0 24px;
388
- fill:rgba(0, 0, 0, 0.8);
389
- fill:var(--iui-icons-color-actionable); }
465
+ height:100%;
466
+ }
467
+ a.iui-header-logo,
468
+ button.iui-header-logo, .iui-header-logo[role=button]{
469
+ cursor:pointer;
470
+ margin:0;
471
+ padding:0;
472
+ border:none;
473
+ vertical-align:baseline;
474
+ font-family:inherit;
475
+ background-color:unset;
476
+ color:unset;
477
+ }
478
+ a.iui-header-logo:focus,
479
+ button.iui-header-logo:focus, .iui-header-logo[role=button]:focus{
480
+ box-shadow:none;
481
+ outline-offset:-1px;
482
+ outline:1px solid #008ae0;
483
+ outline:1px solid var(--iui-color-foreground-primary);
484
+ }
485
+ a.iui-header-logo:focus:not(:focus-visible),
486
+ button.iui-header-logo:focus:not(:focus-visible), .iui-header-logo[role=button]:focus:not(:focus-visible){
487
+ outline:0;
488
+ }
489
+ a.iui-header-logo:hover,
490
+ button.iui-header-logo:hover, .iui-header-logo[role=button]:hover{
491
+ background-color:rgba(0, 0, 0, 0.1);
492
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
493
+ }
494
+ a.iui-header-logo:hover:not(:focus-visible):not(:hover),
495
+ button.iui-header-logo:hover:not(:focus-visible):not(:hover), .iui-header-logo[role=button]:hover:not(:focus-visible):not(:hover){
496
+ background-color:white;
497
+ background-color:var(--iui-color-background-1);
498
+ }
499
+
500
+ .iui-header-logo .iui-header-button-icon{
501
+ margin:0 24px;
502
+ fill:rgba(0, 0, 0, 0.8);
503
+ fill:var(--iui-icons-color-actionable);
504
+ }
505
+ .iui-header-logo > .iui-label{
506
+ margin-right:12px;
507
+ font-size:16px;
508
+ }
509
+ @media (prefers-reduced-motion: no-preference){
390
510
  .iui-header-logo > .iui-label{
391
- margin-right:12px;
392
- font-size:16px; }
393
- @media (prefers-reduced-motion: no-preference){
394
- .iui-header-logo > .iui-label{
395
- transition:font-size 0.2s ease-out; } }
511
+ transition:font-size 0.2s ease-out;
512
+ }
513
+ }