survey-react 1.9.131 → 1.9.133

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.131
+ * 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)
  */
@@ -3359,6 +3359,13 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   white-space: normal;
   width: 100%;
   text-align: left;
+  min-width: 0;
+}
+.sd-item__control-label .sv-string-viewer {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
 }
 
 .sd-item--disabled .sd-item__control-label {
@@ -3401,6 +3408,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   position: relative;
   gap: var(--sjs-base-unit, var(--base-unit, 8px));
   vertical-align: top;
+  max-width: 100%;
 }
 
 .sd-selectbase__column {
@@ -3411,6 +3419,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   display: block;
   box-sizing: border-box;
   flex: 1 1 0px;
+  min-width: 0;
 }
 
 .sd-selectbase__column:not(:last-child) {
@@ -6223,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)));
@@ -6252,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));
 }
@@ -6262,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 {
@@ -6302,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))));
@@ -6318,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 {
@@ -6336,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))));