survey-react 1.9.95 → 1.9.97

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 +249 -166
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +123 -74
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +49 -28
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +191 -94
  12. package/survey.react.js +512 -192
  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.95
2
+ * surveyjs - Survey JavaScript library v1.9.97
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
  */
@@ -217,17 +217,17 @@ sv-popup {
217
217
  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
218
218
  }
219
219
 
220
- .sv-popup--show-pointer.sv-popup--right {
220
+ .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
221
221
  transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
222
222
  }
223
- .sv-popup--show-pointer.sv-popup--right .sv-popup__pointer {
223
+ .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
224
224
  transform: translate(-12px, -4px) rotate(-90deg);
225
225
  }
226
226
 
227
- .sv-popup--show-pointer.sv-popup--left {
227
+ .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
228
228
  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
229
229
  }
230
- .sv-popup--show-pointer.sv-popup--left .sv-popup__pointer {
230
+ .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
231
231
  transform: translate(-4px, -4px) rotate(90deg);
232
232
  }
233
233
 
@@ -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 {
@@ -2803,17 +2824,17 @@ sv-popup {
2803
2824
  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2804
2825
  }
2805
2826
 
2806
- .sv-popup--show-pointer.sv-popup--right {
2827
+ .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
2807
2828
  transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2808
2829
  }
2809
- .sv-popup--show-pointer.sv-popup--right .sv-popup__pointer {
2830
+ .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
2810
2831
  transform: translate(-12px, -4px) rotate(-90deg);
2811
2832
  }
2812
2833
 
2813
- .sv-popup--show-pointer.sv-popup--left {
2834
+ .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
2814
2835
  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2815
2836
  }
2816
- .sv-popup--show-pointer.sv-popup--left .sv-popup__pointer {
2837
+ .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
2817
2838
  transform: translate(-4px, -4px) rotate(90deg);
2818
2839
  }
2819
2840
 
@@ -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
 
@@ -3335,16 +3358,21 @@ sv-popup {
3335
3358
  opacity: 0.25;
3336
3359
  }
3337
3360
 
3361
+ .sv-ranking-item--disabled .sv-ranking-item__text {
3362
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3363
+ opacity: 0.25;
3364
+ }
3365
+
3338
3366
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
3339
3367
  display: none;
3340
3368
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3341
3369
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3342
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
3343
- width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3370
+ width: calc(31 * var(--sjs-base-unit, var(--base-unit, 8px)));
3344
3371
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3345
3372
  z-index: 1;
3346
3373
  position: absolute;
3347
- left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3374
+ left: 0;
3375
+ top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3348
3376
  }
3349
3377
 
3350
3378
  [dir=rtl] .sv-ranking-item__ghost {
@@ -3423,6 +3451,9 @@ sv-popup {
3423
3451
  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3424
3452
  }
3425
3453
 
3454
+ .sv-ranking-shortcut .sv-ranking-item__content {
3455
+ padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3456
+ }
3426
3457
  .sv-ranking-shortcut .sv-ranking-item__icon-container {
3427
3458
  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3428
3459
  }
@@ -3432,26 +3463,39 @@ sv-popup {
3432
3463
  }
3433
3464
 
3434
3465
  .sv-ranking--select-to-rank-vertical {
3435
- flex-direction: column;
3466
+ flex-direction: column-reverse;
3436
3467
  }
3437
3468
  .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
3438
- margin: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3469
+ margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3439
3470
  height: 1px;
3440
3471
  }
3472
+ .sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
3473
+ padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3474
+ padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3475
+ }
3441
3476
 
3442
3477
  .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
3443
3478
  width: 1px;
3444
3479
  }
3445
3480
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
3481
+ left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3482
+ }
3483
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to {
3484
+ padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3485
+ }
3486
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
3446
3487
  left: initial;
3447
3488
  }
3489
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from {
3490
+ padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3491
+ }
3448
3492
 
3449
3493
  .sv-ranking__container-placeholder {
3450
3494
  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
3451
3495
  font-family: var(--font-family, var(--font-family));
3452
3496
  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)))));
3497
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3498
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3455
3499
  white-space: break-spaces;
3456
3500
  display: flex;
3457
3501
  justify-content: center;
@@ -3475,6 +3519,10 @@ sv-popup {
3475
3519
  background: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
3476
3520
  }
3477
3521
 
3522
+ .sv-ranking__container--from .sv-ranking-item__icon--focus {
3523
+ display: none;
3524
+ }
3525
+
3478
3526
  .sv-list {
3479
3527
  padding: 0;
3480
3528
  margin: 0;
@@ -3495,8 +3543,8 @@ sv-popup {
3495
3543
  }
3496
3544
 
3497
3545
  .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)))));
3546
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3547
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3500
3548
  font-weight: 400;
3501
3549
  text-align: center;
3502
3550
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3522,10 +3570,11 @@ sv-popup {
3522
3570
  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3523
3571
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3524
3572
  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)))));
3573
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3574
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3527
3575
  cursor: pointer;
3528
3576
  overflow: hidden;
3577
+ text-align: left;
3529
3578
  text-overflow: ellipsis;
3530
3579
  white-space: nowrap;
3531
3580
  }
@@ -3662,11 +3711,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3662
3711
  box-sizing: border-box;
3663
3712
  width: 100%;
3664
3713
  outline: none;
3665
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3714
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3666
3715
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3667
3716
  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3668
3717
  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)))));
3718
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3670
3719
  border: none;
3671
3720
  }
3672
3721
 
@@ -3688,21 +3737,21 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3688
3737
  }
3689
3738
 
3690
3739
  .sv-save-data_root {
3691
- position: absolute;
3740
+ position: fixed;
3692
3741
  left: 50%;
3693
3742
  bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3694
3743
  background: var(--sjs-general-backcolor, var(--background, #fff));
3695
3744
  opacity: 0;
3696
3745
  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);
3746
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3698
3747
  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
3699
3748
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3700
3749
  min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
3701
3750
  text-align: center;
3702
3751
  z-index: 1600;
3703
3752
  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)))));
3753
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3754
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3706
3755
  display: flex;
3707
3756
  flex-direction: row;
3708
3757
  justify-content: center;
@@ -3747,8 +3796,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3747
3796
 
3748
3797
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
3749
3798
  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)))));
3799
+ font-size: calc(1 * var(--sjs-font-size, 16px));
3800
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
3752
3801
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3753
3802
  color: #ffffff;
3754
3803
  background-color: var(--sjs-special-red, var(--red, #e60a3e));