diff --git a/packages/survey-creator-angular/angular.json b/packages/survey-creator-angular/angular.json index 09ab9fd1f3..83998af1fc 100644 --- a/packages/survey-creator-angular/angular.json +++ b/packages/survey-creator-angular/angular.json @@ -71,6 +71,10 @@ "./example/angular-ui/src/assets", "./example/angular-ui/src/testCafe" ], + "styles": [ + "./node_modules/survey-core/defaultV2.css", + "./node_modules/survey-creator-core/survey-creator-core.css" + ], "scripts": [] }, "configurations": { @@ -78,8 +82,8 @@ "buildOptimizer": true, "budgets": [ { - "type": "initial", - "maximumWarning": "500kb", + "type": "allScript", + "maximumWarning": "10mb", "maximumError": "10mb" }, { @@ -129,4 +133,4 @@ } }, "defaultProject": "survey-creator-angular" -} +} \ No newline at end of file diff --git a/packages/survey-creator-angular/example/angular-ui/src/app/app.component.scss b/packages/survey-creator-angular/example/angular-ui/src/app/app.component.scss index c8ceb6d67e..20d9ce0666 100644 --- a/packages/survey-creator-angular/example/angular-ui/src/app/app.component.scss +++ b/packages/survey-creator-angular/example/angular-ui/src/app/app.component.scss @@ -1,3 +1 @@ -@import "survey-core/defaultV2.css"; -@import "survey-creator-core/survey-creator-core.css"; app-root { position: fixed; top: 0; bottom: 0; right: 0; left: 0;} \ No newline at end of file diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js index 369b9877ae..66defca234 100644 --- a/packages/survey-creator-core/creator-themes-import.js +++ b/packages/survey-creator-core/creator-themes-import.js @@ -125,7 +125,9 @@ Object.keys(themeNameMap).forEach(themeName => { const distinctions = themeConstants[themeNameMap[themeName]] || {}; Object.keys(curThemeCssVariables || {}).forEach(variableKey => { const variableValue = curThemeCssVariables[variableKey]; - if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) { + if(variableKey.indexOf("--ctr-shadow-") > -1 || variableKey.indexOf("--lbr-shadow-") > -1 || variableKey.indexOf("-unit") > -1) { + distinctions[variableKey] = variableValue; + } else if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) { distinctions[variableKey] = getCorrectValue(variableKey, variableValue); } }); diff --git a/packages/survey-creator-core/src/components/creator.scss b/packages/survey-creator-core/src/components/creator.scss index 673765be05..c8839c0349 100644 --- a/packages/survey-creator-core/src/components/creator.scss +++ b/packages/survey-creator-core/src/components/creator.scss @@ -53,6 +53,18 @@ survey-creator, .sv-drag-drop-choices-shortcut { .sv-drag-drop-choices-shortcut__content { background: var(--ctr-survey-radio-button-group-item-background-color-floating, $background); + border-radius: var(--ctr-survey-radio-button-group-item-corner-radius-floating, calcSize(4.5)); + box-shadow: + var(--ctr-survey-radio-button-group-item-shadow-floating-2-offset-x, 0px) + var(--ctr-survey-radio-button-group-item-shadow-floating-2-offset-y, 2px) + var(--ctr-survey-radio-button-group-item-shadow-floating-2-blur, 8px) + var(--ctr-survey-radio-button-group-item-shadow-floating-2-spread, 0px) + var(--ctr-survey-radio-button-group-item-shadow-floating-2-color, rgba(0, 76, 68, 0.1)), + var(--ctr-survey-radio-button-group-item-shadow-floating-1-offset-x, 0px) + var(--ctr-survey-radio-button-group-item-shadow-floating-1-offset-y, 16px) + var(--ctr-survey-radio-button-group-item-shadow-floating-1-blur, 32px) + var(--ctr-survey-radio-button-group-item-shadow-floating-1-spread, 0px) + var(--ctr-survey-radio-button-group-item-shadow-floating-1-color, rgba(0, 76, 68, 0.1)); .sd-item__decorator { } diff --git a/packages/survey-creator-core/src/components/item-value.scss b/packages/survey-creator-core/src/components/item-value.scss index 73681f2e46..cb8b422adf 100644 --- a/packages/survey-creator-core/src/components/item-value.scss +++ b/packages/survey-creator-core/src/components/item-value.scss @@ -261,7 +261,7 @@ .svc-item-value__ghost { display: none; background: $background-dim; - border-radius: calcSize(12.5); + border-radius: var(--ctr-survey-radio-button-group-item-corner-radius-floating, calcSize(12.5)); width: calcSize(25); height: 40px; z-index: 11; diff --git a/packages/survey-creator-core/src/components/link-value.scss b/packages/survey-creator-core/src/components/link-value.scss index fbe0e45ecc..d79913563d 100644 --- a/packages/survey-creator-core/src/components/link-value.scss +++ b/packages/survey-creator-core/src/components/link-value.scss @@ -9,6 +9,7 @@ } .svc-link-value-button { margin-left: calcSize(-2); + border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5)); } .svc-question-link__clear-button { color: $red; diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss index 15c7c192b3..929e363369 100644 --- a/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss +++ b/packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss @@ -48,8 +48,8 @@ svc-page-navigator-item, border-radius: 50%; width: var(--ctr-page-navigator-item-dot-radius-small, 6px); height: var(--ctr-page-navigator-item-dot-radius-small, 6px); - right: calc(50% - 6px / 2); - top: calc(50% - 6px / 2); + right: calc(50% - var(--ctr-page-navigator-item-dot-radius-small, 6px) / 2); + top: calc(50% - var(--ctr-page-navigator-item-dot-radius-small, 6px) / 2); background: var(--ctr-page-navigator-item-dot-color-default, $border); } @@ -75,9 +75,7 @@ svc-page-navigator-item, right: calcSize(0.5); display: flex; align-items: center; - line-height: calcSize(4); animation: 0.5s ease-in; - padding: 0; opacity: 0; max-width: 0; z-index: 20; @@ -85,10 +83,15 @@ svc-page-navigator-item, top: 0; height: 100%; background-color: var(--ctr-page-navigator-item-background-color-hovered, $background); - border-radius: calcSize(12.5); box-shadow: $shadow-medium; transition: opacity $creator-transition-duration; + border-radius: var(--ctr-page-navigator-item-corner-radius, calcSize(12.5)); + padding: var(--ctr-page-navigator-item-padding-top, 0) var(--ctr-page-navigator-item-padding-right, 0) + var(--ctr-page-navigator-item-padding-bottom, 0) var(--ctr-page-navigator-item-padding-left-hovered, 0); + flex-direction: row; + gap: var(--ctr-page-navigator-item-gap, 8px); + .svc-page-navigator-item__dot { position: absolute; display: inline-block; @@ -112,17 +115,6 @@ svc-page-navigator-item, } } -.svc-page-navigator-item-content:not(.svc-page-navigator-item--disabled) { - .svc-page-navigator-item__banner { - .svc-page-navigator-item__dot { - width: calcSize(1); - height: calcSize(1); - border: none; - background: var(--ctr-page-navigator-item-dot-color-hovered, $primary); - } - } -} - .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover, .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus { .svc-page-navigator-item__banner { @@ -131,6 +123,13 @@ svc-page-navigator-item, opacity: 1; background: var(--ctr-page-navigator-item-background-color-hovered, $background); } + + .svc-page-navigator-item__dot { + border: none; + width: var(--ctr-page-navigator-item-dot-radius-large, calcSize(1)); + height: var(--ctr-page-navigator-item-dot-radius-large, calcSize(1)); + background: var(--ctr-page-navigator-item-dot-color-hovered, $primary); + } } .svc-creator__toolbox--right, diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss index 2cb9bd5545..79eaec18f7 100644 --- a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss +++ b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss @@ -10,8 +10,8 @@ svc-page-navigator, display: block; height: calcSize(3); width: calcSize(3); - padding: calcSize(1.25); - border-radius: 50%; + border-radius: var(--ctr-page-navigator-button-corner-radius, 50%); + padding: var(--ctr-page-navigator-button-padding, calcSize(1.25)); cursor: pointer; transition: background-color $creator-transition-duration; diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss index 2b444939ca..22e08e8c93 100644 --- a/packages/survey-creator-core/src/components/popup.scss +++ b/packages/survey-creator-core/src/components/popup.scss @@ -60,6 +60,17 @@ color: var(--ctr-popup-title-color, $foreground); } + &.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content, + .sv-popup__body-content { + border-radius: var(--ctr-popup-menu-corner-radius, calcSize(0.5)); + } + + &.svc-property-editor.sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__body-content { + background-color: var(--ctr-popup-background-color, $background-dim); + border-radius: calc(4 * (var(--ctr-popup-menu-corner-radius, 4px))) + calc(4 * (var(--ctr-popup-menu-corner-radius, 4px))) 0px 0px; + } + &.sv-popup--dropdown { .sv-popup__body-content { background-color: var(--ctr-contextual-menu-background-color, $background); @@ -72,6 +83,11 @@ } } + .sv-list { + padding-inline-start: var(--ctr-list-padding-left); + padding-inline-end: var(--ctr-list-padding-right); + } + .sv-list__filter { background-color: var(--ctr-contextual-menu-background-color, $background); border-bottom: 1px solid var(--ctr-list-search-border-color, $border-inside); @@ -95,6 +111,7 @@ @include ctrDefaultFont; color: var(--ctr-list-item-text-color, $foreground-dim); transition: background-color $creator-transition-duration, color $creator-transition-duration; + border-radius: var(--ctr-list-item-corner-radius); } .sv-list__item-icon use { @@ -139,11 +156,18 @@ &.sv-popup--dropdown-overlay { .sv-popup__button.sv-popup__button { color: var(--ctr-actionbar-button-text-color, $primary); + border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5)); + padding: var(--ctr-actionbar-button-padding-top-medium-text, calcSize(0.5)) + var(--ctr-actionbar-button-padding-right-medium-text, calcSize(2)) + var(--ctr-actionbar-button-padding-bottom-medium-text, calcSize(0.5)) + var(--ctr-actionbar-button-padding-left-medium-text, calcSize(2)); } .sv-popup__body-footer { - background-color: var(--ctr-contextual-menu-footer-background-color, $background-dim); - border-top: 1px solid var(--ctr-contextual-menu-footer-border-color, $border-light); + background-color: var(--ctr-popup-menu-footer-background-color, $background-dim); + border-top: 1px solid var(--ctr-popup-menu-footer-border-color, $border-light); + padding: var(--ctr-popup-menu-footer-padding-top, calcSize(1)) var(--ctr-popup-menu-footer-padding-right, 0) + var(--ctr-popup-menu-footer-padding-bottom, calcSize(1)) var(--ctr-popup-menu-footer-padding-left, 0); } .sv-list__empty-container { @@ -196,10 +220,6 @@ } } } - - .sd-btn { - background: var(--ctr-button-background-color, rgba(0, 0, 0, 0)); - } } &.sv-dropdown-popup.sv-popup--dropdown-overlay { diff --git a/packages/survey-creator-core/src/components/property-panel/property-panel.scss b/packages/survey-creator-core/src/components/property-panel/property-panel.scss index d04059f3c8..1499a27f09 100644 --- a/packages/survey-creator-core/src/components/property-panel/property-panel.scss +++ b/packages/survey-creator-core/src/components/property-panel/property-panel.scss @@ -52,12 +52,12 @@ } .svc-property-grid-placeholder__header { display: flex; - max-width: 256px; + width: var(--ctr-property-grid-placeholder-text-max-width, 256px); + max-width: var(--ctr-property-grid-placeholder-text-max-width, 256px); flex-direction: column; justify-content: center; align-items: center; gap: var(--ctr-property-grid-placeholder-text-gap, 8px); - width: 100%; } .svc-property-grid-placeholder__title { @include ctrDefaultBoldFont; diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar.scss b/packages/survey-creator-core/src/components/side-bar/side-bar.scss index 2f58724b06..05f56ab697 100644 --- a/packages/survey-creator-core/src/components/side-bar/side-bar.scss +++ b/packages/survey-creator-core/src/components/side-bar/side-bar.scss @@ -41,16 +41,16 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0); background: var(--ctr-property-grid-header-background-color, $background); box-shadow: inset 0px -2px 0px var(--ctr-property-grid-header-border-color, $primary); // text-align: right; - line-height: calcSize(3); display: flex; - height: calcSize(8); + padding: var(--ctr-property-grid-header-padding-top, calcSize(1.5)) var(--ctr-property-grid-header-padding-right, calcSize(1)) + var(--ctr-property-grid-header-padding-bottom, calcSize(1.5)) var(--ctr-property-grid-header-padding-left, calcSize(1)); } .svc-side-bar__container-content { display: flex; flex-direction: column; align-items: flex-start; - height: calc(100% - calc(8 * #{$base-unit})); + height: 100%; overflow-y: auto; background-color: var(--ctr-property-grid-background-color, $background); } @@ -70,19 +70,18 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0); @include ctrDefaultFont; display: flex; - line-height: calcSize(4.5); flex-grow: 1; flex-shrink: 0; justify-content: flex-end; - padding: calcSize(1.5) calcSize(2); + padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1)) + var(--ctr-menu-toolbar-button-padding-right, calcSize(1)) var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1)) + var(--ctr-menu-toolbar-button-padding-left, calcSize(1)); color: var(--ctr-menu-toolbar-button-text-color, $foreground); } .svc-side-bar__container-actions { width: 100%; box-sizing: border-box; - padding: calcSize(1.5) calcSize(1); - .sv-action-bar { justify-content: flex-end; padding: 0; @@ -93,6 +92,8 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0); } .sv-action-bar-item:not(.sv-action-bar-item--pressed):enabled { + border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0); + &:focus { background: var(--ctr-menu-toolbar-button-background-color-pressed, $background-dim); } diff --git a/packages/survey-creator-core/src/components/side-bar/tab-control.scss b/packages/survey-creator-core/src/components/side-bar/tab-control.scss index de511e956c..9f9ee2936f 100644 --- a/packages/survey-creator-core/src/components/side-bar/tab-control.scss +++ b/packages/survey-creator-core/src/components/side-bar/tab-control.scss @@ -98,8 +98,6 @@ } .svc-sidebar__header-container { display: flex; - padding: var(--ctr-property-grid-header-padding-top, 12px) var(--ctr-property-grid-header-padding-right, 16px) - var(--ctr-property-grid-header-padding-bottom, 12px) var(--ctr-property-grid-header-padding-left, 16px); justify-content: center; align-items: center; flex: 1 0 0; diff --git a/packages/survey-creator-core/src/components/switcher/switcher.scss b/packages/survey-creator-core/src/components/switcher/switcher.scss index 177d7fe33f..3f3ba4ce59 100644 --- a/packages/survey-creator-core/src/components/switcher/switcher.scss +++ b/packages/survey-creator-core/src/components/switcher/switcher.scss @@ -8,7 +8,7 @@ .svc-switcher__title { @include ctrSmallBoldFont; - color: $foreground-light; + color: var(--ctr-property-grid-switcher-text-color, $foreground-light); } .svc-switcher__icon { diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss index d7153c7222..201e2cecec 100644 --- a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss +++ b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss @@ -13,6 +13,8 @@ svc-tab-json-editor-textarea { .svc-json-editor-tab__content-area { @include ctrCodeFont; + color: var(--ctr-code-viewer-text-color, #505050); + background: var(--ctr-code-viewer-background-color, $background); width: 100%; height: 100%; border: none; diff --git a/packages/survey-creator-core/src/components/tabs/logic-ui.scss b/packages/survey-creator-core/src/components/tabs/logic-ui.scss index 1b6f200e80..0178ffe906 100644 --- a/packages/survey-creator-core/src/components/tabs/logic-ui.scss +++ b/packages/survey-creator-core/src/components/tabs/logic-ui.scss @@ -44,8 +44,12 @@ @include ctrDefaultBoldFont; -webkit-appearance: none; appearance: none; - padding: calcSize(1) calcSize(2); - border-radius: calcSize(12.5); + border-radius: var(--ctr-expression-item-corner-radius, calcSize(12.5)); + padding: var(--ctr-expression-item-padding-top, calcSize(1)) + var(--ctr-expression-item-padding-right, calcSize(2)) + var(--ctr-expression-item-padding-bottom, calcSize(1)) + var(--ctr-expression-item-padding-left, calcSize(2)); + border: none; outline: none; color: var(--ctr-expression-item-text-color-parameter-empty, $foreground-light); @@ -324,6 +328,7 @@ .sl-list__item-body { padding-block: calcSize(1.5); + border-radius: var(--ctr-list-item-corner-radius, 4px); } .svc-logic-placeholder { diff --git a/packages/survey-creator-core/src/components/tabs/logic.scss b/packages/survey-creator-core/src/components/tabs/logic.scss index f23a074d57..684c42a8ac 100644 --- a/packages/survey-creator-core/src/components/tabs/logic.scss +++ b/packages/survey-creator-core/src/components/tabs/logic.scss @@ -21,7 +21,8 @@ height: calcSize(6); box-sizing: border-box; - border-radius: calcSize(12.5); + border-radius: var(--ctr-collapse-button-corner-radius, calcSize(12.5)); + padding: 0; transition: background-color $creator-transition-duration; @@ -183,11 +184,13 @@ button.sl-panel__done-button { @include ctrDefaultBoldFont; width: auto; - padding: calcSize(1) calcSize(4); - margin: calcSize(2) 0 0 0; + margin: var(--ctr-expression-rows-gap, calcSize(2)) 0 0 0; color: var(--ctr-expression-item-text-color-button, $primary); background-color: var(--ctr-expression-item-background-color-button, $primary-light); - border-radius: calcSize(12.5); + border-radius: var(--ctr-expression-item-corner-radius, calcSize(12.5)); + padding: var(--ctr-expression-item-padding-top, calcSize(1)) + var(--ctr-expression-item-padding-right-button, calcSize(4)) + var(--ctr-expression-item-padding-bottom, calcSize(1)) var(--ctr-expression-item-padding-left-button, calcSize(4)); display: flex; align-items: center; @@ -221,7 +224,7 @@ .sl-question { display: flex; align-items: center; - margin-top: calcSize(2); + margin-top: var(--ctr-expression-rows-gap, calcSize(2)); } .sl-row { @@ -262,25 +265,25 @@ padding-right: calcSize(1); } .svc-logic-question-text-editor { - margin-top: calcSize(2); + margin-top: var(--ctr-expression-rows-gap, calcSize(2)); } .svc-logic-question-value { --sd-base-padding: calc(5 * #{$base-unit}); --sd-base-vertical-padding: calc(4 * #{$base-unit}); --sd-page-vertical-padding: calc(3 * #{$base-unit}); padding-right: calcSize(5); - margin-top: calcSize(2); + margin-top: var(--ctr-expression-rows-gap, calcSize(2)); } .svc-logic_trigger-editor { - margin-top: calcSize(2); + margin-top: var(--ctr-expression-rows-gap, calcSize(2)); } .svc-logic_trigger-editor .svc-logic-question-value { margin-top: 0; } -.sv-popup.sv-property-editor { +.sv-popup.svc-property-editor { .sl-row { flex-flow: nowrap; } diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts index 8590c045a5..202982871a 100644 --- a/packages/survey-creator-core/src/components/tabs/translation.ts +++ b/packages/survey-creator-core/src/components/tabs/translation.ts @@ -1483,7 +1483,7 @@ export class TranslationEditor { onHide: () => { this.dispose(); }, - cssClass: "sv-property-editor st-translation-dialog svc-creator-popup", + cssClass: "svc-property-editor st-translation-dialog svc-creator-popup", title: dialogTitle, displayMode: this.options.isMobileView ? "overlay" : "popup" }, this.options.rootElement); diff --git a/packages/survey-creator-core/src/creator-theme/button.scss b/packages/survey-creator-core/src/creator-theme/button.scss index 3c734b6781..c3f054349b 100644 --- a/packages/survey-creator-core/src/creator-theme/button.scss +++ b/packages/survey-creator-core/src/creator-theme/button.scss @@ -7,7 +7,7 @@ text-align: center; background-color: var(--ctr-button-background-color, $background); box-shadow: $shadow-small; - border-radius: calcSize(0.5); + border-radius: var(--ctr-button-corner-radius, calcSize(0.5)); cursor: pointer; user-select: none; outline: solid calcSize(0.25) transparent; diff --git a/packages/survey-creator-core/src/custom-questions/boolean-switch.scss b/packages/survey-creator-core/src/custom-questions/boolean-switch.scss index f8839a7d2b..7b71c184a8 100644 --- a/packages/survey-creator-core/src/custom-questions/boolean-switch.scss +++ b/packages/survey-creator-core/src/custom-questions/boolean-switch.scss @@ -34,6 +34,10 @@ &:focus-visible { box-shadow: 0px 0px 0px 2px var(--ctr-toggle-button-border-color-focused, #19b394); } + + &:hover { + background: var(--ctr-toggle-button-background-color-hovered, #f8f8f8); + } } .spg-boolean-switch__button--checked { @@ -70,6 +74,7 @@ .spg-boolean-switch__thumb-circle { border-radius: var(--ctr-toggle-button-thumb-corner-radius, 1024px); + border: var(--ctr-toggle-button-thumb-border-width, 0px) solid var(--ctr-toggle-button-thumb-border-color, rgba(0, 0, 0, 0.16)); display: flex; flex-direction: row; gap: 0px; diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss index e24cd90390..dfbc604c8f 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss @@ -1,16 +1,12 @@ .spg-action-bar { display: flex; box-sizing: content-box; - padding-right: calcSize(0.5); position: relative; align-items: center; margin-left: auto; overflow: hidden; white-space: nowrap; - .sv-action:not(.sv-action--hidden):not(:last-of-type)>.sv-action__content { - padding-right: 0; - } } .spg-action-button { @@ -19,11 +15,14 @@ -moz-appearance: none; appearance: none; display: flex; - padding: calcSize(1); + padding: var(--ctr-actionbar-button-padding-top-large-icon, calcSize(1)) + var(--ctr-actionbar-button-padding-right-large-icon, calcSize(1)) + var(--ctr-actionbar-button-padding-bottom-large-icon, calcSize(1)) + var(--ctr-actionbar-button-padding-left-large-icon, calcSize(1)); box-sizing: border-box; border: none; color: var(--ctr-actionbar-button-text-color, $primary); - border-radius: calcSize(12.5); + border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5)); background-color: transparent; cursor: pointer; transition: background-color $creator-transition-duration, opacity $creator-transition-duration; diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss index 86c1e4bc07..4093b774b2 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-buttongroup.scss @@ -81,8 +81,16 @@ } .spg-button-group__item-caption { opacity: var(--ctr-button-group-item-text-opacity-disabled, 0.25); + color: var(--ctr-button-group-item-text-color-disabled, rgba(0, 0, 0, 0.91)); } &:hover { background-color: var(--ctr-button-group-item-background-color-disabled, $background-dim); } } + +.spg-button-group__item--selected.spg-button-group__item--disabled { + @include ctrDefaultFont; + box-shadow: inset 0 0 0 var(--ctr-button-group-item-border-width-selected-disabled, 1px) + var(--ctr-button-group-item-border-color, $border); + background: var(--ctr-button-group-item-background-color-selected-disabled, #f3f3f3); +} diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-checkbox.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-checkbox.scss index ed07e5ed5a..c625d66a24 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-checkbox.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-checkbox.scss @@ -1,6 +1,6 @@ .spg-checkbox { cursor: pointer; - margin-top: calcSize(2); + margin-top: var(--ctr-checkbox-list-gap-vertical, calcSize(2)); } .spg-checkbox--disabled { @@ -13,6 +13,11 @@ .spg-checkbox__caption { color: var(--ctr-checkbox-text-color-disabled, $foreground-light); } + + .spg-checkbox__rectangle { + border: var(--ctr-checkbox-border-width, 1px) solid var(--ctr-checkbox-border-color-disabled, rgba(0, 0, 0, 0.16)); + background: var(--ctr-checkbox-background-color-disabled, #f3f3f3); + } } .spg-checkbox__caption { @@ -22,10 +27,14 @@ .spg-checkbox__rectangle { background: var(--ctr-checkbox-background-color, $background); - border: 1px solid var(--ctr-checkbox-border-color, $border); + border: var(--ctr-checkbox-border-width, 1px) solid var(--ctr-checkbox-border-color, $border); + border-radius: var(--ctr-checkbox-corner-radius); box-sizing: border-box; - width: calcSize(3); - height: calcSize(3); + width: var(--ctr-checkbox-button-width, calcSize(3)); + height: var(--ctr-checkbox-button-height, calcSize(3)); + display: flex; + justify-content: center; + align-items: center; flex-shrink: 0; // padding: calcSize(0.5); padding: 1px 1px; @@ -39,12 +48,6 @@ } } -.spg-checkbox--disabled { - .spg-checkbox__rectangle:hover { - background: var(--ctr-checkbox-background-color-disabled, $background); - } -} - .spg-checkbox:active .spg-checkbox__rectangle, .spg-checkbox__control:focus+.spg-checkbox__rectangle { outline: 2px solid var(--ctr-checkbox-border-color-focused, $primary); @@ -55,10 +58,8 @@ display: block; opacity: 0; fill: transparent; - width: calcSize(2.5); - height: calcSize(2.5); - background-repeat: no-repeat; - background-size: calcSize(2) calcSize(2); + width: var(--ctr-checkbox-button-check-mark-width, calcSize(2.5)); + height: var(--ctr-checkbox-button-check-mark-height, calcSize(2.5)); transition: opacity $creator-transition-duration, fill $creator-transition-duration; } @@ -94,12 +95,14 @@ .spg-selectbase__label { display: flex; align-items: flex-start; - gap: calcSize(1); + gap: var(--ctr-checkbox-gap, calcSize(1)); } .spg-checkbox { .spg-question__description { - padding: calcSize(1) 0 0 calcSize(4); + padding: 0; + padding-inline-start: var(--ctr-checkbox-description-text-margin-left, calcSize(4)); + color: var(--ctr-checkbox-description-text-color, $foreground-dim-light); } .spg-help-action { diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-color-editor.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-color-editor.scss index bcd99351f3..7b2654c75c 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-color-editor.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-color-editor.scss @@ -13,7 +13,9 @@ .spg-color-editor__color-item { display: flex; - gap: calcSize(2); + gap: var(--ctr-list-item-gap, calcSize(2)); + padding: var(--ctr-list-item-padding-top-with-icon, calcSize(1)) var(--ctr-list-item-padding-right, calcSize(8)) + var(--ctr-list-item-padding-bottom-with-icon, calcSize(1)) var(--ctr-list-item-padding-left, calcSize(2)); .spg-color-editor__color-swatch { margin-left: 0; @@ -24,17 +26,17 @@ position: relative; flex-shrink: 0; flex-grow: 0; - border-radius: 3px; - width: calcSize(4); - height: calcSize(3); + border-radius: var(--ctr-list-item-color-swatch-corner-radius, 3px); + width: var(--ctr-list-item-color-swatch-width, calcSize(4)); + height: var(--ctr-list-item-color-swatch-height, calcSize(3)); box-sizing: border-box; border: 1px solid $border-inside; - margin-left: calcSize(1.5); + margin-left: var(--ctr-editor-color-swatch-margin-left, calcSize(1.5)); .sv-svg-icon { position: absolute; - width: calcSize(2); - height: calcSize(2); + width: var(--ctr-editor-color-swatch-icon-width, calcSize(2)); + height: var(--ctr-editor-color-swatch-icon-height, calcSize(2)); left: 50%; top: 50%; transform: translate(-50%, -50%); diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-dropdown.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-dropdown.scss index 35cbd7b2d9..59d8d67325 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-dropdown.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-dropdown.scss @@ -1,19 +1,33 @@ .spg-dropdown { - border-radius: 0; display: flex; - padding-right: calcSize(5.5); - line-height: calcSize(3); - background-position: right calcSize(1.625) top 50%, 0 0; + padding-right: calc( + var(--ctr-editor-buttons-gap, 4px) + var(--ctr-editor-button-padding-right, 8px) + + var(--ctr-editor-button-padding-left, 8px) + var(--ctr-editor-button-icon-width, 24px) + ); // dropdown_chevron-button offset } -.spg-dropdown__value{ +.spg-dropdown__value { @include ctrDefaultFont; } .spg-dropdown__filter-string-input { @include ctrDefaultFont; - line-height: unset; } .spg-dropdown_chevron-button { - line-height: normal; + width: var(--ctr-editor-button-icon-width, calcSize(3)); + height: var(--ctr-editor-button-icon-height, calcSize(3)); + padding: var(--ctr-editor-button-padding-top, calcSize(1)) var(--ctr-editor-button-padding-right, calcSize(1)) + var(--ctr-editor-button-padding-bottom, calcSize(1)) var(--ctr-editor-button-padding-left, calcSize(1)); + inset-block-start: var(--ctr-editor-padding-top, calcSize(0.5)); + inset-inline-end: var(--ctr-editor-padding-right, calcSize(0.5)); + + &:hover, + &:focus { + border-radius: var(--ctr-editor-button-corner-radius); + background: var(--ctr-editor-button-background-color-hovered, $background-dim); + } +} +.spg-dropdown_chevron-button-svg { + width: var(--ctr-editor-button-icon-width, calcSize(3)); + height: var(--ctr-editor-button-icon-height, calcSize(3)); } .spg-dropdown-popup:not(.sv-popup--dropdown-overlay) { height: 0; diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-input.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-input.scss index 3199eda7ad..5b8004ecc3 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-input.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-input.scss @@ -8,10 +8,14 @@ box-sizing: border-box; width: 100%; border: none; + border-radius: var(--ctr-editor-corner-radius); box-shadow: inset 0 0 0 var(--ctr-editor-border-width, 1px) var(--ctr-editor-border-color, $border-inside); transition: box-shadow $creator-transition-duration; - padding: calcSize(1.5) calcSize(2); + padding-top: calc(var(--ctr-editor-padding-top, 4px) + var(--ctr-editor-content-margin-top, 8px)); + padding-right: calc(var(--ctr-editor-padding-right, 4px) + var(--ctr-editor-content-margin-right, 12px)); + padding-bottom: calc(var(--ctr-editor-padding-bottom, 4px) + var(--ctr-editor-content-margin-bottom, 8px)); + padding-left: calc(var(--ctr-editor-padding-left, 4px) + var(--ctr-editor-content-margin-left, 12px)); outline: none; color: var(--ctr-editor-content-text-color, $foreground); } @@ -31,6 +35,7 @@ .spg-input:disabled::placeholder { color: var(--ctr-editor-content-text-color-disabled, $foreground); opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25); + background-color: var(--ctr-editor-background-color-disabled, $background); } input.spg-input:read-only, @@ -52,9 +57,9 @@ input.spg-input:read-only::placeholder { background: var(--ctr-editor-background-color, $background); border: none; outline: none; - width: calcSize(5); - height: calcSize(5); - padding: calcSize(1); + border-radius: var(--ctr-editor-button-corner-radius); + padding: var(--ctr-editor-button-padding-top, calcSize(1)) var(--ctr-editor-button-padding-right, calcSize(1)) + var(--ctr-editor-button-padding-bottom, calcSize(1)) var(--ctr-editor-button-padding-left, calcSize(1)); line-height: 0; transition: background $creator-transition-duration, opacity $creator-transition-duration; @@ -67,16 +72,20 @@ input.spg-input:read-only::placeholder { opacity: var(--ctr-editor-button-icon-opacity-pressed, 0.5); } - &.spg-input__edit-button--disabled, - &:disabled { - opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25); - background: var(--ctr-editor-background-color, $background); + svg { + width: var(--ctr-editor-button-icon-width, 24px); + height: var(--ctr-editor-button-icon-height, 24px); + fill: var(--ctr-editor-button-icon-color, $foreground-dim-light); } +} + +.spg-input__edit-button--disabled, +.spg-input__edit-button:disabled { + opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25); + background: var(--ctr-editor-background-color-disabled, $background); svg { - height: 24px; - width: 24px; - fill: var(--ctr-editor-button-icon-color, $foreground-dim-light); + fill: var(--ctr-editor-button-icon-color-disabled, $foreground-dim-light); } } @@ -88,9 +97,10 @@ input.spg-input:read-only::placeholder { display: flex; justify-content: space-between; cursor: default; - padding: calcSize(0.5); + padding: var(--ctr-editor-padding-top, calcSize(0.5)) var(--ctr-editor-padding-right, calcSize(0.5)) + var(--ctr-editor-padding-bottom, calcSize(0.5)) var(--ctr-editor-padding-left, calcSize(0.5)); align-items: center; - gap: calcSize(0.5); + gap: var(--ctr-editor-gap, calcSize(0.5)); box-shadow: inset 0 0 0 var(--ctr-editor-border-width, 1px) var(--ctr-editor-border-color, $border-inside); } @@ -114,7 +124,9 @@ input.spg-input:read-only::placeholder { @include ctrDefaultFont; flex-grow: 1; width: 100%; - padding: calcSize(1) calcSize(1.5); + padding: var(--ctr-editor-content-margin-top, calcSize(1)) var(--ctr-editor-content-margin-right, calcSize(1.5)) + var(--ctr-editor-content-margin-bottom, calcSize(1)) var(--ctr-editor-content-margin-left, calcSize(1.5)); + color: var(--ctr-editor-content-text-color, $foreground); outline: none; border: none; @@ -131,5 +143,5 @@ input.spg-input:read-only::placeholder { .spg-input-container__buttons-container { display: flex; - gap: calcSize(0.5); -} \ No newline at end of file + gap: var(--ctr-editor-buttons-gap, calcSize(0.5)); +} diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-matrixdynamic.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-matrixdynamic.scss index 6e5f004655..69aff0f45f 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-matrixdynamic.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-matrixdynamic.scss @@ -48,17 +48,22 @@ } .spg-matrixdynamic__placeholder { - padding: calcSize(6) 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--ctr-property-grid-background-color, $background); border: 1px solid var(--ctr-survey-placeholder-border-color, $border); + border-radius: var(--ctr-data-table-placeholder-corner-radius); box-sizing: border-box; + padding: var(--ctr-survey-placeholder-padding-top-with-button, calcSize(6)) + var(--ctr-survey-placeholder-padding-right, 0) var(--ctr-survey-placeholder-padding-bottom-with-button, calcSize(6)) + var(--ctr-survey-placeholder-padding-left, 0); + gap: var(--ctr-survey-placeholder-gap, calcSize(0.5)); .spg-matrixdynamic__add-btn { display: initial; + margin: 0; } } @@ -95,3 +100,26 @@ fill: var(--ctr-actionbar-button-icon-color, $foreground); } } + +.spg-matrixdynamic__dragged-row { + cursor: grabbing; + position: absolute; + z-index: 10000; + + .spg-table__row { + display: flex; + align-items: center; + flex: 1 0 0; + border-radius: var(--ctr-data-table-row-corner-radius-floating, 0px); + background: var(--ctr-data-table-row-background-color, $background); + box-shadow: + var(--ctr-data-table-row-shadow-floating-1-offset-x, 0px) + var(--ctr-data-table-row-shadow-floating-1-offset-y, 2px) var(--ctr-data-table-row-shadow-floating-1-blur, 6px) + var(--ctr-data-table-row-shadow-floating-1-spread, 0px) + var(--ctr-data-table-row-shadow-floating-1-color, rgba(0, 0, 0, 0.1)), + var(--ctr-data-table-row-shadow-floating-2-offset-x, 0px) + var(--ctr-data-table-row-shadow-floating-2-offset-y, 8px) var(--ctr-data-table-row-shadow-floating-2-blur, 16px) + var(--ctr-data-table-row-shadow-floating-2-spread, 0px) + var(--ctr-data-table-row-shadow-floating-2-color, rgba(0, 0, 0, 0.1)); + } +} diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss index d35930d5d2..8ef46c708d 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss @@ -1,5 +1,4 @@ .spg-panel { - background: $background-dim; } .spg-panel__title { @include ctrDefaultFont; diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss index 376b522fcb..6b4e350b3e 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss @@ -3,20 +3,33 @@ flex-direction: column; align-items: flex-start; padding: 0px; + border-radius: var(--ctr-editor-corner-radius); +} + +.spg-question.spg-question--disabled { + background-color: var(--ctr-editor-background-color-disabled); } .spg-question__header { width: 100%; } +.spg-question--disabled .spg-question__header { + opacity: var(--ctr-editor-label-opacity-disabled, 0.25); +} + .spg-question__title { @include ctrDefaultFont; width: 100%; margin: 0; - padding: calcSize(1) 0; + padding: var(--ctr-label-padding-top, calcSize(1)) var(--ctr-label-padding-right, 0px) + var(--ctr-label-padding-bottom, calcSize(1)) var(--ctr-label-padding-left, 0px); color: var(--ctr-label-text-color, $foreground-light); box-sizing: border-box; } +.spg-question__title.sd-element__title--disabled { + color: var(--ctr-editor-label-color-disabled, $foreground-dim); +} .spg-question__content { width: 100%; @@ -53,6 +66,10 @@ white-space: normal; } +.spg-question--disabled .spg-question__description { + color: var(--ctr-caption-with-actions-description-text-color, $foreground-dim-light); +} + .spg-row-narrow__question { margin-top: calcSize(-2); } diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss index 7bb9470e46..a3a3b6f28e 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss @@ -33,6 +33,7 @@ } .spg-search-editor_container { + // TODO remove v2 --sjs-general-forecolor: rgba(0, 0, 0, 0.91); --sjs-general-forecolor-light: rgba(0, 0, 0, 0.45); } @@ -40,11 +41,14 @@ .spg-search-editor_container { border-bottom: 1px solid var(--ctr-property-grid-search-border-color, $border); background: var(--ctr-property-grid-search-background-color, $background-dim); - padding: calcSize(2); - height: calcSize(3); - width: calc(100% - calc(4 * #{$base-unit})); display: flex; align-items: center; + gap: var(--ctr-property-grid-search-gap, calcSize(1)); + + padding: var(--ctr-property-grid-search-padding-top, calcSize(2)) + var(--ctr-property-grid-search-padding-right, calcSize(2)) + var(--ctr-property-grid-search-padding-bottom, calcSize(2)) + var(--ctr-property-grid-search-padding-left, calcSize(2)); } .spg-search-editor_input { @@ -62,8 +66,7 @@ box-sizing: border-box; width: 100%; outline: none; - padding-inline-start: calcSize(1); - padding-inline-end: calcSize(1); + padding: 0; } .svc-creator--mobile .spg-search-editor_input { @@ -77,14 +80,14 @@ .spg-search-editor_toolbar { display: flex; - gap: calcSize(1.5); + gap: var(--ctr-search-toolbar-gap, calcSize(1.5)); justify-content: flex-end; align-items: center; flex-shrink: 0; } .spg-search-editor_toolbar .sv-action-bar { - gap: calcSize(0.5); + gap: var(--ctr-search-toolbar-gap, calcSize(0.5)); margin: 0; flex-shrink: 0; } @@ -94,20 +97,18 @@ } .spg-search-editor_toolbar .spg-search-editor_bar-item { - padding: calcSize(0.5); height: min-content; margin: 0; + border-radius: var(--ctr-search-button-corner-radius); + padding: var(--ctr-search-button-padding-vertical, calcSize(0.5)) + var(--ctr-search-button-padding-horizontal, calcSize(0.5)) var(--ctr-search-button-padding-vertical, calcSize(0.5)) + var(--ctr-search-button-padding-horizontal, calcSize(0.5)); } .spg-search-editor_bar-item:not(.sv-action-bar-item--pressed) { - &:hover:enabled, &:focus:enabled { - background: var(--ctr-search-button-background-color-clear-hovered, $background-dim); - - .sv-action-bar-item__icon use { - fill: var(--ctr-search-button-icon-color-clear-hovered, $foreground-light) - } + background-color: var(--ctr-property-grid-search-button-background-color-hovered, $background-dim); } } @@ -123,12 +124,12 @@ } .spg-search-editor_search-icon { - width: calcSize(3); - height: calcSize(3); + width: var(--ctr-property-grid-search-icon-width, calcSize(3)); + height: var(--ctr-property-grid-search-icon-height, calcSize(3)); .sv-svg-icon { - width: calcSize(3); - height: calcSize(3); + width: var(--ctr-property-grid-search-icon-width, calcSize(3)); + height: var(--ctr-property-grid-search-icon-height, calcSize(3)); use { fill: var(--ctr-property-grid-search-icon-color, $foreground-light); diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-table.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-table.scss index 4abb4cd5af..8655cde8ba 100644 --- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-table.scss +++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-table.scss @@ -35,13 +35,13 @@ } .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input { - @include ctrDefaultFont; appearance: none; box-shadow: none; - border-radius: calcSize(0.5); + border-radius: var(--ctr-data-table-cell-corner-radius-focused, calcSize(0.5)); background-color: var(--ctr-data-table-row-background-color, transparent); - padding: calcSize(1); height: auto; + padding: var(--ctr-data-table-cell-padding-top, calcSize(1)) var(--ctr-data-table-cell-padding-right, calcSize(1)) + var(--ctr-data-table-cell-padding-bottom, calcSize(1)) var(--ctr-data-table-cell-padding-left, calcSize(1)); &[type="color"] { padding-right: 0; @@ -79,6 +79,7 @@ .spg-table__cell--actions:last-of-type { .spg-action-bar { justify-content: flex-end; + padding-inline-end: var(--ctr-data-table-row-padding-right, calcSize(0.5)); } } @@ -113,7 +114,8 @@ } .spg-table__question-wrapper { box-sizing: border-box; - padding: calcSize(0.5) 0; + padding: var(--ctr-data-table-row-padding-top, calcSize(0.5)) var(--ctr-data-table-row-padding-right, 0) + var(--ctr-data-table-row-padding-bottom, calcSize(0.5)) var(--ctr-data-table-row-padding-left, 0); } .spg-table__row--leave, diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss index 92170b380a..1bee4c6c2e 100644 --- a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss +++ b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss @@ -53,7 +53,7 @@ .sv-popup--modal { - &.sv-property-editor .sv-popup__container { + &.svc-property-editor .sv-popup__container { .sv-popup_shadow { background-color: transparent; } @@ -82,7 +82,7 @@ } } -.sv-popup.sv-property-editor .sd-root-modern { +.sv-popup.svc-property-editor .sd-root-modern { --sd-mobile-width: 0; } @@ -99,12 +99,9 @@ flex-direction: column; } -.spg-title { - .spg-action-bar { - margin-top: calcSize(-1); - margin-bottom: calcSize(-1); - margin-right: 1px; - } +.spg-action-title-bar { + margin-inline-end: var(--ctr-data-table-border-width, 1px); + padding-inline-end: var(--ctr-caption-with-actions-actionbar-padding-right, calcSize(0.5)); } .spg-body { @@ -115,7 +112,7 @@ margin: calcSize(3); } -.spg-title-toolobar--single-help-action { +.spg-title-toolbar--single-help-action { justify-content: flex-start; padding-left: calcSize(0.5); diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.ts b/packages/survey-creator-core/src/property-grid-theme/property-grid.ts index 80b2276564..3c7dbb863d 100644 --- a/packages/survey-creator-core/src/property-grid-theme/property-grid.ts +++ b/packages/survey-creator-core/src/property-grid-theme/property-grid.ts @@ -23,6 +23,7 @@ export var propertyGridCss = { panel: { expandableAnimating: "", title: "spg-title spg-panel__title", + titleBar: "sd-action-title-bar spg-action-title-bar", contentEnter: "spg-panel__content--enter", contentLeave: "spg-panel__content--leave", titleExpandable: "spg-panel__title--expandable", @@ -90,6 +91,7 @@ export var propertyGridCss = { titleOnAnswer: "spg-question__title--answer", titleOnError: "spg-question__title--error", title: "spg-title spg-question__title", + titleBar: "sd-action-title-bar spg-action-title-bar", requiredText: "spg-question__required-text", number: "spg-question__num", description: "spg-description spg-question__description", @@ -192,7 +194,7 @@ export var propertyGridCss = { onError: "spg-input--error", selectWrapper: "sv-dropdown_select-wrapper spg-dropdown_select-wrapper", chevronButton: "sd-dropdown_chevron-button spg-dropdown_chevron-button", - chevronButtonSvg: "sd-dropdown_chevron-button-svg", + chevronButtonSvg: "sd-dropdown_chevron-button-svg spg-dropdown_chevron-button-svg", chevronButtonIconId: "icon-chevron", }, buttongroup: { @@ -251,6 +253,9 @@ export var propertyGridCss = { root: "spg-table spg-matrixdynamic", content: "spg-matrixdynamic__content spg-text__content", cell: "spg-table__cell", + row: "spg-table__row", + rowDisabled: "spg-table__row-disabled", + rowReadOnly: "spg-table__row-readonly", headerCell: "spg-table__cell spg-table__cell--header", button: "spg-btn", detailRow: "spg-table__row spg-table__row--detail", @@ -273,6 +278,7 @@ export var propertyGridCss = { emptyRowsSection: "spg-matrixdynamic__placeholder", emptyRowsText: "spg-matrixdynamic__placeholder-text", cellQuestionWrapper: "spg-table__question-wrapper", + draggedRow: "spg-matrixdynamic__dragged-row", emptyCell: "spg-table__cell--empty", rowEnter: "spg-table__row--enter", rowLeave: "spg-table__row--leave", diff --git a/packages/survey-creator-core/src/property-grid/index.ts b/packages/survey-creator-core/src/property-grid/index.ts index 05681308b2..7ced86f63d 100644 --- a/packages/survey-creator-core/src/property-grid/index.ts +++ b/packages/survey-creator-core/src/property-grid/index.ts @@ -372,7 +372,7 @@ export class PropertyGridTitleActionsCreator { var helpAction = this.createPropertyHelpAction(question); if (!!helpAction) { actions.unshift(helpAction); - question.getTitleToolbar().containerCss += " spg-title-toolobar--single-help-action"; + question.getTitleToolbar().containerCss += " spg-title-toolbar--single-help-action"; helpAction.iconSize = 16; } if (actions.length > 0) { @@ -1442,7 +1442,7 @@ export abstract class PropertyGridEditor implements IPropertyGridEditor { this.onModalPropertyEditorClosed(editor, property, question, options, "cancel"); onClose && onClose("cancel"); }, - cssClass: "sv-property-editor svc-creator-popup", + cssClass: "svc-property-editor svc-creator-popup", title: question.title, displayMode: options.isMobileView ? "overlay" : "popup" }, options.rootElement); diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts index 5237a94d71..0c578376e1 100644 --- a/packages/survey-creator-core/src/themes/default.ts +++ b/packages/survey-creator-core/src/themes/default.ts @@ -20,16 +20,28 @@ const Theme = { "--ctr-button-group-item-border-width": "0px", "--ctr-button-group-gap": "0px", "--ctr-shadow-medium-blur": "8px", + "--ctr-shadow-medium-offset-y": "2px", "--ctr-shadow-large-blur": "32px", "--ctr-shadow-large-offset-y": "16px", + "--ctr-shadow-large-offset-x": "0px", + "--ctr-shadow-large-spread": "0px", + "--ctr-shadow-medium-offset-x": "0px", + "--ctr-shadow-medium-spread": "0px", "--ctr-button-group-item-border-width-selected-disabled": "0px", + "--ctr-shadow-small-offset-x": "0px", + "--ctr-shadow-small-offset-y": "1px", + "--ctr-shadow-small-blur": "2px", + "--ctr-shadow-small-spread": "0px", + "--ctr-shadow-x-large-offset-x": "0px", "--ctr-shadow-x-large-offset-y": "32px", "--ctr-shadow-x-large-blur": "64px", + "--ctr-shadow-x-large-spread": "0px", "--ctr-property-grid-placeholder-text-max-width": "256px", "--ctr-surface-placeholder-padding-top": "0px", "--ctr-toolbox-group-header-margin-right": "0px", "--ctr-property-grid-placeholder-padding-bottom": "0px", "--ctr-editor-content-text-opacity-disabled": 0.25, + "--ctr-editor-label-opacity-disabled": 0.25, "--ctr-editor-button-icon-opacity-disabled": 0.25, "--ctr-editor-button-icon-opacity-pressed": 0.5, "--ctr-actionbar-button-opacity-pressed": 0.5, @@ -46,24 +58,44 @@ const Theme = { "--ctr-button-text-opacity-disabled": 0.25, "--ctr-notification-opacity": "75px", "--ctr-notification-opacity-error": 1, + "--ctr-data-table-row-padding-left": "0px", "--ctr-toolbox-separator-padding-right": "0px", "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5, "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25, + "--ctr-label-padding-left": "0px", + "--ctr-label-padding-right": "0px", "--ctr-survey-action-button-opacity-disabled": 0.25, "--ctr-property-grid-form-border-width-bottom": "0px", + "--lbr-shadow-x-large-offset-x": "0px", "--lbr-shadow-x-large-offset-y": "32px", "--lbr-shadow-x-large-blur": "64px", + "--lbr-shadow-x-large-spread": "0px", + "--lbr-shadow-large-offset-x": "0px", "--lbr-shadow-large-offset-y": "16px", "--lbr-shadow-large-blur": "32px", + "--lbr-shadow-large-spread": "0px", + "--lbr-shadow-medium-offset-x": "0px", + "--lbr-shadow-medium-offset-y": "2px", "--lbr-shadow-medium-blur": "8px", + "--lbr-shadow-medium-spread": "0px", + "--lbr-shadow-small-offset-x": "0px", + "--lbr-shadow-small-offset-y": "1px", + "--lbr-shadow-small-blur": "2px", + "--lbr-shadow-small-spread": "0px", + "--ctr-button-group-item-text-opacity-disabled": 0.25, "--ctr-toolbox-item-shadow-hovered-1-color": "#00000000", "--ctr-toolbox-item-shadow-pressed-color": "#00000000", "--ctr-toolbox-item-shadow-hovered-2-color": "#00000000", + "--lbr-shadow-inner-offset-x": "0px", + "--lbr-shadow-inner-offset-y": "1px", + "--lbr-shadow-inner-blur": "2px", + "--lbr-shadow-inner-spread": "0px", "--ctr-toolbox-item-icon-opacity-disabled": 0.25, "--ctr-toolbox-item-shadow-subitem-1-color": "#00000000", "--ctr-toolbox-item-shadow-subitem-2-color": "#00000000", "--ctr-toolbox-submenu-margin-left": "0px", "--ctr-survey-page-drag-indicator-opacity": "50px", + "--ctr-toggle-button-thumb-border-width": "0px", "--ctr-line-height-unit": "8px", "--ctr-font-unit": "8px", "--ctr-spacing-unit": "8px", @@ -102,10 +134,12 @@ const Theme = { "--ctr-editor-background-color-disabled": "var(--sjs-layer-1-background-500)", "--ctr-editor-button-icon-color": "var(--sjs-layer-3-foreground-75)", "--ctr-editor-button-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-button-group-item-background-color-selected": "var(--sjs-layer-1-background-500)", "--ctr-radio-button-background-color": "var(--sjs-layer-3-background-500)", "--ctr-radio-button-border-color": "var(--sjs-border-10)", "--ctr-checkbox-background-color": "var(--sjs-layer-3-background-500)", "--ctr-checkbox-border-color": "var(--sjs-border-10)", + "--ctr-checkbox-border-width": "var(--sjs-stroke-x1)", "--ctr-checkbox-button-check-mark-color": "var(--sjs-primary-background-500)", "--ctr-radio-button-background-color-hovered": "var(--sjs-layer-3-background-400)", "--ctr-radio-button-background-color-disabled": "var(--sjs-layer-1-background-500)", @@ -129,8 +163,11 @@ const Theme = { "--ctr-button-group-background-color": "var(--sjs-layer-3-background-500)", "--ctr-button-group-border-color": "var(--sjs-border-10)", "--ctr-button-group-border-width": "var(--sjs-stroke-x1)", + "--ctr-button-group-item-border-width-selected": "var(--sjs-stroke-x1)", + "--ctr-button-group-item-padding-horizontal": "var(--sjs-spacing-x2)", "--ctr-button-group-item-padding-vertical": "var(--sjs-spacing-x1)", "--ctr-button-group-border-color-focused": "var(--sjs-primary-background-500)", + "--ctr-button-group-border-width-focused": "var(--sjs-stroke-x2)", "--ctr-button-group-item-text-color-disabled": "var(--sjs-layer-3-foreground-100)", "--ctr-survey-page-background-color-selected": "var(--sjs-special-background)", "--ctr-surface-background-color": "var(--sjs-special-background)", @@ -202,9 +239,22 @@ const Theme = { "--ctr-radio-button-text-color": "var(--sjs-layer-1-foreground-100)", "--ctr-checkbox-text-color": "var(--sjs-layer-1-foreground-100)", "--ctr-checkbox-description-text-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-actionbar-button-padding-left-large-icon": "var(--sjs-spacing-x1)", + "--ctr-actionbar-button-padding-right-large-icon": "var(--sjs-spacing-x1)", + "--ctr-actionbar-button-padding-top-large-icon": "var(--sjs-spacing-x1)", + "--ctr-actionbar-button-padding-bottom-large-icon": "var(--sjs-spacing-x1)", "--ctr-actionbar-button-text-color": "var(--sjs-primary-background-500)", "--ctr-actionbar-button-background-color-hovered": "var(--sjs-primary-background-10)", + "--ctr-actionbar-button-padding-left-medium-text": "var(--sjs-spacing-x2)", + "--ctr-actionbar-button-padding-right-medium-text": "var(--sjs-spacing-x2)", + "--ctr-actionbar-button-padding-top-medium-text": "var(--sjs-spacing-x05)", + "--ctr-actionbar-button-padding-bottom-medium-text": "var(--sjs-spacing-x05)", "--ctr-actionbar-button-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-list-item-gap": "var(--sjs-spacing-x2)", + "--ctr-list-item-padding-left": "var(--sjs-spacing-x2)", + "--ctr-list-item-padding-right": "var(--sjs-spacing-x2)", + "--ctr-list-item-padding-bottom-with-icon": "var(--sjs-spacing-x150)", + "--ctr-list-item-padding-top-with-icon": "var(--sjs-spacing-x150)", "--ctr-list-item-background-color-hovered": "var(--sjs-layer-1-background-400)", "--ctr-list-item-background-color-selected": "var(--sjs-primary-background-500)", "--ctr-list-item-text-color-selected": "var(--sjs-primary-foreground-100)", @@ -214,6 +264,18 @@ const Theme = { "--ctr-list-item-icon-color-hovered": "var(--sjs-primary-background-500)", "--ctr-list-item-contextual-buttons-color": "var(--sjs-layer-1-foreground-50)", "--ctr-list-item-color-swatch-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-list-item-color-swatch-width": "var(--sjs-spacing-x4)", + "--ctr-list-item-color-swatch-height": "var(--sjs-spacing-x3)", + "--ctr-editor-button-padding-top": "var(--sjs-spacing-x1)", + "--ctr-editor-button-padding-bottom": "var(--sjs-spacing-x1)", + "--ctr-editor-button-padding-left": "var(--sjs-spacing-x1)", + "--ctr-editor-button-padding-right": "var(--sjs-spacing-x1)", + "--ctr-editor-color-swatch-icon-width": "var(--sjs-size-x2)", + "--ctr-editor-color-swatch-icon-height": "var(--sjs-size-x2)", + "--ctr-editor-button-icon-width": "var(--sjs-size-x3)", + "--ctr-editor-button-icon-height": "var(--sjs-size-x3)", + "--ctr-checkbox-button-width": "var(--sjs-size-x3)", + "--ctr-checkbox-button-height": "var(--sjs-size-x3)", "--ctr-menu-item-icon-width": "var(--sjs-size-x3)", "--ctr-menu-item-icon-height": "var(--sjs-size-x3)", "--ctr-menu-item-text-color": "var(--sjs-layer-1-foreground-100)", @@ -243,13 +305,20 @@ const Theme = { "--ctr-toolbox-item-border-color-floating": "var(--sjs-secondary-background-500)", "--ctr-toolbox-button-background-color-hovered": "var(--sjs-primary-background-10)", "--ctr-page-navigator-item-dot-radius-small": "var(--sjs-size-x075)", + "--ctr-page-navigator-item-dot-radius-large": "var(--sjs-size-x1)", "--ctr-page-navigator-item-dot-border-color-selected": "var(--sjs-layer-3-foreground-75)", "--ctr-page-navigator-item-dot-color-hovered": "var(--sjs-primary-background-500)", "--ctr-page-navigator-item-dot-color-default": "var(--sjs-layer-3-foreground-75)", "--ctr-page-navigator-item-dot-color-selected": "var(--sjs-special-background)", "--ctr-page-navigator-item-background-color-hovered": "var(--sjs-layer-1-background-500)", "--ctr-page-navigator-item-text-color-hovered": "var(--sjs-layer-1-foreground-100)", + "--ctr-page-navigator-item-padding-left-hovered": "var(--sjs-spacing-x2)", + "--ctr-page-navigator-item-padding-right": "var(--sjs-spacing-x150)", + "--ctr-page-navigator-item-padding-top": "var(--sjs-spacing-x1)", + "--ctr-page-navigator-item-padding-bottom": "var(--sjs-spacing-x1)", + "--ctr-page-navigator-item-gap": "var(--sjs-spacing-x1)", "--ctr-page-navigator-item-corner-radius": "var(--sjs-corner-radius-x075)", + "--ctr-page-navigator-button-padding": "var(--sjs-spacing-x125)", "--ctr-page-navigator-button-corner-radius": "var(--sjs-corner-radius-x1)", "--ctr-page-navigator-button-background-color-hovered": "var(--sjs-primary-background-10)", "--ctr-button-background-color": "var(--sjs-layer-1-background-500)", @@ -274,7 +343,11 @@ const Theme = { "--ctr-property-grid-chapter-caption-background-color-hovered": "var(--sjs-layer-1-background-400)", "--ctr-property-grid-chapter-caption-background-color-focused": "var(--sjs-layer-1-background-400)", "--ctr-property-grid-chapter-caption-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-expression-item-padding-left": "var(--sjs-spacing-x2)", "--ctr-expression-item-background-color-parameter": "var(--sjs-semantic-blue-background-10)", + "--ctr-expression-item-padding-right": "var(--sjs-spacing-x2)", + "--ctr-expression-item-padding-top": "var(--sjs-spacing-x1)", + "--ctr-expression-item-padding-bottom": "var(--sjs-spacing-x1)", "--ctr-expression-item-corner-radius": "var(--sjs-corner-radius-x1)", "--ctr-expression-item-text-color-parameter": "var(--sjs-layer-3-foreground-100)", "--ctr-expression-item-background-color-parameter-hovered": "var(--sjs-semantic-blue-background-500)", @@ -302,6 +375,7 @@ const Theme = { "--ctr-expression-item-text-color-function": "var(--sjs-layer-3-foreground-100)", "--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-color": "var(--sjs-border-25)", "--ctr-popup-padding-left": "var(--sjs-spacing-x4)", @@ -320,6 +394,10 @@ const Theme = { "--ctr-notification-text-color": "var(--sjs-layer-1-foreground-100)", "--ctr-notification-text-color-error": "var(--sjs-semantic-red-foreground-100)", "--ctr-notification-background-color-error": "var(--sjs-semantic-red-background-500)", + "--ctr-string-table-row-padding-left": "var(--sjs-spacing-x3)", + "--ctr-string-table-row-padding-right": "var(--sjs-spacing-x3)", + "--ctr-string-table-row-padding-top": "var(--sjs-spacing-x1)", + "--ctr-string-table-row-padding-bottom": "var(--sjs-spacing-x1)", "--ctr-string-table-row-background-color": "var(--sjs-layer-1-background-500)", "--ctr-string-table-row-border-color": "var(--sjs-border-10)", "--ctr-string-table-row-text-color-title": "var(--sjs-layer-1-foreground-100)", @@ -330,6 +408,13 @@ const Theme = { "--ctr-string-table-group-header-text-color": "var(--sjs-layer-2-foreground-75)", "--ctr-text-decor-text-color-code": "var(--sjs-layer-1-foreground-100)", "--ctr-menu-border-color": "var(--sjs-border-25)", + "--ctr-menu-toolbar-gap": "var(--sjs-spacing-x2)", + "--ctr-menu-toolbar-padding-horizontal": "var(--sjs-spacing-x2)", + "--ctr-menu-toolbar-padding-vertical": "var(--sjs-spacing-x150)", + "--ctr-popup-menu-footer-padding-top": "var(--sjs-spacing-x05)", + "--ctr-popup-menu-footer-padding-bottom": "var(--sjs-spacing-x05)", + "--ctr-popup-menu-footer-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-popup-menu-footer-border-color": "var(--sjs-border-25)", "--ctr-property-grid-header-background-color": "var(--sjs-layer-1-background-500)", "--ctr-property-grid-header-padding-left": "var(--sjs-spacing-x2)", "--ctr-property-grid-header-padding-right": "var(--sjs-spacing-x2)", @@ -339,13 +424,22 @@ const Theme = { "--ctr-property-grid-header-border-width-bottom": "var(--sjs-stroke-x2)", "--ctr-caption-with-actions-description-text-color": "var(--sjs-layer-1-foreground-50)", "--ctr-caption-with-actions-description-text-color-disabled": "var(--sjs-layer-1-foreground-100)", + "--ctr-data-table-cell-padding-left": "var(--sjs-spacing-x1)", + "--ctr-data-table-cell-padding-right": "var(--sjs-spacing-x1)", + "--ctr-data-table-cell-padding-top": "var(--sjs-spacing-x1)", + "--ctr-data-table-cell-padding-bottom": "var(--sjs-spacing-x1)", "--ctr-data-table-cell-text-color-header": "var(--sjs-layer-3-foreground-50)", "--ctr-data-table-cell-border-color-focused": "var(--sjs-primary-background-500)", "--ctr-data-table-cell-corner-radius-focused": "var(--sjs-corner-radius-x075)", "--ctr-data-table-row-background-color": "var(--sjs-layer-1-background-500)", "--ctr-data-table-row-background-color-header": "var(--sjs-layer-3-background-500)", "--ctr-data-table-row-border-color": "var(--sjs-border-10)", + "--ctr-data-table-row-padding-top": "var(--sjs-spacing-x05)", + "--ctr-data-table-row-padding-bottom": "var(--sjs-spacing-x05)", + "--ctr-data-table-row-padding-right": "var(--sjs-spacing-x05)", "--ctr-data-table-row-drag-area-icon-color": "var(--sjs-layer-1-foreground-50)", + "--ctr-data-table-row-padding-top-header": "var(--sjs-spacing-x1)", + "--ctr-data-table-row-padding-bottom-header": "var(--sjs-spacing-x1)", "--ctr-data-table-row-background-color-drop-spot": "var(--sjs-layer-1-background-400)", "--ctr-error-message-background-color": "var(--sjs-semantic-red-background-10)", "--ctr-error-message-icon-color": "var(--sjs-semantic-red-background-500)", @@ -371,29 +465,57 @@ const Theme = { "--ctr-survey-question-panel-drag-area-drag-indicator-color": "var(--sjs-layer-1-foreground-50)", "--ctr-preview-pager-background-color": "var(--sjs-layer-1-background-500)", "--ctr-preview-pager-border-color": "var(--sjs-border-25)", + "--ctr-code-viewer-background-color": "var(--sjs-layer-1-background-500)", + "--ctr-code-viewer-text-color": "var(--sjs-code-gray-300)", "--ctr-code-viewer-line-number-panel-background-color": "var(--sjs-layer-2-background-500)", "--ctr-code-viewer-line-number-panel-text-color": "var(--sjs-layer-2-foreground-50)", "--ctr-property-grid-group-caption-text-color": "var(--sjs-layer-1-foreground-100)", "--ctr-toolbox-group-header-expand-button-color": "var(--sjs-layer-1-foreground-75)", + "--ctr-label-padding-top": "var(--sjs-spacing-x1)", + "--ctr-label-padding-bottom": "var(--sjs-spacing-x1)", + "--ctr-editor-padding-left": "var(--sjs-spacing-x05)", + "--ctr-editor-padding-right": "var(--sjs-spacing-x05)", + "--ctr-editor-padding-top": "var(--sjs-spacing-x05)", + "--ctr-editor-padding-bottom": "var(--sjs-spacing-x05)", + "--ctr-editor-gap": "var(--sjs-spacing-x05)", "--ctr-editor-border-width": "var(--sjs-stroke-x1)", + "--ctr-editor-content-margin-left": "var(--sjs-spacing-x150)", + "--ctr-editor-content-margin-right": "var(--sjs-spacing-x150)", + "--ctr-editor-content-margin-top": "var(--sjs-spacing-x1)", + "--ctr-editor-content-margin-bottom": "var(--sjs-spacing-x1)", + "--ctr-editor-color-swatch-margin-left": "var(--sjs-spacing-x150)", + "--ctr-editor-buttons-gap": "var(--sjs-spacing-x05)", "--ctr-editor-border-width-focused": "var(--sjs-stroke-x2)", "--ctr-editor-border-color-focused": "var(--sjs-primary-background-500)", "--ctr-editor-border-color-error": "var(--sjs-semantic-red-background-500)", + "--ctr-checkbox-list-gap-vertical": "var(--sjs-spacing-x2)", "--ctr-surface-placeholder-text-title-color": "var(--sjs-layer-3-foreground-100)", "--ctr-surface-placeholder-text-description-color": "var(--sjs-layer-3-foreground-50)", "--ctr-survey-page-placeholder-text-color": "var(--sjs-layer-3-foreground-50)", + "--ctr-survey-placeholder-gap": "var(--sjs-spacing-x05)", + "--ctr-survey-placeholder-padding-left": "var(--sjs-spacing-x8)", + "--ctr-survey-placeholder-padding-right": "var(--sjs-spacing-x8)", + "--ctr-survey-placeholder-padding-top-with-button": "var(--sjs-spacing-x8)", + "--ctr-survey-placeholder-padding-bottom-with-button": "var(--sjs-spacing-x6)", "--ctr-survey-placeholder-text-color": "var(--sjs-layer-1-foreground-50)", "--ctr-survey-placeholder-border-color": "var(--sjs-border-25)", "--ctr-survey-drop-indicator-color": "var(--sjs-primary-background-500)", "--ctr-property-grid-search-background-color": "var(--sjs-layer-3-background-500)", + "--ctr-property-grid-search-padding-left": "var(--sjs-spacing-x2)", + "--ctr-property-grid-search-padding-right": "var(--sjs-spacing-x2)", + "--ctr-property-grid-search-padding-top": "var(--sjs-spacing-x2)", + "--ctr-property-grid-search-padding-bottom": "var(--sjs-spacing-x2)", "--ctr-property-grid-search-text-color": "var(--sjs-layer-3-foreground-100)", "--ctr-property-grid-search-text-color-placeholder": "var(--sjs-layer-3-foreground-50)", + "--ctr-search-toolbar-gap": "var(--sjs-spacing-x05)", "--ctr-property-grid-search-border-color": "var(--sjs-border-10)", + "--ctr-property-grid-search-gap": "var(--sjs-spacing-x1)", "--ctr-search-button-corner-radius": "var(--sjs-corner-radius-x05)", + "--ctr-search-button-padding-vertical": "var(--sjs-spacing-x05)", + "--ctr-search-button-padding-horizontal": "var(--sjs-spacing-x05)", "--ctr-search-button-background-color-hovered": "var(--sjs-layer-1-background-400)", - "--ctr-search-button-icon-color-clear-hovered": "var(--sjs-semantic-red-background-500)", - "--ctr-search-button-background-color-clear-hovered": "var(--sjs-semantic-red-background-10)", "--ctr-property-grid-search-button-icon-color": "var(--sjs-layer-3-foreground-50)", + "--ctr-property-grid-search-button-background-color-hovered": "var(--sjs-layer-3-background-400)", "--ctr-property-grid-search-icon-color": "var(--sjs-layer-3-foreground-50)", "--ctr-property-grid-search-count-text-color": "var(--sjs-layer-3-foreground-50)", "--ctr-scrollbar-background-color": "var(--sjs-border-10)", @@ -435,15 +557,36 @@ 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-checkbox-gap": "var(--sjs-spacing-x1)", + "--ctr-checkbox-description-text-margin-left": "var(--sjs-spacing-x4)", + "--ctr-expression-rows-gap": "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)", + "--lbr-shadow-x-large-color": "var(--sjs-special-glow)", + "--lbr-shadow-large-color": "var(--sjs-special-glow)", + "--lbr-shadow-medium-color": "var(--sjs-special-glow)", + "--lbr-shadow-small-color": "var(--sjs-special-shadow)", "--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)", + "--ctr-survey-radio-button-group-item-shadow-floating-1-offset-x": "var(--ctr-shadow-large-offset-x)", + "--ctr-survey-radio-button-group-item-shadow-floating-1-offset-y": "var(--ctr-shadow-large-offset-y)", + "--ctr-survey-radio-button-group-item-shadow-floating-1-blur": "var(--ctr-shadow-large-blur)", + "--ctr-survey-radio-button-group-item-shadow-floating-1-spread": "var(--ctr-shadow-large-spread)", + "--ctr-survey-radio-button-group-item-shadow-floating-1-color": "var(--ctr-shadow-large-color)", + "--ctr-survey-radio-button-group-item-shadow-floating-2-offset-x": "var(--ctr-shadow-medium-offset-x)", + "--ctr-survey-radio-button-group-item-shadow-floating-2-offset-y": "var(--ctr-shadow-medium-offset-y)", + "--ctr-survey-radio-button-group-item-shadow-floating-2-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-survey-radio-button-group-item-shadow-floating-2-spread": "var(--ctr-shadow-medium-spread)", + "--ctr-survey-radio-button-group-item-shadow-floating-2-color": "var(--ctr-shadow-medium-color)", "--ctr-survey-ranking-item-corner-radius-floating": "var(--sjs-corner-radius-x1)", "--ctr-survey-header-logo-placeholder-background-color-hovered": "var(--sjs-primary-background-10)", "--ctr-survey-header-logo-placeholder-icon-color-hovered": "var(--sjs-primary-background-500)", @@ -452,8 +595,17 @@ const Theme = { "--ctr-survey-page-border-color-selected": "var(--sjs-secondary-background-500)", "--ctr-survey-page-header-title-color-placeholder": "var(--sjs-layer-3-foreground-50)", "--ctr-survey-page-background-color-hovered": "var(--sjs-special-background)", + "--ctr-list-search-padding-left": "var(--sjs-spacing-x2)", + "--ctr-list-search-padding-right": "var(--sjs-spacing-x2)", + "--ctr-list-search-padding-top": "var(--sjs-spacing-x250)", + "--ctr-list-search-padding-bottom": "var(--sjs-spacing-x250)", "--ctr-list-search-border-color": "var(--sjs-border-25)", + "--ctr-list-search-gap": "var(--sjs-spacing-x2)", "--ctr-list-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)", + "--ctr-property-grid-search-icon-width": "var(--sjs-size-x3)", + "--ctr-property-grid-search-icon-height": "var(--sjs-size-x3)", + "--ctr-expression-item-padding-left-button": "var(--sjs-spacing-x4)", + "--ctr-expression-item-padding-right-button": "var(--sjs-spacing-x4)", "--ctr-toolbox-shadow-floating-1-offset-x": "var(--ctr-shadow-medium-offset-x)", "--ctr-toolbox-shadow-floating-2-offset-x": "var(--ctr-shadow-large-offset-x)", "--ctr-toolbox-shadow-floating-1-offset-y": "var(--ctr-shadow-medium-offset-y)", @@ -465,6 +617,16 @@ const Theme = { "--ctr-toolbox-shadow-floating-2-color": "var(--ctr-shadow-large-color)", "--ctr-toolbox-shadow-floating-1-color": "var(--ctr-shadow-medium-color)", "--ctr-toolbox-submenu-group-margin-left": "var(--sjs-spacing-x150)", + "--ctr-data-table-row-shadow-floating-1-offset-x": "var(--ctr-shadow-medium-offset-x)", + "--ctr-data-table-row-shadow-floating-1-offset-y": "var(--ctr-shadow-medium-offset-y)", + "--ctr-data-table-row-shadow-floating-1-blur": "var(--ctr-shadow-medium-blur)", + "--ctr-data-table-row-shadow-floating-1-spread": "var(--ctr-shadow-medium-spread)", + "--ctr-data-table-row-shadow-floating-1-color": "var(--ctr-shadow-medium-color)", + "--ctr-data-table-row-shadow-floating-2-offset-x": "var(--ctr-shadow-large-offset-x)", + "--ctr-data-table-row-shadow-floating-2-offset-y": "var(--ctr-shadow-large-offset-y)", + "--ctr-data-table-row-shadow-floating-2-blur": "var(--ctr-shadow-large-blur)", + "--ctr-data-table-row-shadow-floating-2-spread": "var(--ctr-shadow-large-spread)", + "--ctr-data-table-row-shadow-floating-2-color": "var(--ctr-shadow-large-color)", "--ctr-toolbox-item-shadow-hovered-1-offset-x": "var(--ctr-shadow-medium-offset-x)", "--ctr-toolbox-item-shadow-hovered-1-offset-y": "var(--ctr-shadow-medium-offset-y)", "--ctr-toolbox-item-shadow-hovered-1-blur": "var(--ctr-shadow-medium-blur)", @@ -497,13 +659,17 @@ const Theme = { "--ctr-popup-shadow-3-blur": "var(--ctr-shadow-x-large-blur)", "--ctr-popup-shadow-3-spread": "var(--ctr-shadow-x-large-spread)", "--ctr-popup-shadow-3-color": "var(--ctr-shadow-x-large-color)", + "--lbr-shadow-inner-color": "var(--sjs-special-shadow)", "--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)", "--ctr-toolbox-group-padding-right-compact": "var(--sjs-spacing-x150)", + "--ctr-checkbox-button-check-mark-width": "var(--sjs-size-x2)", + "--ctr-checkbox-button-check-mark-height": "var(--sjs-size-x2)", "--ctr-survey-question-panel-floating-toolbar-padding-left": "var(--sjs-spacing-x150)", "--ctr-survey-question-panel-floating-toolbar-padding-right": "var(--sjs-spacing-x150)", "--ctr-toolbox-item-icon-color-disabled": "var(--sjs-layer-1-foreground-100)", diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss index 05a9e6679c..46d413f876 100644 --- a/packages/survey-creator-core/src/utils/layout.scss +++ b/packages/survey-creator-core/src/utils/layout.scss @@ -49,6 +49,7 @@ .sv-action-bar--small-size-mode .sv-action-bar-item { @include ctrSmallBoldFont; align-items: center; + border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px); } .svc-top-bar { @@ -62,7 +63,7 @@ display: flex; .sv-action-bar { - padding: 0 calcSize(1); + padding: var(--ctr-menu-toolbar-padding-vertical, 0) var(--ctr-menu-toolbar-padding-horizontal, calcSize(1)); justify-content: flex-end; } @@ -70,12 +71,25 @@ display: none; } - .sv-action-bar>.sv-action:not(.sv-action--hidden)~.sv-action .sv-action-bar-separator { + .sv-action-bar > .sv-action:not(.sv-action--hidden) ~ .sv-action .sv-action-bar-separator { + --ctr-menu-toolbar-button-gap: calc(var(--ctr-menu-toolbar-gap) / 2); + --ctr-menu-toolbar-button-height: calc( + var(--ctr-menu-toolbar-button-padding-top) + var(--ctr-menu-toolbar-button-padding-bottom) + + var(--ctr-menu-toolbar-button-icon-width) + ); + display: inline-block; + margin: 0 var(--ctr-menu-toolbar-button-gap, calcSize(1)); + height: var(--ctr-menu-toolbar-button-height, calcSize(5)); } .sv-action .sv-action-bar-item { - margin: 0 calcSize(1); + --ctr-menu-toolbar-button-gap: calc(var(--ctr-menu-toolbar-gap) / 2); + margin: 0 var(--ctr-menu-toolbar-button-gap, calcSize(1)); + padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1)) + var(--ctr-menu-toolbar-button-padding-right, calcSize(1)) + var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1)) + var(--ctr-menu-toolbar-button-padding-left, calcSize(1)); } } @@ -93,6 +107,8 @@ } .sv-action-bar-item__icon { + width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3)); + height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3)); use { fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light); } diff --git a/visualRegressionTests/tests/designer/etalons/creator-theme-settings.png b/visualRegressionTests/tests/designer/etalons/creator-theme-settings.png index 3d7fea8c77..df046a63ed 100644 Binary files a/visualRegressionTests/tests/designer/etalons/creator-theme-settings.png and b/visualRegressionTests/tests/designer/etalons/creator-theme-settings.png differ diff --git a/visualRegressionTests/tests/designer/etalons/drag-drop-item-values-ranking--dragging.png b/visualRegressionTests/tests/designer/etalons/drag-drop-item-values-ranking--dragging.png index bc0d5f9ef8..f321ab08d7 100644 Binary files a/visualRegressionTests/tests/designer/etalons/drag-drop-item-values-ranking--dragging.png and b/visualRegressionTests/tests/designer/etalons/drag-drop-item-values-ranking--dragging.png differ diff --git a/visualRegressionTests/tests/designer/etalons/logic-dropdown-full.png b/visualRegressionTests/tests/designer/etalons/logic-dropdown-full.png index 3189722cda..1eadf96cd6 100644 Binary files a/visualRegressionTests/tests/designer/etalons/logic-dropdown-full.png and b/visualRegressionTests/tests/designer/etalons/logic-dropdown-full.png differ diff --git a/visualRegressionTests/tests/designer/etalons/overriding-property-editor.png b/visualRegressionTests/tests/designer/etalons/overriding-property-editor.png index f9628b5218..71c3134e43 100644 Binary files a/visualRegressionTests/tests/designer/etalons/overriding-property-editor.png and b/visualRegressionTests/tests/designer/etalons/overriding-property-editor.png differ diff --git a/visualRegressionTests/tests/designer/etalons/pg-checkbox-checked-readonly.png b/visualRegressionTests/tests/designer/etalons/pg-checkbox-checked-readonly.png index 4b3ffc5feb..8d5418958d 100644 Binary files a/visualRegressionTests/tests/designer/etalons/pg-checkbox-checked-readonly.png and b/visualRegressionTests/tests/designer/etalons/pg-checkbox-checked-readonly.png differ diff --git a/visualRegressionTests/tests/designer/etalons/pg-checkbox-hint-opened.png b/visualRegressionTests/tests/designer/etalons/pg-checkbox-hint-opened.png index 0d774e8e03..e5e4d5c586 100644 Binary files a/visualRegressionTests/tests/designer/etalons/pg-checkbox-hint-opened.png and b/visualRegressionTests/tests/designer/etalons/pg-checkbox-hint-opened.png differ diff --git a/visualRegressionTests/tests/designer/etalons/pg-checkbox-unchecked-readonly.png b/visualRegressionTests/tests/designer/etalons/pg-checkbox-unchecked-readonly.png index 9f315008b4..51941fe067 100644 Binary files a/visualRegressionTests/tests/designer/etalons/pg-checkbox-unchecked-readonly.png and b/visualRegressionTests/tests/designer/etalons/pg-checkbox-unchecked-readonly.png differ diff --git a/visualRegressionTests/tests/designer/etalons/side-bar-object-selector-with-big-name.png b/visualRegressionTests/tests/designer/etalons/side-bar-object-selector-with-big-name.png index 8ae444fffb..93e582930a 100644 Binary files a/visualRegressionTests/tests/designer/etalons/side-bar-object-selector-with-big-name.png and b/visualRegressionTests/tests/designer/etalons/side-bar-object-selector-with-big-name.png differ diff --git a/visualRegressionTests/tests/designer/etalons/side-bar-search-question-group.png b/visualRegressionTests/tests/designer/etalons/side-bar-search-question-group.png index 46af2ed3fb..b7e8ae950f 100644 Binary files a/visualRegressionTests/tests/designer/etalons/side-bar-search-question-group.png and b/visualRegressionTests/tests/designer/etalons/side-bar-search-question-group.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-advanced-group.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-advanced-group.png index ef46eb0a7a..b4a158358e 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-advanced-group.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-advanced-group.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-background-group.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-background-group.png index 5923a4bad4..4c5681ef6e 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-background-group.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-background-group.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group-advanced.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group-advanced.png index 27dfd7ba77..33471e148b 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group-advanced.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group-advanced.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group.png b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group.png index ac3f1b396a..96b4068ba2 100644 Binary files a/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group.png and b/visualRegressionTests/tests/designer/etalons/theme-editor-property-grid-header-group.png differ diff --git a/visualRegressionTests/tests/designer/etalons/translation-auto-translate-popup-enabled-dropdown.png b/visualRegressionTests/tests/designer/etalons/translation-auto-translate-popup-enabled-dropdown.png index 714947677f..c5feab1ef8 100644 Binary files a/visualRegressionTests/tests/designer/etalons/translation-auto-translate-popup-enabled-dropdown.png and b/visualRegressionTests/tests/designer/etalons/translation-auto-translate-popup-enabled-dropdown.png differ diff --git a/visualRegressionTests/tests/designer/etalons/translation-auto-translate-popup.png b/visualRegressionTests/tests/designer/etalons/translation-auto-translate-popup.png index c1abab2954..8fc9fe4305 100644 Binary files a/visualRegressionTests/tests/designer/etalons/translation-auto-translate-popup.png and b/visualRegressionTests/tests/designer/etalons/translation-auto-translate-popup.png differ diff --git a/visualRegressionTests/tests/designer/etalons/translation-property-grid.png b/visualRegressionTests/tests/designer/etalons/translation-property-grid.png index f3c5fe0e05..d08ae19138 100644 Binary files a/visualRegressionTests/tests/designer/etalons/translation-property-grid.png and b/visualRegressionTests/tests/designer/etalons/translation-property-grid.png differ diff --git a/visualRegressionTests/tests/designer/pg-editors.ts b/visualRegressionTests/tests/designer/pg-editors.ts index 0bdec077d3..ec6ee171aa 100644 --- a/visualRegressionTests/tests/designer/pg-editors.ts +++ b/visualRegressionTests/tests/designer/pg-editors.ts @@ -161,7 +161,7 @@ test("Default value popup", async (t) => { .click(generalTab) .click(dataTab) .click(Selector(".svc-action-button.svc-question-link__set-button").withText("Set Default Answer")); - await takeElementScreenshot("pg-default-value-popup.png", Selector(".sv-popup.sv-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); + await takeElementScreenshot("pg-default-value-popup.png", Selector(".sv-popup.svc-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); }); }); @@ -192,7 +192,7 @@ test("Custom button into fast entry popup", async (t) => { .click(generalTab) .click(choicesTab) .click(Selector(".spg-action-button[title='Edit']")); - await takeElementScreenshot("pg-choices-fast-entry-popup.png", Selector(".sv-popup.sv-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); + await takeElementScreenshot("pg-choices-fast-entry-popup.png", Selector(".sv-popup.svc-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); }); }); @@ -209,7 +209,7 @@ test("Logic popup", async (t) => { .click(generalTab) .click(logicTab) .click(Selector(".spg-panel__content div[data-name='visibleIf'] button[title='Edit']")); - await takeElementScreenshot("pg-logic-popup.png", Selector(".sv-popup.sv-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); + await takeElementScreenshot("pg-logic-popup.png", Selector(".sv-popup.svc-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); }); }); @@ -253,10 +253,10 @@ test("Logic popup with boolean question", async (t) => { .click(logicTab) .click(Selector(".spg-panel__content div[data-name='visibleIf'] button[title='Edit']")) .click(Selector(".sd-boolean--checked")); - await takeElementScreenshot("pg-logic-popup-boolean.png", Selector(".sv-popup.sv-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); + await takeElementScreenshot("pg-logic-popup-boolean.png", Selector(".sv-popup.svc-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); await t.click(Selector("button").withText("Cancel").filterVisible()); await t.click(Selector(".spg-panel__content div[data-name='enableIf'] button[title='Edit']")); - await takeElementScreenshot("pg-logic-popup-rating.png", Selector(".sv-popup.sv-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); + await takeElementScreenshot("pg-logic-popup-rating.png", Selector(".sv-popup.svc-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); }); }); @@ -276,7 +276,7 @@ test("Logic popup mobile", async (t) => { .click(logicTab) .click(Selector(".spg-panel__content div[data-name='visibleIf'] button[title='Edit']")); - await takeElementScreenshot("pg-logic-popup-mobile.png", Selector(".sv-popup.sv-property-editor.sv-popup--overlay .sv-popup__container"), t, comparer); + await takeElementScreenshot("pg-logic-popup-mobile.png", Selector(".sv-popup.svc-property-editor.sv-popup--overlay .sv-popup__container"), t, comparer); }); }); diff --git a/visualRegressionTests/tests/designer/pg-logic-actions.ts b/visualRegressionTests/tests/designer/pg-logic-actions.ts index 985a21ee0c..df1b3c784a 100644 --- a/visualRegressionTests/tests/designer/pg-logic-actions.ts +++ b/visualRegressionTests/tests/designer/pg-logic-actions.ts @@ -74,7 +74,7 @@ test("Check list item styles into logic popup", async (t) => { .pressKey("tab") .pressKey("down") .pressKey("down"); - await takeElementScreenshot("pg-logic-popup-dropdown-list-item--focused.png", Selector(".sv-popup.sv-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); + await takeElementScreenshot("pg-logic-popup-dropdown-list-item--focused.png", Selector(".sv-popup.svc-property-editor.sv-popup--modal .sv-popup__container"), t, comparer); }); }); test("Check run expression description", async (t) => {