survey-react 1.9.115 → 1.9.116

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 +119 -85
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +20 -11
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +11 -2
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +65 -34
  12. package/survey.react.js +136 -68
  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.115
2
+ * surveyjs - Survey JavaScript library v1.9.116
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
  */
@@ -810,8 +810,8 @@ sv-popup {
810
810
  }
811
811
  .sv-popup--dropdown-overlay .sv-list__input {
812
812
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
813
- font-size: var(--sjs-font-size, 16px);
814
- line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
813
+ font-size: max(16px, var(--sjs-font-size, 16px));
814
+ line-height: max(24px, 1.5 * (var(--sjs-font-size, 16px)));
815
815
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
816
816
  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(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
817
817
  }
@@ -1210,7 +1210,7 @@ sv-brand-info, .sv-brand-info {
1210
1210
  justify-content: center;
1211
1211
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
1212
1212
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1213
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1213
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1214
1214
  border-radius: 100%;
1215
1215
  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
1216
1216
  width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1222,8 +1222,8 @@ sv-brand-info, .sv-brand-info {
1222
1222
  }
1223
1223
  .sv-ranking-item__index.sv-ranking-item__index svg {
1224
1224
  fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1225
- width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1226
- height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
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
1227
  }
1228
1228
 
1229
1229
  .sv-ranking-item__text {
@@ -1232,8 +1232,8 @@ sv-brand-info, .sv-brand-info {
1232
1232
  text-overflow: ellipsis;
1233
1233
  white-space: nowrap;
1234
1234
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
1235
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1236
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
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)))));
1237
1237
  margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1238
1238
  }
1239
1239
 
@@ -1979,8 +1979,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1979
1979
  gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1980
1980
  justify-content: center;
1981
1981
  min-height: calc(24 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1982
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1983
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
1982
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
1983
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
1984
1984
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
1985
1985
  }
1986
1986
  .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -2116,11 +2116,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2116
2116
  width: 100%;
2117
2117
  box-sizing: border-box;
2118
2118
  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2119
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2119
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2120
2120
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
2121
2121
  font-weight: var(--sjs-font-editorfont-weight, 400);
2122
2122
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
2123
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2123
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2124
2124
  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
2125
2125
  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2126
2126
  border: none;
@@ -2218,7 +2218,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2218
2218
  .sd-input[type=range] {
2219
2219
  box-sizing: content-box;
2220
2220
  width: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2221
- height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2221
+ height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2222
2222
  }
2223
2223
 
2224
2224
  .sd-input[type=range]::-webkit-slider-runnable-track {
@@ -2339,8 +2339,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2339
2339
 
2340
2340
  .sjs_sp_placeholder {
2341
2341
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
2342
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2343
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2342
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2343
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2344
2344
  }
2345
2345
 
2346
2346
  .sjs_sp_container {
@@ -2362,7 +2362,6 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2362
2362
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
2363
2363
  }
2364
2364
 
2365
- .sd-signaturepad__canvas,
2366
2365
  .sd-signaturepad__background-image {
2367
2366
  position: absolute;
2368
2367
  top: 0;
@@ -2415,8 +2414,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2415
2414
  }
2416
2415
 
2417
2416
  .sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
2418
- width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2419
- height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2417
+ width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2418
+ height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2420
2419
  }
2421
2420
 
2422
2421
  .sd-matrixdynamic__btn {
@@ -2569,8 +2568,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2569
2568
 
2570
2569
  .sd-table__cell {
2571
2570
  font-weight: normal;
2572
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2573
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2571
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2572
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2574
2573
  padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2575
2574
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2576
2575
  text-align: center;
@@ -2619,8 +2618,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2619
2618
  }
2620
2619
 
2621
2620
  .sd-table__cell--header span {
2622
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2623
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2621
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2622
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
2624
2623
  font-weight: var(--sjs-font-questiontitle-weight, 600);
2625
2624
  }
2626
2625
 
@@ -2681,8 +2680,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2681
2680
  }
2682
2681
  .sd-table__cell--detail-button svg {
2683
2682
  display: block;
2684
- width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2685
- height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2683
+ width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2684
+ height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
2686
2685
  fill: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
2687
2686
  }
