survey-react 1.9.80 → 1.9.82

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/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.80
2
+ * surveyjs - Survey JavaScript library v1.9.82
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
  */
@@ -86,7 +86,6 @@ sv-popup {
86
86
  left: 0;
87
87
  top: 0;
88
88
  width: 100vw;
89
- height: 100vh;
90
89
  outline: none;
91
90
  z-index: 1500;
92
91
  }
@@ -115,6 +114,11 @@ sv-popup {
115
114
  max-width: 90vw;
116
115
  }
117
116
 
117
+ .sv-popup.sv-popup--modal,
118
+ .sv-popup.sv-popup--overlay {
119
+ height: 100vh;
120
+ }
121
+
118
122
  .sv-popup--modal {
119
123
  display: flex;
120
124
  align-items: center;
@@ -170,7 +174,7 @@ sv-popup {
170
174
  .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
171
175
  background-color: var(--primary, #19b394);
172
176
  border: 2px solid var(--primary, #19b394);
173
- color: var(--primary-foreground, #fff);
177
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
174
178
  }
175
179
 
176
180
  .sv-popup--modal .sv-popup__scrolling-content {
@@ -247,7 +251,7 @@ sv-popup {
247
251
  font-style: normal;
248
252
  font-weight: 700;
249
253
  margin-bottom: calc(2 * var(--base-unit, 8px));
250
- color: var(--foreground, #161616);
254
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
251
255
  }
252
256
 
253
257
  .sv-popup__body-footer {
@@ -266,7 +270,7 @@ sv-popup {
266
270
  border-radius: 4px;
267
271
  margin: 2px;
268
272
  cursor: pointer;
269
- font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
273
+ font-family: var(--font-family, var(--font-family));
270
274
  font-style: normal;
271
275
  font-weight: 600;
272
276
  font-size: calc(2 * var(--base-unit, 8px));
@@ -282,7 +286,8 @@ sv-popup {
282
286
  }
283
287
 
284
288
  .sv-popup__button:disabled {
285
- color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
289
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
290
+ opacity: 0.25;
286
291
  cursor: default;
287
292
  }
288
293
 
@@ -292,7 +297,7 @@ sv-popup {
292
297
 
293
298
  .sv-popup__button--apply {
294
299
  background-color: var(--primary, #19b394);
295
- color: var(--primary-foreground, #fff);
300
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
296
301
  }
297
302
 
298
303
  .sv-popup__button--apply:disabled {
@@ -377,7 +382,7 @@ sv-popup {
377
382
  }
378
383
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
379
384
  pointer-events: none;
380
- color: var(--foreground, #161616);
385
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
381
386
  opacity: 0.25;
382
387
  }
383
388
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
@@ -394,13 +399,13 @@ sv-popup {
394
399
  width: calc(2 * var(--base-unit, 8px));
395
400
  }
396
401
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
397
- fill: var(--foreground-light, #909090);
402
+ fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
398
403
  }
399
404
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
400
- color: var(--foreground-light, #909090);
405
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
401
406
  font-size: calc(2 * var(--base-unit, 8px));
402
407
  line-height: calc(3 * var(--base-unit, 8px));
403
- font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
408
+ font-family: var(--font-family);
404
409
  padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
405
410
  }
406
411
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
@@ -412,14 +417,14 @@ sv-popup {
412
417
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
413
418
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
414
419
  background: var(--primary, #19b394);
415
- color: var(--primary-foreground, #fff);
420
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
416
421
  font-weight: 600;
417
422
  }
418
423
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
419
424
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
420
425
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
421
426
  background: var(--primary-light, rgba(25, 179, 148, 0.1));
422
- color: var(--foreground, #161616);
427
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
423
428
  }
424
429
 
425
430
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -560,7 +565,6 @@ sv-popup {
560
565
  max-width: 336px;
561
566
  height: 100%;
562
567
  background: #FFFFFF;
563
- border-right: 1px solid #D6D6D6;
564
568
  box-sizing: border-box;
565
569
  min-width: 256px;
566
570
  }
@@ -580,6 +584,14 @@ sv-popup {
580
584
  padding-bottom: 12px;
581
585
  }
582
586
 
587
+ .sv_progress-toc--left {
588
+ border-right: 1px solid #D6D6D6;
589
+ }
590
+
591
+ .sv_progress-toc--right {
592
+ border-left: 1px solid #D6D6D6;
593
+ }
594
+
583
595
  .sv-container-modern {
584
596
  color: var(--text-color, #404040);
585
597
  font-size: var(--font-size, 16px);
@@ -2202,6 +2214,50 @@ select.sv-dropdown {
2202
2214
  background-color: var(--main-color, #1ab394);
2203
2215
  }
2204
2216
 
2217
+ .sv-rating__item-star > svg {
2218
+ height: 32px;
2219
+ width: 32px;
2220
+ display: inline-block;
2221
+ vertical-align: middle;
2222
+ border: 1px solid transparent;
2223
+ fill: var(--text-color, #404040);
2224
+ }
2225
+ .sv-rating__item-star > svg.sv-star-2 {
2226
+ display: none;
2227
+ }
2228
+ .sv-rating__item-star > svg:hover {
2229
+ border: 1px solid var(--main-hover-color, #9f9f9f);
2230
+ }
2231
+
2232
+ .sv-rating__item-star--selected > svg {
2233
+ fill: var(--main-color, #1ab394);
2234
+ }
2235
+
2236
+ .sv-rating__item-smiley > svg {
2237
+ height: 24px;
2238
+ width: 24px;
2239
+ padding: 4px;
2240
+ display: inline-block;
2241
+ vertical-align: middle;
2242
+ border: 3px solid var(--border-color, rgba(64, 64, 64, 0.5));
2243
+ margin: 3px 0;
2244
+ margin-right: 0.26em;
2245
+ fill: var(--main-hover-color, #9f9f9f);
2246
+ }
2247
+ .sv-rating__item-smiley > svg > use {
2248
+ display: block;
2249
+ }
2250
+ .sv-rating__item-smiley > svg:hover {
2251
+ border: 3px solid var(--main-hover-color, #9f9f9f);
2252
+ background-color: var(--main-hover-color, #9f9f9f);
2253
+ }
2254
+
2255
+ .sv-rating__item-smiley--selected > svg {
2256
+ background-color: var(--main-color, #1ab394);
2257
+ fill: var(--body-background-color, white);
2258
+ border: 3px solid var(--main-color, #1ab394);
2259
+ }
2260
+
2205
2261
  .sv-rating__min-text {
2206
2262
  font-size: 1em;
2207
2263
  margin-right: 1.25em;
@@ -2408,7 +2464,7 @@ select.sv-dropdown {
2408
2464
  }
2409
2465
 
2410
2466
  .sjs_sp_placeholder {
2411
- color: var(--foreground-light, var(--foreground-light, #909090));
2467
+ color: var(--foreground-light, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
2412
2468
  }
2413
2469
 
2414
2470
  .sv-action-bar {
@@ -2448,7 +2504,7 @@ select.sv-dropdown {
2448
2504
  border: none;
2449
2505
  border-radius: 2px;
2450
2506
  background-color: transparent;
2451
- color: var(--foreground, #161616);
2507
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2452
2508
  cursor: pointer;
2453
2509
  font-family: var(--font-family, var(--font-family));
2454
2510
  overflow-x: hidden;
@@ -2493,7 +2549,7 @@ button.sv-action-bar-item {
2493
2549
  display: block;
2494
2550
  }
2495
2551
  .sv-action-bar-item__icon use {
2496
- fill: var(--foreground-light, #909090);
2552
+ fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2497
2553
  }
2498
2554
 
2499
2555
  .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
@@ -2648,7 +2704,6 @@ sv-popup {
2648
2704
  left: 0;
2649
2705
  top: 0;
2650
2706
  width: 100vw;
2651
- height: 100vh;
2652
2707
  outline: none;
2653
2708
  z-index: 1500;
2654
2709
  }
@@ -2677,6 +2732,11 @@ sv-popup {
2677
2732
  max-width: 90vw;
2678
2733
  }
2679
2734
 
2735
+ .sv-popup.sv-popup--modal,
2736
+ .sv-popup.sv-popup--overlay {
2737
+ height: 100vh;
2738
+ }
2739
+
2680
2740
  .sv-popup--modal {
2681
2741
  display: flex;
2682
2742
  align-items: center;
@@ -2732,7 +2792,7 @@ sv-popup {
2732
2792
  .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
2733
2793
  background-color: var(--primary, #19b394);
2734
2794
  border: 2px solid var(--primary, #19b394);
2735
- color: var(--primary-foreground, #fff);
2795
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2736
2796
  }
2737
2797
 
2738
2798
  .sv-popup--modal .sv-popup__scrolling-content {
@@ -2809,7 +2869,7 @@ sv-popup {
2809
2869
  font-style: normal;
2810
2870
  font-weight: 700;
2811
2871
  margin-bottom: calc(2 * var(--base-unit, 8px));
2812
- color: var(--foreground, #161616);
2872
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2813
2873
  }
2814
2874
 
2815
2875
  .sv-popup__body-footer {
@@ -2828,7 +2888,7 @@ sv-popup {
2828
2888
  border-radius: 4px;
2829
2889
  margin: 2px;
2830
2890
  cursor: pointer;
2831
- font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
2891
+ font-family: var(--font-family, var(--font-family));
2832
2892
  font-style: normal;
2833
2893
  font-weight: 600;
2834
2894
  font-size: calc(2 * var(--base-unit, 8px));
@@ -2844,7 +2904,8 @@ sv-popup {
2844
2904
  }
2845
2905
 
2846
2906
  .sv-popup__button:disabled {
2847
- color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
2907
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2908
+ opacity: 0.25;
2848
2909
  cursor: default;
2849
2910
  }
2850
2911
 
@@ -2854,7 +2915,7 @@ sv-popup {
2854
2915
 
2855
2916
  .sv-popup__button--apply {
2856
2917
  background-color: var(--primary, #19b394);
2857
- color: var(--primary-foreground, #fff);
2918
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2858
2919
  }
2859
2920
 
2860
2921
  .sv-popup__button--apply:disabled {
@@ -2939,7 +3000,7 @@ sv-popup {
2939
3000
  }
2940
3001
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
2941
3002
  pointer-events: none;
2942
- color: var(--foreground, #161616);
3003
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2943
3004
  opacity: 0.25;
2944
3005
  }
2945
3006
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
@@ -2956,13 +3017,13 @@ sv-popup {
2956
3017
  width: calc(2 * var(--base-unit, 8px));
2957
3018
  }
2958
3019
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
2959
- fill: var(--foreground-light, #909090);
3020
+ fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2960
3021
  }
2961
3022
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
2962
- color: var(--foreground-light, #909090);
3023
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2963
3024
  font-size: calc(2 * var(--base-unit, 8px));
2964
3025
  line-height: calc(3 * var(--base-unit, 8px));
2965
- font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
3026
+ font-family: var(--font-family);
2966
3027
  padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
2967
3028
  }
2968
3029
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
@@ -2974,14 +3035,14 @@ sv-popup {
2974
3035
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
2975
3036
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
2976
3037
  background: var(--primary, #19b394);
2977
- color: var(--primary-foreground, #fff);
3038
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2978
3039
  font-weight: 600;
2979
3040
  }
2980
3041
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
2981
3042
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
2982
3043
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
2983
3044
  background: var(--primary-light, rgba(25, 179, 148, 0.1));
2984
- color: var(--foreground, #161616);
3045
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
2985
3046
  }
2986
3047
 
2987
3048
  .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -3038,7 +3099,7 @@ sv-popup {
3038
3099
  background: var(--background, #fff);
3039
3100
  cursor: pointer;
3040
3101
  overflow: hidden;
3041
- color: var(--foreground, #161616);
3102
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3042
3103
  position: relative;
3043
3104
  }
3044
3105
  .sv-button-group__item:not(:last-of-type) {
@@ -3054,7 +3115,7 @@ sv-popup {
3054
3115
  height: calc(3 * var(--base-unit, 8px));
3055
3116
  }
3056
3117
  .sv-button-group__item-icon use {
3057
- fill: var(--foreground-light, #909090);
3118
+ fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3058
3119
  }
3059
3120
 
3060
3121
  .sv-button-group__item--selected {
@@ -3086,11 +3147,12 @@ sv-popup {
3086
3147
  }
3087
3148
 
3088
3149
  .sv-button-group__item--disabled {
3089
- color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
3150
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3151
+ opacity: 0.25;
3090
3152
  cursor: default;
3091
3153
  }
3092
3154
  .sv-button-group__item--disabled .sv-button-group__item-icon use {
3093
- fill: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
3155
+ fill: var(--sjs-general-forecolor, var(--foreground, #161616));
3094
3156
  }
3095
3157
  .sv-button-group__item--disabled:hover {
3096
3158
  background-color: var(--background, #fff);
@@ -3148,7 +3210,7 @@ sv-popup {
3148
3210
  right: 10px;
3149
3211
  background-color: cadetblue;
3150
3212
  padding: 1px;
3151
- font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
3213
+ font-family: var(--font-family, var(--font-family));
3152
3214
  font-size: 14px;
3153
3215
  font-style: normal;
3154
3216
  font-weight: 400;
@@ -3202,7 +3264,7 @@ sv-popup {
3202
3264
 
3203
3265
  .sv-brand-info {
3204
3266
  width: 100%;
3205
- font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
3267
+ font-family: var(--font-family, var(--font-family));
3206
3268
  text-align: center;
3207
3269
  color: #161616;
3208
3270
  background: white;
@@ -3266,11 +3328,13 @@ sv-popup {
3266
3328
 
3267
3329
  .sv-ranking-item:focus .sv-ranking-item__icon--focus {
3268
3330
  visibility: visible;
3331
+ top: calc(0.6 * var(--base-unit, 8px));
3332
+ height: calc(3 * var(--base-unit, 8px));
3269
3333
  }
3270
3334
 
3271
3335
  .sv-ranking-item:focus .sv-ranking-item__index {
3272
3336
  background: var(--background, #fff);
3273
- border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
3337
+ outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
3274
3338
  }
3275
3339
 
3276
3340
  .sv-ranking-item__content.sv-ranking-item__content {
@@ -3289,8 +3353,6 @@ sv-popup {
3289
3353
  flex-shrink: 0;
3290
3354
  width: calc(3 * var(--base-unit, 8px));
3291
3355
  height: calc(4 * var(--base-unit, 8px));
3292
- margin-right: calc(1 * var(--base-unit, 8px));
3293
- margin-left: calc(1 * var(--base-unit, 8px));
3294
3356
  }
3295
3357
 
3296
3358
  .sv-ranking-item__icon.sv-ranking-item__icon {
@@ -3298,7 +3360,6 @@ sv-popup {
3298
3360
  fill: var(--primary, #19b394);
3299
3361
  position: absolute;
3300
3362
  top: calc(1 * var(--base-unit, 8px));
3301
- margin-right: calc(1 * var(--base-unit, 8px));
3302
3363
  width: calc(1.75 * var(--base-unit, 8px));
3303
3364
  height: calc(2 * var(--base-unit, 8px));
3304
3365
  }
@@ -3309,7 +3370,7 @@ sv-popup {
3309
3370
  align-items: center;
3310
3371
  justify-content: center;
3311
3372
  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
3312
- color: var(--foreground, #161616);
3373
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3313
3374
  font-size: calc(2 * var(--base-unit, 8px));
3314
3375
  border-radius: 100%;
3315
3376
  border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
@@ -3318,7 +3379,7 @@ sv-popup {
3318
3379
  line-height: calc(3 * var(--base-unit, 8px));
3319
3380
  box-sizing: border-box;
3320
3381
  font-weight: 600;
3321
- margin-left: calc(1 * var(--base-unit, 8px));
3382
+ margin-left: calc(0 * var(--base-unit, 8px));
3322
3383
  }
3323
3384
  .sv-ranking-item__index.sv-ranking-item__index.sv-ranking-item__index--empty:empty {
3324
3385
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
@@ -3331,14 +3392,15 @@ sv-popup {
3331
3392
  overflow: hidden;
3332
3393
  text-overflow: ellipsis;
3333
3394
  white-space: nowrap;
3334
- color: var(--foreground, #161616);
3395
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3335
3396
  font-size: calc(2 * var(--base-unit, 8px));
3336
3397
  line-height: calc(3 * var(--base-unit, 8px));
3337
3398
  margin: 0 calc(2 * var(--base-unit, 8px));
3338
3399
  }
3339
3400
 
3340
3401
  .sd-ranking--disabled .sv-ranking-item__text {
3341
- color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
3402
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3403
+ opacity: 0.25;
3342
3404
  }
3343
3405
 
3344
3406
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
@@ -3381,7 +3443,7 @@ sv-popup {
3381
3443
 
3382
3444
  .sv-ranking--mobile .sv-ranking-item__icon--hover {
3383
3445
  visibility: visible;
3384
- fill: var(--foreground-light, #909090);
3446
+ fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3385
3447
  }
3386
3448
 
3387
3449
  .sv-ranking--mobile.sv-ranking--drag .sv-ranking-item--ghost .sv-ranking-item__icon.sv-ranking-item__icon--hover {
@@ -3424,12 +3486,15 @@ sv-popup {
3424
3486
  }
3425
3487
 
3426
3488
  .sv-ranking-shortcut .sv-ranking-item__icon {
3427
- margin-left: calc(1 * var(--base-unit, 8px));
3428
3489
  width: calc(1.75 * var(--base-unit, 8px));
3429
3490
  height: calc(2 * var(--base-unit, 8px));
3430
3491
  top: calc(1 * var(--base-unit, 8px));
3431
3492
  }
3432
3493
 
3494
+ .sv-ranking-shortcut .sv-ranking-item__icon-container {
3495
+ margin-left: calc(1 * var(--base-unit, 8px));
3496
+ }
3497
+
3433
3498
  .sv-list {
3434
3499
  padding: 0;
3435
3500
  margin: 0;
@@ -3454,14 +3519,14 @@ sv-popup {
3454
3519
  font-size: calc(2 * var(--base-unit, 8px));
3455
3520
  font-weight: 400;
3456
3521
  text-align: center;
3457
- color: var(--foreground-light, #909090);
3522
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3458
3523
  }
3459
3524
 
3460
3525
  .sv-list__item {
3461
3526
  width: 100%;
3462
3527
  align-items: center;
3463
3528
  box-sizing: border-box;
3464
- color: var(--foreground, #161616);
3529
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3465
3530
  cursor: pointer;
3466
3531
  overflow: hidden;
3467
3532
  text-overflow: ellipsis;
@@ -3475,7 +3540,7 @@ sv-popup {
3475
3540
  padding-block: calc(1 * var(--base-unit, 8px));
3476
3541
  padding-inline-end: calc(8 * var(--base-unit, 8px));
3477
3542
  padding-inline-start: calc(2 * var(--base-unit, 8px));
3478
- color: var(--foreground, #161616);
3543
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3479
3544
  font-size: calc(2 * var(--base-unit, 8px));
3480
3545
  line-height: calc(3 * var(--base-unit, 8px));
3481
3546
  cursor: pointer;
@@ -3514,7 +3579,7 @@ sv-popup {
3514
3579
  display: block;
3515
3580
  }
3516
3581
  .sv-list__item-icon use {
3517
- fill: var(--foreground-light, #909090);
3582
+ fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3518
3583
  }
3519
3584
 
3520
3585
  [dir=rtl] .sv-list__item-icon,
@@ -3535,7 +3600,7 @@ sv-popup {
3535
3600
  .sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
3536
3601
  li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
3537
3602
  background-color: var(--primary, #19b394);
3538
- color: var(--primary-foreground, #fff);
3603
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
3539
3604
  font-weight: 600;
3540
3605
  }
3541
3606
  .sv-list__item.sv-list__item--selected .sv-list__item-icon use,
@@ -3549,13 +3614,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3549
3614
  .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
3550
3615
  .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover .sv-list__item-body {
3551
3616
  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
3552
- color: var(--foreground, #161616);
3617
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3553
3618
  font-weight: 400;
3554
3619
  }
3555
3620
 
3556
3621
  .sv-list__item.sv-list__item--disabled .sv-list__item-body {
3557
3622
  cursor: default;
3558
- color: var(--foreground-light, #909090);
3623
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3559
3624
  }
3560
3625
 
3561
3626
  .sv-list__item span {
@@ -3588,7 +3653,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3588
3653
  height: calc(3 * var(--base-unit, 8px));
3589
3654
  }
3590
3655
  .sv-list__filter-icon .sv-svg-icon use {
3591
- fill: var(--foreground-light, #909090);
3656
+ fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3592
3657
  }
3593
3658
 
3594
3659
  .sv-list__input {
@@ -3601,7 +3666,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3601
3666
  width: 100%;
3602
3667
  outline: none;
3603
3668
  font-size: 1em;
3604
- color: var(--foreground, #161616);
3669
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3605
3670
  padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
3606
3671
  padding-inline-start: calc(7 * var(--base-unit, 8px));
3607
3672
  line-height: calc(3 * var(--base-unit, 8px));
@@ -3609,12 +3674,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3609
3674
  }
3610
3675
 
3611
3676
  .sv-list__input::placeholder {
3612
- color: var(--foreground-light, #909090);
3677
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3613
3678
  }
3614
3679
 
3615
3680
  .sv-list__input:disabled,
3616
3681
  .sv-list__input:disabled::placeholder {
3617
- color: var(--foreground-light, #909090);
3682
+ color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3618
3683
  }
3619
3684
 
3620
3685
  .sv-list__loading-indicator {
@@ -3634,11 +3699,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3634
3699
  padding: calc(3 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
3635
3700
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
3636
3701
  border-radius: calc(1 * var(--base-unit, 8px));
3637
- color: var(--foreground, #161616);
3702
+ color: var(--sjs-general-forecolor, var(--foreground, #161616));
3638
3703
  min-width: calc(30 * var(--base-unit, 8px));
3639
3704
  text-align: center;
3640
3705
  z-index: 1600;
3641
- font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
3706
+ font-family: var(--font-family, var(--font-family));
3642
3707
  font-size: calc(2 * var(--base-unit, 8px));
3643
3708
  line-height: calc(3 * var(--base-unit, 8px));
3644
3709
  display: flex;