survey-react 1.11.3 → 1.11.4

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.3
+ * surveyjs - Survey JavaScript library v1.11.4
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5612,8 +5612,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-progress__text {
   position: absolute;
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
-  right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
   font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
   line-height: var(--sjs-font-size, 16px);
   font-weight: 600;
@@ -5640,6 +5641,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-top: calc(-3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sv-root--sticky-top .sd-progress__text {
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
+  opacity: 0.75;
+  background: var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+}
+
 .sd-boolean {
   display: flex;
   width: max-content;
@@ -5698,11 +5707,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-boolean__thumb {
+  position: absolute;
+  left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  transform: translateX(0);
   background-color: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   transition-duration: 0.2s;
-  transition-property: margin-left;
+  transition-property: transform, left;
   transition-timing-function: linear;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-weight: 600;
@@ -5712,13 +5724,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: nowrap;
 }
 
-.sd-boolean--checked:not(.sd-boolean--exchanged) .sd-boolean__thumb {
-  margin-left: 50%;
-}
-
+.sd-boolean--checked:not(.sd-boolean--exchanged) .sd-boolean__thumb,
 .sd-boolean--exchanged:not(.sd-boolean--checked) .sd-boolean__thumb {
-  margin-left: calc(50% + 0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(100% - 0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  transform: translateX(-100%);
 }
+
 .sd-boolean--exchanged.sd-boolean:not(.sd-boolean--checked):not(sd-boolean--indeterminate) .sd-boolean__label--false, .sd-boolean--exchanged.sd-boolean.sd-boolean--checked .sd-boolean__label--true {
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
@@ -7371,6 +7382,7 @@ svg.sd-action--icon {
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   flex-direction: column;
+  transition: 0.25s padding ease-out;
 }
 
 .sd-progress-buttons__list-container {
@@ -7574,6 +7586,10 @@ svg.sd-action--icon {
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sv-root--sticky-top .sd-progress-buttons {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sd-progress-buttons--fit-survey-width {
   max-width: calc(90 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
@@ -7757,25 +7773,35 @@ svg.sd-action--icon {
 }
 
 .sv-header__overlap {
-  margin-bottom: calc(-14 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sv-header__overlap ~ div .sd-body,
+.sv-header__overlap ~ div .sv-body {
+  margin-top: calc(-14 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-root-modern--mobile .sv-header__overlap {
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern--mobile .sv-header__overlap ~ div .sd-body,
+.sd-root-modern--mobile .sv-header__overlap ~ div .sv-body {
+  margin-top: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 
 .sv-header__overlap.sv-header__without-background {
   margin-bottom: 0;
   padding-bottom: 0;
 }
+.sv-header__overlap.sv-header__without-background ~ div .sd-body,
+.sv-header__overlap.sv-header__without-background ~ div .sv-body {
+  margin-top: 0;
+}
 
 .sv-header__without-background .sv-header--mobile,
 .sv-header__without-background .sv-header__content {
   padding-bottom: 0;
 }
 
-.sd-root-modern--mobile .sv-header__overlap {
-  margin-bottom: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
 .sv-header__content {
   padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
@@ -8389,4 +8415,18 @@ body {
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+.sv-components-container-center {
+  position: sticky;
+  top: 0;
+}
+
+.sv-root--sticky-top .sv-components-container-center {
+  z-index: 15;
+}
+
+.sv-root--sticky-top.sd-progress--pages .sv-components-container-center {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+}
+
 /*# sourceMappingURL=defaultV2.css.map*/