survey-react 1.9.135 → 1.9.136

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.135
+ * surveyjs - Survey JavaScript library v1.9.136
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1983,8 +1983,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-bottom: var(--sd-base-padding);
   background: 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));
-  display: flex;
-  flex-direction: column;
 }
 
 .sd-element--with-frame.sd-element--compact {
@@ -2066,6 +2064,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-element--with-frame.sd-question--error-bottom {
   padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
 }
 .sd-element--with-frame.sd-question--error-bottom > .sd-question__content {
   margin-bottom: var(--sd-base-padding);
@@ -6244,21 +6244,22 @@ svg.sd-action--icon {
   display: block;
   content: "";
   height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-color: var(--sjs-navigation-default, #bcbcbc);
+  background-color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+  opacity: 0.5;
   position: absolute;
   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 {
+.sd-progress-buttons__list li .sd-progress-buttons__button {
+  position: relative;
   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.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%;
   align-self: center;
   z-index: 1;
@@ -6268,29 +6269,70 @@ svg.sd-action--icon {
   justify-content: center;
   color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
-.sd-progress-buttons__list li:hover:after {
+.sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  z-index: -2;
+  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  border-radius: 50%;
+}
+.sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+  opacity: 0.5;
+  z-index: -1;
+  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  border-radius: 50%;
+}
+.sd-progress-buttons__list li:hover .sd-progress-buttons__button {
   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 li:hover .sd-progress-buttons__button .sd-progress-buttons__button-content {
+  top: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(-0.75 * (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));
+  opacity: 1;
+}
 .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));
+  opacity: 1;
+}
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed .sd-progress-buttons__button {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-.sd-progress-buttons__list .sd-progress-buttons__list-element--passed:after {
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed .sd-progress-buttons__button .sd-progress-buttons__button-content {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  opacity: 1;
 }
 .sd-progress-buttons__list .sd-progress-buttons__list-element--current:not(:first-child) > .sd-progress-buttons__connector {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  opacity: 1;
 }
-.sd-progress-buttons__list .sd-progress-buttons__list-element--current:after {
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button {
   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.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button .sd-progress-buttons__button-content {
+  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));
+  opacity: 1;
+}
 
 .sd-progress-buttons__page-title {
   display: flex;
@@ -6345,11 +6387,11 @@ svg.sd-action--icon {
   right: calc(50% + 8px);
   width: calc(100% - 8px);
 }
-.sd-progress-buttons--numbered .sd-progress-buttons__list li:after {
+.sd-progress-buttons--numbered .sd-progress-buttons__list li .sd-progress-buttons__button {
   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 {
+.sd-progress-buttons--numbered .sd-progress-buttons__list li:hover .sd-progress-buttons__button {
   padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }