survey-react 1.9.137 → 1.9.139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.137
2
+ * surveyjs - Survey JavaScript library v1.9.139
3
3
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -1369,10 +1369,16 @@ sv-brand-info, .sv-brand-info {
1369
1369
  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1370
1370
  }
1371
1371
 
1372
- .sv-ranking-item--disabled.sv-ranking-item--disabled {
1372
+ .sv-ranking-item--disabled.sv-ranking-item--disabled,
1373
+ .sv-ranking-item--readonly.sv-ranking-item--readonly,
1374
+ .sv-ranking-item--preview.sv-ranking-item--preview {
1373
1375
  cursor: initial;
1376
+ user-select: initial;
1377
+ -webkit-user-select: initial;
1374
1378
  }
1375
- .sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
1379
+ .sv-ranking-item--disabled.sv-ranking-item--disabled .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon,
1380
+ .sv-ranking-item--readonly.sv-ranking-item--readonly .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon,
1381
+ .sv-ranking-item--preview.sv-ranking-item--preview .sv-ranking-item__icon-container.sv-ranking-item__icon-container .sv-ranking-item__icon.sv-ranking-item__icon {
1376
1382
  visibility: hidden;
1377
1383
  }
1378
1384
 
@@ -1433,6 +1439,16 @@ sv-brand-info, .sv-brand-info {
1433
1439
  opacity: 0.25;
1434
1440
  }
1435
1441
 
1442
+ .sv-ranking-item--readonly .sv-ranking-item__index {
1443
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
1444
+ }
1445
+
1446
+ .sv-ranking-item--preview .sv-ranking-item__index {
1447
+ background-color: transparent;
1448
+ border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
1449
+ box-sizing: border-box;
1450
+ }
1451
+
1436
1452
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
1437
1453
  display: none;
1438
1454
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -1996,6 +2012,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1996
2012
  height: var(--animation-height);
1997
2013
  }
1998
2014
  }
2015
+ @keyframes overflowIn {
2016
+ 0% {
2017
+ overflow: hidden;
2018
+ }
2019
+ 99% {
2020
+ overflow: hidden;
2021
+ }
2022
+ 100% {
2023
+ overflow: visible;
2024
+ }
2025
+ }
1999
2026
  .sd-element {
2000
2027
  padding-left: var(--sv-element-add-padding-left, 0px);
2001
2028
  padding-right: var(--sv-element-add-padding-right, 0px);
@@ -2158,8 +2185,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2158
2185
  animation-name: elementMoveIn, fadeIn;
2159
2186
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
2160
2187
  animation-fill-mode: forwards;
2161
- animation-duration: var(--sjs-element-move-in-duration, 250ms), var(--sjs-element-fade-in-duration, 250ms);
2162
- animation-delay: 0s, var(--sjs-element-fade-in-delay, 0ms);
2188
+ animation-duration: var(--sjs-element-move-in-duration, 250ms), var(--sjs-element-fade-in-duration, 500ms);
2189
+ animation-delay: 0s, var(--sjs-element-fade-in-delay, 100ms);
2163
2190
  opacity: 0;
2164
2191
  }
2165
2192
 
@@ -2168,15 +2195,17 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2168
2195
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
2169
2196
  animation-fill-mode: forwards;
2170
2197
  animation-direction: reverse;
2171
- animation-duration: var(--sjs-element-move-out-duration, 250ms), var(--sjs-element-fade-out-duration, 100ms);
2198
+ animation-duration: var(--sjs-element-move-out-duration, 250ms), var(--sjs-element-fade-out-duration, 150ms);
2172
2199
  animation-delay: var(--sjs-element-move-out-delay, 0ms), 0s;
2173
2200
  }
2174
2201
 
2175
2202
  @keyframes paddingFadeIn {
2176
2203
  from {
2177
2204
  padding-top: 0;
2205
+ padding-bottom: 0;
2178
2206
  }
2179
2207
  to {
2208
+ padding-bottom: var(--animation-padding-bottom);
2180
2209
  padding-top: var(--animation-padding-top);
2181
2210
  }
2182
2211
  }
@@ -2184,24 +2213,30 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2184
2213
  box-sizing: border-box;
2185
2214
  }
2186
2215
 
