survey-react 1.9.80 → 1.9.81

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.80
+ * surveyjs - Survey JavaScript library v1.9.81
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -932,11 +932,13 @@ sv-popup {
 
 .sv-ranking-item:focus .sv-ranking-item__icon--focus {
   visibility: visible;
+  top: calc(0.6 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
 }
 
 .sv-ranking-item:focus .sv-ranking-item__index {
   background: var(--background, #fff);
-  border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
+  outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
 }
 
 .sv-ranking-item__content.sv-ranking-item__content {
@@ -955,8 +957,6 @@ sv-popup {
   flex-shrink: 0;
   width: calc(3 * var(--base-unit, 8px));
   height: calc(4 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
-  margin-left: calc(1 * var(--base-unit, 8px));
 }
 
 .sv-ranking-item__icon.sv-ranking-item__icon {
@@ -964,7 +964,6 @@ sv-popup {
   fill: var(--primary, #19b394);
   position: absolute;
   top: calc(1 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
 }
@@ -984,7 +983,7 @@ sv-popup {
   line-height: calc(3 * var(--base-unit, 8px));
   box-sizing: border-box;
   font-weight: 600;
-  margin-left: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(0 * var(--base-unit, 8px));
 }
 .sv-ranking-item__index.sv-ranking-item__index.sv-ranking-item__index--empty:empty {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
@@ -1090,12 +1089,15 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon {
-  margin-left: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
   top: calc(1 * var(--base-unit, 8px));
 }
 
+.sv-ranking-shortcut .sv-ranking-item__icon-container {
+  margin-left: calc(1 * var(--base-unit, 8px));
+}
+
 .sv-list {
   padding: 0;
   margin: 0;
@@ -1387,7 +1389,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
   padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
   padding-bottom: var(--sd-base-padding);
-  background: var(--background, #fff);
+  background: var(--sjs-question-background, #fff);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
 }
 .svc-logic-question-value > .sd-question__erbox--outside-question,
@@ -1801,7 +1803,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
   font-size: calc(2 * var(--base-unit, 8px));
   color: var(--foreground, #161616);
-  background-color: var(--background-dim-light, #f9f9f9);
+  background-color: var(--sjs-editor-background, #f9f9f9);
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
   border: none;
   border-radius: 3px;
@@ -1813,7 +1815,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-input--disabled {
-  background-color: var(--background-dim-light, #f9f9f9);
+  background-color: var(--sjs-editor-background, #f9f9f9);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2077,7 +2079,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-table {
   width: 100%;
-  background-color: var(--background, #fff);
   border-collapse: collapse;
   white-space: normal;
 }
@@ -2236,7 +2237,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-matrix__cell:first-of-type,
 .sd-matrix tr > td:first-of-type {
   position: sticky;
-  background: var(--background, #fff);
   z-index: 12;
 }
 .sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,
@@ -2257,7 +2257,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
   margin-right: calc(-3 * var(--base-unit, 8px));
   justify-content: flex-end;
-  background: var(--background, #fff);
 }
 
 .sd-question.sd-question--table {
@@ -2278,7 +2277,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   min-height: 100%;
   width: calc(var(--sd-base-padding) - var(--base-unit, 8px));
   flex-shrink: 0;
-  background: var(--background, #fff);
+  background: var(--sjs-question-background, #fff);
   z-index: 11;
 }
 .sd-table-wrapper::before {
@@ -2367,7 +2366,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-page__row.sd-row--multiple,
 .svc-row > .sd-row--multiple {
-  background: var(--background, #fff);
+  background: var(--sjs-question-background, #fff);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: calc(0.5 * var(--base-unit, 8px));
 }
@@ -2522,7 +2521,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(3 * var(--base-unit, 8px));
   height: calc(3 * var(--base-unit, 8px));
   box-sizing: border-box;
-  background: var(--sd-item-default-background, var(--background-dim-light, #f9f9f9));
+  background: var(--sd-item-default-background, var(--sjs-editor-background, #f9f9f9));
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
   border: none;
   flex-shrink: 0;
@@ -2942,21 +2941,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   left: calc(-3 * var(--base-unit, 8px));
 }
 
-.sd-element--with-frame .sv-ranking-item__icon {
-  margin-left: calc(1 * var(--base-unit, 8px));
-  width: calc(1.75 * var(--base-unit, 8px));
-  height: calc(2 * var(--base-unit, 8px));
-  top: calc(1 * var(--base-unit, 8px));
-}
-
-.sd-element--with-frame .sv-ranking-item__icon-container {
-  position: relative;
-  width: calc(3 * var(--base-unit, 8px));
-  height: calc(4 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
-  margin-left: calc(1 * var(--base-unit, 8px));
-}
-
 .sd-element--with-frame .sv-ranking--mobile .sv-ranking-item__icon-container {
   margin-left: 0;
   margin-right: calc(1 * var(--base-unit, 8px));
@@ -3078,11 +3062,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-dropdown__hint-prefix {
   color: var(--foreground-light, #909090);
 }
+.sd-dropdown__hint-prefix span {
+  white-space: pre;
+}
 
 .sd-dropdown__hint-suffix {
   display: flex;
   color: var(--foreground-light, #909090);
 }
+.sd-dropdown__hint-suffix span {
+  white-space: pre;
+}
 
 [dir=rtl] .sd-dropdown,
 [style*="direction:rtl"] .sd-dropdown,
@@ -3393,7 +3383,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: max-content;
   position: relative;
   padding: calc(0.5 * var(--base-unit, 8px));
-  background: var(--background-dim-light, #f9f9f9);
+  background: var(--sjs-editor-background, #f9f9f9);
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: calc(12.5 * var(--base-unit, 8px));
 }
@@ -3612,6 +3602,65 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-bottom: calc(-1 * var(--base-unit, 8px));
 }
 
+.sv-tabs-toolbar.sv-action-bar {
+  gap: calc(4 * var(--base-unit, 8px));
+}
+
+.sv-tabs-toolbar.sv-tabs-toolbar--left {
+  justify-content: flex-start;
+}
+
+.sv-tabs-toolbar.sv-tabs-toolbar--right {
+  justify-content: flex-end;
+}
+
+.sv-tabs-toolbar.sv-tabs-toolbar--center {
+  justify-content: center;
+}
+
+.sv-tab-item__root {
+  display: flex;
+}
+
+.sv-tab-item {
+  padding: calc(1 * var(--base-unit, 8px)) 0 calc(2 * var(--base-unit, 8px)) 0;
+  display: flex;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: flex;
+  padding: calc(1 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-size: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground-light, #909090);
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+.sv-tab-item.sv-tab-item--pressed {
+  color: var(--foreground, #161616);
+  box-shadow: inset 0px -2px 0px var(--primary, #19b394);
+}
+
+.sv-tab-item__title {
+  line-height: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+  display: flex;
+  align-items: center;
+}
+
+.sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab {
+  padding-bottom: 0;
+}
+
+.sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab::after {
+  bottom: 0;
+}
+
 .sd-file {
   min-height: calc(36 * var(--base-unit, 8px));
   position: relative;
@@ -4254,7 +4303,6 @@ svg.sd-action--icon {
   max-width: calc(42 * var(--base-unit, 8px));
   height: 100%;
   background: var(--background, #fff);
-  border-right: 1px solid var(--border, #d6d6d6);
   box-sizing: border-box;
   min-width: calc(32 * var(--base-unit, 8px));
 }
@@ -4274,6 +4322,14 @@ svg.sd-action--icon {
   padding-bottom: calc(1.5 * var(--base-unit, 8px));
 }
 
+.sv_progress-toc--left {
+  border-right: 1px solid var(--border, #d6d6d6);
+}
+
+.sv_progress-toc--right {
+  border-left: 1px solid var(--border, #d6d6d6);
+}
+
 .sd-list {
   padding-right: calc(0.5 * var(--base-unit, 8px));
   padding-left: calc(0.5 * var(--base-unit, 8px));