@itwin/itwinui-css 0.59.2 → 1.0.0-dev.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 (202) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +1 -4
  3. package/css/alert.css +273 -139
  4. package/css/all.css +4046 -4967
  5. package/css/anchor.css +1 -5
  6. package/css/{user-icon.css → avatar.css} +51 -71
  7. package/css/backdrop.css +24 -0
  8. package/css/badge.css +2 -2
  9. package/css/blockquote.css +1 -4
  10. package/css/breadcrumbs.css +64 -137
  11. package/css/button.css +264 -349
  12. package/css/carousel.css +8 -16
  13. package/css/checkbox.css +149 -0
  14. package/css/code.css +5 -13
  15. package/css/color-picker.css +6 -44
  16. package/css/date-picker.css +6 -65
  17. package/css/dialog.css +63 -101
  18. package/css/expandable-block.css +1 -32
  19. package/css/fieldset.css +2 -7
  20. package/css/file-upload.css +0 -15
  21. package/css/footer.css +1 -9
  22. package/css/global.css +8 -63
  23. package/css/header.css +312 -398
  24. package/css/icon.css +0 -30
  25. package/css/information-panel.css +1 -15
  26. package/css/input.css +162 -0
  27. package/css/keyboard.css +2 -6
  28. package/css/location-marker.css +1 -12
  29. package/css/menu.css +1 -17
  30. package/css/progress-indicator.css +1 -93
  31. package/css/radio-tile.css +38 -65
  32. package/css/radio.css +156 -0
  33. package/css/select.css +230 -0
  34. package/css/side-navigation.css +5 -20
  35. package/css/skip-to-content.css +0 -3
  36. package/css/slider.css +2 -14
  37. package/css/stepper.css +141 -0
  38. package/css/surface.css +0 -1
  39. package/css/table.css +252 -339
  40. package/css/tabs.css +26 -65
  41. package/css/tag.css +7 -32
  42. package/css/text.css +1 -3
  43. package/css/textarea.css +96 -0
  44. package/css/tile.css +169 -155
  45. package/css/time-picker.css +2 -14
  46. package/css/{toast-notification.css → toast.css} +3 -45
  47. package/css/toggle-switch.css +13 -60
  48. package/css/tooltip.css +1 -4
  49. package/css/tree.css +0 -14
  50. package/css/utils.css +609 -0
  51. package/css/workflow-diagram.css +67 -0
  52. package/package.json +11 -7
  53. package/scss/alert/alert.scss +50 -44
  54. package/scss/alert/classes.scss +24 -4
  55. package/scss/anchor/anchor.scss +76 -1
  56. package/scss/{user-icon/sizes.scss → avatar/avatar-sizes.scss} +6 -5
  57. package/scss/{user-icon/user-icon.scss → avatar/avatar.scss} +35 -70
  58. package/scss/avatar/classes.scss +27 -0
  59. package/scss/{user-icon → avatar}/index.scss +1 -2
  60. package/scss/backdrop/backdrop.scss +27 -0
  61. package/scss/backdrop/classes.scss +7 -0
  62. package/scss/backdrop/index.scss +3 -0
  63. package/scss/badge/badge.scss +4 -2
  64. package/scss/blockquote/blockquote.scss +4 -9
  65. package/scss/breadcrumbs/breadcrumbs.scss +13 -18
  66. package/scss/button/borderless.scss +20 -32
  67. package/scss/button/button-group.scss +15 -7
  68. package/scss/button/button.scss +64 -42
  69. package/scss/button/classes.scss +47 -37
  70. package/scss/button/default.scss +33 -41
  71. package/scss/button/idea.scss +4 -2
  72. package/scss/button/index.scss +3 -6
  73. package/scss/button/split-button.scss +45 -0
  74. package/scss/button/variant.scss +44 -0
  75. package/scss/carousel/carousel.scss +12 -23
  76. package/scss/{inputs → checkbox}/checkbox.scss +50 -2
  77. package/scss/checkbox/classes.scss +7 -0
  78. package/scss/checkbox/index.scss +3 -0
  79. package/scss/classes.scss +11 -6
  80. package/scss/code/code.scss +3 -5
  81. package/scss/code/codeblock.scss +7 -21
  82. package/scss/color-picker/color-picker.scss +32 -61
  83. package/scss/date-picker/date-picker.scss +21 -55
  84. package/scss/dialog/classes.scss +7 -6
  85. package/scss/dialog/dialog.scss +95 -130
  86. package/scss/expandable-block/block.scss +22 -50
  87. package/scss/fieldset/fieldset.scss +6 -12
  88. package/scss/file-upload/file-upload.scss +13 -23
  89. package/scss/footer/footer.scss +5 -15
  90. package/scss/header/classes.scss +70 -2
  91. package/scss/header/header-buttons.scss +316 -0
  92. package/scss/header/header.scss +40 -408
  93. package/scss/header/index.scss +1 -0
  94. package/scss/icon/{mixins.scss → icon.scss} +5 -15
  95. package/scss/icon/index.scss +1 -2
  96. package/scss/index.scss +11 -6
  97. package/scss/information-panel/information-panel.scss +8 -26
  98. package/scss/input/classes.scss +15 -0
  99. package/scss/input/index.scss +4 -0
  100. package/scss/{inputs → input}/input-with-icon.scss +1 -0
  101. package/scss/{inputs → input}/input.scss +15 -25
  102. package/scss/keyboard/keyboard.scss +5 -9
  103. package/scss/location-marker/data-rich.scss +5 -14
  104. package/scss/location-marker/default.scss +1 -3
  105. package/scss/location-marker/location-marker.scss +1 -3
  106. package/scss/location-marker/me.scss +7 -14
  107. package/scss/menu/menu.scss +16 -36
  108. package/scss/non-ideal-state/non-ideal-state.scss +2 -1
  109. package/scss/progress-indicator/classes.scss +0 -4
  110. package/scss/progress-indicator/linear.scss +9 -27
  111. package/scss/progress-indicator/overlay.scss +4 -10
  112. package/scss/progress-indicator/radial.scss +10 -98
  113. package/scss/radio/classes.scss +7 -0
  114. package/scss/radio/index.scss +3 -0
  115. package/scss/{inputs → radio}/radio.scss +1 -1
  116. package/scss/radio-tile/radio-tile.scss +41 -83
  117. package/scss/select/classes.scss +27 -0
  118. package/scss/select/index.scss +3 -0
  119. package/scss/select/select.scss +124 -0
  120. package/scss/side-navigation/side-navigation.scss +26 -34
  121. package/scss/skip-to-content/skip-to-content.scss +2 -3
  122. package/scss/slider/slider.scss +12 -23
  123. package/scss/stepper/classes.scss +32 -0
  124. package/scss/stepper/index.scss +3 -0
  125. package/scss/stepper/stepper.scss +151 -0
  126. package/scss/style/{variables.scss → global-variables.scss} +4 -2
  127. package/scss/style/global.scss +9 -10
  128. package/scss/{icon/variables.scss → style/icon-sizes.scss} +1 -1
  129. package/scss/style/index.scss +6 -6
  130. package/scss/style/theme.scss +0 -39
  131. package/scss/style/typography.scss +5 -4
  132. package/scss/surface/surface.scss +0 -1
  133. package/scss/table/classes.scss +24 -23
  134. package/scss/table/column-filter.scss +2 -5
  135. package/scss/table/index.scss +1 -2
  136. package/scss/table/paginator.scss +22 -30
  137. package/scss/table/sizes.scss +31 -0
  138. package/scss/table/{variables.scss → table-densities.scss} +2 -1
  139. package/scss/table/table.scss +156 -228
  140. package/scss/tabs/borderless.scss +9 -22
  141. package/scss/tabs/classes.scss +4 -0
  142. package/scss/tabs/default.scss +11 -25
  143. package/scss/tabs/pill.scss +5 -15
  144. package/scss/tabs/tabs.scss +30 -57
  145. package/scss/tag/classes.scss +1 -0
  146. package/scss/tag/tag.scss +11 -21
  147. package/scss/text/mixins.scss +1 -0
  148. package/scss/text/muted.scss +2 -4
  149. package/scss/text/skeleton.scss +8 -11
  150. package/scss/textarea/classes.scss +7 -0
  151. package/scss/textarea/index.scss +3 -0
  152. package/scss/{inputs → textarea}/textarea.scss +2 -1
  153. package/scss/tile/classes.scss +14 -2
  154. package/scss/tile/tile.scss +99 -80
  155. package/scss/time-picker/time-picker.scss +8 -17
  156. package/scss/{toast-notification → toast}/categories.scss +3 -7
  157. package/scss/{toast-notification → toast}/classes.scss +0 -0
  158. package/scss/{toast-notification → toast}/index.scss +0 -0
  159. package/scss/{toast-notification → toast}/toast.scss +7 -16
  160. package/scss/toggle-switch/toggle-switch.scss +11 -30
  161. package/scss/tooltip/tooltip.scss +4 -5
  162. package/scss/tree/tree.scss +10 -22
  163. package/scss/utils/classes.scss +6 -0
  164. package/scss/utils/index.scss +6 -0
  165. package/scss/{inputs → utils/input-container}/classes.scss +0 -28
  166. package/scss/utils/input-container/index.scss +3 -0
  167. package/scss/{inputs/labeled-inputs.scss → utils/input-container/input-container.scss} +16 -113
  168. package/scss/{style → utils}/mixins.scss +26 -43
  169. package/scss/{notification-marker → utils/notification-marker}/classes.scss +0 -0
  170. package/scss/{notification-marker → utils/notification-marker}/index.scss +0 -0
  171. package/scss/{notification-marker → utils/notification-marker}/notification-marker.scss +11 -19
  172. package/scss/{popover → utils/popover}/classes.scss +0 -0
  173. package/scss/{popover → utils/popover}/index.scss +0 -0
  174. package/scss/{popover → utils/popover}/popover.scss +0 -1
  175. package/scss/workflow-diagram/classes.scss +15 -0
  176. package/scss/workflow-diagram/index.scss +3 -0
  177. package/scss/workflow-diagram/workflow-diagram.scss +64 -0
  178. package/src/index.scss +11 -6
  179. package/css/inputs.css +0 -1143
  180. package/css/notification-marker.css +0 -293
  181. package/css/popover.css +0 -14
  182. package/css/reset-global-styles.css +0 -50
  183. package/css/wizard.css +0 -190
  184. package/scss/button/button-icon.scss +0 -12
  185. package/scss/button/cta.scss +0 -31
  186. package/scss/button/disabled.scss +0 -13
  187. package/scss/button/high-visibility.scss +0 -31
  188. package/scss/button/split-menu.scss +0 -66
  189. package/scss/inputs/checkbox-radio.scss +0 -73
  190. package/scss/inputs/index.scss +0 -10
  191. package/scss/inputs/select.scss +0 -66
  192. package/scss/reset-global-styles.scss +0 -33
  193. package/scss/style/anchor.scss +0 -82
  194. package/scss/style/ripple.scss +0 -18
  195. package/scss/table/condensed.scss +0 -15
  196. package/scss/table/extra-condensed.scss +0 -19
  197. package/scss/user-icon/classes.scss +0 -27
  198. package/scss/wizard/classes.scss +0 -27
  199. package/scss/wizard/index.scss +0 -5
  200. package/scss/wizard/long.scss +0 -19
  201. package/scss/wizard/wizard.scss +0 -160
  202. package/scss/wizard/workflow.scss +0 -43