2216
+ .sd-element__content--fade-in,
2217
+ .sd-element__content--fade-out {
2218
+ --animation-padding-top: 0;
2219
+ --animation-padding-bottom: 0;
2220
+ }
2221
+
2187
2222
  .sd-element__content--fade-in {
2188
- animation-name: fadeIn, moveIn, paddingFadeIn;
2223
+ animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
2189
2224
  min-height: 0 !important;
2190
2225
  opacity: 0;
2191
2226
  animation-fill-mode: forwards;
2192
2227
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
2193
- animation-duration: var(--sjs-expand-fade-in-duration, 100ms), var(--sjs-expand-move-in-duration, 200ms), var(--sjs-expand-move-in-duration, 200ms);
2194
- animation-delay: var(--sjs-collapse-fade-in-delay, 150ms), 0s, 0s;
2228
+ animation-duration: var(--sjs-expand-fade-in-duration, 500ms), var(--sjs-expand-move-in-duration, 150ms), var(--sjs-expand-move-in-duration, 150ms), var(--sjs-expand-move-in-duration, 150ms);
2229
+ animation-delay: var(--sjs-expand-fade-in-delay, 150ms), 0s, 0s, 0s;
2195
2230
  }
2196
2231
 
2197
2232
  .sd-element__content--fade-out {
2198
- animation-name: fadeIn, moveIn, paddingFadeIn;
2233
+ animation-name: fadeIn, moveIn, paddingFadeIn, overflowIn;
2199
2234
  min-height: 0 !important;
2200
2235
  animation-direction: reverse;
2201
2236
  animation-fill-mode: forwards;
2202
2237
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
2203
- animation-duration: var(--sjs-collapse-fade-out-duration, 100ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms);
2204
- animation-delay: 0s, var(--sjs-collapse-move-out-delay, 0ms), var(--sjs-collapse-move-out-delay, 0ms);
2238
+ animation-duration: var(--sjs-collapse-fade-out-duration, 150ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-expand-move-in-duration, 150ms);
2239
+ animation-delay: 0s, var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms), var(--sjs-collapse-move-out-delay, 100ms);
2205
2240
  }
2206
2241
 
2207
2242
  .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:focus-within, .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:hover {
@@ -2216,28 +2251,28 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2216
2251
  }
2217
2252
  .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded {
2218
2253
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
2219
- transition-duration: var(--sjs-expand-move-in-duration, 200ms);
2254
+ transition-duration: var(--sjs-expand-move-in-duration, 150ms);
2220
2255
  }
2221
2256
  .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded > .sd-element__header {
2222
2257
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
2223
- transition-duration: var(--sjs-expand-move-in-duration, 200ms);
2258
+ transition-duration: var(--sjs-expand-move-in-duration, 150ms);
2224
2259
  }
2225
2260
  .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded > .sd-element__header .sd-element__title:before {
2226
- transition-duration: var(--sjs-expand-move-in-duration, 200ms);
2261
+ transition-duration: var(--sjs-expand-move-in-duration, 150ms);
2227
2262
  }
2228
2263
  .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed {
2229
2264
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
2230
2265
  transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
2231
- transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
2266
+ transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
2232
2267
  }
2233
2268
  .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed > .sd-element__header {
2234
2269
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
2235
2270
  transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
2236
- transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
2271
+ transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
2237
2272
  }
2238
2273
  .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed > .sd-element__header .sd-element__title:before {
2239
2274
  transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
2240
- transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
2275
+ transition-delay: var(--sjs-collapse-move-out-delay, 100ms);
2241
2276
  }
2242
2277
  .sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex > .sd-element__header--location-top:after {
2243
2278
  display: block;
@@ -2574,6 +2609,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2574
2609
  user-select: none;
2575
2610
  }
2576
2611
 
2612
+ .sd-input--readonly {
2613
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
2614
+ }
2615
+
2616
+ .sd-input.sd-input--preview {
2617
+ background: none;
2618
+ box-shadow: none;
2619
+ transition: none;
2620
+ border-bottom: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
2621
+ border-radius: 0;
2622
+ padding-left: 0;
2623
+ padding-right: 0;
2624
+ }
2625
+
2577
2626
  .sd-input::placeholder {
2578
2627
  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
2579
2628
  -webkit-user-select: none;
@@ -2588,6 +2637,16 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2588
2637
  opacity: 0.25;
2589
2638
  }
2590
2639
 