2688
2687
  .sd-table__cell--detail-button:hover {
@@ -3066,7 +3065,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3066
3065
  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3067
3066
  border: none;
3068
3067
  flex-shrink: 0;
3069
- margin-top: calc((1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
3068
+ 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);
3070
3069
  }
3071
3070
 
3072
3071
  .sd-item--checked .sd-item__decorator {
@@ -3092,8 +3091,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3092
3091
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3093
3092
  font-style: normal;
3094
3093
  font-weight: var(--sjs-font-editorfont-weight, 400);
3095
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3096
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3094
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3095
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3097
3096
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3098
3097
  white-space: normal;
3099
3098
  word-break: break-word;
@@ -3537,8 +3536,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3537
3536
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3538
3537
  font-weight: var(--sjs-font-editorfont-weight, 400);
3539
3538
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
3540
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3541
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3539
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3540
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3542
3541
  display: inline-block;
3543
3542
  }
3544
3543
  .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
@@ -3661,15 +3660,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3661
3660
 
3662
3661
  .sd-dropdown__value {
3663
3662
  width: 100%;
3664
- min-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3663
+ min-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3665
3664
  overflow: hidden;
3666
3665
  text-overflow: ellipsis;
3667
3666
  white-space: nowrap;
3668
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3667
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3669
3668
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3670
3669
  font-weight: var(--sjs-font-editorfont-weight, 400);
3671
3670
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3672
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3671
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3673
3672
  position: relative;
3674
3673
  }
3675
3674
 
@@ -3695,8 +3694,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3695
3694
 
3696
3695
  .sd-dropdown_chevron-button-svg,
3697
3696
  .sd-dropdown_clean-button-svg {
3698
- width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3699
- height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3697
+ width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3698
+ height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3700
3699
  }
3701
3700
 
3702
3701
  .sd-input.sd-dropdown:focus-within {
@@ -3719,8 +3718,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3719
3718
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3720
3719
  font-weight: var(--sjs-font-editorfont-weight, 400);
3721
3720
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3722
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3723
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3721
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3722
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3724
3723
  background-color: transparent;
3725
3724
  overflow: hidden;
3726
3725
  text-overflow: ellipsis;
@@ -3767,8 +3766,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3767
3766
  }
3768
3767
 
3769
3768
  .sv-dropdown-popup .sd-list__item-body {
3770
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3771
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3769
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3770
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3772
3771
  font-weight: var(--sjs-font-editorfont-weight, 400);
3773
3772
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
3774
3773
  padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3788,8 +3787,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3788
3787
  }
3789
3788
 
3790
3789
  .sd-tagbox_clean-button {
3791
- height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3792
- padding: calc(0.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3790
+ height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3791
+ padding: calc(0.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3793
3792
  margin: auto 0;
3794
3793
  }
3795
3794
 
@@ -3831,9 +3830,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3831
3830
 
3832
3831
  .sd-tagbox-item_clean-button-svg {
3833
3832
  display: block;
3834
- padding: calc(0.25 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3835
- width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3836
- height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3833
+ padding: calc(0.25 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3834
+ width: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3835
+ height: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3837
3836
  }
3838
3837
 
3839
3838
  .sd-tagbox-item_clean-button-svg:hover {
@@ -3898,14 +3897,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3898
3897
  }
3899
3898
 
3900
3899
  .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix {
3901
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3900
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3902
3901
  height: 100%;
3903
3902
  display: flex;
3904
3903
  align-items: center;
3905
3904
  }
3906
3905
 
3907
3906
  .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix {
3908
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3907
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3909
3908
  height: 100%;
3910
3909
  display: flex;
3911
3910
  align-items: center;
@@ -3962,8 +3961,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3962
3961
 
3963
3962
  .sd-imagepicker__check-icon {
3964
3963
  display: block;
3965
- width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3966
- height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3964
+ width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3965
+ height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
3967
3966
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3968
3967
  }
3969
3968
 
@@ -3996,8 +3995,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3996
3995
  }
3997
3996
 
3998
3997
  .sd-imagepicker__text {
3999
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4000
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3998
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
3999
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4001
4000
  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4002
4001
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4003
4002
  }
@@ -4156,10 +4155,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4156
4155
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4157
4156
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4158
4157
  border: none;
4159
- border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4158
+ border-radius: var(--sjs-corner-radius, 4px);
4160
4159
  cursor: pointer;
4161
4160
  user-select: none;
4162
4161
  outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
4162
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4163
+ font-weight: 600;
4164
+ font-style: normal;
4165
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4166
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
4167
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
4163
4168
  }
4164
4169
  .sd-html button:hover {
4165
4170
  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
@@ -4172,12 +4177,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4172
4177
  align-items: center;
4173
4178
  flex-grow: 1;
4174
4179
  justify-content: center;
4175
- color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4176
- font-weight: 600;
4177
- font-style: normal;
4178
- font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4179
- font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
4180
- line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
4181
4180
  }
4182
4181
 
4183
4182
  .sd-expression {
@@ -4253,9 +4252,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4253
4252
  display: block;
4254
4253
  font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
4255
4254
  font-weight: var(--sjs-font-editorfont-weight, 400);
4256
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4255
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4257
4256
  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
4258
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
4257
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4259
4258
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4260
4259
  }
4261
4260
 
@@ -4506,8 +4505,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4506
4505
  background-color: transparent;
4507
4506
  cursor: pointer;
4508
4507
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
4509
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4510
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
4508
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4509
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4511
4510
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
4512
4511
  overflow-x: hidden;
4513
4512
  white-space: nowrap;
@@ -4639,8 +4638,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4639
4638
  word-break: break-word;
4640
4639
  white-space: normal;
4641
4640
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
4642
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4643
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
4641
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4642
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
4644
4643
  }
4645
4644
 
4646
4645
  .sd-root-modern--mobile .sd-file__decorator {
@@ -4692,7 +4691,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4692
4691
  }
4693
4692
 
4694
4693
  .sd-file--chose-btn--as .sd-file--answered .sd-file__actions-container {
4695
- inset-inline-end: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))) + 5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4694
+ 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))));
4696
4695
  }
