survey-react 1.9.119 → 1.9.121

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 +113 -62
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +11 -6
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +1 -1
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +1 -1
  11. package/survey.react.d.ts +281 -211
  12. package/survey.react.js +654 -285
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.119
2
+ * surveyjs - Survey JavaScript library v1.9.121
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
  */
@@ -508,6 +508,7 @@ sv-popup {
508
508
 
509
509
  .sv-popup--modal > .sv-popup__container {
510
510
  position: static;
511
+ display: flex;
511
512
  }
512
513
 
513
514
  .sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
@@ -1204,13 +1205,14 @@ sv-brand-info, .sv-brand-info {
1204
1205
  }
1205
1206
 
1206
1207
  .sv-ranking-item__index.sv-ranking-item__index {
1208
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1207
1209
  display: flex;
1208
1210
  flex-shrink: 0;
1209
1211
  align-items: center;
1210
1212
  justify-content: center;
1211
1213
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
1212
1214
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1213
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1215
+ font-size: var(--sjs-internal-font-editorfont-size);
1214
1216
  border-radius: 100%;
1215
1217
  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
1216
1218
  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1222,18 +1224,19 @@ sv-brand-info, .sv-brand-info {
1222
1224
  }
1223
1225
  .sv-ranking-item__index.sv-ranking-item__index svg {
1224
1226
  fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1225
- width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1226
- height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1227
+ width: var(--sjs-internal-font-editorfont-size);
1228
+ height: var(--sjs-internal-font-editorfont-size);
1227
1229
  }
1228
1230
 
1229
1231
  .sv-ranking-item__text {
1232
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1230
1233
  display: inline-block;
1231
1234
  overflow: hidden;
1232
1235
  text-overflow: ellipsis;
1233
1236
  white-space: nowrap;
1234
1237
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1235
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1236
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
1238
+ font-size: var(--sjs-internal-font-editorfont-size);
1239
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
1237
1240
  margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1238
1241
  }
1239
1242
 
@@ -1962,6 +1965,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1962
1965
  }
1963
1966
 
1964
1967
  .sd-question__placeholder {
1968
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1965
1969
  display: flex;
1966
1970
  flex-direction: column;
1967
1971
  align-items: center;
@@ -1969,8 +1973,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1969
1973
  gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1970
1974
  justify-content: center;
1971
1975
  min-height: calc(24 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1972
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1973
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
1976
+ font-size: var(--sjs-internal-font-editorfont-size);
1977
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
1974
1978
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
1975
1979
  }
1976
1980
  .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -2114,6 +2118,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2114
2118
  }
2115
2119
 
2116
2120
  .sd-input {
2121
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2117
2122
  -webkit-appearance: none;
2118
2123
  -moz-appearance: none;
2119
2124
  appearance: none;
@@ -2121,11 +2126,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2121
2126
  width: 100%;
2122
2127
  box-sizing: border-box;
2123
2128
  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2124
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2129
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
2125
2130
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2126
2131
  font-weight: var(--sjs-font-editorfont-weight, 400);
2127
2132
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
2128
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2133
+ font-size: var(--sjs-internal-font-editorfont-size);
2129
2134
  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
2130
2135
  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2131
2136
  border: none;
@@ -2221,9 +2226,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2221
2226
  .sd-input[type=email],
2222
2227
  .sd-input[type=color],
2223
2228
  .sd-input[type=range] {
2229
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2224
2230
  box-sizing: content-box;
2225
2231
  width: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2226
- height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2232
+ height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
2227
2233
  }
2228
2234
 
2229
2235
  .sd-input[type=range]::-webkit-slider-runnable-track {
@@ -2354,9 +2360,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2354
2360
  }
2355
2361
 
2356
2362
  .sjs_sp_placeholder {
2363
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2357
2364
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
2358
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2359
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2365
+ font-size: var(--sjs-internal-font-editorfont-size);
2366
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
2360
2367
  }
2361
2368
 
2362
2369
  .sjs_sp_container {
@@ -2370,10 +2377,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2370
2377
  bottom: auto;
2371
2378
  }
2372
2379
 
2373
- .sd-question--signature:not(.sd-question--answered) .sd-signaturepad__controls {
2374
- display: none;
2375
- }
2376
-
2377
2380
  .sd-question--signature.sd-question--error .sjs_sp_placeholder {
2378
2381
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
2379
2382
  }
@@ -2385,6 +2388,19 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2385
2388
  object-fit: cover;
2386
2389
  }
2387
2390
 
2391
+ .sd-signaturepad__loading-indicator {
2392
+ width: 100%;
2393
+ height: 100%;
2394
+ position: absolute;
2395
+ left: 0;
2396
+ top: 0;
2397
+ }
2398
+ .sd-signaturepad__loading-indicator .sd-loading-indicator {
2399
+ position: absolute;
2400
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
2401
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
2402
+ }
2403
+
2388
2404
  .sd-checkbox__decorator {
2389
2405
  border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
2390
2406
  }
@@ -2430,8 +2446,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2430
2446
  }
