survey-react 1.9.81 → 1.9.83

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.81
+ * surveyjs - Survey JavaScript library v1.9.83
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -86,11 +86,15 @@ sv-popup {
   left: 0;
   top: 0;
   width: 100vw;
-  height: 100vh;
   outline: none;
+  height: 100vh;
   z-index: 1500;
 }
 
+.sv-dropdown-popup {
+  height: 0;
+}
+
 .sv-popup__container {
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   position: absolute;
@@ -170,7 +174,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
   background-color: var(--primary, #19b394);
   border: 2px solid var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup--modal .sv-popup__scrolling-content {
@@ -247,7 +251,7 @@ sv-popup {
   font-style: normal;
   font-weight: 700;
   margin-bottom: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
@@ -266,7 +270,7 @@ sv-popup {
   border-radius: 4px;
   margin: 2px;
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
   font-size: calc(2 * var(--base-unit, 8px));
@@ -282,7 +286,8 @@ sv-popup {
 }
 
 .sv-popup__button:disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 
@@ -292,7 +297,7 @@ sv-popup {
 
 .sv-popup__button--apply {
   background-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup__button--apply:disabled {
@@ -377,7 +382,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
   pointer-events: none;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
@@ -394,13 +399,13 @@ sv-popup {
   width: calc(2 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family);
   padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
@@ -412,14 +417,14 @@ sv-popup {
 .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);
-  color: var(--primary-foreground, #fff);
+  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));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -2459,7 +2464,7 @@ select.sv-dropdown {
 }
 
 .sjs_sp_placeholder {
-  color: var(--foreground-light, var(--foreground-light, #909090));
+  color: var(--foreground-light, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .sv-action-bar {
@@ -2499,7 +2504,7 @@ select.sv-dropdown {
   border: none;
   border-radius: 2px;
   background-color: transparent;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
   overflow-x: hidden;
@@ -2544,7 +2549,7 @@ button.sv-action-bar-item {
   display: block;
 }
 .sv-action-bar-item__icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
@@ -2699,11 +2704,15 @@ sv-popup {
   left: 0;
   top: 0;
   width: 100vw;
-  height: 100vh;
   outline: none;
+  height: 100vh;
   z-index: 1500;
 }
 
+.sv-dropdown-popup {
+  height: 0;
+}
+
 .sv-popup__container {
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   position: absolute;
@@ -2783,7 +2792,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
   background-color: var(--primary, #19b394);
   border: 2px solid var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup--modal .sv-popup__scrolling-content {
@@ -2860,7 +2869,7 @@ sv-popup {
   font-style: normal;
   font-weight: 700;
   margin-bottom: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
@@ -2879,7 +2888,7 @@ sv-popup {
   border-radius: 4px;
   margin: 2px;
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
   font-size: calc(2 * var(--base-unit, 8px));
@@ -2895,7 +2904,8 @@ sv-popup {
 }
 
 .sv-popup__button:disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 
@@ -2905,7 +2915,7 @@ sv-popup {
 
 .sv-popup__button--apply {
   background-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup__button--apply:disabled {
@@ -2990,7 +3000,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
   pointer-events: none;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
@@ -3007,13 +3017,13 @@ sv-popup {
   width: calc(2 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family);
   padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
@@ -3025,14 +3035,14 @@ sv-popup {
 .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);
-  color: var(--primary-foreground, #fff);
+  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));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -3089,7 +3099,7 @@ sv-popup {
   background: var(--background, #fff);
   cursor: pointer;
   overflow: hidden;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   position: relative;
 }
 .sv-button-group__item:not(:last-of-type) {
@@ -3105,7 +3115,7 @@ sv-popup {
   height: calc(3 * var(--base-unit, 8px));
 }
 .sv-button-group__item-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-button-group__item--selected {
@@ -3137,11 +3147,12 @@ sv-popup {
 }
 
 .sv-button-group__item--disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 .sv-button-group__item--disabled .sv-button-group__item-icon use {
-  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 .sv-button-group__item--disabled:hover {
   background-color: var(--background, #fff);
@@ -3199,7 +3210,7 @@ sv-popup {
   right: 10px;
   background-color: cadetblue;
   padding: 1px;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -3253,7 +3264,7 @@ sv-popup {
 
 .sv-brand-info {
   width: 100%;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   text-align: center;
   color: #161616;
   background: white;
@@ -3359,7 +3370,7 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   border-radius: 100%;
   border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
@@ -3381,14 +3392,15 @@ sv-popup {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(2 * var(--base-unit, 8px));
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
 }
 
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
@@ -3431,7 +3443,7 @@ sv-popup {
 
 .sv-ranking--mobile .sv-ranking-item__icon--hover {
   visibility: visible;
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-ranking--mobile.sv-ranking--drag .sv-ranking-item--ghost .sv-ranking-item__icon.sv-ranking-item__icon--hover {
@@ -3507,14 +3519,14 @@ sv-popup {
   font-size: calc(2 * var(--base-unit, 8px));
   font-weight: 400;
   text-align: center;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__item {
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3528,7 +3540,7 @@ sv-popup {
   padding-block: calc(1 * var(--base-unit, 8px));
   padding-inline-end: calc(8 * var(--base-unit, 8px));
   padding-inline-start: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   cursor: pointer;
@@ -3567,7 +3579,7 @@ sv-popup {
   display: block;
 }
 .sv-list__item-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 [dir=rtl] .sv-list__item-icon,
@@ -3588,7 +3600,7 @@ sv-popup {
 .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);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 .sv-list__item.sv-list__item--selected .sv-list__item-icon use,
@@ -3602,13 +3614,13 @@ 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));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: 400;
 }
 
 .sv-list__item.sv-list__item--disabled .sv-list__item-body {
   cursor: default;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__item span {
@@ -3641,7 +3653,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   height: calc(3 * var(--base-unit, 8px));
 }
 .sv-list__filter-icon .sv-svg-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__input {
@@ -3654,7 +3666,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: 100%;
   outline: none;
   font-size: 1em;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
   padding-inline-start: calc(7 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
@@ -3662,12 +3674,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sv-list__input::placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__input:disabled,
 .sv-list__input:disabled::placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__loading-indicator {
@@ -3687,11 +3699,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: calc(3 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   border-radius: calc(1 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   min-width: calc(30 * var(--base-unit, 8px));
   text-align: center;
   z-index: 1600;
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   display: flex;