survey-creator-core 1.9.88 → 1.9.90

package/survey-creator-core.fontless.css

@@ -1,9 +1,33 @@
 /*!
- * SurveyJS Creator v1.9.88
+ * SurveyJS Creator v1.9.90
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
  */
+.svc-context-container {
+  display: flex;
+  gap: calc(1 * var(--base-unit, 8px));
+  width: max-content; }
+
+.svc-context-button {
+  display: block;
+  box-sizing: border-box;
+  background-color: var(--background, #fff);
+  border-radius: 50%;
+  width: calc(6 * var(--base-unit, 8px));
+  height: calc(6 * var(--base-unit, 8px));
+  cursor: pointer;
+  padding: calc(1.5 * var(--base-unit, 8px));
+  outline: none; }
+  .svc-context-button use {
+    fill: var(--foreground-light, #909090); }
+
+.svc-context-button:hover use, .svc-context-button:focus use {
+  fill: var(--primary, #19b394); }
+
+.svc-context-button--danger:hover use, .svc-context-button--danger:focus use {
+  fill: var(--red, #e60a3e); }
+
 .svc-embed-tab__content {
   padding: calc(2 * var(--base-unit, 8px));
   font-family: var(--font-family); }
@@ -92,7 +116,8 @@ svc-tab-json-editor-textarea {
   transform-origin: 0 0;
   top: 50%;
   left: 50%;
-  transform: scale(1.26) translate(-50%, -50%); }
+  transform: scale(1.26) translate(-50%, -50%);
+  overflow: overlay; }
 
 .svd-simulator-wrapper {
   margin: 0 auto;
@@ -167,10 +192,7 @@ svc-tab-json-editor-textarea {
 .svd-simulator-content {
   display: flex;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  overflow-y: overlay; }
+  width: 100%; }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   ::i-block-chrome,
@@ -183,7 +205,7 @@ svc-tab-test {
   background: var(--background-dim, #f3f3f3); }
 
 .svc-test-tab__content .svc-plugin-tab__content {
-  overflow-y: auto; }
+  overflow-y: overlay; }
   .svc-test-tab__content .svc-plugin-tab__content .sv-root-modern .sv-completedpage,
   .svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_completed_page {
     margin: 0;
@@ -236,9 +258,6 @@ svc-tab-test {
       color: var(--foreground, #161616);
       display: inline-block; }
 
-.svc-test-tab__content.svc-creator-tab__content--with-toolbar .sd-body__navigation {
-  padding-bottom: calc(8 * var(--base-unit, 8px)); }
-
 .svc-test-tab__content .sd-body--empty {
   font-family: var(--font-family);
   font-style: normal;
@@ -826,8 +845,6 @@ svc-tab-designer {
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto; }
-  .svc-tab-designer .sd-container-modern .sd-container-modern__title {
-    gap: 0; }
   .svc-tab-designer .sd-container-modern.sd-container-modern--static {
     max-width: calc(84 * var(--base-unit, 8px)); }
   .svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
@@ -857,7 +874,7 @@ svc-tab-designer {
 .svc-designer-placeholder-page {
   margin-top: calc(2 * var(--base-unit, 8px)); }
 
-.svc-designer-placeholder-page .svc-page__add-new-question {
+.svc-designer-placeholder-page .svc-page__footer {
   width: calc(33 * var(--base-unit, 8px));
   margin: auto; }
 
@@ -881,7 +898,7 @@ svc-tab-designer {
   border: 0; }
   .svc-creator--mobile .svc-page__content .sd-page {
     padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)); }
-  .svc-creator--mobile .svc-page__content .svc-page__add-new-question {
+  .svc-creator--mobile .svc-page__content .svc-page__footer {
     margin-left: calc(2 * var(--base-unit, 8px));
     margin-right: calc(2 * var(--base-unit, 8px)); }
 
@@ -926,6 +943,78 @@ svc-tab-designer {
     .svc-creator--mobile .svc-page__content-actions .sv-action-bar .sv-action .sv-action__content .sv-action-bar-item__title--with-icon {
       display: none; }
 
+svc-tab-test {
+  width: 100%;
+  height: 100%;
+  background: var(--background-dim, #f3f3f3); }
+
+.svc-test-tab__content .svc-plugin-tab__content {
+  overflow-y: overlay; }
+  .svc-test-tab__content .svc-plugin-tab__content .sv-root-modern .sv-completedpage,
+  .svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_completed_page {
+    margin: 0;
+    border: 0;
+    background-color: var(--background-dim, #f3f3f3); }
+  .svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_body {
+    border: 0; }
+  .svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
+    width: calc(33 * var(--base-unit, 8px));
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 72px;
+    margin-top: 8px; }
+
+.svc-creator-tab__content--with-toolbar.svc-test-tab__content .svc-plugin-tab__content {
+  height: calc(100% - calc(6 * var(--base-unit, 8px))); }
+
+.svc-test-tab__content-actions {
+  position: relative; }
+  .svc-test-tab__content-actions .sv-action-bar {
+    padding: 0;
+    height: calc(6 * var(--base-unit, 8px));
+    background: var(--background, #fff);
+    border-top: 1px solid var(--border, #d6d6d6);
+    width: 100%;
+    position: absolute; }
+  .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages {
+    left: 0;
+    right: 0;
+    justify-content: center;
+    gap: calc(1 * var(--base-unit, 8px)); }
+    .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
+      padding: 0; }
+    .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action-bar-item {
+      margin: 0; }
+  .svc-test-tab__content-actions .sv-action-bar-item {
+    font-family: var(--font-family);
+    font-style: normal;
+    font-weight: 600;
+    font-size: calc(1.5 * var(--base-unit, 8px));
+    line-height: calc(2 * var(--base-unit, 8px));
+    width: 100%;
+    height: calc(4 * var(--base-unit, 8px)); }
+  .svc-test-tab__content-actions .svc-page-selector {
+    max-width: 50%; }
+    .svc-test-tab__content-actions .svc-page-selector .sv-action-bar-item__title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: var(--foreground, #161616);
+      display: inline-block; }
+
+.svc-test-tab__content .sd-body--empty {
+  font-family: var(--font-family);
+  font-style: normal;
+  font-weight: 400;
+  font-size: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  overflow: hidden; }
+
 .svc-notifier.svc-notifier--shown {
   visibility: visible;
   opacity: 0.75; }
@@ -1092,7 +1181,7 @@ survey-creator,
 
 .svc-string-editor {
   position: static; }
-  .svc-string-editor [contenteditable] {
+  .svc-string-editor [contenteditable="true"] {
     user-select: text;
     -webkit-user-select: text; }
   .svc-string-editor .sv-string-editor {
@@ -1488,11 +1577,19 @@ svc-page {
     .svc-hovered.svc-page__content--selected .svc-page__content-actions {
       display: block; }
 
-.svc-page__add-new-question {
+.svc-page__footer {
+  overflow: visible;
   margin-left: calc(3 * var(--base-unit, 8px));
-  margin-right: calc(3 * var(--base-unit, 8px)); }
-  .svc-page__add-new-question .svc-text {
-    margin-left: calc(6 * var(--base-unit, 8px)); }
+  margin-right: calc(3 * var(--base-unit, 8px));
+  gap: calc(2 * var(--base-unit, 8px)); }
+  .svc-page__footer .sv-action {
+    flex: 1 1 0; }
+  .svc-page__footer .svc-btn {
+    flex-grow: 1;
+    border: none; }
+
+.svc-page__add-new-question .svc-text {
+  margin-left: calc(6 * var(--base-unit, 8px)); }
 
 .svc-page__question-type-selector {
   appearance: none;
@@ -1513,8 +1610,18 @@ svc-page {
   .svc-page__question-type-selector:focus {
     background-color: var(--sjs-primary-backcolor-light, rgba(25, 179, 148, 0.1)); }
 
+.svc-page--drag-over-empty:after {
+  content: " ";
+  position: absolute;
+  background: var(--secondary, #ff9814);
+  left: calc(3 * var(--base-unit, 8px));
+  bottom: calc(11 * var(--base-unit, 8px));
+  width: calc(100% - 48px);
+  height: 4px; }
+
 .svc-row {
-  width: 100%; }
+  width: 100%;
+  position: relative; }
 
 .svc-row .sd-row--multiple {
   padding: calc(1 * var(--base-unit, 8px));
@@ -1550,6 +1657,32 @@ svc-page {
   margin-top: calc(2 * var(--base-unit, 8px));
   margin-bottom: calc(2 * var(--base-unit, 8px)); }
 
+.svc-row--drag-over-top:before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  background: var(--secondary, #ff9814);
+  top: 6px;
+  width: 100%;
+  height: 4px; }
+
+.svc-row--drag-over-bottom:after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  background: var(--secondary, #ff9814);
+  bottom: -10px;
+  width: 100%;
+  height: 4px; }
+
+.svc-question__content--panel .svc-row--drag-over-top:before,
+.sd-panel__content .svc-row--drag-over-top:before {
+  top: -6px; }
+
+.svc-question__content--panel .svc-row--drag-over-bottom:after,
+.sd-panel__content .svc-row--drag-over-bottom:after {
+  bottom: -6px; }
+
 svc-question {
   display: block;
   position: absolute;
@@ -1725,6 +1858,34 @@ svc-question {
   height: 100%;
   width: 4px; }
 
+.svc-question__content--drag-over-top:before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  background: var(--secondary, #ff9814);
+  top: -12px;
+  width: 100%;
+  height: 4px; }
+
+.svc-question__content--drag-over-bottom:before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  background: var(--secondary, #ff9814);
+  bottom: -12px;
+  width: 100%;
+  height: 4px; }
+
+.svc-question__content--panel .sd-row > div:first-child .svc-question__content--drag-over-left,
+.sd-panel__content .sd-row > div:first-child .svc-question__content--drag-over-left {
+  margin-left: 8px;
+  width: calc(100% - 8px); }
+
+.svc-question__content--panel .sd-row > div:last-child .svc-question__content--drag-over-right,
+.sd-panel__content .sd-row > div:last-child .svc-question__content--drag-over-right {
+  margin-right: 8px;
+  width: calc(100% - 8px); }
+
 .svc-question__content-actions .sv-action-bar {
   box-sizing: border-box;
   padding: 0;
@@ -1926,24 +2087,7 @@ svc-question .sv-action-bar,
   display: none; }
 
 .svc-question__content--selected .svc-image-question-controls {
-  display: block; }
-
-.svc-image-question-controls__button {
-  display: inline-block;
-  background-color: var(--background, #fff);
-  border-radius: 50%;
-  width: calc(6 * var(--base-unit, 8px));
-  height: calc(6 * var(--base-unit, 8px));
-  cursor: pointer; }
-  .svc-image-question-controls__button:not(:last-child) {
-    margin-right: calc(0.5 * var(--base-unit, 8px)); }
-  .svc-image-question-controls__button .sv-svg-icon {
-    margin-top: calc(50% - 1.5 * var(--base-unit, 8px));
-    margin-left: calc(50% - 1.5 * var(--base-unit, 8px)); }
-  .svc-image-question-controls__button use {
-    fill: var(--foreground-light, #909090); }
-  .svc-image-question-controls__button:hover use {
-    fill: var(--primary, #19b394); }
+  display: flex; }
 
 .svc-question__content--image:not(.svc-question__content--empty) {
   padding: calc(4 * var(--base-unit, 8px)) 0 calc(8 * var(--base-unit, 8px)) 0; }
@@ -1958,7 +2102,7 @@ svc-question .sv-action-bar,
 .svc-rating-question-controls {
   position: absolute; }
 
-.svc-question__content--selected-no-border .svc-rating-question-controls.svc-item-value-controls {
+.svc-question__content--in-popup .svc-rating-question-controls.svc-item-value-controls {
   display: flex; }
 
 .svc-question__content--selected .svc-rating-question-controls.svc-item-value-controls {
@@ -1968,6 +2112,11 @@ svc-question .sv-action-bar,
   margin-inline-start: calc(9 * var(--base-unit, 8px));
   width: calc(100% - 9 * var(--base-unit, 8px)); }
 
+.svc-question__content .sd-question--table .sd-rating {
+  margin-inline-start: 0;
+  width: fit-content;
+  margin: auto; }
+
 .svc-question__content .svc-rating-question-controls {
   display: flex;
   width: calc(8 * var(--base-unit, 8px));
@@ -2167,34 +2316,9 @@ svc-question .sv-action-bar,
   top: calc(50% - 3 * var(--base-unit, 8px));
   left: calc(50% - 3 * var(--base-unit, 8px)); }
 
-.svc-image-item-value-controls {
-  display: flex; }
-
-.svc-image-item-value-controls__button {
-  display: block;
-  background-color: var(--background, #fff);
-  border-radius: 50%;
-  width: calc(6 * var(--base-unit, 8px));
-  height: calc(6 * var(--base-unit, 8px));
-  cursor: pointer;
-  outline: none; }
-  .svc-image-item-value-controls__button:not(:last-child) {
-    margin-right: calc(1 * var(--base-unit, 8px)); }
-  .svc-image-item-value-controls__button .sv-svg-icon {
-    margin-top: calc(50% - 1.5 * var(--base-unit, 8px));
-    margin-left: calc(50% - 1.5 * var(--base-unit, 8px)); }
-  .svc-image-item-value-controls__button use {
-    fill: var(--foreground-light, #909090); }
-
 .svc-image-item-value--new .svc-image-item-value-controls__button {
   background-color: transparent; }
 
-.svc-image-item-value-controls__choose-file:hover use, .svc-image-item-value-controls__choose-file:focus use {
-  fill: var(--primary, #19b394); }
-
-.svc-image-item-value-controls__remove:hover use, .svc-image-item-value-controls__remove:focus use {
-  fill: var(--red, #e60a3e); }
-
 .svc-image-item-value-controls__add use {
   fill: var(--primary, #19b394); }
 
@@ -2211,15 +2335,15 @@ svc-question .sv-action-bar,
 .svc-image-item-value__item .sd-imagepicker__item.sd-imagepicker__item {
   width: 100%; }
 
-.svc-question__content--selected .svc-image-item-value-wrapper:hover .svc-image-item-value-controls__drag-area-indicator {
-  display: block; }
-
 .svc-image-item-value-controls__drag-area-indicator {
+  display: none;
   cursor: move;
   position: absolute;
   top: calc(1 * var(--base-unit, 8px));
-  left: calc(1 * var(--base-unit, 8px));
-  display: none; }
+  left: calc(1 * var(--base-unit, 8px)); }
+
+.svc-question__content--selected .svc-image-item-value-wrapper:hover .svc-image-item-value-controls__drag-area-indicator {
+  display: block; }
 
 .svc-image-item-value-wrapper--ghost .svc-image-item-value-wrapper__ghost {
   display: block; }
@@ -2281,12 +2405,10 @@ svc-question .sv-action-bar,
 .svc-matrix-cell:hover .svc-matrix-cell__question-controls {
   display: block; }
 
-.svc-question__content--selected-no-border {
-  padding: 0;
+.svc-question__content--in-popup {
   width: calc(100% - 25 * var(--base-unit, 8px));
   min-width: calc(70 * var(--base-unit, 8px));
-  box-shadow: none;
-  background-color: inherit; }
+  padding: calc(5 * var(--base-unit, 8px)); }
 
 .svc-matrix-cell__popup .sv-popup__scrolling-content {
   margin-top: calc(1 * var(--base-unit, 8px));
@@ -2367,6 +2489,10 @@ svc-question .sv-action-bar,
         .svd-test-results .svd-test-results__table table tr .svd-test-results__node-value {
           color: var(--foreground-light, #909090); }
 
+.svc-designer-header .sd-container-modern__title {
+  gap: 0;
+  column-gap: calc(6 * var(--base-unit, 8px)); }
+
 .svc-logo-image {
   position: relative;
   justify-content: flex-end;
@@ -2405,6 +2531,29 @@ svc-question .sv-action-bar,
 .svc-logo-image-placeholder use {
   fill: var(--foreground-light, #909090); }
 
+.svc-logo-image-container {
+  position: relative; }
+  .svc-logo-image-container .sd-logo {
+    margin: 0; }
+
+.svc-logo-image-controls {
+  opacity: 0;
+  width: max-content;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); }
+
+.svc-logo-image-container {
+  cursor: default; }
+
+.svc-logo-image-container:not(.svc-logo-image-container--editable) .svc-logo-image-controls {
+  display: none; }
+
+.svc-logo-image-container--editable:focus-within .svc-logo-image-controls,
+.svc-logo-image-container--editable:hover .svc-logo-image-controls {
+  opacity: 1; }
+
 .svc-question-link__set-button {
   font-weight: 600;
   cursor: pointer; }
@@ -3492,6 +3641,68 @@ button.spg-action-button--large {
 .spg-link {
   display: flex; }
 
+.spg-theme-builder-root .spg-row--multiple .spg-spin-editor .spg-input-container__buttons-container {
+  display: none; }
+
+.spg-theme-builder-root .spg-row--multiple .spg-question__header--location--left {
+  min-width: auto; }
+
+.spg-theme-builder-root .spg-row--multiple > div {
+  flex: 1 1 0;
+  min-width: calc(12.5 * var(--base-unit, 8px)); }
+  .spg-theme-builder-root .spg-row--multiple > div input {
+    min-width: 0; }
+  .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left {
+    height: calc(6 * var(--base-unit, 8px));
+    box-sizing: border-box; }
+    .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left .spg-input {
+      height: auto; }
+
+.spg-theme-builder-root .sv-button-group {
+  overflow: hidden; }
+
+.spg-theme-builder-root .spg-question__header--location--left {
+  width: max-content;
+  flex: 0 0; }
+  .spg-theme-builder-root .spg-question__header--location--left .spg-question__title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+
+.spg-theme-builder-root .spg-panel__content .spg-panel__content {
+  padding: 0;
+  padding-bottom: calc(5 * var(--base-unit, 8px));
+  box-shadow: none; }
+  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__title {
+    background-color: transparent;
+    box-shadow: none;
+    padding: calc(1 * var(--base-unit, 8px)) 0; }
+  .spg-theme-builder-root .spg-panel__content .spg-panel__content::after {
+    content: " ";
+    display: block;
+    position: relative;
+    left: calc(-4 * var(--base-unit, 8px));
+    top: calc(5 * var(--base-unit, 8px));
+    width: calc(8 * var(--base-unit, 8px) + 100%);
+    height: 1px;
+    background-color: var(--border, #d6d6d6); }
+  .spg-theme-builder-root .spg-panel__content .spg-panel__content > .spg-row:first-of-type {
+    margin-top: 0; }
+
+.spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content {
+  padding-bottom: 0; }
+  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content::after {
+    content: none; }
+  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row {
+    margin-top: calc(1 * var(--base-unit, 8px)); }
+    .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row:first-of-type {
+      margin-top: 0; }
+
+.spg-theme-builder-root .spg-panel__content .spg-row:last-of-type .spg-panel__content {
+  padding-bottom: 0; }
+  .spg-theme-builder-root .spg-panel__content .spg-row:last-of-type .spg-panel__content::after {
+    content: none; }
+
 .spg-root-modern {
   width: 100%;
   border-right: 1px solid var(--border, #d6d6d6);