survey-react 1.9.117 → 1.9.119

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.117
+ * surveyjs - Survey JavaScript library v1.9.119
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1676,11 +1676,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 1;
 }
 
+.sv-save-data_root.sv-save-data_root--with-buttons {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sv-save-data_root.sv-save-data_error {
   background-color: var(--sjs-special-red, var(--red, #e60a3e));
   color: var(--sjs-general-backcolor, var(--background, #fff));
   font-weight: 600;
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -1837,6 +1840,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-bottom: var(--sd-base-padding);
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+  display: flex;
+  flex-direction: column;
 }
 
 .sd-element--with-frame.sd-element--compact {
@@ -1850,26 +1855,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
 }
 
-.sd-question__erbox {
-  display: block;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  border-radius: var(--sjs-corner-radius, 4px);
-  line-height: var(--sjs-font-size, 16px);
-  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
-  text-align: left;
-  color: var(--sjs-special-red, var(--red, #e60a3e));
-  font-weight: 600;
-  white-space: normal;
-}
-
-.sd-question__erbox--outside-question {
-  width: 100%;
-  color: var(--sjs-special-red, var(--red, #e60a3e));
-  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
-  box-sizing: border-box;
-}
-
-.sd-question__erbox--above-question {
+.sd-element__erbox--above-element {
   margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
@@ -1886,13 +1872,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin-top: calc(0.25 * var(--sd-base-vertical-padding) + 0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
-.sd-element--with-frame > .sd-question__erbox--above-question {
+.sd-element--with-frame > .sd-element__erbox--above-element {
   margin-bottom: var(--sd-base-padding);
   border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
 }
 
 .sd-element--with-frame > .sd-question__erbox--below-question {
-  margin-top: var(--sd-base-padding);
+  margin-top: auto;
   border-radius: 0 0 var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px);
 }
 
@@ -1926,7 +1912,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element--with-frame.sd-question--error-bottom {
   padding-bottom: 0;
 }
-.sd-element--with-frame > .sd-question__erbox--outside-question {
+.sd-element--with-frame.sd-question--error-bottom > .sd-question__content {
+  margin-bottom: var(--sd-base-padding);
+}
+.sd-element--with-frame > .sd-element__erbox {
   margin-left: calc(-1 * var(--sd-base-padding));
   margin-right: calc(-1 * var(--sd-base-padding));
   width: calc(100% + 2 * var(--sd-base-padding));
@@ -1948,6 +1937,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-question--left {
   display: flex;
   flex-wrap: wrap;
+  flex-direction: row;
 }
 
 .sd-question__content--left {
@@ -1998,6 +1988,21 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
 }
 
+.sd-error {
+  display: block;
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--sjs-corner-radius, 4px);
+  line-height: var(--sjs-font-size, 16px);
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
+  font-weight: 600;
+  text-align: left;
+  color: var(--sjs-special-red, var(--red, #e60a3e));
+  white-space: normal;
+  width: 100%;
+  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
+  box-sizing: border-box;
+}
+
 .sd-element--expanded > .sd-element__header,
 .sd-element--collapsed > .sd-element__header {
   cursor: pointer;
@@ -2030,8 +2035,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-top: 0;
 }
 
-.sd-element--complex.sd-element--nested-with-borders > .sd-question__erbox--outside-question,
-.sd-element--complex.sd-element--with-frame > .sd-question__erbox--outside-question {
+.sd-element--complex.sd-element--nested-with-borders > .sd-element__erbox,
+.sd-element--complex.sd-element--with-frame > .sd-element__erbox {
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -2070,7 +2075,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-top: calc(0.5 * var(--sd-base-vertical-padding));
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
-.sd-element--nested-with-borders > .sd-question__erbox--outside-question {
+.sd-element--nested-with-borders > .sd-element__erbox {
   margin-left: calc(-1 * var(--sd-base-padding));
   margin-right: calc(-1 * var(--sd-base-padding));
   width: calc(100% + 2 * var(--sd-base-padding));
@@ -2275,7 +2280,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header {
   padding-top: 0;
-  padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header:after {
   content: none;
@@ -2306,10 +2311,21 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   line-height: calc(1.5 * (var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px))));
   margin: 0 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__required-text {
+  display: none;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__errbox {
+  margin: 0 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+  padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-base-padding);
+}
 .sd-panel.sd-panel--as-page > .sd-panel__content {
   padding-top: 0;
 }
 
+.sd-root--compact .sd-panel--as-page > .sd-panel__errbox {
+  margin: 0 0 var(--sd-base-vertical-padding) 0;
+}
+
 .sd-row ~ .sd-row .sd-panel--as-page {
   padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -2582,7 +2598,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   border: none;
   padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
 }
-.sd-table__cell--error .sd-question__erbox--outside-question {
+.sd-table__cell--error .sd-question__erbox {
   margin: 0;
 }
 
@@ -2652,6 +2668,15 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   min-width: calc(18 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sd-table__cell--footer {
+  text-align: right;
+}
+
+.sd-table__cell--footer-total {
+  font-weight: 600;
+  text-align: left;
+}
+
 .sd-table__cell--detail-panel {
   border-top: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
   padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2855,6 +2880,21 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   margin: 0 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
 
+.sd-page__errbox {
+  padding: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-base-padding);
+}
+
+.sd-page__title ~ .sd-page__errbox,
+.sd-page__description ~ .sd-page__errbox {
+  margin-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-root--compact .sd-page__title ~ .sd-page__errbox,
+.sd-root--compact .sd-page__description ~ .sd-page__errbox {
+  margin-bottom: 0;
+}
+
 .sd-row {
   display: flex;
   flex-direction: row;
@@ -3270,6 +3310,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-rating.sd-rating--wrappable fieldset {
   flex-wrap: wrap;
+  min-width: 0;
 }
 
 .sd-rating--small {
@@ -3295,7 +3336,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   box-sizing: border-box;
   min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-align: center;
-  border: 2px solid transparent;
+  border: none;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: var(--sjs-font-size, 16px);
@@ -3315,7 +3356,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-rating__item--error {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
   box-shadow: 0px 1px 2px transparent;
-  border-color: transparent;
+  border: none;
 }
 
 .sd-rating__item.sd-rating__item--disabled {
@@ -3327,7 +3368,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
   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;
+  border: none;
 }
 
 .sd-question--disabled .sd-rating__item-text {
@@ -3336,16 +3377,15 @@ legend + sv-ng-rating-item + .sd-rating__item {
 
 .sd-rating__item--allowhover:hover {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
-  border-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 
 .sd-rating__item:focus-within {
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item--selected {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
   box-shadow: 0px 1px 2px transparent;
@@ -3539,11 +3579,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   line-height: calc(1.5 * (var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)))));
   display: inline-block;
+  border: 2px solid transparent;
+  box-sizing: border-box;
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
   margin-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-bottom: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  border: 2px solid transparent;
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text {
@@ -3561,9 +3602,45 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sd-rating--wrappable .sd-rating__item-text {
+  max-width: 100%;
+}
+.sd-rating--wrappable .sd-rating__item-text .sv-string-viewer {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+}
+
+.sd-rating__item:focus-within .sd-rating__item-text.sd-rating__item-text {
+  border: none;
+}
+
 .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: inherit;
+  border: none;
+}
+
+.sd-rating-dropdown-item {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-rating-dropdown-item_description {
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-style: normal;
+  font-weight: normal;
+  font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
+  line-height: var(--sjs-font-size, 16px);
+}
+
+.sv-list__item.sv-list__item--selected .sd-rating-dropdown-item_description {
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-ranking-item--error .sv-ranking-item__index {
@@ -3633,6 +3710,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   opacity: 1;
   display: flex;
   justify-content: space-between;
+  word-spacing: normal;
 }
 
 .sd-dropdown[disabled] {
@@ -3710,6 +3788,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   position: absolute;
   left: 0;
   top: 0;
+  bottom: 0;
   width: 100%;
   max-width: 100%;
   border: none;
@@ -3726,7 +3805,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: nowrap;
   display: inline-block;
   appearance: none;
-  height: 100%;
 }
 
 .sd-dropdown--empty:not(.sd-input--disabled) .sd-dropdown__filter-string-input::placeholder {
@@ -5330,7 +5408,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-bottom: 0;
 }
 
-.sd-multipletext__cell--error .sd-question__erbox--outside-question {
+.sd-multipletext__cell--error .sd-question__erbox {
   margin: 0;
 }
 
@@ -5853,6 +5931,11 @@ svg.sd-action--icon {
   padding-bottom: 0;
 }
 
+.sd-root-modern--mobile .sv-header__overlap {
+  margin-bottom: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sv-header__content {
   padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
@@ -5927,7 +6010,7 @@ svg.sd-action--icon {
   --header-title-font-size: var(--sjs-font-headertitle-size, calc(2 * (var(--sjs-font-size, 16px))));
   font-size: var(--header-title-font-size);
   line-height: calc(1.25 * (var(--header-title-font-size)));
-  color: var(--sjs-font-headertitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+  color: var(--sjs-font-headertitle-color, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
   font-family: var(--sjs-font-headertitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
   font-weight: var(--sjs-font-headertitle-weight, 700);
   margin: 0;
@@ -5953,9 +6036,9 @@ svg.sd-action--icon {
   --header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
   font-size: var(--header-description-font-size);
   line-height: calc(1.5 * (var(--header-description-font-size)));
-  color: var(--sjs-font-headerdescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+  color: var(--sjs-font-headerdescription-color, var(--sjs-primary-forecolor, var(--primary-foreground, #fff)));
   font-family: var(--sjs-font-headerdescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
-  font-weight: var(--sjs-font-headerdescription-weight, 400);
+  font-weight: var(--sjs-font-headerdescription-weight, 600);
   margin: 0;
 }