survey-creator-react 1.9.6-beta.1 → 1.9.7-beta.1

package/survey-creator-react.min.css

@@ -1,11 +1,11 @@
 /*!
- * SurveyJS Creator React v1.9.6-beta.1
+ * SurveyJS Creator React v1.9.7-beta.1
  * (c) 2015-2022 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
  */
 /*!
- * SurveyJS Creator v1.9.6-beta.1
+ * SurveyJS Creator v1.9.7-beta.1
  * (c) 2015-2022 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -778,19 +778,17 @@ svc-tab-test {
   outline: none;
   box-shadow: none; }
 
-.svc-logic-operator.svc-logic-operator--conjunction {
-  background-color: var(--primary-light, rgba(25, 179, 148, 0.1)); }
-  .svc-logic-operator.svc-logic-operator--conjunction:hover, .svc-logic-operator.svc-logic-operator--conjunction:focus {
-    background-color: var(--primary, #19b394); }
-
 .svc-logic-operator.svc-logic-operator--question {
   background-color: var(--blue-light, rgba(67, 127, 217, 0.1)); }
   .svc-logic-operator.svc-logic-operator--question:hover, .svc-logic-operator.svc-logic-operator--question:focus {
     background-color: var(--blue, #437FD9); }
 
+.svc-logic-operator.svc-logic-operator--conjunction,
 .svc-logic-operator.svc-logic-operator--operator {
   background-color: var(--secondary-back-light, rgba(255, 152, 20, 0.1)); }
-  .svc-logic-operator.svc-logic-operator--operator:hover, .svc-logic-operator.svc-logic-operator--operator:focus {
+  .svc-logic-operator.svc-logic-operator--conjunction:hover, .svc-logic-operator.svc-logic-operator--conjunction:focus,
+  .svc-logic-operator.svc-logic-operator--operator:hover,
+  .svc-logic-operator.svc-logic-operator--operator:focus {
     background-color: var(--secondary, #ff9814); }
 
 .svc-logic-operator.svc-logic-operator--action {
@@ -996,11 +994,25 @@ svc-tab-designer {
   margin-left: auto;
   margin-right: auto; }
   .svc-tab-designer .sd-container-modern.sd-container-modern--static {
-    max-width: calc(102 * var(--base-unit, 8px)); }
+    max-width: calc(84 * var(--base-unit, 8px)); }
   .svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
     max-width: initial;
     padding: 0 calc(1 * var(--base-unit, 8px)); }
 
+.svc-designer__placeholder-container {
+  position: absolute;
+  top: 35%; }
+
+.svc-designer-placeholder-page {
+  margin-top: calc(2 * var(--base-unit, 8px)); }
+
+.svc-designer-placeholder-page .svc-page__add-new-question {
+  width: calc(33 * var(--base-unit, 8px));
+  margin: auto; }
+
+.svc-designer-placeholder-page .svc-row--ghost {
+  display: none; }
+
 /* latin */
 @font-face {
   font-family: "Open Sans";
@@ -1168,7 +1180,8 @@ survey-creator,
   width: 100%;
   height: 100%;
   overflow: hidden;
-  position: relative; }
+  position: relative;
+  min-height: var(--tab-min-height, 600px); }
 
 .svc-creator__toolbox--right.svc-creator-tab {
   flex-direction: row-reverse; }
@@ -1374,9 +1387,6 @@ survey-creator,
   left: calc(-0.7 * var(--base-unit, 8px));
   right: calc(-0.7 * var(--base-unit, 8px)); }
 
-.sd-table__cell:first-child .svc-string-editor {
-  margin-left: calc(1 * var(--base-unit, 8px)); }
-
 /* latin */
 @font-face {
   font-family: "Open Sans";
@@ -1499,11 +1509,17 @@ svc-page-navigator,
   height: calc(5.5 * var(--base-unit, 8px));
   min-height: calc(5.5 * var(--base-unit, 8px)); }
 
-survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus, .svc-creator .svc-page-navigator__selector:hover, .svc-creator .svc-page-navigator__selector:focus {
+survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus,
+.svc-creator .svc-page-navigator__selector:hover,
+.svc-creator .svc-page-navigator__selector:focus {
   outline: none; }
-  survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon, .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon, .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon {
+  survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon,
+  .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon,
+  .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon {
     background-color: var(--primary-light, rgba(25, 179, 148, 0.1)); }
-    survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use, .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use, .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use {
+    survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use,
+    .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use,
+    .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use {
       fill: var(--primary, #19b394); }
 
 .svc-page-navigator__selector--opened {
@@ -1528,8 +1544,7 @@ survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-nav
   right: calc(1 * var(--base-unit, 8px)); }
 
 .svc-creator__toolbox--right .svc-tab-designer--with-page-navigator {
-  padding-right: 0;
-  padding-left: calc(6.5 * var(--base-unit, 8px)); }
+  padding-right: 0; }
 
 .svc-creator__toolbox--right .svc-tab-designer__page-navigator {
   right: unset;
@@ -2294,7 +2309,9 @@ svc-question .sv-action-bar,
   margin-right: calc(1 * var(--base-unit, 8px));
   height: calc(4 * var(--base-unit, 8px));
   box-sizing: border-box;
-  flex-shrink: 0; }
+  flex-shrink: 0;
+  min-width: 72px;
+  justify-content: end; }
 
 .svc-item-value-controls__button {
   border-radius: 50%;
@@ -2320,11 +2337,12 @@ sv-svg-icon.svc-item-value-controls__button {
 
 .svc-item-value-controls__drag {
   padding: calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
-  cursor: move; }
+  cursor: move;
+  opacity: 0.25; }
   .svc-item-value-controls__drag .svc-item-value-controls__drag-icon {
     visibility: hidden; }
   .svc-item-value-controls__drag use {
-    fill: var(--primary, #19b394); }
+    fill: var(--foreground, #161616); }
 
 .svc-item-value-controls__remove {
   float: right; }
@@ -2351,14 +2369,14 @@ sv-svg-icon.svc-item-value-controls__button {
 .sv-string-editor {
   cursor: text; }
 
-.svc-item-value--new {
-  margin-left: 0; }
-  .svc-item-value--new .svc-item-value__item .sd-item__control-label {
-    color: var(--foreground-light, #909090); }
-  .svc-item-value--new .svc-item-value__item .sd-item__decorator {
-    opacity: 0.35; }
-  .svc-item-value--new .sv-ranking-item__index {
-    background: var(--background-for-editors, #f9f9f9); }
+.svc-item-value--new .svc-item-value__item .sd-item__control-label {
+  color: var(--foreground-light, #909090); }
+
+.svc-item-value--new .svc-item-value__item .sd-item__decorator {
+  opacity: 0.35; }
+
+.svc-item-value--new .sv-ranking-item__index {
+  background: var(--background-for-editors, #f9f9f9); }
 
 .sv-ranking .svc-item-value-wrapper {
   align-items: center; }
@@ -2460,18 +2478,18 @@ sv-svg-icon.svc-item-value-controls__button {
   top: calc(50% - 3 * var(--base-unit, 8px));
   left: calc(50% - 3 * var(--base-unit, 8px)); }
 
-.svc-question__content--selected .svc-image-item-value-controls {
-  display: block; }
+.svc-image-item-value-controls {
+  display: flex; }
 
 .svc-image-item-value-controls__button {
-  display: inline-block;
+  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; }
   .svc-image-item-value-controls__button:not(:last-child) {
-    margin-right: calc(0.5 * var(--base-unit, 8px)); }
+    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)); }
@@ -2649,75 +2667,76 @@ sv-svg-icon.svc-item-value-controls__button {
 :root {
   --font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
-.svd_test_results {
-  padding: 1em; }
-  .svd_test_results .svd_results_text {
-    padding: 1em;
-    white-space: pre-wrap;
-    width: 100%;
-    overflow: auto; }
-  .svd_test_results .svd_results_table {
-    padding: 1em;
-    width: 100%;
-    overflow: auto; }
-    .svd_test_results .svd_results_table table {
-      border-collapse: collapse;
-      width: 100%; }
-      .svd_test_results .svd_results_table table .survey-result-marker {
+.svd-test-results {
+  font-family: var(--font-family);
+  width: 80%;
+  margin: auto;
+  margin-bottom: calc(5 * var(--base-unit, 8px));
+  background-color: var(--background, #fff);
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
+  border-radius: 10px; }
+  .svd-test-results .svd-test-results__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: calc(1 * var(--base-unit, 8px)) calc(4 * var(--base-unit, 8px));
+    font-size: calc(2 * var(--base-unit, 8px));
+    color: var(--foreground-light, #909090);
+    border-bottom: 2px solid var(--background-dim, #f3f3f3); }
+    .svd-test-results .svd-test-results__header .svd-test-results__header-text {
+      margin: 0; }
+    .svd-test-results .svd-test-results__header .svd-test-results__header-types {
+      display: flex; }
+  .svd-test-results .svd-test-results__text {
+    display: flex;
+    padding: calc(2 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
+    width: calc(100% - calcSize(6));
+    overflow: auto;
+    user-select: text;
+    white-space: pre-wrap; }
+  .svd-test-results .svd-test-results__table {
+    width: 100%; }
+    .svd-test-results .svd-test-results__table table {
+      width: 100%;
+      border-collapse: collapse; }
+      .svd-test-results .svd-test-results__table table .svd-test-results__marker {
         position: absolute;
-        left: 1em;
-        top: 0.5em;
-        transition: transform 0.2s ease-in-out; }
-        .svd_test_results .svd_results_table table .survey-result-marker.survey-result-marker--expanded {
+        top: calc(1.5 * var(--base-unit, 8px)); }
+        .svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
+          transition: transform 0.2s ease-in-out; }
+          .svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon use {
+            fill: var(--foreground-light, #909090); }
+        .svd-test-results .svd-test-results__table table .svd-test-results__marker.svd-test-results__marker--expanded .sv-svg-icon {
+          transform-origin: center;
           transform: rotate(90deg); }
-      .svd_test_results .svd_results_table table .survey-result-value {
-        word-break: break-all; }
-      .svd_test_results .svd_results_table table tr {
-        vertical-align: top; }
-      .svd_test_results .svd_results_table table th,
-      .svd_test_results .svd_results_table table td {
-        border: 1px solid;
-        padding: 0.5em 1em;
+      .svd-test-results .svd-test-results__table table th {
+        padding: calc(1 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
+        background-color: var(--background-dim, #f3f3f3);
+        text-align: left;
+        font-weight: 600;
+        font-size: 12px;
+        color: var(--foreground-light, #909090); }
+        .svd-test-results .svd-test-results__table table th:nth-child(1) {
+          padding-left: calc(4 * var(--base-unit, 8px)); }
+      .svd-test-results .svd-test-results__table table td {
+        padding: calc(1 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
         max-width: calc(50 * var(--base-unit, 8px));
-        overflow: auto; }
-        .svd_test_results .svd_results_table table th:nth-child(1),
-        .svd_test_results .svd_results_table table td:nth-child(1) {
+        overflow: auto;
+        border-top: 2px solid var(--background-dim, #f3f3f3);
+        user-select: text; }
+        .svd-test-results .svd-test-results__table table td:nth-child(1) {
           position: relative;
-          width: 30%;
-          font-weight: 500;
-          padding-left: 2em; }
-        .svd_test_results .svd_results_table table th:nth-child(2),
-        .svd_test_results .svd_results_table table td:nth-child(2) {
-          width: 20%; }
-        .svd_test_results .svd_results_table table th:nth-child(3),
-        .svd_test_results .svd_results_table table td:nth-child(3) {
-          width: 20%; }
-        .svd_test_results .svd_results_table table th:nth-child(4),
-        .svd_test_results .svd_results_table table td:nth-child(4) {
-          width: 30%;
-          font-weight: 500; }
-
-.nav-tabs {
-  margin-bottom: 0;
-  padding: 0;
-  line-height: 2.5em; }
-
-.nav-item {
-  display: inline-block;
-  margin-left: -3px; }
-  .nav-item:first-child {
-    margin-left: 0; }
-
-.nav-link {
-  border-radius: 0;
-  border-top-left-radius: calc(0.25 * var(--base-unit, 8px));
-  border-top-right-radius: calc(0.25 * var(--base-unit, 8px));
-  padding: 0.5em 1em;
-  text-align: center; }
-  .nav-link.active {
-    border: calc(0.125 * var(--base-unit, 8px)) solid var(--border, #d6d6d6);
-    border-color: var(--border, #d6d6d6);
-    border-bottom-color: transparent; }
+          width: 50%;
+          font-weight: 600; }
+        .svd-test-results .svd-test-results__table table td:nth-child(2) {
+          width: 50%;
+          padding-right: calc(4 * var(--base-unit, 8px)); }
+      .svd-test-results .svd-test-results__table table .survey-result-value {
+        word-break: break-all; }
+      .svd-test-results .svd-test-results__table table tr {
+        vertical-align: top; }
+        .svd-test-results .svd-test-results__table table tr .svd-test-results__node-value {
+          color: var(--foreground-light, #909090); }
 
 /* latin */
 @font-face {
@@ -3066,6 +3085,11 @@ sv-svg-icon.svc-item-value-controls__button {
   align-items: center;
   margin-right: 0;
   margin-left: calc(-1.5 * var(--base-unit, 8px)); }
+  .svc-toolbox__item-banner .svc-toolbox__item-icon {
+    position: absolute;
+    display: block;
+    left: calc(1.5 * var(--base-unit, 8px));
+    top: calc(1 * var(--base-unit, 8px)); }
   .svc-toolbox__item-banner .svc-toolbox__item-title {
     color: var(--foreground, #161616); }
   .svc-toolbox__item-banner .sv-svg-icon use {
@@ -3078,6 +3102,10 @@ sv-svg-icon.svc-item-value-controls__button {
   padding-left: calc(2 * var(--base-unit, 8px));
   margin-left: 0;
   margin-right: calc(-1.5 * var(--base-unit, 8px)); }
+  .svc-creator__toolbox--right .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+  .svc-creator__toolbox--right .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
+    padding-left: calc(1 * var(--base-unit, 8px));
+    padding-right: calc(4 * var(--base-unit, 8px)); }
 
 .svc-creator__toolbox--right .svc-toolbox__item {
   flex-direction: row-reverse; }
@@ -3091,6 +3119,10 @@ sv-svg-icon.svc-item-value-controls__button {
 .svc-creator__toolbox--right .svc-toolbox__category {
   align-items: flex-end; }
 
+.svc-creator__toolbox--right .svc-toolbox__item-banner .svc-toolbox__item-icon {
+  left: auto;
+  right: calc(1.5 * var(--base-unit, 8px)); }
+
 .svc-toolbox__item-title {
   font-family: var(--font-family);
   font-style: normal;
@@ -3109,6 +3141,9 @@ sv-svg-icon.svc-item-value-controls__button {
   padding-left: calc(1.5 * var(--base-unit, 8px));
   padding-right: calc(2 * var(--base-unit, 8px));
   opacity: 1; }
+  .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+  .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
+    padding-left: calc(4 * var(--base-unit, 8px)); }
 
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
@@ -3214,7 +3249,8 @@ sv-svg-icon.svc-item-value-controls__button {
 
 svc-toolbox {
   display: flex;
-  flex-direction: column; }
+  flex-direction: column;
+  position: absolute; }
 
 .svc-toolbox {
   height: 100%;
@@ -3396,7 +3432,8 @@ svc-toolbox {
     top: 0;
     bottom: 0;
     right: 0;
-    left: 0; }
+    left: 0;
+    z-index: 9000; }
   .svc-flyout-side-bar .svc-side-bar__wrapper {
     z-index: 10000;
     position: absolute;