survey-react 1.9.96 → 1.9.98

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.96
2
+ * surveyjs - Survey JavaScript library v1.9.98
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -591,17 +591,17 @@ sv-popup {
591
591
  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
592
592
  }
593
593
 
594
- .sv-popup--show-pointer.sv-popup--right {
594
+ .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
595
595
  transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
596
596
  }
597
- .sv-popup--show-pointer.sv-popup--right .sv-popup__pointer {
597
+ .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
598
598
  transform: translate(-12px, -4px) rotate(-90deg);
599
599
  }
600
600
 
601
- .sv-popup--show-pointer.sv-popup--left {
601
+ .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
602
602
  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
603
603
  }
604
- .sv-popup--show-pointer.sv-popup--left .sv-popup__pointer {
604
+ .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
605
605
  transform: translate(-4px, -4px) rotate(90deg);
606
606
  }
607
607
 
@@ -1125,16 +1125,21 @@ sv-popup {
1125
1125
  opacity: 0.25;
1126
1126
  }
1127
1127
 
1128
+ .sv-ranking-item--disabled .sv-ranking-item__text {
1129
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
1130
+ opacity: 0.25;
1131
+ }
1132
+
1128
1133
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
1129
1134
  display: none;
1130
1135
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
1131
1136
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1132
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
1133
- width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
1137
+ width: calc(31 * var(--sjs-base-unit, var(--base-unit, 8px)));
1134
1138
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1135
1139
  z-index: 1;
1136
1140
  position: absolute;
1137
- left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1141
+ left: 0;
1142
+ top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1138
1143
  }
1139
1144
 
1140
1145
  [dir=rtl] .sv-ranking-item__ghost {
@@ -1213,6 +1218,9 @@ sv-popup {
1213
1218
  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1214
1219
  }
1215
1220
 
1221
+ .sv-ranking-shortcut .sv-ranking-item__content {
1222
+ padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1223
+ }
1216
1224
  .sv-ranking-shortcut .sv-ranking-item__icon-container {
1217
1225
  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1218
1226
  }
@@ -1222,19 +1230,32 @@ sv-popup {
1222
1230
  }
1223
1231
 
1224
1232
  .sv-ranking--select-to-rank-vertical {
1225
- flex-direction: column;
1233
+ flex-direction: column-reverse;
1226
1234
  }
1227
1235
  .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
1228
- margin: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
1236
+ margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
1229
1237
  height: 1px;
1230
1238
  }
1239
+ .sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
1240
+ padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1241
+ padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1242
+ }
1231
1243
 
1232
1244
  .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
1233
1245
  width: 1px;
1234
1246
  }
1235
1247
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
1248
+ left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1249
+ }
1250
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to {
1251
+ padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1252
+ }
1253
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
1236
1254
  left: initial;
1237
1255
  }
1256
+ .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from {
1257
+ padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1258
+ }
1238
1259
 
1239
1260
  .sv-ranking__container-placeholder {
1240
1261
  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
@@ -1265,6 +1286,10 @@ sv-popup {
1265
1286
  background: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
1266
1287
  }
1267
1288
 
1289
+ .sv-ranking__container--from .sv-ranking-item__icon--focus {
1290
+ display: none;
1291
+ }
1292
+
1268
1293
  .sv-list {
1269
1294
  padding: 0;
1270
1295
  margin: 0;
@@ -1316,6 +1341,7 @@ sv-popup {
1316
1341
  line-height: calc(1.5 * var(--sjs-font-size, 16px));
1317
1342
  cursor: pointer;
1318
1343
  overflow: hidden;
1344
+ text-align: left;
1319
1345
  text-overflow: ellipsis;
1320
1346
  white-space: nowrap;
1321
1347
  }
@@ -1478,7 +1504,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1478
1504
  }
1479
1505
 
1480
1506
  .sv-save-data_root {
1481
- position: absolute;
1507
+ position: fixed;
1482
1508
  left: 50%;
1483
1509
  bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1484
1510
  background: var(--sjs-general-backcolor, var(--background, #fff));
@@ -1805,6 +1831,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1805
1831
  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
1806
1832
  border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1807
1833
  box-shadow: none;
1834
+ background-color: transparent;
1808
1835
  }
1809
1836
 
1810
1837
  .sd-question {
@@ -3249,16 +3276,20 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3249
3276
  line-height: calc(1.5 * var(--sjs-font-size, 16px));
3250
3277
  }
3251
3278
 
3279
+ .sv-dropdown_select-wrapper {
3280
+ position: relative;
3281
+ }
3282
+
3283
+ .sv-dropdown_select-wrapper use {
3284
+ fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3285
+ }
3286
+
3252
3287
  .sd-dropdown {
3253
3288
  -webkit-appearance: none;
3254
3289
  -moz-appearance: none;
3255
3290
  appearance: none;
3256
3291
  padding-inline-end: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3257
3292
  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3258
- background-position: right calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
3259
- background-repeat: no-repeat;
3260
- background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3261
- background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15L17 10H7L12 15Z' fill='%23909090'/%3E%3C/svg%3E%0A");
3262
3293
  opacity: 1;
3263
3294
  display: flex;
3264
3295
  justify-content: space-between;
@@ -3302,15 +3333,23 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3302
3333
  margin: auto 0;
3303
3334
  }
3304
3335
 
3336
+ .sd-dropdown_chevron-button {
3337
+ position: absolute;
3338
+ width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3339
+ top: 0;
3340
+ bottom: 0;
3341
+ inset-inline-end: 0;
3342
+ display: flex;
3343
+ justify-content: center;
3344
+ align-items: center;
3345
+ padding-inline-end: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3346
+ }
3347
+
3305
3348
  .sd-dropdown_clean-button-svg {
3306
3349
  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3307
3350
  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3308
3351
  }
3309
3352
 
3310
- .sd-dropdown use {
3311
- fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3312
- }
3313
-
3314
3353
  .sd-input.sd-dropdown:focus-within {
3315
3354
  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
3316
3355
  }
@@ -4405,6 +4444,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4405
4444
  box-sizing: border-box;
4406
4445
  }
4407
4446
 
4447
+ .sd-root_background-image {
4448
+ position: absolute;
4449
+ top: 0;
4450
+ bottom: 0;
4451
+ left: 0;
4452
+ right: 0;
4453
+ }
4454
+
4408
4455
  .sd-multipletext {
4409
4456
  width: 100%;
4410
4457
  table-layout: fixed;
@@ -5060,6 +5107,11 @@ body {
5060
5107
  width: 100%;
5061
5108
  font-family: var(--font-family, var(--font-family));
5062
5109
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
5110
+ position: relative;
5111
+ }
5112
+ .sd-root-modern form {
5113
+ z-index: 1;
5114
+ position: relative;
5063
5115
  }
5064
5116
  .sd-root-modern * {
5065
5117
  scrollbar-width: thin;