2431
2447
 
2432
2448
  .sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
2433
- width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2434
- height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2449
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2450
+ width: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
2451
+ height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
2435
2452
  }
2436
2453
 
2437
2454
  .sd-matrixdynamic__btn {
@@ -2583,9 +2600,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2583
2600
  }
2584
2601
 
2585
2602
  .sd-table__cell {
2603
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2586
2604
  font-weight: normal;
2587
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2588
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2605
+ font-size: var(--sjs-internal-font-editorfont-size);
2606
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
2589
2607
  padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2590
2608
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2591
2609
  text-align: center;
@@ -2634,8 +2652,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2634
2652
  }
2635
2653
 
2636
2654
  .sd-table__cell--header span {
2637
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2638
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2655
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2656
+ font-size: var(--sjs-internal-font-editorfont-size);
2657
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
2639
2658
  font-weight: var(--sjs-font-questiontitle-weight, 600);
2640
2659
  }
2641
2660
 
@@ -2704,9 +2723,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2704
2723
  padding: var(--sjs-base-unit, var(--base-unit, 8px));
2705
2724
  }
2706
2725
  .sd-table__cell--detail-button svg {
2726
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2707
2727
  display: block;
2708
- width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2709
- height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2728
+ width: var(--sjs-internal-font-editorfont-size);
2729
+ height: var(--sjs-internal-font-editorfont-size);
2710
2730
  fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
2711
2731
  }
2712
2732
  .sd-table__cell--detail-button:hover {
@@ -2992,6 +3012,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2992
3012
  gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2993
3013
  box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
2994
3014
  }
3015
+ .sd-title.sd-container-modern__title .sd-logo.sv-logo--right {
3016
+ margin-left: auto;
3017
+ }
2995
3018
  .sd-title.sd-container-modern__title .sd-logo__image {
2996
3019
  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2997
3020
  }
@@ -3095,6 +3118,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3095
3118
 
3096
3119
  .sd-item--disabled.sd-item--disabled .sd-item__decorator,
