survey-react 1.9.108 → 1.9.110

package/defaultV2.css

@@ -1,9 +1,8 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.108
+ * surveyjs - Survey JavaScript library v1.9.110
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
-@charset "UTF-8";
 /* cyrillic-ext */
 @font-face {
   font-family: "Open Sans";
@@ -534,7 +533,7 @@ sv-popup {
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
   padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  height: calc(100% - (1 * var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
@@ -974,6 +973,7 @@ sv-popup {
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
+  display: flex;
 }
 
 .sv_window_content {
@@ -1664,9 +1664,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element__title .sv-string-viewer {
   white-space: normal;
 }
-.sd-element__title .sv-string-viewer::before {
-  content: "​";
-}
 
 .sd-element__num {
   float: left;
@@ -2029,6 +2026,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   max-width: 100%;
 }
 
+.sd-question__title--empty .sv-string-viewer {
+  display: inline-block;
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
 .sd-input {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2889,9 +2891,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 
+.sd-root-modern .sv-conver__content .sd-header__text h3,
 .sd-root-modern .sd-container-modern__title .sd-header__text h3 {
   margin: 0;
 }
+.sd-root-modern .sv-conver__content .sd-description,
 .sd-root-modern .sd-container-modern__title .sd-description {
   margin: 0;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -2958,7 +2962,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border: none;
   flex-shrink: 0;
-  margin-top: calc(((1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))))) - (3 * var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
+  margin-top: calc((1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))) - 3 * var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
 }
 
 .sd-item--checked .sd-item__decorator {
@@ -4511,11 +4515,20 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-file__choose-btn--text {
   display: block;
-  margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   font-weight: 600;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   cursor: pointer;
 }
+.sd-file__choose-btn--text .sv-svg-icon {
+  margin-left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: 24px;
+  height: 24px;
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+
+.sd-file__choose-btn--icon > span {
+  display: none;
+}
 
 .sd-file__wrapper {
   width: max-content;
@@ -4525,33 +4538,27 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: none;
 }
 
-.sd-file__choose-btn--text svg {
+.sd-file__actions-container {
+  margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-file__actions-container .sv-action--hidden {
   display: none;
 }
 
-.sd-file__choose-btn--icon {
+.sd-file--answered .sd-file__actions-container {
   z-index: 2;
-}
-.sd-file__choose-btn--icon span:first-child {
-  display: none;
+  margin-top: 0;
+  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
-.sd-file__choose-btn--icon,
-.sd-file__clean-btn {
+.sd-file--answered .sd-file__actions-container {
   top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   position: absolute;
 }
 
-.sd-file__clean-btn {
-  z-index: 2;
-  inset-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
-}
-.sd-file__clean-btn span:first-child {
-  display: none;
-}
-
-.sd-file__choose-btn--icon {
-  inset-inline-end: calc((1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))))) + (5 * var(--sjs-base-unit, var(--base-unit, 8px))));
+.sd-file--chose-btn--as .sd-file--answered .sd-file__actions-container {
+  inset-inline-end: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))) + 5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-file__list {
@@ -4637,7 +4644,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: none;
 }
 
-.sd-file--mobile .sd-file__list {
+.sd-file--mobile:first-child .sd-file__list {
   height: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
@@ -4691,6 +4698,63 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   height: 100%;
 }
 
+.sd-file__change-camera-button {
+  position: absolute;
+  z-index: 2;
+  left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.sd-file__close-camera-button {
+  position: absolute;
+  z-index: 2;
+  right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+
+.sd-context-btn.sd-file__take-picture-button {
+  background-color: var(--sjs-special-red, var(--red, #e60a3e));
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-context-btn.sd-file__take-picture-button .sv-svg-icon {
+  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-context-btn.sd-file__take-picture-button .sv-svg-icon use {
+  fill: var(--sjs-general-backcolor, var(--background, #fff));
+}
+.sd-context-btn.sd-file__take-picture-button:hover, .sd-context-btn.sd-file__take-picture-button:focus {
+  box-shadow: 0 0 0 2px var(--sjs-special-red, var(--red, #e60a3e));
+}
+
+.sd-file__video-container {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sd-file__loading-indicator {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: absolute;
+  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
+  left: 0;
+}
+.sd-file__loading-indicator .sd-loading-indicator {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .sd-hidden {
   display: none !important;
 }
@@ -4818,7 +4882,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sd-body.sd-body--responsive.sd-body--with-timer {
-  max-width: calc(100% + var(--sd-timer-size) * (-1 - 64 / 144) + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  max-width: calc(100% + var(--sd-timer-size) * -1.4444444444 + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
   margin-left: auto;
   margin-right: auto;
 }
@@ -5087,6 +5151,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-action {
   appearance: none;
   border: none;
+  display: flex;
+  gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   background: transparent;
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
@@ -5107,6 +5173,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
+.sd-action__icon {
+  margin-left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+}
+.sd-action__icon use {
+  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+
+.sd-action--icon .sd-action__icon {
+  margin-left: 0;
+}
 .sd-action--icon use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
@@ -5138,10 +5214,6 @@ svg.sd-action--icon {
 .sd-action:not(.sd-action--pressed):focus.sd-action--negative {
   background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
 }
-.sd-action:not(.sd-action--pressed):hover.sd-action--negative.sd-action--icon use,
-.sd-action:not(.sd-action--pressed):focus.sd-action--negative.sd-action--icon use {
-  fill: var(--sjs-special-red, var(--red, #e60a3e));
-}
 .sd-action:not(.sd-action--pressed):hover:active,
 .sd-action:not(.sd-action--pressed):focus:active {
   opacity: 0.5;
@@ -5174,6 +5246,9 @@ svg.sd-action--icon {
   outline: none;
   cursor: pointer;
 }
+.sd-context-btn .sv-svg-icon {
+  margin: 0;
+}
 .sd-context-btn svg {
   display: block;
   width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
@@ -5546,6 +5621,91 @@ svg.sd-action--icon {
   font-size: calc(0.75 * var(--sjs-font-size, 16px));
 }
 
+.sv-cover {
+  padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  box-sizing: border-box;
+  position: relative;
+}
+
+.sv-conver__without-background {
+  padding-bottom: 0;
+}
+
+.sv-conver__content {
+  height: 100%;
+  position: relative;
+  display: grid;
+  gap: 0;
+  grid-auto-columns: 1fr 1fr 1fr;
+  grid-auto-rows: 1fr 1fr 1fr;
+}
+
+.sv-conver__content--static {
+  max-width: calc(80 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.sv-cover__background-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border: 0;
+  background-position-x: center;
+}
+
+.sv-cover__background-image--contain {
+  background-repeat: no-repeat;
+}
+
+.sv-cover__cell {
+  position: relative;
+}
+
+.sv-cover__cell-content {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: max-content;
+  top: 0;
+  bottom: 0;
+}
+
+.sv-cover__cell--left .sv-cover__cell-content {
+  left: 0;
+}
+
+.sv-cover__cell--right .sv-cover__cell-content {
+  right: 0;
+}
+
+.sv-cover__logo {
+  display: flex;
+}
+
+.sv-cover__title {
+  display: flex;
+}
+
+.sv-cover__title .sd-title {
+  color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
+  font-family: var(--sjs-font-surveytitle-family, var(--font-family));
+  font-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
+  font-weight: var(--sjs-font-surveytitle-weight, 700);
+  line-height: calc(1.25 * var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
+}
+
+.sv-cover__description {
+  display: flex;
+}
+
+.sv-cover__description .sd-description {
+  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+}
+
 @keyframes rotationAnimation {
   from {
     rotate: 0deg;