survey-react 1.12.2 → 1.12.4

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.2
+ * surveyjs - Survey JavaScript library v1.12.4
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -465,6 +465,16 @@ button.sv-action-bar-item {
   position: absolute;
   z-index: 10000;
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  min-width: 100px;
+  max-width: 400px;
+}
+.sv-drag-drop-choices-shortcut .sv-ranking-item {
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-drag-drop-choices-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-viewer,
+.sv-drag-drop-choices-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-editor {
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .sv-drag-drop-choices-shortcut__content.sv-drag-drop-choices-shortcut__content {
@@ -513,18 +523,12 @@ sv-popup {
 
 .sv-popup__container {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   border-radius: var(--sjs-corner-radius, 4px);
   position: absolute;
   padding: 0;
 }
 
-.sv-popup__shadow {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--sjs-corner-radius, 4px);
-}
-
 .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   border-radius: var(--sjs-corner-radius, 4px);
@@ -551,23 +555,17 @@ sv-popup {
   display: flex;
 }
 
-.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
-  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+.sv-popup--modal > .sv-popup__container > .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
-}
-.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
-  padding-bottom: 2px;
+  gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup--modal .sv-popup__body-footer .sv-footer-action-bar {
   overflow: visible;
 }
 
-.sv-popup--confirm-delete .sv-popup__shadow {
-  height: initial;
-}
 .sv-popup--confirm-delete .sv-popup__container {
   border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
 }
@@ -579,7 +577,6 @@ sv-popup {
 }
 .sv-popup--confirm-delete .sv-popup__body-header {
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
-  margin-bottom: 0;
   align-self: self-start;
   /* UI/Default */
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -593,7 +590,6 @@ sv-popup {
   display: none;
 }
 .sv-popup--confirm-delete .sv-popup__body-footer {
-  padding-bottom: 0;
   max-width: max-content;
 }
 .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
@@ -612,6 +608,7 @@ sv-popup {
   width: 100%;
   padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: unset;
+  box-shadow: unset;
   box-sizing: content-box;
 }
 .sv-popup--overlay .sv-popup__body-content {
@@ -619,32 +616,27 @@ sv-popup {
   max-width: 100vw;
   border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   padding: calc(3 * (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))));
   height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
 }
-.sv-popup--overlay .sv-popup__body-footer {
-  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
 .sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
   width: 100%;
 }
 .sv-popup--overlay .sv-popup__body-footer-item {
   width: 100%;
 }
+.sv-popup--overlay .sv-popup__body-footer .sv-action {
+  flex: 1 0 0;
+}
 .sv-popup--overlay .sv-popup__button.sv-popup__button {
   background-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));
 }
 
