survey-react 1.9.79 → 1.9.81

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.79
+ * 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;
@@ -1927,6 +1929,32 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   row-gap: 0;
 }
 
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header:after {
+  content: none;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
+  position: static;
+  font-size: calc(3 * var(--base-unit, 8px));
+  line-height: calc(4 * var(--base-unit, 8px));
+  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+  font-weight: 700;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title span {
+  font-size: inherit;
+  line-height: inherit;
+}
+.sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
+  position: static;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+  font-weight: 400;
+}
+
 .sd-panel__required-text {
   color: var(--red, #e60a3e);
 }
@@ -2051,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;
 }
@@ -2193,6 +2220,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: calc(2.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
 }
 
+.sd-matrixdynamic__content .sd-table__question-wrapper {
+  position: relative;
+}
+
 .sd-table__question-wrapper:not(:focus-within):hover {
   position: relative;
 }
@@ -2206,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,
@@ -2227,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 {
@@ -2248,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 {
@@ -2312,6 +2341,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: calc(3 * var(--base-unit, 8px));
   line-height: calc(4 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+  font-weight: 700;
 }
 
 .sd-page__description {
@@ -2319,6 +2349,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+  font-weight: 400;
 }
 
 .sd-row {
@@ -2329,9 +2360,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin-top: calc(2 * var(--base-unit, 8px));
 }
 
+.sd-page__row.sd-row {
+  margin-top: calc(2 * var(--base-unit, 8px));
+}
+
 .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));
 }
@@ -2399,6 +2434,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);
   gap: calc(4 * var(--base-unit, 8px));
   box-shadow: 0px 2px 0px var(--primary, #19b394);
+  margin-bottom: 2px;
 }
 .sd-title.sd-container-modern__title .sd-logo__image {
   margin-top: calc(1 * var(--base-unit, 8px));
@@ -2485,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;
@@ -2696,6 +2732,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   text-align: center;
   border: 2px solid var(--background, #fff);
   color: var(--foreground, #161616);
+  fill: var(--foreground, #161616);
   font-size: calc(2 * var(--base-unit, 8px));
 }
 
@@ -2712,10 +2749,12 @@ legend + sv-ng-rating-item + .sd-rating__item {
 
 .sd-rating__item.sd-rating__item--disabled {
   color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
 }
 
 .sd-rating__item.sd-rating__item--selected.sd-rating__item--disabled {
   color: var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25));
+  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
 }
 
 .sd-rating__item--allowhover:hover,
@@ -2728,12 +2767,67 @@ legend + sv-ng-rating-item + .sd-rating__item {
   border-color: var(--primary, #19b394);
   color: var(--primary-foreground, #fff);
   font-weight: 600;
+  box-shadow: 0px 1px 2px transparent;
 }
 
 .sd-rating__item--selected:focus-within {
   box-shadow: inset 0 0 0 2px var(--background, #fff);
 }
 
+.sd-rating__item-smiley {
+  position: relative;
+  background: var(--background, #fff);
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+  white-space: nowrap;
+  padding: calc(1.25 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  min-width: calc(6 * var(--base-unit, 8px));
+  text-align: center;
+  border: 2px solid var(--border, #d6d6d6);
+  color: var(--foreground, #161616);
+  fill: var(--border, #d6d6d6);
+}
+.sd-rating__item-smiley svg {
+  display: block;
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+}
+
+legend + .sd-rating__item-smiley,
+legend + sv-ng-rating-item + .sd-rating__item-smiley {
+  margin-inline-start: 2px;
+}
+
+.sd-rating__item-smiley--error {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+  border-color: transparent;
+}
+
+.sd-rating__item-smiley.sd-rating__item-smiley--disabled {
+  opacity: 0.5;
+}
+
+.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--disabled {
+  opacity: initial;
+  fill: var(--primary-foreground, #fff);
+}
+
+.sd-rating__item-smiley--allowhover:hover,
+.sd-rating__item-smiley:focus-within {
+  border-color: var(--primary, #19b394);
+}
+
+.sd-rating__item-smiley--selected {
+  background-color: var(--primary, #19b394);
+  border-color: var(--primary, #19b394);
+  fill: var(--primary-foreground, #fff);
+  font-weight: 600;
+}
+
+.sd-rating__item-smiley--selected:focus-within {
+  box-shadow: inset 0 0 0 2px var(--background, #fff);
+}
+
 .sd-rating__item-star {
   position: relative;
   background: var(--background, #fff);
@@ -2847,21 +2941,6 @@ legend + sv-ng-rating-item + .sd-rating__item {
   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));
@@ -2983,11 +3062,17 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .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,
@@ -3298,7 +3383,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
   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));
 }
@@ -3517,6 +3602,65 @@ legend + sv-ng-rating-item + .sd-rating__item {
   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;
@@ -3935,6 +4079,10 @@ legend + sv-ng-rating-item + .sd-rating__item {
   flex-grow: 1;
 }
 
+.sd-multipletext__content .sd-multipletext__item-container {
+  position: relative;
+}
+
 .sd-multipletext__item-container--error {
   background-color: var(--red-light, rgba(230, 10, 62, 0.1));
 }
@@ -4155,13 +4303,11 @@ 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);
-  margin-top: 2px;
   box-sizing: border-box;
+  min-width: calc(32 * var(--base-unit, 8px));
 }
 .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
   background: var(--primary-light, rgba(25, 179, 148, 0.1));
-  border-radius: 3px;
   color: var(--foreground, #161616);
   font-weight: 400;
 }
@@ -4171,6 +4317,17 @@ svg.sd-action--icon {
 .sv_progress-toc .sv-list__item-body {
   padding-inline-start: calc(2 * var(--base-unit, 8px));
   padding-inline-end: calc(2 * var(--base-unit, 8px));
+  border-radius: 3px;
+  padding-top: calc(1.5 * var(--base-unit, 8px));
+  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 {