Drop indicator fix styles (#6507)

* dropd indicator fix styles work for surveyjs/private-tasks#435 * update themes work for surveyjs/private-tasks#435 --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Feb 5, 2025 · 2b69c65 · 2b69c65
1 parent 8dccff0
commit 2b69c65
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 57 deletions.
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
@@ -431,13 +431,11 @@ svc-page {
 .svc-page--drag-over-empty .svc-page__footer:after {
   content: " ";
   position: absolute;
-  background: var(--sjs-secondary-background-500, #19b394ff);
-  left: calcSize(3);
-  bottom: calcSize(11.5);
+  background: var(--ctr-survey-drop-indicator-color, var(--sjs-primary-background-500, #19b394ff));
   width: 100%;
-  height: calcSize(0.25);
+  height: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
   left: 0;
-  top: calc(calcSize(-1) - (calcSize(0.25) / 2));
+  top: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / -2);
 }
 
 .svc-page--drag-over-empty-no-add-button:after {

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -1,6 +1,8 @@
 @use "../variables" as *;
 @use "./carry-forward-panel.scss" as *;
 
+$drop-indicator-position: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / -2);
+
 svc-question {
   display: block;
   position: absolute;
@@ -43,10 +45,10 @@ svc-question {
     content: "";
     width: 100%;
     height: 100%;
-    margin-top: calcSize(-2);
-    padding-top: calcSize(2);
-    margin-left: calcSize(-2);
-    padding-left: calcSize(2);
+    margin-top: calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) * -1);
+    padding-top: var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2));
+    margin-left: calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) * -1);
+    padding-left: var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2));
     bottom: 0;
     right: 0;
   }
@@ -57,7 +59,7 @@ svc-question {
   --thm-survey-question-panel-toolbar-button-gap: calc(
     var(--ctr-survey-question-panel-toolbar-gap, var(--lbr-spacing-x1)) / 2
   );
-  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap);
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, var(--lbr-corner-radius-x075));
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, var(--lbr-spacing-x05))
            var(--ctr-survey-question-panel-toolbar-item-padding-right, var(--lbr-spacing-x05))
@@ -642,7 +644,7 @@ svc-question {
 
 .svc-question__drop-indicator {
   position: absolute;
-  background: var(--sjs-secondary-background-500, #19B394FF);
+  background: var(--ctr-survey-drop-indicator-color, var(--sjs-primary-background-500, #19b394ff));
   opacity: 0;
   transition: opacity $creator-transition-duration;
 }
@@ -662,59 +664,59 @@ svc-question {
 }
 
 .svc-question__drop-indicator--left {
-  left: calc(calcSize(-1) - (calcSize(0.25) / 2));
+  left: $drop-indicator-position;
 }
 
 .svc-question__drop-indicator--right {
-  right: calc(calcSize(-1) - (calcSize(0.25) / 2));
+  right: $drop-indicator-position;
 }
 
 .svc-question__drop-indicator--top {
-  top: calc(calcSize(-1) - (calcSize(0.25) / 2));
+  top: $drop-indicator-position;
 }
 
 .svc-question__drop-indicator--bottom {
-  bottom: calc(calcSize(-1) - (calcSize(0.25) / 2));
+  bottom: $drop-indicator-position;
 }
 
 .svc-question__content--drag-over-left {
   > .svc-question__drop-indicator--left {
     opacity: 1;
-    width: calcSize(0.25);
+    width: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
   }
 }
 
 .svc-question__content--drag-over-right {
   > .svc-question__drop-indicator--right {
     opacity: 1;
-    width: calcSize(0.25);
+    width: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
   }
 }
 
 .svc-question__content--drag-over-top {
   > .svc-question__drop-indicator--top {
     opacity: 1;
-    height: calcSize(0.25);
+    height: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
   }
 }
 
 .svc-question__content--drag-over-bottom {
   > .svc-question__drop-indicator--bottom {
     opacity: 1;
-    height: calcSize(0.25);
+    height: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
   }
 }
 
 .sd-panel {
   .svc-question__content--drag-over-left {
     .svc-question__drop-indicator--left {
-      left: calc(calcSize(-1) + calcSize(0.25));
+      left: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2)));
     }
   }
 
   .svc-question__content--drag-over-right {
     .svc-question__drop-indicator--right {
-      right: calc(calcSize(-1) + calcSize(0.25));
+      right: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2)));
     }
   }
 }
@@ -737,13 +739,13 @@ svc-question {
 
   .svc-question__content--drag-over-top {
     .svc-question__drop-indicator--top {
-      top: calc(calcSize(-1) + calcSize(0.25));
+      top: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2)));
     }
   }
 
   .svc-question__content--drag-over-bottom {
     .svc-question__drop-indicator--bottom {
-      bottom: calc(calcSize(-1) + calcSize(0.25));
+      bottom: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) / -2) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2)));
     }
   }
 }

