@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/button.css CHANGED
@@ -35,332 +35,460 @@
35
35
  gap:8px;
36
36
  padding:0 16px;
37
37
  height:38px;
38
- gap:8px; }
39
- @media (prefers-reduced-motion: no-preference){
40
- .iui-button{
41
- transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
42
- .iui-button:hover{
43
- text-decoration:none;
44
- color:black;
45
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
46
- .iui-button:focus-visible{
38
+ gap:8px;
39
+ }
40
+ @media (prefers-reduced-motion: no-preference){
41
+ .iui-button{
42
+ transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
43
+ }
44
+ }
45
+ .iui-button:hover{
46
+ text-decoration:none;
47
+ color:black;
48
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
49
+ }
50
+ .iui-button:focus-visible{
51
+ outline:1px solid var(--iui-color-foreground-primary);
52
+ outline-offset:-1px;
53
+ }
54
+ @supports not selector(*:focus-visible){
55
+ .iui-button:focus{
47
56
  outline:1px solid var(--iui-color-foreground-primary);
48
- outline-offset:-1px; }
49
- @supports not selector(*:focus-visible){
50
- .iui-button:focus{
51
- outline:1px solid var(--iui-color-foreground-primary);
52
- outline-offset:-1px; } }
53
- .iui-button[disabled], .iui-button:disabled{
54
- cursor:not-allowed;
55
- background:#EEF0F3;
56
- border-color:#EEF0F3;
57
- color:rgba(0, 0, 0, 0.2);
58
- background:var(--iui-color-background-disabled);
59
- border-color:var(--iui-color-background-disabled);
60
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
61
- .iui-button.iui-active::after{
62
- content:'';
63
- position:absolute;
64
- inset:var(--_iui-button-active-stripe-inset);
65
- background-color:var(--iui-color-foreground-primary); }
66
- .iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
67
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
68
- .iui-button.iui-default{
69
- background-color:#FFF;
70
- border-color:rgba(0, 0, 0, 0.4);
71
- color:rgba(0, 0, 0, 0.8);
72
- background-color:var(--iui-color-background-1);
73
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
74
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
75
- .iui-button.iui-default:focus-visible{
76
- outline:2px solid var(--iui-color-foreground-primary);
77
- outline-offset:-2px; }
78
- @supports not selector(*:focus-visible){
79
- .iui-button.iui-default:focus{
80
- outline:2px solid var(--iui-color-foreground-primary);
81
- outline-offset:-2px; } }
82
- .iui-button.iui-default:hover, .iui-button.iui-default:active{
83
- background-color:#f2f2f2;
84
- border-color:black;
85
- color:black;
86
- background-color:var(--iui-color-background-1-overlay);
87
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
88
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
89
- .iui-button.iui-default:hover .iui-notification-primary::before,
90
- .iui-button.iui-default:hover .iui-notification-positive::before,
91
- .iui-button.iui-default:hover .iui-notification-warning::before,
92
- .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
93
- .iui-button.iui-default:active .iui-notification-positive::before,
94
- .iui-button.iui-default:active .iui-notification-warning::before,
95
- .iui-button.iui-default:active .iui-notification-negative::before{
96
- border-color:#f2f2f2;
97
- border-color:var(--iui-color-background-1-overlay); }
98
- .iui-button.iui-default.iui-dropdown{
99
- padding-right:8px; }
100
- .iui-button.iui-default.iui-dropdown.iui-small{
101
- padding-right:4px; }
102
- .iui-button.iui-default.iui-dropdown.iui-large{
103
- padding-right:12px; }
104
- .iui-button.iui-default.iui-active:enabled{
105
- position:relative;
106
- color:#008BE1;
107
- color:var(--iui-color-foreground-primary); }
108
- .iui-button.iui-default.iui-active:enabled::before{
109
- content:'';
110
- position:absolute;
111
- inset:0;
112
- background-color:rgba(0, 139, 225, 0.1);
113
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
114
- .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
115
- cursor:not-allowed;
116
- background:#EEF0F3;
117
- border-color:#EEF0F3;
118
- color:rgba(0, 0, 0, 0.2);
119
- background:var(--iui-color-background-disabled);
120
- border-color:var(--iui-color-background-disabled);
121
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
122
- .iui-button.iui-high-visibility{
123
- background-color:#008BE1;
124
- border-color:#008BE1;
125
- color:#FFF;
126
- background-color:var(--iui-color-background-primary);
127
- border-color:var(--iui-color-background-primary);
128
- color:var(--iui-color-foreground-accessory); }
129
- .iui-button.iui-high-visibility:focus-visible{
130
- outline:1px solid var(--iui-color-foreground-accessory);
131
- outline-offset:-3px; }
132
- @supports not selector(*:focus-visible){
133
- .iui-button.iui-high-visibility:focus{
134
- outline:1px solid var(--iui-color-foreground-accessory);
135
- outline-offset:-3px; } }
136
- .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
137
- background-color:#006bae;
138
- border-color:#006bae;
139
- color:#FFF;
140
- background-color:var(--iui-color-background-primary-overlay);
141
- border-color:var(--iui-color-background-primary-overlay);
142
- color:var(--iui-color-foreground-accessory); }
143
- .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
144
- cursor:not-allowed;
145
- background:#EEF0F3;
146
- border-color:#EEF0F3;
147
- color:rgba(0, 0, 0, 0.2);
148
- background:var(--iui-color-background-disabled);
149
- border-color:var(--iui-color-background-disabled);
150
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
151
- .iui-button.iui-cta{
152
- background-color:#53A21A;
153
- border-color:#53A21A;
154
- color:#FFF;
155
- background-color:var(--iui-color-background-positive);
156
- border-color:var(--iui-color-background-positive);
157
- color:var(--iui-color-foreground-accessory); }
158
- .iui-button.iui-cta:focus-visible{
159
- outline:1px solid var(--iui-color-foreground-accessory);
160
- outline-offset:-3px; }
161
- @supports not selector(*:focus-visible){
162
- .iui-button.iui-cta:focus{
163
- outline:1px solid var(--iui-color-foreground-accessory);
164
- outline-offset:-3px; } }
165
- .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
166
- background-color:#3c7613;
167
- border-color:#3c7613;
168
- color:#FFF;
169
- background-color:var(--iui-color-background-positive-overlay);
170
- border-color:var(--iui-color-background-positive-overlay);
171
- color:var(--iui-color-foreground-accessory); }
172
- .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
173
- cursor:not-allowed;
174
- background:#EEF0F3;
175
- border-color:#EEF0F3;
176
- color:rgba(0, 0, 0, 0.2);
177
- background:var(--iui-color-background-disabled);
178
- border-color:var(--iui-color-background-disabled);
179
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
180
- .iui-button.iui-idea{
181
- background-color:#008BE1;
182
- border-color:#008BE1;
183
- color:#FFF;
184
- background-color:var(--iui-color-background-primary);
185
- border-color:var(--iui-color-background-primary);
186
- color:var(--iui-color-foreground-accessory);
187
- border-radius:22px;
188
- box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
189
- position:fixed;
190
- bottom:11px;
191
- right:16px; }
192
- .iui-button.iui-idea:focus-visible{
193
- outline:1px solid var(--iui-color-foreground-accessory);
194
- outline-offset:-3px; }
195
- @supports not selector(*:focus-visible){
196
- .iui-button.iui-idea:focus{
197
- outline:1px solid var(--iui-color-foreground-accessory);
198
- outline-offset:-3px; } }
199
- .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
200
- background-color:#006bae;
201
- border-color:#006bae;
202
- color:#FFF;
203
- background-color:var(--iui-color-background-primary-overlay);
204
- border-color:var(--iui-color-background-primary-overlay);
205
- color:var(--iui-color-foreground-accessory); }
206
- .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
207
- cursor:not-allowed;
208
- background:#EEF0F3;
209
- border-color:#EEF0F3;
210
- color:rgba(0, 0, 0, 0.2);
211
- background:var(--iui-color-background-disabled);
212
- border-color:var(--iui-color-background-disabled);
213
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
214
- .iui-button.iui-borderless{
215
- border-color:transparent;
216
- background-color:transparent;
217
- padding:0 8px;
218
- height:38px;
219
- gap:8px; }
220
- .iui-button.iui-borderless > .iui-button-icon:only-child{
221
- margin-left:3px;
222
- margin-right:3px; }
223
- .iui-button.iui-borderless:hover{
224
- background-color:rgba(0, 0, 0, 0.1);
225
- border-color:transparent;
226
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
227
- border-color:transparent; }
228
- .iui-button.iui-borderless.iui-active{
229
- background-color:rgba(0, 139, 225, 0.1);
230
- color:#008BE1;
231
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
232
- color:var(--iui-color-foreground-primary);
233
- border-color:transparent; }
234
- .iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
235
- cursor:not-allowed;
236
- background:#EEF0F3;
237
- border-color:#EEF0F3;
238
- color:rgba(0, 0, 0, 0.2);
239
- background:var(--iui-color-background-disabled);
240
- border-color:var(--iui-color-background-disabled);
241
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
242
- background-color:transparent;
243
- border-color:transparent;
244
- background-color:transparent;
245
- border-color:transparent; }
246
- .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
247
- background-color:rgba(0, 0, 0, 0.05);
248
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
249
- .iui-button.iui-small{
250
- padding:0 8px;
251
- height:27px;
252
- gap:4px; }
253
- .iui-button.iui-small.iui-borderless{
254
- padding:0 2px;
255
- height:27px;
256
- gap:4px; }
257
- .iui-button.iui-large{
258
- padding:0 24px;
259
- height:49px;
260
- font-size:16px;
261
- gap:12px; }
262
- .iui-button.iui-large.iui-borderless{
263
- padding:0 12px;
264
- height:49px;
265
- font-size:16px;
266
- gap:12px; }
57
+ outline-offset:-1px;
58
+ }
59
+ }
60
+ .iui-button[disabled], .iui-button:disabled{
61
+ cursor:not-allowed;
62
+ background:#EEF0F3;
63
+ border-color:#EEF0F3;
64
+ color:rgba(0, 0, 0, 0.2);
65
+ background:var(--iui-color-background-disabled);
66
+ border-color:var(--iui-color-background-disabled);
67
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
68
+ }
69
+ .iui-button.iui-active::after{
70
+ content:"";
71
+ position:absolute;
72
+ inset:var(--_iui-button-active-stripe-inset);
73
+ background-color:var(--iui-color-foreground-primary);
74
+ }
75
+ .iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
76
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
77
+ }
78
+ .iui-button.iui-default{
79
+ background-color:#FFF;
80
+ border-color:rgba(0, 0, 0, 0.4);
81
+ color:rgba(0, 0, 0, 0.8);
82
+ background-color:var(--iui-color-background-1);
83
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
84
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
85
+ }
86
+ .iui-button.iui-default:focus-visible{
87
+ outline:2px solid var(--iui-color-foreground-primary);
88
+ outline-offset:-2px;
89
+ }
90
+ @supports not selector(*:focus-visible){
91
+ .iui-button.iui-default:focus{
92
+ outline:2px solid var(--iui-color-foreground-primary);
93
+ outline-offset:-2px;
94
+ }
95
+ }
96
+ .iui-button.iui-default:hover, .iui-button.iui-default:active{
97
+ background-color:#f2f2f2;
98
+ border-color:black;
99
+ color:black;
100
+ background-color:var(--iui-color-background-1-overlay);
101
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
102
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
103
+ }
104
+ .iui-button.iui-default:hover .iui-notification-primary::before,
105
+ .iui-button.iui-default:hover .iui-notification-positive::before,
106
+ .iui-button.iui-default:hover .iui-notification-warning::before,
107
+ .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
108
+ .iui-button.iui-default:active .iui-notification-positive::before,
109
+ .iui-button.iui-default:active .iui-notification-warning::before,
110
+ .iui-button.iui-default:active .iui-notification-negative::before{
111
+ border-color:#f2f2f2;
112
+ border-color:var(--iui-color-background-1-overlay);
113
+ }
114
+ .iui-button.iui-default.iui-dropdown{
115
+ padding-right:8px;
116
+ }
117
+ .iui-button.iui-default.iui-dropdown.iui-small{
118
+ padding-right:4px;
119
+ }
120
+ .iui-button.iui-default.iui-dropdown.iui-large{
121
+ padding-right:12px;
122
+ }
123
+ .iui-button.iui-default.iui-active:enabled{
124
+ position:relative;
125
+ color:#008BE1;
126
+ color:var(--iui-color-foreground-primary);
127
+ }
128
+ .iui-button.iui-default.iui-active:enabled::before{
129
+ content:"";
130
+ position:absolute;
131
+ inset:0;
132
+ background-color:rgba(0, 139, 225, 0.1);
133
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
134
+ }
135
+ .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
136
+ cursor:not-allowed;
137
+ background:#EEF0F3;
138
+ border-color:#EEF0F3;
139
+ color:rgba(0, 0, 0, 0.2);
140
+ background:var(--iui-color-background-disabled);
141
+ border-color:var(--iui-color-background-disabled);
142
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
143
+ }
144
+ .iui-button.iui-high-visibility{
145
+ background-color:#008BE1;
146
+ border-color:#008BE1;
147
+ color:#FFF;
148
+ background-color:var(--iui-color-background-primary);
149
+ border-color:var(--iui-color-background-primary);
150
+ color:var(--iui-color-foreground-accessory);
151
+ }
152
+ .iui-button.iui-high-visibility:focus-visible{
153
+ outline:1px solid var(--iui-color-foreground-accessory);
154
+ outline-offset:-3px;
155
+ }
156
+ @supports not selector(*:focus-visible){
157
+ .iui-button.iui-high-visibility:focus{
158
+ outline:1px solid var(--iui-color-foreground-accessory);
159
+ outline-offset:-3px;
160
+ }
161
+ }
162
+ .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
163
+ background-color:#006bae;
164
+ border-color:#006bae;
165
+ color:#FFF;
166
+ background-color:var(--iui-color-background-primary-overlay);
167
+ border-color:var(--iui-color-background-primary-overlay);
168
+ color:var(--iui-color-foreground-accessory);
169
+ }
170
+ .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
171
+ cursor:not-allowed;
172
+ background:#EEF0F3;
173
+ border-color:#EEF0F3;
174
+ color:rgba(0, 0, 0, 0.2);
175
+ background:var(--iui-color-background-disabled);
176
+ border-color:var(--iui-color-background-disabled);
177
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
178
+ }
179
+ .iui-button.iui-cta{
180
+ background-color:#53A21A;
181
+ border-color:#53A21A;
182
+ color:#FFF;
183
+ background-color:var(--iui-color-background-positive);
184
+ border-color:var(--iui-color-background-positive);
185
+ color:var(--iui-color-foreground-accessory);
186
+ }
187
+ .iui-button.iui-cta:focus-visible{
188
+ outline:1px solid var(--iui-color-foreground-accessory);
189
+ outline-offset:-3px;
190
+ }
191
+ @supports not selector(*:focus-visible){
192
+ .iui-button.iui-cta:focus{
193
+ outline:1px solid var(--iui-color-foreground-accessory);
194
+ outline-offset:-3px;
195
+ }
196
+ }
197
+ .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
198
+ background-color:#3c7613;
199
+ border-color:#3c7613;
200
+ color:#FFF;
201
+ background-color:var(--iui-color-background-positive-overlay);
202
+ border-color:var(--iui-color-background-positive-overlay);
203
+ color:var(--iui-color-foreground-accessory);
204
+ }
205
+ .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
206
+ cursor:not-allowed;
207
+ background:#EEF0F3;
208
+ border-color:#EEF0F3;
209
+ color:rgba(0, 0, 0, 0.2);
210
+ background:var(--iui-color-background-disabled);
211
+ border-color:var(--iui-color-background-disabled);
212
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
213
+ }
214
+ .iui-button.iui-idea{
215
+ background-color:#008BE1;
216
+ border-color:#008BE1;
217
+ color:#FFF;
218
+ background-color:var(--iui-color-background-primary);
219
+ border-color:var(--iui-color-background-primary);
220
+ color:var(--iui-color-foreground-accessory);
221
+ border-radius:22px;
222
+ box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
223
+ position:fixed;
224
+ bottom:11px;
225
+ right:16px;
226
+ }
227
+ .iui-button.iui-idea:focus-visible{
228
+ outline:1px solid var(--iui-color-foreground-accessory);
229
+ outline-offset:-3px;
230
+ }
231
+ @supports not selector(*:focus-visible){
232
+ .iui-button.iui-idea:focus{
233
+ outline:1px solid var(--iui-color-foreground-accessory);
234
+ outline-offset:-3px;
235
+ }
236
+ }
237
+ .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
238
+ background-color:#006bae;
239
+ border-color:#006bae;
240
+ color:#FFF;
241
+ background-color:var(--iui-color-background-primary-overlay);
242
+ border-color:var(--iui-color-background-primary-overlay);
243
+ color:var(--iui-color-foreground-accessory);
244
+ }
245
+ .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
246
+ cursor:not-allowed;
247
+ background:#EEF0F3;
248
+ border-color:#EEF0F3;
249
+ color:rgba(0, 0, 0, 0.2);
250
+ background:var(--iui-color-background-disabled);
251
+ border-color:var(--iui-color-background-disabled);
252
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
253
+ }
254
+ .iui-button.iui-borderless{
255
+ border-color:transparent;
256
+ background-color:transparent;
257
+ padding:0 8px;
258
+ height:38px;
259
+ gap:8px;
260
+ }
261
+ .iui-button.iui-borderless > .iui-button-icon:only-child{
262
+ margin-left:3px;
263
+ margin-right:3px;
264
+ }
265
+ .iui-button.iui-borderless:hover{
266
+ background-color:rgba(0, 0, 0, 0.1);
267
+ border-color:transparent;
268
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
269
+ border-color:transparent;
270
+ }
271
+ .iui-button.iui-borderless.iui-active{
272
+ background-color:rgba(0, 139, 225, 0.1);
273
+ color:#008BE1;
274
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
275
+ color:var(--iui-color-foreground-primary);
276
+ border-color:transparent;
277
+ }
278
+ .iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
279
+ cursor:not-allowed;
280
+ background:#EEF0F3;
281
+ border-color:#EEF0F3;
282
+ color:rgba(0, 0, 0, 0.2);
283
+ background:var(--iui-color-background-disabled);
284
+ border-color:var(--iui-color-background-disabled);
285
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
286
+ background-color:transparent;
287
+ border-color:transparent;
288
+ background-color:transparent;
289
+ border-color:transparent;
290
+ }
291
+ .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
292
+ background-color:rgba(0, 0, 0, 0.05);
293
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
294
+ }
295
+ .iui-button.iui-small{
296
+ padding:0 8px;
297
+ height:27px;
298
+ gap:4px;
299
+ }
300
+ .iui-button.iui-small.iui-borderless{
301
+ padding:0 2px;
302
+ height:27px;
303
+ gap:4px;
304
+ }
305
+ .iui-button.iui-large{
306
+ padding:0 24px;
307
+ height:49px;
308
+ font-size:16px;
309
+ gap:12px;
310
+ }
311
+ .iui-button.iui-large.iui-borderless{
312
+ padding:0 12px;
313
+ height:49px;
314
+ font-size:16px;
315
+ gap:12px;
316
+ }
267
317
 
