@itwin/itwinui-css 0.47.0 → 0.48.2

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 (12) hide show
  1. package/css/all.css +309 -299
  2. package/css/color-picker.css +20 -16
  3. package/css/inputs.css +287 -282
  4. package/css/tree.css +2 -1
  5. package/package.json +1 -1
  6. package/scss/color-picker/color-picker.scss +49 -49
  7. package/scss/inputs/checkbox-radio.scss +17 -136
  8. package/scss/inputs/checkbox.scss +77 -43
  9. package/scss/inputs/labeled-inputs.scss +2 -2
  10. package/scss/inputs/radio.scss +14 -3
  11. package/scss/skip-to-content/skip-to-content.scss +2 -1
  12. package/scss/tree/tree.scss +1 -0
package/css/all.css CHANGED
@@ -1267,30 +1267,40 @@ html.iui-theme-dark{
1267
1267
  width:24px;
1268
1268
  cursor:pointer;
1269
1269
  border-radius:5px;
1270
- background-color:var(--iui-color-swatch-background);
1271
1270
  margin-bottom:4px;
1272
1271
  margin-right:4px;
1273
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1274
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1272
+ position:relative;
1273
+ background-color:var(--iui-color-swatch-background);
1274
+ background-position:0 0, 8px 8px;
1275
+ background-size:16px 16px;
1276
+ background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
1277
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
1275
1278
  @supports (gap: 8px){
1276
1279
  .iui-color-swatch{
1277
1280
  margin-bottom:0;
1278
1281
  margin-right:0; } }
1282
+ .iui-color-swatch::after{
1283
+ content:'';
1284
+ position:absolute;
1285
+ left:0;
1286
+ top:0;
1287
+ width:inherit;
1288
+ height:inherit;
1289
+ border-radius:inherit;
1290
+ background-color:inherit;
1291
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1279
1292
  .iui-color-swatch:hover{
1280
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1281
1293
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1282
1294
  .iui-color-swatch:focus-visible{
1283
1295
  outline:2px solid var(--iui-color-foreground-primary);
1284
- outline-offset:0; }
1296
+ outline-offset:1px; }
1285
1297
  @supports not selector(*:focus-visible){
1286
1298
  .iui-color-swatch:focus{
1287
1299
  outline:2px solid var(--iui-color-foreground-primary);
1288
- outline-offset:0; } }
1300
+ outline-offset:1px; } }
1289
1301
  .iui-color-swatch.iui-active{
1290
- box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1291
1302
  box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1292
1303
  .iui-color-swatch.iui-active:hover{
1293
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
1294
1304
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
1295
1305
 
1296
1306
  .iui-color-picker-section-label{
@@ -1311,7 +1321,6 @@ html.iui-theme-dark{
1311
1321
  cursor:crosshair;
1312
1322
  width:100%;
1313
1323
  height:209px;
1314
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
1315
1324
  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
1316
1325
  .iui-color-field:not(:last-child){
1317
1326
  margin-bottom:6px; }
@@ -1326,12 +1335,10 @@ html.iui-theme-dark{
1326
1335
 
1327
1336
  .iui-opacity-slider .iui-slider-rail{
1328
1337
  height:8px;
1329
- background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
1330
1338
  background-position:0 0, 4px 4px;
1331
1339
  background-size:8px 8px;
1332
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
1333
- background-position:0 0, 4px 4px;
1334
- background-size:8px 8px; }
1340
+ background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
1341
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
1335
1342
  .iui-opacity-slider .iui-slider-rail::before{
1336
1343
  display:block;
1337
1344
  content:'';
@@ -1351,12 +1358,9 @@ html.iui-theme-dark{
1351
1358
  border-radius:50%;
1352
1359
  transform:translate(-8px, -8px);
1353
1360
  cursor:crosshair;
1354
- box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
1355
- background-color:var(--iui-color-picker-selected-color);
1356
1361
  box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
1357
1362
  background-color:var(--iui-color-picker-selected-color); }
1358
1363
  .iui-color-dot:hover{
1359
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1360
1364
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1361
1365
  .iui-color-dot:focus-visible{
1362
1366
  outline:2px solid var(--iui-color-foreground-primary);
@@ -2534,8 +2538,8 @@ html.iui-theme-dark{
2534
2538
  cursor:not-allowed; }
2535
2539
  .iui-input-container.iui-disabled label{
2536
2540
  cursor:not-allowed; }
2537
- .iui-input-container .iui-checkbox,
2538
- .iui-input-container .iui-radio{
2541
+ .iui-input-container .iui-checkbox-wrapper,
2542
+ .iui-input-container .iui-radio-wrapper{
2539
2543
  min-height:22px; }
2540
2544
  .iui-input-container.iui-inline-label{
2541
2545
  -ms-grid-rows: auto;
@@ -3154,308 +3158,313 @@ html.iui-theme-dark{
3154
3158
  fill:var(--iui-icons-color-actionable-disabled); }
3155
3159
 
3156
3160
  .iui-checkbox{
3161
+ --_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>');
3162
+ --_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>');
3163
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
3164
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
3165
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3166
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
3167
+ --_iui-checkbox-mask-image:initial;
3168
+ -webkit-appearance:none;
3169
+ -moz-appearance:none;
3170
+ appearance:none;
3157
3171
  margin:0;
3158
- padding:0;
3159
- border:none;
3160
- vertical-align:baseline;
3161
- display:flex;
3162
- align-items:center;
3163
- font-size:14px;
3164
- width:-webkit-fit-content;
3165
- width:-moz-fit-content;
3166
- width:fit-content;
3167
- -webkit-user-select:none;
3168
- -moz-user-select:none;
3169
- -ms-user-select:none;
3170
- user-select:none;
3172
+ width:16px;
3173
+ height:16px;
3171
3174
  position:relative;
3172
- cursor:pointer;
3173
- color:rgba(0, 0, 0, 0.8);
3174
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3175
- .iui-checkbox > input{
3176
- width:0;
3177
- height:0;
3178
- -webkit-appearance:none;
3179
- -moz-appearance:none;
3180
- appearance:none;
3181
- opacity:0;
3182
- position:absolute; }
3183
- .iui-checkbox.iui-disabled{
3184
- cursor:not-allowed; }
3185
- .iui-checkbox .iui-checkbox-checkmark,
3186
- .iui-checkbox .iui-radio-dot{
3187
- width:16px;
3188
- height:16px;
3175
+ border-radius:3px;
3176
+ background-color:var(--_iui-checkbox-background-color);
3177
+ cursor:pointer; }
3178
+ .iui-checkbox-wrapper{
3189
3179
  margin:0;
3180
+ padding:0;
3181
+ border:none;
3182
+ vertical-align:baseline;
3190
3183
  display:flex;
3191
- flex-shrink:0;
3192
- justify-content:center;
3193
3184
  align-items:center;
3185
+ font-size:14px;
3186
+ width:-webkit-fit-content;
3187
+ width:-moz-fit-content;
3188
+ width:fit-content;
3189
+ -webkit-user-select:none;
3190
+ -moz-user-select:none;
3191
+ -ms-user-select:none;
3192
+ user-select:none;
3194
3193
  position:relative;
3195
- isolation:isolate;
3196
- border-color:rgba(0, 0, 0, 0.4);
3197
- background-color:#FFF;
3198
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3199
- background-color:var(--iui-color-background-1); }
3200
- .iui-checkbox .iui-checkbox-checkmark::after,
3201
- .iui-checkbox .iui-radio-dot::after{
3202
- content:'';
3203
- position:absolute;
3204
- inset:0;
3205
- z-index:-1;
3206
- transition:border-color 0.2s ease-out;
3207
- border-radius:inherit;
3208
- border-style:solid;
3209
- border-width:1px;
3210
- border-color:inherit; }
3211
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial),
3212
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial){
3213
- width:100%;
3214
- height:100%;
3215
- fill:#008BE1;
3216
- fill:var(--iui-icons-color-primary); }
3217
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3218
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
3219
- opacity:0; }
3220
- @media (prefers-reduced-motion: no-preference){
3221
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3222
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
3223
- transition:opacity 0.2s ease; } }
3224
- .iui-checkbox > .iui-label{
3225
- margin-right:8px;
3226
- display:flex;
3227
- align-items:center; }
3228
- .iui-checkbox > .iui-label svg{
3229
- width:16px;
3230
- height:16px;
3231
- vertical-align:middle;
3232
- fill:rgba(0, 0, 0, 0.8);
3233
- fill:var(--iui-icons-color-actionable); }
3234
- .iui-checkbox .iui-checkbox-checkmark ~ .iui-label,
3235
- .iui-checkbox .iui-radio-dot ~ .iui-label{
3236
- margin-left:8px;
3237
- margin-right:0; }
3238
- .iui-checkbox:hover > input:enabled ~ .iui-checkbox-checkmark,
3239
- .iui-checkbox:hover > input:enabled ~ .iui-radio-dot{
3240
- border-color:rgba(0, 0, 0, 0.8);
3241
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3242
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark,
3243
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark,
3244
- .iui-checkbox input:checked ~ .iui-radio-dot{
3245
- border-color:rgba(0, 0, 0, 0.6);
3246
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
3247
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
3248
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
3249
- .iui-checkbox input:checked ~ .iui-radio-dot circle{
3250
- opacity:1; }
3251
- @media (prefers-reduced-motion: no-preference){
3252
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
3253
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
3254
- .iui-checkbox input:checked ~ .iui-radio-dot circle{
3255
- transition:opacity 0.2s ease; } }
3256
- .iui-checkbox input:enabled:focus ~ .iui-checkbox-checkmark,
3257
- .iui-checkbox input:enabled:focus ~ .iui-radio-dot{
3258
- outline:2px solid #008BE1;
3194
+ cursor:pointer;
3195
+ color:rgba(0, 0, 0, 0.8);
3196
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
3197
+ gap:8px; }
3198
+ .iui-checkbox-wrapper > * + *{
3199
+ margin-left:8px; }
3200
+ @supports (gap: 8px){
3201
+ .iui-checkbox-wrapper > * + *{
3202
+ margin-left:0; } }
3203
+ .iui-checkbox-wrapper.iui-loading{
3204
+ cursor:wait;
3205
+ color:var(--iui-text-color-muted); }
3206
+ .iui-checkbox-wrapper > .iui-checkbox-label,
3207
+ .iui-checkbox-wrapper > .iui-radio-label{
3208
+ display:flex;
3209
+ align-items:center; }
3210
+ .iui-checkbox-wrapper > .iui-checkbox-label svg,
3211
+ .iui-checkbox-wrapper > .iui-radio-label svg{
3212
+ width:16px;
3213
+ height:16px;
3214
+ vertical-align:middle;
3215
+ fill:currentColor; }
3216
+ .iui-checkbox-wrapper.iui-disabled{
3217
+ cursor:not-allowed;
3218
+ color:var(--iui-text-color-muted); }
3219
+ .iui-checkbox-wrapper.iui-disabled svg{
3220
+ fill:var(--iui-icons-color-actionable-disabled); }
3221
+ .iui-checkbox-wrapper.iui-positive{
3222
+ color:#53A21A;
3223
+ color:var(--iui-color-foreground-positive); }
3224
+ .iui-checkbox-wrapper.iui-warning{
3225
+ color:#F18B12;
3226
+ color:var(--iui-color-foreground-warning); }
3227
+ .iui-checkbox-wrapper.iui-negative{
3228
+ color:#D30A0A;
3229
+ color:var(--iui-color-foreground-negative); }
3230
+ .iui-checkbox::before{
3231
+ content:'';
3232
+ position:absolute;
3233
+ inset:0;
3234
+ transition:border-color 0.2s ease-out;
3235
+ border-radius:inherit;
3236
+ border-style:solid;
3237
+ border-width:1px;
3238
+ border-color:var(--_iui-checkbox-border-color); }
3239
+ .iui-checkbox::after{
3240
+ content:'';
3241
+ position:absolute;
3242
+ inset:0;
3243
+ background-color:var(--_iui-checkbox-svg-color);
3244
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
3245
+ mask:var(--_iui-checkbox-mask-image) no-repeat center; }
3246
+ .iui-checkbox:not(:checked){
3247
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
3248
+ .iui-checkbox:checked{
3249
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
3250
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg); }
3251
+ .iui-checkbox:indeterminate{
3252
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
3253
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg); }
3254
+ .iui-checkbox:hover{
3255
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3256
+ .iui-checkbox:focus-visible{
3259
3257
  outline:2px solid var(--iui-color-foreground-primary);
3260
3258
  outline-offset:-1px; }
3261
- .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
3262
- .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
3263
- outline:none; }
3264
- .iui-checkbox input:disabled ~ .iui-checkbox-checkmark,
3265
- .iui-checkbox input:disabled ~ .iui-radio-dot{
3266
- cursor:not-allowed;
3267
- background-color:#EEF0F3;
3268
- border-color:#EEF0F3;
3269
- background-color:var(--iui-color-background-disabled);
3270
- border-color:var(--iui-color-background-disabled); }
3271
- .iui-checkbox input:disabled ~ .iui-checkbox-checkmark svg,
3272
- .iui-checkbox input:disabled ~ .iui-radio-dot svg{
3273
- fill:rgba(0, 0, 0, 0.2);
3274
- fill:var(--iui-icons-color-actionable-disabled); }
3275
- .iui-checkbox input:disabled ~ .iui-label{
3276
- cursor:not-allowed;
3277
- color:rgba(0, 0, 0, 0.4);
3278
- color:var(--iui-text-color-muted); }
3279
- .iui-checkbox input:disabled ~ .iui-label svg{
3280
- fill:rgba(0, 0, 0, 0.2);
3281
- fill:var(--iui-icons-color-actionable-disabled); }
3282
- .iui-checkbox.iui-positive{
3283
- color:#53A21A;
3284
- color:var(--iui-color-foreground-positive); }
3285
- .iui-checkbox.iui-warning{
3286
- color:#F18B12;
3287
- color:var(--iui-color-foreground-warning); }
3288
- .iui-checkbox.iui-negative{
3289
- color:#D30A0A;
3290
- color:var(--iui-color-foreground-negative); }
3291
- .iui-checkbox .iui-checkbox-checkmark{
3292
- border-radius:3px; }
3259
+ @supports not selector(*:focus-visible){
3260
+ .iui-checkbox:focus{
3261
+ outline:2px solid var(--iui-color-foreground-primary);
3262
+ outline-offset:-1px; } }
3263
+ .iui-checkbox.iui-checkbox-visibility{
3264
+ --_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>');
3265
+ --_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>');
3266
+ --_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>');
3267
+ --_iui-checkbox-border-color:transparent;
3268
+ --_iui-checkbox-background-color:transparent; }
3269
+ .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
3270
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable); }
3271
+ .iui-checkbox.iui-checkbox-visibility:where(:hover){
3272
+ --_iui-checkbox-border-color:transparent;
3273
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
3274
+ .iui-checkbox:disabled{
3275
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
3276
+ --_iui-checkbox-border-color:var(--iui-color-background-disabled);
3277
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
3278
+ cursor:not-allowed; }
3293
3279
  .iui-checkbox.iui-loading{
3280
+ --_iui-checkbox-border-color:transparent;
3281
+ --_iui-checkbox-background-color:transparent;
3282
+ opacity:0;
3283
+ position:absolute;
3294
3284
  cursor:wait; }
3295
- .iui-checkbox.iui-loading input ~ .iui-checkbox-checkmark{
3296
- border-color:transparent;
3297
- background-color:transparent; }
3298
- .iui-checkbox.iui-loading input:disabled ~ .iui-checkbox-checkmark{
3299
- cursor:wait; }
3300
- .iui-checkbox.iui-loading input:disabled ~ .iui-label{
3301
- cursor:wait; }
3302
- .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
3303
- background-color:rgba(0, 0, 0, 0.1);
3304
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
3305
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark::after,
3306
- .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark::after{
3307
- border:none; }
3308
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark{
3309
- background-color:transparent; }
3310
- .iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
3311
- .iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
3312
- opacity:0; }
3313
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
3314
- opacity:1;
3315
- transition:opacity 0.2s ease;
3316
- fill:rgba(0, 0, 0, 0.8);
3317
- fill:var(--iui-icons-color-actionable); }
3318
- .iui-checkbox-visibility input:disabled ~ .iui-checkbox-checkmark .iui-uncheck{
3319
- fill:rgba(0, 0, 0, 0.2);
3320
- fill:var(--iui-icons-color-actionable-disabled); }
3321
3285
 
3322
3286
  .iui-radio{
3287
+ --_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>');
3288
+ --_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>');
3289
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
3290
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
3291
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3292
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
3293
+ --_iui-checkbox-mask-image:initial;
3294
+ -webkit-appearance:none;
3295
+ -moz-appearance:none;
3296
+ appearance:none;
3323
3297
  margin:0;
3324
- padding:0;
3325
- border:none;
3326
- vertical-align:baseline;
3327
- display:flex;
3328
- align-items:center;
3329
- font-size:14px;
3330
- width:-webkit-fit-content;
3331
- width:-moz-fit-content;
3332
- width:fit-content;
3333
- -webkit-user-select:none;
3334
- -moz-user-select:none;
3335
- -ms-user-select:none;
3336
- user-select:none;
3298
+ width:16px;
3299
+ height:16px;
3337
3300
  position:relative;
3301
+ border-radius:3px;
3302
+ background-color:var(--_iui-checkbox-background-color);
3338
3303
  cursor:pointer;
3339
- color:rgba(0, 0, 0, 0.8);
3340
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3341
- .iui-radio > input{
3342
- width:0;
3343
- height:0;
3344
- -webkit-appearance:none;
3345
- -moz-appearance:none;
3346
- appearance:none;
3347
- opacity:0;
3348
- position:absolute; }
3349
- .iui-radio.iui-disabled{
3350
- cursor:not-allowed; }
3351
- .iui-radio .iui-checkbox-checkmark,
3352
- .iui-radio .iui-radio-dot{
3353
- width:16px;
3354
- height:16px;
3304
+ border-radius:50%; }
3305
+ .iui-radio-wrapper{
3355
3306
  margin:0;
3307
+ padding:0;
3308
+ border:none;
3309
+ vertical-align:baseline;
3356
3310
  display:flex;
3357
- flex-shrink:0;
3358
- justify-content:center;
3359
3311
  align-items:center;
3312
+ font-size:14px;
3313
+ width:-webkit-fit-content;
3314
+ width:-moz-fit-content;
3315
+ width:fit-content;
3316
+ -webkit-user-select:none;
3317
+ -moz-user-select:none;
3318
+ -ms-user-select:none;
3319
+ user-select:none;
3360
3320
  position:relative;
3361
- isolation:isolate;
3362
- border-color:rgba(0, 0, 0, 0.4);
3363
- background-color:#FFF;
3364
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3365
- background-color:var(--iui-color-background-1); }
3366
- .iui-radio .iui-checkbox-checkmark::after,
3367
- .iui-radio .iui-radio-dot::after{
3368
- content:'';
3369
- position:absolute;
3370
- inset:0;
3371
- z-index:-1;
3372
- transition:border-color 0.2s ease-out;
3373
- border-radius:inherit;
3374
- border-style:solid;
3375
- border-width:1px;
3376
- border-color:inherit; }
3377
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial),
3378
- .iui-radio .iui-radio-dot svg:not(.iui-radial){
3379
- width:100%;
3380
- height:100%;
3381
- fill:#008BE1;
3382
- fill:var(--iui-icons-color-primary); }
3383
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3384
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
3385
- opacity:0; }
3386
- @media (prefers-reduced-motion: no-preference){
3387
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3388
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
3389
- transition:opacity 0.2s ease; } }
3390
- .iui-radio > .iui-label{
3391
- margin-right:8px;
3321
+ cursor:pointer;
3322
+ color:rgba(0, 0, 0, 0.8);
3323
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
3324
+ gap:8px; }
3325
+ .iui-radio-wrapper > * + *{
3326
+ margin-left:8px; }
3327
+ @supports (gap: 8px){
3328
+ .iui-radio-wrapper > * + *{
3329
+ margin-left:0; } }
3330
+ .iui-radio-wrapper.iui-loading{
3331
+ cursor:wait;
3332
+ color:var(--iui-text-color-muted); }
3333
+ .iui-radio-wrapper > .iui-checkbox-label,
3334
+ .iui-radio-wrapper > .iui-radio-label{
3335
+ display:flex;
3336
+ align-items:center; }
3337
+ .iui-radio-wrapper > .iui-checkbox-label svg,
3338
+ .iui-radio-wrapper > .iui-radio-label svg{
3339
+ width:16px;
3340
+ height:16px;
3341
+ vertical-align:middle;
3342
+ fill:currentColor; }
3343
+ .iui-radio-wrapper.iui-disabled{
3344
+ cursor:not-allowed;
3345
+ color:var(--iui-text-color-muted); }
3346
+ .iui-radio-wrapper.iui-disabled svg{
3347
+ fill:var(--iui-icons-color-actionable-disabled); }
3348
+ .iui-radio-wrapper.iui-positive{
3349
+ color:#53A21A;
3350
+ color:var(--iui-color-foreground-positive); }
3351
+ .iui-radio-wrapper.iui-warning{
3352
+ color:#F18B12;
3353
+ color:var(--iui-color-foreground-warning); }
3354
+ .iui-radio-wrapper.iui-negative{
3355
+ color:#D30A0A;
3356
+ color:var(--iui-color-foreground-negative); }
3357
+ .iui-radio-wrapper{
3358
+ margin:0;
3359
+ padding:0;
3360
+ border:none;
3361
+ vertical-align:baseline;
3392
3362
  display:flex;
3393
- align-items:center; }
3394
- .iui-radio > .iui-label svg{
3395
- width:16px;
3396
- height:16px;
3397
- vertical-align:middle;
3398
- fill:rgba(0, 0, 0, 0.8);
3399
- fill:var(--iui-icons-color-actionable); }
3400
- .iui-radio .iui-checkbox-checkmark ~ .iui-label,
3401
- .iui-radio .iui-radio-dot ~ .iui-label{
3402
- margin-left:8px;
3403
- margin-right:0; }
3404
- .iui-radio:hover > input:enabled ~ .iui-checkbox-checkmark,
3405
- .iui-radio:hover > input:enabled ~ .iui-radio-dot{
3406
- border-color:rgba(0, 0, 0, 0.8);
3407
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3408
- .iui-radio input:checked ~ .iui-checkbox-checkmark,
3409
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark,
3410
- .iui-radio input:checked ~ .iui-radio-dot{
3411
- border-color:rgba(0, 0, 0, 0.6);
3412
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
3413
- .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
3414
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
3415
- .iui-radio input:checked ~ .iui-radio-dot circle{
3416
- opacity:1; }
3417
- @media (prefers-reduced-motion: no-preference){
3418
- .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
3419
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
3420
- .iui-radio input:checked ~ .iui-radio-dot circle{
3421
- transition:opacity 0.2s ease; } }
3422
- .iui-radio input:enabled:focus ~ .iui-checkbox-checkmark,
3423
- .iui-radio input:enabled:focus ~ .iui-radio-dot{
3424
- outline:2px solid #008BE1;
3363
+ align-items:center;
3364
+ font-size:14px;
3365
+ width:-webkit-fit-content;
3366
+ width:-moz-fit-content;
3367
+ width:fit-content;
3368
+ -webkit-user-select:none;
3369
+ -moz-user-select:none;
3370
+ -ms-user-select:none;
3371
+ user-select:none;
3372
+ position:relative;
3373
+ cursor:pointer;
3374
+ color:rgba(0, 0, 0, 0.8);
3375
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
3376
+ gap:8px; }
3377
+ .iui-radio-wrapper > * + *{
3378
+ margin-left:8px; }
3379
+ @supports (gap: 8px){
3380
+ .iui-radio-wrapper > * + *{
3381
+ margin-left:0; } }
3382
+ .iui-radio-wrapper.iui-loading{
3383
+ cursor:wait;
3384
+ color:var(--iui-text-color-muted); }
3385
+ .iui-radio-wrapper > .iui-checkbox-label,
3386
+ .iui-radio-wrapper > .iui-radio-label{
3387
+ display:flex;
3388
+ align-items:center; }
3389
+ .iui-radio-wrapper > .iui-checkbox-label svg,
3390
+ .iui-radio-wrapper > .iui-radio-label svg{
3391
+ width:16px;
3392
+ height:16px;
3393
+ vertical-align:middle;
3394
+ fill:currentColor; }
3395
+ .iui-radio-wrapper.iui-disabled{
3396
+ cursor:not-allowed;
3397
+ color:var(--iui-text-color-muted); }
3398
+ .iui-radio-wrapper.iui-disabled svg{
3399
+ fill:var(--iui-icons-color-actionable-disabled); }
3400
+ .iui-radio-wrapper.iui-positive{
3401
+ color:#53A21A;
3402
+ color:var(--iui-color-foreground-positive); }
3403
+ .iui-radio-wrapper.iui-warning{
3404
+ color:#F18B12;
3405
+ color:var(--iui-color-foreground-warning); }
3406
+ .iui-radio-wrapper.iui-negative{
3407
+ color:#D30A0A;
3408
+ color:var(--iui-color-foreground-negative); }
3409
+ .iui-radio::before{
3410
+ content:'';
3411
+ position:absolute;
3412
+ inset:0;
3413
+ transition:border-color 0.2s ease-out;
3414
+ border-radius:inherit;
3415
+ border-style:solid;
3416
+ border-width:1px;
3417
+ border-color:var(--_iui-checkbox-border-color); }
3418
+ .iui-radio::after{
3419
+ content:'';
3420
+ position:absolute;
3421
+ inset:0;
3422
+ background-color:var(--_iui-checkbox-svg-color);
3423
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
3424
+ mask:var(--_iui-checkbox-mask-image) no-repeat center; }
3425
+ .iui-radio:not(:checked){
3426
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
3427
+ .iui-radio:checked{
3428
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
3429
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg); }
3430
+ .iui-radio:indeterminate{
3431
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
3432
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg); }
3433
+ .iui-radio:hover{
3434
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3435
+ .iui-radio:focus-visible{
3425
3436
  outline:2px solid var(--iui-color-foreground-primary);
3426
3437
  outline-offset:-1px; }
3427
- .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
3428
- .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
3429
- outline:none; }
3430
- .iui-radio input:disabled ~ .iui-checkbox-checkmark,
3431
- .iui-radio input:disabled ~ .iui-radio-dot{
3432
- cursor:not-allowed;
3433
- background-color:#EEF0F3;
3434
- border-color:#EEF0F3;
3435
- background-color:var(--iui-color-background-disabled);
3436
- border-color:var(--iui-color-background-disabled); }
3437
- .iui-radio input:disabled ~ .iui-checkbox-checkmark svg,
3438
- .iui-radio input:disabled ~ .iui-radio-dot svg{
3439
- fill:rgba(0, 0, 0, 0.2);
3440
- fill:var(--iui-icons-color-actionable-disabled); }
3441
- .iui-radio input:disabled ~ .iui-label{
3442
- cursor:not-allowed;
3443
- color:rgba(0, 0, 0, 0.4);
3444
- color:var(--iui-text-color-muted); }
3445
- .iui-radio input:disabled ~ .iui-label svg{
3446
- fill:rgba(0, 0, 0, 0.2);
3447
- fill:var(--iui-icons-color-actionable-disabled); }
3448
- .iui-radio.iui-positive{
3449
- color:#53A21A;
3450
- color:var(--iui-color-foreground-positive); }
3451
- .iui-radio.iui-warning{
3452
- color:#F18B12;
3453
- color:var(--iui-color-foreground-warning); }
3454
- .iui-radio.iui-negative{
3455
- color:#D30A0A;
3456
- color:var(--iui-color-foreground-negative); }
3457
- .iui-radio .iui-radio-dot{
3458
- border-radius:50%; }
3438
+ @supports not selector(*:focus-visible){
3439
+ .iui-radio:focus{
3440
+ outline:2px solid var(--iui-color-foreground-primary);
3441
+ outline-offset:-1px; } }
3442
+ .iui-radio.iui-checkbox-visibility{
3443
+ --_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>');
3444
+ --_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>');
3445
+ --_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>');
3446
+ --_iui-checkbox-border-color:transparent;
3447
+ --_iui-checkbox-background-color:transparent; }
3448
+ .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
3449
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable); }
3450
+ .iui-radio.iui-checkbox-visibility:where(:hover){
3451
+ --_iui-checkbox-border-color:transparent;
3452
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
3453
+ .iui-radio:disabled{
3454
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
3455
+ --_iui-checkbox-border-color:var(--iui-color-background-disabled);
3456
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
3457
+ cursor:not-allowed; }
3458
+ .iui-radio.iui-loading{
3459
+ --_iui-checkbox-border-color:transparent;
3460
+ --_iui-checkbox-background-color:transparent;
3461
+ opacity:0;
3462
+ position:absolute;
3463
+ cursor:wait; }
3464
+ .iui-radio:checked{
3465
+ --_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>'); }
3466
+ .iui-radio:not(:checked), .iui-radio:indeterminate{
3467
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
3459
3468
 
3460
3469
  .iui-radio-tile-container{
3461
3470
  display:inline-flex;
@@ -6696,7 +6705,8 @@ a.iui-tag{
6696
6705
  .iui-tree-node{
6697
6706
  display:flex;
6698
6707
  cursor:pointer;
6699
- padding:0 8px; }
6708
+ padding:0 8px;
6709
+ align-items:center; }
6700
6710
  .iui-tree-node-checkbox{
6701
6711
  margin-right:8px; }
6702
6712
  .iui-tree-node-content{