survey-react 1.9.79 → 1.9.81

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.79
+ * surveyjs - Survey JavaScript library v1.9.81
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -560,13 +560,11 @@ sv-popup {
   max-width: 336px;
   height: 100%;
   background: #FFFFFF;
-  border-right: 1px solid #D6D6D6;
-  margin-top: 2px;
   box-sizing: border-box;
+  min-width: 256px;
 }
 .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
   background: rgba(25, 179, 148, 0.1);
-  border-radius: 3px;
   color: #161616;
   font-weight: 400;
 }
@@ -576,6 +574,17 @@ sv-popup {
 .sv_progress-toc .sv-list__item-body {
   padding-inline-start: 16px;
   padding-inline-end: 16px;
+  border-radius: 3px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.sv_progress-toc--left {
+  border-right: 1px solid #D6D6D6;
+}
+
+.sv_progress-toc--right {
+  border-left: 1px solid #D6D6D6;
 }
 
 .sv-container-modern {
@@ -2200,6 +2209,50 @@ select.sv-dropdown {
   background-color: var(--main-color, #1ab394);
 }
 
+.sv-rating__item-star > svg {
+  height: 32px;
+  width: 32px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  fill: var(--text-color, #404040);
+}
+.sv-rating__item-star > svg.sv-star-2 {
+  display: none;
+}
+.sv-rating__item-star > svg:hover {
+  border: 1px solid var(--main-hover-color, #9f9f9f);
+}
+
+.sv-rating__item-star--selected > svg {
+  fill: var(--main-color, #1ab394);
+}
+
+.sv-rating__item-smiley > svg {
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 3px solid var(--border-color, rgba(64, 64, 64, 0.5));
+  margin: 3px 0;
+  margin-right: 0.26em;
+  fill: var(--main-hover-color, #9f9f9f);
+}
+.sv-rating__item-smiley > svg > use {
+  display: block;
+}
+.sv-rating__item-smiley > svg:hover {
+  border: 3px solid var(--main-hover-color, #9f9f9f);
+  background-color: var(--main-hover-color, #9f9f9f);
+}
+
+.sv-rating__item-smiley--selected > svg {
+  background-color: var(--main-color, #1ab394);
+  fill: var(--body-background-color, white);
+  border: 3px solid var(--main-color, #1ab394);
+}
+
 .sv-rating__min-text {
   font-size: 1em;
   margin-right: 1.25em;
@@ -3264,11 +3317,13 @@ sv-popup {
 
 .sv-ranking-item:focus .sv-ranking-item__icon--focus {
   visibility: visible;
+  top: calc(0.6 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
 }
 
 .sv-ranking-item:focus .sv-ranking-item__index {
   background: var(--background, #fff);
-  border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
+  outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
 }
 
 .sv-ranking-item__content.sv-ranking-item__content {
@@ -3287,8 +3342,6 @@ sv-popup {
   flex-shrink: 0;
   width: calc(3 * var(--base-unit, 8px));
   height: calc(4 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
-  margin-left: calc(1 * var(--base-unit, 8px));
 }
 
 .sv-ranking-item__icon.sv-ranking-item__icon {
@@ -3296,7 +3349,6 @@ sv-popup {
   fill: var(--primary, #19b394);
   position: absolute;
   top: calc(1 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
 }
@@ -3316,7 +3368,7 @@ sv-popup {
   line-height: calc(3 * var(--base-unit, 8px));
   box-sizing: border-box;
   font-weight: 600;
-  margin-left: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(0 * var(--base-unit, 8px));
 }
 .sv-ranking-item__index.sv-ranking-item__index.sv-ranking-item__index--empty:empty {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
@@ -3422,12 +3474,15 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon {
-  margin-left: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
   top: calc(1 * var(--base-unit, 8px));
 }
 
+.sv-ranking-shortcut .sv-ranking-item__icon-container {
+  margin-left: calc(1 * var(--base-unit, 8px));
+}
+
 .sv-list {
   padding: 0;
   margin: 0;