survey-react 1.9.125 → 1.9.127

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.125
+ * surveyjs - Survey JavaScript library v1.9.127
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -3358,65 +3358,87 @@ sv-popup {
 
 .sv_window {
   position: fixed;
-  bottom: 3px;
-  right: 10px;
-  background-color: cadetblue;
-  padding: 1px;
-  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;
-  line-height: 1.42857143;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  white-space: normal;
-  background-color: #fff;
-  -webkit-background-clip: padding-box;
+  bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
   background-clip: padding-box;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  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;
   z-index: 100;
+  max-height: 90vh;
+  overflow: auto;
+  box-sizing: border-box;
 }
 
-.sv_window_title {
-  padding: 8px 14px;
-  margin: 0;
-  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
-  background-color: #f7f7f7;
-  border-bottom: 1px solid #ebebeb;
-  border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
+.sv_window_content {
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
+  overflow: hidden;
+}
+
+.sv_window--collapsed .sv_window_header {
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
   display: flex;
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+.sv_window--collapsed .sv_window_content {
+  display: none;
 }
 
-.sv_window_content {
-  padding: 0;
-  margin: 0;
-  max-height: 80vh;
-  overflow-y: auto;
+.sv_window_header_title_collapsed {
+  color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+  font-style: normal;
+  font-weight: 600;
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  flex: 1;
+  display: flex;
+  justify-content: start;
+  align-items: center;
 }
 
-.sv_window_title a,
-.sv_window_title a:link,
-.sv_window_title a:visited {
-  text-decoration: none;
-  font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
+.sv_window_header_description {
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  font-feature-settings: "salt" on;
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
   font-style: normal;
-  color: black;
+  font-size: var(--sjs-font-size, 16px);
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.sv_window_buttons_container {
+  position: absolute;
+  top: var(--sjs-base-unit, var(--base-unit, 8px));
+  right: var(--sjs-base-unit, var(--base-unit, 8px));
+  display: flex;
+  gap: var(--sjs-base-unit, var(--base-unit, 8px));
+  z-index: 1;
 }
 
-.sv_window_button .sv-svg-icon {
-  margin: 4px;
+.sv_window_button {
+  display: flex;
+  padding: var(--sjs-base-unit, var(--base-unit, 8px));
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  cursor: pointer;
+}
+.sv_window_button:hover, .sv_window_button:active {
+  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+}
+.sv_window_button:hover svg use, .sv_window_button:hover svg path, .sv_window_button:active svg use, .sv_window_button:active svg path {
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+.sv_window_button:active {
+  opacity: 0.5;
+}
+.sv_window_button svg use, .sv_window_button svg path {
+  fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 }
 
 sv-brand-info, .sv-brand-info {