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