2640
+ .sd-input.sd-input--readonly {
2641
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2642
+ box-shadow: none;
2643
+ transition: none;
2644
+ }
2645
+
2646
+ .sd-input.sd-input--readonly::placeholder {
2647
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2648
+ }
2649
+
2591
2650
  .sd-root--readonly .sd-input--disabled,
2592
2651
  .sd-root--readonly .sd-input--disabled::placeholder {
2593
2652
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -2783,6 +2842,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2783
2842
 
2784
2843
  .sd-panel.sd-element--nested > .sd-panel__content {
2785
2844
  padding-bottom: var(--sd-base-padding);
2845
+ --animation-padding-top: var(--sd-base-padding);
2786
2846
  }
2787
2847
 
2788
2848
  .sd-panel__content {
@@ -2800,6 +2860,15 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2800
2860
  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
2801
2861
  }
2802
2862
 
2863
+ .sd-question--readonly .sjs_sp_container,
2864
+ .sd-question--preview .sjs_sp_container {
2865
+ border: none;
2866
+ }
2867
+ .sd-question--readonly .sjs_sp_placeholder,
2868
+ .sd-question--preview .sjs_sp_placeholder {
2869
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2870
+ }
2871
+
2803
2872
  .sjs_sp_controls.sd-signaturepad__controls {
2804
2873
  right: var(--sjs-base-unit, var(--base-unit, 8px));
2805
2874
  top: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -2857,6 +2926,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2857
2926
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
2858
2927
  }
2859
2928
 
2929
+ .sd-checkbox--checked.sd-checkbox--readonly .sd-checkbox__svg use {
2930
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
2931
+ }
2932
+
2933
+ .sd-checkbox--checked.sd-checkbox--preview .sd-checkbox__svg use {
2934
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
2935
+ }
2936
+
2860
2937
  .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
2861
2938
  position: sticky;
2862
2939
  left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3013,9 +3090,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3013
3090
  }
3014
3091
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions),
3015
3092
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
3016
- border-top-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3017
- border-bottom-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3018
- background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3093
+ border-top-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3094
+ border-bottom-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3095
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3019
3096
  }
3020
3097
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions).sd-matrix__text--checked,
3021
3098
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type.sd-matrix__text--checked {
@@ -3033,6 +3110,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3033
3110
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--checked .sd-item__decorator {
3034
3111
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3035
3112
  }
3113
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator,
3114
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--readonly.sd-item--checked .sd-item__decorator {
3115
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3116
+ }
3117
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-item--preview.sd-item--preview .sd-item__decorator,
3118
+ .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-item--preview.sd-item--preview .sd-item__decorator {
3119
+ background-color: transparent;
3120
+ }
3036
3121
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td.sd-table__cell:not(.sd-table__cell--actions) .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after,
3037
3122
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item:not(.sd-item--error).sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
3038
3123
  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
@@ -3273,6 +3358,24 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3273
3358
  flex-basis: 100%;
3274
3359
  }
3275
3360
 
3361
+ .sd-element--with-frame.sd-element--compact .sd-table {
3362
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3363
+ }
3364
+ .sd-element--with-frame.sd-element--compact .sd-table-wrapper:before, .sd-element--with-frame.sd-element--compact .sd-table-wrapper:after {
3365
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3366
+ }
3367
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
3368
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3369
+ }
3370
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--actions:not(.sd-table__cell--vertical),
3371
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--empty,
3372
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--row-text,
3373
+ .sd-element--with-frame.sd-element--compact .sd-table__cell--footer-total,
3374
+ .sd-element--with-frame.sd-element--compact .sd-matrix__cell:first-of-type,
3375
+ .sd-element--with-frame.sd-element--compact .sd-matrix tr > td:first-of-type {
3376
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3377
+ }
3378
+
3276
3379
  .sd-question--table > .sd-question__header,
3277
3380
  .sd-question--table .sd-question__description--under-input .sv-string-viewer {
3278
3381
  position: sticky;
@@ -3433,7 +3536,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3433
3536
  }
3434
3537
  .sd-row--multiple > div {
3435
3538
  box-sizing: border-box;
3436
- --animation-padding-left: calcSize(2);
3539
+ --animation-padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3437
3540
  padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3438
3541
  display: flex;
3439
3542
  align-items: stretch;
@@ -3484,22 +3587,22 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3484
3587
  }