268
318
  .iui-button-group{
269
319
  display:inline-flex;
270
320
  align-items:center;
271
- isolation:isolate; }
272
- .iui-button-group > *{
273
- display:flex; }
274
- .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
275
- position:relative;
276
- --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
277
- .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
278
- z-index:1; }
279
- .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
280
- z-index:2; }
281
- .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled="true"], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled="true"], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
282
- z-index:-1; }
283
- .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
284
- border-radius:0;
285
- transition-duration:0ms; }
286
- .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
287
- transition-duration:0.2s; }
288
- .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
289
- border-top-left-radius:3px;
290
- border-bottom-left-radius:3px; }
291
- .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
292
- border-top-right-radius:3px;
293
- border-bottom-right-radius:3px; }
294
- .iui-button-group > * + *{
295
- margin-left:-1px; }
296
- .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
297
- border-left-color:#DCE0E3;
298
- border-left-color:var(--iui-color-background-4); }
321
+ isolation:isolate;
322
+ max-width:100%;
323
+ }
324
+ .iui-button-group > *{
325
+ display:flex;
326
+ }
327
+ .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
328
+ position:relative;
329
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
330
+ }
331
+ .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
332
+ z-index:1;
333
+ }
334
+ .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
335
+ z-index:2;
336
+ }
337
+ .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled=true], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled=true], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
338
+ z-index:-1;
339
+ }
340
+ .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
341
+ border-radius:0;
342
+ transition-duration:0ms;
343
+ }
344
+ .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
345
+ transition-duration:0.2s;
346
+ }
347
+ .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
348
+ border-top-left-radius:3px;
349
+ border-bottom-left-radius:3px;
350
+ }
351
+ .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
352
+ border-bottom-right-radius:3px;
353
+ border-top-right-radius:3px;
354
+ }
355
+ .iui-button-group > * + *{
356
+ margin-left:-1px;
357
+ }
358
+ .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
359
+ border-left-color:var(--iui-color-background-4);
360
+ }
361
+ .iui-button-group-vertical{
362
+ display:inline-flex;
363
+ align-items:center;
364
+ isolation:isolate;
365
+ flex-direction:column;
366
+ max-height:100%;
367
+ }
368
+ .iui-button-group-vertical > *{
369
+ display:flex;
370
+ }
371
+ .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
372
+ position:relative;
373
+ --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
374
+ }
375
+ .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
376
+ z-index:1;
377
+ }
378
+ .iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
379
+ z-index:2;
380
+ }
381
+ .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled=true], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled=true], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
382
+ z-index:-1;
383
+ }
384
+ .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
385
+ border-radius:0;
386
+ transition-duration:0ms;
387
+ }
388
+ .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):focus{
389
+ transition-duration:0.2s;
390
+ }
391
+ .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
392
+ border-top-left-radius:3px;
393
+ border-top-right-radius:3px;
394
+ }
395
+ .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
396
+ border-bottom-right-radius:3px;
397
+ border-bottom-left-radius:3px;
398
+ }
399
+ .iui-button-group-vertical > * + *{
400
+ margin-top:-1px;
401
+ }
402
+ .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
403
+ border-top-color:var(--iui-color-background-4);
404
+ }
299
405
 
