survey-react 1.10.6 → 1.11.2

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.10.6
+ * surveyjs - Survey JavaScript library v1.11.2
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -483,6 +483,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));
@@ -533,6 +545,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;
 }
@@ -640,6 +656,7 @@ sv-popup {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  position: relative;
 }
 
 .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
@@ -1732,6 +1749,7 @@ sv-brand-info, .sv-brand-info {
 }
 
 .sv-list__item-body {
+  position: relative;
   width: 100%;
   align-items: center;
   box-sizing: border-box;
@@ -1768,15 +1786,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))));
@@ -1796,6 +1815,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 {
@@ -1812,11 +1844,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;
@@ -1828,6 +1860,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 {
@@ -2330,6 +2369,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
 }
 
+.sd-question--no-pointer-events .sd-selectbase label,
+.sd-question--no-pointer-events .sd-rating label {
+  pointer-events: none;
+}
+
 .sd-element__erbox--above-element {
   margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
@@ -3125,7 +3169,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   animation-fill-mode: forwards;
 }
 .sd-table__row--detail.sd-table__row--fade-in {
-  --fade-in-animation-duration: calc(var(--sjs--fade-in-duration, 500ms) + var(--sjs-matrix-detail-row-fade-in-delay, 150ms));
+  --fade-in-animation-duration: calc(var(--sjs-matrix-detail-row-fade-in-duration, 500ms) + var(--sjs-matrix-detail-row-fade-in-delay, 150ms));
   animation-duration: max(var(--fade-in-animation-duration), var(--sjs-matrix-detail-row-move-in-duration, 150ms));
 }
 .sd-table__row--detail.sd-table__row--fade-in > td {
@@ -3133,7 +3177,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   animation-duration: var(--sjs-matrix-detail-row-move-in-duration, 150ms);
 }
 .sd-table__row--detail.sd-table__row--fade-in > td > div {
-  animation-duration: var(--sjs--fade-in-duration, 500ms), var(--sjs-matrix-detail-row-move-in-duration, 150ms);
+  animation-duration: var(--sjs-matrix-detail-row-fade-in-duration, 500ms), var(--sjs-matrix-detail-row-move-in-duration, 150ms);
   animation-delay: var(--sjs-matrix-detail-row-fade-in-delay, 150ms), 0s;
 }
 .sd-table__row--detail.sd-table__row--fade-out {
@@ -3683,11 +3727,18 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   margin-top: var(--sd-base-vertical-padding);
   --animate-margin: var(--sd-base-vertical-padding);
 }
+.sd-page__title ~ .sd-page__row.sd-row.sd-row--fade-in.sd-row--fade-in,
+.sd-page__description ~ .sd-page__row.sd-row.sd-row--fade-in.sd-row--fade-in {
+  margin-top: 0;
+}
 
 .sd-row.sd-page__row:not(.sd-row--compact) ~ .sd-row.sd-page__row:not(.sd-row--compact) {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   --animate-margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-row.sd-page__row:not(.sd-row--compact) ~ .sd-page__row.sd-row.sd-row--fade-in.sd-row--fade-in {
+  margin-top: 0;
+}
 
 .sd-row--multiple {
   row-gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3751,16 +3802,25 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
     margin-top: var(--animate-margin);
   }
 }
+.sd-row.sd-row--fade-in {
+  margin-top: 0;
+}
+
 .sd-row--fade-in {
   animation-fill-mode: forwards;
   animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
   min-height: 0 !important;
   opacity: 0;
+  height: 0;
   animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
   animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s;
   animation-duration: var(--sjs-row-fade-in-duration, 500ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms);
 }
 
+.sd-row--delayed-fade-in {
+  animation-delay: calc(var(--sjs-row-fade-in-delay, 150ms) + var(--sjs-row-fade-in-animation-delay, 400ms)), var(--sjs-row-fade-in-animation-delay, 400ms), var(--sjs-row-fade-in-animation-delay, 400ms);
+}
+
 .sd-row--fade-out {
   animation-name: fadeIn, moveInWithOverflow, marginFadeIn;
   animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
@@ -4935,6 +4995,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-shadow: var(--sjs-shadow-inner-reset, inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
+.sd-input.sd-dropdown.sd-input--readonly {
+  box-shadow: none;
+  transition: none;
+}
+
 .sd-dropdown__filter-string-input {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   position: absolute;
@@ -4963,6 +5028,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
+.sd-dropdown--empty div {
+  min-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
+}
+
 .sd-dropdown__filter-string-input::placeholder {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   width: 100%;
@@ -5515,6 +5584,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-expression {
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: var(--sjs-font-size, 16px);
+  white-space: break-spaces;
 }
 
 .sd-question__content--left .sd-expression {
@@ -5638,11 +5708,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   white-space: nowrap;
 }
 
-.sd-boolean--checked .sd-boolean__thumb {
+.sd-boolean--checked:not(.sd-boolean--exchanged) .sd-boolean__thumb {
   margin-left: 50%;
 }
 
-.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))));
 }
 .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 {
@@ -6263,16 +6333,18 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   min-height: 100%;
   width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
+  cursor: pointer;
 }
 .sd-file__preview-item .sd-file__default-image {
   width: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(8.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sd-file__preview-item img:hover + .sd-file__remove-file-button,
-.sd-file__preview-item svg:hover + .sd-file__remove-file-button,
-.sd-file__preview-item .sd-file__remove-file-button:hover {
+.sd-file__preview-item:hover .sd-file__remove-file-button {
   opacity: 1;
 }
+.sd-file__preview-item:hover .sd-file__sign a {
+  text-decoration: underline;
+}
 
 .sd-file__sign {
   margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -6302,12 +6374,18 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: block;
   opacity: 0;
   position: absolute;
-  left: 50%;
-  top: 50%;
+  left: 100%;
+  top: 0;
   transform: translate(-50%, -50%);
   transition: opacity var(--sjs-transition-duration, 150ms);
 }
 
+.sd-file__image-wrapper--default-image .sd-file__remove-file-button {
+  left: 50%;
+  top: 50%;
+  transform: translate(calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)) - 50% - 1.5px), calc(-4.25 * var(--sjs-base-unit, var(--base-unit, 8px)) - 50% + 1.5px));
+}
+
 .sd-file__decorator--error {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
 }
@@ -6336,7 +6414,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background: transparent;
 }
 
