survey-react 1.9.88 → 1.9.89

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.88
+ * surveyjs - Survey JavaScript library v1.9.89
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -173,8 +173,8 @@ sv-popup {
   width: 100%;
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
-  background-color: var(--primary, #19b394);
-  border: 2px solid var(--primary, #19b394);
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
@@ -197,7 +197,7 @@ sv-popup {
 }
 .sv-popup__scrolling-content::-webkit-scrollbar-thumb,
 .sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
-  background: var(--primary-light, rgba(25, 179, 148, 0.1));
+  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
 }
 
 .sv-popup__content {
@@ -277,13 +277,13 @@ sv-popup {
   font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   text-align: center;
-  color: var(--primary, #19b394);
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   outline: none;
 }
 
 .sv-popup__button:hover {
-  box-shadow: 0 0 0 2px var(--primary, #19b394);
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-popup__button:disabled {
@@ -297,7 +297,7 @@ sv-popup {
 }
 
 .sv-popup__button--apply {
-  background-color: var(--primary, #19b394);
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
@@ -327,7 +327,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
   background-color: transparent;
-  color: var(--primary, #19b394);
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: none;
   padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -417,14 +417,14 @@ sv-popup {
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
-  background: var(--primary, #19b394);
+  background: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
-  background: var(--primary-light, rgba(25, 179, 148, 0.1));
+  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
@@ -2582,7 +2582,7 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar-item--active .sv-action-bar-item__icon use {
-  fill: var(--primary, #19b394);
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-action-bar-item-dropdown {
@@ -2791,8 +2791,8 @@ sv-popup {
   width: 100%;
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
-  background-color: var(--primary, #19b394);
-  border: 2px solid var(--primary, #19b394);
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
@@ -2815,7 +2815,7 @@ sv-popup {
 }
 .sv-popup__scrolling-content::-webkit-scrollbar-thumb,
 .sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
-  background: var(--primary-light, rgba(25, 179, 148, 0.1));
+  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
 }
 
 .sv-popup__content {
@@ -2895,13 +2895,13 @@ sv-popup {
   font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   text-align: center;
-  color: var(--primary, #19b394);
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   outline: none;
 }
 
 .sv-popup__button:hover {
-  box-shadow: 0 0 0 2px var(--primary, #19b394);
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-popup__button:disabled {
@@ -2915,7 +2915,7 @@ sv-popup {
 }
 
 .sv-popup__button--apply {
-  background-color: var(--primary, #19b394);
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
@@ -2945,7 +2945,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
   background-color: transparent;
-  color: var(--primary, #19b394);
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: none;
   padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -3035,14 +3035,14 @@ sv-popup {
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
-  background: var(--primary, #19b394);
+  background: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
-  background: var(--primary-light, rgba(25, 179, 148, 0.1));
+  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
@@ -3079,8 +3079,8 @@ sv-popup {
 }
 
 .sv-button-group:focus-within {
-  box-shadow: 0 0 0 1px var(--primary, #19b394);
-  border-color: var(--primary, #19b394);
+  box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-button-group__item {
@@ -3120,10 +3120,10 @@ sv-popup {
 
 .sv-button-group__item--selected {
   font-weight: 600;
-  color: var(--primary, #19b394);
+  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sv-button-group__item--selected .sv-button-group__item-icon use {
-  fill: var(--primary, #19b394);
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sv-button-group__item--selected:hover {
   background-color: var(--background, #fff);
@@ -3159,8 +3159,8 @@ sv-popup {
 }
 
 .sv-button-group:focus-within {
-  box-shadow: 0 0 0 1px var(--primary, #19b394);
-  border-color: var(--primary, #19b394);
+  box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-visuallyhidden {
@@ -3334,7 +3334,7 @@ sv-popup {
 
 .sv-ranking-item:focus .sv-ranking-item__index {
   background: var(--background, #fff);
-  outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
+  outline: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-ranking-item__content.sv-ranking-item__content {
@@ -3357,7 +3357,7 @@ sv-popup {
 
 .sv-ranking-item__icon.sv-ranking-item__icon {
   visibility: hidden;
-  fill: var(--primary, #19b394);
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
   position: absolute;
   top: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
@@ -3369,7 +3369,7 @@ sv-popup {
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
+  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   border-radius: 100%;
@@ -3474,7 +3474,7 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon {
-  fill: var(--primary, #19b394);
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-ranking-shortcut .sv-ranking-item__text {
@@ -3569,7 +3569,7 @@ sv-popup {
 }
 .sv-list__item:hover .sv-list__item-body,
 .sv-list__item:focus .sv-list__item-body {
-  background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
+  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 
 .sv-list__item--with-icon.sv-list__item--with-icon {
@@ -3611,7 +3611,7 @@ sv-popup {
 .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
 .sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
 li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
-  background-color: var(--primary, #19b394);
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
@@ -3625,7 +3625,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
 .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover .sv-list__item-body {
-  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
+  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: 400;
 }
@@ -3781,7 +3781,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sv-save-data_root.sv-save-data_success {
-  background-color: var(--primary, #19b394);
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: #ffffff;
   font-weight: 600;
 }