diff --git a/packages/survey-creator-core/src/components/row.scss b/packages/survey-creator-core/src/components/row.scss
@@ -78,7 +78,7 @@
 
 .svc-row__drop-indicator {
   position: absolute;
-  background: var(--sjs-secondary-background-500, #19B394FF);
+  background: var(--ctr-survey-drop-indicator-color, var(--sjs-primary-background-500, #19b394ff));
   opacity: 0;
   transition: opacity $creator-transition-duration;
 }
@@ -91,31 +91,31 @@
 }
 
 .svc-row__drop-indicator--top {
-  top: calc(calcSize(1) - (calcSize(0.25) / 2));
+  top: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) - var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / 2)
 }
 
 .svc-row__drop-indicator--bottom {
-  bottom: calc(calcSize(-1) - (calcSize(-0.25) / 2));
+  bottom: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) - var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / -2)
 }
 
 .svc-row--drag-over-top {
   >.svc-row__drop-indicator--top {
     opacity: 1;
-    height: calcSize(0.25);
+    height: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
   }
 }
 
 .svc-row--drag-over-bottom {
   >.svc-row__drop-indicator--bottom {
     opacity: 1;
-    height: calcSize(0.25);
+    height: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
   }
 }
 
 .svc-question__content--panel,
 .sd-panel__content {
   .svc-row__drop-indicator--top {
-    top: calc(calcSize(-1) - (calcSize(0.25) / 2));
+    top: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / -2);
   }
 }
 

diff --git a/packages/survey-creator-core/src/ctr-variables.scss b/packages/survey-creator-core/src/ctr-variables.scss
@@ -5,7 +5,6 @@ $stroke-unit: Max(var(--ctr-stroke-unit, 1px), 1px);
 $font-unit: var(--ctr-font-unit, 8px);
 $line-height-unit: var(--ctr-line-height-unit, 8px);
 $-font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