4697
4696
 
4698
4697
  .sd-file__list {
@@ -5086,6 +5085,20 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5086
5085
  box-sizing: border-box;
5087
5086
  }
5088
5087
 
5088
+ .sd-body--empty,
5089
+ .sd-body--loading {
5090
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5091
+ font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
5092
+ text-decoration: var(--sjs-article-font-default-textDecoration, "none");
5093
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5094
+ font-weight: var(--sjs-article-font-default-fontWeight, 400);
5095
+ font-style: var(--sjs-article-font-default-fontStyle, "normal");
5096
+ font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
5097
+ letter-spacing: var(--sjs-article-font-default-letterSpacing, 0);
5098
+ line-height: var(--sjs-article-font-default-lineHeight, 28px);
5099
+ text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
5100
+ text-transform: var(--sjs-article-font-default-textCase, "none");
5101
+ }
5089
5102
  .sd-body--empty h1,
5090
5103
  .sd-body--loading h1 {
5091
5104
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
@@ -5180,10 +5193,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5180
5193
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
5181
5194
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
5182
5195
  border: none;
5183
- border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5196
+ border-radius: var(--sjs-corner-radius, 4px);
5184
5197
  cursor: pointer;
5185
5198
  user-select: none;
5186
5199
  outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
5200
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5201
+ font-weight: 600;
5202
+ font-style: normal;
5203
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5204
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5205
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5187
5206
  }
5188
5207
  .sd-body--empty button:hover,
5189
5208
  .sd-body--loading button:hover {
@@ -5199,12 +5218,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5199
5218
  align-items: center;
5200
5219
  flex-grow: 1;
5201
5220
  justify-content: center;
5202
- color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5203
- font-weight: 600;
5204
- font-style: normal;
5205
- font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5206
- font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5207
- line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5208
5221
  }
5209
5222
 
5210
5223
  .sd-root_background-image {
@@ -5261,8 +5274,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5261
5274
  line-height: 0;
5262
5275
  }
5263
5276
  .sd-multipletext__item-title span {
5264
- font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
5265
- line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
5277
+ font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
5278
+ line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
5266
5279
  }
5267
5280
 
