survey-react 1.9.83 → 1.9.84

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.83
+ * surveyjs - Survey JavaScript library v1.9.84
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -93,7 +93,7 @@
   height: 24px;
   vertical-align: middle;
   margin-right: 16px;
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-separator {
@@ -315,8 +315,8 @@ sv-popup {
   top: 0;
   width: 100vw;
   outline: none;
+  z-index: 2000;
   height: 100vh;
-  z-index: 1500;
 }
 
 .sv-dropdown-popup {
@@ -574,7 +574,7 @@ sv-popup {
   margin-top: 0;
   padding-top: calc(0.5 * var(--base-unit, 8px));
   padding-bottom: calc(0.5 * var(--base-unit, 8px));
-  border-top: 1px solid var(--border-light, #eaeaea);
+  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
@@ -685,7 +685,7 @@ sv-popup {
   flex-direction: row;
   font-size: calc(2 * var(--base-unit, 8px));
   overflow: auto;
-  border: 1px solid var(--border, #d6d6d6);
+  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv-button-group:focus-within {
@@ -713,7 +713,7 @@ sv-popup {
   position: relative;
 }
 .sv-button-group__item:not(:last-of-type) {
-  border-right: 1px solid var(--border, #d6d6d6);
+  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv-button-group__item--hover:hover {
@@ -1167,7 +1167,7 @@ sv-popup {
 .sv-list__item.sv-list__item--focused .sv-list__item-body,
 .sv-list__item:hover .sv-list__item-body,
 .sv-list__item:focus .sv-list__item-body {
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
 }
 
 .sv-list__item--with-icon.sv-list__item--with-icon {
@@ -1201,7 +1201,7 @@ sv-popup {
 .sv-list__item-separator {
   margin: calc(1 * var(--base-unit, 8px)) 0;
   height: 1px;
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv-list__item.sv-list__item--selected .sv-list__item-body,
@@ -1247,7 +1247,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sv-list__filter {
-  border-bottom: 1px solid var(--border-inside, rgba(0, 0, 0, 0.16));
+  border-bottom: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
   background: var(--background, #fff);
   padding-bottom: calc(1 * var(--base-unit, 8px));
 }
@@ -1477,7 +1477,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
   bottom: calc(-1 * var(--sd-base-vertical-padding));
   height: 1px;
-  background: var(--border-light, #eaeaea);
+  background: var(--sjs-border-light, var(--border-light, #eaeaea));
 }
 
 .sd-element--complex.sd-element--with-frame > .sd-element__header--location-top:after {
@@ -1496,7 +1496,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-top: var(--sd-base-vertical-padding);
 }
 .sd-element--nested.sd-panel, .sd-element--nested.sd-question--paneldynamic {
-  border: 1px solid var(--border-light, #eaeaea);
+  border: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
   box-sizing: border-box;
   padding-left: var(--sd-base-padding);
   padding-right: var(--sd-base-padding);
@@ -1974,7 +1974,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(100% + 2 * var(--sd-base-padding));
   margin-bottom: calc(-1 * var(--sd-base-padding) + 0.5 * var(--sd-base-vertical-padding));
   margin-top: calc(0.5 * var(--sd-base-vertical-padding));
-  border-top: 1px solid var(--border-light, #eaeaea);
+  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
   padding-top: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
@@ -1983,7 +1983,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sjs_sp_container {
-  border: 1px dashed var(--border, #d6d6d6);
+  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sjs_sp_controls.sd-signaturepad__controls {
@@ -2019,7 +2019,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use {
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
@@ -2067,7 +2067,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   display: block;
   height: calc(0.5 * var(--base-unit, 8px));
   width: calc(2 * var(--base-unit, 8px));
-  border: 1px solid var(--border, #d6d6d6);
+  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
   border-radius: 10px;
 }
@@ -2544,15 +2544,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-shadow: none;
 }
 
-.sd-item__control:focus + .sd-item__decorator,
-.sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
+.sd-item__control:focus + .sd-item__decorator {
   box-shadow: 0 0 0 2px var(--primary, #19b394);
+  background: var(--background, #fff);
   outline: none;
 }
 
-.sd-item__control:focus + .sd-item__decorator,
 .sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
-  background: var(--background, #fff);
+  background: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
+  outline: none;
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -2651,7 +2651,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use {
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
@@ -2672,7 +2672,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-radio--checked.sd-radio--disabled .sd-radio__decorator:after {
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
@@ -2784,7 +2784,11 @@ legend + sv-ng-rating-item + .sd-rating__item {
   opacity: 0.25;
 }
 
-.sd-rating__item--allowhover:hover,
+.sd-rating__item--allowhover:hover {
+  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+  border-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+}
+
 .sd-rating__item:focus-within {
   border-color: var(--primary, #19b394);
 }
@@ -2810,9 +2814,9 @@ legend + sv-ng-rating-item + .sd-rating__item {
   box-sizing: border-box;
   min-width: calc(6 * var(--base-unit, 8px));
   text-align: center;
-  border: 2px solid var(--border, #d6d6d6);
+  border: 2px solid var(--sjs-border-default, var(--border, #d6d6d6));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 .sd-rating__item-smiley svg {
   display: block;
@@ -2839,7 +2843,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
-.sd-rating__item-smiley--allowhover:hover,
+.sd-rating__item-smiley--allowhover:hover {
+  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+}
+
 .sd-rating__item-smiley:focus-within {
   border-color: var(--primary, #19b394);
 }
@@ -2870,7 +2877,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-right: calc(-0.5 * var(--base-unit, 8px));
 }
 .sd-rating__item-star svg {
-  stroke: var(--border, #d6d6d6);
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
   fill: none;
   width: calc(6 * var(--base-unit, 8px));
   height: calc(6 * var(--base-unit, 8px));
@@ -2894,13 +2901,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   opacity: 0.5;
 }
 .sd-rating__item-star--disabled svg {
-  stroke: var(--border, #d6d6d6);
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
   fill: none;
 }
 
 .sd-rating__item-star--selected.sd-rating__item-star--disabled svg {
   stroke: none;
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-rating__item-star:focus-within svg {
@@ -2910,17 +2917,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-star--unhighlighted svg {
   stroke: none;
-  fill: var(--border, #d6d6d6);
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-rating__item-star--highlighted svg {
-  stroke: var(--primary, #19b394);
-  fill: none;
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
+  fill: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
 }
 
 .sd-rating__item-star--selected.sd-rating__item-star--unhighlighted:focus-within svg {
-  stroke: var(--border, #d6d6d6);
-  fill: var(--border, #d6d6d6);
+  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-rating__item-star--selected:focus-within svg {
@@ -3376,7 +3383,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-progress {
   height: 2px;
-  background-color: var(--border-light, #eaeaea);
+  background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
   position: relative;
 }
 
@@ -3417,6 +3424,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-radius: calc(12.5 * var(--base-unit, 8px));
 }
 
+.sd-boolean.sd-boolean--indeterminate:hover {
+  background-color: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
+}
+
 .sd-boolean__thumb,
 .sd-boolean__label {
   display: block;
@@ -3521,8 +3532,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   left: 0;
   right: 0;
   margin: 0;
-  border-color: var(--border-light, #eaeaea);
-  background: var(--border-light, #eaeaea);
+  border-color: var(--sjs-border-light, var(--border-light, #eaeaea));
+  background: var(--sjs-border-light, var(--border-light, #eaeaea));
   height: 1px;
   border: none;
 }
@@ -3726,7 +3737,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  border: 1px dashed var(--border, #d6d6d6);
+  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
   justify-content: center;
   align-items: center;
 }
@@ -3967,7 +3978,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   outline: none;
 }
 
-.sd-btn:not(:disabled):hover, .sd-btn:not(:disabled):focus {
+.sd-btn:not(:disabled):hover {
+  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+}
+
+.sd-btn:not(:disabled):focus {
   box-shadow: 0 0 0 2px var(--primary, #19b394);
 }
 
@@ -3982,9 +3997,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
-.sd-btn--action:not(:disabled):hover, .sd-btn--action:not(:disabled):focus {
-  color: var(--primary, #19b394);
-  background-color: var(--background, #fff);
+.sd-btn--action:not(:disabled):hover {
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  background-color: var(--sjs-primary-backcolor-dark, rgb(20, 164, 139));
 }
 
 .sd-btn--action:disabled {
@@ -4100,7 +4115,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   height: calc(100% - var(--base-unit, 8px) * 3);
   max-width: 30%;
   padding-right: calc(2 * var(--base-unit, 8px));
-  border-right: 1px solid var(--border, #d6d6d6);
+  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   word-break: break-word;
   white-space: normal;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4291,7 +4306,7 @@ svg.sd-action--icon {
   text-align: center;
   flex-grow: 1;
   text-decoration: none;
-  border-top: 2px solid var(--border-light, #eaeaea);
+  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
   padding-top: calc(2 * var(--base-unit, 8px));
   padding-bottom: calc(4 * var(--base-unit, 8px));
   cursor: pointer;
@@ -4354,11 +4369,11 @@ svg.sd-action--icon {
 }
 
 .sv_progress-toc--left {
-  border-right: 1px solid var(--border, #d6d6d6);
+  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sv_progress-toc--right {
-  border-left: 1px solid var(--border, #d6d6d6);
+  border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
 .sd-list {
@@ -4607,7 +4622,7 @@ sv-components-container,
   display: block;
   position: relative;
   height: 1px;
-  background-color: var(--border-light, #eaeaea);
+  background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
   left: calc(-2 * var(--base-unit, 8px));
   bottom: calc(-1 * var(--base-unit, 8px));
   width: calc(100% + 4 * var(--base-unit, 8px));
@@ -4688,7 +4703,7 @@ body {
 }
 .sd-root-modern * {
   scrollbar-width: thin;
-  scrollbar-color: var(--border, #d6d6d6) transparent;
+  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
 }
 .sd-root-modern ::-webkit-scrollbar {
   width: 12px;
@@ -4699,7 +4714,7 @@ body {
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 32px;
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 .sd-root-modern ::-webkit-scrollbar-track {
   background: transparent;
@@ -4719,7 +4734,7 @@ body {
 
 .sv-popup .sv-popup__scrolling-content {
   scrollbar-width: thin;
-  scrollbar-color: var(--border, #d6d6d6) transparent;
+  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
 }
 .sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar {
   width: 12px;
@@ -4730,7 +4745,7 @@ body {
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 32px;
-  background-color: var(--border, #d6d6d6);
+  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 .sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-track, .sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-track {
   background: transparent;