3485
3588
  .sd-row--fade-in {
3486
3589
  animation-fill-mode: forwards;
3487
- animation-name: fadeIn, moveIn, marginFadeIn;
3590
+ animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
3488
3591
  min-height: 0 !important;
3489
3592
  opacity: 0;
3490
3593
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
3491
- animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s;
3492
- animation-duration: var(--sjs-row-fade-in-duration, 100ms), var(--sjs-row-move-in-duration, 200ms), var(--sjs-row-move-in-duration, 200ms);
3594
+ animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s, 0s;
3595
+ animation-duration: var(--sjs-row-fade-in-duration, 500ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms), var(--sjs-row-move-in-duration, 150ms);
3493
3596
  }
3494
3597
 
3495
3598
  .sd-row--fade-out {
3496
- animation-name: fadeIn, moveIn, marginFadeIn;
3599
+ animation-name: fadeIn, moveIn, marginFadeIn, overflowIn;
3497
3600
  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
3498
3601
  animation-fill-mode: forwards;
3499
3602
  animation-direction: reverse;
3500
3603
  min-height: 0 !important;
3501
- animation-delay: 0s, var(--sjs-row-move-out-delay, 0ms), var(--sjs-row-move-out-delay, 0ms);
3502
- animation-duration: var(--sjs-row-fade-out-duration, 100ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
3604
+ animation-delay: 0s, var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms), var(--sjs-row-move-out-delay, 100ms);
3605
+ animation-duration: var(--sjs-row-fade-out-duration, 150ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
3503
3606
  }
3504
3607
 
3505
3608
  .sd-row--fade-in .sd-element-wrapper--fade-in {
@@ -3648,6 +3751,18 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3648
3751
  transition: box-shadow var(--sjs-transition-duration, 150ms), background var(--sjs-transition-duration, 150ms);
3649
3752
  }
3650
3753
 
3754
+ .sd-item--readonly.sd-item--readonly .sd-item__decorator {
3755
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3756
+ box-shadow: none;
3757
+ transition: none;
3758
+ }
3759
+
3760
+ .sd-item--preview.sd-item--preview .sd-item__decorator {
3761
+ background-color: transparent;
3762
+ box-shadow: none;
3763
+ transition: none;
3764
+ }
3765
+
3651
3766
  .sd-item--checked .sd-item__decorator {
3652
3767
  box-shadow: none;
3653
3768
  }
@@ -3775,6 +3890,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3775
3890
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3776
3891
  }
3777
3892
 
3893
+ .sd-checkbox--checked.sd-checkbox--readonly .sd-checkbox__svg use {
3894
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
3895
+ }
3896
+
3897
+ .sd-checkbox--checked.sd-checkbox--preview .sd-checkbox__svg use {
3898
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
3899
+ }
3900
+
3778
3901
  .sd-radio__decorator {
3779
3902
  border-radius: 50%;
3780
3903
  }
@@ -3801,6 +3924,20 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3801
3924
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
3802
3925
  }
3803
3926
 
3927
+ .sd-radio--checked.sd-radio--readonly .sd-radio__decorator:after {
3928
+ background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
3929
+ }
3930
+
3931
+ .sd-radio--checked.sd-radio--preview .sd-radio__decorator:after {
3932
+ display: none;
3933
+ }
3934
+ .sd-radio--checked.sd-radio--preview .sd-radio__decorator .sd-radio__svg {
3935
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
3936
+ display: block;
3937
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3938
+ height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3939
+ }
3940
+
3804
3941
  .sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
3805
3942
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3806
3943
  }
@@ -3985,6 +4122,43 @@ legend + sv-ng-rating-item + .sd-rating__item {
3985
4122
  border: none;
3986
4123
  }
3987
4124
 
4125
+ .sd-rating__item.sd-rating__item--readonly {
4126
+ fill: transparent;
4127
+ background-color: transparent;
4128
+ border: 2px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4129
+ box-shadow: none;
4130
+ transform: none;
4131
+ }
4132
+ .sd-rating__item.sd-rating__item--readonly .sd-rating__item-text.sd-rating__item-text {
4133
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4134
+ }
4135
+
4136
+ .sd-rating__item.sd-rating__item--selected.sd-rating__item--readonly {
4137
+ border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4138
+ }
4139
+ .sd-rating__item.sd-rating__item--selected.sd-rating__item--readonly .sd-rating__item-text.sd-rating__item-text {
4140
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
4141
+ }
4142
+
4143
+ .sd-rating__item.sd-rating__item--preview {
4144
+ fill: transparent;
4145
+ background-color: transparent;
4146
+ border: 1px solid transparent;
4147
+ box-shadow: none;
4148
+ transform: none;
4149
+ }
4150
+ .sd-rating__item.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
4151
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
4152
+ }
4153
+
4154
+ .sd-rating__item.sd-rating__item--selected.sd-rating__item--preview {
4155
+ border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4156
+ border-width: 1px;
4157
+ }
4158
+ .sd-rating__item.sd-rating__item--selected.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
4159
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
4160
+ }
4161
+
3988
4162
  .sd-question--disabled .sd-rating__item-text {
3989
4163
  opacity: 0.25;
3990
4164
  }