3097
3120
  .sd-item__decorator {
3121
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3098
3122
  display: flex;
3099
3123
  align-items: center;
3100
3124
  justify-content: center;
@@ -3105,7 +3129,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3105
3129
  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3106
3130
  border: none;
3107
3131
  flex-shrink: 0;
3108
- margin-top: calc((1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
3132
+ margin-top: calc((1.5 * (var(--sjs-internal-font-editorfont-size)) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
3109
3133
  }
3110
3134
 
3111
3135
  .sd-item--checked .sd-item__decorator {
@@ -3128,11 +3152,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3128
3152
  }
3129
3153
 
3130
3154
  .sd-item__control-label {
3155
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3131
3156
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3132
3157
  font-style: normal;
3133
3158
  font-weight: var(--sjs-font-editorfont-weight, 400);
3134
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3135
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3159
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3160
+ font-size: var(--sjs-internal-font-editorfont-size);
3136
3161
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3137
3162
  white-space: normal;
3138
3163
  word-break: break-word;
@@ -3573,11 +3598,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3573
3598
  }
3574
3599
 
3575
3600
  .sd-rating__item-text.sd-rating__item-text {
3601
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3576
3602
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3577
3603
  font-weight: var(--sjs-font-editorfont-weight, 400);
3578
3604
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3579
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3580
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3605
+ font-size: var(--sjs-internal-font-editorfont-size);
3606
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3581
3607
  display: inline-block;
3582
3608
  border: 2px solid transparent;
3583
3609
  box-sizing: border-box;
@@ -3737,16 +3763,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3737
3763
  }
3738
3764
 
3739
3765
  .sd-dropdown__value {
3766
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3740
3767
  width: 100%;
3741
- min-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3768
+ min-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3742
3769
  overflow: hidden;
3743
3770
  text-overflow: ellipsis;
3744
3771
  white-space: nowrap;
3745
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3772
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3746
3773
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3747
3774
  font-weight: var(--sjs-font-editorfont-weight, 400);
3748
3775
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3749
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3776
+ font-size: var(--sjs-internal-font-editorfont-size);
3750
3777
  position: relative;
3751
3778
  }
3752
3779
 
@@ -3772,8 +3799,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3772
3799
 
3773
3800
  .sd-dropdown_chevron-button-svg,
3774
3801
  .sd-dropdown_clean-button-svg {
3775
- width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3776
- height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3802
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3803
+ width: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3804
+ height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3777
3805
  }
3778
3806
 
3779
3807
  .sd-input.sd-dropdown:focus-within {
@@ -3785,6 +3813,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3785
3813
  }
3786
3814
 
3787
3815
  .sd-dropdown__filter-string-input {
3816
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3788
3817
  position: absolute;
3789
3818
  left: 0;
3790
3819
  top: 0;
@@ -3797,8 +3826,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3797
3826
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3798
3827
  font-weight: var(--sjs-font-editorfont-weight, 400);
3799
3828
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3800
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3801
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3829
+ font-size: var(--sjs-internal-font-editorfont-size);
3830
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3802
3831
  background-color: transparent;
3803
3832
  overflow: hidden;
3804
3833
  text-overflow: ellipsis;
@@ -3844,8 +3873,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3844
3873
  }
3845
3874
 
3846
3875
  .sv-dropdown-popup .sd-list__item-body {
3847
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3848
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3876
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3877
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3878
+ font-size: var(--sjs-internal-font-editorfont-size);
3849
3879
  font-weight: var(--sjs-font-editorfont-weight, 400);
3850
3880
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3851
3881
  padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3865,8 +3895,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3865
3895
  }
3866
3896
 
3867
3897
  .sd-tagbox_clean-button {
3868
- height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3869
- padding: calc(0.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3898
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3899
+ height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3900
+ padding: calc(0.5 * (var(--sjs-internal-font-editorfont-size)));
3870
3901
  margin: auto 0;
3871
3902
  }
3872
3903
 
@@ -3907,10 +3938,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3907
3938
  }
3908
3939
 
3909
3940
  .sd-tagbox-item_clean-button-svg {
3941
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3910
3942
  display: block;
3911
- padding: calc(0.25 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3912
- width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3913
- height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3943
+ padding: calc(0.25 * (var(--sjs-internal-font-editorfont-size)));
3944
+ width: var(--sjs-internal-font-editorfont-size);
3945
+ height: var(--sjs-internal-font-editorfont-size);
3914
3946
  }
3915
3947
 
3916
3948
  .sd-tagbox-item_clean-button-svg:hover {
@@ -3975,14 +4007,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3975
4007
  }
3976
4008
 
3977
4009
  .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix {
3978
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4010
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4011
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3979
4012
  height: 100%;
3980
4013
  display: flex;
3981
4014
  align-items: center;
3982
4015
  }
3983
4016
 
3984
4017
  .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix {
3985
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4018
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4019
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
3986
4020
  height: 100%;
3987
4021
  display: flex;
3988
4022
  align-items: center;
@@ -4021,6 +4055,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4021
4055
  align-items: center;
4022
4056
  }
4023
4057
 
4058
+ .sd-imagepicker__label {
4059
+ position: relative;
4060
+ }
4061
+ .sd-imagepicker__label .sd-visuallyhidden {
4062
+ height: 100%;
4063
+ margin: 0;
4064
+ }
4065
+
4024
4066
  .sd-imagepicker__image-container {
4025
4067
  position: relative;
4026
4068
  }
@@ -4038,9 +4080,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4038
4080
  }
4039
4081
 
4040
4082
  .sd-imagepicker__check-icon {
4083
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4041
4084
  display: block;
4042
- width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4043
- height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4085
+ width: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
4086
+ height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
4044
4087
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4045
4088
  }
4046
4089
 
@@ -4073,8 +4116,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4073
4116
  }
4074
4117
 
4075
4118
  .sd-imagepicker__text {
4076
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4077
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4119
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4120
+ font-size: var(--sjs-internal-font-editorfont-size);
4121
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
4078
4122
  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4079
4123
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4080
4124
  }
@@ -4327,12 +4371,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4327
4371
 
4328
4372
  .sd-boolean__thumb,
4329
4373
  .sd-boolean__label {
4374
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4330
4375
  display: block;
4331
4376
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
4332
4377
  font-weight: var(--sjs-font-editorfont-weight, 400);
4333
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4378
+ font-size: var(--sjs-internal-font-editorfont-size);
4334
4379
  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
4335
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4380
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
4336
4381
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4337
4382
  }
4338
4383
 
@@ -4572,6 +4617,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4572
4617
  }
4573
4618
 
4574
4619
  .sd-tab-item {
4620
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4575
4621
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4576
4622
  display: flex;
4577
4623
  -webkit-appearance: none;
@@ -4583,8 +4629,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4583
4629
  background-color: transparent;
4584
4630
  cursor: pointer;
4585
4631
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4586
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4587
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4632
+ font-size: var(--sjs-internal-font-editorfont-size);
4633
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
4588
4634
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
4589
4635
  overflow-x: hidden;
4590
4636
  white-space: nowrap;
@@ -4712,12 +4758,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4712
4758
  }
4713
4759
 
4714
4760
  .sd-file__drag-area-placeholder {
4761
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4715
4762
  text-align: center;
4716
4763
  word-break: break-word;
4717
4764
  white-space: normal;
4718
4765
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
4719
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4720
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4766
+ font-size: var(--sjs-internal-font-editorfont-size);
4767
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
4721
4768
  }
4722
4769
 
4723
4770
  .sd-root-modern--mobile .sd-file__decorator {
@@ -4769,7 +4816,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4769
4816
  }
4770
4817
 
4771
4818
  .sd-file--chose-btn--as .sd-file--answered .sd-file__actions-container {
4772
- inset-inline-end: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))) + 5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4819
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4820
+ inset-inline-end: calc(1.5 * (var(--sjs-internal-font-editorfont-size)) + 5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4773
4821
  }
