survey-react 1.9.94 → 1.9.96

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 (14) hide show
  1. package/defaultV2.css +184 -148
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +83 -60
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +43 -24
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +129 -77
  12. package/survey.react.js +336 -154
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.94
2
+ * surveyjs - Survey JavaScript library v1.9.96
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -248,8 +248,8 @@ sv-popup {
248
248
 
249
249
  .sv-popup__body-header {
250
250
  font-family: Open Sans;
251
- font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
252
- line-height: calc(2 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
251
+ font-size: calc(1.5 * var(--sjs-font-size, 16px));
252
+ line-height: calc(2 * var(--sjs-font-size, 16px));
253
253
  font-style: normal;
254
254
  font-weight: 700;
255
255
  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -368,8 +368,8 @@ sv-popup {
368
368
  }
369
369
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
370
370
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
371
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
372
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
371
+ font-size: calc(1 * var(--sjs-font-size, 16px));
372
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
373
373
  font-family: var(--font-family);
374
374
  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
375
375
  }
@@ -385,11 +385,13 @@ sv-popup {
385
385
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
386
386
  font-weight: 600;
387
387
  }
388
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
389
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
390
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
388
+
389
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
390
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
391
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
391
392
  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
392
393
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
394
+ font-weight: 400;
393
395
  }
394
396
 
395
397
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -432,7 +434,7 @@ sv-popup {
432
434
  display: inline-block;
433
435
  vertical-align: top;
434
436
  margin-top: 22px;
435
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
437
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
436
438
  width: 16px;
437
439
  height: 16px;
438
440
  cursor: pointer;
@@ -443,7 +445,7 @@ sv-popup {
443
445
  display: inline-block;
444
446
  vertical-align: top;
445
447
  margin-top: 22px;
446
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
448
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
447
449
  width: 16px;
448
450
  height: 16px;
449
451
  cursor: pointer;
@@ -471,7 +473,7 @@ sv-popup {
471
473
 
472
474
  .sv_progress-buttons__list li {
473
475
  width: 138px;
474
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
476
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
475
477
  font-family: var(--font-family, var(--font-family));
476
478
  position: relative;
477
479
  text-align: center;
@@ -525,12 +527,12 @@ sv-popup {
525
527
  }
526
528
 
527
529
  .sv_progress-toc {
528
- padding: 8px;
530
+ padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
529
531
  max-width: 336px;
530
532
  height: 100%;
531
533
  background: #FFFFFF;
532
534
  box-sizing: border-box;
533
- min-width: 256px;
535
+ min-width: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
534
536
  }
535
537
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
536
538
  background: rgba(25, 179, 148, 0.1);
@@ -541,11 +543,11 @@ sv-popup {
541
543
  white-space: break-spaces;
542
544
  }
543
545
  .sv_progress-toc .sv-list__item-body {
544
- padding-inline-start: 16px;
545
- padding-inline-end: 16px;
546
+ padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
547
+ padding-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
546
548
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
547
- padding-top: 12px;
548
- padding-bottom: 12px;
549
+ padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
550
+ padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
549
551
  }
550
552
 
551
553
  .sv_progress-toc--left {
@@ -556,9 +558,28 @@ sv-popup {
556
558
  border-left: 1px solid #D6D6D6;
557
559
  }
558
560
 
561
+ .sv_progress-toc--mobile {
562
+ position: fixed;
563
+ top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
564
+ right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
565
+ width: auto;
566
+ min-width: auto;
567
+ height: auto;
568
+ background-color: transparent;
569
+ z-index: 15;
570
+ border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
571
+ }
572
+ .sv_progress-toc--mobile > div {
573
+ width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
574
+ height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
575
+ }
576
+ .sv_progress-toc--mobile:hover {
577
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
578
+ }
579
+
559
580
  .sv-container-modern {
560
581
  color: var(--text-color, #404040);
561
- font-size: var(--font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
582
+ font-size: var(--font-size, var(--sjs-font-size, 16px));
562
583
  font-family: var(--font-family, var(--font-family));
563
584
  margin-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
564
585
  }
@@ -2485,15 +2506,15 @@ button.sv-action-bar-item {
2485
2506
 
2486
2507
  .sv-action-bar--default-size-mode .sv-action-bar-item {
2487
2508
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2488
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2489
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2509
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2510
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2490
2511
  margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2491
2512
  }
2492
2513
 
2493
2514
  .sv-action-bar--small-size-mode .sv-action-bar-item {
2494
2515
  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2495
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2496
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2516
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
2517
+ line-height: calc(1 * var(--sjs-font-size, 16px));
2497
2518
  margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2498
2519
  }
2499
2520
 
@@ -2565,8 +2586,8 @@ button.sv-action-bar-item {
2565
2586
  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2566
2587
  background-color: transparent;
2567
2588
  cursor: pointer;
2568
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2569
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2589
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2590
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2570
2591
  font-family: var(--font-family, var(--font-family));
2571
2592
  }
2572
2593
 
@@ -2632,9 +2653,9 @@ button.sv-action-bar-item {
2632
2653
  z-index: 10000;
2633
2654
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
2634
2655
  font-family: var(--font-family, var(--font-family));
2635
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2656
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2636
2657
  padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2637
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2658
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2638
2659
  }
2639
2660
 
2640
2661
  .sv-matrixdynamic__drag-icon {
@@ -2834,8 +2855,8 @@ sv-popup {
2834
2855
 
2835
2856
  .sv-popup__body-header {
2836
2857
  font-family: Open Sans;
2837
- font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2838
- line-height: calc(2 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2858
+ font-size: calc(1.5 * var(--sjs-font-size, 16px));
2859
+ line-height: calc(2 * var(--sjs-font-size, 16px));
2839
2860
  font-style: normal;
2840
2861
  font-weight: 700;
2841
2862
  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2954,8 +2975,8 @@ sv-popup {
2954
2975
  }
2955
2976
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
2956
2977
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2957
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2958
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2978
+ font-size: calc(1 * var(--sjs-font-size, 16px));
2979
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
2959
2980
  font-family: var(--font-family);
2960
2981
  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2961
2982
  }
@@ -2971,11 +2992,13 @@ sv-popup {
2971
2992
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2972
2993
  font-weight: 600;
2973
2994
  }
2974
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
2975
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
2976
- .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
2995
+
2996
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
2997
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
2998
+ .sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
2977
2999
  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
2978
3000
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3001
+ font-weight: 400;
2979
3002
  }
2980
3003
 
2981
3004
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -3005,7 +3028,7 @@ sv-popup {
3005
3028
  display: flex;
3006
3029
  align-items: center;
3007
3030
  flex-direction: row;
3008
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3031
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3009
3032
  overflow: auto;
3010
3033
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3011
3034
  }
@@ -3024,9 +3047,9 @@ sv-popup {
3024
3047
  appearance: none;
3025
3048
  width: 100%;
3026
3049
  padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3027
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3050
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3028
3051
  outline: none;
3029
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3052
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3030
3053
  font-weight: 400;
3031
3054
  background: var(--sjs-general-backcolor, var(--background, #fff));
3032
3055
  cursor: pointer;
@@ -3143,7 +3166,7 @@ sv-popup {
3143
3166
  background-color: cadetblue;
3144
3167
  padding: 1px;
3145
3168
  font-family: var(--font-family, var(--font-family));
3146
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3169
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
3147
3170
  font-style: normal;
3148
3171
  font-weight: 400;
3149
3172
  line-height: 1.42857143;
@@ -3172,7 +3195,7 @@ sv-popup {
3172
3195
  .sv_window_title {
3173
3196
  padding: 8px 14px;
3174
3197
  margin: 0;
3175
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3198
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
3176
3199
  background-color: #f7f7f7;
3177
3200
  border-bottom: 1px solid #ebebeb;
3178
3201
  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
@@ -3189,7 +3212,7 @@ sv-popup {
3189
3212
  .sv_window_title a:link,
3190
3213
  .sv_window_title a:visited {
3191
3214
  text-decoration: none;
3192
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3215
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
3193
3216
  font-style: normal;
3194
3217
  color: black;
3195
3218
  }
@@ -3210,8 +3233,8 @@ sv-popup {
3210
3233
 
3211
3234
  .sv-brand-info__text {
3212
3235
  font-weight: 600;
3213
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3214
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3236
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3237
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3215
3238
  color: #161616;
3216
3239
  }
3217
3240
 
@@ -3224,8 +3247,8 @@ sv-popup {
3224
3247
 
3225
3248
  .sv-brand-info__terms {
3226
3249
  font-weight: 400;
3227
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3228
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3250
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
3251
+ line-height: calc(1 * var(--sjs-font-size, 16px));
3229
3252
  }
3230
3253
  .sv-brand-info__terms a {
3231
3254
  color: #909090;
@@ -3303,12 +3326,12 @@ sv-popup {
3303
3326
  justify-content: center;
3304
3327
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3305
3328
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3306
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3329
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3307
3330
  border-radius: 100%;
3308
3331
  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
3309
3332
  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3310
3333
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3311
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3334
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3312
3335
  box-sizing: border-box;
3313
3336
  font-weight: 600;
3314
3337
  margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3325,8 +3348,8 @@ sv-popup {
3325
3348
  text-overflow: ellipsis;
3326
3349
  white-space: nowrap;
3327
3350
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3328
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3329
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3351
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3352
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3330
3353
  margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3331
3354
  }
3332
3355
 
@@ -3450,8 +3473,8 @@ sv-popup {
3450
3473
  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
3451
3474
  font-family: var(--font-family, var(--font-family));
3452
3475
  font-style: normal;
3453
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3454
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3476
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3477
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3455
3478
  white-space: break-spaces;
3456
3479
  display: flex;
3457
3480
  justify-content: center;
@@ -3495,8 +3518,8 @@ sv-popup {
3495
3518
  }
3496
3519
 
3497
3520
  .sv-list__empty-text {
3498
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3499
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3521
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3522
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3500
3523
  font-weight: 400;
3501
3524
  text-align: center;
3502
3525
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3522,8 +3545,8 @@ sv-popup {
3522
3545
  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3523
3546
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3524
3547
  font-weight: normal;
3525
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3526
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3548
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3549
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3527
3550
  cursor: pointer;
3528
3551
  overflow: hidden;
3529
3552
  text-overflow: ellipsis;
@@ -3662,11 +3685,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3662
3685
  box-sizing: border-box;
3663
3686
  width: 100%;
3664
3687
  outline: none;
3665
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3688
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3666
3689
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3667
3690
  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3668
3691
  padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
3669
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3692
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3670
3693
  border: none;
3671
3694
  }
3672
3695
 
@@ -3694,15 +3717,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3694
3717
  background: var(--sjs-general-backcolor, var(--background, #fff));
3695
3718
  opacity: 0;
3696
3719
  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3697
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
3720
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3698
3721
  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
3699
3722
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3700
3723
  min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
3701
3724
  text-align: center;
3702
3725
  z-index: 1600;
3703
3726
  font-family: var(--font-family, var(--font-family));
3704
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3705
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3727
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3728
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3706
3729
  display: flex;
3707
3730
  flex-direction: row;
3708
3731
  justify-content: center;
@@ -3747,8 +3770,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3747
3770
 
3748
3771
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
3749
3772
  font-weight: 600;
3750
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3751
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3773
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3774
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3752
3775
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3753
3776
  color: #ffffff;
3754
3777
  background-color: var(--sjs-special-red, var(--red, #e60a3e));