@itwin/itwinui-css 1.0.0-dev.15 → 1.0.0-dev.16

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 (49) hide show
  1. package/css/alert.css +1 -295
  2. package/css/all.css +1 -8825
  3. package/css/anchor.css +1 -56
  4. package/css/avatar.css +1 -225
  5. package/css/backdrop.css +1 -22
  6. package/css/badge.css +1 -25
  7. package/css/blockquote.css +1 -28
  8. package/css/breadcrumbs.css +1 -346
  9. package/css/button.css +1 -388
  10. package/css/carousel.css +1 -121
  11. package/css/checkbox.css +1 -148
  12. package/css/code.css +1 -85
  13. package/css/color-picker.css +1 -200
  14. package/css/date-picker.css +1 -394
  15. package/css/dialog.css +1 -161
  16. package/css/expandable-block.css +1 -171
  17. package/css/fieldset.css +1 -28
  18. package/css/file-upload.css +1 -78
  19. package/css/footer.css +1 -83
  20. package/css/global.css +1 -59
  21. package/css/header.css +1 -437
  22. package/css/information-panel.css +1 -190
  23. package/css/input.css +1 -167
  24. package/css/keyboard.css +1 -27
  25. package/css/location-marker.css +1 -114
  26. package/css/menu.css +1 -169
  27. package/css/non-ideal-state.css +1 -59
  28. package/css/progress-indicator.css +1 -299
  29. package/css/radio-tile.css +1 -188
  30. package/css/radio.css +1 -155
  31. package/css/select.css +1 -239
  32. package/css/side-navigation.css +1 -211
  33. package/css/skip-to-content.css +1 -61
  34. package/css/slider.css +1 -261
  35. package/css/stepper.css +1 -137
  36. package/css/surface.css +1 -11
  37. package/css/table.css +1 -723
  38. package/css/tabs.css +1 -324
  39. package/css/tag.css +1 -132
  40. package/css/text.css +1 -115
  41. package/css/tile.css +1 -491
  42. package/css/time-picker.css +1 -128
  43. package/css/toast.css +1 -315
  44. package/css/toggle-switch.css +1 -207
  45. package/css/tooltip.css +1 -48
  46. package/css/tree.css +1 -126
  47. package/css/utils.css +1 -513
  48. package/css/workflow-diagram.css +1 -63
  49. package/package.json +8 -4
