survey-react 1.9.84 → 1.9.86

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.84
+ * surveyjs - Survey JavaScript library v1.9.86
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -104,12 +104,12 @@ sv-popup {
 .sv-popup__shadow {
   width: 100%;
   height: 100%;
-  border-radius: calc(1 * var(--base-unit, 8px));
+  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
 }
 
 .sv-popup__body-content {
   background-color: var(--background, #fff);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -119,7 +119,7 @@ sv-popup {
   max-width: 90vw;
 }
 
-.sv-popup--modal {
+.sv-popup.sv-popup--modal {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -127,11 +127,12 @@ sv-popup {
   padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
   box-sizing: border-box;
 }
-.sv-popup--modal .sv-popup__container {
+.sv-popup.sv-popup--modal .sv-popup__container {
   position: static;
 }
-.sv-popup--modal .sv-popup__body-content {
+.sv-popup.sv-popup--modal .sv-popup__body-content {
   padding: calc(4 * var(--base-unit, 8px));
+  height: auto;
 }
 
 .sv-popup--overlay.sv-popup--overlay {
@@ -150,7 +151,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
-  border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;
+  border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
   background: var(--background, #fff);
   box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
   padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -246,7 +247,7 @@ sv-popup {
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(4 * var(--base-unit, 8px));
   font-style: normal;
   font-weight: 700;
@@ -267,13 +268,13 @@ sv-popup {
   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: 4px;
+  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(2 * var(--base-unit, 8px));
+  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);
@@ -403,7 +404,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   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));
@@ -440,10 +441,9 @@ sv-popup {
   width: auto;
   min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
   max-width: var(--sv-popup-overlay-max-width);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   overflow: hidden;
   margin: 0;
-  border-radius: 4px;
 }
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -468,7 +468,7 @@ sv-popup {
   display: inline-block;
   vertical-align: top;
   margin-top: 22px;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -479,7 +479,7 @@ sv-popup {
   display: inline-block;
   vertical-align: top;
   margin-top: 22px;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -507,7 +507,7 @@ sv-popup {
 
 .sv_progress-buttons__list li {
   width: 138px;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-family: var(--font-family, var(--font-family));
   position: relative;
   text-align: center;
@@ -579,7 +579,7 @@ sv-popup {
 .sv_progress-toc .sv-list__item-body {
   padding-inline-start: 16px;
   padding-inline-end: 16px;
-  border-radius: 3px;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   padding-top: 12px;
   padding-bottom: 12px;
 }
@@ -594,7 +594,7 @@ sv-popup {
 
 .sv-container-modern {
   color: var(--text-color, #404040);
-  font-size: var(--font-size, 16px);
+  font-size: var(--font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-family: var(--font-family, var(--font-family));
   margin-bottom: calc(10 * var(--base-unit, 8px));
 }
@@ -2502,7 +2502,7 @@ select.sv-dropdown {
   padding: calc(1 * var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
   background-color: transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
@@ -2517,14 +2517,14 @@ button.sv-action-bar-item {
 
 .sv-action-bar--default-size-mode .sv-action-bar-item {
   height: calc(5 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(1 * var(--base-unit, 8px));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item {
   height: calc(4 * var(--base-unit, 8px));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   margin: 0 calc(0.5 * var(--base-unit, 8px));
 }
@@ -2594,11 +2594,11 @@ button.sv-action-bar-item {
   padding: calc(1 * var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
   background-color: transparent;
   cursor: pointer;
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-family: var(--font-family, var(--font-family));
 }
 
@@ -2664,7 +2664,7 @@ button.sv-action-bar-item {
   z-index: 1000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   padding-left: calc(2.5 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
 }
@@ -2722,12 +2722,12 @@ sv-popup {
 .sv-popup__shadow {
   width: 100%;
   height: 100%;
-  border-radius: calc(1 * var(--base-unit, 8px));
+  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
 }
 
 .sv-popup__body-content {
   background-color: var(--background, #fff);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -2737,7 +2737,7 @@ sv-popup {
   max-width: 90vw;
 }
 
-.sv-popup--modal {
+.sv-popup.sv-popup--modal {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2745,11 +2745,12 @@ sv-popup {
   padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
   box-sizing: border-box;
 }
-.sv-popup--modal .sv-popup__container {
+.sv-popup.sv-popup--modal .sv-popup__container {
   position: static;
 }
-.sv-popup--modal .sv-popup__body-content {
+.sv-popup.sv-popup--modal .sv-popup__body-content {
   padding: calc(4 * var(--base-unit, 8px));
+  height: auto;
 }
 
 .sv-popup--overlay.sv-popup--overlay {
@@ -2768,7 +2769,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
-  border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;
+  border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
   background: var(--background, #fff);
   box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
   padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -2864,7 +2865,7 @@ sv-popup {
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(4 * var(--base-unit, 8px));
   font-style: normal;
   font-weight: 700;
@@ -2885,13 +2886,13 @@ sv-popup {
   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: 4px;
+  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(2 * var(--base-unit, 8px));
+  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);
@@ -3021,7 +3022,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   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));
@@ -3058,10 +3059,9 @@ sv-popup {
   width: auto;
   min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
   max-width: var(--sv-popup-overlay-max-width);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   overflow: hidden;
   margin: 0;
-  border-radius: 4px;
 }
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -3073,7 +3073,7 @@ sv-popup {
   display: flex;
   align-items: center;
   flex-direction: row;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   overflow: auto;
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
@@ -3094,7 +3094,7 @@ sv-popup {
   padding: 11px calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   outline: none;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 400;
   background: var(--background, #fff);
   cursor: pointer;
@@ -3211,7 +3211,7 @@ sv-popup {
   background-color: cadetblue;
   padding: 1px;
   font-family: var(--font-family, var(--font-family));
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-style: normal;
   font-weight: 400;
   line-height: 1.42857143;
@@ -3230,7 +3230,7 @@ sv-popup {
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
+  border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   line-break: auto;
@@ -3240,10 +3240,10 @@ sv-popup {
 .sv_window_title {
   padding: 8px 14px;
   margin: 0;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
-  border-radius: 5px 5px 0 0;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
 }
 
 .sv_window_content {
@@ -3257,7 +3257,7 @@ sv-popup {
 .sv_window_title a:link,
 .sv_window_title a:visited {
   text-decoration: none;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-style: normal;
   color: black;
 }
@@ -3278,8 +3278,8 @@ sv-popup {
 
 .sv-brand-info__text {
   font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(3 * var(--base-unit, 8px));
   color: #161616;
 }
 
@@ -3292,8 +3292,8 @@ sv-popup {
 
 .sv-brand-info__terms {
   font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(2 * var(--base-unit, 8px));
 }
 .sv-brand-info__terms a {
   color: #909090;
@@ -3371,7 +3371,7 @@ sv-popup {
   justify-content: center;
   background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   border-radius: 100%;
   border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
   width: calc(5 * var(--base-unit, 8px));
@@ -3393,7 +3393,7 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(2 * var(--base-unit, 8px));
 }
@@ -3516,7 +3516,7 @@ sv-popup {
 
 .sv-list__empty-text {
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 400;
   text-align: center;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3541,7 +3541,7 @@ sv-popup {
   padding-inline-end: calc(8 * var(--base-unit, 8px));
   padding-inline-start: calc(2 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   cursor: pointer;
   overflow: hidden;
@@ -3549,12 +3549,24 @@ sv-popup {
   white-space: nowrap;
 }
 
-.sv-list__item.sv-list__item--focused,
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
+  outline: none;
+}
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
+  border: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  padding-block: calc(0.75 * var(--base-unit, 8px));
+  padding-inline-end: calc(7.75 * var(--base-unit, 8px));
+  padding-inline-start: calc(1.75 * var(--base-unit, 8px));
+}
+.sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
+  margin-inline-start: calc(-0.25 * var(--base-unit, 8px));
+}
+
 .sv-list__item:hover,
 .sv-list__item:focus {
   outline: none;
 }
-.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(--sjs-general-backcolor-dark, rgb(248, 248, 248));
@@ -3665,7 +3677,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
   width: 100%;
   outline: none;
-  font-size: 1em;
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   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));
@@ -3698,13 +3710,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 0;
   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));
+  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
   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, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   display: flex;
   flex-direction: row;
@@ -3750,13 +3762,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sv-save-data_root.sv-save-data_error .sv-save-data_button {
   font-weight: 600;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   height: calc(5 * var(--base-unit, 8px));
   color: #ffffff;
   background-color: var(--red, #e60a3e);
   border: calc(0.25 * var(--base-unit, 8px)) solid #ffffff;
-  border-radius: calc(0.75 * var(--base-unit, 8px));
+  border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
   padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
   display: flex;
   align-items: center;