survey-react 1.9.113 → 1.9.115

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.113
+ * surveyjs - Survey JavaScript library v1.9.115
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -47,6 +47,10 @@
   font-weight: 700;
   src: local("Raleway Bold"), local("Raleway-Bold"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPBg.woff) format("woff");
 }
+:root {
+  --sjs-default-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
 .sv-dragdrop-movedown {
   transform: translate(0, 0);
   animation: svdragdropmovedown 0.1s;
@@ -95,6 +99,7 @@ sv-popup {
 }
 
 .sv-popup__container {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   border-radius: var(--sjs-corner-radius, 4px);
   position: absolute;
@@ -127,10 +132,20 @@ sv-popup {
   padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
-.sv-popup--modal .sv-popup__body-content {
+
+.sv-popup--modal > .sv-popup__container {
+  position: static;
+}
+
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
 }
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
+  padding-bottom: 2px;
+}
 
 .sv-popup--confirm-delete .sv-popup__shadow {
   height: initial;
@@ -145,7 +160,7 @@ sv-popup {
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   margin-bottom: 0;
   /* UI/Default */
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-size, 16px);
   font-style: normal;
   font-weight: 400;
@@ -162,10 +177,6 @@ sv-popup {
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-popup--modal > .sv-popup__container {
-  position: static;
-}
-
 .sv-popup--overlay {
   width: 100%;
   height: var(--sv-popup-overlay-height, 100vh);
@@ -321,6 +332,10 @@ sv-popup {
   height: 100%;
 }
 
+.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
+  background-color: transparent;
+}
+
 .sv-dropdown-popup .sv-popup__body-content {
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
@@ -328,14 +343,6 @@ sv-popup {
   margin-bottom: 0;
 }
 
-.sv-popup--modal .sv-popup__body-content {
-  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-}
-.sv-popup--modal .sv-popup__body-footer {
-  padding-bottom: 2px;
-}
-
 .sv-popup--overlay .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
@@ -432,7 +439,7 @@ sv-popup {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
@@ -564,7 +571,7 @@ sv-popup {
 .sv_progress-buttons__list li {
   width: 138px;
   font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   position: relative;
   text-align: center;
   vertical-align: top;
@@ -670,7 +677,7 @@ sv-popup {
 .sv-container-modern {
   color: var(--text-color, #404040);
   font-size: var(--font-size, var(--sjs-font-size, 16px));
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
 }
 
 .sv-container-modern__title {
@@ -1252,7 +1259,7 @@ sv-popup {
 }
 
 .sv-title {
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: 700;
   font-style: normal;
   font-stretch: normal;
@@ -1515,7 +1522,7 @@ sv-popup {
 }
 
 .sv-table__cell--header {
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-weight: bold;
   text-align: left;
 }
@@ -1970,7 +1977,7 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: inherit;
   color: var(--text-color, #404040);
   position: relative;
@@ -2018,7 +2025,7 @@ sv-popup {
   border: none;
   outline: none;
   padding: 0;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: inherit;
   background-color: transparent;
   width: 100%;
@@ -2035,7 +2042,7 @@ sv-popup {
 }
 
 .sv-dropdown--empty:not(.sv-input--disabled) .sv-dropdown__filter-string-input::placeholder {
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   color: var(--text-color, #404040);
 }
 
@@ -2475,7 +2482,7 @@ select.sv-dropdown {
 }
 
 .sv-completedpage {
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: 1.875em;
   font-weight: bold;
   box-sizing: border-box;
@@ -2590,7 +2597,7 @@ select.sv-dropdown {
   background-color: transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   overflow-x: hidden;
   white-space: nowrap;
 }
@@ -2683,7 +2690,7 @@ button.sv-action-bar-item {
   cursor: pointer;
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   font-size: var(--sjs-font-size, 16px);
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
 }
 
 .sv-expand-action:before {
@@ -2750,7 +2757,7 @@ button.sv-action-bar-item {
   position: absolute;
   z-index: 10000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-size, 16px);
   padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -2800,6 +2807,7 @@ sv-popup {
 }
 
 .sv-popup__container {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   border-radius: var(--sjs-corner-radius, 4px);
   position: absolute;
@@ -2832,10 +2840,20 @@ sv-popup {
   padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
-.sv-popup--modal .sv-popup__body-content {
+
+.sv-popup--modal > .sv-popup__container {
+  position: static;
+}
+
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
 }
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-popup__body-footer {
+  padding-bottom: 2px;
+}
 
 .sv-popup--confirm-delete .sv-popup__shadow {
   height: initial;
@@ -2850,7 +2868,7 @@ sv-popup {
   color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
   margin-bottom: 0;
   /* UI/Default */
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-size, 16px);
   font-style: normal;
   font-weight: 400;
@@ -2867,10 +2885,6 @@ sv-popup {
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-popup--modal > .sv-popup__container {
-  position: static;
-}
-
 .sv-popup--overlay {
   width: 100%;
   height: var(--sv-popup-overlay-height, 100vh);
@@ -3026,6 +3040,10 @@ sv-popup {
   height: 100%;
 }
 
+.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
+  background-color: transparent;
+}
+
 .sv-dropdown-popup .sv-popup__body-content {
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
@@ -3033,14 +3051,6 @@ sv-popup {
   margin-bottom: 0;
 }
 
-.sv-popup--modal .sv-popup__body-content {
-  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-}
-.sv-popup--modal .sv-popup__body-footer {
-  padding-bottom: 2px;
-}
-
 .sv-popup--overlay .sv-popup__body-content {
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
@@ -3137,7 +3147,7 @@ sv-popup {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
-  font-family: var(--font-family);
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
@@ -3356,7 +3366,7 @@ sv-popup {
   right: 10px;
   background-color: cadetblue;
   padding: 1px;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
   font-style: normal;
   font-weight: 400;
@@ -3413,9 +3423,15 @@ sv-popup {
   margin: 4px;
 }
 
+sv-brand-info, .sv-brand-info {
+  z-index: 1;
+  position: relative;
+  margin-top: 1px;
+}
+
 .sv-brand-info {
   width: 100%;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   text-align: center;
   color: #161616;
   background: white;
@@ -3529,7 +3545,7 @@ sv-popup {
   justify-content: center;
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  font-size: var(--sjs-font-size, 16px);
+  font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   border-radius: 100%;
   border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
   width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3539,11 +3555,10 @@ sv-popup {
   font-weight: 600;
   margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-ranking-item__index.sv-ranking-item__index:empty {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+.sv-ranking-item__index.sv-ranking-item__index svg {
+  fill: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
+  height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
 }
 
 .sv-ranking-item__text {
@@ -3688,7 +3703,7 @@ sv-popup {
   width: 1px;
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
-  left: var(--sjs-base-unit, var(--base-unit, 8px));
+  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
   left: initial;
@@ -3702,7 +3717,7 @@ sv-popup {
 
 .sv-ranking__container-placeholder {
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-style: normal;
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -3711,6 +3726,8 @@ sv-popup {
   justify-content: center;
   align-items: center;
   height: 100%;
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-ranking__container {
@@ -3735,18 +3752,15 @@ sv-popup {
   margin: 0;
   overflow-y: auto;
   background: var(--sjs-general-backcolor, var(--background, #fff));
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   list-style-type: none;
 }
 
 .sv-list__empty-container {
   width: 100%;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   box-sizing: border-box;
-  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-list__empty-text {
@@ -3754,6 +3768,9 @@ sv-popup {
   font-size: var(--sjs-font-size, 16px);
   font-weight: 400;
   text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
@@ -3957,7 +3974,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   text-align: center;
   z-index: 1600;
-  font-family: var(--font-family, var(--font-family));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   display: flex;
@@ -4066,6 +4083,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   object-fit: cover;
 }
 
+:root {
+  --sjs-default-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
 .sv-boolean__decorator {
   border-radius: 2px;
 }