package/css/inputs.css DELETED
@@ -1,1143 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- .iui-input-container{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- display:-ms-grid;
11
- display:grid;
12
- -ms-grid-rows: auto auto;
13
- -ms-grid-columns: auto 1fr;
14
- grid-template:"label label" "inputs inputs"/auto 1fr;
15
- cursor:default;
16
- }
17
- .iui-input-container.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon{
18
- -ms-grid-row:2;
19
- -ms-grid-column:2;
20
- }
21
- .iui-input-container.iui-inline-icon > .iui-input,
22
- .iui-input-container.iui-inline-icon > .iui-textarea{
23
- padding-right:40px;
24
- }
25
- .iui-input-container.iui-inline-icon > .iui-input:last-child,
26
- .iui-input-container.iui-inline-icon > .iui-textarea:last-child{
27
- padding-right:12px;
28
- }
29
- .iui-input-container.iui-with-message{
30
- -ms-grid-rows: auto auto auto;
31
- -ms-grid-columns: auto 1fr;
32
- grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
33
- }
34
- .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
35
- margin-top:3px;
36
- }
37
- .iui-input-container .iui-input,
38
- .iui-input-container .iui-input-with-icon,
39
- .iui-input-container .iui-textarea,
40
- .iui-input-container .iui-input-group{
41
- -ms-grid-row:2;
42
- -ms-grid-column:1;
43
- -ms-grid-column-span:2;
44
- grid-area:inputs;
45
- -ms-grid-row:2;
46
- -ms-grid-column:1;
47
- -ms-grid-column-span:2;
48
- }
49
- .iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
50
- padding:6px 0;
51
- }
52
- label.iui-input-container{
53
- cursor:pointer;
54
- }
55
- label.iui-input-container.iui-disabled{
56
- cursor:not-allowed;
57
- }
58
-
59
- .iui-input-container.iui-disabled label{
60
- cursor:not-allowed;
61
- }
62
- .iui-input-container .iui-checkbox-wrapper,
63
- .iui-input-container .iui-radio-wrapper{
64
- min-height:22px;
65
- }
66
- .iui-input-container.iui-inline-label{
67
- -ms-grid-rows: auto;
68
- -ms-grid-columns: auto 1fr auto;
69
- grid-template:"label inputs icon"/auto 1fr auto;
70
- }
71
- div.iui-input-container.iui-inline-label{
72
- -ms-grid-columns:auto min-content auto;
73
- }
74
-
75
- .iui-input-container.iui-inline-label .iui-input,
76
- .iui-input-container.iui-inline-label .iui-input-with-icon,
77
- .iui-input-container.iui-inline-label .iui-textarea,
78
- .iui-input-container.iui-inline-label .iui-input-group{
79
- -ms-grid-row:1;
80
- -ms-grid-column:2;
81
- }
82
- .iui-input-container.iui-inline-label .iui-input-icon{
83
- -ms-grid-row:1;
84
- -ms-grid-column:3;
85
- }
86
- .iui-input-container.iui-inline-label.iui-with-message{
87
- -ms-grid-rows: auto auto;
88
- -ms-grid-columns: auto auto 1fr;
89
- grid-template:"label inputs inputs" ". icon message"/auto auto 1fr;
90
- }
91
- .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
92
- -ms-grid-row:2;
93
- -ms-grid-column:2;
94
- }
95
- .iui-input-container.iui-inline-label.iui-with-message .iui-message{
96
- -ms-grid-row:2;
97
- -ms-grid-column:3;
98
- }
99
- .iui-input-container.iui-inline-label > .iui-input-group{
100
- display:flex;
101
- gap:16px;
102
- }
103
- .iui-input-container.iui-inline-label > .iui-input-group > .iui-checkbox-wrapper,
104
- .iui-input-container.iui-inline-label > .iui-input-group > .iui-radio-wrapper,
105
- .iui-input-container.iui-inline-label > .iui-input-group > .iui-toggle-switch-wrapper{
106
- margin-right:16px;
107
- }
108
- @supports (gap: 16px){
109
- .iui-input-container.iui-inline-label > .iui-input-group > .iui-checkbox-wrapper,
110
- .iui-input-container.iui-inline-label > .iui-input-group > .iui-radio-wrapper,
111
- .iui-input-container.iui-inline-label > .iui-input-group > .iui-toggle-switch-wrapper{
112
- margin-right:0;
113
- }
114
- }
115
- .iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
116
- margin-right:16px;
117
- }
118
- .iui-input-container > .iui-label{
119
- -ms-grid-row:1;
120
- -ms-grid-column:1;
121
- -ms-grid-column-span:2;
122
- font-weight:600;
123
- margin-bottom:3px;
124
- grid-area:label;
125
- -ms-grid-row-align:center;
126
- align-self:center;
127
- }
128
- .iui-input-container > .iui-label.iui-required::after{
129
- content:"*";
130
- margin-left:4px;
131
- color:#d10a0a;
132
- color:var(--iui-color-foreground-negative);
133
- }
134
- .iui-input-container .iui-input-icon{
135
- -ms-grid-row:3;
136
- -ms-grid-column:1;
137
- display:flex;
138
- grid-area:icon;
139
- width:16px;
140
- height:16px;
141
- -ms-grid-row-align:center;
142
- align-self:center;
143
- fill:rgba(0, 0, 0, 0.4);
144
- fill:var(--iui-icons-color);
145
- }
146
- .iui-input-container .iui-input-icon:not(:last-child){
147
- margin-right:4px;
148
- }
149
- .iui-input-container .iui-message{
150
- -ms-grid-row:3;
151
- -ms-grid-column:2;
152
- font-size:12px;
153
- grid-area:message;
154
- margin-top:3px;
155
- color:rgba(0, 0, 0, 0.4);
156
- color:var(--iui-text-color-muted);
157
- }
158
- .iui-input-container .iui-message a{
159
- -webkit-user-select:none;
160
- -moz-user-select:none;
161
- -ms-user-select:none;
162
- user-select:none;
163
- }
164
- .iui-input-container.iui-inline-icon > .iui-input-icon{
165
- -ms-grid-row:1;
166
- -ms-grid-column:3;
167
- grid-area:inputs;
168
- -ms-grid-column-align:end;
169
- justify-self:end;
170
- margin:0 14px 0 0;
171
- position:relative;
172
- }
173
- .iui-input-container.iui-inline-icon > .iui-input-icon svg{
174
- width:16px;
175
- height:16px;
176
- }
177
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
178
- height:100%;
179
- width:-webkit-fit-content;
180
- width:-moz-fit-content;
181
- width:fit-content;
182
- margin-right:0;
183
- border-top-left-radius:0;
184
- border-bottom-left-radius:0;
185
- border-top-right-radius:inherit;
186
- border-bottom-right-radius:inherit;
187
- }
188
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
189
- align-items:center;
190
- height:90%;
191
- margin-right:2px;
192
- padding:0 12px;
193
- cursor:pointer;
194
- background-position:center;
195
- transition:background 0.4s ease-out;
196
- }
197
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
198
- background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
199
- }
200
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
201
- background-color:var(--iui-color-background-2);
202
- background-size:100%;
203
- transition:background 0s;
204
- }
205
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
206
- fill:rgba(0, 0, 0, 0.8);
207
- fill:var(--iui-icons-color-actionable);
208
- transition:transform 0.2s ease-out;
209
- }
210
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
211
- transform:rotate(180deg);
212
- }
213
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
214
- cursor:not-allowed;
215
- }
216
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
217
- fill:rgba(0, 0, 0, 0.2);
218
- fill:var(--iui-icons-color-actionable-disabled);
219
- }
220
- .iui-input-container.iui-inline-label > .iui-label{
221
- margin:0 16px 0 0;
222
- -ms-grid-column-span:1;
223
- }
224
- .iui-input-container.iui-inline-label > .iui-label.iui-required{
225
- margin-right:6px;
226
- }
227
- .iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
228
- background-color:rgba(83, 162, 26, 0.2);
229
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
230
- }
231
- .iui-input-container.iui-positive::selection,
232
- .iui-input-container.iui-positive *::selection{
233
- background-color:rgba(83, 162, 26, 0.2);
234
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
235
- }
236
- .iui-input-container.iui-positive .iui-input-icon{
237
- fill:#53a21a;
238
- fill:var(--iui-color-foreground-positive);
239
- }
240
- .iui-input-container.iui-positive .iui-message{
241
- color:#53a21a;
242
- color:var(--iui-color-foreground-positive);
243
- }
244
- .iui-input-container.iui-positive .iui-message a{
245
- text-decoration:underline;
246
- color:#53a21a;
247
- color:var(--iui-color-foreground-positive);
248
- }
249
- .iui-input-container.iui-positive .iui-message a:hover{
250
- text-decoration:none;
251
- color:#3d7613;
252
- color:var(--iui-color-foreground-positive-overlay);
253
- }
254
- .iui-input-container.iui-positive .iui-input,
255
- .iui-input-container.iui-positive .iui-textarea{
256
- padding-bottom:6px;
257
- border-bottom:2px solid #53a21a;
258
- border-bottom:2px solid var(--iui-color-foreground-positive);
259
- }
260
- .iui-input-container.iui-positive .iui-input.iui-small,
261
- .iui-input-container.iui-positive .iui-textarea.iui-small{
262
- padding-bottom:0.5px;
263
- }
264
- .iui-input-container.iui-positive .iui-input.iui-large,
265
- .iui-input-container.iui-positive .iui-textarea.iui-large{
266
- padding-bottom:11.5px;
267
- }
268
- .iui-input-container.iui-positive .iui-input:focus,
269
- .iui-input-container.iui-positive .iui-textarea:focus{
270
- border-bottom:2px solid #53a21a;
271
- outline:2px solid #53a21a;
272
- outline-offset:-2px;
273
- border-bottom:2px solid var(--iui-color-foreground-positive);
274
- outline:2px solid var(--iui-color-foreground-positive);
275
- outline-offset:-2px;
276
- }
277
- .iui-input-container.iui-positive .iui-input-with-icon{
278
- --_hover-color:var(--iui-color-foreground-positive);
279
- --_focus-color:var(--iui-color-foreground-positive);
280
- }
281
- .iui-input-container.iui-positive .iui-select-button{
282
- border-bottom:transparent;
283
- }
284
- .iui-input-container.iui-positive .iui-select-button::after{
285
- content:"";
286
- width:100%;
287
- position:absolute;
288
- bottom:0;
289
- left:0;
290
- height:2px;
291
- background-color:#53a21a;
292
- background-color:var(--iui-color-foreground-positive);
293
- }
294
- .iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
295
- background-color:rgba(209, 10, 10, 0.2);
296
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
297
- }
298
- .iui-input-container.iui-negative::selection,
299
- .iui-input-container.iui-negative *::selection{
300
- background-color:rgba(209, 10, 10, 0.2);
301
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
302
- }
303
- .iui-input-container.iui-negative .iui-input-icon{
304
- fill:#d10a0a;
305
- fill:var(--iui-color-foreground-negative);
306
- }
307
- .iui-input-container.iui-negative .iui-message{
308
- color:#d10a0a;
309
- color:var(--iui-color-foreground-negative);
310
- }
311
- .iui-input-container.iui-negative .iui-message a{
312
- text-decoration:underline;
313
- color:#d10a0a;
314
- color:var(--iui-color-foreground-negative);
315
- }
316
- .iui-input-container.iui-negative .iui-message a:hover{
317
- text-decoration:none;
318
- color:#a10808;
319
- color:var(--iui-color-foreground-negative-overlay);
320
- }
321
- .iui-input-container.iui-negative .iui-input,
322
- .iui-input-container.iui-negative .iui-textarea{
323
- padding-bottom:6px;
324
- border-bottom:2px solid #d10a0a;
325
- border-bottom:2px solid var(--iui-color-foreground-negative);
326
- }
327
- .iui-input-container.iui-negative .iui-input.iui-small,
328
- .iui-input-container.iui-negative .iui-textarea.iui-small{
329
- padding-bottom:0.5px;
330
- }
331
- .iui-input-container.iui-negative .iui-input.iui-large,
332
- .iui-input-container.iui-negative .iui-textarea.iui-large{
333
- padding-bottom:11.5px;
334
- }
335
- .iui-input-container.iui-negative .iui-input:focus,
336
- .iui-input-container.iui-negative .iui-textarea:focus{
337
- border-bottom:2px solid #d10a0a;
338
- outline:2px solid #d10a0a;
339
- outline-offset:-2px;
340
- border-bottom:2px solid var(--iui-color-foreground-negative);
341
- outline:2px solid var(--iui-color-foreground-negative);
342
- outline-offset:-2px;
343
- }
344
- .iui-input-container.iui-negative .iui-input-with-icon{
345
- --_hover-color:var(--iui-color-foreground-negative);
346
- --_focus-color:var(--iui-color-foreground-negative);
347
- }
348
- .iui-input-container.iui-negative .iui-select-button{
349
- border-bottom:transparent;
350
- }
351
- .iui-input-container.iui-negative .iui-select-button::after{
352
- content:"";
353
- width:100%;
354
- position:absolute;
355
- bottom:0;
356
- left:0;
357
- height:2px;
358
- background-color:#d10a0a;
359
- background-color:var(--iui-color-foreground-negative);
360
- }
361
- .iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
362
- background-color:rgba(241, 141, 19, 0.2);
363
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
364
- }
365
- .iui-input-container.iui-warning::selection,
366
- .iui-input-container.iui-warning *::selection{
367
- background-color:rgba(241, 141, 19, 0.2);
368
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
369
- }
370
- .iui-input-container.iui-warning .iui-input-icon{
371
- fill:#f18d13;
372
- fill:var(--iui-color-foreground-warning);
373
- }
374
- .iui-input-container.iui-warning .iui-message{
375
- color:#f18d13;
376
- color:var(--iui-color-foreground-warning);
377
- }
378
- .iui-input-container.iui-warning .iui-message a{
379
- text-decoration:underline;
380
- color:#f18d13;
381
- color:var(--iui-color-foreground-warning);
382
- }
383
- .iui-input-container.iui-warning .iui-message a:hover{
384
- text-decoration:none;
385
- color:#c6720c;
386
- color:var(--iui-color-foreground-warning-overlay);
387
- }
388
- .iui-input-container.iui-warning .iui-input,
389
- .iui-input-container.iui-warning .iui-textarea{
390
- padding-bottom:6px;
391
- border-bottom:2px solid #f18d13;
392
- border-bottom:2px solid var(--iui-color-foreground-warning);
393
- }
394
- .iui-input-container.iui-warning .iui-input.iui-small,
395
- .iui-input-container.iui-warning .iui-textarea.iui-small{
396
- padding-bottom:0.5px;
397
- }
398
- .iui-input-container.iui-warning .iui-input.iui-large,
399
- .iui-input-container.iui-warning .iui-textarea.iui-large{
400
- padding-bottom:11.5px;
401
- }
402
- .iui-input-container.iui-warning .iui-input:focus,
403
- .iui-input-container.iui-warning .iui-textarea:focus{
404
- border-bottom:2px solid #f18d13;
405
- outline:2px solid #f18d13;
406
- outline-offset:-2px;
407
- border-bottom:2px solid var(--iui-color-foreground-warning);
408
- outline:2px solid var(--iui-color-foreground-warning);
409
- outline-offset:-2px;
410
- }
411
- .iui-input-container.iui-warning .iui-input-with-icon{
412
- --_hover-color:var(--iui-color-foreground-warning);
413
- --_focus-color:var(--iui-color-foreground-warning);
414
- }
415
- .iui-input-container.iui-warning .iui-select-button{
416
- border-bottom:transparent;
417
- }
418
- .iui-input-container.iui-warning .iui-select-button::after{
419
- content:"";
420
- width:100%;
421
- position:absolute;
422
- bottom:0;
423
- left:0;
424
- height:2px;
425
- background-color:#f18d13;
426
- background-color:var(--iui-color-foreground-warning);
427
- }
428
-
429
- .iui-input-label{
430
- font-weight:600;
431
- margin-bottom:3px;
432
- cursor:default;
433
- display:block;
434
- }
435
- .iui-input-label.iui-required::after{
436
- content:"*";
437
- margin-left:4px;
438
- color:#d10a0a;
439
- color:var(--iui-color-foreground-negative);
440
- }
441
- label.iui-input-label{
442
- cursor:pointer;
443
- }
444
- label.iui-input-label.iui-disabled{
445
- cursor:not-allowed;
446
- }
447
-
448
- .iui-input-label.iui-inline{
449
- margin:0 16px 0 0;
450
- -ms-grid-column-span:1;
451
- display:inline-flex;
452
- align-items:center;
453
- }
454
- .iui-input-label.iui-inline.iui-required{
455
- margin-right:6px;
456
- }
457
-
458
- .iui-input{
459
- margin:0;
460
- padding:0;
461
- border:none;
462
- vertical-align:baseline;
463
- width:100%;
464
- font-family:inherit;
465
- font-size:14px;
466
- font-weight:400;
467
- line-height:22px;
468
- border-radius:3px;
469
- -webkit-appearance:none;
470
- -moz-appearance:none;
471
- appearance:none;
472
- box-sizing:border-box;
473
- padding:7px 12px;
474
- min-height:38px;
475
- color:rgba(0, 0, 0, 0.8);
476
- background-color:white;
477
- border:1px solid rgba(0, 0, 0, 0.4);
478
- color:var(--iui-text-color);
479
- background-color:var(--iui-color-background-1);
480
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
481
- }
482
- .iui-input:focus-visible{
483
- outline:2px solid var(--iui-color-foreground-primary);
484
- outline-offset:-2px;
485
- }
486
- @supports not selector(*:focus-visible){
487
- .iui-input:focus{
488
- outline:2px solid var(--iui-color-foreground-primary);
489
- outline-offset:-2px;
490
- }
491
- }
492
- @media (prefers-reduced-motion: no-preference){
493
- .iui-input{
494
- transition:border-color 0.2s ease-out;
495
- }
496
- }
497
- .iui-input.iui-small{
498
- padding-top:1.5px;
499
- padding-bottom:1.5px;
500
- min-height:27px;
501
- }
502
- .iui-input.iui-large{
503
- padding-top:12.5px;
504
- padding-bottom:12.5px;
505
- min-height:49px;
506
- font-size:16px;
507
- }
508
- .iui-input::-moz-placeholder{
509
- -moz-user-select:none;
510
- user-select:none;
511
- color:rgba(0, 0, 0, 0.2);
512
- color:var(--iui-text-color-placeholder);
513
- }
514
- .iui-input:-ms-input-placeholder{
515
- -ms-user-select:none;
516
- user-select:none;
517
- color:rgba(0, 0, 0, 0.2);
518
- color:var(--iui-text-color-placeholder);
519
- }
520
- .iui-input::placeholder{
521
- -webkit-user-select:none;
522
- -moz-user-select:none;
523
- -ms-user-select:none;
524
- user-select:none;
525
- color:rgba(0, 0, 0, 0.2);
526
- color:var(--iui-text-color-placeholder);
527
- }
528
- .iui-input:-webkit-autofill{
529
- border-color:#008ae0;
530
- color:#008ae0;
531
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
532
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
533
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
534
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
535
- }
536
- .iui-input:autofill{
537
- border-color:#008ae0;
538
- color:#008ae0;
539
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
540
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
541
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
542
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
543
- }
544
- .iui-input:hover{
545
- border-color:rgba(0, 0, 0, 0.8);
546
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
547
- }
548
- @media (prefers-reduced-motion: no-preference){
549
- .iui-input:hover{
550
- transition:border-color 0.2s ease-out;
551
- }
552
- }
553
- .iui-input[disabled]{
554
- background-color:#edeff2;
555
- border-color:#edeff2;
556
- background-color:var(--iui-color-background-disabled);
557
- border-color:var(--iui-color-background-disabled);
558
- cursor:not-allowed;
559
- --_hover-color:var(--iui-color-background-disabled);
560
- }
561
-
562
- .iui-select-button{
563
- width:100%;
564
- margin:0;
565
- border-radius:3px;
566
- box-sizing:border-box;
567
- padding:7px 12px;
568
- min-height:38px;
569
- transition:border-color 0.2s ease-out;
570
- display:flex;
571
- align-items:center;
572
- -webkit-user-select:none;
573
- -moz-user-select:none;
574
- -ms-user-select:none;
575
- user-select:none;
576
- position:relative;
577
- overflow:hidden;
578
- color:rgba(0, 0, 0, 0.8);
579
- background-color:white;
580
- border:1px solid rgba(0, 0, 0, 0.4);
581
- color:var(--iui-text-color);
582
- background-color:var(--iui-color-background-1);
583
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
584
- }
585
- .iui-select-button:focus-visible{
586
- outline:2px solid var(--iui-color-foreground-primary);
587
- outline-offset:-2px;
588
- }
589
- @supports not selector(*:focus-visible){
590
- .iui-select-button:focus{
591
- outline:2px solid var(--iui-color-foreground-primary);
592
- outline-offset:-2px;
593
- }
594
- }
595
- .iui-select-button.iui-small{
596
- padding-top:1.5px;
597
- padding-bottom:1.5px;
598
- min-height:27px;
599
- }
600
- .iui-select-button.iui-large{
601
- padding-top:12.5px;
602
- padding-bottom:12.5px;
603
- min-height:49px;
604
- font-size:16px;
605
- }
606
- .iui-select-button.iui-disabled{
607
- background-color:#edeff2;
608
- border-color:#edeff2;
609
- background-color:var(--iui-color-background-disabled);
610
- border-color:var(--iui-color-background-disabled);
611
- --_hover-color:var(--iui-color-background-disabled);
612
- cursor:not-allowed;
613
- }
614
- .iui-select-button .iui-icon{
615
- width:16px;
616
- height:16px;
617
- flex:0 0 auto;
618
- fill:rgba(0, 0, 0, 0.8);
619
- fill:var(--iui-icons-color-actionable);
620
- fill:currentColor;
621
- }
622
- .iui-select-button .iui-icon + .iui-content{
623
- margin-left:8px;
624
- }
625
- .iui-select-button .iui-content{
626
- overflow:hidden;
627
- white-space:nowrap;
628
- text-overflow:ellipsis;
629
- }
630
- .iui-select-button.iui-placeholder{
631
- color:rgba(0, 0, 0, 0.2);
632
- color:var(--iui-text-color-placeholder);
633
- }
634
-
635
- .iui-textarea{
636
- margin:0;
637
- padding:0;
638
- border:none;
639
- vertical-align:baseline;
640
- width:100%;
641
- font-family:inherit;
642
- font-size:14px;
643
- font-weight:400;
644
- line-height:22px;
645
- border-radius:3px;
646
- -webkit-appearance:none;
647
- -moz-appearance:none;
648
- appearance:none;
649
- box-sizing:border-box;
650
- padding:7px 12px;
651
- min-height:38px;
652
- color:rgba(0, 0, 0, 0.8);
653
- background-color:white;
654
- border:1px solid rgba(0, 0, 0, 0.4);
655
- color:var(--iui-text-color);
656
- background-color:var(--iui-color-background-1);
657
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
658
- resize:vertical;
659
- min-height:38px;
660
- }
661
- .iui-textarea:focus-visible{
662
- outline:2px solid var(--iui-color-foreground-primary);
663
- outline-offset:-2px;
664
- }
665
- @supports not selector(*:focus-visible){
666
- .iui-textarea:focus{
667
- outline:2px solid var(--iui-color-foreground-primary);
668
- outline-offset:-2px;
669
- }
670
- }
671
- @media (prefers-reduced-motion: no-preference){
672
- .iui-textarea{
673
- transition:border-color 0.2s ease-out;
674
- }
675
- }
676
- .iui-textarea.iui-small{
677
- padding-top:1.5px;
678
- padding-bottom:1.5px;
679
- min-height:27px;
680
- }
681
- .iui-textarea.iui-large{
682
- padding-top:12.5px;
683
- padding-bottom:12.5px;
684
- min-height:49px;
685
- font-size:16px;
686
- }
687
- .iui-textarea::-moz-placeholder{
688
- -moz-user-select:none;
689
- user-select:none;
690
- color:rgba(0, 0, 0, 0.2);
691
- color:var(--iui-text-color-placeholder);
692
- }
693
- .iui-textarea:-ms-input-placeholder{
694
- -ms-user-select:none;
695
- user-select:none;
696
- color:rgba(0, 0, 0, 0.2);
697
- color:var(--iui-text-color-placeholder);
698
- }
699
- .iui-textarea::placeholder{
700
- -webkit-user-select:none;
701
- -moz-user-select:none;
702
- -ms-user-select:none;
703
- user-select:none;
704
- color:rgba(0, 0, 0, 0.2);
705
- color:var(--iui-text-color-placeholder);
706
- }
707
- .iui-textarea:-webkit-autofill{
708
- border-color:#008ae0;
709
- color:#008ae0;
710
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
711
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
712
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
713
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
714
- }
715
- .iui-textarea:autofill{
716
- border-color:#008ae0;
717
- color:#008ae0;
718
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
719
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
720
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
721
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
722
- }
723
- .iui-textarea:hover{
724
- border-color:rgba(0, 0, 0, 0.8);
725
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
726
- }
727
- @media (prefers-reduced-motion: no-preference){
728
- .iui-textarea:hover{
729
- transition:border-color 0.2s ease-out;
730
- }
731
- }
732
- .iui-textarea[disabled]{
733
- background-color:#edeff2;
734
- border-color:#edeff2;
735
- background-color:var(--iui-color-background-disabled);
736
- border-color:var(--iui-color-background-disabled);
737
- cursor:not-allowed;
738
- --_hover-color:var(--iui-color-background-disabled);
739
- }
740
- .iui-textarea[disabled], .iui-textarea[readonly]{
741
- resize:none;
742
- }
743
-
744
- .iui-input-with-icon{
745
- display:-ms-grid;
746
- display:grid;
747
- align-items:center;
748
- cursor:pointer;
749
- }
750
- .iui-input-with-icon > :first-child{
751
- -ms-grid-row:1;
752
- grid-area:1/-1;
753
- padding-right:40px;
754
- }
755
- .iui-input-with-icon:focus-within > :first-child{
756
- outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
757
- outline-offset:-2px;
758
- }
759
- .iui-input-with-icon:hover > :first-child{
760
- border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
761
- }
762
-
763
- .iui-end-icon{
764
- -ms-grid-row:1;
765
- -ms-grid-column:3;
766
- grid-area:inputs;
767
- -ms-grid-column-align:end;
768
- justify-self:end;
769
- margin:0 14px 0 0;
770
- position:relative;
771
- display:flex;
772
- grid-area:1/-1;
773
- }
774
- .iui-end-icon svg{
775
- width:16px;
776
- height:16px;
777
- }
778
- .iui-end-icon.iui-button{
779
- height:100%;
780
- width:-webkit-fit-content;
781
- width:-moz-fit-content;
782
- width:fit-content;
783
- margin-right:0;
784
- border-top-left-radius:0;
785
- border-bottom-left-radius:0;
786
- border-top-right-radius:inherit;
787
- border-bottom-right-radius:inherit;
788
- }
789
- .iui-end-icon.iui-actionable{
790
- align-items:center;
791
- height:90%;
792
- margin-right:2px;
793
- padding:0 12px;
794
- cursor:pointer;
795
- background-position:center;
796
- transition:background 0.4s ease-out;
797
- }
798
- .iui-end-icon.iui-actionable:hover{
799
- background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
800
- }
801
- .iui-end-icon.iui-actionable:active{
802
- background-color:var(--iui-color-background-2);
803
- background-size:100%;
804
- transition:background 0s;
805
- }
806
- .iui-end-icon.iui-actionable svg{
807
- fill:rgba(0, 0, 0, 0.8);
808
- fill:var(--iui-icons-color-actionable);
809
- transition:transform 0.2s ease-out;
810
- }
811
- .iui-end-icon.iui-actionable.iui-open svg{
812
- transform:rotate(180deg);
813
- }
814
- .iui-end-icon.iui-disabled{
815
- cursor:not-allowed;
816
- }
817
- .iui-end-icon.iui-disabled svg{
818
- fill:rgba(0, 0, 0, 0.2);
819
- fill:var(--iui-icons-color-actionable-disabled);
820
- }
821
-
822
- .iui-checkbox{
823
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
824
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
825
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
826
- --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
827
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
828
- --_iui-checkbox-background-color:var(--iui-color-background-1);
829
- --_iui-checkbox-mask-image:initial;
830
- -webkit-appearance:none;
831
- -moz-appearance:none;
832
- appearance:none;
833
- margin:0;
834
- width:16px;
835
- height:16px;
836
- position:relative;
837
- border-radius:3px;
838
- background-color:var(--_iui-checkbox-background-color);
839
- flex-shrink:0;
840
- cursor:pointer;
841
- }
842
- .iui-checkbox-wrapper{
843
- margin:0;
844
- padding:0;
845
- border:none;
846
- vertical-align:baseline;
847
- display:flex;
848
- align-items:center;
849
- font-size:14px;
850
- width:-webkit-fit-content;
851
- width:-moz-fit-content;
852
- width:fit-content;
853
- -webkit-user-select:none;
854
- -moz-user-select:none;
855
- -ms-user-select:none;
856
- user-select:none;
857
- position:relative;
858
- cursor:pointer;
859
- color:rgba(0, 0, 0, 0.8);
860
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
861
- gap:8px;
862
- }
863
- .iui-checkbox-wrapper > * + *{
864
- margin-left:8px;
865
- }
866
- @supports (gap: 8px){
867
- .iui-checkbox-wrapper > * + *{
868
- margin-left:0;
869
- }
870
- }
871
- .iui-checkbox-wrapper.iui-loading{
872
- cursor:wait;
873
- color:var(--iui-text-color-muted);
874
- }
875
- .iui-checkbox-wrapper > .iui-checkbox-label,
876
- .iui-checkbox-wrapper > .iui-radio-label{
877
- display:flex;
878
- align-items:center;
879
- }
880
- .iui-checkbox-wrapper > .iui-checkbox-label svg,
881
- .iui-checkbox-wrapper > .iui-radio-label svg{
882
- width:16px;
883
- height:16px;
884
- vertical-align:middle;
885
- fill:currentColor;
886
- }
887
- .iui-checkbox-wrapper.iui-disabled{
888
- cursor:not-allowed;
889
- color:var(--iui-text-color-muted);
890
- }
891
- .iui-checkbox-wrapper.iui-disabled svg{
892
- fill:var(--iui-icons-color-actionable-disabled);
893
- }
894
- .iui-checkbox-wrapper.iui-positive{
895
- color:#53a21a;
896
- color:var(--iui-color-foreground-positive);
897
- }
898
- .iui-checkbox-wrapper.iui-warning{
899
- color:#f18d13;
900
- color:var(--iui-color-foreground-warning);
901
- }
902
- .iui-checkbox-wrapper.iui-negative{
903
- color:#d10a0a;
904
- color:var(--iui-color-foreground-negative);
905
- }
906
- .iui-checkbox::before{
907
- content:"";
908
- position:absolute;
909
- inset:0;
910
- transition:border-color 0.2s ease-out;
911
- border-radius:inherit;
912
- border-style:solid;
913
- border-width:1px;
914
- border-color:var(--_iui-checkbox-border-color);
915
- }
916
- .iui-checkbox::after{
917
- content:"";
918
- position:absolute;
919
- inset:0;
920
- background-color:var(--_iui-checkbox-svg-color);
921
- -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
922
- mask:var(--_iui-checkbox-mask-image) no-repeat center;
923
- }
924
- .iui-checkbox:not(:checked){
925
- --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
926
- }
927
- .iui-checkbox:checked{
928
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
929
- --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
930
- }
931
- .iui-checkbox:indeterminate{
932
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
933
- --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
934
- }
935
- .iui-checkbox:hover{
936
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
937
- }
938
- .iui-checkbox:focus-visible{
939
- outline:2px solid var(--iui-color-foreground-primary);
940
- outline-offset:-1px;
941
- }
942
- @supports not selector(*:focus-visible){
943
- .iui-checkbox:focus{
944
- outline:2px solid var(--iui-color-foreground-primary);
945
- outline-offset:-1px;
946
- }
947
- }
948
- .iui-checkbox:disabled{
949
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
950
- --_iui-checkbox-border-color:var(--iui-color-background-border);
951
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
952
- cursor:not-allowed;
953
- }
954
- .iui-checkbox.iui-checkbox-visibility{
955
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
956
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
957
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
958
- --_iui-checkbox-border-color:transparent;
959
- --_iui-checkbox-background-color:transparent;
960
- }
961
- .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
962
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
963
- }
964
- .iui-checkbox.iui-checkbox-visibility:where(:hover){
965
- --_iui-checkbox-border-color:transparent;
966
- --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
967
- }
968
- .iui-checkbox.iui-checkbox-visibility:where(:disabled){
969
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
970
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
971
- }
972
- .iui-checkbox.iui-loading{
973
- --_iui-checkbox-border-color:transparent;
974
- --_iui-checkbox-background-color:transparent;
975
- opacity:0;
976
- position:absolute;
977
- cursor:wait;
978
- }
979
-
980
- .iui-radio{
981
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
982
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
983
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
984
- --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
985
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
986
- --_iui-checkbox-background-color:var(--iui-color-background-1);
987
- --_iui-checkbox-mask-image:initial;
988
- -webkit-appearance:none;
989
- -moz-appearance:none;
990
- appearance:none;
991
- margin:0;
992
- width:16px;
993
- height:16px;
994
- position:relative;
995
- border-radius:3px;
996
- background-color:var(--_iui-checkbox-background-color);
997
- flex-shrink:0;
998
- cursor:pointer;
999
- border-radius:50%;
1000
- }
1001
- .iui-radio-wrapper{
1002
- margin:0;
1003
- padding:0;
1004
- border:none;
1005
- vertical-align:baseline;
1006
- display:flex;
1007
- align-items:center;
1008
- font-size:14px;
1009
- width:-webkit-fit-content;
1010
- width:-moz-fit-content;
1011
- width:fit-content;
1012
- -webkit-user-select:none;
1013
- -moz-user-select:none;
1014
- -ms-user-select:none;
1015
- user-select:none;
1016
- position:relative;
1017
- cursor:pointer;
1018
- color:rgba(0, 0, 0, 0.8);
1019
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1020
- gap:8px;
1021
- }
1022
- .iui-radio-wrapper > * + *{
1023
- margin-left:8px;
1024
- }
1025
- @supports (gap: 8px){
1026
- .iui-radio-wrapper > * + *{
1027
- margin-left:0;
1028
- }
1029
- }
1030
- .iui-radio-wrapper.iui-loading{
1031
- cursor:wait;
1032
- color:var(--iui-text-color-muted);
1033
- }
1034
- .iui-radio-wrapper > .iui-checkbox-label,
1035
- .iui-radio-wrapper > .iui-radio-label{
1036
- display:flex;
1037
- align-items:center;
1038
- }
1039
- .iui-radio-wrapper > .iui-checkbox-label svg,
1040
- .iui-radio-wrapper > .iui-radio-label svg{
1041
- width:16px;
1042
- height:16px;
1043
- vertical-align:middle;
1044
- fill:currentColor;
1045
- }
1046
- .iui-radio-wrapper.iui-disabled{
1047
- cursor:not-allowed;
1048
- color:var(--iui-text-color-muted);
1049
- }
1050
- .iui-radio-wrapper.iui-disabled svg{
1051
- fill:var(--iui-icons-color-actionable-disabled);
1052
- }
1053
- .iui-radio-wrapper.iui-positive{
1054
- color:#53a21a;
1055
- color:var(--iui-color-foreground-positive);
1056
- }
1057
- .iui-radio-wrapper.iui-warning{
1058
- color:#f18d13;
1059
- color:var(--iui-color-foreground-warning);
1060
- }
1061
- .iui-radio-wrapper.iui-negative{
1062
- color:#d10a0a;
1063
- color:var(--iui-color-foreground-negative);
1064
- }
1065
- .iui-radio::before{
1066
- content:"";
1067
- position:absolute;
1068
- inset:0;
1069
- transition:border-color 0.2s ease-out;
1070
- border-radius:inherit;
1071
- border-style:solid;
1072
- border-width:1px;
1073
- border-color:var(--_iui-checkbox-border-color);
1074
- }
1075
- .iui-radio::after{
1076
- content:"";
1077
- position:absolute;
1078
- inset:0;
1079
- background-color:var(--_iui-checkbox-svg-color);
1080
- -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
1081
- mask:var(--_iui-checkbox-mask-image) no-repeat center;
1082
- }
1083
- .iui-radio:not(:checked){
1084
- --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
1085
- }
1086
- .iui-radio:checked{
1087
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1088
- --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
1089
- }
1090
- .iui-radio:indeterminate{
1091
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1092
- --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
1093
- }
1094
- .iui-radio:hover{
1095
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1096
- }
1097
- .iui-radio:focus-visible{
1098
- outline:2px solid var(--iui-color-foreground-primary);
1099
- outline-offset:-1px;
1100
- }
1101
- @supports not selector(*:focus-visible){
1102
- .iui-radio:focus{
1103
- outline:2px solid var(--iui-color-foreground-primary);
1104
- outline-offset:-1px;
1105
- }
1106
- }
1107
- .iui-radio:disabled{
1108
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1109
- --_iui-checkbox-border-color:var(--iui-color-background-border);
1110
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1111
- cursor:not-allowed;
1112
- }
1113
- .iui-radio.iui-checkbox-visibility{
1114
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
1115
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
1116
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
1117
- --_iui-checkbox-border-color:transparent;
1118
- --_iui-checkbox-background-color:transparent;
1119
- }
1120
- .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
1121
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
1122
- }
1123
- .iui-radio.iui-checkbox-visibility:where(:hover){
1124
- --_iui-checkbox-border-color:transparent;
1125
- --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
1126
- }
1127
- .iui-radio.iui-checkbox-visibility:where(:disabled){
1128
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1129
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1130
- }
1131
- .iui-radio.iui-loading{
1132
- --_iui-checkbox-border-color:transparent;
1133
- --_iui-checkbox-background-color:transparent;
1134
- opacity:0;
1135
- position:absolute;
1136
- cursor:wait;
1137
- }
1138
- .iui-radio:checked{
1139
- --_iui-checkbox-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>');
1140
- }
1141
- .iui-radio:not(:checked), .iui-radio:indeterminate{
1142
- --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
1143
- }