survey-react 1.9.118 → 1.9.119

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.118
+ * 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)
  */
@@ -1855,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));
 }
 
@@ -1891,7 +1872,7 @@ 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;
 }
@@ -1934,7 +1915,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element--with-frame.sd-question--error-bottom > .sd-question__content {
   margin-bottom: var(--sd-base-padding);
 }
-.sd-element--with-frame > .sd-question__erbox--outside-question {
+.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));
@@ -2007,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;
@@ -2039,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;
 }
@@ -2079,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));
@@ -2284,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;
@@ -2315,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))));
 }
@@ -2591,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;
 }
 
@@ -2661,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))));
@@ -2864,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;
@@ -3279,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 {
@@ -3304,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);
@@ -3324,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 {
@@ -3336,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 {
@@ -3345,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;
@@ -3548,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 {
@@ -3570,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 {
@@ -5340,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;
 }
 
@@ -5863,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;
@@ -5937,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;
@@ -5963,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;
 }