-.sd-file--single img:hover + .sd-file__remove-file-button {
+.sd-file--single .sd-file__preview-item .sd-file__remove-file-button {
   display: none;
 }
 
@@ -7075,6 +7153,43 @@ svg.sd-action--icon {
   opacity: 0.25;
 }
 
+.sd-context-btn--small {
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sd-context-btn--small svg {
+  width: var(--sjs-internal-font-editorfont-size);
+  height: var(--sjs-internal-font-editorfont-size);
+}
+
+.sd-context-btn--with-border {
+  --box-shadow-color: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  box-shadow: 0 0 0 1px var(--box-shadow-color);
+}
+
+.sd-context-btn--colorful use {
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-context-btn--colorful.sd-context-btn--negative use {
+  fill: red;
+}
+
+.sd-context-btn--colorful:focus,
+.sd-context-btn--colorful:hover {
+  background: linear-gradient(var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))), var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)))), linear-gradient(var(--sjs-general-backcolor, var(--background, #fff)), var(--sjs-general-backcolor, var(--background, #fff)));
+}
+.sd-context-btn--colorful:focus.sd-context-btn--negative,
+.sd-context-btn--colorful:hover.sd-context-btn--negative {
+  background: linear-gradient(var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))), var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)))), linear-gradient(var(--sjs-general-backcolor, var(--background, #fff)), var(--sjs-general-backcolor, var(--background, #fff)));
+}
+.sd-context-btn--colorful:focus.sd-context-btn--with-border,
+.sd-context-btn--colorful:hover.sd-context-btn--with-border {
+  --box-shadow-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sd-context-btn--colorful:focus.sd-context-btn--with-border.sd-context-btn--negative,
+.sd-context-btn--colorful:hover.sd-context-btn--with-border.sd-context-btn--negative {
+  --box-shadow-color: var(--sjs-special-red, var(--red, #e60a3e));
+}
+
 :root {
   --sjs-transition-duration: 150ms;
 }
@@ -7332,6 +7447,7 @@ svg.sd-action--icon {
   z-index: -1;
   border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
   border-radius: 50%;
+  box-sizing: content-box;
 }
 .sd-progress-buttons__list li:hover .sd-progress-buttons__button {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
@@ -7525,6 +7641,18 @@ svg.sd-action--icon {
   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;
+}
+
 .sd-list {
   padding-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));