5268
5281
  .sd-multipletext__item-title {
@@ -5437,8 +5450,8 @@ svg.sd-action--icon {
5437
5450
  }
5438
5451
  .sd-context-btn svg {
5439
5452
  display: block;
5440
- width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
5441
- height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
5453
+ width: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
5454
+ height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
5442
5455
  }
5443
5456
  .sd-context-btn use {
5444
5457
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -5457,14 +5470,26 @@ svg.sd-action--icon {
5457
5470
  opacity: 0.25;
5458
5471
  }
5459
5472
 
5460
- .sd-completedpage {
5473
+ .sd-completedpage,
5474
+ .sd-completed-before-page {
5475
+ align-items: center;
5461
5476
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5462
5477
  font-weight: bold;
5463
5478
  box-sizing: border-box;
5464
5479
  text-align: center;
5465
5480
  height: auto;
5481
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5482
+ font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
5483
+ text-decoration: var(--sjs-article-font-default-textDecoration, "none");
5484
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5485
+ font-weight: var(--sjs-article-font-default-fontWeight, 400);
5486
+ font-style: var(--sjs-article-font-default-fontStyle, "normal");
5487
+ font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
5488
+ letter-spacing: var(--sjs-article-font-default-letterSpacing, 0);
5489
+ line-height: var(--sjs-article-font-default-lineHeight, 28px);
5490
+ text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
5491
+ text-transform: var(--sjs-article-font-default-textCase, "none");
5466
5492
  }
5467
-
5468
5493
  .sd-completedpage h1,
5469
5494
  .sd-completed-before-page h1 {
5470
5495
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
@@ -5559,10 +5584,16 @@ svg.sd-action--icon {
5559
5584
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
5560
5585
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
5561
5586
  border: none;
5562
- border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5587
+ border-radius: var(--sjs-corner-radius, 4px);
5563
5588
  cursor: pointer;
5564
5589
  user-select: none;
5565
5590
  outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
5591
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5592
+ font-weight: 600;
5593
+ font-style: normal;
5594
+ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5595
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5596
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5566
5597
  }
5567
5598
  .sd-completedpage button:hover,
5568
5599
  .sd-completed-before-page button:hover {
@@ -5578,12 +5609,6 @@ svg.sd-action--icon {
5578
5609
  align-items: center;
5579
5610
  flex-grow: 1;
5580
5611
  justify-content: center;
5581
- color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5582
- font-weight: 600;
5583
- font-style: normal;
5584
- font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
5585
- font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5586
- line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5587
5612
  }
5588
5613
 
5589
5614
  .sd-completedpage:before,
@@ -5993,6 +6018,7 @@ sv-components-container,
5993
6018
 
5994
6019
  .sjs_sp_container {
5995
6020
  position: relative;
6021
+ max-width: 100%;
5996
6022
  }
5997
6023
 
5998
6024
  .sjs_sp_controls {
@@ -6021,12 +6047,20 @@ sv-components-container,
6021
6047
  height: 100%;
6022
6048
  }
6023
6049
 
6024
- .sjs_sp_canvas,
6050
+ .sjs_sp_canvas {
6051
+ position: relative;
6052
+ max-width: 100%;
6053
+ display: block;
6054
+ }
6055
+
6025
6056
  .sjs_sp__background-image {
6026
6057
  position: absolute;
6027
6058
  top: 0;
6028
6059
  left: 0;
6029
6060
  object-fit: cover;
6061
+ max-width: 100%;
6062
+ width: 100%;
6063
+ height: 100%;
6030
6064
  }
6031
6065
 
6032
6066
  .sd-root-modern {
@@ -6039,6 +6073,7 @@ sv-components-container,
6039
6073
  --sd-base-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
6040
6074
  --sd-base-vertical-padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
6041
6075
  --sd-page-vertical-padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
6076
+ --sjs-mobile-font-editorfont-size: Max(16px, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
6042
6077
  }
6043
6078
 
6044
6079
  .sd-root-modern.sd-root-modern--mobile .sd-element__num {
@@ -6310,7 +6345,6 @@ body {
6310
6345
  position: relative;
6311
6346
  }
6312
6347
  .sd-root-modern form {
6313
- z-index: 1;
6314
6348
  position: relative;
6315
6349
  }
6316
6350
  .sd-root-modern * {