survey-react 1.9.78 → 1.9.80

package/modern.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)
  */
@@ -424,6 +424,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%;
@@ -431,7 +432,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;
@@ -558,12 +561,11 @@ sv-popup {
   height: 100%;
   background: #FFFFFF;
   border-right: 1px solid #D6D6D6;
-  margin-top: 2px;
   box-sizing: border-box;
+  min-width: 256px;
 }
 .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
   background: rgba(25, 179, 148, 0.1);
-  border-radius: 3px;
   color: #161616;
   font-weight: 400;
 }
@@ -573,6 +575,9 @@ sv-popup {
 .sv_progress-toc .sv-list__item-body {
   padding-inline-start: 16px;
   padding-inline-end: 16px;
+  border-radius: 3px;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 
 .sv-container-modern {
@@ -1874,11 +1879,31 @@ sv-popup {
   color: var(--text-color, #404040);
   position: relative;
 }
+.sv-dropdown__value .sv-string-viewer {
+  line-height: 28px;
+}
 
 .sv_dropdown_control__input-field-component {
   height: auto;
 }
 
+.sv-dropdown__hint-prefix {
+  opacity: 0.5;
+}
+.sv-dropdown__hint-prefix span {
+  word-break: unset;
+  line-height: 28px;
+}
+
+.sv-dropdown__hint-suffix {
+  display: flex;
+  opacity: 0.5;
+}
+.sv-dropdown__hint-suffix span {
+  word-break: unset;
+  line-height: 28px;
+}
+
 .sv-dropdown_clean-button {
   padding: 3px 12px;
   margin: auto 0;
@@ -2036,6 +2061,10 @@ sv-popup {
   color: var(--error-color, #d52901);
 }
 
+.sv-tagbox .sv-dropdown__filter-string-input {
+  height: auto;
+}
+
 .sv-text {
   box-sizing: border-box;
   width: 100%;
@@ -2957,6 +2986,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%;
@@ -2964,7 +2994,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;
@@ -3597,9 +3629,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));
@@ -3610,17 +3641,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));
@@ -3649,7 +3706,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;
 }