survey-react 1.9.77 → 1.9.79

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.77
+ * surveyjs - Survey JavaScript library v1.9.79
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -544,9 +544,6 @@ sv-popup {
   padding: 0;
   border-radius: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
-  justify-content: flex-end;
-}
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer .sv-action-bar .sv-action {
   width: auto;
 }
@@ -655,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%;
@@ -662,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;
@@ -906,6 +906,7 @@ sv-popup {
 .sv-ranking {
   outline: none;
   user-select: none;
+  -webkit-user-select: none;
 }
 
 .sv-ranking-item {
@@ -1294,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));
@@ -1307,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));
@@ -1346,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;
 }
 
@@ -1542,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;
@@ -1564,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-left: 0;
+  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;
 }
@@ -1602,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));
@@ -2719,18 +2751,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));
 }
 
@@ -2743,7 +2778,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);
 }
 
@@ -2753,7 +2788,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);
 }
 
@@ -2945,6 +2980,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 {
@@ -3082,7 +3126,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-imagepicker__item img,
 .sd-imagepicker__item .sd-imagepicker__image-container > div {
   border-radius: calc(0.5 * var(--base-unit, 8px));
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--background-dim-light, #f9f9f9);
 }
 
 .sd-imagepicker__item-decorator {
@@ -3154,6 +3198,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-imagepicker__no-image {
   display: flex;
   background-color: var(--background-dim-light, #f9f9f9);
+  inset-block-start: 0;
 }
 
 .sd-imagepicker__no-image-svg {
@@ -3189,6 +3234,23 @@ legend + sv-ng-rating-item + .sd-rating__item {
   max-width: calc(80 * var(--base-unit, 8px));
 }
 
+.sd-image__no-image {
+  background: var(--background-dim-light, #f9f9f9);
+  min-width: calc(5 * var(--base-unit, 8px));
+  min-height: calc(5 * var(--base-unit, 8px));
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset-block-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd-image__no-image use {
+  fill: var(--foreground-light, #909090);
+}
+
 .sd-html {
   white-space: initial;
 }
@@ -4266,10 +4328,10 @@ sv-components-container,
 
 .sd-root-modern.sd-root-modern--mobile .sd-element__num {
   float: none;
-  margin-left: 0;
+  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;