survey-react 1.9.132 → 1.9.133

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.132
+ * surveyjs - Survey JavaScript library v1.9.133
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -6232,27 +6232,28 @@ svg.sd-action--icon {
   flex-wrap: nowrap;
   text-align: center;
   flex-direction: column;
+  cursor: pointer;
 }
 .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
   display: block;
   content: "";
-  width: 100%;
   height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-navigation-default, #bcbcbc);
   position: absolute;
-  bottom: calc(0.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  right: 50%;
+  bottom: calc(1.125 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(50% + 4px);
+  width: calc(100% - 4px);
+  pointer-events: none;
 }
 .sd-progress-buttons__list li:after {
   display: flex;
   content: attr(data-page-number);
   width: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
   background-color: var(--sjs-navigation-default, #bcbcbc);
   border-radius: 50%;
-  cursor: pointer;
   align-self: center;
   z-index: 1;
   font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
@@ -6261,6 +6262,13 @@ svg.sd-action--icon {
   justify-content: center;
   color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
+.sd-progress-buttons__list li:hover:after {
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+}
 .sd-progress-buttons__list .sd-progress-buttons__list-element--passed:not(:first-child) > .sd-progress-buttons__connector {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
@@ -6271,11 +6279,11 @@ svg.sd-action--icon {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sd-progress-buttons__list .sd-progress-buttons__list-element--current:after {
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin: 0;
+  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-progress-buttons__page-title {
@@ -6311,7 +6319,7 @@ svg.sd-action--icon {
   flex-direction: column-reverse;
 }
 .sd-progress-buttons--bottom .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
-  top: calc(0.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  top: calc(1.125 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-progress-buttons--bottom .sd-progress-buttons__page-title {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -6327,12 +6335,17 @@ svg.sd-action--icon {
 }
 
 .sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
-  bottom: calc(1.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  bottom: calc(2.175 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(50% + 8px);
+  width: calc(100% - 8px);
 }
 .sd-progress-buttons--numbered .sd-progress-buttons__list li:after {
   width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-progress-buttons--numbered .sd-progress-buttons__list li:hover:after {
+  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 
 .sd-root-modern--mobile .sd-progress-buttons__list,
 .sd-progress-buttons--no-titles .sd-progress-buttons__list {
@@ -6345,13 +6358,20 @@ svg.sd-action--icon {
 }
 
 .sd-progress-buttons--bottom.sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
-  top: calc(1.875 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  top: calc(2.175 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-root-modern--mobile .sd-progress-buttons {
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (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;
+  width: 100%;
+  margin: auto;
+}
+
 .sv_progress-toc {
   padding: var(--sjs-base-unit, var(--base-unit, 8px));
   max-width: calc(42 * (var(--sjs-base-unit, var(--base-unit, 8px))));