@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

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