package/css/tree.css CHANGED
@@ -2,129 +2,4 @@
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-tree{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- list-style:none;
11
- border-radius:var(--iui-border-radius-1);
12
- background-color:var(--iui-color-background);
13
- }
14
-
15
- .iui-sub-tree{
16
- margin:0;
17
- padding:0;
18
- border:none;
19
- vertical-align:baseline;
20
- list-style:none;
21
- }
22
-
23
- .iui-tree-item:focus-visible{
24
- outline:none;
25
- }
26
- .iui-tree-item:focus-visible > .iui-tree-node{
27
- outline:1px solid var(--iui-color-border-accent);
28
- outline-offset:-1px;
29
- }
30
- .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
31
- outline:2px solid var(--iui-color-border-accent);
32
- outline-offset:-2px;
33
- }
34
- @supports not selector(*:focus-visible){
35
- .iui-tree-item:focus{
36
- outline:none;
37
- }
38
- .iui-tree-item:focus > .iui-tree-node{
39
- outline:1px solid var(--iui-color-border-accent);
40
- outline-offset:-1px;
41
- }
42
- .iui-tree-item:focus > .iui-tree-node.iui-active{
43
- outline:2px solid var(--iui-color-border-accent);
44
- outline-offset:-2px;
45
- }
46
- }
47
-
48
- .iui-tree-node{
49
- display:flex;
50
- cursor:pointer;
51
- padding:0 var(--iui-size-xs);
52
- align-items:center;
53
- border-radius:var(--iui-border-radius-1);
54
- }
55
- .iui-tree-node-checkbox{
56
- margin-right:var(--iui-size-xs);
57
- }
58
- .iui-tree-node-content{
59
- display:flex;
60
- align-items:center;
61
- min-height:calc(var(--iui-size-s) * 3);
62
- margin-left:calc(calc(var(--iui-component-height-small) + 2px) * (var(--level, 0)));
63
- overflow:hidden;
64
- padding-left:var(--iui-size-3xs);
65
- }
66
- .iui-tree-node-content-icon{
67
- display:flex;
68
- flex-shrink:0;
69
- width:var(--iui-size-m);
70
- height:var(--iui-size-m);
71
- fill:var(--iui-color-icon-muted);
72
- margin:0 calc(var(--iui-size-2xs) + 1px);
73
- }
74
- @media (forced-colors: active){
75
- .iui-tree-node-content-icon{
76
- fill:CanvasText;
77
- }
78
- }
79
- .iui-tree-node-content-icon:first-child{
80
- margin-left:calc(var(--iui-component-height-small) + 2px + var(--iui-size-2xs) + 1px);
81
- }
82
- @media (prefers-reduced-motion: no-preference){
83
- .iui-tree-node-content-expander-icon{
84
- transition:transform var(--iui-duration-1) ease-out;
85
- }
86
- }
87
- .iui-tree-node-content-expander-icon-expanded{
88
- transform:rotate(90deg);
89
- }
90
- .iui-tree-node-content-label{
91
- min-width:0;
92
- padding-left:calc(var(--iui-size-2xs) + 1px);
93
- }
94
- .iui-tree-node-content-label:first-child{
95
- margin-left:calc(var(--iui-component-height-small) + 2px);
96
- }
97
- .iui-tree-node-content-title, .iui-tree-node-content-caption{
98
- white-space:nowrap;
99
- overflow:hidden;
100
- text-overflow:ellipsis;
101
- }
102
- .iui-tree-node-content-title{
103
- font-size:var(--iui-font-size-1);
104
- }
105
- .iui-tree-node-content-caption{
106
- font-size:var(--iui-font-size-0);
107
- color:var(--iui-color-text-muted);
108
- }
109
- .iui-tree-node:hover{
110
- background-color:var(--iui-color-background-hover);
111
- color:var(--iui-color-text-hover);
112
- }
113
- .iui-tree-node:hover .iui-tree-node-content-caption{
114
- color:var(--iui-color-text-hover);
115
- transition:color var(--iui-duration-1) ease;
116
- }
117
- .iui-tree-node.iui-active{
118
- background-color:var(--iui-color-background-accent-muted);
119
- outline:thin solid var(--iui-color-border-accent);
120
- outline-offset:-1px;
121
- }
122
- .iui-tree-node.iui-disabled{
123
- cursor:not-allowed;
124
- outline:none;
125
- background-color:transparent;
126
- }
127
- .iui-tree-node.iui-disabled,
128
- .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
129
- color:var(--iui-color-text-disabled);
130
- }
5
+ .iui-tree{vertical-align:baseline;border-radius:var(--iui-border-radius-1);background-color:var(--iui-color-background);border:none;margin:0;padding:0;list-style:none}.iui-sub-tree{vertical-align:baseline;border:none;margin:0;padding:0;list-style:none}.iui-tree-item:focus-visible{outline:none}.iui-tree-item:focus-visible>.iui-tree-node{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-item:focus-visible>.iui-tree-node.iui-active{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}@supports not selector(*:focus-visible){.iui-tree-item:focus{outline:none}.iui-tree-item:focus>.iui-tree-node{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-item:focus>.iui-tree-node.iui-active{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}}.iui-tree-node{cursor:pointer;padding:0 var(--iui-size-xs);border-radius:var(--iui-border-radius-1);align-items:center;display:flex}.iui-tree-node-checkbox{margin-right:var(--iui-size-xs)}.iui-tree-node-content{min-height:calc(var(--iui-size-s)*3);margin-left:calc(calc(var(--iui-component-height-small) + 2px)*(var(--level,0)));padding-left:var(--iui-size-3xs);align-items:center;display:flex;overflow:hidden}.iui-tree-node-content-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);margin:0 calc(var(--iui-size-2xs) + 1px);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-tree-node-content-icon{fill:CanvasText}}.iui-tree-node-content-icon:first-child{margin-left:calc(var(--iui-component-height-small) + 2px + var(--iui-size-2xs) + 1px)}@media (prefers-reduced-motion:no-preference){.iui-tree-node-content-expander-icon{transition:transform var(--iui-duration-1)ease-out}}.iui-tree-node-content-expander-icon-expanded{transform:rotate(90deg)}.iui-tree-node-content-label{min-width:0;padding-left:calc(var(--iui-size-2xs) + 1px)}.iui-tree-node-content-label:first-child{margin-left:calc(var(--iui-component-height-small) + 2px)}.iui-tree-node-content-title,.iui-tree-node-content-caption{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-tree-node-content-title{font-size:var(--iui-font-size-1)}.iui-tree-node-content-caption{font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted)}.iui-tree-node:hover{background-color:var(--iui-color-background-hover);color:var(--iui-color-text-hover)}.iui-tree-node:hover .iui-tree-node-content-caption{color:var(--iui-color-text-hover);transition:color var(--iui-duration-1)ease}.iui-tree-node.iui-active{background-color:var(--iui-color-background-accent-muted);outline:thin solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-node.iui-disabled{cursor:not-allowed;background-color:#0000;outline:none}.iui-tree-node.iui-disabled,.iui-tree-node.iui-disabled .iui-tree-node-content-caption{color:var(--iui-color-text-disabled)}
package/css/utils.css CHANGED
@@ -2,516 +2,4 @@
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
- [data-iui-icon-size=s]{
6
- display:flex;
7
- flex-shrink:0;
8
- width:var(--iui-size-s);
9
- height:var(--iui-size-s);
10
- }
11
-
12
- [data-iui-icon-size=m]{
13
- display:flex;
14
- flex-shrink:0;
15
- width:var(--iui-size-m);
16
- height:var(--iui-size-m);
17
- }
18
-
19
- [data-iui-icon-size=l]{
20
- display:flex;
21
- flex-shrink:0;
22
- width:calc(1.5 * var(--iui-size-m));
23
- height:calc(1.5 * var(--iui-size-m));
24
- }
25
-
26
- [data-iui-icon-size=xl]{
27
- display:flex;
28
- flex-shrink:0;
29
- width:var(--iui-size-xl);
30
- height:var(--iui-size-xl);
31
- }
32
-
33
- [data-iui-icon-size="2xl"]{
34
- display:flex;
35
- flex-shrink:0;
36
- width:calc(3 * var(--iui-size-m));
37
- height:calc(3 * var(--iui-size-m));
38
- }
39
-
40
- [data-iui-icon-size="3xl"]{
41
- display:flex;
42
- flex-shrink:0;
43
- width:var(--iui-size-2xl);
44
- height:var(--iui-size-2xl);
45
- }
46
-
47
- [data-iui-icon-color=default]{
48
- fill:var(--iui-color-icon-muted);
49
- }
50
- @media (forced-colors: active){
51
- [data-iui-icon-color=default]{
52
- fill:CanvasText;
53
- }
54
- }
55
-
56
- [data-iui-icon-color=informational]{
57
- fill:var(--iui-color-icon-informational);
58
- }
59
-
60
- [data-iui-icon-color=positive]{
61
- fill:var(--iui-color-icon-positive);
62
- }
63
-
64
- [data-iui-icon-color=warning]{
65
- fill:var(--iui-color-icon-warning);
66
- }
67
-
68
- [data-iui-icon-color=negative]{
69
- fill:var(--iui-color-icon-negative);
70
- }
71
-
72
- .iui-input-container{
73
- margin:0;
74
- padding:0;
75
- border:none;
76
- vertical-align:baseline;
77
- display:grid;
78
- grid-template:"label label" "inputs inputs"/auto 1fr;
79
- cursor:default;
80
- }
81
- .iui-input-container.iui-inline-icon > .iui-input{
82
- padding-right:var(--iui-component-height);
83
- }
84
- .iui-input-container.iui-inline-icon > .iui-input:last-child{
85
- padding-right:var(--iui-size-s);
86
- }
87
- .iui-input-container.iui-with-message{
88
- grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
89
- }
90
- .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
91
- margin-top:var(--iui-size-2xs);
92
- }
93
- .iui-input-container .iui-input,
94
- .iui-input-container .iui-input-with-icon,
95
- .iui-input-container .iui-input-group{
96
- grid-area:inputs;
97
- }
98
- .iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
99
- padding:calc(var(--iui-size-s) * 0.5) 0;
100
- }
101
- label.iui-input-container{
102
- cursor:pointer;
103
- }
104
- label.iui-input-container.iui-disabled{
105
- cursor:not-allowed;
106
- }
107
-
108
- .iui-input-container.iui-disabled label{
109
- cursor:not-allowed;
110
- }
111
- .iui-input-container .iui-checkbox-wrapper,
112
- .iui-input-container .iui-radio-wrapper{
113
- min-height:var(--iui-size-l);
114
- }
115
- .iui-input-container.iui-inline-label{
116
- grid-template:"label inputs icon"/auto 1fr auto;
117
- }
118
- .iui-input-container.iui-inline-label.iui-with-message{
119
- grid-template:"label inputs inputs" ". icon message"/auto auto 1fr;
120
- }
121
- .iui-input-container.iui-inline-label > .iui-input-group{
122
- display:flex;
123
- gap:var(--iui-size-m);
124
- }
125
- .iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
126
- margin-right:var(--iui-size-m);
127
- }
128
- .iui-input-container > .iui-label{
129
- font-weight:var(--iui-font-weight-semibold);
130
- margin-bottom:var(--iui-size-2xs);
131
- color:var(--_iui-input-label-color);
132
- grid-area:label;
133
- align-self:center;
134
- }
135
- .iui-input-container > .iui-label.iui-required::after{
136
- content:"*";
137
- margin-left:var(--iui-size-2xs);
138
- color:var(--iui-color-text-negative);
139
- }
140
- .iui-input-container > .iui-label.iui-disabled{
141
- --_iui-input-label-color:var(--iui-color-text-disabled);
142
- }
143
- .iui-input-container.iui-disabled{
144
- --_iui-input-label-color:var(--iui-color-text-disabled);
145
- }
146
-
147
- .iui-input-container .iui-input-icon{
148
- display:flex;
149
- flex-shrink:0;
150
- width:var(--iui-size-m);
151
- height:var(--iui-size-m);
152
- fill:var(--iui-color-icon-muted);
153
- grid-area:icon;
154
- align-self:center;
155
- }
156
- @media (forced-colors: active){
157
- .iui-input-container .iui-input-icon{
158
- fill:CanvasText;
159
- }
160
- }
161
- .iui-input-container .iui-input-icon:not(:last-child){
162
- margin-right:var(--iui-size-2xs);
163
- }
164
- .iui-input-container .iui-message{
165
- font-size:var(--iui-font-size-0);
166
- grid-area:message;
167
- margin-top:var(--iui-size-2xs);
168
- color:var(--iui-color-text-muted);
169
- }
170
- .iui-input-container .iui-message a{
171
- -webkit-user-select:none;
172
- -moz-user-select:none;
173
- -ms-user-select:none;
174
- user-select:none;
175
- }
176
- .iui-input-container.iui-inline-icon > .iui-input-icon{
177
- grid-area:inputs;
178
- justify-self:end;
179
- margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
180
- position:relative;
181
- }
182
- .iui-input-container.iui-inline-icon > .iui-input-icon svg{
183
- display:flex;
184
- flex-shrink:0;
185
- width:var(--iui-size-m);
186
- height:var(--iui-size-m);
187
- }
188
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
189
- height:100%;
190
- width:-webkit-fit-content;
191
- width:-moz-fit-content;
192
- width:fit-content;
193
- margin-right:0;
194
- border-top-left-radius:0;
195
- border-bottom-left-radius:0;
196
- border-top-right-radius:inherit;
197
- border-bottom-right-radius:inherit;
198
- }
199
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
200
- align-items:center;
201
- height:calc(100% - 4px);
202
- margin-right:2px;
203
- border-radius:var(--iui-border-radius-1);
204
- padding-inline:calc(var(--iui-size-xs) + 1px);
205
- cursor:pointer;
206
- box-sizing:content-box;
207
- background-position:center;
208
- transition:background var(--iui-duration-2) ease-out;
209
- }
210
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
211
- background:var(--iui-color-background) radial-gradient(circle, transparent 1%, var(--iui-color-background) 1%) center/15000%;
212
- }
213
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
214
- background-color:var(--iui-color-background-backdrop);
215
- background-size:100%;
216
- transition:background var(--iui-duration-0);
217
- }
218
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
219
- fill:var(--iui-color-icon);
220
- transition:transform var(--iui-duration-1) ease-out;
221
- }
222
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
223
- transform:rotate(180deg);
224
- }
225
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
226
- cursor:not-allowed;
227
- }
228
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
229
- fill:var(--iui-color-icon-disabled);
230
- }
231
- .iui-input-container.iui-inline-label > .iui-label{
232
- margin:0 var(--iui-size-m) 0 0;
233
- }
234
- .iui-input-container.iui-inline-label > .iui-label.iui-required{
235
- margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
236
- }
237
- .iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
238
- background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
239
- }
240
- .iui-input-container.iui-positive::selection,
241
- .iui-input-container.iui-positive *::selection{
242
- background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
243
- }
244
- .iui-input-container.iui-positive .iui-input-icon{
245
- fill:var(--iui-color-icon-positive);
246
- }
247
- .iui-input-container.iui-positive .iui-message{
248
- color:var(--iui-color-text-positive);
249
- }
250
- .iui-input-container.iui-positive .iui-message a{
251
- text-decoration:underline;
252
- color:var(--iui-color-text-positive);
253
- }
254
- .iui-input-container.iui-positive .iui-message a:hover{
255
- text-decoration:none;
256
- color:var(--iui-color-text-positive-hover);
257
- }
258
- .iui-input-container.iui-positive .iui-input{
259
- padding-bottom:calc(var(--iui-size-2xs) - 1px);
260
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-positive);
261
- }
262
- .iui-input-container.iui-positive .iui-input[data-iui-size=small]{
263
- padding-bottom:0;
264
- }
265
- .iui-input-container.iui-positive .iui-input[data-iui-size=large]{
266
- padding-bottom:calc(var(--iui-size-xs) - 1px);
267
- }
268
- .iui-input-container.iui-positive .iui-input:focus{
269
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-positive);
270
- outline:2px solid var(--iui-color-text-positive);
271
- outline-offset:-2px;
272
- }
273
- .iui-input-container.iui-positive .iui-input-with-icon{
274
- --_iui-input-with-icon-hover-border-color:var(--iui-color-border-positive);
275
- --_focus-color:var(--iui-color-text-positive);
276
- }
277
- .iui-input-container.iui-positive .iui-select-button{
278
- border-bottom:transparent;
279
- }
280
- .iui-input-container.iui-positive .iui-select-button::after{
281
- content:"";
282
- width:100%;
283
- position:absolute;
284
- bottom:0;
285
- left:0;
286
- height:var(--iui-size-3xs);
287
- background-color:var(--iui-color-border-positive);
288
- }
289
- .iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
290
- background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
291
- }
292
- .iui-input-container.iui-warning::selection,
293
- .iui-input-container.iui-warning *::selection{
294
- background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
295
- }
296
- .iui-input-container.iui-warning .iui-input-icon{
297
- fill:var(--iui-color-icon-warning);
298
- }
299
- .iui-input-container.iui-warning .iui-message{
300
- color:var(--iui-color-text-warning);
301
- }
302
- .iui-input-container.iui-warning .iui-message a{
303
- text-decoration:underline;
304
- color:var(--iui-color-text-warning);
305
- }
306
- .iui-input-container.iui-warning .iui-message a:hover{
307
- text-decoration:none;
308
- color:var(--iui-color-text-warning-hover);
309
- }
310
- .iui-input-container.iui-warning .iui-input{
311
- padding-bottom:calc(var(--iui-size-2xs) - 1px);
312
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-warning);
313
- }
314
- .iui-input-container.iui-warning .iui-input[data-iui-size=small]{
315
- padding-bottom:0;
316
- }
317
- .iui-input-container.iui-warning .iui-input[data-iui-size=large]{
318
- padding-bottom:calc(var(--iui-size-xs) - 1px);
319
- }
320
- .iui-input-container.iui-warning .iui-input:focus{
321
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-warning);
322
- outline:2px solid var(--iui-color-text-warning);
323
- outline-offset:-2px;
324
- }
325
- .iui-input-container.iui-warning .iui-input-with-icon{
326
- --_iui-input-with-icon-hover-border-color:var(--iui-color-border-warning);
327
- --_focus-color:var(--iui-color-text-warning);
328
- }
329
- .iui-input-container.iui-warning .iui-select-button{
330
- border-bottom:transparent;
331
- }
332
- .iui-input-container.iui-warning .iui-select-button::after{
333
- content:"";
334
- width:100%;
335
- position:absolute;
336
- bottom:0;
337
- left:0;
338
- height:var(--iui-size-3xs);
339
- background-color:var(--iui-color-border-warning);
340
- }
341
- .iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
342
- background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
343
- }
344
- .iui-input-container.iui-negative::selection,
345
- .iui-input-container.iui-negative *::selection{
346
- background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
347
- }
348
- .iui-input-container.iui-negative .iui-input-icon{
349
- fill:var(--iui-color-icon-negative);
350
- }
351
- .iui-input-container.iui-negative .iui-message{
352
- color:var(--iui-color-text-negative);
353
- }
354
- .iui-input-container.iui-negative .iui-message a{
355
- text-decoration:underline;
356
- color:var(--iui-color-text-negative);
357
- }
358
- .iui-input-container.iui-negative .iui-message a:hover{
359
- text-decoration:none;
360
- color:var(--iui-color-text-negative-hover);
361
- }
362
- .iui-input-container.iui-negative .iui-input{
363
- padding-bottom:calc(var(--iui-size-2xs) - 1px);
364
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-negative);
365
- }
366
- .iui-input-container.iui-negative .iui-input[data-iui-size=small]{
367
- padding-bottom:0;
368
- }
369
- .iui-input-container.iui-negative .iui-input[data-iui-size=large]{
370
- padding-bottom:calc(var(--iui-size-xs) - 1px);
371
- }
372
- .iui-input-container.iui-negative .iui-input:focus{
373
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-negative);
374
- outline:2px solid var(--iui-color-text-negative);
375
- outline-offset:-2px;
376
- }
377
- .iui-input-container.iui-negative .iui-input-with-icon{
378
- --_iui-input-with-icon-hover-border-color:var(--iui-color-border-negative);
379
- --_focus-color:var(--iui-color-text-negative);
380
- }
381
- .iui-input-container.iui-negative .iui-select-button{
382
- border-bottom:transparent;
383
- }
384
- .iui-input-container.iui-negative .iui-select-button::after{
385
- content:"";
386
- width:100%;
387
- position:absolute;
388
- bottom:0;
389
- left:0;
390
- height:var(--iui-size-3xs);
391
- background-color:var(--iui-color-border-negative);
392
- }
393
-
394
- .iui-input-label{
395
- font-weight:var(--iui-font-weight-semibold);
396
- margin-bottom:var(--iui-size-2xs);
397
- color:var(--_iui-input-label-color);
398
- cursor:default;
399
- display:block;
400
- }
401
- .iui-input-label.iui-required::after{
402
- content:"*";
403
- margin-left:var(--iui-size-2xs);
404
- color:var(--iui-color-text-negative);
405
- }
406
- .iui-input-label.iui-disabled{
407
- --_iui-input-label-color:var(--iui-color-text-disabled);
408
- }
409
- .iui-input-container.iui-disabled{
410
- --_iui-input-label-color:var(--iui-color-text-disabled);
411
- }
412
-
413
- label.iui-input-label{
414
- cursor:pointer;
415
- }
416
- label.iui-input-label.iui-disabled{
417
- cursor:not-allowed;
418
- }
419
-
420
- .iui-input-label.iui-inline{
421
- margin:0 var(--iui-size-m) 0 0;
422
- display:inline-flex;
423
- align-items:center;
424
- }
425
- .iui-input-label.iui-inline.iui-required{
426
- margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
427
- }
428
-
429
- .iui-notification-marker{
430
- --_iui-notification-marker-color:var(--iui-color-icon-informational);
431
- position:relative;
432
- }
433
- .iui-notification-marker::before{
434
- content:"";
435
- position:absolute;
436
- width:var(--iui-size-xs);
437
- height:var(--iui-size-xs);
438
- top:0;
439
- right:0;
440
- transform:translate(50%, -50%);
441
- border-radius:100%;
442
- background-color:var(--_iui-notification-marker-color);
443
- }
444
- @media (prefers-reduced-motion: no-preference){
445
- .iui-notification-marker::before{
446
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
447
- }
448
- }
449
- .iui-notification-marker > *{
450
- -webkit-mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
451
- mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
452
- }
453
- @media (prefers-reduced-motion: no-preference){
454
- .iui-notification-marker:where([data-iui-urgent="true"])::before{
455
- -webkit-animation:pulse 2s infinite;
456
- animation:pulse 2s infinite;
457
- }
458
- }
459
- @media (prefers-reduced-motion: no-preference){
460
- @-webkit-keyframes pulse{
461
- 0%{
462
- box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
463
- }
464
- 70%{
465
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
466
- }
467
- 100%{
468
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
469
- }
470
- }
471
- @keyframes pulse{
472
- 0%{
473
- box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
474
- }
475
- 70%{
476
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
477
- }
478
- 100%{
479
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
480
- }
481
- }
482
- }
483
- .iui-notification-marker[data-iui-variant=positive]{
484
- --_iui-notification-marker-color:var(--iui-color-icon-positive);
485
- }
486
- .iui-notification-marker[data-iui-variant=warning]{
487
- --_iui-notification-marker-color:var(--iui-color-icon-warning);
488
- }
489
- .iui-notification-marker[data-iui-variant=negative]{
490
- --_iui-notification-marker-color:var(--iui-color-icon-negative);
491
- }
492
- .iui-notification-marker[data-iui-variant=white]{
493
- --_iui-notification-marker-color:var(--iui-color-white);
494
- }
495
- .iui-popover.tippy-box{
496
- all:revert;
497
- }
498
- .iui-popover.tippy-box[data-reference-hidden]{
499
- visibility:hidden;
500
- pointer-events:none;
501
- }
502
- .iui-popover .tippy-content{
503
- all:revert;
504
- }
505
-
506
- .iui-visually-hidden{
507
- -webkit-clip-path:inset(50%);
508
- clip-path:inset(50%);
509
- overflow:hidden;
510
- position:absolute;
511
- white-space:nowrap;
512
- height:1px;
513
- width:1px;
514
- padding:0;
515
- margin:-1px;
516
- border-width:0;
517
- }
5
+ [data-iui-icon-size=s]{width:var(--iui-size-s);height:var(--iui-size-s);flex-shrink:0;display:flex}[data-iui-icon-size=m]{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}[data-iui-icon-size=l]{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}[data-iui-icon-size=xl]{width:var(--iui-size-xl);height:var(--iui-size-xl);flex-shrink:0;display:flex}[data-iui-icon-size="2xl"]{width:calc(3*var(--iui-size-m));height:calc(3*var(--iui-size-m));flex-shrink:0;display:flex}[data-iui-icon-size="3xl"]{width:var(--iui-size-2xl);height:var(--iui-size-2xl);flex-shrink:0;display:flex}[data-iui-icon-color=default]{fill:var(--iui-color-icon-muted)}@media (forced-colors:active){[data-iui-icon-color=default]{fill:CanvasText}}[data-iui-icon-color=informational]{fill:var(--iui-color-icon-informational)}[data-iui-icon-color=positive]{fill:var(--iui-color-icon-positive)}[data-iui-icon-color=warning]{fill:var(--iui-color-icon-warning)}[data-iui-icon-color=negative]{fill:var(--iui-color-icon-negative)}.iui-input-container{vertical-align:baseline;cursor:default;border:none;grid-template:"label label""inputs inputs"/auto 1fr;margin:0;padding:0;display:grid}.iui-input-container.iui-inline-icon>.iui-input{padding-right:var(--iui-component-height)}.iui-input-container.iui-inline-icon>.iui-input:last-child{padding-right:var(--iui-size-s)}.iui-input-container.iui-with-message{grid-template:"label label""inputs inputs""icon message"/auto 1fr}.iui-input-container.iui-with-message:not(.iui-inline-icon)>.iui-input-icon{margin-top:var(--iui-size-2xs)}.iui-input-container .iui-input,.iui-input-container .iui-input-with-icon,.iui-input-container .iui-input-group{grid-area:inputs}.iui-input-container .iui-input-group .iui-toggle-switch-wrapper{padding:calc(var(--iui-size-s)*.5)0}label.iui-input-container{cursor:pointer}label.iui-input-container.iui-disabled,.iui-input-container.iui-disabled label{cursor:not-allowed}.iui-input-container .iui-checkbox-wrapper,.iui-input-container .iui-radio-wrapper{min-height:var(--iui-size-l)}.iui-input-container.iui-inline-label{grid-template:"label inputs icon"/auto 1fr auto}.iui-input-container.iui-inline-label.iui-with-message{grid-template:"label inputs inputs"".icon message"/auto auto 1fr}.iui-input-container.iui-inline-label>.iui-input-group{gap:var(--iui-size-m);display:flex}.iui-input-container.iui-inline-label>.iui-input-group:not(:last-child){margin-right:var(--iui-size-m)}.iui-input-container>.iui-label{font-weight:var(--iui-font-weight-semibold);margin-bottom:var(--iui-size-2xs);color:var(--_iui-input-label-color);grid-area:label;align-self:center}.iui-input-container>.iui-label.iui-required:after{content:"*";margin-left:var(--iui-size-2xs);color:var(--iui-color-text-negative)}.iui-input-container>.iui-label.iui-disabled,.iui-input-container.iui-disabled{--_iui-input-label-color:var(--iui-color-text-disabled)}.iui-input-container .iui-input-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);flex-shrink:0;grid-area:icon;align-self:center;display:flex}@media (forced-colors:active){.iui-input-container .iui-input-icon{fill:CanvasText}}.iui-input-container .iui-input-icon:not(:last-child){margin-right:var(--iui-size-2xs)}.iui-input-container .iui-message{font-size:var(--iui-font-size-0);margin-top:var(--iui-size-2xs);color:var(--iui-color-text-muted);grid-area:message}.iui-input-container .iui-message a{-webkit-user-select:none;user-select:none}.iui-input-container.iui-inline-icon>.iui-input-icon{margin:0 calc(var(--iui-size-xs) + 1px)0 0;grid-area:inputs;justify-self:end;position:relative}.iui-input-container.iui-inline-icon>.iui-input-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-button{height:100%;width:-moz-fit-content;width:fit-content;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;margin-right:0}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable{height:calc(100% - 4px);border-radius:var(--iui-border-radius-1);padding-inline:calc(var(--iui-size-xs) + 1px);cursor:pointer;box-sizing:content-box;transition:background var(--iui-duration-2)ease-out;background-position:50%;align-items:center;margin-right:2px}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable:hover{background:var(--iui-color-background)radial-gradient(circle,transparent 1%,var(--iui-color-background)1%)center/15000%}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable:active{background-color:var(--iui-color-background-backdrop);transition:background var(--iui-duration-0);background-size:100%}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable svg{fill:var(--iui-color-icon);transition:transform var(--iui-duration-1)ease-out}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-actionable.iui-open svg{transform:rotate(180deg)}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-disabled{cursor:not-allowed}.iui-input-container.iui-inline-icon>.iui-input-icon.iui-disabled svg{fill:var(--iui-color-icon-disabled)}.iui-input-container.iui-inline-label>.iui-label{margin:0 var(--iui-size-m)0 0}.iui-input-container.iui-inline-label>.iui-label.iui-required{margin-right:calc(var(--iui-size-2xs)*1.5 - 1px)}.iui-input-container.iui-positive::selection,.iui-input-container.iui-positive ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-input-container.iui-positive .iui-input-icon{fill:var(--iui-color-icon-positive)}.iui-input-container.iui-positive .iui-message{color:var(--iui-color-text-positive)}.iui-input-container.iui-positive .iui-message a{color:var(--iui-color-text-positive);text-decoration:underline}.iui-input-container.iui-positive .iui-message a:hover{color:var(--iui-color-text-positive-hover);text-decoration:none}.iui-input-container.iui-positive .iui-input{padding-bottom:calc(var(--iui-size-2xs) - 1px);border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-positive)}.iui-input-container.iui-positive .iui-input[data-iui-size=small]{padding-bottom:0}.iui-input-container.iui-positive .iui-input[data-iui-size=large]{padding-bottom:calc(var(--iui-size-xs) - 1px)}.iui-input-container.iui-positive .iui-input:focus{border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-positive);outline:2px solid var(--iui-color-text-positive);outline-offset:-2px}.iui-input-container.iui-positive .iui-input-with-icon{--_iui-input-with-icon-hover-border-color:var(--iui-color-border-positive);--_focus-color:var(--iui-color-text-positive)}.iui-input-container.iui-positive .iui-select-button{border-bottom:#0000}.iui-input-container.iui-positive .iui-select-button:after{content:"";width:100%;height:var(--iui-size-3xs);background-color:var(--iui-color-border-positive);position:absolute;bottom:0;left:0}.iui-input-container.iui-warning::selection,.iui-input-container.iui-warning ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-input-container.iui-warning .iui-input-icon{fill:var(--iui-color-icon-warning)}.iui-input-container.iui-warning .iui-message{color:var(--iui-color-text-warning)}.iui-input-container.iui-warning .iui-message a{color:var(--iui-color-text-warning);text-decoration:underline}.iui-input-container.iui-warning .iui-message a:hover{color:var(--iui-color-text-warning-hover);text-decoration:none}.iui-input-container.iui-warning .iui-input{padding-bottom:calc(var(--iui-size-2xs) - 1px);border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-warning)}.iui-input-container.iui-warning .iui-input[data-iui-size=small]{padding-bottom:0}.iui-input-container.iui-warning .iui-input[data-iui-size=large]{padding-bottom:calc(var(--iui-size-xs) - 1px)}.iui-input-container.iui-warning .iui-input:focus{border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-warning);outline:2px solid var(--iui-color-text-warning);outline-offset:-2px}.iui-input-container.iui-warning .iui-input-with-icon{--_iui-input-with-icon-hover-border-color:var(--iui-color-border-warning);--_focus-color:var(--iui-color-text-warning)}.iui-input-container.iui-warning .iui-select-button{border-bottom:#0000}.iui-input-container.iui-warning .iui-select-button:after{content:"";width:100%;height:var(--iui-size-3xs);background-color:var(--iui-color-border-warning);position:absolute;bottom:0;left:0}.iui-input-container.iui-negative::selection,.iui-input-container.iui-negative ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-input-container.iui-negative .iui-input-icon{fill:var(--iui-color-icon-negative)}.iui-input-container.iui-negative .iui-message{color:var(--iui-color-text-negative)}.iui-input-container.iui-negative .iui-message a{color:var(--iui-color-text-negative);text-decoration:underline}.iui-input-container.iui-negative .iui-message a:hover{color:var(--iui-color-text-negative-hover);text-decoration:none}.iui-input-container.iui-negative .iui-input{padding-bottom:calc(var(--iui-size-2xs) - 1px);border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-negative)}.iui-input-container.iui-negative .iui-input[data-iui-size=small]{padding-bottom:0}.iui-input-container.iui-negative .iui-input[data-iui-size=large]{padding-bottom:calc(var(--iui-size-xs) - 1px)}.iui-input-container.iui-negative .iui-input:focus{border-bottom:var(--iui-size-3xs)solid var(--iui-color-border-negative);outline:2px solid var(--iui-color-text-negative);outline-offset:-2px}.iui-input-container.iui-negative .iui-input-with-icon{--_iui-input-with-icon-hover-border-color:var(--iui-color-border-negative);--_focus-color:var(--iui-color-text-negative)}.iui-input-container.iui-negative .iui-select-button{border-bottom:#0000}.iui-input-container.iui-negative .iui-select-button:after{content:"";width:100%;height:var(--iui-size-3xs);background-color:var(--iui-color-border-negative);position:absolute;bottom:0;left:0}.iui-input-label{font-weight:var(--iui-font-weight-semibold);margin-bottom:var(--iui-size-2xs);color:var(--_iui-input-label-color);cursor:default;display:block}.iui-input-label.iui-required:after{content:"*";margin-left:var(--iui-size-2xs);color:var(--iui-color-text-negative)}.iui-input-label.iui-disabled,.iui-input-container.iui-disabled{--_iui-input-label-color:var(--iui-color-text-disabled)}label.iui-input-label{cursor:pointer}label.iui-input-label.iui-disabled{cursor:not-allowed}.iui-input-label.iui-inline{margin:0 var(--iui-size-m)0 0;align-items:center;display:inline-flex}.iui-input-label.iui-inline.iui-required{margin-right:calc(var(--iui-size-2xs)*1.5 - 1px)}.iui-notification-marker{--_iui-notification-marker-color:var(--iui-color-icon-informational);position:relative}.iui-notification-marker:before{content:"";width:var(--iui-size-xs);height:var(--iui-size-xs);background-color:var(--_iui-notification-marker-color);border-radius:100%;position:absolute;top:0;right:0;transform:translate(50%,-50%)}@media (prefers-reduced-motion:no-preference){.iui-notification-marker:before{transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out}}.iui-notification-marker>*{-webkit-mask:radial-gradient(ellipse calc(.5*(var(--iui-size-xs) + 2*var(--iui-size-3xs)))calc(.5*(var(--iui-size-xs) + 2*var(--iui-size-3xs)))at 100% 0%,transparent 95%,#000 100%);mask:radial-gradient(ellipse calc(.5*(var(--iui-size-xs) + 2*var(--iui-size-3xs)))calc(.5*(var(--iui-size-xs) + 2*var(--iui-size-3xs)))at 100% 0%,transparent 95%,#000 100%)}@media (prefers-reduced-motion:no-preference){.iui-notification-marker:where([data-iui-urgent=true]):before{animation:2s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--_iui-notification-marker-color)}70%{box-shadow:0 0 0 7px #0000}to{box-shadow:0 0 #0000}}}.iui-notification-marker[data-iui-variant=positive]{--_iui-notification-marker-color:var(--iui-color-icon-positive)}.iui-notification-marker[data-iui-variant=warning]{--_iui-notification-marker-color:var(--iui-color-icon-warning)}.iui-notification-marker[data-iui-variant=negative]{--_iui-notification-marker-color:var(--iui-color-icon-negative)}.iui-notification-marker[data-iui-variant=white]{--_iui-notification-marker-color:var(--iui-color-white)}.iui-popover.tippy-box{all:revert}.iui-popover.tippy-box[data-reference-hidden]{visibility:hidden;pointer-events:none}.iui-popover .tippy-content{all:revert}.iui-visually-hidden{clip-path:inset(50%);white-space:nowrap;height:1px;width:1px;border-width:0;margin:-1px;padding:0;position:absolute;overflow:hidden}