survey-react 1.9.84 → 1.9.86

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.
package/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.84
2
+ * surveyjs - Survey JavaScript library v1.9.86
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
  */
@@ -104,12 +104,12 @@ sv-popup {
104
104
  .sv-popup__shadow {
105
105
  width: 100%;
106
106
  height: 100%;
107
- border-radius: calc(1 * var(--base-unit, 8px));
107
+ border-radius: calc(2 * var(--sjs-corner-radius, 4px));
108
108
  }
109
109
 
110
110
  .sv-popup__body-content {
111
111
  background-color: var(--background, #fff);
112
- border-radius: calc(0.5 * var(--base-unit, 8px));
112
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
113
113
  width: 100%;
114
114
  height: 100%;
115
115
  box-sizing: border-box;
@@ -119,7 +119,7 @@ sv-popup {
119
119
  max-width: 90vw;
120
120
  }
121
121
 
122
- .sv-popup--modal {
122
+ .sv-popup.sv-popup--modal {
123
123
  display: flex;
124
124
  align-items: center;
125
125
  justify-content: center;
@@ -127,11 +127,12 @@ sv-popup {
127
127
  padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
128
128
  box-sizing: border-box;
129
129
  }
130
- .sv-popup--modal .sv-popup__container {
130
+ .sv-popup.sv-popup--modal .sv-popup__container {
131
131
  position: static;
132
132
  }
133
- .sv-popup--modal .sv-popup__body-content {
133
+ .sv-popup.sv-popup--modal .sv-popup__body-content {
134
134
  padding: calc(4 * var(--base-unit, 8px));
135
+ height: auto;
135
136
  }
136
137
 
137
138
  .sv-popup--overlay.sv-popup--overlay {
@@ -150,7 +151,7 @@ sv-popup {
150
151
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
151
152
  max-height: var(--sv-popup-overlay-height, 100vh);
152
153
  max-width: 100vw;
153
- border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;
154
+ border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
154
155
  background: var(--background, #fff);
155
156
  box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
156
157
  padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -246,7 +247,7 @@ sv-popup {
246
247
 
247
248
  .sv-popup__body-header {
248
249
  font-family: Open Sans;
249
- font-size: calc(3 * var(--base-unit, 8px));
250
+ font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
250
251
  line-height: calc(4 * var(--base-unit, 8px));
251
252
  font-style: normal;
252
253
  font-weight: 700;
@@ -267,13 +268,13 @@ sv-popup {
267
268
  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
268
269
  background: var(--background, #fff);
269
270
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
270
- border-radius: 4px;
271
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
271
272
  margin: 2px;
272
273
  cursor: pointer;
273
274
  font-family: var(--font-family, var(--font-family));
274
275
  font-style: normal;
275
276
  font-weight: 600;
276
- font-size: calc(2 * var(--base-unit, 8px));
277
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
277
278
  line-height: calc(3 * var(--base-unit, 8px));
278
279
  text-align: center;
279
280
  color: var(--primary, #19b394);
@@ -403,7 +404,7 @@ sv-popup {
403
404
  }
404
405
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
405
406
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
406
- font-size: calc(2 * var(--base-unit, 8px));
407
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
407
408
  line-height: calc(3 * var(--base-unit, 8px));
408
409
  font-family: var(--font-family);
409
410
  padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
@@ -440,10 +441,9 @@ sv-popup {
440
441
  width: auto;
441
442
  min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
442
443
  max-width: var(--sv-popup-overlay-max-width);
443
- border-radius: calc(0.5 * var(--base-unit, 8px));
444
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
444
445
  overflow: hidden;
445
446
  margin: 0;
446
- border-radius: 4px;
447
447
  }
448
448
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
449
449
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -468,7 +468,7 @@ sv-popup {
468
468
  display: inline-block;
469
469
  vertical-align: top;
470
470
  margin-top: 22px;
471
- font-size: 14px;
471
+ font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
472
472
  width: 16px;
473
473
  height: 16px;
474
474
  cursor: pointer;
@@ -479,7 +479,7 @@ sv-popup {
479
479
  display: inline-block;
480
480
  vertical-align: top;
481
481
  margin-top: 22px;
482
- font-size: 14px;
482
+ font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
483
483
  width: 16px;
484
484
  height: 16px;
485
485
  cursor: pointer;
@@ -507,7 +507,7 @@ sv-popup {
507
507
 
508
508
  .sv_progress-buttons__list li {
509
509
  width: 138px;
510
- font-size: 14px;
510
+ font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
511
511
  font-family: var(--font-family, var(--font-family));
512
512
  position: relative;
513
513
  text-align: center;
@@ -579,7 +579,7 @@ sv-popup {
579
579
  .sv_progress-toc .sv-list__item-body {
580
580
  padding-inline-start: 16px;
581
581
  padding-inline-end: 16px;
582
- border-radius: 3px;
582
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
583
583
  padding-top: 12px;
584
584
  padding-bottom: 12px;
585
585
  }
@@ -594,7 +594,7 @@ sv-popup {
594
594
 
595
595
  .sv-container-modern {
596
596
  color: var(--text-color, #404040);
597
- font-size: var(--font-size, 16px);
597
+ font-size: var(--font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
598
598
  font-family: var(--font-family, var(--font-family));
599
599
  margin-bottom: calc(10 * var(--base-unit, 8px));
600
600
  }
@@ -2502,7 +2502,7 @@ select.sv-dropdown {
2502
2502
  padding: calc(1 * var(--base-unit, 8px));
2503
2503
  box-sizing: border-box;
2504
2504
  border: none;
2505
- border-radius: 2px;
2505
+ border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2506
2506
  background-color: transparent;
2507
2507
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2508
2508
  cursor: pointer;
@@ -2517,14 +2517,14 @@ button.sv-action-bar-item {
2517
2517
 
2518
2518
  .sv-action-bar--default-size-mode .sv-action-bar-item {
2519
2519
  height: calc(5 * var(--base-unit, 8px));
2520
- font-size: calc(2 * var(--base-unit, 8px));
2520
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2521
2521
  line-height: calc(3 * var(--base-unit, 8px));
2522
2522
  margin: 0 calc(1 * var(--base-unit, 8px));
2523
2523
  }
2524
2524
 
2525
2525
  .sv-action-bar--small-size-mode .sv-action-bar-item {
2526
2526
  height: calc(4 * var(--base-unit, 8px));
2527
- font-size: calc(1.5 * var(--base-unit, 8px));
2527
+ font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2528
2528
  line-height: calc(2 * var(--base-unit, 8px));
2529
2529
  margin: 0 calc(0.5 * var(--base-unit, 8px));
2530
2530
  }
@@ -2594,11 +2594,11 @@ button.sv-action-bar-item {
2594
2594
  padding: calc(1 * var(--base-unit, 8px));
2595
2595
  box-sizing: border-box;
2596
2596
  border: none;
2597
- border-radius: 2px;
2597
+ border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2598
2598
  background-color: transparent;
2599
2599
  cursor: pointer;
2600
2600
  line-height: calc(3 * var(--base-unit, 8px));
2601
- font-size: calc(2 * var(--base-unit, 8px));
2601
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2602
2602
  font-family: var(--font-family, var(--font-family));
2603
2603
  }
2604
2604
 
@@ -2664,7 +2664,7 @@ button.sv-action-bar-item {
2664
2664
  z-index: 1000;
2665
2665
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
2666
2666
  font-family: var(--font-family, var(--font-family));
2667
- font-size: calc(2 * var(--base-unit, 8px));
2667
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2668
2668
  padding-left: calc(2.5 * var(--base-unit, 8px));
2669
2669
  line-height: calc(3 * var(--base-unit, 8px));
2670
2670
  }
@@ -2722,12 +2722,12 @@ sv-popup {
2722
2722
  .sv-popup__shadow {
2723
2723
  width: 100%;
2724
2724
  height: 100%;
2725
- border-radius: calc(1 * var(--base-unit, 8px));
2725
+ border-radius: calc(2 * var(--sjs-corner-radius, 4px));
2726
2726
  }
2727
2727
 
2728
2728
  .sv-popup__body-content {
2729
2729
  background-color: var(--background, #fff);
2730
- border-radius: calc(0.5 * var(--base-unit, 8px));
2730
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2731
2731
  width: 100%;
2732
2732
  height: 100%;
2733
2733
  box-sizing: border-box;
@@ -2737,7 +2737,7 @@ sv-popup {
2737
2737
  max-width: 90vw;
2738
2738
  }
2739
2739
 
2740
- .sv-popup--modal {
2740
+ .sv-popup.sv-popup--modal {
2741
2741
  display: flex;
2742
2742
  align-items: center;
2743
2743
  justify-content: center;
@@ -2745,11 +2745,12 @@ sv-popup {
2745
2745
  padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
2746
2746
  box-sizing: border-box;
2747
2747
  }
2748
- .sv-popup--modal .sv-popup__container {
2748
+ .sv-popup.sv-popup--modal .sv-popup__container {
2749
2749
  position: static;
2750
2750
  }
2751
- .sv-popup--modal .sv-popup__body-content {
2751
+ .sv-popup.sv-popup--modal .sv-popup__body-content {
2752
2752
  padding: calc(4 * var(--base-unit, 8px));
2753
+ height: auto;
2753
2754
  }
2754
2755
 
2755
2756
  .sv-popup--overlay.sv-popup--overlay {
@@ -2768,7 +2769,7 @@ sv-popup {
2768
2769
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
2769
2770
  max-height: var(--sv-popup-overlay-height, 100vh);
2770
2771
  max-width: 100vw;
2771
- border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;
2772
+ border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
2772
2773
  background: var(--background, #fff);
2773
2774
  box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
2774
2775
  padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -2864,7 +2865,7 @@ sv-popup {
2864
2865
 
2865
2866
  .sv-popup__body-header {
2866
2867
  font-family: Open Sans;
2867
- font-size: calc(3 * var(--base-unit, 8px));
2868
+ font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2868
2869
  line-height: calc(4 * var(--base-unit, 8px));
2869
2870
  font-style: normal;
2870
2871
  font-weight: 700;
@@ -2885,13 +2886,13 @@ sv-popup {
2885
2886
  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
2886
2887
  background: var(--background, #fff);
2887
2888
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2888
- border-radius: 4px;
2889
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2889
2890
  margin: 2px;
2890
2891
  cursor: pointer;
2891
2892
  font-family: var(--font-family, var(--font-family));
2892
2893
  font-style: normal;
2893
2894
  font-weight: 600;
2894
- font-size: calc(2 * var(--base-unit, 8px));
2895
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2895
2896
  line-height: calc(3 * var(--base-unit, 8px));
2896
2897
  text-align: center;
2897
2898
  color: var(--primary, #19b394);
@@ -3021,7 +3022,7 @@ sv-popup {
3021
3022
  }
3022
3023
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
3023
3024
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3024
- font-size: calc(2 * var(--base-unit, 8px));
3025
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3025
3026
  line-height: calc(3 * var(--base-unit, 8px));
3026
3027
  font-family: var(--font-family);
3027
3028
  padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
@@ -3058,10 +3059,9 @@ sv-popup {
3058
3059
  width: auto;
3059
3060
  min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
3060
3061
  max-width: var(--sv-popup-overlay-max-width);
3061
- border-radius: calc(0.5 * var(--base-unit, 8px));
3062
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3062
3063
  overflow: hidden;
3063
3064
  margin: 0;
3064
- border-radius: 4px;
3065
3065
  }
3066
3066
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
3067
3067
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -3073,7 +3073,7 @@ sv-popup {
3073
3073
  display: flex;
3074
3074
  align-items: center;
3075
3075
  flex-direction: row;
3076
- font-size: calc(2 * var(--base-unit, 8px));
3076
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3077
3077
  overflow: auto;
3078
3078
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3079
3079
  }
@@ -3094,7 +3094,7 @@ sv-popup {
3094
3094
  padding: 11px calc(2 * var(--base-unit, 8px));
3095
3095
  line-height: calc(3 * var(--base-unit, 8px));
3096
3096
  outline: none;
3097
- font-size: calc(2 * var(--base-unit, 8px));
3097
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3098
3098
  font-weight: 400;
3099
3099
  background: var(--background, #fff);
3100
3100
  cursor: pointer;
@@ -3211,7 +3211,7 @@ sv-popup {
3211
3211
  background-color: cadetblue;
3212
3212
  padding: 1px;
3213
3213
  font-family: var(--font-family, var(--font-family));
3214
- font-size: 14px;
3214
+ font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3215
3215
  font-style: normal;
3216
3216
  font-weight: 400;
3217
3217
  line-height: 1.42857143;
@@ -3230,7 +3230,7 @@ sv-popup {
3230
3230
  background-clip: padding-box;
3231
3231
  border: 1px solid #ccc;
3232
3232
  border: 1px solid rgba(0, 0, 0, 0.2);
3233
- border-radius: 6px;
3233
+ border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
3234
3234
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
3235
3235
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
3236
3236
  line-break: auto;
@@ -3240,10 +3240,10 @@ sv-popup {
3240
3240
  .sv_window_title {
3241
3241
  padding: 8px 14px;
3242
3242
  margin: 0;
3243
- font-size: 14px;
3243
+ font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3244
3244
  background-color: #f7f7f7;
3245
3245
  border-bottom: 1px solid #ebebeb;
3246
- border-radius: 5px 5px 0 0;
3246
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
3247
3247
  }
3248
3248
 
3249
3249
  .sv_window_content {
@@ -3257,7 +3257,7 @@ sv-popup {
3257
3257
  .sv_window_title a:link,
3258
3258
  .sv_window_title a:visited {
3259
3259
  text-decoration: none;
3260
- font-size: 14px;
3260
+ font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3261
3261
  font-style: normal;
3262
3262
  color: black;
3263
3263
  }
@@ -3278,8 +3278,8 @@ sv-popup {
3278
3278
 
3279
3279
  .sv-brand-info__text {
3280
3280
  font-weight: 600;
3281
- font-size: 16px;
3282
- line-height: 24px;
3281
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3282
+ line-height: calc(3 * var(--base-unit, 8px));
3283
3283
  color: #161616;
3284
3284
  }
3285
3285
 
@@ -3292,8 +3292,8 @@ sv-popup {
3292
3292
 
3293
3293
  .sv-brand-info__terms {
3294
3294
  font-weight: 400;
3295
- font-size: 12px;
3296
- line-height: 16px;
3295
+ font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3296
+ line-height: calc(2 * var(--base-unit, 8px));
3297
3297
  }
3298
3298
  .sv-brand-info__terms a {
3299
3299
  color: #909090;
@@ -3371,7 +3371,7 @@ sv-popup {
3371
3371
  justify-content: center;
3372
3372
  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
3373
3373
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3374
- font-size: calc(2 * var(--base-unit, 8px));
3374
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3375
3375
  border-radius: 100%;
3376
3376
  border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
3377
3377
  width: calc(5 * var(--base-unit, 8px));
@@ -3393,7 +3393,7 @@ sv-popup {
3393
3393
  text-overflow: ellipsis;
3394
3394
  white-space: nowrap;
3395
3395
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3396
- font-size: calc(2 * var(--base-unit, 8px));
3396
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3397
3397
  line-height: calc(3 * var(--base-unit, 8px));
3398
3398
  margin: 0 calc(2 * var(--base-unit, 8px));
3399
3399
  }
@@ -3516,7 +3516,7 @@ sv-popup {
3516
3516
 
3517
3517
  .sv-list__empty-text {
3518
3518
  line-height: calc(3 * var(--base-unit, 8px));
3519
- font-size: calc(2 * var(--base-unit, 8px));
3519
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3520
3520
  font-weight: 400;
3521
3521
  text-align: center;
3522
3522
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3541,7 +3541,7 @@ sv-popup {
3541
3541
  padding-inline-end: calc(8 * var(--base-unit, 8px));
3542
3542
  padding-inline-start: calc(2 * var(--base-unit, 8px));
3543
3543
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3544
- font-size: calc(2 * var(--base-unit, 8px));
3544
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3545
3545
  line-height: calc(3 * var(--base-unit, 8px));
3546
3546
  cursor: pointer;
3547
3547
  overflow: hidden;
@@ -3549,12 +3549,24 @@ sv-popup {
3549
3549
  white-space: nowrap;
3550
3550
  }
3551
3551
 
3552
- .sv-list__item.sv-list__item--focused,
3552
+ .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
3553
+ outline: none;
3554
+ }
3555
+ .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
3556
+ border: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-border-light, var(--border-light, #eaeaea));
3557
+ border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3558
+ padding-block: calc(0.75 * var(--base-unit, 8px));
3559
+ padding-inline-end: calc(7.75 * var(--base-unit, 8px));
3560
+ padding-inline-start: calc(1.75 * var(--base-unit, 8px));
3561
+ }
3562
+ .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
3563
+ margin-inline-start: calc(-0.25 * var(--base-unit, 8px));
3564
+ }
3565
+
3553
3566
  .sv-list__item:hover,
3554
3567
  .sv-list__item:focus {
3555
3568
  outline: none;
3556
3569
  }
3557
- .sv-list__item.sv-list__item--focused .sv-list__item-body,
3558
3570
  .sv-list__item:hover .sv-list__item-body,
3559
3571
  .sv-list__item:focus .sv-list__item-body {
3560
3572
  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
@@ -3665,7 +3677,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3665
3677
  box-sizing: border-box;
3666
3678
  width: 100%;
3667
3679
  outline: none;
3668
- font-size: 1em;
3680
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3669
3681
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3670
3682
  padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
3671
3683
  padding-inline-start: calc(7 * var(--base-unit, 8px));
@@ -3698,13 +3710,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3698
3710
  opacity: 0;
3699
3711
  padding: calc(3 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
3700
3712
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
3701
- border-radius: calc(1 * var(--base-unit, 8px));
3713
+ border-radius: calc(2 * var(--sjs-corner-radius, 4px));
3702
3714
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3703
3715
  min-width: calc(30 * var(--base-unit, 8px));
3704
3716
  text-align: center;
3705
3717
  z-index: 1600;
3706
3718
  font-family: var(--font-family, var(--font-family));
3707
- font-size: calc(2 * var(--base-unit, 8px));
3719
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3708
3720
  line-height: calc(3 * var(--base-unit, 8px));
3709
3721
  display: flex;
3710
3722
  flex-direction: row;
@@ -3750,13 +3762,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3750
3762
 
3751
3763
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
3752
3764
  font-weight: 600;
3753
- font-size: calc(2 * var(--base-unit, 8px));
3765
+ font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3754
3766
  line-height: calc(3 * var(--base-unit, 8px));
3755
3767
  height: calc(5 * var(--base-unit, 8px));
3756
3768
  color: #ffffff;
3757
3769
  background-color: var(--red, #e60a3e);
3758
3770
  border: calc(0.25 * var(--base-unit, 8px)) solid #ffffff;
3759
- border-radius: calc(0.75 * var(--base-unit, 8px));
3771
+ border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
3760
3772
  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
3761
3773
  display: flex;
3762
3774
  align-items: center;