From d1d91cb928a3a2b2ed2e31ac25ea607b20b6ecae Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Tue, 22 Oct 2024 15:35:53 +0300 Subject: [PATCH] fixed separators #5966 --- packages/survey-creator-core/creator-themes-import.js | 3 +-- .../src/components/toolbox/toolbox.scss | 11 ++++++++--- packages/survey-creator-core/src/themes/default.ts | 10 +--------- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js index d8ba76a127..ee6a105c9d 100644 --- a/packages/survey-creator-core/creator-themes-import.js +++ b/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", diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox.scss b/packages/survey-creator-core/src/components/toolbox/toolbox.scss index 4d1ec7165b..424bf72a50 100644 --- a/packages/survey-creator-core/src/components/toolbox/toolbox.scss +++ b/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 { diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts index f17bb7920f..26a4754cb7 100644 --- a/packages/survey-creator-core/src/themes/default.ts +++ b/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)",