survey-react 1.12.12 → 1.12.14

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.12
+ * surveyjs - Survey JavaScript library v1.12.14
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -467,6 +467,21 @@ button.sv-action-bar-item {
   align-items: center;
   line-height: 0;
 }
+.sv-matrixdynamic-dragged-row .sd-table__cell.sd-table__cell--drag > div {
+  background-color: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
+  min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-table__cell--header.sd-table__cell--drag,
+.sd-table__cell.sd-table__cell--drag {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.sd-question--mobile .sd-table__cell--header.sd-table__cell--drag,
+.sd-question--mobile .sd-table__cell.sd-table__cell--drag {
+  display: none;
+}
 
 .sv-matrix-row--drag-drop-ghost-mod td {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -1913,6 +1928,8 @@ sv-brand-info,
 .sv-list-item__marker-icon {
   position: absolute;
   right: var(--sjs-base-unit, var(--base-unit, 8px));
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   flex-shrink: 0;
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: content-box;
@@ -1971,12 +1988,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   font-weight: 400;
 }
 
-.sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
+.sv-list__item--group-selected > .sv-list__item-body {
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-weight: 400;
 }
-.sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
+.sv-list__item--group-selected > .sv-list__item-body use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
@@ -2336,8 +2353,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
 
 .sd-element__title-expandable-svg {
   display: inline-block;
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: var(--lbr-question-panel-expand-button-icon-width, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--lbr-question-panel-expand-button-icon-height, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   position: absolute;
   inset-inline-start: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3220,13 +3237,29 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   margin-left: 0;
 }
 
+.sd-table__row:hover .sd-drag-element__svg {
+  visibility: visible;
+}
+
+.sd-table__cell.sd-table__cell--drag > div {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin-left: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
+  min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .sd-drag-element__svg {
-  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: block;
+  cursor: pointer;
+  visibility: hidden;
 }
 .sd-drag-element__svg use {
-  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 @keyframes borderAnimation {
@@ -3481,6 +3514,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 
 .sd-table__cell--item .sd-selectbase__item {
   text-align: center;
+  justify-content: center;
 }
 .sd-table__cell--item .sd-selectbase__label {
   justify-content: center;
@@ -4252,6 +4286,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 
 .sd-item {
+  display: flex;
   padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
 
@@ -6672,8 +6707,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-file__choose-btn--text .sv-svg-icon {
   margin-left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  width: 24px;
-  height: 24px;
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
@@ -8513,13 +8548,15 @@ sv-components-container,
   height: 100%;
 }
 
-.sd-root-modern {
+.sd-root-modern,
+.sd-container-modern {
   --sd-base-padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-base-vertical-padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-page-vertical-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
-.sd-root-modern.sd-root-modern--mobile {
+.sd-root-modern.sd-root-modern--mobile,
+.sd-root-modern--mobile .sd-container-modern {
   --sd-base-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-base-vertical-padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   --sd-page-vertical-padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));