survey-react 1.9.128 → 1.9.129

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.128
+ * surveyjs - Survey JavaScript library v1.9.129
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1059,16 +1059,67 @@ sv-popup {
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
   background-clip: padding-box;
   z-index: 100;
-  max-height: 90vh;
+  max-height: 50vh;
   overflow: auto;
   box-sizing: border-box;
+  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+@-moz-document url-prefix() {
+  .sv_window,
+  .sv_window * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+  }
+}
+.sv_window::-webkit-scrollbar,
+.sv_window *::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background-color: transparent;
+}
+.sv_window::-webkit-scrollbar-thumb,
+.sv_window *::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 32px;
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
+}
+.sv_window::-webkit-scrollbar-track,
+.sv_window *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sv_window::-webkit-scrollbar-thumb:hover,
+.sv_window *::-webkit-scrollbar-thumb:hover {
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
+.sv_window_root-content {
+  height: 100%;
+}
+
+.sv_window--full-screen {
+  top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  max-height: 100%;
+  width: initial !important;
+  max-width: initial !important;
+}
+
+.sv_window_header {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .sv_window_content {
-  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
   overflow: hidden;
 }
 
+.sv_window--collapsed {
+  height: initial;
+}
 .sv_window--collapsed .sv_window_header {
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -1079,6 +1130,10 @@ sv-popup {
 .sv_window--collapsed .sv_window_content {
   display: none;
 }
+.sv_window--collapsed .sv_window_buttons_container {
+  margin-top: 0;
+  margin-right: 0;
+}
 
 .sv_window_header_title_collapsed {
   color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
@@ -1106,9 +1161,9 @@ sv-popup {
 }
 
 .sv_window_buttons_container {
-  position: absolute;
-  top: var(--sjs-base-unit, var(--base-unit, 8px));
-  right: var(--sjs-base-unit, var(--base-unit, 8px));
+  position: fixed;
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
   display: flex;
   gap: var(--sjs-base-unit, var(--base-unit, 8px));
   z-index: 1;
@@ -2792,6 +2847,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-table__cell--footer {
   text-align: right;
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .sd-table__cell--footer-total {
@@ -2868,6 +2924,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell--actions:not(.sd-table__cell--vertical),
 .sd-table__cell--empty,
 .sd-table__cell--row-text,
+.sd-table__cell--footer-total,
 .sd-matrix__cell:first-of-type,
 .sd-matrix tr > td:first-of-type {
   position: sticky;
@@ -2877,6 +2934,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,
 .sd-table__cell--empty:first-of-type,
 .sd-table__cell--row-text:first-of-type,
+.sd-table__cell--footer-total:first-of-type,
 .sd-matrix__cell:first-of-type:first-of-type,
 .sd-matrix tr > td:first-of-type:first-of-type {
   left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2884,6 +2942,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 .sd-table__cell--actions:not(.sd-table__cell--vertical):last-of-type,
 .sd-table__cell--empty:last-of-type,
 .sd-table__cell--row-text:last-of-type,
+.sd-table__cell--footer-total:last-of-type,
 .sd-matrix__cell:first-of-type:last-of-type,
 .sd-matrix tr > td:first-of-type:last-of-type {
   right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -2971,6 +3030,23 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   margin: initial;
 }
 
+.sd-table__cell--footer .sd-table__question-wrapper--expression .sd-expression {
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  font-size: var(--sjs-font-size, 16px);
+  font-weight: 600;
+  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-table__cell--footer .sd-table__question-wrapper--left {
+  text-align: start;
+}
+.sd-table__cell--footer .sd-table__question-wrapper--center {
+  text-align: center;
+}
+.sd-table__cell--footer .sd-table__question-wrapper--right {
+  text-align: end;
+}
+
 .sd-table.sd-matrixdynamic {
   table-layout: auto;
 }
@@ -3088,6 +3164,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-page__row.sd-row--multiple.sd-row--compact {
   padding: 0;
+  row-gap: var(--sd-base-vertical-padding);
   margin-left: calc(-1 * var(--sd-base-padding));
   width: calc(100% + var(--sd-base-padding));
 }
@@ -4102,7 +4179,21 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-size: var(--sjs-internal-font-editorfont-size);
   font-weight: var(--sjs-font-editorfont-weight, 400);
   font-family: var(--sjs-font-editorfont-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
-  padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-end: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-block: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  border-radius: var(--sjs-corner-radius, 4px);
+  transition: border-color var(--sjs-transition-duration, 150ms);
+}
+.sv-dropdown-popup .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
+  border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  padding-inline-end: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-block: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup .sv-list__item span {
+  margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 [dir=rtl] .sd-dropdown,
@@ -6516,6 +6607,18 @@ svg.sd-action--icon {
   max-width: 100%;
 }
 
+.sv-header__background-color--none .sv-header__title .sd-title,
+.sv-header__background-color--custom .sv-header__title .sd-title {
+  color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+}
+.sv-header__background-color--none .sv-header__description .sd-description,
+.sv-header__background-color--custom .sv-header__description .sd-description {
+  --header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
+  font-size: var(--header-description-font-size);
+  line-height: calc(1.5 * (var(--header-description-font-size)));
+  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+}
+
 @keyframes rotationAnimation {
   from {
     rotate: 0deg;
@@ -6692,6 +6795,7 @@ sv-components-container,
 .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--has-end-actions):not(:last-of-type)::after {
   bottom: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tfoot tr::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--expanded)::after {
   z-index: 12;
   content: " ";
@@ -6700,10 +6804,18 @@ sv-components-container,
   height: 1px;
   background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
   left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(100% + 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   z-index: 12;
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr:not(.sd-table__row--expanded)::after {
+  bottom: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tfoot tr {
+  padding-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tfoot tr::before {
+  top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type .sd-table__cell-action--show-detail-mobile,
 .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type .sd-table__cell-action--remove-row {
   margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -6748,6 +6860,7 @@ sv-components-container,
 .sd-root-modern.sd-root-modern--mobile .sd-matrix__cell::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--actions::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text::before,
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--footer-total::before,
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error::before {
   content: none;
 }
@@ -6787,6 +6900,7 @@ sv-components-container,
   padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
   margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--footer-total:not(.sd-matrix__cell),
 .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text:not(.sd-matrix__cell) {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
@@ -6888,31 +7002,38 @@ body {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   position: relative;
 }
-.sd-root-modern form {
-  position: relative;
-}
-.sd-root-modern * {
-  scrollbar-width: thin;
-  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+@-moz-document url-prefix() {
+  .sd-root-modern,
+  .sd-root-modern * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+  }
 }
-.sd-root-modern ::-webkit-scrollbar {
+.sd-root-modern::-webkit-scrollbar,
+.sd-root-modern *::-webkit-scrollbar {
   width: 12px;
   height: 12px;
   background-color: transparent;
 }
-.sd-root-modern ::-webkit-scrollbar-thumb {
+.sd-root-modern::-webkit-scrollbar-thumb,
+.sd-root-modern *::-webkit-scrollbar-thumb {
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 32px;
   background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
-.sd-root-modern ::-webkit-scrollbar-track {
+.sd-root-modern::-webkit-scrollbar-track,
+.sd-root-modern *::-webkit-scrollbar-track {
   background: transparent;
 }
-.sd-root-modern ::-webkit-scrollbar-thumb:hover {
+.sd-root-modern::-webkit-scrollbar-thumb:hover,
+.sd-root-modern *::-webkit-scrollbar-thumb:hover {
   border: 2px solid rgba(0, 0, 0, 0);
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
+.sd-root-modern form {
+  position: relative;
+}
 
 .sd-root-modern--animation-disabled * {
   -webkit-transition: none !important;
@@ -6927,28 +7048,6 @@ body {
   overflow: auto;
   position: static;
 }
-.sd-root-modern.sd-root-modern--full-container * {
-  scrollbar-width: thin;
-  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
-}
-.sd-root-modern.sd-root-modern--full-container::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-  background-color: transparent;
-}
-.sd-root-modern.sd-root-modern--full-container::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-  border-radius: 32px;
-  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
-}
-.sd-root-modern.sd-root-modern--full-container::-webkit-scrollbar-track {
-  background: transparent;
-}
-.sd-root-modern.sd-root-modern--full-container::-webkit-scrollbar-thumb:hover {
-  border: 2px solid rgba(0, 0, 0, 0);
-  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-}
 
 .sd-root-modern--mobile {
   --sd-timer-size: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -6970,25 +7069,32 @@ body {
   max-height: 100%;
 }
 
-.sv-popup .sv-popup__scrolling-content {
-  scrollbar-width: thin;
-  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+@-moz-document url-prefix() {
+  .sv-popup .sv-popup__scrolling-content,
+  .sv-popup .sv-popup__scrolling-content * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
+  }
 }
-.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar {
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar,
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar {
   width: 12px;
   height: 12px;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background-color: transparent;
 }
-.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb {
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb,
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 32px;
   background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
-.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-track, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-track {
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-track,
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-track {
   background: transparent;
 }
-.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb:hover, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb:hover {
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb:hover,
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb:hover {
   border: 2px solid rgba(0, 0, 0, 0);
   background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }