survey-react 1.12.3 → 1.12.5

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.3
+ * surveyjs - Survey JavaScript library v1.12.5
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -523,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);
@@ -561,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));
 }
@@ -589,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)));
@@ -603,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 {
@@ -622,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 {
@@ -629,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;
@@ -729,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));
@@ -758,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;
 }
 
@@ -780,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 {
@@ -800,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));
@@ -809,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));
@@ -941,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,
@@ -3430,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));
@@ -6714,17 +6691,91 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-file__list {
   display: flex;
-  gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  position: relative;
+  overflow: hidden;
   box-sizing: content-box;
   flex-direction: row;
-  align-items: stretch;
-  justify-content: center;
   padding: calc(10.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
   min-height: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   max-height: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
 }
 
+.sd-file__page {
+  display: flex;
+  left: 0;
+  align-items: stretch;
+  justify-content: center;
+  gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(100% - 21 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: 100%;
+  position: absolute;
+}
+
+@keyframes file-page-to-right {
+  from {
+    opacity: 1;
+    left: 0;
+  }
+  to {
+    opacity: 0;
+    left: 100%;
+  }
+}
+@keyframes file-page-from-right {
+  from {
+    opacity: 0;
+    left: 100%;
+  }
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+@keyframes file-page-from-left {
+  from {
+    opacity: 0;
+    left: -100%;
+  }
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+@keyframes file-page-to-left {
+  from {
+    opacity: 1;
+    left: 0;
+  }
+  to {
+    opacity: 0;
+    left: -100%;
+  }
+}
+.sd-file__page--leave-to-right,
+.sd-file__page--enter-from-right,
+.sd-file__page--leave-to-left,
+.sd-file__page--enter-from-left {
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
+}
+
+.sd-file__page--leave-to-right {
+  animation-name: file-page-to-right;
+}
+
+.sd-file__page--enter-from-right {
+  animation-name: file-page-from-right;
+}
+
+.sd-file__page--leave-to-left {
+  animation-name: file-page-to-left;
+}
+
+.sd-file__page--enter-from-left {
+  animation-name: file-page-from-left;
+}
+
 .sd-file__preview-item {
   position: relative;
   display: flex;
@@ -6821,6 +6872,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file--single-image {
   height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
+.sd-file--single-image .sd-file__page {
+  height: 100%;
+}
 .sd-file--single-image .sd-file__preview-item {
   width: 100%;
   margin: 0;