fixed separators #5966

packages/survey-creator-core/creator-themes-import.js

@@ -20,13 +20,12 @@ var themeConstants = {
   "default": {
     "--ctr-toolbox-scrollbar-left": "auto",
     "--ctr-toolbox-scrollbar-right": "0",
-    "--ctr-toolbox-scrollbar-display": "none",
     "--ctr-toolbox-scroller-align-items": "flex-start",
     "--ctr-toolbox-item-submenu-button-right": "8px",
     "--ctr-toolbox-item-align": "stretch",
     "--ctr-toolbox-submenu-offset": "13px",
     "--ctr-toolbox-width-compact": "72px",
-    "--ctr-toolbox-separator-width": "calc(100% + 8px)",
+    "--ctr-toolbox-separator-width": "208px",
     "--ctr-toolbox-separator-width-compact": "40px",
     "--ctr-toolbox-item-banner-icon-display": "none",
     "--ctr-toolbox-item-banner-beak-display": "block",

packages/survey-creator-core/src/components/toolbox/toolbox.scss

@@ -8,7 +8,7 @@ svc-toolbox {
 
 .svc-toolbox {
   --toolbox-width: var(--ctr-toolbox-min-width, 224.984375px /*calcSize(28)*/);
-  --toolbox-width-compact: var(--ctr-toolbox-width-compact, calc(10.5 *#{$base-unit}));
+  --toolbox-width-compact: var(--ctr-toolbox-width-compact, calc(9 *#{$base-unit}));
 
   width: auto;
   height: 100%;
@@ -97,7 +97,7 @@ svc-toolbox {
   overflow-x: hidden;
   width: calcSize(2);
   margin-inline-start: calcSize(-0.5);
-  display: var(--ctr-toolbox-scrollbar-display, none);
+  display: none;
   z-index: 30;
   padding: var(--ctr-toolbox-padding-top, calcSize(1)) 0 var(--ctr-toolbox-padding-bottom, calcSize(2)) 0;
   @-moz-document url-prefix() {
@@ -136,7 +136,7 @@ svc-toolbox {
   .svc-toolbox__search-container {
     padding-top: var(--ctr-toolbox-padding-top, calcSize(1.5));
     padding-inline-start: var(--ctr-toolbox-group-padding-left, calcSize(1.5));
-    padding-inline-end: var(--ctr-toolbox-group-padding-left, calcSize(3));
+    padding-inline-end: var(--ctr-toolbox-group-padding-left, calcSize(1.5));
     padding-bottom: calc(var(--ctr-toolbox-separator-padding-top, 8px) + var(--ctr-toolbox-gap, 4px));
   }
   .svc-toolbox__category-separator {
@@ -234,12 +234,17 @@ svc-toolbox {
   min-height: 1px;
   width: var(--toolbox-width);
   align-self: center;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .svc-toolbox--no-separators {
   .svc-toolbox__category-separator {
     display: none;
   }
+  .svc-toolbox__category-separator--search {
+    display: block;
+  }
 }
 
 .svc-toolbox__category-header-wrapper {

packages/survey-creator-core/src/themes/default.ts

@@ -3,13 +3,12 @@ const Theme = {
   "cssVariables": {
     "--ctr-toolbox-scrollbar-left": "auto",
     "--ctr-toolbox-scrollbar-right": "0",
-    "--ctr-toolbox-scrollbar-display": "none",
     "--ctr-toolbox-scroller-align-items": "flex-start",
     "--ctr-toolbox-item-submenu-button-right": "8px",
     "--ctr-toolbox-item-align": "stretch",
     "--ctr-toolbox-submenu-offset": "13px",
     "--ctr-toolbox-width-compact": "72px",
-    "--ctr-toolbox-separator-width": "calc(100% + 8px)",
+    "--ctr-toolbox-separator-width": "208px",
     "--ctr-toolbox-separator-width-compact": "40px",
     "--ctr-toolbox-item-banner-icon-display": "none",
     "--ctr-toolbox-item-banner-beak-display": "block",
@@ -352,7 +351,6 @@ const Theme = {
     "--ctr-toolbox-separator-color": "var(--sjs-border-25)",
     "--ctr-toolbox-separator-padding-top": "var(--sjs-spacing-x1)",
     "--ctr-toolbox-separator-max-width": "var(--sjs-size-max)",
-    "--ctr-toolbox-separator-padding-bottom": "var(--sjs-spacing-x1)",
     "--ctr-toolbox-gap": "var(--sjs-spacing-x05)",
     "--ctr-toolbox-padding-top": "var(--sjs-spacing-x150)",
     "--ctr-toolbox-padding-bottom": "var(--sjs-spacing-x2)",
@@ -423,7 +421,6 @@ const Theme = {
     "--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)",
     "--ctr-toolbox-search-icon-color-placeholder": "var(--sjs-layer-1-foreground-50)",
     "--ctr-toolbox-search-padding-bottom": "var(--sjs-spacing-x250)",
-    "--ctr-toolbox-search-border-color": "var(--sjs-border-25)",
     "--ctr-toolbox-search-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-toolbox-search-border-width-bottom": "var(--sjs-stroke-x1)",
     "--ctr-toolbox-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)",
@@ -436,16 +433,12 @@ const Theme = {
     "--ctr-toolbox-group-header-margin-bottom": "var(--sjs-spacing-x1)",
     "--ctr-toolbox-separator-padding-left-compact": "var(--sjs-spacing-x2)",
     "--ctr-toolbox-separator-padding-right-compact": "var(--sjs-spacing-x2)",
-    "--ctr-font-large-size": "var(--sjs-font-size-x4)",
-    "--ctr-font-large-line-height": "var(--sjs-line-height-x5)",
     "--ctr-font-medium-size": "var(--sjs-font-size-x3)",
     "--ctr-font-medium-line-height": "var(--sjs-line-height-x4)",
     "--ctr-font-default-size": "var(--sjs-font-size-x2)",
     "--ctr-font-default-line-height": "var(--sjs-line-height-x3)",
     "--ctr-font-small-size": "var(--sjs-font-size-x150)",
     "--ctr-font-small-line-height": "var(--sjs-line-height-x2)",
-    "--ctr-font-code-size": "var(--sjs-font-size-x2)",
-    "--ctr-font-code-line-height": "var(--sjs-line-height-x3)",
     "--ctr-survey-checkboxes-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
     "--ctr-survey-radio-button-group-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
     "--ctr-survey-radio-button-group-item-background-color-floating": "var(--sjs-layer-1-background-500)",
@@ -505,7 +498,6 @@ const Theme = {
     "--ctr-toolbox-item-background-color-submenu": "var(--sjs-layer-1-background-500)",
     "--ctr-toolbox-item-text-color-submenu": "var(--sjs-layer-2-foreground-100)",
     "--ctr-toolbox-min-width": "var(--sjs-size-x32)",
-    "--ctr-font-default-line-height-all-caps": "var(--sjs-line-height-x2)",
     "--ctr-page-banner-background-color": "var(--sjs-secondary-background-500)",
     "--ctr-page-banner-text-color": "var(--sjs-secondary-foreground-100)",
     "--ctr-toolbox-group-padding-left-compact": "var(--sjs-spacing-x150)",