300
406
  .iui-button-split-menu{
301
407
  display:inline-flex;
302
408
  align-items:center;
303
- isolation:isolate; }
304
- .iui-button-split-menu > *{
305
- display:flex; }
306
- .iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
307
- position:relative;
308
- --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
309
- .iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
310
- z-index:1; }
311
- .iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
312
- z-index:2; }
313
- .iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled="true"], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled="true"], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
314
- z-index:-1; }
315
- .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
316
- border-radius:0;
317
- transition-duration:0ms; }
318
- .iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
319
- transition-duration:0.2s; }
320
- .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
321
- border-top-left-radius:3px;
322
- border-bottom-left-radius:3px; }
323
- .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
324
- border-top-right-radius:3px;
325
- border-bottom-right-radius:3px; }
326
- .iui-button-split-menu > * + *{
327
- margin-left:-1px; }
328
- .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
329
- border-left-color:#DCE0E3;
330
- border-left-color:var(--iui-color-background-4); }
331
- .iui-button-split-menu:hover{
332
- background-color:rgba(0, 0, 0, 0.1);
333
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
334
- .iui-button-split-menu > *:first-child > .iui-borderless:hover{
335
- background-color:transparent; }
336
- .iui-button-split-menu > *:last-child > .iui-button{
337
- padding:4px; }
338
- .iui-button-split-menu > *:last-child > .iui-small{
339
- padding:2px; }
340
- .iui-button-split-menu > *:last-child > .iui-large{
341
- padding:8px; }
342
- .iui-button-split-menu > *:first-child > .iui-high-visibility,
343
- .iui-button-split-menu > *:first-child > .iui-cta{
344
- border-right-color:rgba(255, 255, 255, 0.4);
345
- border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
346
- .iui-button-split-menu > *:last-child > .iui-high-visibility,
347
- .iui-button-split-menu > *:last-child > .iui-cta{
348
- border-left-color:rgba(255, 255, 255, 0.4);
349
- border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)); }
350
- .iui-button-split-menu.iui-disabled{
351
- background-color:transparent;
352
- background-color:transparent; }
353
- .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
354
- cursor:not-allowed;
355
- background:#EEF0F3;
356
- border-color:#EEF0F3;
357
- color:rgba(0, 0, 0, 0.2);
358
- background:var(--iui-color-background-disabled);
359
- border-color:var(--iui-color-background-disabled);
360
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
409
+ isolation:isolate;
410
+ max-width:100%;
411
+ }
412
+ .iui-button-split-menu > *{
413
+ display:flex;
414
+ }
415
+ .iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
416
+ position:relative;
417
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
418
+ }
419
+ .iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
420
+ z-index:1;
421
+ }
422
+ .iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
423
+ z-index:2;
424
+ }
425
+ .iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled=true], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled=true], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
426
+ z-index:-1;
427
+ }
428
+ .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
429
+ border-radius:0;
430
+ transition-duration:0ms;
431
+ }
432
+ .iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
433
+ transition-duration:0.2s;
434
+ }
435
+ .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
436
+ border-top-left-radius:3px;
437
+ border-bottom-left-radius:3px;
438
+ }
439
+ .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
440
+ border-bottom-right-radius:3px;
441
+ border-top-right-radius:3px;
442
+ }
443
+ .iui-button-split-menu > * + *{
444
+ margin-left:-1px;
445
+ }
446
+ .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
447
+ border-left-color:var(--iui-color-background-4);
448
+ }
449
+ .iui-button-split-menu:hover{
450
+ background-color:rgba(0, 0, 0, 0.1);
451
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
452
+ }
453
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
454
+ background-color:transparent;
455
+ }
456
+ .iui-button-split-menu > *:last-child > .iui-button{
457
+ padding:4px;
458
+ }
459
+ .iui-button-split-menu > *:last-child > .iui-small{
460
+ padding:2px;
461
+ }
462
+ .iui-button-split-menu > *:last-child > .iui-large{
463
+ padding:8px;
464
+ }
465
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
466
+ .iui-button-split-menu > *:first-child > .iui-cta{
467
+ border-right-color:rgba(255, 255, 255, 0.4);
468
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
469
+ }
470
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
471
+ .iui-button-split-menu > *:last-child > .iui-cta{
472
+ border-left-color:rgba(255, 255, 255, 0.4);
473
+ border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
474
+ }
475
+ .iui-button-split-menu.iui-disabled{
476
+ background-color:transparent;
477
+ background-color:transparent;
478
+ }
479
+ .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
480
+ cursor:not-allowed;
481
+ background:#EEF0F3;
482
+ border-color:#EEF0F3;
483
+ color:rgba(0, 0, 0, 0.2);
484
+ background:var(--iui-color-background-disabled);
485
+ border-color:var(--iui-color-background-disabled);
486
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
487
+ }
361
488
 
362
489
  .iui-button-icon{
363
490
  width:16px;
364
491
  height:16px;
365
492
  transition:fill 0.2s ease-out;
366
- fill:currentColor; }
493
+ fill:currentColor;
494
+ }