survey-react 1.9.95 → 1.9.96

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.
Files changed (14) hide show
  1. package/defaultV2.css +184 -148
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +83 -60
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +43 -24
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +126 -76
  12. package/survey.react.js +277 -109
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/survey.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.95
2
+ * surveyjs - Survey JavaScript library v1.9.96
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
  */
@@ -20,7 +20,7 @@
20
20
  display: inline-block;
21
21
  vertical-align: top;
22
22
  margin-top: 22px;
23
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
23
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
24
24
  width: 16px;
25
25
  height: 16px;
26
26
  cursor: pointer;
@@ -31,7 +31,7 @@
31
31
  display: inline-block;
32
32
  vertical-align: top;
33
33
  margin-top: 22px;
34
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
34
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
35
35
  width: 16px;
36
36
  height: 16px;
37
37
  cursor: pointer;
@@ -59,7 +59,7 @@
59
59
 
60
60
  .sv_progress-buttons__list li {
61
61
  width: 138px;
62
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
62
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
63
63
  font-family: var(--font-family, var(--font-family));
64
64
  position: relative;
65
65
  text-align: center;
@@ -113,12 +113,12 @@
113
113
  }
114
114
 
115
115
  .sv_progress-toc {
116
- padding: 8px;
116
+ padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
117
117
  max-width: 336px;
118
118
  height: 100%;
119
119
  background: #FFFFFF;
120
120
  box-sizing: border-box;
121
- min-width: 256px;
121
+ min-width: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
122
122
  }
123
123
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
124
124
  background: rgba(25, 179, 148, 0.1);
@@ -129,11 +129,11 @@
129
129
  white-space: break-spaces;
130
130
  }
131
131
  .sv_progress-toc .sv-list__item-body {
132
- padding-inline-start: 16px;
133
- padding-inline-end: 16px;
132
+ padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
133
+ padding-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
134
134
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
135
- padding-top: 12px;
136
- padding-bottom: 12px;
135
+ padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
136
+ padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
137
137
  }
138
138
 
139
139
  .sv_progress-toc--left {
@@ -144,6 +144,25 @@
144
144
  border-left: 1px solid #D6D6D6;
145
145
  }
146
146
 
147
+ .sv_progress-toc--mobile {
148
+ position: fixed;
149
+ top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
150
+ right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
151
+ width: auto;
152
+ min-width: auto;
153
+ height: auto;
154
+ background-color: transparent;
155
+ z-index: 15;
156
+ border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
157
+ }
158
+ .sv_progress-toc--mobile > div {
159
+ width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
160
+ height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
161
+ }
162
+ .sv_progress-toc--mobile:hover {
163
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
164
+ }
165
+
147
166
  .sv_window {
148
167
  position: fixed;
149
168
  bottom: 3px;
@@ -151,7 +170,7 @@
151
170
  background-color: cadetblue;
152
171
  padding: 1px;
153
172
  font-family: var(--font-family, var(--font-family));
154
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
173
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
155
174
  font-style: normal;
156
175
  font-weight: 400;
157
176
  line-height: 1.42857143;
@@ -180,7 +199,7 @@
180
199
  .sv_window_title {
181
200
  padding: 8px 14px;
182
201
  margin: 0;
183
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
202
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
184
203
  background-color: #f7f7f7;
185
204
  border-bottom: 1px solid #ebebeb;
186
205
  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
@@ -197,7 +216,7 @@
197
216
  .sv_window_title a:link,
198
217
  .sv_window_title a:visited {
199
218
  text-decoration: none;
200
- font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
219
+ font-size: calc(0.875 * var(--sjs-font-size, 16px));
201
220
  font-style: normal;
202
221
  color: black;
203
222
  }
@@ -218,8 +237,8 @@
218
237
 
219
238
  .sv-brand-info__text {
220
239
  font-weight: 600;
221
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
222
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
240
+ font-size: calc(1 * var(--sjs-font-size, 16px));
241
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
223
242
  color: #161616;
224
243
  }
225
244
 
@@ -232,8 +251,8 @@
232
251
 
233
252
  .sv-brand-info__terms {
234
253
  font-weight: 400;
235
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
236
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
254
+ font-size: calc(0.75 * var(--sjs-font-size, 16px));
255
+ line-height: calc(1 * var(--sjs-font-size, 16px));
237
256
  }
238
257
  .sv-brand-info__terms a {
239
258
  color: #909090;
@@ -250,9 +269,9 @@
250
269
  z-index: 10000;
251
270
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
252
271
  font-family: var(--font-family, var(--font-family));
253
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
272
+ font-size: calc(1 * var(--sjs-font-size, 16px));
254
273
  padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
255
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
274
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
256
275
  }
257
276
 
258
277
  .sv-matrixdynamic__drag-icon {
@@ -286,15 +305,15 @@
286
305
  background: var(--sjs-general-backcolor, var(--background, #fff));
287
306
  opacity: 0;
288
307
  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
289
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
308
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
290
309
  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
291
310
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
292
311
  min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
293
312
  text-align: center;
294
313
  z-index: 1600;
295
314
  font-family: var(--font-family, var(--font-family));
296
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
297
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
315
+ font-size: calc(1 * var(--sjs-font-size, 16px));
316
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
298
317
  display: flex;
299
318
  flex-direction: row;
300
319
  justify-content: center;
@@ -339,8 +358,8 @@
339
358
 
340
359
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
341
360
  font-weight: 600;
342
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
343
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
361
+ font-size: calc(1 * var(--sjs-font-size, 16px));
362
+ line-height: calc(1.5 * var(--sjs-font-size, 16px));
344
363
  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
345
364
  color: #ffffff;
346
365
  background-color: var(--sjs-special-red, var(--red, #e60a3e));