work for #6063 Scaling the adorner button of the question

surveyjs · Nov 22, 2024 · 63df9b8 · 63df9b8
1 parent 94e92eb
commit 63df9b8
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 27 deletions.
diff --git a/packages/survey-creator-core/src/components/item-value.scss b/packages/survey-creator-core/src/components/item-value.scss
@@ -65,7 +65,9 @@
   height: calcSize(2);
   width: calcSize(2);
   box-sizing: content-box;
-  transition: background $creator-transition-duration, background-color $creator-transition-duration;
+  transition:
+    background $creator-transition-duration,
+    background-color $creator-transition-duration;
 
   .sv-svg-icon {
     display: block;
@@ -81,12 +83,12 @@
 .svc-item-value-controls__drag-icon {
   display: block;
   transition: opacity $creator-transition-duration;
-  width: calcSize(3);
-  height: calcSize(3);
+  width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+  height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
 
   .sv-svg-icon {
-    width: calcSize(3);
-    height: calcSize(3);
+    width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+    height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
   }
 }
 
@@ -98,16 +100,19 @@
 }
 
 .svc-item-value-controls__drag {
-  padding: calcSize(0.5) calcSize(1);
+  padding: var(--ctr-survey-item-actionbar-drag-indicator-padding-top, calcSize(0.5))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-right, calcSize(1))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-left, calcSize(1));
   height: auto;
   width: auto;
   cursor: move;
   opacity: var(--ctr-survey-item-actionbar-drag-indicator-opacity, 0.25);
 
   .svc-item-value-controls__drag-icon {
     opacity: 0;
-    width: calcSize(3);
-    height: calcSize(3);
+    width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+    height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
   }
 
   use {

diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
@@ -75,9 +75,30 @@ svc-page {
 
 .svc-page-toolbar__item {
   @include defaultActionButtonSettings;
-  margin: 0 calcSize(0.5);
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
   border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5));
-  padding: calcSize(1);
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
   justify-content: center;
   align-items: center;
 
@@ -86,8 +107,16 @@ svc-page {
 }
 
 .svc-page-toolbar__item--with-text {
-  padding-inline-end: calcSize(1);
-  gap: calcSize(0.5);
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
 
 .svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item {
@@ -128,8 +157,18 @@ svc-page {
 }
 
 .svc-page-toolbar-item__icon {
-  width: calcSize(2);
-  height: calcSize(2);
+  --thm-survey-page-toolbar-item-icon-width: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --thm-survey-page-toolbar-item-icon-height: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  width: var(--thm-survey-page-toolbar-item-icon-width, calcSize(2));
+  height: var(--thm-survey-page-toolbar-item-icon-height, calcSize(2));
 }
 
 .svc-page-toolbar-item__icon use {

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -54,10 +54,30 @@ svc-question {
 
 .svc-survey-element-toolbar__item {
   @include defaultActionButtonSettings;
-
-  margin: 0 calcSize(0.5);
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.25));
-  padding: calcSize(1);
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
 
   justify-content: center;
   align-items: center;
@@ -69,8 +89,15 @@ svc-question {
 }
 
 .svc-survey-element-toolbar__item--with-text {
-  padding-inline-end: calcSize(1);
-  gap: calcSize(0.5);
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
 
 .svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item {
@@ -82,18 +109,29 @@ svc-question {
 }
 
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+
   flex-direction: row-reverse;
-  padding-inline-start: calcSize(1);
-  gap: calcSize(0.5);
+  padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
 
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
-  padding: calcSize(0.5);
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
 
   .svc-survey-element-toolbar-item__icon {
     padding: 0;
-    width: calcSize(3);
-    height: calcSize(3);
+    width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
+    height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
   }
 }
 
@@ -149,8 +187,19 @@ svc-question {
 
 .svc-survey-element-toolbar-item__icon,
 .svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
-  width: calcSize(2);
-  height: calcSize(2);
+  --ctr-survey-question-toolbar-item-icon-width: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --ctr-survey-question-toolbar-item-icon-height: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+
+  width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
+  height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
 }
 
 .svc-survey-element-toolbar-item__title {
@@ -1396,7 +1445,10 @@ svc-question,
 
 .svc-survey-element-top-toolbar__item {
   @include defaultActionButtonSettings;
-  padding: calcSize(0.5);
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left-small, calcSize(0.5));
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px);
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
   background-color: transparent;