-.sv-popup--overlay .sv-popup__body-footer .sv-action {
-  flex: 1 0 0;
-}
-
 .sv-popup--modal .sv-popup__scrolling-content {
   padding: 2px;
   margin: -2px;
@@ -719,23 +711,17 @@ sv-popup {
   line-height: calc(2 * (var(--sjs-font-size, 16px)));
   font-style: normal;
   font-weight: 700;
-  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
   display: flex;
-  margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup__body-footer .sv-action-bar {
   gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-popup__button {
-  margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
 .sv-popup--modal .sv-list__filter,
 .sv-popup--overlay .sv-list__filter {
   padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -748,16 +734,13 @@ sv-popup {
 .sv-popup--dropdown .sv-list__filter {
   margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
-.sv-popup--dropdown .sv-popup__shadow {
-  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
-}
 .sv-popup--dropdown .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
   height: 100%;
 }
 
-.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
+.sv-popup--dropdown > .sv-popup__container > .sv-popup__body-content .sv-list {
   background-color: transparent;
 }
 
@@ -770,6 +753,7 @@ sv-popup {
 
 .sv-popup--overlay .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup--dropdown-overlay {
@@ -790,7 +774,6 @@ sv-popup {
   box-shadow: none;
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin: 0;
 }
 .sv-popup--dropdown-overlay .sv-popup__container {
   max-height: calc(var(--sv-popup-overlay-height, 100vh));
@@ -799,10 +782,10 @@ sv-popup {
 }
 .sv-popup--dropdown-overlay .sv-popup__body-content {
   height: calc(var(--sv-popup-overlay-height, 100vh));
+  gap: 0;
 }
 .sv-popup--dropdown-overlay .sv-popup__body-footer {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  margin-top: 0;
   padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
   padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -931,7 +914,7 @@ sv-popup {
   max-width: var(--sv-popup-overlay-max-width);
   border-radius: var(--sjs-corner-radius, 4px);
   overflow: hidden;
-  margin: 0;
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
 }
 .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
 .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -1477,12 +1460,13 @@ sv-brand-info,
   line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow-wrap: break-word;
-  word-break: break-all;
+  word-break: normal;
   align-self: self-start;
   padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
   padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
-.sv-ranking-item__text .sv-string-viewer {
+.sv-ranking-item__text .sv-string-viewer,
+.sv-ranking-item__text .sv-string-editor {
   overflow: initial;
   white-space: pre-line;
 }
@@ -1527,7 +1511,8 @@ sv-brand-info,
 .sv-ranking-item--ghost {
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-ranking-item--ghost .sv-ranking-item__text .sv-string-viewer {
+.sv-ranking-item--ghost .sv-ranking-item__text .sv-string-viewer,
+.sv-ranking-item--ghost .sv-ranking-item__text .sv-string-editor {
   white-space: unset;
 }
 
@@ -1623,7 +1608,8 @@ sv-brand-info,
 .sv-ranking-shortcut .sv-ranking-item {
   height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-ranking-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-viewer {
+.sv-ranking-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-viewer,
+.sv-ranking-shortcut .sv-ranking-item .sv-ranking-item__text .sv-string-editor {
   overflow: hidden;
   white-space: nowrap;
 }
@@ -1757,6 +1743,32 @@ sv-brand-info,
   left: initial;
 }
 
+.sv-ranking--select-to-rank-swap-areas {
+  flex-direction: row-reverse;
+}
+.sv-ranking--select-to-rank-swap-areas .sv-ranking__container--to .sv-ranking-item {
+  padding-left: 0;
+  left: -24px !important;
+}
+.sv-ranking--select-to-rank-swap-areas .sv-ranking__container--from .sv-ranking-item {
+  padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: 0;
+}
+.sv-ranking--select-to-rank-swap-areas .sv-ranking__container--from .sv-ranking-item__ghost.sv-ranking-item__ghost {
+  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-ranking--select-to-rank-swap-areas .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
+  padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-left: 0;
+}
+.sv-ranking--select-to-rank-swap-areas .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item__ghost.sv-ranking-item__ghost {
+  right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-ranking--select-to-rank-swap-areas .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
+  padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: 0;
+}
+
 :root {
   --sjs-transition-duration: 150ms;
 }
@@ -1813,7 +1825,7 @@ sv-brand-info,
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   cursor: pointer;
   overflow: hidden;
-  text-align: left;
+  text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition: background-color var(--sjs-transition-duration, 150ms), color var(--sjs-transition-duration, 150ms);
@@ -2129,6 +2141,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   from {
     overflow: hidden;
     height: var(--animation-height-from);
+    min-height: var(--animation-height-from);
     margin-top: 0;
     margin-bottom: 0;
     padding-top: 0;
@@ -2145,6 +2158,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
     border-top-width: var(--animation-border-top-width);
     border-bottom-width: var(--animation-border-bottom-width);
     height: var(--animation-height-to);
+    min-height: var(--animation-height-to);
   }
   to {
     overflow: visible;
@@ -2155,6 +2169,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
     border-top-width: var(--animation-border-top-width);
     border-bottom-width: var(--animation-border-bottom-width);
     height: var(--animation-height-to);
+    min-height: var(--animation-height-to);
   }
 }
 @keyframes moveIn {
@@ -2188,10 +2203,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   opacity: 0.25;
 }
 
-.sd-element__title.sd-element__title--hidden {
-  display: none;
-}
-
 .sd-root--readonly .sd-element__title.sd-element__title--disabled {
   opacity: 1;
 }
@@ -3392,6 +3403,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-question:not(.sd-question--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
+.sd-question:not(.sd-question--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--checked .sd-item__control:focus + .sd-item__decorator,
+.sd-question:not(.sd-question--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__control:focus + .sd-item__decorator {
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+}
 .sd-question:not(.sd-question--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator,
 .sd-question:not(.sd-question--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -4273,7 +4288,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   white-space: normal;
   width: 100%;
-  text-align: left;
+  text-align: start;
   min-width: 0;
 }
 .sd-item__control-label .sv-string-viewer {
@@ -5565,7 +5580,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   max-width: 100%;
   width: auto;
   height: 100%;
-  text-align: left;
+  text-align: start;
   cursor: text;
   pointer-events: none;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));