@@ -4070,6 +4244,26 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4070
4244
  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
4071
4245
  }
4072
4246
 
4247
+ .sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--readonly {
4248
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4249
+ border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4250
+ background-color: unset;
4251
+ }
4252
+
4253
+ .sd-rating__item-smiley.sd-rating__item-smiley--preview {
4254
+ border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4255
+ border-width: 1px;
4256
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4257
+ }
4258
+ .sd-rating__item-smiley.sd-rating__item-smiley--preview svg {
4259
+ margin: 1px;
4260
+ }
4261
+
4262
+ .sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview {
4263
+ fill: var(--sjs-general-backcolor, var(--background, #fff));
4264
+ background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
4265
+ }
4266
+
4073
4267
  .sd-rating__item-smiley--allowhover:hover {
4074
4268
  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
4075
4269
  border-color: var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4105,6 +4299,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4105
4299
  opacity: 1;
4106
4300
  }
4107
4301
 
4302
+ .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--selected, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--readonly, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--preview {
4303
+ opacity: 1;
4304
+ }
4305
+
4108
4306
  .sd-rating__item-star {
4109
4307
  position: relative;
4110
4308
  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4120,6 +4318,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4120
4318
  }
4121
4319
  .sd-rating__item-star svg {
4122
4320
  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
4321
+ stroke-width: 2px;
4123
4322
  fill: transparent;
4124
4323
  width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4125
4324
  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4142,6 +4341,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4142
4341
  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4143
4342
  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4144
4343
  }
4344
+ .sd-rating__item-star--small.sd-rating__item-star--selected svg {
4345
+ stroke-width: 1px;
4346
+ }
4145
4347
 
4146
4348
  .sd-rating__item-star--selected svg {
4147
4349
  stroke: transparent;
@@ -4166,6 +4368,27 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4166
4368
  fill: var(--sjs-border-default, var(--border, #d6d6d6));
4167
4369
  }
4168
4370
 
4371
+ .sd-rating__item-star--readonly svg {
4372
+ stroke: var(--sjs-border-default, var(--border, #d6d6d6));
4373
+ fill: none;
4374
+ }
4375
+
4376
+ .sd-rating__item-star--selected.sd-rating__item-star--readonly svg {
4377
+ stroke: none;
4378
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4379
+ }
4380
+
4381
+ .sd-rating__item-star--preview svg {
4382
+ stroke: var(--sjs-general-forecolor, var(--foreground, #161616));
4383
+ stroke-width: 1px;
4384
+ fill: none;
4385
+ }
4386
+
4387
+ .sd-rating__item-star--selected.sd-rating__item-star--preview svg {
4388
+ stroke: none;
4389
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4390
+ }
4391
+
4169
4392
  .sd-rating__item-star:focus-within svg {
4170
4393
  stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
4171
4394
  fill: transparent;
@@ -4280,6 +4503,28 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4280
4503
  left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4281
4504
  }
4282
4505
 
4506
+ .sv-ranking.sd-ranking--readonly {
4507
+ user-select: initial;
4508
+ -webkit-user-select: initial;
4509
+ }
4510
+ .sv-ranking.sd-ranking--readonly.sv-ranking--select-to-rank-empty-value .sv-ranking__containers-divider {
4511
+ visibility: hidden;
4512
+ }
4513
+ .sv-ranking.sd-ranking--readonly .sv-ranking__container--empty {
4514
+ visibility: hidden;
4515
+ }
4516
+
4517
+ .sv-ranking.sd-ranking--preview {
4518
+ user-select: initial;
4519
+ -webkit-user-select: initial;
4520
+ }
4521
+ .sv-ranking.sd-ranking--preview.sv-ranking--select-to-rank-empty-value .sv-ranking__containers-divider {
4522
+ visibility: hidden;
4523
+ }
4524
+ .sv-ranking.sd-ranking--preview .sv-ranking__container--empty {
4525
+ visibility: hidden;
4526
+ }
4527
+
4283
4528
  @container (max-width: 496px) {
4284
4529
  .sv-ranking--select-to-rank-horizontal {
4285
4530
  flex-direction: column-reverse;
@@ -4506,12 +4751,22 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4506
4751
  white-space: pre;
4507
4752
  }
4508
4753
 
4509
- .sd-input--disabled .sv-string-viewer {
4754
+ .sd-input--disabled .sv-string-viewer,
4755
+ .sd-input--readonly .sv-string-viewer,
4756
+ .sd-input--preview .sv-string-viewer {
4510
4757
  max-width: 100%;
4511
4758
  overflow: hidden;
4512
4759
  text-overflow: ellipsis;
4513
4760
  }
4514
4761
 
4762
+ .sd-question--readonly .sd-dropdown_chevron-button use {
4763
+ opacity: 0.24;
4764
+ }
4765
+
4766
+ .sd-question--preview .sd-dropdown_chevron-button {
4767
+ display: none;
4768
+ }
4769
+
4515
4770
  .sv-dropdown-popup .sd-list__item-body {
4516
4771
  --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
4517
4772
  line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
@@ -4555,14 +4810,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4555
4810
  background-position: left calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
4556
4811
  }
4557
4812
 
4558
- .sd-input.sd-tagbox:not(.sd-tagbox--empty):not(.sd-input--disabled) {
4813
+ .sd-input.sd-tagbox:not(.sd-tagbox--empty).sd-input--editable {
4559
4814
  height: auto;
4560
4815
  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4561
4816
  padding-inline-end: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4562
4817
  padding-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4563
4818
  }
4564
4819
 
4565
- .sd-tagbox.sd-input--disabled {
4820
+ .sd-tagbox.sd-input--disabled, .sd-tagbox.sd-input--readonly, .sd-tagbox.sd-input--preview {
4566
4821
  white-space: normal;
4567
4822
  }
4568
4823
 
@@ -4829,11 +5084,41 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4829
5084
  align-items: flex-start;
4830
5085
  padding-right: 0;
4831
5086
  }
5087
+ .sd-imagepicker__column .sd-imagepicker__item {
5088
+ width: 100%;
5089
+ }
5090
+ .sd-imagepicker__column .sd-imagepicker__text {
5091
+ width: 100%;
5092
+ display: inline-block;
5093
+ overflow: hidden;
5094
+ text-overflow: ellipsis;
5095
+ text-align: center;
5096
+ }
4832
5097
 
4833
5098
  .sd-selectbase__column.sd-imagepicker__column:not(:last-child) {
4834
5099
  padding-right: 0;
4835
5100
  }
4836
5101
 
5102
+ .sd-imagepicker__item--readonly .sd-imagepicker__check-icon {
5103
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
5104
+ }
5105
+
5106
+ .sd-imagepicker__item--preview .sd-imagepicker__check-decorator {
5107
+ display: none;
5108
+ }
5109
+ .sd-imagepicker__item--preview .sd-imagepicker__image {
5110
+ /* Safari 6.0 - 9.0 */
5111
+ -webkit-filter: grayscale(100%);
5112
+ filter: grayscale(100%);
5113
+ opacity: 0.25;
5114
+ }
5115
+ .sd-imagepicker__item--preview.sd-imagepicker__item--checked .sd-imagepicker__image {
5116
+ /* Safari 6.0 - 9.0 */
5117
+ -webkit-filter: grayscale(0%);
5118
+ filter: grayscale(0%);
5119
+ opacity: 1;
5120
+ }
5121
+
4837
5122
  .sd-image__image {
4838
5123
  display: block;
4839
5124
  max-width: 100%;
@@ -5138,6 +5423,37 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5138
5423
  opacity: 0.25;
5139
5424
  }
5140
5425
 
5426
+ .sd-boolean--readonly {
5427
+ pointer-events: none;
5428
+ box-shadow: none;
5429
+ transition: none;
5430
+ background: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
5431
+ }
5432
+ .sd-boolean--readonly .sd-boolean__thumb {
5433
+ box-shadow: inset 0px 0px 0px 2px var(--sjs-general-forecolor, var(--foreground, #161616));
5434
+ transition: none;
5435
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
5436
+ }
5437
+
5438
+ .sd-boolean--preview {
5439
+ pointer-events: none;
5440
+ box-shadow: none;
5441
+ transition: none;
5442
+ background: transparent;
5443
+ }
5444
+ .sd-boolean--preview .sd-boolean__thumb {
5445
+ border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
5446
+ box-shadow: none;
5447
+ transition: none;
5448
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
5449
+ }
5450
+ .sd-boolean--preview.sd-boolean--checked .sd-boolean__thumb, .sd-boolean--preview.sd-boolean--indeterminate .sd-boolean__thumb {
5451
+ margin-left: auto;
5452
+ }
5453
+ .sd-boolean--preview .sd-checkbox__label--preview {
5454
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
5455
+ }
5456
+
5141
5457
  .sd-boolean__thumb-ghost {
5142
5458
  z-index: 1;
5143
5459
  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -5176,6 +5492,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5176
5492
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
5177
5493
  }
5178
5494
 
5495
+ .sd-question--readonly .sd-paneldynamic .sd-question__placeholder,
5496
+ .sd-question--preview .sd-paneldynamic .sd-question__placeholder {
5497
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
5498
+ }
5499
+
5179
5500
  .sd-paneldynamic__separator {
5180
5501
  display: block;
5181
5502
  position: absolute;
@@ -5574,7 +5895,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5574
5895
  width: 100%;
5575
5896
  }
5576
5897
 
5577
- .sd-file__preview {
5898
+ .sd-file__preview-item {
5578
5899
  position: relative;
5579
5900
  display: flex;
5580
5901
  align-items: stretch;
@@ -5583,13 +5904,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5583
5904
  width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5584
5905
  margin: 0;
5585
5906
  }
5586
- .sd-file__preview .sd-file__default-image {
5907
+ .sd-file__preview-item .sd-file__default-image {
5587
5908
  width: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5588
5909
  height: 90px;
5589
5910
  }
5590
- .sd-file__preview img:hover + .sd-file__remove-file-button,
5591
- .sd-file__preview svg:hover + .sd-file__remove-file-button,
5592
- .sd-file__preview .sd-file__remove-file-button:hover {
5911
+ .sd-file__preview-item img:hover + .sd-file__remove-file-button,
5912
+ .sd-file__preview-item svg:hover + .sd-file__remove-file-button,
5913
+ .sd-file__preview-item .sd-file__remove-file-button:hover {
5593
5914
  opacity: 1;
5594
5915
  }
5595
5916
 
@@ -5662,7 +5983,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5662
5983
  .sd-file--single-image {
5663
5984
  height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
5664
5985
  }
5665
- .sd-file--single-image .sd-file__preview {
5986
+ .sd-file--single-image .sd-file__preview-item {
5666
5987
  width: 100%;
5667
5988
  margin: 0;
5668
5989
  }
@@ -5778,6 +6099,38 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5778
6099
  cursor: default;
5779
6100
  }
5780
6101
 
6102
+ .sd-file--readonly .sd-context-btn {
6103
+ display: none;
6104
+ }
6105
+ .sd-file--readonly .sd-file__decorator {
6106
+ border-color: transparent;
6107
+ }
6108
+ .sd-file--readonly .sd-file__actions-container {
6109
+ display: none;
6110
+ }
6111
+ .sd-file--readonly .sd-file__image-wrapper {
6112
+ background: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
6113
+ }
6114
+ .sd-file--readonly .sd-file__drag-area-placeholder {
6115
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
6116
+ }
6117
+
6118
+ .sd-file--preview .sd-context-btn {
6119
+ display: none;
6120
+ }
6121
+ .sd-file--preview .sd-file__decorator {
6122
+ border-color: transparent;
6123
+ }
6124
+ .sd-file--preview .sd-file__image-wrapper {
6125
+ background: transparent;
6126
+ }
6127
+ .sd-file--preview .sd-file__actions-container {
6128
+ display: none;
6129
+ }
6130
+ .sd-file--preview .sd-file__drag-area-placeholder {
6131
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
6132
+ }
6133
+
5781
6134
  .sd-hidden {
5782
6135
  display: none !important;
5783
6136
  }
@@ -6172,6 +6525,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
6172
6525
  color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
6173
6526
  }
6174
6527
 
6528
+ .sd-question--preview .sd-multipletext__item-title {
6529
+ border: none;
6530
+ }
6531
+
6175
6532
  .sd-multipletext__item {
6176
6533
  flex-grow: 1;
6177
6534
  }