4774
4822
 
4775
4823
  .sd-file__list {
@@ -5040,7 +5088,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5040
5088
  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
5041
5089
  }
5042
5090
 
5043
- .sd-btn:focus {
5091
+ .sd-btn:focus-visible {
5044
5092
  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
5045
5093
  }
5046
5094
 
@@ -5082,6 +5130,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5082
5130
 
5083
5131
  .sd-body {
5084
5132
  width: 100%;
5133
+ box-sizing: border-box;
5085
5134
  }
5086
5135
  .sd-body .sd-body__page {
5087
5136
  min-width: min(100%, 300px);
@@ -5352,8 +5401,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5352
5401
  line-height: 0;
5353
5402
  }
5354
5403
  .sd-multipletext__item-title span {
5355
- font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
5356
- line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
5404
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
5405
+ font-size: var(--sjs-internal-font-editorfont-size);
5406
+ line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
5357
5407
  }
5358
5408
 
5359
5409
  .sd-multipletext__item-title {
@@ -5527,9 +5577,10 @@ svg.sd-action--icon {
5527
5577
  margin: 0;
5528
5578
  }
5529
5579
  .sd-context-btn svg {
5580
+ --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
5530
5581
  display: block;
5531
- width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
5532
- height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
5582
+ width: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
5583
+ height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
5533
5584
  }
5534
5585
  .sd-context-btn use {
5535
5586
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));