survey-react 1.9.78 → 1.9.80

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.78
+ * surveyjs - Survey JavaScript library v1.9.80
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -652,6 +652,7 @@ sv-popup {
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
   --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--base-unit, 8px) * 8);
+  --sv-popup-overlay-max-width: calc(100% - var(--base-unit, 8px) * 8);
   position: absolute;
   transform: translate(-50%, -50%);
   left: 50%;
@@ -659,7 +660,9 @@ sv-popup {
   max-height: var(--sv-popup-overlay-max-height);
   min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--base-unit, 8px));
   height: auto;
-  max-width: calc(40 * var(--base-unit, 8px));
+  width: auto;
+  min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
+  max-width: var(--sv-popup-overlay-max-width);
   border-radius: calc(0.5 * var(--base-unit, 8px));
   overflow: hidden;
   margin: 0;
@@ -1292,9 +1295,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: absolute;
   left: 50%;
   bottom: calc(3 * var(--base-unit, 8px));
-  transform: translate(-50%, 0);
   background: var(--background, #fff);
-  opacity: 0.75;
+  opacity: 0;
   padding: calc(3 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   border-radius: calc(1 * var(--base-unit, 8px));
@@ -1305,17 +1307,43 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  white-space: nowrap;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  transform: translateX(-50%) translateY(calc(3 * var(--base-unit, 8px)));
+  transition-timing-function: ease-in;
+  transition-property: transform, opacity;
+  transition-delay: 0.25s;
+  transition: 0.5s;
+}
+
+.sv-save-data_root.sv-save-data_root--shown {
+  transition-timing-function: ease-out;
+  transition-property: transform, opacity;
+  transform: translateX(-50%) translateY(0);
+  transition-delay: 0.25s;
+  opacity: 0.75;
+}
+
+.sv-save-data_root span {
+  display: flex;
+  flex-grow: 1;
+}
+.sv-save-data_root .sv-action-bar {
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.sv-save-data_root--shown.sv-save-data_success,
+.sv-save-data_root--shown.sv-save-data_error {
+  opacity: 1;
 }
 
 .sv-save-data_root.sv-save-data_error {
   background-color: var(--red, #e60a3e);
   color: var(--background, #fff);
-  opacity: 1;
   font-weight: 600;
   padding: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   gap: calc(6 * var(--base-unit, 8px));
@@ -1344,7 +1372,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sv-save-data_root.sv-save-data_success {
   background-color: var(--primary, #19b394);
   color: #ffffff;
-  opacity: 1;
   font-weight: 600;
 }
 
@@ -1540,13 +1567,16 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-element__num {
   float: left;
-  padding: calc(0.625 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(0.375 * var(--base-unit, 8px));
-  width: calc(4 * var(--base-unit, 8px));
+  padding-top: calc(0.625 * var(--base-unit, 8px));
+  padding-bottom: calc(0.375 * var(--base-unit, 8px));
+  padding-inline-start: 0;
+  padding-inline-end: calc(1 * var(--base-unit, 8px));
+  width: calc(5 * var(--base-unit, 8px));
   font-size: calc(1.5 * var(--base-unit, 8px));
   line-height: calc(2 * var(--base-unit, 8px));
   color: var(--foreground-light, #909090);
-  margin-inline-start: calc(-4 * var(--base-unit, 8px));
-  text-align: right;
+  margin-inline-start: calc(-5 * var(--base-unit, 8px));
+  text-align: end;
   box-sizing: border-box;
   white-space: nowrap;
   flex-shrink: 0;
@@ -1562,14 +1592,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   float: right;
 }
 
-.sd-element__title--expandable .sd-element__num {
+.sd-element__title--num-inline .sd-element__num {
   float: none;
   margin-inline-start: 0;
   width: auto;
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
-.sd-element__title--expandable .sd-element__num + span {
+.sd-element__title--num-inline .sd-element__num + span {
   float: none;
   width: auto;
 }
@@ -1600,6 +1630,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
 }
 
+.sd-question__description {
+  font-size: calc(2 * var(--base-unit, 8px));
+}
+
 .sd-question__erbox {
   padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
   border-radius: calc(0.5 * var(--base-unit, 8px));
@@ -1893,6 +1927,32 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   row-gap: 0;
 }
 
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header:after {
+  content: none;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
+  position: static;
+  font-size: calc(3 * var(--base-unit, 8px));
+  line-height: calc(4 * var(--base-unit, 8px));
+  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+  font-weight: 700;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title span {
+  font-size: inherit;
+  line-height: inherit;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
+  position: static;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+  font-weight: 400;
+}
+
 .sd-panel__required-text {
   color: var(--red, #e60a3e);
 }
@@ -2159,6 +2219,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: calc(2.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
 }
 
+.sd-matrixdynamic__content .sd-table__question-wrapper {
+  position: relative;
+}
+
 .sd-table__question-wrapper:not(:focus-within):hover {
   position: relative;
 }
@@ -2278,6 +2342,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: calc(3 * var(--base-unit, 8px));
   line-height: calc(4 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+  font-weight: 700;
 }
 
 .sd-page__description {
@@ -2285,6 +2350,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+  font-weight: 400;
 }
 
 .sd-row {
@@ -2295,6 +2361,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin-top: calc(2 * var(--base-unit, 8px));
 }
 
+.sd-page__row.sd-row {
+  margin-top: calc(2 * var(--base-unit, 8px));
+}
+
 .sd-page__row.sd-row--multiple,
 .svc-row > .sd-row--multiple {
   background: var(--background, #fff);
@@ -2365,6 +2435,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
   gap: calc(4 * var(--base-unit, 8px));
   box-shadow: 0px 2px 0px var(--primary, #19b394);
+  margin-bottom: 2px;
 }
 .sd-title.sd-container-modern__title .sd-logo__image {
   margin-top: calc(1 * var(--base-unit, 8px));
@@ -2662,6 +2733,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   text-align: center;
   border: 2px solid var(--background, #fff);
   color: var(--foreground, #161616);
+  fill: var(--foreground, #161616);
   font-size: calc(2 * var(--base-unit, 8px));
 }
 
@@ -2678,10 +2750,12 @@ legend + sv-ng-rating-item + .sd-rating__item {
 
 .sd-rating__item.sd-rating__item--disabled {
   color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
 }
 
 .sd-rating__item.sd-rating__item--selected.sd-rating__item--disabled {
   color: var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25));
+  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
 }
 
 .sd-rating__item--allowhover:hover,
@@ -2694,12 +2768,67 @@ legend + sv-ng-rating-item + .sd-rating__item {
   border-color: var(--primary, #19b394);
   color: var(--primary-foreground, #fff);
   font-weight: 600;
+  box-shadow: 0px 1px 2px transparent;
 }
 
 .sd-rating__item--selected:focus-within {
   box-shadow: inset 0 0 0 2px var(--background, #fff);
 }
 
+.sd-rating__item-smiley {
+  position: relative;
+  background: var(--background, #fff);
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+  white-space: nowrap;
+  padding: calc(1.25 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  min-width: calc(6 * var(--base-unit, 8px));
+  text-align: center;
+  border: 2px solid var(--border, #d6d6d6);
+  color: var(--foreground, #161616);
+  fill: var(--border, #d6d6d6);
+}
+.sd-rating__item-smiley svg {
+  display: block;
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+}
+
+legend + .sd-rating__item-smiley,
+legend + sv-ng-rating-item + .sd-rating__item-smiley {
+  margin-inline-start: 2px;
+}
+
+.sd-rating__item-smiley--error {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+  border-color: transparent;
+}
+
+.sd-rating__item-smiley.sd-rating__item-smiley--disabled {
+  opacity: 0.5;
+}
+
+.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--disabled {
+  opacity: initial;
+  fill: var(--primary-foreground, #fff);
+}
+
+.sd-rating__item-smiley--allowhover:hover,
+.sd-rating__item-smiley:focus-within {
+  border-color: var(--primary, #19b394);
+}
+
+.sd-rating__item-smiley--selected {
+  background-color: var(--primary, #19b394);
+  border-color: var(--primary, #19b394);
+  fill: var(--primary-foreground, #fff);
+  font-weight: 600;
+}
+
+.sd-rating__item-smiley--selected:focus-within {
+  box-shadow: inset 0 0 0 2px var(--background, #fff);
+}
+
 .sd-rating__item-star {
   position: relative;
   background: var(--background, #fff);
@@ -2717,18 +2846,21 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-rating__item-star svg {
   stroke: var(--border, #d6d6d6);
   fill: none;
+  width: calc(6 * var(--base-unit, 8px));
+  height: calc(6 * var(--base-unit, 8px));
+  display: block;
 }
 .sd-rating__item-star .sv-star-2 {
   display: none;
 }
 
 .sd-rating__item-star--selected svg {
-  stroke: var(--primary, #19b394);
+  stroke: none;
   fill: var(--primary, #19b394);
 }
 
 .sd-rating__item-star--error svg {
-  stroke: var(--red-light, rgba(230, 10, 62, 0.1));
+  stroke: none;
   fill: var(--red-light, rgba(230, 10, 62, 0.1));
 }
 
@@ -2741,7 +2873,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 }
 
 .sd-rating__item-star--selected.sd-rating__item-star--disabled svg {
-  stroke: var(--border, #d6d6d6);
+  stroke: none;
   fill: var(--border, #d6d6d6);
 }
 
@@ -2751,7 +2883,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 }
 
 .sd-rating__item-star--unhighlighted svg {
-  stroke: var(--border, #d6d6d6);
+  stroke: none;
   fill: var(--border, #d6d6d6);
 }
 
@@ -2943,6 +3075,15 @@ legend + sv-ng-rating-item + .sd-rating__item {
   appearance: none;
 }
 
+.sd-dropdown__hint-prefix {
+  color: var(--foreground-light, #909090);
+}
+
+.sd-dropdown__hint-suffix {
+  display: flex;
+  color: var(--foreground-light, #909090);
+}
+
 [dir=rtl] .sd-dropdown,
 [style*="direction:rtl"] .sd-dropdown,
 [style*="direction: rtl"] .sd-dropdown {
@@ -3889,6 +4030,10 @@ legend + sv-ng-rating-item + .sd-rating__item {
   flex-grow: 1;
 }
 
+.sd-multipletext__content .sd-multipletext__item-container {
+  position: relative;
+}
+
 .sd-multipletext__item-container--error {
   background-color: var(--red-light, rgba(230, 10, 62, 0.1));
 }
@@ -4110,12 +4255,11 @@ svg.sd-action--icon {
   height: 100%;
   background: var(--background, #fff);
   border-right: 1px solid var(--border, #d6d6d6);
-  margin-top: 2px;
   box-sizing: border-box;
+  min-width: calc(32 * var(--base-unit, 8px));
 }
 .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
   background: var(--primary-light, rgba(25, 179, 148, 0.1));
-  border-radius: 3px;
   color: var(--foreground, #161616);
   font-weight: 400;
 }
@@ -4125,6 +4269,9 @@ svg.sd-action--icon {
 .sv_progress-toc .sv-list__item-body {
   padding-inline-start: calc(2 * var(--base-unit, 8px));
   padding-inline-end: calc(2 * var(--base-unit, 8px));
+  border-radius: 3px;
+  padding-top: calc(1.5 * var(--base-unit, 8px));
+  padding-bottom: calc(1.5 * var(--base-unit, 8px));
 }
 
 .sd-list {
@@ -4284,8 +4431,8 @@ sv-components-container,
   float: none;
   margin-inline-start: 0;
   width: auto;
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-element__num + span {
   float: none;