survey-react 1.9.88 → 1.9.90

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.88
+ * surveyjs - Survey JavaScript library v1.9.90
  * 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 {
@@ -265,44 +265,7 @@ sv-popup {
 }
 
 .sv-popup__button {
-  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
-  background: var(--background, #fff);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
-  margin: 2px;
-  cursor: pointer;
-  font-family: var(--font-family, var(--font-family));
-  font-style: normal;
-  font-weight: 600;
-  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);
-  border: none;
-  outline: none;
-}
-
-.sv-popup__button:hover {
-  box-shadow: 0 0 0 2px var(--primary, #19b394);
-}
-
-.sv-popup__button:disabled {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
-  cursor: default;
-}
-
-.sv-popup__button:disabled:hover {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-}
-
-.sv-popup__button--apply {
-  background-color: var(--primary, #19b394);
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
-}
-
-.sv-popup__button--apply:disabled {
-  background-color: var(--background-dim, #f3f3f3);
+  margin: calc(0.25 * var(--base-unit, 8px));
 }
 
 .sv-popup--modal .sv-list__filter,
@@ -327,7 +290,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 +380,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 +2545,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 +2754,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 +2778,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 {
@@ -2883,44 +2846,7 @@ sv-popup {
 }
 
 .sv-popup__button {
-  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
-  background: var(--background, #fff);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
-  margin: 2px;
-  cursor: pointer;
-  font-family: var(--font-family, var(--font-family));
-  font-style: normal;
-  font-weight: 600;
-  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);
-  border: none;
-  outline: none;
-}
-
-.sv-popup__button:hover {
-  box-shadow: 0 0 0 2px var(--primary, #19b394);
-}
-
-.sv-popup__button:disabled {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
-  cursor: default;
-}
-
-.sv-popup__button:disabled:hover {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-}
-
-.sv-popup__button--apply {
-  background-color: var(--primary, #19b394);
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
-}
-
-.sv-popup__button--apply:disabled {
-  background-color: var(--background-dim, #f3f3f3);
+  margin: calc(0.25 * var(--base-unit, 8px));
 }
 
 .sv-popup--modal .sv-list__filter,
@@ -2945,7 +2871,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 +2961,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 +3005,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 +3046,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 +3085,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 +3260,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 +3283,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 +3295,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 +3400,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 +3495,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 +3537,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 +3551,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 +3707,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;
 }