survey-creator-core 2.0.0-rc.3 → 2.0.0-rc.4

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v2.0.0-rc.3
+ * SurveyJS Creator v2.0.0-rc.4
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -228,7 +228,7 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v2.0.0-rc.3
+ * SurveyJS Creator v2.0.0-rc.4
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -801,16 +801,9 @@ svc-tab-preview {
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
-.svc-test-tab--empty {
-  display: flex;
-  flex-direction: column;
+.svc-test-tab__content {
   align-items: center;
   justify-content: center;
-  flex-grow: 1;
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-  gap: 0px;
 }
 
 .svc-test-tab__content .svc-plugin-tab__content .sv-root-modern .sv-completedpage,
@@ -837,6 +830,7 @@ svc-tab-preview {
 
 .svc-test-tab__content-actions {
   position: relative;
+  width: 100%;
 }
 .svc-test-tab__content-actions .sv-action-bar {
   padding: var(--ctr-preview-pager-padding-top, var(--sjs-spacing-x1)) var(--ctr-preview-pager-padding-right, 0px) var(--ctr-preview-pager-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-preview-pager-padding-left, 0px);
@@ -1980,13 +1974,9 @@ td.st-table__cell:first-of-type span {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-grow: 1;
-  flex-shrink: 0;
-  width: 100%;
-  gap: 0px;
 }
 .svc-logic-tab__content.svc-logic-tab--empty .svc-logic-tab__content-action {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin: 0;
 }
 .svc-logic-tab__content .svc-logic-tab__content-action {
   margin-left: 25%;
@@ -2011,8 +2001,12 @@ td.st-table__cell:first-of-type span {
   align-items: start;
 }
 
-.svc-logic-tab__content-empty .svc-btn__text {
-  color: var(--ctr-surface-placeholder-text-description-color, var(--sjs-layer-3-foreground-50, rgba(0, 0, 0, 0.5019607843)));
+.svc-logic-tab__content-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
 }
 
 .svc-logic-paneldynamic .sd-row--multiple {
@@ -2104,7 +2098,7 @@ td.st-table__cell:first-of-type span {
 svc-tab-designer {
   width: 100%;
   height: 100%;
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background: var(--ctr-surface-background-color, var(--sjs-special-background, #edf9f7));
 }
 
 .svc-tab-designer {
@@ -2118,7 +2112,8 @@ svc-tab-designer {
 }
 
 .svc-tab-designer--with-placeholder .svc-designer-header {
-  min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: 100%;
+  min-width: var(--sjs-size-x90);
 }
 
 .svc-content-wrapper {
@@ -2197,6 +2192,7 @@ svc-tab-designer {
 
 .svc-tab-designer--with-placeholder .svc-tab-designer_content {
   display: flex;
+  align-items: center;
   justify-content: center;
   flex-direction: column;
   min-height: 100%;
@@ -2213,7 +2209,6 @@ svc-tab-designer {
 
 .svc-designer__placeholder-container {
   display: flex;
-  flex-grow: 1;
   flex-shrink: 0;
   width: 100%;
   flex-direction: column;
@@ -2679,32 +2674,18 @@ svc-tab-designer {
   align-items: center;
   justify-content: center;
   gap: 0px;
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
 
-.svc-creator--mobile .svc-surface-placeholder {
-  padding: var(--ctr-surface-placeholder-padding-top, 0px) var(--ctr-surface-placeholder-padding-right, var(--sjs-spacing-x6)) var(--ctr-surface-placeholder-padding-bottom, var(--sjs-spacing-x16)) var(--ctr-surface-placeholder-padding-left, var(--sjs-spacing-x6));
-}
-.svc-creator--mobile .svc-surface-placeholder__text {
-  padding: var(--ctr-surface-placeholder-text-margin-top, var(--sjs-spacing-x4)) var(--ctr-surface-placeholder-text-margin-right, 32px) var(--ctr-surface-placeholder-text-margin-bottom, var(--sjs-spacing-x6)) var(--ctr-surface-placeholder-text-margin-left, 32px);
-}
-
 .svc-surface-placeholder__image {
   display: flex;
   flex-direction: row;
-  gap: 0px;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
   overflow: hidden;
   padding: 135px 170px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
 }
 
 .svc-surface-placeholder__image--designer {
@@ -2762,30 +2743,16 @@ svc-tab-designer {
   align-self: stretch;
 }
 
+.svc-logic-tab__content-empty,
+.svc-test-tab__content .svc-surface-placeholder,
+.svc-translation-tab--empty .svc-surface-placeholder,
 .svc-designer__placeholder-container {
-  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
-.svc-logic-tab--empty > :last-child {
-  margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
-.svc-test-tab--empty .svc-surface-placeholder,
-.svc-translation-tab--empty .svc-surface-placeholder {
-  padding-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
-.svc-creator--mobile .svc-designer__placeholder-container {
-  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator--mobile .svc-logic-tab--empty > :last-child {
-  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator--mobile .svc-test-tab--empty .svc-surface-placeholder,
-.svc-creator--mobile .svc-translation-tab--empty .svc-surface-placeholder {
-  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  max-width: var(--ctr-surface-placeholder-max-width, var(--sjs-size-x90));
+  padding: var(--ctr-surface-placeholder-padding-top, var(--sjs-spacing-x4)) var(--ctr-surface-placeholder-padding-right, var(--sjs-spacing-x6)) var(--ctr-surface-placeholder-padding-bottom, var(--sjs-spacing-x16)) var(--ctr-surface-placeholder-padding-left, var(--sjs-spacing-x6));
 }
 
+.svc-surface-drag-drop-choices-shortcut,
+.svc-designer-surface,
 .svc-creator-popup,
 .svc-creator {
   --lbr-line-height-x8: calc(var(--lbr-line-height-unit, 8px) * 8);
@@ -2808,6 +2775,8 @@ svc-tab-designer {
   --lbr-font-size-x150: calc(var(--lbr-font-unit, 8px) * 1.5);
 }
 
+.svc-surface-drag-drop-choices-shortcut,
+.svc-designer-surface,
 .svc-creator-popup,
 .svc-creator {
   --lbr-spacing-x16: calc(var(--lbr-spacing-unit, 8px) * 16);
@@ -3146,6 +3115,7 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
   position: relative;
   width: 100%;
   height: 100%;
+  min-height: min-content;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -3153,6 +3123,7 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
 
 .svc-plugin-tab__content {
   flex-basis: 0;
+  width: 100%;
   max-height: 100%;
   overflow-y: auto;
   flex-grow: 1;
@@ -3720,6 +3691,15 @@ svc-page {
   margin: 0;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
+.svc-page__content:before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  margin-top: calc(var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2)) * -1);
+  padding-top: var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2));
+  bottom: 0;
+}
 .svc-page__content > .svc-question__drag-area {
   padding-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -3888,7 +3868,7 @@ svc-page {
 }
 
 .svc-designer-placeholder-page .svc-page__content--new.svc-page__content--new {
-  padding-top: var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2));
+  padding: 0;
 }
 
 .svc-page__content--selected .svc-page__content-actions,
@@ -7700,6 +7680,9 @@ svc-question .sv-action-bar,
   height: 100%;
 }
 
+.svc-side-bar--flyout {
+  z-index: 1000;
+}
 .svc-side-bar--flyout .svc-side-bar__shadow {
   background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, rgba(204, 238, 238, 0.3490196078)));
   position: absolute;
@@ -7707,11 +7690,9 @@ svc-question .sv-action-bar,
   bottom: 0;
   inset-inline-end: 0;
   inset-inline-start: 0;
-  z-index: 900;
 }
 .svc-side-bar--flyout .svc-side-bar__container-wrapper {
   border-left: none;
-  z-index: 1000;
   position: absolute;
   inset-inline-end: 0;
   height: 100%;
@@ -7726,7 +7707,7 @@ svc-question .sv-action-bar,
   max-width: 100%;
 }
 .svc-side-bar--flyout .svc-sidebar-tabs {
-  z-index: 1000;
+  z-index: 1;
 }
 
 .svc-side-bar--mobile .svc-side-bar__wrapper {

package/survey-creator-core.fontless.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v2.0.0-rc.3
+ * SurveyJS Creator v2.0.0-rc.4
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -572,16 +572,9 @@ svc-tab-preview {
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
-.svc-test-tab--empty {
-  display: flex;
-  flex-direction: column;
+.svc-test-tab__content {
   align-items: center;
   justify-content: center;
-  flex-grow: 1;
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-  gap: 0px;
 }
 
 .svc-test-tab__content .svc-plugin-tab__content .sv-root-modern .sv-completedpage,
@@ -608,6 +601,7 @@ svc-tab-preview {
 
 .svc-test-tab__content-actions {
   position: relative;
+  width: 100%;
 }
 .svc-test-tab__content-actions .sv-action-bar {
   padding: var(--ctr-preview-pager-padding-top, var(--sjs-spacing-x1)) var(--ctr-preview-pager-padding-right, 0px) var(--ctr-preview-pager-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-preview-pager-padding-left, 0px);
@@ -1751,13 +1745,9 @@ td.st-table__cell:first-of-type span {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-grow: 1;
-  flex-shrink: 0;
-  width: 100%;
-  gap: 0px;
 }
 .svc-logic-tab__content.svc-logic-tab--empty .svc-logic-tab__content-action {
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin: 0;
 }
 .svc-logic-tab__content .svc-logic-tab__content-action {
   margin-left: 25%;
@@ -1782,8 +1772,12 @@ td.st-table__cell:first-of-type span {
   align-items: start;
 }
 
-.svc-logic-tab__content-empty .svc-btn__text {
-  color: var(--ctr-surface-placeholder-text-description-color, var(--sjs-layer-3-foreground-50, rgba(0, 0, 0, 0.5019607843)));
+.svc-logic-tab__content-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
 }
 
 .svc-logic-paneldynamic .sd-row--multiple {
@@ -1875,7 +1869,7 @@ td.st-table__cell:first-of-type span {
 svc-tab-designer {
   width: 100%;
   height: 100%;
-  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  background: var(--ctr-surface-background-color, var(--sjs-special-background, #edf9f7));
 }
 
 .svc-tab-designer {
@@ -1889,7 +1883,8 @@ svc-tab-designer {
 }
 
 .svc-tab-designer--with-placeholder .svc-designer-header {
-  min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: 100%;
+  min-width: var(--sjs-size-x90);
 }
 
 .svc-content-wrapper {
@@ -1968,6 +1963,7 @@ svc-tab-designer {
 
 .svc-tab-designer--with-placeholder .svc-tab-designer_content {
   display: flex;
+  align-items: center;
   justify-content: center;
   flex-direction: column;
   min-height: 100%;
@@ -1984,7 +1980,6 @@ svc-tab-designer {
 
 .svc-designer__placeholder-container {
   display: flex;
-  flex-grow: 1;
   flex-shrink: 0;
   width: 100%;
   flex-direction: column;
@@ -2450,32 +2445,18 @@ svc-tab-designer {
   align-items: center;
   justify-content: center;
   gap: 0px;
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
 
-.svc-creator--mobile .svc-surface-placeholder {
-  padding: var(--ctr-surface-placeholder-padding-top, 0px) var(--ctr-surface-placeholder-padding-right, var(--sjs-spacing-x6)) var(--ctr-surface-placeholder-padding-bottom, var(--sjs-spacing-x16)) var(--ctr-surface-placeholder-padding-left, var(--sjs-spacing-x6));
-}
-.svc-creator--mobile .svc-surface-placeholder__text {
-  padding: var(--ctr-surface-placeholder-text-margin-top, var(--sjs-spacing-x4)) var(--ctr-surface-placeholder-text-margin-right, 32px) var(--ctr-surface-placeholder-text-margin-bottom, var(--sjs-spacing-x6)) var(--ctr-surface-placeholder-text-margin-left, 32px);
-}
-
 .svc-surface-placeholder__image {
   display: flex;
   flex-direction: row;
-  gap: 0px;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
   overflow: hidden;
   padding: 135px 170px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
 }
 
 .svc-surface-placeholder__image--designer {
@@ -2533,30 +2514,16 @@ svc-tab-designer {
   align-self: stretch;
 }
 
+.svc-logic-tab__content-empty,
+.svc-test-tab__content .svc-surface-placeholder,
+.svc-translation-tab--empty .svc-surface-placeholder,
 .svc-designer__placeholder-container {
-  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
-.svc-logic-tab--empty > :last-child {
-  margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
-.svc-test-tab--empty .svc-surface-placeholder,
-.svc-translation-tab--empty .svc-surface-placeholder {
-  padding-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
-.svc-creator--mobile .svc-designer__placeholder-container {
-  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator--mobile .svc-logic-tab--empty > :last-child {
-  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator--mobile .svc-test-tab--empty .svc-surface-placeholder,
-.svc-creator--mobile .svc-translation-tab--empty .svc-surface-placeholder {
-  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  max-width: var(--ctr-surface-placeholder-max-width, var(--sjs-size-x90));
+  padding: var(--ctr-surface-placeholder-padding-top, var(--sjs-spacing-x4)) var(--ctr-surface-placeholder-padding-right, var(--sjs-spacing-x6)) var(--ctr-surface-placeholder-padding-bottom, var(--sjs-spacing-x16)) var(--ctr-surface-placeholder-padding-left, var(--sjs-spacing-x6));
 }
 
+.svc-surface-drag-drop-choices-shortcut,
+.svc-designer-surface,
 .svc-creator-popup,
 .svc-creator {
   --lbr-line-height-x8: calc(var(--lbr-line-height-unit, 8px) * 8);
@@ -2579,6 +2546,8 @@ svc-tab-designer {
   --lbr-font-size-x150: calc(var(--lbr-font-unit, 8px) * 1.5);
 }
 
+.svc-surface-drag-drop-choices-shortcut,
+.svc-designer-surface,
 .svc-creator-popup,
 .svc-creator {
   --lbr-spacing-x16: calc(var(--lbr-spacing-unit, 8px) * 16);
@@ -2917,6 +2886,7 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
   position: relative;
   width: 100%;
   height: 100%;
+  min-height: min-content;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -2924,6 +2894,7 @@ survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__co
 
 .svc-plugin-tab__content {
   flex-basis: 0;
+  width: 100%;
   max-height: 100%;
   overflow-y: auto;
   flex-grow: 1;
@@ -3491,6 +3462,15 @@ svc-page {
   margin: 0;
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
+.svc-page__content:before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  margin-top: calc(var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2)) * -1);
+  padding-top: var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2));
+  bottom: 0;
+}
 .svc-page__content > .svc-question__drag-area {
   padding-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -3659,7 +3639,7 @@ svc-page {
 }
 
 .svc-designer-placeholder-page .svc-page__content--new.svc-page__content--new {
-  padding-top: var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2));
+  padding: 0;
 }
 
 .svc-page__content--selected .svc-page__content-actions,
@@ -7471,6 +7451,9 @@ svc-question .sv-action-bar,
   height: 100%;
 }
 
+.svc-side-bar--flyout {
+  z-index: 1000;
+}
 .svc-side-bar--flyout .svc-side-bar__shadow {
   background-color: var(--ctr-popup-haze-background-color, var(--sjs-special-haze, rgba(204, 238, 238, 0.3490196078)));
   position: absolute;
@@ -7478,11 +7461,9 @@ svc-question .sv-action-bar,
   bottom: 0;
   inset-inline-end: 0;
   inset-inline-start: 0;
-  z-index: 900;
 }
 .svc-side-bar--flyout .svc-side-bar__container-wrapper {
   border-left: none;
-  z-index: 1000;
   position: absolute;
   inset-inline-end: 0;
   height: 100%;
@@ -7497,7 +7478,7 @@ svc-question .sv-action-bar,
   max-width: 100%;
 }
 .svc-side-bar--flyout .svc-sidebar-tabs {
-  z-index: 1000;
+  z-index: 1;
 }
 
 .svc-side-bar--mobile .svc-side-bar__wrapper {