-$-base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @mixin ctrLargeFont {
   font-family: $-font-family;
@@ -21,9 +20,6 @@ $-base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin ctrMediumFont {
-  // --thm-medium-bold-font-size: calc(3 * #{$-base-unit});
-  // --thm-medium-bold-line-height: calc(4 * #{$-base-unit});
-
   font-family: $-font-family;
   font-size: var(--ctr-font-medium-size, var(--sjs-font-size-x3));
   font-style: normal;
@@ -37,9 +33,6 @@ $-base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin ctrDefaultFont {
-  // --thm-default-font-size: var(--sjs-font-size, calc(2 * #{$-base-unit}));
-  // --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
-
   font-family: $-font-family;
   font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
   font-style: normal;
@@ -71,10 +64,6 @@ $-base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin ctrSmallFont {
-  // --small-bold-font-size: var(--sjs-font-size, calc(2 * #{$-base-unit}));
-  // --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
-  // --ctr-small-bold-line-height: var(--small-bold-font-size);
-
   font-family: $-font-family;
   font-size: var(--ctr-font-small-size, var(--sjs-font-size-x150));
   font-style: normal;

diff --git a/packages/survey-creator-core/src/lbr-variables.scss b/packages/survey-creator-core/src/lbr-variables.scss
@@ -5,12 +5,8 @@ $lbr-stroke-unit: Max(var(--lbr-stroke-unit, 1px), 1px);
 $lbr-font-unit: var(--lbr-font-unit, 8px);
 $lbr-line-height-unit: var(--lbr-line-height-unit, 8px);
 $-font-family: var(--lbr-font-family, var(--sjs-font-family, var(--font-family)));
-$-base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @mixin lbrDefaultFont {
-  // --thm-default-font-size: var(--sjs-font-size, calc(2 * #{$-base-unit}));
-  // --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
-
   font-family: $-font-family;
   font-size: var(--lbr-font-default-size, var(--lbr-font-size-x2));
   font-style: normal;
@@ -23,9 +19,6 @@ $-base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin lbrSmallFont {
-  // --thm-small-line-height: var(--sjs-font-size, calc(2 * #{$-base-unit}));
-  // --thm-small-font-size: calc(0.75 * var(--thm-small-line-height));
-
   font-family: $-font-family;
   font-size: var(--lbr-font-small-size, var(--lbr-font-size-x150));
   font-style: normal;

diff --git a/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css b/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css
@@ -767,7 +767,7 @@
   --ctr-data-table-background-color: var(--sjs-layer-3-background-500);
   --ctr-data-table-border-color: var(--sjs-border-25);
   --ctr-data-table-border-width: var(--sjs-stroke-x1);
-  --ctr-separator-width: var(--sjs-size-x0125);
+  --ctr-separator-width: var(--sjs-stroke-x1);
   --ctr-separator-color: var(--sjs-border-25);
   --ctr-separator-margin-vertical-small: var(--sjs-spacing-x1);
   --ctr-separator-margin-horizontal-small: var(--sjs-spacing-x1);
@@ -941,7 +941,7 @@
   --ctr-list-item-contextual-buttons-height: var(--sjs-font-size-x2);
   --ctr-toolbox-separator-color: var(--sjs-border-25);
   --ctr-toolbox-separator-padding-top: var(--sjs-spacing-x1);
-  --ctr-toolbox-separator-height: var(--sjs-size-x0125);
+  --ctr-toolbox-separator-height: var(--sjs-stroke-x1);
   --ctr-toolbox-separator-max-width: var(--sjs-size-x9);
   --ctr-toolbox-separator-padding-left: var(--sjs-spacing-x2);
   --ctr-toolbox-separator-padding-bottom: var(--sjs-spacing-x1);
@@ -1138,8 +1138,7 @@
   --ctr-survey-placeholder-border-color: var(--sjs-border-25);
   --ctr-survey-placeholder-border-width: var(--lbr-stroke-x1);
   --ctr-survey-drop-indicator-color: var(--sjs-secondary-background-500);
-  --ctr-survey-drop-indicator-corner-radius: var(--lbr-corner-radius-round);
-  --ctr-survey-drop-indicator-width: var(--lbr-size-x025);
+  --ctr-survey-drop-indicator-width: var(--lbr-stroke-x2);
   --ctr-search-background-color: var(--sjs-layer-1-background-500);
   --ctr-search-corner-radius: var(--sjs-corner-radius-round);
   --ctr-search-padding-left: var(--sjs-spacing-x2);
@@ -3439,4 +3438,6 @@
   --lbr-popup-toolbar-header-padding-top: var(--lbr-spacing-x1);
   --lbr-popup-toolbar-header-padding-right: var(--lbr-spacing-x1);
   --lbr-popup-toolbar-header-padding-left: var(--lbr-spacing-x2);
-}
+  --lbr-separator-width: var(--lbr-stroke-x1);
+}
+
diff --git a/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css b/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css
@@ -758,7 +758,7 @@
   --ctr-data-table-background-color: var(--sjs-layer-1-background-400);
   --ctr-data-table-border-color: var(--sjs-border-25);
   --ctr-data-table-border-width: var(--sjs-stroke-x1);
-  --ctr-separator-width: var(--sjs-size-x0125);
+  --ctr-separator-width: var(--sjs-stroke-x1);
   --ctr-separator-color: var(--sjs-border-25);
   --ctr-separator-margin-vertical-small: var(--sjs-spacing-x1);
   --ctr-separator-margin-horizontal-small: var(--sjs-spacing-x1);
@@ -932,7 +932,7 @@
   --ctr-list-item-contextual-buttons-height: var(--sjs-font-size-x2);
   --ctr-toolbox-separator-color: var(--sjs-border-25);
   --ctr-toolbox-separator-padding-top: var(--sjs-spacing-x1);
-  --ctr-toolbox-separator-height: var(--sjs-size-x0125);
+  --ctr-toolbox-separator-height: var(--sjs-stroke-x1);
   --ctr-toolbox-separator-max-width: var(--sjs-size-max);
   --ctr-toolbox-separator-padding-left: var(--sjs-spacing-x2);
   --ctr-toolbox-separator-padding-bottom: var(--sjs-spacing-x1);
@@ -1128,8 +1128,7 @@
   --ctr-survey-placeholder-border-color: var(--sjs-border-25);
   --ctr-survey-placeholder-border-width: var(--lbr-stroke-x1);
   --ctr-survey-drop-indicator-color: var(--sjs-primary-background-500);
-  --ctr-survey-drop-indicator-corner-radius: var(--lbr-corner-radius-round);
-  --ctr-survey-drop-indicator-width: var(--lbr-size-x025);
+  --ctr-survey-drop-indicator-width: var(--lbr-stroke-x2);
   --ctr-search-background-color: var(--sjs-layer-1-background-500);
   --ctr-search-corner-radius: var(--sjs-corner-radius-round);
   --ctr-search-padding-left: var(--sjs-spacing-x2);
@@ -3439,4 +3438,6 @@
   --lbr-popup-toolbar-header-padding-top: var(--lbr-spacing-x1);
   --lbr-popup-toolbar-header-padding-right: var(--lbr-spacing-x1);
   --lbr-popup-toolbar-header-padding-left: var(--lbr-spacing-x2);
-}
+  --lbr-separator-width: var(--lbr-stroke-x1);
+}
+