survey-react 1.10.5 → 1.11.1

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.5
+ * surveyjs - Survey JavaScript library v1.11.1
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -102,6 +102,18 @@ sv-popup {
   height: 0;
 }
 
+.sv-popup.sv-popup-inner {
+  height: 0;
+}
+
+.sv-popup-inner > .sv-popup__container {
+  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-list__item--with-icon .sv-popup-inner > .sv-popup__container {
+  margin-top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .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));
@@ -152,6 +164,10 @@ sv-popup {
   padding-bottom: 2px;
 }
 
+.sv-popup--modal .sv-popup__body-footer .sv-footer-action-bar {
+  overflow: visible;
+}
+
 .sv-popup--confirm-delete .sv-popup__shadow {
   height: initial;
 }
@@ -259,6 +275,7 @@ sv-popup {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  position: relative;
 }
 
 .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
@@ -753,6 +770,18 @@ sv-popup {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
+.sd-title + .sv-components-row > .sv-components-column .sv_progress-toc:not(.sv_progress-toc--mobile),
+.sd-title ~ .sv-components-row > .sv-components-column .sv_progress-toc:not(.sv_progress-toc--mobile) {
+  margin-top: 2px;
+}
+
+.sv_progress-toc.sv_progress-toc--sticky {
+  position: sticky;
+  height: auto;
+  overflow-y: auto;
+  top: 0;
+}
+
 .sv-container-modern {
   color: var(--text-color, #404040);
   font-size: var(--font-size, var(--sjs-font-size, 16px));
@@ -2891,6 +2920,18 @@ sv-popup {
   height: 0;
 }
 
+.sv-popup.sv-popup-inner {
+  height: 0;
+}
+
+.sv-popup-inner > .sv-popup__container {
+  margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sv-list__item--with-icon .sv-popup-inner > .sv-popup__container {
+  margin-top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .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));
@@ -2941,6 +2982,10 @@ sv-popup {
   padding-bottom: 2px;
 }
 
+.sv-popup--modal .sv-popup__body-footer .sv-footer-action-bar {
+  overflow: visible;
+}
+
 .sv-popup--confirm-delete .sv-popup__shadow {
   height: initial;
 }
@@ -3048,6 +3093,7 @@ sv-popup {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  position: relative;
 }
 
 .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
@@ -4140,6 +4186,7 @@ sv-brand-info, .sv-brand-info {
 }
 
 .sv-list__item-body {
+  position: relative;
   width: 100%;
   align-items: center;
   box-sizing: border-box;
@@ -4176,15 +4223,16 @@ sv-brand-info, .sv-brand-info {
 .sv-list__item:focus {
   outline: none;
 }
-.sv-list__item:hover .sv-list__item-body,
-.sv-list__item:focus .sv-list__item-body {
+
+.sv-list__item:focus .sv-list__item-body,
+.sv-list__item--hovered > .sv-list__item-body {
   background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 
 .sv-list__item--with-icon.sv-list__item--with-icon {
   padding: 0;
 }
-.sv-list__item--with-icon.sv-list__item--with-icon .sv-list__item-body {
+.sv-list__item--with-icon.sv-list__item--with-icon > .sv-list__item-body {
   padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4204,6 +4252,19 @@ sv-brand-info, .sv-brand-info {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
+.sv-list-item__marker-icon {
+  position: absolute;
+  right: var(--sjs-base-unit, var(--base-unit, 8px));
+  flex-shrink: 0;
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-list-item__marker-icon svg {
+  display: block;
+}
+.sv-list-item__marker-icon use {
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
 [dir=rtl] .sv-list__item-icon,
 [style*="direction:rtl"] .sv-list__item-icon,
 [style*="direction: rtl"] .sv-list__item-icon {
@@ -4220,11 +4281,11 @@ sv-brand-info, .sv-brand-info {
   display: none;
 }
 
-.sv-list__item.sv-list__item--selected .sv-list__item-body,
-.sv-list__item.sv-list__item--selected:hover .sv-list__item-body,
-.sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
-.sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
-li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
+.sv-list__item.sv-list__item--selected > .sv-list__item-body,
+.sv-list__item.sv-list__item--selected:hover > .sv-list__item-body,
+.sv-list__item.sv-list__item--selected.sv-list__item--focused > .sv-list__item-body,
+.sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused > .sv-list__item-body,
+li:focus .sv-list__item.sv-list__item--selected > .sv-list__item-body {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
@@ -4236,6 +4297,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
 li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   fill: var(--sjs-general-backcolor, var(--background, #fff));
 }
+.sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use,
+.sv-list__item.sv-list__item--selected:hover .sv-list-item__marker-icon use,
+.sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list-item__marker-icon use,
+.sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list-item__marker-icon use,
+li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
+  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+}
 
 .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
 .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover .sv-list__item-body {