survey-react 1.9.100 → 1.9.102

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.100
+ * surveyjs - Survey JavaScript library v1.9.102
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -470,6 +470,7 @@ sv-popup {
 
 .sv-popup__container {
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   position: absolute;
   padding: 0;
 }
@@ -477,7 +478,7 @@ sv-popup {
 .sv-popup__shadow {
   width: 100%;
   height: 100%;
-  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
 }
 
 .sv-popup__body-content {
@@ -1122,8 +1123,8 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -1388,6 +1389,7 @@ sv-popup {
 
 .sv-list__item-icon {
   float: left;
+  flex-shrink: 0;
   width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
@@ -1863,7 +1865,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__erbox--above-question {
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
   margin-bottom: calc(var(--sd-base-vertical-padding) - var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -1871,6 +1872,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sd-element--with-frame > .sd-question__erbox--above-question {
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
+}
+
 .sd-element--with-frame > .sd-question__erbox--below-question {
   position: relative;
   margin-top: 0;
@@ -1990,8 +1995,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   justify-content: center;
   min-height: calc(24 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -2008,7 +2013,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-scrollable-container:not(.sd-scrollable-container--compact) {
   width: max-content;
-  overflow-x: hidden;
+  overflow: visible;
   max-width: 100%;
 }
 
@@ -2217,6 +2222,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sjs_sp_placeholder {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 
 .sjs_sp_container {
@@ -2366,13 +2373,30 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-table__cell {
   font-weight: normal;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   text-align: center;
 }
 
+.sd-table__cell--error {
+  padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-table__cell--error .sd-question__erbox--outside-question {
+  margin: 0;
+}
+
+.sd-table__cell--error-top {
+  vertical-align: bottom;
+  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.sd-table__cell--error-bottom {
+  vertical-align: top;
+  padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-table__cell--item .sd-selectbase__item {
   text-align: center;
 }
@@ -2388,6 +2412,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 1;
 }
 
+.sd-table__cell--header .sv-vue-title-additional-div,
+.sd-table__cell--header {
+  font-size: 0;
+  line-height: 0;
+}
+
+.sd-table__cell--header span {
+  font-size: calc(1 * var(--sjs-font-size, 16px));
+  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+}
+
 .sd-table__cell--header {
   font-weight: 600;
   vertical-align: top;
@@ -2724,6 +2759,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-root-modern .sd-container-modern__title .sd-description {
   margin: 0;
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sd-title .sv-title-actions {
@@ -2756,13 +2792,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-style: normal;
   font-family: var(--sjs-font-questiondescription-family, var(--font-family));
   font-weight: var(--sjs-font-questiondescription-weight, 400);
-  color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   font-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   line-height: calc(1.5 * var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   white-space: normal;
   word-break: break-word;
 }
 
+.sd-description.sd-question__description--under-input {
+  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-element__header .sd-description {
   margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
@@ -2808,7 +2848,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-item__control-label {
   font-family: var(--sjs-font-editorfont-family, var(--font-family));
   font-style: normal;
-  font-weight: normal;
+  font-weight: var(--sjs-font-editorfont-weight, 400);
   line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
@@ -2988,9 +3028,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-rating.sd-rating--wrappable fieldset {
   flex-wrap: wrap;
 }
-.sd-rating.sd-scrollable-container:not(.sd-scrollable-container--compact) {
-  overflow: visible;
-}
 
 .sd-rating--small {
   min-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -3003,7 +3040,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-rating__item {
   position: relative;
-  background: transparent;
+  background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   white-space: nowrap;
@@ -3046,6 +3083,8 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-rating__item.sd-rating__item--selected.sd-rating__item--disabled {
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
+  background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
+  border-color: transparent;
 }
 
 .sd-question--disabled .sd-rating__item-text {
@@ -3470,6 +3509,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sv-tagbox__item {
   position: relative;
   display: flex;
+  align-items: center;
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
@@ -3666,8 +3706,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__text {
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
@@ -3769,11 +3809,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   }
 }
 
-.sd-boolean-root {
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
-  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-
 .sd-boolean {
   display: flex;
   width: max-content;
@@ -3781,8 +3816,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
-  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+}
+.sd-boolean.sd-boolean--allowhover:focus-within {
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-boolean__thumb,
@@ -3809,8 +3847,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
-.sd-boolean__control:focus ~ .sd-boolean__switch {
-  box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+.sd-boolean.sd-boolean--checked .sd-boolean__label--true,
+.sd-boolean:not(.sd-boolean--checked):not(sd-boolean--indeterminate) .sd-boolean__label--false {
+  color: transparent;
+  transition-duration: 0.15s;
+  transition-property: color;
+  transition-timing-function: linear;
 }
 
 .sd-boolean.sd-boolean--indeterminate .sd-boolean__switch {
@@ -3950,7 +3992,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-paneldynamic__progress-text {
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin: 0;
   margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -4038,7 +4081,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-color: transparent;
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   overflow-x: hidden;
   white-space: nowrap;
@@ -4160,6 +4204,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   word-break: break-word;
   white-space: normal;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
 }
 
 .sd-file__choose-btn--text {
@@ -4345,6 +4391,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-body__navigation .sd-btn {
   padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+}
+
+.sd-root--compact .sd-body__navigation .sd-btn:not(.sd-btn--action) {
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
+.sd-root--compact .sd-body__navigation .sd-btn:not(.sd-btn--action):hover {
+  background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
 }
 
 .sd-root-modern--mobile .sd-body__navigation .sv-action:not(.sv-action--hidden),
@@ -4473,6 +4528,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-root_background-image {
+  background-position-x: center;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -4567,8 +4623,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-weight: 600;
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
-  font-size: calc(1 * var(--sjs-font-size, 16px));
-  line-height: calc(1.5 * var(--sjs-font-size, 16px));
+  font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
   outline: none;
 }
 
@@ -5071,10 +5127,14 @@ sv-components-container,
   padding-bottom: 0;
   text-align: left;
 }
-.sd-root-modern.sd-root-modern--mobile .sd-table__cell:not(.sd-matrix__cell):not(:first-of-type) {
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell {
   margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sd-root-modern.sd-root-modern--mobile .sd-table__cell:not(.sd-matrix__cell):not(.sd-table__cell--actions):not(.sd-table__cell--row-text)::before {
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell:first-of-type,
+.sd-root-modern.sd-root-modern--mobile .sd-matrix__cell {
+  margin-top: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell::before {
   padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   content: attr(data-responsive-title);
@@ -5082,6 +5142,12 @@ sv-components-container,
   display: block;
   text-align: left;
 }
+.sd-root-modern.sd-root-modern--mobile .sd-matrix__cell::before,
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--actions::before,
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text::before,
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--error::before {
+  content: none;
+}
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions {
   width: auto;
 }
@@ -5117,6 +5183,19 @@ sv-components-container,
 .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:last-child:after {
   content: none;
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--error-top {
+  margin-top: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top:first-of-type ~ .sd-table__cell:nth-of-type(2) {
+  margin-top: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top .sd-question__erbox {
+  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top:first-of-type .sd-question__erbox {
+  margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
 .sd-root-modern.sd-root-modern--mobile .sv-ranking-item__icon-container {
   margin-left: 0;
   margin-right: 0;