survey-creator-core 1.9.95 → 1.9.97
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/fonts.fontless.css +1 -1
- package/fonts.fontless.min.css +1 -1
- package/package.json +2 -2
- package/survey-creator-core.css +885 -875
- package/survey-creator-core.fontless.css +884 -874
- package/survey-creator-core.fontless.css.map +1 -1
- package/survey-creator-core.fontless.min.css +39 -39
- package/survey-creator-core.i18n.js +1 -1
- package/survey-creator-core.i18n.min.js +1 -1
- package/survey-creator-core.js +433 -159
- package/survey-creator-core.js.map +1 -1
- package/survey-creator-core.min.css +40 -40
- package/survey-creator-core.min.js +2 -2
- package/typings/components/matrix-cell.d.ts +1 -0
- package/typings/components/string-editor.d.ts +1 -1
- package/typings/components/tabs/logic-theme.d.ts +3 -0
- package/typings/components/tabs/test.d.ts +2 -0
- package/typings/components/tabs/theme.d.ts +8 -2
- package/typings/components/tabs/translation-theme.d.ts +0 -1
- package/typings/creator-base.d.ts +14 -3
- package/typings/creator-settings.d.ts +1 -0
- package/typings/custom-questions/question-color.d.ts +1 -0
- package/typings/custom-questions/question-spin-editor.d.ts +1 -0
- package/typings/editorLocalization.d.ts +4 -0
- package/typings/localization/english.d.ts +4 -0
- package/typings/plugins/undo-redo/undo-redo-controller.d.ts +1 -0
- package/typings/plugins/undo-redo/undo-redo-manager.d.ts +7 -0
- package/typings/property-grid/index.d.ts +2 -0
- package/typings/property-grid/matrices.d.ts +1 -0
- package/typings/property-grid-theme/property-grid.d.ts +4 -1
- package/typings/textWorker.d.ts +33 -6
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* SurveyJS Creator v1.9.
|
|
2
|
+
* SurveyJS Creator v1.9.97
|
|
3
3
|
* (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
|
|
4
4
|
* Github: https://github.com/surveyjs/survey-creator
|
|
5
5
|
* License: https://surveyjs.io/Licenses#SurveyCreator
|
|
6
6
|
*/
|
|
7
7
|
.svc-context-container {
|
|
8
8
|
display: flex;
|
|
9
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
9
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
10
10
|
width: max-content;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.svc-context-button {
|
|
14
14
|
display: block;
|
|
15
15
|
box-sizing: border-box;
|
|
16
|
-
background-color: var(--background, #fff);
|
|
16
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
17
17
|
border-radius: 50%;
|
|
18
|
-
width: calc(6 * var(--base-unit, 8px));
|
|
19
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
18
|
+
width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
19
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
20
20
|
cursor: pointer;
|
|
21
|
-
padding: calc(1.5 * var(--base-unit, 8px));
|
|
21
|
+
padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
22
22
|
outline: none;
|
|
23
23
|
}
|
|
24
24
|
.svc-context-button use {
|
|
25
|
-
fill: var(--foreground-light, #909090);
|
|
25
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.svc-context-button:hover use, .svc-context-button:focus use {
|
|
29
|
-
fill: var(--primary, #19b394);
|
|
29
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.svc-context-button--danger:hover use, .svc-context-button--danger:focus use {
|
|
33
|
-
fill: var(--red, #e60a3e);
|
|
33
|
+
fill: var(--sjs-special-red, var(--red, #e60a3e));
|
|
34
34
|
}
|
|
35
35
|
.svc-embed-tab__content {
|
|
36
|
-
padding: calc(2 * var(--base-unit, 8px));
|
|
36
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
37
37
|
font-family: var(--font-family);
|
|
38
38
|
}
|
|
39
39
|
.svc-embed-tab__content .spg-row {
|
|
@@ -41,13 +41,13 @@
|
|
|
41
41
|
}
|
|
42
42
|
.svc-embed-tab__content .spg-row .spg-question__content .spg-comment:disabled,
|
|
43
43
|
.svc-embed-tab__content .spg-row .spg-question__content .spg-comment:disabled::placeholder {
|
|
44
|
-
color: var(--foreground, #161616);
|
|
44
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
45
45
|
}
|
|
46
46
|
.svc-embed-tab__content .spg-question__description {
|
|
47
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
48
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
49
|
-
color: var(--foreground, #161616);
|
|
50
|
-
padding: calc(2 * var(--base-unit, 8px)) 0 calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
47
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
48
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
49
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
50
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.sv-question-embed__title {
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
svc-tab-json-editor-ace {
|
|
62
62
|
width: 100%;
|
|
63
63
|
height: 100%;
|
|
64
|
-
background: var(--background-dim, #f3f3f3);
|
|
64
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.svc-json-editor-tab__content {
|
|
@@ -75,7 +75,7 @@ svc-tab-json-editor-ace {
|
|
|
75
75
|
svc-tab-json-editor-textarea {
|
|
76
76
|
width: 100%;
|
|
77
77
|
height: 100%;
|
|
78
|
-
background: var(--background-dim, #f3f3f3);
|
|
78
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.svc-json-editor-tab__content {
|
|
@@ -91,33 +91,33 @@ svc-tab-json-editor-textarea {
|
|
|
91
91
|
.svc-json-editor-tab__errros_button {
|
|
92
92
|
position: absolute;
|
|
93
93
|
top: 0%;
|
|
94
|
-
right: calc(0% + (2 * var(--base-unit, 8px)));
|
|
95
|
-
min-height: calc(2.5 * var(--base-unit, 8px));
|
|
96
|
-
max-height: calc(2.5 * var(--base-unit, 8px));
|
|
94
|
+
right: calc(0% + (2 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
95
|
+
min-height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
96
|
+
max-height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
97
97
|
border: none;
|
|
98
|
-
background-color: var(--primary, #19b394);
|
|
99
|
-
color: var(--primary-foreground, #fff);
|
|
98
|
+
background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
99
|
+
color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
|
|
100
100
|
font-weight: bold;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.svc-json-editor-tab__content-errors {
|
|
104
104
|
position: absolute;
|
|
105
105
|
right: 0%;
|
|
106
|
-
top: calc(0% + (3 * var(--base-unit, 8px)));
|
|
107
|
-
max-width: calc(100% - (2 * var(--base-unit, 8px)));
|
|
108
|
-
padding: var(--base-unit, 8px);
|
|
109
|
-
background-color: var(--background, #fff);
|
|
106
|
+
top: calc(0% + (3 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
107
|
+
max-width: calc(100% - (2 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
108
|
+
padding: var(--sjs-base-unit, var(--base-unit, 8px));
|
|
109
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
110
110
|
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
|
|
111
|
-
border: 1px solid var(--border, #d6d6d6);
|
|
111
|
+
border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
112
112
|
border-radius: 1px;
|
|
113
|
-
color: var(--foreground, #161616);
|
|
113
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
114
114
|
font-family: monospace;
|
|
115
115
|
}
|
|
116
116
|
.svc-json-editor-tab__content-errors span {
|
|
117
117
|
white-space: pre-line;
|
|
118
118
|
}
|
|
119
119
|
.svc-json-editor-tab__content-errors span > b {
|
|
120
|
-
color: var(--red, #e60a3e);
|
|
120
|
+
color: var(--sjs-special-red, var(--red, #e60a3e));
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.svc-json-editor-tab__content-errors:empty {
|
|
@@ -250,7 +250,7 @@ svc-tab-json-editor-textarea {
|
|
|
250
250
|
svc-tab-test {
|
|
251
251
|
width: 100%;
|
|
252
252
|
height: 100%;
|
|
253
|
-
background: var(--background-dim, #f3f3f3);
|
|
253
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
254
254
|
}
|
|
255
255
|
|
|
256
256
|
.svc-test-tab__content .svc-plugin-tab__content {
|
|
@@ -260,13 +260,13 @@ svc-tab-test {
|
|
|
260
260
|
.svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_completed_page {
|
|
261
261
|
margin: 0;
|
|
262
262
|
border: 0;
|
|
263
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
263
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
264
264
|
}
|
|
265
265
|
.svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_body {
|
|
266
266
|
border: 0;
|
|
267
267
|
}
|
|
268
268
|
.svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
|
|
269
|
-
width: calc(33 * var(--base-unit, 8px));
|
|
269
|
+
width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
270
270
|
margin-left: auto;
|
|
271
271
|
margin-right: auto;
|
|
272
272
|
margin-bottom: 72px;
|
|
@@ -274,7 +274,7 @@ svc-tab-test {
|
|
|
274
274
|
}
|
|
275
275
|
|
|
276
276
|
.svc-creator-tab__content--with-toolbar.svc-test-tab__content .svc-plugin-tab__content {
|
|
277
|
-
height: calc(100% - (6 * var(--base-unit, 8px)));
|
|
277
|
+
height: calc(100% - (6 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
278
278
|
}
|
|
279
279
|
|
|
280
280
|
.svc-test-tab__content-actions {
|
|
@@ -282,9 +282,9 @@ svc-tab-test {
|
|
|
282
282
|
}
|
|
283
283
|
.svc-test-tab__content-actions .sv-action-bar {
|
|
284
284
|
padding: 0;
|
|
285
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
286
|
-
background: var(--background, #fff);
|
|
287
|
-
border-top: 1px solid var(--border, #d6d6d6);
|
|
285
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
286
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
287
|
+
border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
288
288
|
width: 100%;
|
|
289
289
|
position: absolute;
|
|
290
290
|
}
|
|
@@ -292,7 +292,7 @@ svc-tab-test {
|
|
|
292
292
|
left: 0;
|
|
293
293
|
right: 0;
|
|
294
294
|
justify-content: center;
|
|
295
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
295
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
296
296
|
}
|
|
297
297
|
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
|
|
298
298
|
padding: 0;
|
|
@@ -301,13 +301,13 @@ svc-tab-test {
|
|
|
301
301
|
margin: 0;
|
|
302
302
|
}
|
|
303
303
|
.svc-test-tab__content-actions .sv-action-bar-item {
|
|
304
|
-
font-family: var(--font-family);
|
|
304
|
+
font-family: var(--font-family, var(--font-family));
|
|
305
305
|
font-style: normal;
|
|
306
306
|
font-weight: 600;
|
|
307
|
-
font-size: calc(
|
|
308
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
307
|
+
font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
308
|
+
line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
309
309
|
width: 100%;
|
|
310
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
310
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
311
311
|
}
|
|
312
312
|
.svc-test-tab__content-actions .svc-page-selector {
|
|
313
313
|
max-width: 50%;
|
|
@@ -316,7 +316,7 @@ svc-tab-test {
|
|
|
316
316
|
overflow: hidden;
|
|
317
317
|
white-space: nowrap;
|
|
318
318
|
text-overflow: ellipsis;
|
|
319
|
-
color: var(--foreground, #161616);
|
|
319
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
320
320
|
display: inline-block;
|
|
321
321
|
}
|
|
322
322
|
|
|
@@ -324,8 +324,8 @@ svc-tab-test {
|
|
|
324
324
|
font-family: var(--font-family);
|
|
325
325
|
font-style: normal;
|
|
326
326
|
font-weight: 400;
|
|
327
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
328
|
-
color: var(--foreground, #161616);
|
|
327
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
328
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
329
329
|
width: 100%;
|
|
330
330
|
position: absolute;
|
|
331
331
|
top: 50%;
|
|
@@ -343,36 +343,36 @@ svc-tab-test {
|
|
|
343
343
|
}
|
|
344
344
|
|
|
345
345
|
.sl-table__cell.st-table__cell--actions:first-of-type .sv-action-bar {
|
|
346
|
-
margin-top: calc(-0.5 * var(--base-unit, 8px));
|
|
347
|
-
padding-right: calc(4 * var(--base-unit, 8px));
|
|
346
|
+
margin-top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
347
|
+
padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
348
348
|
}
|
|
349
349
|
|
|
350
350
|
.sl-table .sl-table__detail-button.sl-table__detail-button {
|
|
351
|
-
width: calc(6 * var(--base-unit, 8px));
|
|
352
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
351
|
+
width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
352
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
353
353
|
box-sizing: border-box;
|
|
354
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
354
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
355
355
|
padding: 0;
|
|
356
356
|
}
|
|
357
357
|
.sl-table .sl-table__detail-button.sl-table__detail-button:hover:enabled, .sl-table .sl-table__detail-button.sl-table__detail-button.sv-focused--by-key {
|
|
358
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
358
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
359
359
|
outline: none;
|
|
360
360
|
}
|
|
361
361
|
.sl-table .sl-table__detail-button.sl-table__detail-button:hover:enabled use, .sl-table .sl-table__detail-button.sl-table__detail-button.sv-focused--by-key use {
|
|
362
|
-
fill: var(--primary, #19b394);
|
|
362
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
363
363
|
}
|
|
364
364
|
|
|
365
365
|
.sl-table__remove-button .sv-action-bar-item {
|
|
366
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
367
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
366
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
367
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
368
368
|
cursor: pointer;
|
|
369
369
|
}
|
|
370
370
|
.sl-table__remove-button .sv-action-bar-item:hover:enabled, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key {
|
|
371
|
-
background-color: var(--red-light, rgba(
|
|
371
|
+
background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
|
|
372
372
|
outline: none;
|
|
373
373
|
}
|
|
374
374
|
.sl-table__remove-button .sv-action-bar-item:hover:enabled use, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key use {
|
|
375
|
-
fill: var(--red, #e60a3e);
|
|
375
|
+
fill: var(--sjs-special-red, var(--red, #e60a3e));
|
|
376
376
|
}
|
|
377
377
|
|
|
378
378
|
.sl-table__cell .sv-action-bar-item__icon {
|
|
@@ -386,15 +386,15 @@ svc-tab-test {
|
|
|
386
386
|
|
|
387
387
|
.sl-table__row #remove-row .sv-action-bar-item {
|
|
388
388
|
border: none;
|
|
389
|
-
width: calc(5 * var(--base-unit, 8px));
|
|
390
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
389
|
+
width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
390
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
391
391
|
}
|
|
392
392
|
.sl-table__row #remove-row .sv-action-bar-item__icon use {
|
|
393
|
-
fill: var(--red, #e60a3e);
|
|
393
|
+
fill: var(--sjs-special-red, var(--red, #e60a3e));
|
|
394
394
|
}
|
|
395
395
|
|
|
396
396
|
.sl-table__row.sl-table__row--additional .sl-table__cell .svc-action-button {
|
|
397
|
-
color: var(--secondary, #ff9814);
|
|
397
|
+
color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
398
398
|
}
|
|
399
399
|
|
|
400
400
|
.sl-table__cell .svc-action-button,
|
|
@@ -405,14 +405,14 @@ svc-tab-test {
|
|
|
405
405
|
font-family: var(--font-family);
|
|
406
406
|
font-style: normal;
|
|
407
407
|
font-weight: bold;
|
|
408
|
-
font-size: calc(3 * var(--base-unit, 8px));
|
|
409
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
408
|
+
font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
409
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
410
410
|
background: transparent;
|
|
411
|
-
color: var(--foreground, #161616);
|
|
411
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
412
412
|
outline: none;
|
|
413
413
|
border: none;
|
|
414
414
|
box-shadow: none;
|
|
415
|
-
max-height: calc(13.5 * var(--base-unit, 8px));
|
|
415
|
+
max-height: calc(13.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
416
416
|
overflow: hidden;
|
|
417
417
|
display: -webkit-box;
|
|
418
418
|
-webkit-line-clamp: 3;
|
|
@@ -420,12 +420,12 @@ svc-tab-test {
|
|
|
420
420
|
}
|
|
421
421
|
|
|
422
422
|
.sl-table__cell {
|
|
423
|
-
color: var(--foreground, #161616);
|
|
423
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
424
424
|
font-weight: bold;
|
|
425
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
425
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
426
426
|
font-family: var(--font-family);
|
|
427
427
|
vertical-align: top;
|
|
428
|
-
padding: calc(2 * var(--base-unit, 8px)) 0;
|
|
428
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
429
429
|
width: 100%;
|
|
430
430
|
}
|
|
431
431
|
|
|
@@ -464,14 +464,14 @@ svc-tab-test {
|
|
|
464
464
|
text-align: left;
|
|
465
465
|
}
|
|
466
466
|
.sl-table tbody tr:last-of-type .sl-table__cell {
|
|
467
|
-
padding-bottom: calc(10 * var(--base-unit, 8px));
|
|
467
|
+
padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
468
468
|
}
|
|
469
469
|
.sl-table tr:first-of-type .sl-table__cell {
|
|
470
|
-
padding-top: calc(4 * var(--base-unit, 8px));
|
|
470
|
+
padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
471
471
|
}
|
|
472
472
|
.sl-table td:first-of-type,
|
|
473
473
|
.sl-table th:first-of-type {
|
|
474
|
-
padding-left: calc(4 * var(--base-unit, 8px));
|
|
474
|
+
padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
475
475
|
}
|
|
476
476
|
.sl-table td:first-of-type .sv-action-bar,
|
|
477
477
|
.sl-table th:first-of-type .sv-action-bar {
|
|
@@ -479,7 +479,7 @@ svc-tab-test {
|
|
|
479
479
|
}
|
|
480
480
|
.sl-table td:last-of-type,
|
|
481
481
|
.sl-table th:last-of-type {
|
|
482
|
-
padding-right: calc(4 * var(--base-unit, 8px));
|
|
482
|
+
padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
483
483
|
}
|
|
484
484
|
|
|
485
485
|
.sl-panel .sl-panel__footer {
|
|
@@ -493,12 +493,12 @@ svc-tab-test {
|
|
|
493
493
|
}
|
|
494
494
|
.sl-panel .sl-panel__footer button.sl-panel__done-button {
|
|
495
495
|
width: 100%;
|
|
496
|
-
margin: calc(2 * var(--base-unit, 8px)) 0 calc(10 * var(--base-unit, 8px)) 0;
|
|
497
|
-
color: var(--primary, #19b394);
|
|
498
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
496
|
+
margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(10 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
497
|
+
color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
498
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
499
499
|
font-family: var(--font-family);
|
|
500
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
501
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
500
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
501
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
502
502
|
display: flex;
|
|
503
503
|
align-items: center;
|
|
504
504
|
vertical-align: baseline;
|
|
@@ -506,8 +506,8 @@ svc-tab-test {
|
|
|
506
506
|
user-select: none;
|
|
507
507
|
}
|
|
508
508
|
.sl-panel .sl-panel__footer button:hover:enabled {
|
|
509
|
-
background-color: var(--primary, #19b394);
|
|
510
|
-
color: var(--primary-foreground, #fff);
|
|
509
|
+
background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
510
|
+
color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
|
|
511
511
|
}
|
|
512
512
|
.sl-panel .sl-panel__footer .sv-action-bar-item__title {
|
|
513
513
|
color: inherit;
|
|
@@ -525,7 +525,7 @@ svc-tab-test {
|
|
|
525
525
|
.sl-question {
|
|
526
526
|
display: flex;
|
|
527
527
|
align-items: center;
|
|
528
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
528
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
529
529
|
}
|
|
530
530
|
|
|
531
531
|
.sl-row {
|
|
@@ -539,7 +539,7 @@ svc-tab-test {
|
|
|
539
539
|
}
|
|
540
540
|
|
|
541
541
|
.sl-question__header--left {
|
|
542
|
-
margin-right: calc(1 * var(--base-unit, 8px));
|
|
542
|
+
margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
543
543
|
}
|
|
544
544
|
|
|
545
545
|
.sl-row .sd-scrollable-container:not(.sd-scrollable-container--compact) {
|
|
@@ -547,9 +547,9 @@ svc-tab-test {
|
|
|
547
547
|
}
|
|
548
548
|
|
|
549
549
|
.sl-question__title {
|
|
550
|
-
color: var(--foreground, #161616);
|
|
551
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
552
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
550
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
551
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
552
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
553
553
|
margin: 0;
|
|
554
554
|
font-weight: 600;
|
|
555
555
|
}
|
|
@@ -558,19 +558,19 @@ svc-tab-test {
|
|
|
558
558
|
}
|
|
559
559
|
|
|
560
560
|
.sl-row--multiple .sl-question {
|
|
561
|
-
padding-right: calc(1 * var(--base-unit, 8px));
|
|
561
|
+
padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
562
562
|
}
|
|
563
563
|
|
|
564
564
|
.svc-logic-question-value {
|
|
565
|
-
--sd-base-padding: calc(5 * var(--base-unit, 8px));
|
|
566
|
-
--sd-base-vertical-padding: calc(4 * var(--base-unit, 8px));
|
|
567
|
-
--sd-page-vertical-padding: calc(3 * var(--base-unit, 8px));
|
|
568
|
-
padding-right: calc(5 * var(--base-unit, 8px));
|
|
569
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
565
|
+
--sd-base-padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
566
|
+
--sd-base-vertical-padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
567
|
+
--sd-page-vertical-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
568
|
+
padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
569
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
570
570
|
}
|
|
571
571
|
|
|
572
572
|
.svc-logic_trigger-editor {
|
|
573
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
573
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
574
574
|
}
|
|
575
575
|
|
|
576
576
|
.svc-logic_trigger-editor .svc-logic-question-value {
|
|
@@ -582,16 +582,16 @@ svc-tab-test {
|
|
|
582
582
|
}
|
|
583
583
|
|
|
584
584
|
.spg-comment.sl-comment {
|
|
585
|
-
height: calc(17 * var(--base-unit, 8px));
|
|
585
|
+
height: calc(17 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
586
586
|
}
|
|
587
587
|
.svc-tab-translation {
|
|
588
588
|
width: 100%;
|
|
589
589
|
height: 100%;
|
|
590
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
590
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
591
591
|
}
|
|
592
592
|
|
|
593
593
|
.st-properties .spg-item.spg-selectbase__label:focus-within {
|
|
594
|
-
outline: 1px dotted var(--primary, #19b394);
|
|
594
|
+
outline: 1px dotted var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
595
595
|
}
|
|
596
596
|
.st-properties .spg-selectbase__label:focus-within {
|
|
597
597
|
outline: none;
|
|
@@ -604,8 +604,8 @@ svc-tab-test {
|
|
|
604
604
|
font-family: var(--font-family);
|
|
605
605
|
font-style: normal;
|
|
606
606
|
font-weight: 400;
|
|
607
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
608
|
-
color: var(--foreground, #161616);
|
|
607
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
608
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
609
609
|
width: 100%;
|
|
610
610
|
position: absolute;
|
|
611
611
|
top: 50%;
|
|
@@ -620,7 +620,7 @@ svc-tab-test {
|
|
|
620
620
|
}
|
|
621
621
|
|
|
622
622
|
.st-strings {
|
|
623
|
-
height: calc(100% - (6 * var(--base-unit, 8px)));
|
|
623
|
+
height: calc(100% - (6 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
624
624
|
overflow-y: auto;
|
|
625
625
|
overflow-x: hidden;
|
|
626
626
|
}
|
|
@@ -633,7 +633,7 @@ svc-tab-test {
|
|
|
633
633
|
flex-shrink: 0;
|
|
634
634
|
flex-grow: 0;
|
|
635
635
|
width: 450px;
|
|
636
|
-
border-left: 1px solid var(--border, #d6d6d6);
|
|
636
|
+
border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
637
637
|
}
|
|
638
638
|
|
|
639
639
|
.st-property-panel .spg-panel__content .spg-row {
|
|
@@ -641,11 +641,11 @@ svc-tab-test {
|
|
|
641
641
|
}
|
|
642
642
|
|
|
643
643
|
.st-property-panel .spg-panel__content .spg-row:first-child {
|
|
644
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
644
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
645
645
|
}
|
|
646
646
|
|
|
647
647
|
.st-strings-header .st-table__cell {
|
|
648
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
648
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
649
649
|
height: auto;
|
|
650
650
|
}
|
|
651
651
|
|
|
@@ -655,22 +655,22 @@ svc-tab-test {
|
|
|
655
655
|
|
|
656
656
|
.st-title.st-panel__title,
|
|
657
657
|
.st-table__cell.st-table__cell--header {
|
|
658
|
-
font-family: var(--font-family);
|
|
658
|
+
font-family: var(--font-family, var(--font-family));
|
|
659
659
|
font-style: normal;
|
|
660
660
|
font-weight: 600;
|
|
661
|
-
font-size: calc(
|
|
662
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
663
|
-
color: var(--foreground-light, #909090);
|
|
661
|
+
font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
662
|
+
line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
663
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
664
664
|
text-align: left;
|
|
665
665
|
}
|
|
666
666
|
|
|
667
667
|
.st-title.st-panel__title {
|
|
668
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
669
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
670
|
-
padding-left: calc(3 * var(--base-unit, 8px));
|
|
668
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
669
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
670
|
+
padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
671
671
|
margin: 0;
|
|
672
|
-
background-color: var(--background-
|
|
673
|
-
border-bottom: 1px solid var(--border-light, #eaeaea);
|
|
672
|
+
background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
|
|
673
|
+
border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
|
|
674
674
|
}
|
|
675
675
|
|
|
676
676
|
.st-table tr {
|
|
@@ -682,28 +682,28 @@ svc-tab-test {
|
|
|
682
682
|
display: block;
|
|
683
683
|
flex: 1 1;
|
|
684
684
|
box-sizing: border-box;
|
|
685
|
-
background-color: var(--background, #fff);
|
|
686
|
-
border-bottom: 1px solid var(--border-light, #eaeaea);
|
|
687
|
-
padding: calc(1 * var(--base-unit, 8px)) 0;
|
|
685
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
686
|
+
border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
|
|
687
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
688
688
|
}
|
|
689
689
|
|
|
690
690
|
td.st-table__cell:first-of-type {
|
|
691
|
-
font-family: var(--font-family);
|
|
691
|
+
font-family: var(--font-family, var(--font-family));
|
|
692
692
|
font-style: normal;
|
|
693
693
|
font-weight: 600;
|
|
694
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
695
|
-
line-height: calc(
|
|
696
|
-
color: var(--foreground, #161616);
|
|
694
|
+
font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
695
|
+
line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
696
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
697
697
|
max-width: 300px;
|
|
698
|
-
padding-right: calc(3 * var(--base-unit, 8px));
|
|
698
|
+
padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
699
699
|
}
|
|
700
700
|
td.st-table__cell:first-of-type span {
|
|
701
701
|
display: inline-block;
|
|
702
|
-
padding-left: calc(3 * var(--base-unit, 8px));
|
|
702
|
+
padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
703
703
|
}
|
|
704
704
|
|
|
705
705
|
.st-panel-indent .st-table__cell:first-of-type span {
|
|
706
|
-
padding-left: calc(6 * var(--base-unit, 8px));
|
|
706
|
+
padding-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
707
707
|
}
|
|
708
708
|
|
|
709
709
|
.st-table {
|
|
@@ -714,32 +714,32 @@ td.st-table__cell:first-of-type span {
|
|
|
714
714
|
}
|
|
715
715
|
|
|
716
716
|
.st-comment {
|
|
717
|
-
font-family: var(--font-family);
|
|
717
|
+
font-family: var(--font-family, var(--font-family));
|
|
718
718
|
font-style: normal;
|
|
719
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
720
|
-
line-height: calc(
|
|
719
|
+
font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
720
|
+
line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
721
721
|
display: block;
|
|
722
|
-
width: calc(100% - 3 * var(--base-unit, 8px));
|
|
722
|
+
width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
723
723
|
border: unset;
|
|
724
724
|
outline: none;
|
|
725
|
-
background-color: var(--background, #fff);
|
|
726
|
-
color: var(--foreground, #161616);
|
|
725
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
726
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
727
727
|
resize: none;
|
|
728
728
|
padding: 0;
|
|
729
729
|
}
|
|
730
730
|
|
|
731
731
|
.sd-translation-line-skeleton {
|
|
732
|
-
min-height: calc(5 * var(--base-unit, 8px));
|
|
733
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
732
|
+
min-height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
733
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
734
734
|
}
|
|
735
735
|
.svc-tab-logic-edit {
|
|
736
736
|
width: 100%;
|
|
737
737
|
height: 100%;
|
|
738
|
-
background: var(--background-dim, #f3f3f3);
|
|
738
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
739
739
|
}
|
|
740
740
|
|
|
741
741
|
.svc-tab-logic-edit__content {
|
|
742
|
-
height: calc(100% - (6 * var(--base-unit, 8px)));
|
|
742
|
+
height: calc(100% - (6 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
743
743
|
overflow-y: auto;
|
|
744
744
|
overflow-x: hidden;
|
|
745
745
|
padding-left: 16%;
|
|
@@ -756,43 +756,43 @@ td.st-table__cell:first-of-type span {
|
|
|
756
756
|
|
|
757
757
|
.svc-tab-logic-edit__content-actions .sv-action-bar {
|
|
758
758
|
padding: 0;
|
|
759
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
760
|
-
background: var(--background, #fff);
|
|
761
|
-
border-top: 1px solid var(--border, #d6d6d6);
|
|
759
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
760
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
761
|
+
border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
762
762
|
width: 100%;
|
|
763
763
|
}
|
|
764
764
|
|
|
765
765
|
.svc-logic-paneldynamic div.svc-logic-operator {
|
|
766
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
766
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
767
767
|
box-sizing: content-box;
|
|
768
768
|
}
|
|
769
769
|
|
|
770
770
|
.svc-logic-paneldynamic .svc-logic-operator {
|
|
771
771
|
-webkit-appearance: none;
|
|
772
772
|
appearance: none;
|
|
773
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
774
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
773
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
774
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
775
775
|
border: none;
|
|
776
776
|
outline: none;
|
|
777
777
|
font-weight: 600;
|
|
778
778
|
font-family: var(--font-family);
|
|
779
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
780
|
-
color: var(--foreground-light, #909090);
|
|
781
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
782
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
779
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
780
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
781
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
782
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
783
783
|
cursor: pointer;
|
|
784
784
|
}
|
|
785
785
|
.svc-logic-paneldynamic .svc-logic-operator option {
|
|
786
|
-
background: var(--background, #fff);
|
|
787
|
-
color: var(--foreground, #161616);
|
|
786
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
787
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
788
788
|
}
|
|
789
789
|
|
|
790
790
|
.svc-logic-operator:focus {
|
|
791
|
-
outline: 1px dotted var(--primary, #19b394);
|
|
791
|
+
outline: 1px dotted var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
792
792
|
}
|
|
793
793
|
|
|
794
794
|
.sl-question.svc-logic-question--answered .svc-logic-operator {
|
|
795
|
-
color: var(--foreground, #161616);
|
|
795
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
796
796
|
}
|
|
797
797
|
|
|
798
798
|
.svc-logic-operator.svc-logic-operator:hover, .svc-logic-operator.svc-logic-operator:focus {
|
|
@@ -802,33 +802,33 @@ td.st-table__cell:first-of-type span {
|
|
|
802
802
|
}
|
|
803
803
|
|
|
804
804
|
.svc-logic-operator.svc-logic-operator--question {
|
|
805
|
-
background-color: var(--blue-light, rgba(67, 127, 217, 0.1));
|
|
805
|
+
background-color: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217, 0.1)));
|
|
806
806
|
}
|
|
807
807
|
.svc-logic-operator.svc-logic-operator--question:hover, .svc-logic-operator.svc-logic-operator--question:focus {
|
|
808
|
-
background-color: var(--blue, #437fd9);
|
|
808
|
+
background-color: var(--sjs-special-blue, #437fd9);
|
|
809
809
|
}
|
|
810
810
|
|
|
811
811
|
.svc-logic-operator.svc-logic-operator--conjunction,
|
|
812
812
|
.svc-logic-operator.svc-logic-operator--operator {
|
|
813
|
-
background-color: var(--yellow-light, rgba(255, 152, 20, 0.1));
|
|
813
|
+
background-color: var(--sjs-special-yellow-light, var(--yellow-light, rgba(255, 152, 20, 0.1)));
|
|
814
814
|
}
|
|
815
815
|
.svc-logic-operator.svc-logic-operator--conjunction:hover, .svc-logic-operator.svc-logic-operator--conjunction:focus,
|
|
816
816
|
.svc-logic-operator.svc-logic-operator--operator:hover,
|
|
817
817
|
.svc-logic-operator.svc-logic-operator--operator:focus {
|
|
818
|
-
background-color: var(--yellow, #ff9814);
|
|
818
|
+
background-color: var(--sjs-special-yellow, var(--yellow, #ff9814));
|
|
819
819
|
}
|
|
820
820
|
|
|
821
821
|
.svc-logic-operator.svc-logic-operator--action {
|
|
822
|
-
background-color: var(--red-light, rgba(
|
|
822
|
+
background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
|
|
823
823
|
}
|
|
824
824
|
.svc-logic-operator.svc-logic-operator--action:hover, .svc-logic-operator.svc-logic-operator--action:focus {
|
|
825
|
-
background-color: var(--red, #e60a3e);
|
|
825
|
+
background-color: var(--sjs-special-red, var(--red, #e60a3e));
|
|
826
826
|
}
|
|
827
827
|
|
|
828
828
|
.svc-logic-operator.svc-logic-operator--error {
|
|
829
|
-
background-color: var(--background, #fff);
|
|
830
|
-
color: var(--red, #e60a3e);
|
|
831
|
-
box-shadow: inset 0 0 0 2px var(--red, #e60a3e);
|
|
829
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
830
|
+
color: var(--sjs-special-red, var(--red, #e60a3e));
|
|
831
|
+
box-shadow: inset 0 0 0 2px var(--sjs-special-red, var(--red, #e60a3e));
|
|
832
832
|
}
|
|
833
833
|
|
|
834
834
|
.svc-logic-operator__error {
|
|
@@ -845,11 +845,11 @@ td.st-table__cell:first-of-type span {
|
|
|
845
845
|
|
|
846
846
|
.svc-logic-condition-remove.svc-icon-remove {
|
|
847
847
|
display: none;
|
|
848
|
-
width: calc(5 * var(--base-unit, 8px));
|
|
849
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
848
|
+
width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
849
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
850
850
|
background-repeat: no-repeat;
|
|
851
851
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A");
|
|
852
|
-
background-size: calc(3 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
852
|
+
background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
853
853
|
background-position: center;
|
|
854
854
|
}
|
|
855
855
|
|
|
@@ -860,11 +860,11 @@ td.st-table__cell:first-of-type span {
|
|
|
860
860
|
|
|
861
861
|
.svc-logic-condition-remove.svc-icon-remove:hover,
|
|
862
862
|
.svc-logic-condition-remove.svc-icon-remove:focus {
|
|
863
|
-
background-color: var(--red-light, rgba(
|
|
863
|
+
background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
|
|
864
864
|
}
|
|
865
865
|
|
|
866
866
|
.svc-logic-condition-remove-question {
|
|
867
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
867
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
868
868
|
}
|
|
869
869
|
|
|
870
870
|
.svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
|
|
@@ -877,13 +877,13 @@ td.st-table__cell:first-of-type span {
|
|
|
877
877
|
|
|
878
878
|
.svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn,
|
|
879
879
|
.svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn {
|
|
880
|
-
color: var(--foreground-light, #909090);
|
|
881
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
880
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
881
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
882
882
|
}
|
|
883
883
|
.svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover, .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:focus,
|
|
884
884
|
.svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover,
|
|
885
885
|
.svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:focus {
|
|
886
|
-
color: var(--primary-foreground, #fff);
|
|
886
|
+
color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
|
|
887
887
|
}
|
|
888
888
|
|
|
889
889
|
.svc-logic-tab__content.svc-logic-tab__empty {
|
|
@@ -894,24 +894,24 @@ td.st-table__cell:first-of-type span {
|
|
|
894
894
|
top: 35%;
|
|
895
895
|
}
|
|
896
896
|
.svc-logic-tab__content.svc-logic-tab__empty .svc-logic-tab__content-action {
|
|
897
|
-
width: calc(33 * var(--base-unit, 8px));
|
|
898
|
-
margin-top: calc(4 * var(--base-unit, 8px));
|
|
897
|
+
width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
898
|
+
margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
899
899
|
}
|
|
900
900
|
.svc-logic-tab__content .svc-logic-tab__content-action {
|
|
901
901
|
margin-left: 25%;
|
|
902
902
|
margin-right: 25%;
|
|
903
|
-
margin-bottom: calc(8 * var(--base-unit, 8px));
|
|
903
|
+
margin-bottom: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
904
904
|
}
|
|
905
905
|
.svc-logic-tab__content .svc-logic-tab__content-action--disabled {
|
|
906
906
|
cursor: default;
|
|
907
|
-
outline: solid calc(0.25 * var(--base-unit, 8px)) transparent;
|
|
907
|
+
outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
|
|
908
908
|
}
|
|
909
909
|
.svc-logic-tab__content .svc-logic-tab__content-action--disabled:focus, .svc-logic-tab__content .svc-logic-tab__content-action--disabled:hover {
|
|
910
|
-
background-color: var(--background, #fff);
|
|
911
|
-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
|
910
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
911
|
+
box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
|
|
912
912
|
}
|
|
913
913
|
.svc-logic-tab__content .svc-logic-tab__content-action--disabled .svc-text {
|
|
914
|
-
color: var(--foreground, #161616);
|
|
914
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
915
915
|
opacity: 0.25;
|
|
916
916
|
}
|
|
917
917
|
.svc-logic-tab__content .sd-paneldynamic__panel-wrapper--in-row {
|
|
@@ -933,7 +933,7 @@ td.st-table__cell:first-of-type span {
|
|
|
933
933
|
margin-top: 0;
|
|
934
934
|
}
|
|
935
935
|
.svc-logic-paneldynamic .sd-row__panel {
|
|
936
|
-
width: calc(100% - 5 * var(--base-unit, 8px));
|
|
936
|
+
width: calc(100% - 5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
937
937
|
}
|
|
938
938
|
|
|
939
939
|
.svc-logic-tab__content .svc-logic-paneldynamic .sd-row {
|
|
@@ -964,36 +964,36 @@ td.st-table__cell:first-of-type span {
|
|
|
964
964
|
}
|
|
965
965
|
|
|
966
966
|
.svc-logic-placeholder {
|
|
967
|
-
width: calc(78 * var(--base-unit, 8px));
|
|
967
|
+
width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
968
968
|
min-width: 100%;
|
|
969
969
|
max-width: 100%;
|
|
970
970
|
box-sizing: border-box;
|
|
971
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
972
|
-
background: var(--background, #fff);
|
|
973
|
-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
|
974
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
975
|
-
padding: calc(4 * var(--base-unit, 8px)) calc(5 * var(--base-unit, 8px)) calc(5 * var(--base-unit, 8px));
|
|
971
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
972
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
973
|
+
box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
|
|
974
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
975
|
+
padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
976
976
|
}
|
|
977
977
|
|
|
978
978
|
.svc-logic-placeholder__text {
|
|
979
979
|
font-family: var(--font-family);
|
|
980
980
|
font-style: normal;
|
|
981
981
|
font-weight: 400;
|
|
982
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
983
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
982
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
983
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
984
984
|
text-align: center;
|
|
985
|
-
color: var(--foreground-light, #909090);
|
|
985
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
986
986
|
display: block;
|
|
987
|
-
padding: calc(4 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
|
|
987
|
+
padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
988
988
|
}
|
|
989
989
|
|
|
990
990
|
.svc-logic-tab__leave-apply-button {
|
|
991
|
-
background-color: var(--red, #e60a3e);
|
|
991
|
+
background-color: var(--sjs-special-red, var(--red, #e60a3e));
|
|
992
992
|
}
|
|
993
993
|
svc-tab-designer {
|
|
994
994
|
width: 100%;
|
|
995
995
|
height: 100%;
|
|
996
|
-
background: var(--background-dim, #f3f3f3);
|
|
996
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
997
997
|
}
|
|
998
998
|
|
|
999
999
|
.svc-tab-designer {
|
|
@@ -1001,6 +1001,7 @@ svc-tab-designer {
|
|
|
1001
1001
|
flex-grow: 1;
|
|
1002
1002
|
height: 100%;
|
|
1003
1003
|
overflow-y: scroll;
|
|
1004
|
+
position: static;
|
|
1004
1005
|
}
|
|
1005
1006
|
|
|
1006
1007
|
.svc-tab-designer--with-place-holder .svc-tab-designer_content {
|
|
@@ -1010,7 +1011,7 @@ svc-tab-designer {
|
|
|
1010
1011
|
}
|
|
1011
1012
|
|
|
1012
1013
|
.svc-tab-designer--with-place-holder .svc-designer-header {
|
|
1013
|
-
min-width: calc(84 * var(--base-unit, 8px));
|
|
1014
|
+
min-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1014
1015
|
}
|
|
1015
1016
|
|
|
1016
1017
|
.svc-tab-designer .svc-designer-header .sd-container-modern__title {
|
|
@@ -1023,18 +1024,18 @@ svc-tab-designer {
|
|
|
1023
1024
|
display: flex;
|
|
1024
1025
|
}
|
|
1025
1026
|
.svc-tab-designer .sd-container-modern {
|
|
1026
|
-
min-width: calc(70 * var(--base-unit, 8px));
|
|
1027
|
+
min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1027
1028
|
width: 100%;
|
|
1028
1029
|
box-sizing: border-box;
|
|
1029
1030
|
margin-left: auto;
|
|
1030
1031
|
margin-right: auto;
|
|
1031
1032
|
}
|
|
1032
1033
|
.svc-tab-designer .sd-container-modern.sd-container-modern--static {
|
|
1033
|
-
max-width: calc(84 * var(--base-unit, 8px));
|
|
1034
|
+
max-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1034
1035
|
}
|
|
1035
1036
|
.svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
|
|
1036
1037
|
max-width: initial;
|
|
1037
|
-
padding: 0 calc(1 * var(--base-unit, 8px));
|
|
1038
|
+
padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1038
1039
|
}
|
|
1039
1040
|
.svc-tab-designer .sd-question.sd-question--image {
|
|
1040
1041
|
width: 100%;
|
|
@@ -1055,16 +1056,16 @@ svc-tab-designer {
|
|
|
1055
1056
|
flex-direction: column;
|
|
1056
1057
|
align-items: center;
|
|
1057
1058
|
justify-content: center;
|
|
1058
|
-
padding: calc(2 * var(--base-unit, 8px));
|
|
1059
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1059
1060
|
box-sizing: border-box;
|
|
1060
1061
|
}
|
|
1061
1062
|
|
|
1062
1063
|
.svc-designer-placeholder-page {
|
|
1063
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
1064
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1064
1065
|
}
|
|
1065
1066
|
|
|
1066
1067
|
.svc-designer-placeholder-page .svc-page__footer {
|
|
1067
|
-
width: calc(33 * var(--base-unit, 8px));
|
|
1068
|
+
width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1068
1069
|
margin: auto;
|
|
1069
1070
|
}
|
|
1070
1071
|
|
|
@@ -1072,9 +1073,9 @@ svc-tab-designer {
|
|
|
1072
1073
|
display: none;
|
|
1073
1074
|
}
|
|
1074
1075
|
.svc-creator--mobile .sd-root-modern {
|
|
1075
|
-
--sd-base-padding: calc(3 * var(--base-unit, 8px));
|
|
1076
|
-
--sd-base-vertical-padding: calc(2 * var(--base-unit, 8px));
|
|
1077
|
-
--sd-page-vertical-padding: calc(2 * var(--base-unit, 8px));
|
|
1076
|
+
--sd-base-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1077
|
+
--sd-base-vertical-padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1078
|
+
--sd-page-vertical-padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1078
1079
|
}
|
|
1079
1080
|
.svc-creator--mobile .svc-question__content .sd-question__content .sd-selectbase__column {
|
|
1080
1081
|
max-width: initial;
|
|
@@ -1082,10 +1083,10 @@ svc-tab-designer {
|
|
|
1082
1083
|
margin-left: 0;
|
|
1083
1084
|
}
|
|
1084
1085
|
.svc-creator--mobile .svc-question__content--selected .svc-rating-question-controls {
|
|
1085
|
-
bottom: calc(10 * var(--base-unit, 8px));
|
|
1086
|
+
bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1086
1087
|
}
|
|
1087
1088
|
.svc-creator--mobile .svc-page {
|
|
1088
|
-
margin-top: calc(1 * var(--base-unit, 8px));
|
|
1089
|
+
margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1089
1090
|
}
|
|
1090
1091
|
.svc-creator--mobile .svc-page__content {
|
|
1091
1092
|
padding-left: 0;
|
|
@@ -1093,23 +1094,23 @@ svc-tab-designer {
|
|
|
1093
1094
|
border: 0;
|
|
1094
1095
|
}
|
|
1095
1096
|
.svc-creator--mobile .svc-page__content .sd-page {
|
|
1096
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
1097
|
+
padding: calc(1 * 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)));
|
|
1097
1098
|
}
|
|
1098
1099
|
.svc-creator--mobile .svc-page__content .svc-page__footer {
|
|
1099
|
-
margin-left: calc(2 * var(--base-unit, 8px));
|
|
1100
|
-
margin-right: calc(2 * var(--base-unit, 8px));
|
|
1100
|
+
margin-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1101
|
+
margin-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1101
1102
|
}
|
|
1102
1103
|
.svc-creator--mobile .svc-question__content {
|
|
1103
|
-
padding: calc(2 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
1104
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1104
1105
|
}
|
|
1105
1106
|
.svc-creator--mobile .svc-question__content.svc-question__content--selected {
|
|
1106
|
-
padding-bottom: calc(8 * var(--base-unit, 8px));
|
|
1107
|
+
padding-bottom: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1107
1108
|
}
|
|
1108
1109
|
.svc-creator--mobile .svc-tab-designer {
|
|
1109
1110
|
justify-content: initial;
|
|
1110
1111
|
}
|
|
1111
1112
|
.svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title {
|
|
1112
|
-
padding: calc(2 * var(--base-unit, 8px));
|
|
1113
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1113
1114
|
flex-direction: column-reverse;
|
|
1114
1115
|
align-items: flex-start;
|
|
1115
1116
|
}
|
|
@@ -1117,31 +1118,31 @@ svc-tab-designer {
|
|
|
1117
1118
|
margin-top: 0;
|
|
1118
1119
|
}
|
|
1119
1120
|
.svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title .svc-logo-image-placeholder {
|
|
1120
|
-
margin-left: calc(-2 * var(--base-unit, 8px));
|
|
1121
|
+
margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1121
1122
|
}
|
|
1122
1123
|
.svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h3 {
|
|
1123
1124
|
margin: 0;
|
|
1124
|
-
font-size: calc(3 * var(--base-unit, 8px));
|
|
1125
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
1125
|
+
font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1126
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1126
1127
|
}
|
|
1127
1128
|
.svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h5 {
|
|
1128
1129
|
margin: 0;
|
|
1129
1130
|
}
|
|
1130
1131
|
.svc-creator--mobile .svc-tab-designer .sd-container-modern {
|
|
1131
|
-
min-width: calc(46 * var(--base-unit, 8px));
|
|
1132
|
+
min-width: calc(46 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1132
1133
|
}
|
|
1133
1134
|
.svc-creator--mobile .svc-properties-wrapper {
|
|
1134
1135
|
width: 100%;
|
|
1135
1136
|
}
|
|
1136
1137
|
.svc-creator--mobile .svc-question__content-actions {
|
|
1137
|
-
width: calc(100% - 3 * var(--base-unit, 8px));
|
|
1138
|
-
left: calc(2 * var(--base-unit, 8px));
|
|
1138
|
+
width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1139
|
+
left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1139
1140
|
}
|
|
1140
1141
|
.svc-creator--mobile .svc-question__content-actions .sv-action-bar-item {
|
|
1141
1142
|
border: 0;
|
|
1142
1143
|
}
|
|
1143
1144
|
.svc-creator--mobile .svc-page__content-actions .sv-action-bar {
|
|
1144
|
-
padding-right: calc(1 * var(--base-unit, 8px));
|
|
1145
|
+
padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1145
1146
|
}
|
|
1146
1147
|
.svc-creator--mobile .svc-page__content-actions .sv-action-bar .sv-action .sv-action__content {
|
|
1147
1148
|
padding-right: 0;
|
|
@@ -1152,7 +1153,7 @@ svc-tab-designer {
|
|
|
1152
1153
|
svc-tab-test {
|
|
1153
1154
|
width: 100%;
|
|
1154
1155
|
height: 100%;
|
|
1155
|
-
background: var(--background-dim, #f3f3f3);
|
|
1156
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
1156
1157
|
}
|
|
1157
1158
|
|
|
1158
1159
|
.svc-test-tab__content .svc-plugin-tab__content {
|
|
@@ -1162,13 +1163,13 @@ svc-tab-test {
|
|
|
1162
1163
|
.svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_completed_page {
|
|
1163
1164
|
margin: 0;
|
|
1164
1165
|
border: 0;
|
|
1165
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
1166
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
1166
1167
|
}
|
|
1167
1168
|
.svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_body {
|
|
1168
1169
|
border: 0;
|
|
1169
1170
|
}
|
|
1170
1171
|
.svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
|
|
1171
|
-
width: calc(33 * var(--base-unit, 8px));
|
|
1172
|
+
width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1172
1173
|
margin-left: auto;
|
|
1173
1174
|
margin-right: auto;
|
|
1174
1175
|
margin-bottom: 72px;
|
|
@@ -1176,7 +1177,7 @@ svc-tab-test {
|
|
|
1176
1177
|
}
|
|
1177
1178
|
|
|
1178
1179
|
.svc-creator-tab__content--with-toolbar.svc-test-tab__content .svc-plugin-tab__content {
|
|
1179
|
-
height: calc(100% - (6 * var(--base-unit, 8px)));
|
|
1180
|
+
height: calc(100% - (6 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
1180
1181
|
}
|
|
1181
1182
|
|
|
1182
1183
|
.svc-test-tab__content-actions {
|
|
@@ -1184,9 +1185,9 @@ svc-tab-test {
|
|
|
1184
1185
|
}
|
|
1185
1186
|
.svc-test-tab__content-actions .sv-action-bar {
|
|
1186
1187
|
padding: 0;
|
|
1187
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
1188
|
-
background: var(--background, #fff);
|
|
1189
|
-
border-top: 1px solid var(--border, #d6d6d6);
|
|
1188
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1189
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
1190
|
+
border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
1190
1191
|
width: 100%;
|
|
1191
1192
|
position: absolute;
|
|
1192
1193
|
}
|
|
@@ -1194,7 +1195,7 @@ svc-tab-test {
|
|
|
1194
1195
|
left: 0;
|
|
1195
1196
|
right: 0;
|
|
1196
1197
|
justify-content: center;
|
|
1197
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
1198
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1198
1199
|
}
|
|
1199
1200
|
.svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
|
|
1200
1201
|
padding: 0;
|
|
@@ -1203,13 +1204,13 @@ svc-tab-test {
|
|
|
1203
1204
|
margin: 0;
|
|
1204
1205
|
}
|
|
1205
1206
|
.svc-test-tab__content-actions .sv-action-bar-item {
|
|
1206
|
-
font-family: var(--font-family);
|
|
1207
|
+
font-family: var(--font-family, var(--font-family));
|
|
1207
1208
|
font-style: normal;
|
|
1208
1209
|
font-weight: 600;
|
|
1209
|
-
font-size: calc(
|
|
1210
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
1210
|
+
font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
1211
|
+
line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
1211
1212
|
width: 100%;
|
|
1212
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
1213
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1213
1214
|
}
|
|
1214
1215
|
.svc-test-tab__content-actions .svc-page-selector {
|
|
1215
1216
|
max-width: 50%;
|
|
@@ -1218,7 +1219,7 @@ svc-tab-test {
|
|
|
1218
1219
|
overflow: hidden;
|
|
1219
1220
|
white-space: nowrap;
|
|
1220
1221
|
text-overflow: ellipsis;
|
|
1221
|
-
color: var(--foreground, #161616);
|
|
1222
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
1222
1223
|
display: inline-block;
|
|
1223
1224
|
}
|
|
1224
1225
|
|
|
@@ -1226,8 +1227,8 @@ svc-tab-test {
|
|
|
1226
1227
|
font-family: var(--font-family);
|
|
1227
1228
|
font-style: normal;
|
|
1228
1229
|
font-weight: 400;
|
|
1229
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
1230
|
-
color: var(--foreground, #161616);
|
|
1230
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1231
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
1231
1232
|
width: 100%;
|
|
1232
1233
|
position: absolute;
|
|
1233
1234
|
top: 50%;
|
|
@@ -1242,34 +1243,34 @@ svc-tab-test {
|
|
|
1242
1243
|
|
|
1243
1244
|
.svc-notifier {
|
|
1244
1245
|
position: absolute;
|
|
1245
|
-
bottom: calc(1 * var(--base-unit, 8px));
|
|
1246
|
-
left: calc(1 * var(--base-unit, 8px));
|
|
1247
|
-
background: var(--background, #fff);
|
|
1246
|
+
bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1247
|
+
left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1248
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
1248
1249
|
opacity: 0;
|
|
1249
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
1250
|
-
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
|
|
1251
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
1252
|
-
color: var(--foreground, #161616);
|
|
1253
|
-
min-width: calc(30 * var(--base-unit, 8px));
|
|
1250
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1251
|
+
box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
|
|
1252
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1253
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
1254
|
+
min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1254
1255
|
text-align: center;
|
|
1255
1256
|
z-index: 1600;
|
|
1256
1257
|
visibility: hidden;
|
|
1257
|
-
font-family: var(--font-family);
|
|
1258
|
+
font-family: var(--font-family, var(--font-family));
|
|
1258
1259
|
font-style: normal;
|
|
1259
1260
|
font-weight: 600;
|
|
1260
|
-
font-size: calc(
|
|
1261
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
1261
|
+
font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
1262
|
+
line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
1262
1263
|
}
|
|
1263
1264
|
|
|
1264
1265
|
.svc-notifier.svc-notifier--error {
|
|
1265
|
-
background-color: var(--red, #e60a3e);
|
|
1266
|
+
background-color: var(--sjs-special-red, var(--red, #e60a3e));
|
|
1266
1267
|
color: #ffffff;
|
|
1267
1268
|
opacity: 1;
|
|
1268
1269
|
}
|
|
1269
1270
|
|
|
1270
1271
|
.svc-creator--mobile .svc-notifier {
|
|
1271
1272
|
left: 0;
|
|
1272
|
-
bottom: calc(6 * var(--base-unit, 8px));
|
|
1273
|
+
bottom: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1273
1274
|
width: 100%;
|
|
1274
1275
|
box-sizing: border-box;
|
|
1275
1276
|
opacity: 1;
|
|
@@ -1288,7 +1289,7 @@ survey-creator,
|
|
|
1288
1289
|
survey-creator *,
|
|
1289
1290
|
.svc-creator * {
|
|
1290
1291
|
scrollbar-width: thin;
|
|
1291
|
-
scrollbar-color: var(--border, #d6d6d6) transparent;
|
|
1292
|
+
scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
|
|
1292
1293
|
}
|
|
1293
1294
|
survey-creator ::-webkit-scrollbar,
|
|
1294
1295
|
.svc-creator ::-webkit-scrollbar {
|
|
@@ -1301,7 +1302,7 @@ survey-creator ::-webkit-scrollbar-thumb,
|
|
|
1301
1302
|
border: 4px solid rgba(0, 0, 0, 0);
|
|
1302
1303
|
background-clip: padding-box;
|
|
1303
1304
|
border-radius: 32px;
|
|
1304
|
-
background-color: var(--border, #d6d6d6);
|
|
1305
|
+
background-color: var(--sjs-border-default, var(--border, #d6d6d6));
|
|
1305
1306
|
}
|
|
1306
1307
|
survey-creator ::-webkit-scrollbar-track,
|
|
1307
1308
|
.svc-creator ::-webkit-scrollbar-track {
|
|
@@ -1310,7 +1311,7 @@ survey-creator ::-webkit-scrollbar-track,
|
|
|
1310
1311
|
survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
1311
1312
|
.svc-creator ::-webkit-scrollbar-thumb:hover {
|
|
1312
1313
|
border: 2px solid rgba(0, 0, 0, 0);
|
|
1313
|
-
background-color: var(--foreground-light, #909090);
|
|
1314
|
+
background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
1314
1315
|
}
|
|
1315
1316
|
|
|
1316
1317
|
.svc-creator__area {
|
|
@@ -1322,16 +1323,16 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1322
1323
|
}
|
|
1323
1324
|
|
|
1324
1325
|
.svc-creator__area.svc-creator__area--with-banner {
|
|
1325
|
-
height: calc(100% - (4 * var(--base-unit, 8px)));
|
|
1326
|
+
height: calc(100% - (4 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
1326
1327
|
}
|
|
1327
1328
|
|
|
1328
1329
|
.svc-creator__content-wrapper {
|
|
1329
1330
|
width: 100%;
|
|
1330
|
-
height: calc(100% - (8 * var(--base-unit, 8px)));
|
|
1331
|
+
height: calc(100% - (8 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
1331
1332
|
}
|
|
1332
1333
|
|
|
1333
1334
|
.svc-creator__content-wrapper--footer-toolbar {
|
|
1334
|
-
height: calc(100% - (6 * var(--base-unit, 8px)));
|
|
1335
|
+
height: calc(100% - (6 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
1335
1336
|
}
|
|
1336
1337
|
|
|
1337
1338
|
.svc-creator__content-holder {
|
|
@@ -1366,18 +1367,18 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1366
1367
|
|
|
1367
1368
|
.svc-plugin-tab__content-actions sv-action-bar {
|
|
1368
1369
|
padding: 0;
|
|
1369
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
1370
|
-
background: var(--background, #fff);
|
|
1371
|
-
border-top: 1px solid var(--border, #d6d6d6);
|
|
1370
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1371
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
1372
|
+
border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
1372
1373
|
}
|
|
1373
1374
|
|
|
1374
1375
|
.svc-creator__banner {
|
|
1375
1376
|
position: absolute;
|
|
1376
|
-
bottom: calc(-4 * var(--base-unit, 8px));
|
|
1377
|
+
bottom: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1377
1378
|
width: 100%;
|
|
1378
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
1379
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
1380
|
-
background-color: var(--secondary, #ff9814);
|
|
1379
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1380
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1381
|
+
background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
1381
1382
|
text-align: center;
|
|
1382
1383
|
overflow: hidden;
|
|
1383
1384
|
}
|
|
@@ -1388,31 +1389,31 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1388
1389
|
max-width: 0;
|
|
1389
1390
|
overflow: hidden;
|
|
1390
1391
|
height: 100%;
|
|
1391
|
-
background-color: var(--background, #fff);
|
|
1392
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
1392
1393
|
/* Shadow / Medium */
|
|
1393
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
1394
|
-
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
|
|
1394
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1395
|
+
box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
|
|
1395
1396
|
transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
|
|
1396
1397
|
}
|
|
1397
1398
|
|
|
1398
1399
|
.svc-creator__non-commercial-text {
|
|
1399
|
-
color: var(--primary-foreground, #fff);
|
|
1400
|
+
color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
|
|
1400
1401
|
font-family: var(--font-family);
|
|
1401
1402
|
font-weight: bold;
|
|
1402
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
1403
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1403
1404
|
text-transform: uppercase;
|
|
1404
1405
|
vertical-align: middle;
|
|
1405
1406
|
}
|
|
1406
1407
|
.svc-creator__non-commercial-text a {
|
|
1407
|
-
color: var(--primary-foreground, #fff);
|
|
1408
|
+
color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
|
|
1408
1409
|
text-decoration: none;
|
|
1409
1410
|
}
|
|
1410
1411
|
|
|
1411
1412
|
.sv-drag-drop-ghost {
|
|
1412
|
-
top: calc(0.75 * var(--base-unit, 8px));
|
|
1413
|
+
top: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1413
1414
|
width: 100%;
|
|
1414
|
-
height: calc(0.5 * var(--base-unit, 8px));
|
|
1415
|
-
background: var(--secondary, #ff9814);
|
|
1415
|
+
height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1416
|
+
background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
1416
1417
|
position: absolute;
|
|
1417
1418
|
}
|
|
1418
1419
|
|
|
@@ -1423,7 +1424,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1423
1424
|
|
|
1424
1425
|
.sv-drag-drop-ghost--item-value-bottom {
|
|
1425
1426
|
top: initial;
|
|
1426
|
-
bottom: calc(-0.5 * var(--base-unit, 8px));
|
|
1427
|
+
bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1427
1428
|
}
|
|
1428
1429
|
.sd-element__title .svc-string-editor {
|
|
1429
1430
|
display: inline-block;
|
|
@@ -1445,7 +1446,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1445
1446
|
}
|
|
1446
1447
|
.svc-string-editor .sv-string-editor[aria-placeholder]:empty:before {
|
|
1447
1448
|
content: attr(aria-placeholder);
|
|
1448
|
-
color: var(--foreground-light, #909090);
|
|
1449
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
1449
1450
|
}
|
|
1450
1451
|
.svc-string-editor .sv-string-editor--html,
|
|
1451
1452
|
.svc-string-editor .sv-string-editor:focus-within {
|
|
@@ -1476,12 +1477,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1476
1477
|
z-index: 20;
|
|
1477
1478
|
padding: 0px;
|
|
1478
1479
|
vertical-align: top;
|
|
1479
|
-
margin-inline-start: calc(2 * var(--base-unit, 8px));
|
|
1480
|
-
font-size: calc(1.5 * var(--base-unit, 8px));
|
|
1480
|
+
margin-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1481
|
+
font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1481
1482
|
font-family: var(--font-family);
|
|
1482
1483
|
font-weight: 400;
|
|
1483
|
-
color: var(--foreground-light, #909090);
|
|
1484
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
1484
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
1485
|
+
line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1485
1486
|
}
|
|
1486
1487
|
|
|
1487
1488
|
.svc-string-editor__border {
|
|
@@ -1495,9 +1496,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1495
1496
|
}
|
|
1496
1497
|
|
|
1497
1498
|
.svc-string-editor__error {
|
|
1498
|
-
margin-left: calc(1 * var(--base-unit, 8px));
|
|
1499
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
1500
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
1499
|
+
margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1500
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1501
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1501
1502
|
color: red;
|
|
1502
1503
|
display: none;
|
|
1503
1504
|
}
|
|
@@ -1506,9 +1507,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1506
1507
|
position: absolute;
|
|
1507
1508
|
left: 100%;
|
|
1508
1509
|
height: 100%;
|
|
1509
|
-
width: calc(2 * var(--base-unit, 8px));
|
|
1510
|
+
width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1510
1511
|
top: 0;
|
|
1511
|
-
padding-left: calc(2 * var(--base-unit, 8px));
|
|
1512
|
+
padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1512
1513
|
z-index: 12;
|
|
1513
1514
|
display: none;
|
|
1514
1515
|
align-items: center;
|
|
@@ -1521,13 +1522,13 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1521
1522
|
position: relative;
|
|
1522
1523
|
}
|
|
1523
1524
|
.svc-string-editor__button use {
|
|
1524
|
-
fill: var(--primary, #19b394);
|
|
1525
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1525
1526
|
}
|
|
1526
1527
|
|
|
1527
1528
|
.svc-string-editor__button--edit {
|
|
1528
|
-
height: calc(2 * var(--base-unit, 8px));
|
|
1529
|
-
width: calc(2 * var(--base-unit, 8px));
|
|
1530
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
1529
|
+
height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1530
|
+
width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1531
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1531
1532
|
}
|
|
1532
1533
|
.svc-string-editor__button--edit .sv-svg-icon {
|
|
1533
1534
|
vertical-align: bottom;
|
|
@@ -1544,26 +1545,26 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1544
1545
|
display: flex;
|
|
1545
1546
|
top: 0;
|
|
1546
1547
|
bottom: 0;
|
|
1547
|
-
left: calc(-0.5 * var(--base-unit, 8px));
|
|
1548
|
-
right: calc(-0.5 * var(--base-unit, 8px));
|
|
1548
|
+
left: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1549
|
+
right: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1549
1550
|
border-radius: 3px;
|
|
1550
|
-
box-shadow: 0px 0px 0px calc(0.25 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.16);
|
|
1551
|
+
box-shadow: 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.16);
|
|
1551
1552
|
}
|
|
1552
1553
|
|
|
1553
1554
|
.svc-string-editor:focus-within .svc-string-editor__border {
|
|
1554
1555
|
display: flex;
|
|
1555
|
-
top: calc(-0.5 * var(--base-unit, 8px));
|
|
1556
|
-
bottom: calc(-0.5 * var(--base-unit, 8px));
|
|
1557
|
-
left: calc(-1 * var(--base-unit, 8px));
|
|
1558
|
-
right: calc(-1 * var(--base-unit, 8px));
|
|
1556
|
+
top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1557
|
+
bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1558
|
+
left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1559
|
+
right: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1559
1560
|
border-radius: 3px;
|
|
1560
1561
|
box-sizing: content-box;
|
|
1561
|
-
background-color: var(--background, #fff);
|
|
1562
|
-
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1), 0px 0px 0px calc(0.25 * var(--base-unit, 8px)) var(--primary, #19b394);
|
|
1562
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
1563
|
+
box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1563
1564
|
}
|
|
1564
1565
|
|
|
1565
1566
|
.svc-string-editor.svc-string-editor--error:focus-within .svc-string-editor__border {
|
|
1566
|
-
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1), 0px 0px 0px calc(0.25 * var(--base-unit, 8px)) var(--red, #e60a3e);
|
|
1567
|
+
box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sjs-special-red, var(--red, #e60a3e));
|
|
1567
1568
|
}
|
|
1568
1569
|
|
|
1569
1570
|
.sd-boolean .sv-string-editor:focus-within {
|
|
@@ -1571,7 +1572,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1571
1572
|
}
|
|
1572
1573
|
|
|
1573
1574
|
.sd-rating .sd-rating__item:focus-within {
|
|
1574
|
-
border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
|
|
1575
|
+
border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1575
1576
|
}
|
|
1576
1577
|
.sd-rating:not(.sd-rating__min-text) .svc-string-editor:focus-within .svc-string-editor__border {
|
|
1577
1578
|
display: none;
|
|
@@ -1579,12 +1580,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1579
1580
|
|
|
1580
1581
|
.sd-table__cell--actions .svc-string-editor__button--done,
|
|
1581
1582
|
.sd-matrixdynamic__add-btn .svc-string-editor__button--done {
|
|
1582
|
-
width: calc(2 * var(--base-unit, 8px));
|
|
1583
|
+
width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1583
1584
|
}
|
|
1584
1585
|
|
|
1585
1586
|
.sd-table__cell--header .svc-matrix-cell:not(:focus):focus-within .svc-matrix-cell--selected {
|
|
1586
|
-
border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
|
|
1587
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
1587
|
+
border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1588
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1588
1589
|
display: block;
|
|
1589
1590
|
}
|
|
1590
1591
|
.sd-table__cell--header .svc-string-editor:focus-within .svc-string-editor__border {
|
|
@@ -1592,8 +1593,8 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1592
1593
|
}
|
|
1593
1594
|
|
|
1594
1595
|
.sd-item__control-label .svc-string-editor:focus-within .svc-string-editor__border {
|
|
1595
|
-
left: calc(-0.7 * var(--base-unit, 8px));
|
|
1596
|
-
right: calc(-0.7 * var(--base-unit, 8px));
|
|
1596
|
+
left: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1597
|
+
right: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1597
1598
|
}
|
|
1598
1599
|
|
|
1599
1600
|
.svc-string-editor:hover ~ .sd-question__required-text, .svc-string-editor:focus-within ~ .sd-question__required-text {
|
|
@@ -1602,56 +1603,56 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
|
|
|
1602
1603
|
.svc-btn {
|
|
1603
1604
|
display: flex;
|
|
1604
1605
|
align-items: center;
|
|
1605
|
-
height: calc(7 * var(--base-unit, 8px));
|
|
1606
|
-
line-height: calc(7 * var(--base-unit, 8px));
|
|
1606
|
+
height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1607
|
+
line-height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1607
1608
|
vertical-align: baseline;
|
|
1608
1609
|
text-align: center;
|
|
1609
|
-
background-color: var(--background, #fff);
|
|
1610
|
-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
|
1611
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
1610
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
1611
|
+
box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
|
|
1612
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1612
1613
|
cursor: pointer;
|
|
1613
1614
|
user-select: none;
|
|
1614
|
-
outline: solid calc(0.25 * var(--base-unit, 8px)) transparent;
|
|
1615
|
+
outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
|
|
1615
1616
|
}
|
|
1616
1617
|
.svc-btn .svc-text {
|
|
1617
1618
|
display: flex;
|
|
1618
1619
|
align-items: center;
|
|
1619
1620
|
flex-grow: 1;
|
|
1620
1621
|
justify-content: center;
|
|
1621
|
-
color: var(--primary, #19b394);
|
|
1622
|
+
color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1622
1623
|
}
|
|
1623
1624
|
|
|
1624
1625
|
.svc-btn:hover {
|
|
1625
|
-
background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
|
|
1626
|
+
background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
|
|
1626
1627
|
}
|
|
1627
1628
|
|
|
1628
1629
|
.svc-btn:focus {
|
|
1629
|
-
box-shadow: 0 0 0 2px var(--primary, #19b394);
|
|
1630
|
+
box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1630
1631
|
}
|
|
1631
1632
|
|
|
1632
1633
|
.svc-action-button {
|
|
1633
1634
|
display: inline-block;
|
|
1634
|
-
padding: calc(0.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
1635
|
+
padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1635
1636
|
box-sizing: border-box;
|
|
1636
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
1637
|
-
color: var(--primary, #19b394);
|
|
1637
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1638
|
+
color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1638
1639
|
font-weight: 600;
|
|
1639
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
1640
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
1641
|
-
border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
|
|
1640
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1641
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1642
|
+
border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
|
|
1642
1643
|
}
|
|
1643
1644
|
.svc-action-button:focus, .svc-action-button:hover {
|
|
1644
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
1645
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
1645
1646
|
outline: none;
|
|
1646
1647
|
}
|
|
1647
1648
|
|
|
1648
1649
|
.svc-action-button--selected {
|
|
1649
|
-
border-color: var(--primary, #19b394);
|
|
1650
|
+
border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1650
1651
|
}
|
|
1651
1652
|
|
|
1652
1653
|
.svc-action-button--disabled {
|
|
1653
1654
|
opacity: 0.25;
|
|
1654
|
-
color: var(--foreground, #161616);
|
|
1655
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
1655
1656
|
}
|
|
1656
1657
|
svc-page-navigator,
|
|
1657
1658
|
.svc-page-navigator {
|
|
@@ -1661,20 +1662,20 @@ svc-page-navigator,
|
|
|
1661
1662
|
|
|
1662
1663
|
.svc-page-navigator__navigator-icon {
|
|
1663
1664
|
display: block;
|
|
1664
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
1665
|
-
width: calc(3 * var(--base-unit, 8px));
|
|
1666
|
-
padding: calc(1.25 * var(--base-unit, 8px));
|
|
1665
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1666
|
+
width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1667
|
+
padding: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1667
1668
|
border-radius: 50%;
|
|
1668
1669
|
cursor: pointer;
|
|
1669
1670
|
}
|
|
1670
1671
|
.svc-page-navigator__navigator-icon use {
|
|
1671
|
-
fill: var(--foreground-light, #909090);
|
|
1672
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
1672
1673
|
}
|
|
1673
1674
|
|
|
1674
1675
|
.svc-page-navigator__selector {
|
|
1675
|
-
width: calc(5.5 * var(--base-unit, 8px));
|
|
1676
|
-
height: calc(5.5 * var(--base-unit, 8px));
|
|
1677
|
-
min-height: calc(5.5 * var(--base-unit, 8px));
|
|
1676
|
+
width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1677
|
+
height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1678
|
+
min-height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1678
1679
|
}
|
|
1679
1680
|
|
|
1680
1681
|
survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus,
|
|
@@ -1685,39 +1686,39 @@ survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-nav
|
|
|
1685
1686
|
survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon,
|
|
1686
1687
|
.svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon,
|
|
1687
1688
|
.svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon {
|
|
1688
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
1689
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
1689
1690
|
}
|
|
1690
1691
|
survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use,
|
|
1691
1692
|
.svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use,
|
|
1692
1693
|
.svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use {
|
|
1693
|
-
fill: var(--primary, #19b394);
|
|
1694
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1694
1695
|
}
|
|
1695
1696
|
|
|
1696
1697
|
.svc-page-navigator__selector--opened {
|
|
1697
1698
|
opacity: 0.5;
|
|
1698
1699
|
}
|
|
1699
1700
|
.svc-page-navigator__selector--opened .svc-page-navigator__navigator-icon {
|
|
1700
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
1701
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
1701
1702
|
}
|
|
1702
1703
|
.svc-page-navigator__selector--opened .svc-page-navigator__navigator-icon use {
|
|
1703
|
-
fill: var(--primary, #19b394);
|
|
1704
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1704
1705
|
}
|
|
1705
1706
|
|
|
1706
1707
|
.svc-page-navigator__popup {
|
|
1707
|
-
min-width: calc(12.5 * var(--base-unit, 8px));
|
|
1708
|
+
min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1708
1709
|
}
|
|
1709
1710
|
|
|
1710
1711
|
.svc-tab-designer--with-page-navigator .svc-tab-designer_content {
|
|
1711
|
-
margin-right: calc(6.5 * var(--base-unit, 8px));
|
|
1712
|
+
margin-right: calc(6.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1712
1713
|
}
|
|
1713
1714
|
|
|
1714
1715
|
.svc-tab-designer__page-navigator {
|
|
1715
|
-
width: calc(5.5 * var(--base-unit, 8px));
|
|
1716
|
+
width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1716
1717
|
position: absolute;
|
|
1717
|
-
padding: calc(16.5 * var(--base-unit, 8px)) 0;
|
|
1718
|
+
padding: calc(16.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
1718
1719
|
top: 0;
|
|
1719
1720
|
bottom: 0;
|
|
1720
|
-
right: calc(1 * var(--base-unit, 8px));
|
|
1721
|
+
right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1721
1722
|
}
|
|
1722
1723
|
|
|
1723
1724
|
.svc-creator__toolbox--right .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
|
|
@@ -1725,21 +1726,21 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
|
|
|
1725
1726
|
[style*="direction:rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
|
|
1726
1727
|
[style*="direction: rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
|
|
1727
1728
|
margin-right: 0;
|
|
1728
|
-
margin-left: calc(6.5 * var(--base-unit, 8px));
|
|
1729
|
+
margin-left: calc(6.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1729
1730
|
}
|
|
1730
1731
|
.svc-creator__toolbox--right .svc-tab-designer__page-navigator,
|
|
1731
1732
|
[dir=rtl] .svc-tab-designer__page-navigator,
|
|
1732
1733
|
[style*="direction:rtl"] .svc-tab-designer__page-navigator,
|
|
1733
1734
|
[style*="direction: rtl"] .svc-tab-designer__page-navigator {
|
|
1734
1735
|
right: unset;
|
|
1735
|
-
left: calc(1 * var(--base-unit, 8px));
|
|
1736
|
+
left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1736
1737
|
}
|
|
1737
1738
|
svc-page-navigator-item,
|
|
1738
1739
|
.svc-page-navigator-item {
|
|
1739
1740
|
display: block;
|
|
1740
|
-
width: calc(5.5 * var(--base-unit, 8px));
|
|
1741
|
-
height: calc(4.5 * var(--base-unit, 8px));
|
|
1742
|
-
min-height: calc(4.5 * var(--base-unit, 8px));
|
|
1741
|
+
width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1742
|
+
height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1743
|
+
min-height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1743
1744
|
cursor: pointer;
|
|
1744
1745
|
position: relative;
|
|
1745
1746
|
}
|
|
@@ -1776,26 +1777,26 @@ svc-page-navigator-item,
|
|
|
1776
1777
|
height: 6px;
|
|
1777
1778
|
right: calc(50% - 3px);
|
|
1778
1779
|
top: calc(50% - 3px);
|
|
1779
|
-
background: var(--border, #d6d6d6);
|
|
1780
|
+
background: var(--sjs-border-default, var(--border, #d6d6d6));
|
|
1780
1781
|
}
|
|
1781
1782
|
|
|
1782
1783
|
.svc-page-navigator-item--selected .svc-page-navigator-item__dot {
|
|
1783
|
-
width: calc(1 * var(--base-unit, 8px));
|
|
1784
|
-
height: calc(1 * var(--base-unit, 8px));
|
|
1785
|
-
right: calc(50% - 1.5 * var(--base-unit, 8px) / 2);
|
|
1786
|
-
top: calc(50% - 1.5 * var(--base-unit, 8px) / 2);
|
|
1787
|
-
background: var(--background, #fff);
|
|
1788
|
-
border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
|
|
1784
|
+
width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1785
|
+
height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1786
|
+
right: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
|
|
1787
|
+
top: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
|
|
1788
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
1789
|
+
border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1789
1790
|
}
|
|
1790
1791
|
|
|
1791
1792
|
.svc-page-navigator-item__banner {
|
|
1792
1793
|
overflow: hidden;
|
|
1793
1794
|
white-space: nowrap;
|
|
1794
1795
|
text-overflow: ellipsis;
|
|
1795
|
-
right: calc(0.5 * var(--base-unit, 8px));
|
|
1796
|
+
right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1796
1797
|
display: flex;
|
|
1797
1798
|
align-items: center;
|
|
1798
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
1799
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1799
1800
|
animation: 0.5s ease-in;
|
|
1800
1801
|
padding: 0;
|
|
1801
1802
|
opacity: 0;
|
|
@@ -1804,8 +1805,8 @@ svc-page-navigator-item,
|
|
|
1804
1805
|
.svc-page-navigator-item__banner .svc-page-navigator-item__dot {
|
|
1805
1806
|
position: absolute;
|
|
1806
1807
|
display: inline-block;
|
|
1807
|
-
top: calc(1.75 * var(--base-unit, 8px));
|
|
1808
|
-
right: calc(1.75 * var(--base-unit, 8px));
|
|
1808
|
+
top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1809
|
+
right: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1809
1810
|
}
|
|
1810
1811
|
|
|
1811
1812
|
.svc-creator__toolbox--right .svc-page-navigator-item__banner,
|
|
@@ -1820,20 +1821,20 @@ svc-page-navigator-item,
|
|
|
1820
1821
|
[style*="direction:rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot,
|
|
1821
1822
|
[style*="direction: rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
|
|
1822
1823
|
right: unset;
|
|
1823
|
-
left: calc(1.75 * var(--base-unit, 8px));
|
|
1824
|
+
left: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1824
1825
|
}
|
|
1825
1826
|
|
|
1826
1827
|
.svc-page-navigator-item-content:not(.svc-page-navigator-item--disabled) .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
|
|
1827
|
-
width: calc(1 * var(--base-unit, 8px));
|
|
1828
|
-
height: calc(1 * var(--base-unit, 8px));
|
|
1828
|
+
width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1829
|
+
height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1829
1830
|
border: none;
|
|
1830
|
-
background: var(--primary, #19b394);
|
|
1831
|
+
background: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
1831
1832
|
}
|
|
1832
1833
|
|
|
1833
1834
|
.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
|
|
1834
1835
|
.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
|
|
1835
|
-
padding: 0 calc(4.5 * var(--base-unit, 8px)) 0 calc(2.5 * var(--base-unit, 8px));
|
|
1836
|
-
max-width: calc(25 * var(--base-unit, 8px));
|
|
1836
|
+
padding: 0 calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1837
|
+
max-width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1837
1838
|
opacity: 1;
|
|
1838
1839
|
}
|
|
1839
1840
|
|
|
@@ -1845,11 +1846,11 @@ svc-page-navigator-item,
|
|
|
1845
1846
|
[style*="direction:rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner,
|
|
1846
1847
|
[style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
|
|
1847
1848
|
[style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
|
|
1848
|
-
padding: 0 calc(2.5 * var(--base-unit, 8px)) 0 calc(4.5 * var(--base-unit, 8px));
|
|
1849
|
+
padding: 0 calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1849
1850
|
}
|
|
1850
1851
|
|
|
1851
1852
|
.svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
|
|
1852
|
-
color: var(--foreground, #161616);
|
|
1853
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
1853
1854
|
opacity: 0.25;
|
|
1854
1855
|
}
|
|
1855
1856
|
svc-page {
|
|
@@ -1857,48 +1858,48 @@ svc-page {
|
|
|
1857
1858
|
}
|
|
1858
1859
|
|
|
1859
1860
|
.svc-page {
|
|
1860
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
1861
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1861
1862
|
}
|
|
1862
1863
|
.svc-page .sd-page__title {
|
|
1863
|
-
margin: calc(2.5 * var(--base-unit, 8px)) 0 0 0;
|
|
1864
|
+
margin: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 0 0;
|
|
1864
1865
|
}
|
|
1865
1866
|
|
|
1866
1867
|
.svc-page__content {
|
|
1867
1868
|
position: relative;
|
|
1868
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(0 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
1869
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1869
1870
|
box-sizing: border-box;
|
|
1870
1871
|
width: 100%;
|
|
1871
1872
|
outline: none;
|
|
1872
1873
|
}
|
|
1873
1874
|
.svc-page__content .sd-page {
|
|
1874
1875
|
margin: 0;
|
|
1875
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
1876
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1876
1877
|
}
|
|
1877
1878
|
|
|
1878
1879
|
.svc-page__content-actions {
|
|
1879
1880
|
position: absolute;
|
|
1880
1881
|
display: none;
|
|
1881
|
-
top: calc(1 * var(--base-unit, 8px));
|
|
1882
|
+
top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1882
1883
|
inset-inline-end: 0;
|
|
1883
|
-
padding: 0 calc(1.5 * var(--base-unit, 8px));
|
|
1884
|
+
padding: 0 calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1884
1885
|
z-index: 1;
|
|
1885
1886
|
}
|
|
1886
1887
|
|
|
1887
1888
|
.svc-page__content:not(.svc-page__content--new):focus,
|
|
1888
1889
|
.svc-hovered.svc-page__content:not(.svc-page__content--new) {
|
|
1889
|
-
background: var(--secondary-
|
|
1890
|
+
background: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
|
|
1890
1891
|
}
|
|
1891
1892
|
|
|
1892
1893
|
.svc-creator .svc-page .svc-page__content--selected,
|
|
1893
1894
|
.svc-creator .svc-page .svc-page__content--selected:focus,
|
|
1894
1895
|
.svc-hovered {
|
|
1895
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
1896
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1896
1897
|
}
|
|
1897
1898
|
.svc-creator .svc-page .svc-page__content--selected.svc-page__content--selected,
|
|
1898
1899
|
.svc-creator .svc-page .svc-page__content--selected:focus.svc-page__content--selected,
|
|
1899
1900
|
.svc-hovered.svc-page__content--selected {
|
|
1900
|
-
box-shadow: 0 0 0 2px var(--secondary, #ff9814) inset;
|
|
1901
|
-
background: var(--secondary-
|
|
1901
|
+
box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor, var(--secondary, #ff9814)) inset;
|
|
1902
|
+
background: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
|
|
1902
1903
|
}
|
|
1903
1904
|
.svc-creator .svc-page .svc-page__content--selected.svc-page__content--selected .svc-page__content-actions,
|
|
1904
1905
|
.svc-creator .svc-page .svc-page__content--selected:focus.svc-page__content--selected .svc-page__content-actions,
|
|
@@ -1908,9 +1909,9 @@ svc-page {
|
|
|
1908
1909
|
|
|
1909
1910
|
.svc-page__footer {
|
|
1910
1911
|
overflow: visible;
|
|
1911
|
-
margin-left: calc(3 * var(--base-unit, 8px));
|
|
1912
|
-
margin-right: calc(3 * var(--base-unit, 8px));
|
|
1913
|
-
gap: calc(2 * var(--base-unit, 8px));
|
|
1912
|
+
margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1913
|
+
margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1914
|
+
gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1914
1915
|
}
|
|
1915
1916
|
.svc-page__footer .sv-action {
|
|
1916
1917
|
flex: 1 1 0;
|
|
@@ -1921,38 +1922,38 @@ svc-page {
|
|
|
1921
1922
|
}
|
|
1922
1923
|
|
|
1923
1924
|
.svc-page__add-new-question .svc-text {
|
|
1924
|
-
margin-left: calc(6 * var(--base-unit, 8px));
|
|
1925
|
+
margin-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1925
1926
|
}
|
|
1926
1927
|
|
|
1927
1928
|
.svc-page__question-type-selector {
|
|
1928
1929
|
appearance: none;
|
|
1929
1930
|
display: flex;
|
|
1930
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
1931
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
1931
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1932
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1932
1933
|
box-sizing: border-box;
|
|
1933
1934
|
border: none;
|
|
1934
1935
|
border-radius: 2px;
|
|
1935
1936
|
background-color: transparent;
|
|
1936
1937
|
cursor: pointer;
|
|
1937
|
-
margin-inline-end: calc(1 * var(--base-unit, 8px));
|
|
1938
|
+
margin-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1938
1939
|
outline: none;
|
|
1939
1940
|
}
|
|
1940
1941
|
.svc-page__question-type-selector use {
|
|
1941
|
-
fill: var(--foreground-light, #909090);
|
|
1942
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
1942
1943
|
}
|
|
1943
1944
|
.svc-page__question-type-selector:hover {
|
|
1944
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
1945
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
1945
1946
|
}
|
|
1946
1947
|
.svc-page__question-type-selector:focus {
|
|
1947
|
-
background-color: var(--sjs-primary-backcolor-light, rgba(25, 179, 148, 0.1));
|
|
1948
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
1948
1949
|
}
|
|
1949
1950
|
|
|
1950
1951
|
.svc-page--drag-over-empty:after {
|
|
1951
1952
|
content: " ";
|
|
1952
1953
|
position: absolute;
|
|
1953
|
-
background: var(--secondary, #ff9814);
|
|
1954
|
-
left: calc(3 * var(--base-unit, 8px));
|
|
1955
|
-
bottom: calc(11 * var(--base-unit, 8px));
|
|
1954
|
+
background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
1955
|
+
left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1956
|
+
bottom: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1956
1957
|
width: calc(100% - 48px);
|
|
1957
1958
|
height: 4px;
|
|
1958
1959
|
}
|
|
@@ -1967,15 +1968,15 @@ svc-page {
|
|
|
1967
1968
|
|
|
1968
1969
|
.svc-row .sd-row--multiple {
|
|
1969
1970
|
overflow: auto;
|
|
1970
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
1971
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
1972
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
1971
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1972
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1973
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1973
1974
|
margin-left: 0;
|
|
1974
1975
|
width: 100%;
|
|
1975
1976
|
flex-wrap: nowrap;
|
|
1976
|
-
background: var(--background, #fff);
|
|
1977
|
-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
|
1978
|
-
border-radius:
|
|
1977
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
1978
|
+
box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
|
|
1979
|
+
border-radius: calc(1 * var(--sjs-corner-radius, 4px));
|
|
1979
1980
|
}
|
|
1980
1981
|
.svc-row .sd-row--multiple > div {
|
|
1981
1982
|
padding-left: 0;
|
|
@@ -1985,7 +1986,7 @@ svc-page {
|
|
|
1985
1986
|
}
|
|
1986
1987
|
|
|
1987
1988
|
.sd-panel .svc-row .sd-row--multiple {
|
|
1988
|
-
padding: calc(0 * var(--base-unit, 8px));
|
|
1989
|
+
padding: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
1989
1990
|
box-shadow: none;
|
|
1990
1991
|
border-radius: 0;
|
|
1991
1992
|
padding: 2px;
|
|
@@ -1998,12 +1999,12 @@ svc-page {
|
|
|
1998
1999
|
box-shadow: none;
|
|
1999
2000
|
}
|
|
2000
2001
|
.svc-row.svc-row--ghost .sd-row {
|
|
2001
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
2002
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2002
2003
|
}
|
|
2003
2004
|
.svc-row.svc-row--ghost:last-child .sd-row {
|
|
2004
2005
|
height: initial;
|
|
2005
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
2006
|
-
margin-bottom: calc(2 * var(--base-unit, 8px));
|
|
2006
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2007
|
+
margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2007
2008
|
}
|
|
2008
2009
|
.svc-row.svc-row--ghost + .svc-row .sd-page__row {
|
|
2009
2010
|
margin-top: 0;
|
|
@@ -2011,15 +2012,15 @@ svc-page {
|
|
|
2011
2012
|
|
|
2012
2013
|
.svc-panel .svc-row.svc-row--ghost.svc-row.svc-row--ghost .sd-row {
|
|
2013
2014
|
height: initial;
|
|
2014
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
2015
|
-
margin-bottom: calc(2 * var(--base-unit, 8px));
|
|
2015
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2016
|
+
margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2016
2017
|
}
|
|
2017
2018
|
|
|
2018
2019
|
.svc-row--drag-over-top:before {
|
|
2019
2020
|
content: " ";
|
|
2020
2021
|
position: absolute;
|
|
2021
2022
|
left: 0;
|
|
2022
|
-
background: var(--secondary, #ff9814);
|
|
2023
|
+
background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2023
2024
|
top: 6px;
|
|
2024
2025
|
width: 100%;
|
|
2025
2026
|
height: 4px;
|
|
@@ -2029,7 +2030,7 @@ svc-page {
|
|
|
2029
2030
|
content: " ";
|
|
2030
2031
|
position: absolute;
|
|
2031
2032
|
left: 0;
|
|
2032
|
-
background: var(--secondary, #ff9814);
|
|
2033
|
+
background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2033
2034
|
bottom: -10px;
|
|
2034
2035
|
width: 100%;
|
|
2035
2036
|
height: 4px;
|
|
@@ -2046,13 +2047,13 @@ svc-page {
|
|
|
2046
2047
|
.svc-carry-forward-panel {
|
|
2047
2048
|
box-sizing: border-box;
|
|
2048
2049
|
width: 100%;
|
|
2049
|
-
padding: calc(4 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
|
|
2050
|
-
border-radius: calc(1 * var(--base-unit, 8px));
|
|
2050
|
+
padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2051
|
+
border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2051
2052
|
background-color: #F8F8F8;
|
|
2052
2053
|
text-align: center;
|
|
2053
2054
|
font-weight: 400;
|
|
2054
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
2055
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
2055
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2056
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2056
2057
|
color: rgba(0, 0, 0, 0.45);
|
|
2057
2058
|
}
|
|
2058
2059
|
|
|
@@ -2100,19 +2101,19 @@ svc-question {
|
|
|
2100
2101
|
position: relative;
|
|
2101
2102
|
width: 100%;
|
|
2102
2103
|
height: 100%;
|
|
2103
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
2104
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2104
2105
|
box-sizing: border-box;
|
|
2105
|
-
padding: calc(4 * var(--base-unit, 8px)) calc(5 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
|
|
2106
|
-
background: var(--background, #fff);
|
|
2107
|
-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
|
2106
|
+
padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2107
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
2108
|
+
box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
|
|
2108
2109
|
border: 2px solid transparent;
|
|
2109
2110
|
outline: none;
|
|
2110
2111
|
}
|
|
2111
2112
|
|
|
2112
2113
|
.svc-question__content .sd-selectbase:not(.sd-imagepicker) {
|
|
2113
2114
|
overflow-x: auto;
|
|
2114
|
-
padding-left: calc(5 * var(--base-unit, 8px));
|
|
2115
|
-
margin-left: calc(-5 * var(--base-unit, 8px));
|
|
2115
|
+
padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2116
|
+
margin-left: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2116
2117
|
}
|
|
2117
2118
|
.svc-question__content .sd-table .sd-selectbase:not(.sd-imagepicker) {
|
|
2118
2119
|
overflow-x: visible;
|
|
@@ -2120,13 +2121,13 @@ svc-question {
|
|
|
2120
2121
|
margin-left: 0;
|
|
2121
2122
|
}
|
|
2122
2123
|
.svc-question__content .sd-multipletext__item-title {
|
|
2123
|
-
color: var(--foreground, #161616);
|
|
2124
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
2124
2125
|
}
|
|
2125
2126
|
.svc-question__content .sd-multipletext__item-container.sd-input:focus-within {
|
|
2126
|
-
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
|
|
2127
|
+
box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
|
|
2127
2128
|
}
|
|
2128
2129
|
.svc-question__content .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
|
|
2129
|
-
color: var(--foreground, #161616);
|
|
2130
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
2130
2131
|
opacity: 0.25;
|
|
2131
2132
|
}
|
|
2132
2133
|
|
|
@@ -2135,18 +2136,18 @@ svc-question {
|
|
|
2135
2136
|
}
|
|
2136
2137
|
|
|
2137
2138
|
.svc-panel__placeholder {
|
|
2138
|
-
color: var(--foreground-light, #909090);
|
|
2139
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2139
2140
|
}
|
|
2140
2141
|
|
|
2141
2142
|
.svc-question__content-actions {
|
|
2142
2143
|
position: absolute;
|
|
2143
2144
|
display: none;
|
|
2144
|
-
bottom: calc(2 * var(--base-unit, 8px));
|
|
2145
|
-
inset-inline-start: calc(4 * var(--base-unit, 8px));
|
|
2146
|
-
inset-inline-end: calc(3.5 * var(--base-unit, 8px));
|
|
2145
|
+
bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2146
|
+
inset-inline-start: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2147
|
+
inset-inline-end: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2147
2148
|
}
|
|
2148
2149
|
.svc-question__content-actions .sv-action--convertTo {
|
|
2149
|
-
min-width: calc(13 * var(--base-unit, 8px));
|
|
2150
|
+
min-width: calc(13 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2150
2151
|
max-width: max-content;
|
|
2151
2152
|
}
|
|
2152
2153
|
.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item {
|
|
@@ -2162,7 +2163,7 @@ svc-question {
|
|
|
2162
2163
|
}
|
|
2163
2164
|
.svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title--with-icon {
|
|
2164
2165
|
margin-inline-start: 0;
|
|
2165
|
-
margin-inline-end: calc(0.5 * var(--base-unit, 8px));
|
|
2166
|
+
margin-inline-end: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2166
2167
|
}
|
|
2167
2168
|
.svc-question__content-actions .sv-action--convertTo.sv-action--hidden {
|
|
2168
2169
|
min-width: 0;
|
|
@@ -2173,12 +2174,12 @@ svc-question {
|
|
|
2173
2174
|
|
|
2174
2175
|
.svc-question__content:focus,
|
|
2175
2176
|
.svc-creator .svc-page .svc-hovered > .svc-question__content {
|
|
2176
|
-
box-shadow: 0 0 0 2px var(--secondary-light, rgba(255, 152, 20, 0.25));
|
|
2177
|
+
box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
|
|
2177
2178
|
}
|
|
2178
2179
|
|
|
2179
2180
|
.svc-creator .svc-page .svc-question__content--selected:not(.svc-question__content--dragged).svc-question__content--selected,
|
|
2180
2181
|
.svc-creator:not(.svc-creator--mobile) .svc-page .svc-hovered > .svc-question__content:not(.svc-question__content--dragged).svc-question__content--selected {
|
|
2181
|
-
box-shadow: 0 0 0 2px var(--secondary, #ff9814);
|
|
2182
|
+
box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2182
2183
|
}
|
|
2183
2184
|
.svc-creator .svc-page .svc-question__content--selected:not(.svc-question__content--dragged) > .svc-question__content-actions,
|
|
2184
2185
|
.svc-creator:not(.svc-creator--mobile) .svc-page .svc-hovered > .svc-question__content:not(.svc-question__content--dragged) > .svc-question__content-actions {
|
|
@@ -2186,31 +2187,31 @@ svc-question {
|
|
|
2186
2187
|
}
|
|
2187
2188
|
|
|
2188
2189
|
.svc-question__content--dragged {
|
|
2189
|
-
background: var(--background-
|
|
2190
|
+
background: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
|
|
2190
2191
|
}
|
|
2191
2192
|
.svc-question__content--dragged .sd-question__title {
|
|
2192
|
-
color: var(--foreground-light, #909090);
|
|
2193
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2193
2194
|
}
|
|
2194
2195
|
.svc-question__content--dragged.svc-question__content--selected .svc-question__content-actions {
|
|
2195
2196
|
display: none;
|
|
2196
2197
|
}
|
|
2197
2198
|
|
|
2198
2199
|
.svc-question__content .sd-question.sd-question--table {
|
|
2199
|
-
margin-top: calc(-1 * var(--base-unit, 8px));
|
|
2200
|
-
padding-top: calc(1 * var(--base-unit, 8px));
|
|
2200
|
+
margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2201
|
+
padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2201
2202
|
}
|
|
2202
2203
|
|
|
2203
2204
|
.svc-dragged-element-shortcut {
|
|
2204
2205
|
min-width: 100px;
|
|
2205
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
2206
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
2207
|
-
background-color: var(--background, #fff);
|
|
2208
|
-
color: var(--foreground, #161616);
|
|
2209
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
|
|
2206
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2207
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2208
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
2209
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
2210
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2210
2211
|
cursor: grabbing;
|
|
2211
2212
|
position: absolute;
|
|
2212
2213
|
z-index: 1000;
|
|
2213
|
-
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
|
|
2214
|
+
box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
|
|
2214
2215
|
-moz-user-select: none;
|
|
2215
2216
|
-webkit-user-select: none;
|
|
2216
2217
|
-ms-user-select: none;
|
|
@@ -2222,33 +2223,33 @@ svc-question {
|
|
|
2222
2223
|
}
|
|
2223
2224
|
|
|
2224
2225
|
.svc-dragged-element-shortcut .sv-svg-icon use {
|
|
2225
|
-
fill: var(--primary, #19b394);
|
|
2226
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
2226
2227
|
}
|
|
2227
2228
|
|
|
2228
2229
|
.svc-dragged-element-shortcut--selected {
|
|
2229
|
-
border: 2px solid var(--secondary, #ff9814);
|
|
2230
|
+
border: 2px solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2230
2231
|
}
|
|
2231
2232
|
|
|
2232
2233
|
.svc-dragged-element-shortcut__text {
|
|
2233
|
-
font-family: var(--font-family);
|
|
2234
|
+
font-family: var(--font-family, var(--font-family));
|
|
2234
2235
|
font-style: normal;
|
|
2235
2236
|
font-weight: 600;
|
|
2236
|
-
font-size: calc(
|
|
2237
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
2238
|
-
margin-left: calc(4 * var(--base-unit, 8px));
|
|
2239
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
2237
|
+
font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
2238
|
+
line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
2239
|
+
margin-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2240
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2240
2241
|
}
|
|
2241
2242
|
|
|
2242
2243
|
.svc-dragged-element-shortcut__icon {
|
|
2243
2244
|
position: absolute;
|
|
2244
|
-
width: calc(3 * var(--base-unit, 8px));
|
|
2245
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
2245
|
+
width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2246
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2246
2247
|
}
|
|
2247
2248
|
|
|
2248
2249
|
.svc-question__content--drag-over-inside .svc-panel__placeholder_frame,
|
|
2249
2250
|
.svc-hovered > .svc-question__content--drag-over-inside .svc-panel__placeholder_frame {
|
|
2250
|
-
box-shadow: 0 0 0 2px var(--primary, #19b394);
|
|
2251
|
-
background: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
2251
|
+
box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
2252
|
+
background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
2252
2253
|
}
|
|
2253
2254
|
.svc-question__content--drag-over-inside .svc-panel__placeholder_frame > .svc-question__content-actions,
|
|
2254
2255
|
.svc-hovered > .svc-question__content--drag-over-inside .svc-panel__placeholder_frame > .svc-question__content-actions {
|
|
@@ -2259,7 +2260,7 @@ svc-question {
|
|
|
2259
2260
|
content: " ";
|
|
2260
2261
|
position: absolute;
|
|
2261
2262
|
left: -7px;
|
|
2262
|
-
background: var(--secondary, #ff9814);
|
|
2263
|
+
background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2263
2264
|
top: 0;
|
|
2264
2265
|
height: 100%;
|
|
2265
2266
|
width: 4px;
|
|
@@ -2269,7 +2270,7 @@ svc-question {
|
|
|
2269
2270
|
content: " ";
|
|
2270
2271
|
position: absolute;
|
|
2271
2272
|
right: -7px;
|
|
2272
|
-
background: var(--secondary, #ff9814);
|
|
2273
|
+
background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2273
2274
|
top: 0;
|
|
2274
2275
|
height: 100%;
|
|
2275
2276
|
width: 4px;
|
|
@@ -2279,7 +2280,7 @@ svc-question {
|
|
|
2279
2280
|
content: " ";
|
|
2280
2281
|
position: absolute;
|
|
2281
2282
|
left: 0;
|
|
2282
|
-
background: var(--secondary, #ff9814);
|
|
2283
|
+
background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2283
2284
|
top: -12px;
|
|
2284
2285
|
width: 100%;
|
|
2285
2286
|
height: 4px;
|
|
@@ -2289,7 +2290,7 @@ svc-question {
|
|
|
2289
2290
|
content: " ";
|
|
2290
2291
|
position: absolute;
|
|
2291
2292
|
left: 0;
|
|
2292
|
-
background: var(--secondary, #ff9814);
|
|
2293
|
+
background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2293
2294
|
bottom: -12px;
|
|
2294
2295
|
width: 100%;
|
|
2295
2296
|
height: 4px;
|
|
@@ -2374,7 +2375,7 @@ svc-question .sv-action-bar,
|
|
|
2374
2375
|
top: 0;
|
|
2375
2376
|
left: 0;
|
|
2376
2377
|
visibility: hidden;
|
|
2377
|
-
height: calc(3.5 * var(--base-unit, 8px));
|
|
2378
|
+
height: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2378
2379
|
width: 100%;
|
|
2379
2380
|
display: flex;
|
|
2380
2381
|
align-items: center;
|
|
@@ -2383,16 +2384,16 @@ svc-question .sv-action-bar,
|
|
|
2383
2384
|
|
|
2384
2385
|
.svc-question__drag-element {
|
|
2385
2386
|
width: 100%;
|
|
2386
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
2387
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2387
2388
|
opacity: 0.5;
|
|
2388
2389
|
}
|
|
2389
2390
|
.svc-question__drag-element use {
|
|
2390
|
-
fill: var(--foreground-light, #909090);
|
|
2391
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2391
2392
|
}
|
|
2392
2393
|
|
|
2393
2394
|
.sd-panel :not(.svc-hovered) > .svc-question__content:not(.svc-question__content--selected),
|
|
2394
2395
|
.sd-row--multiple :not(.svc-hovered) > .svc-question__content:not(.svc-question__content--selected) {
|
|
2395
|
-
border: 1px dashed var(--border, #d6d6d6);
|
|
2396
|
+
border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
|
|
2396
2397
|
box-shadow: none;
|
|
2397
2398
|
}
|
|
2398
2399
|
.sd-panel .svc-question__content,
|
|
@@ -2410,8 +2411,8 @@ svc-question .sv-action-bar,
|
|
|
2410
2411
|
box-shadow: none;
|
|
2411
2412
|
}
|
|
2412
2413
|
.sd-row--multiple .svc-hovered > .svc-question__content:not(.svc-question__content--selected) {
|
|
2413
|
-
border: 1px solid var(--secondary-light, rgba(255, 152, 20, 0.25));
|
|
2414
|
-
box-shadow: 0 0 0 1px var(--secondary-light, rgba(255, 152, 20, 0.25));
|
|
2414
|
+
border: 1px solid var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
|
|
2415
|
+
box-shadow: 0 0 0 1px var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
|
|
2415
2416
|
}
|
|
2416
2417
|
|
|
2417
2418
|
.sd-panel .svc-row--ghost.svc-row--ghost .svc-question__content.svc-question__content {
|
|
@@ -2431,15 +2432,15 @@ svc-question .sv-action-bar,
|
|
|
2431
2432
|
}
|
|
2432
2433
|
|
|
2433
2434
|
.svc-panel__placeholder_frame {
|
|
2434
|
-
border: 1px dashed var(--border, #d6d6d6);
|
|
2435
|
+
border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
|
|
2435
2436
|
width: 100%;
|
|
2436
2437
|
box-sizing: border-box;
|
|
2437
|
-
height: calc(30 * var(--base-unit, 8px));
|
|
2438
|
+
height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2438
2439
|
display: flex;
|
|
2439
2440
|
align-items: center;
|
|
2440
2441
|
justify-content: center;
|
|
2441
2442
|
flex-direction: column;
|
|
2442
|
-
padding: calc(2 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
|
|
2443
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2443
2444
|
}
|
|
2444
2445
|
|
|
2445
2446
|
.svc-panel__add-new-question-container {
|
|
@@ -2451,15 +2452,15 @@ svc-question .sv-action-bar,
|
|
|
2451
2452
|
|
|
2452
2453
|
.svc-panel__add-new-question {
|
|
2453
2454
|
align-items: center;
|
|
2454
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
2455
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2455
2456
|
margin-left: 0;
|
|
2456
2457
|
margin-right: 0;
|
|
2457
2458
|
width: auto;
|
|
2458
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
2459
|
-
line-height: calc(5 * var(--base-unit, 8px));
|
|
2459
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2460
|
+
line-height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2460
2461
|
vertical-align: baseline;
|
|
2461
2462
|
text-align: center;
|
|
2462
|
-
background-color: var(--background, #fff);
|
|
2463
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
2463
2464
|
cursor: pointer;
|
|
2464
2465
|
user-select: none;
|
|
2465
2466
|
border: none;
|
|
@@ -2473,40 +2474,40 @@ svc-question .sv-action-bar,
|
|
|
2473
2474
|
align-items: center;
|
|
2474
2475
|
flex-grow: 1;
|
|
2475
2476
|
justify-content: center;
|
|
2476
|
-
margin: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
2477
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
2478
|
-
color: var(--primary, #19b394);
|
|
2477
|
+
margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2478
|
+
line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2479
|
+
color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
2479
2480
|
}
|
|
2480
2481
|
|
|
2481
2482
|
.svc-panel__question-type-selector {
|
|
2482
2483
|
appearance: none;
|
|
2483
2484
|
display: flex;
|
|
2484
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
2485
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
2485
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2486
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2486
2487
|
box-sizing: border-box;
|
|
2487
2488
|
border: none;
|
|
2488
2489
|
border-radius: 2px;
|
|
2489
2490
|
background-color: transparent;
|
|
2490
2491
|
cursor: pointer;
|
|
2491
|
-
margin-right: calc(1 * var(--base-unit, 8px));
|
|
2492
|
+
margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2492
2493
|
outline: none;
|
|
2493
|
-
top: calc(2 * var(--base-unit, 8px));
|
|
2494
|
+
top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2494
2495
|
margin: 0;
|
|
2495
2496
|
position: absolute;
|
|
2496
2497
|
right: 0;
|
|
2497
2498
|
}
|
|
2498
2499
|
.svc-panel__question-type-selector use {
|
|
2499
|
-
fill: var(--foreground-light, #909090);
|
|
2500
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2500
2501
|
}
|
|
2501
2502
|
.svc-panel__question-type-selector:hover {
|
|
2502
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
2503
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
2503
2504
|
}
|
|
2504
2505
|
.svc-panel__question-type-selector:focus {
|
|
2505
|
-
background-color: var(--sjs-primary-backcolor-light, rgba(25, 179, 148, 0.1));
|
|
2506
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
2506
2507
|
}
|
|
2507
2508
|
|
|
2508
2509
|
.sd-panel .svc-row {
|
|
2509
|
-
margin-top: calc(1 * var(--base-unit, 8px));
|
|
2510
|
+
margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2510
2511
|
}
|
|
2511
2512
|
.sd-panel .svc-row:first-of-type {
|
|
2512
2513
|
margin-top: 0;
|
|
@@ -2528,28 +2529,28 @@ svc-question .sv-action-bar,
|
|
|
2528
2529
|
padding-top: 0;
|
|
2529
2530
|
}
|
|
2530
2531
|
.svc-question__content .sd-table__cell--detail-panel .sd-panel__content {
|
|
2531
|
-
padding-top: calc(1 * var(--base-unit, 8px));
|
|
2532
|
+
padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2532
2533
|
}
|
|
2533
2534
|
.svc-question__content .sd-paneldynamic__panel-wrapper {
|
|
2534
2535
|
padding: 0;
|
|
2535
2536
|
}
|
|
2536
2537
|
.svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled {
|
|
2537
|
-
background: var(--background, #fff);
|
|
2538
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
2538
2539
|
opacity: 1;
|
|
2539
2540
|
}
|
|
2540
2541
|
.svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled use {
|
|
2541
|
-
fill: var(--foreground-light, #909090);
|
|
2542
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2542
2543
|
}
|
|
2543
2544
|
|
|
2544
2545
|
.svc-question__content .svc-carry-forward-panel {
|
|
2545
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
2546
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2546
2547
|
}
|
|
2547
2548
|
|
|
2548
2549
|
.svc-question__content--ranking .svc-carry-forward-panel {
|
|
2549
2550
|
margin-top: 0;
|
|
2550
2551
|
}
|
|
2551
2552
|
.svc-question__dropdown-choices {
|
|
2552
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
2553
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2553
2554
|
}
|
|
2554
2555
|
|
|
2555
2556
|
.svc-question__dropdown-choice--collapsed:nth-last-child(1) {
|
|
@@ -2565,14 +2566,14 @@ svc-question .sv-action-bar,
|
|
|
2565
2566
|
}
|
|
2566
2567
|
|
|
2567
2568
|
.svc-question__dropdown-choices--wrapper .svc-action-button {
|
|
2568
|
-
margin-left: calc(6.75 * var(--base-unit, 8px));
|
|
2569
|
-
margin-top: calc(1 * var(--base-unit, 8px));
|
|
2569
|
+
margin-left: calc(6.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2570
|
+
margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2570
2571
|
cursor: pointer;
|
|
2571
2572
|
}
|
|
2572
2573
|
.svc-image-question-controls {
|
|
2573
2574
|
position: absolute;
|
|
2574
|
-
top: calc(5 * var(--base-unit, 8px));
|
|
2575
|
-
right: calc(1 * var(--base-unit, 8px));
|
|
2575
|
+
top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2576
|
+
right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2576
2577
|
display: none;
|
|
2577
2578
|
}
|
|
2578
2579
|
|
|
@@ -2581,7 +2582,7 @@ svc-question .sv-action-bar,
|
|
|
2581
2582
|
}
|
|
2582
2583
|
|
|
2583
2584
|
.svc-question__content--image:not(.svc-question__content--empty) {
|
|
2584
|
-
padding: calc(4 * var(--base-unit, 8px)) 0 calc(8 * var(--base-unit, 8px)) 0;
|
|
2585
|
+
padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(8 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
2585
2586
|
}
|
|
2586
2587
|
|
|
2587
2588
|
.svc-question__content--image.svc-question__content--empty .sd-file,
|
|
@@ -2605,8 +2606,8 @@ svc-question .sv-action-bar,
|
|
|
2605
2606
|
}
|
|
2606
2607
|
|
|
2607
2608
|
.svc-question__content .sd-rating {
|
|
2608
|
-
margin-inline-start: calc(9 * var(--base-unit, 8px));
|
|
2609
|
-
width: calc(100% - 9 * var(--base-unit, 8px));
|
|
2609
|
+
margin-inline-start: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2610
|
+
width: calc(100% - 9 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2610
2611
|
}
|
|
2611
2612
|
.svc-question__content .sd-question--table .sd-rating {
|
|
2612
2613
|
margin-inline-start: 0;
|
|
@@ -2615,45 +2616,45 @@ svc-question .sv-action-bar,
|
|
|
2615
2616
|
}
|
|
2616
2617
|
.svc-question__content .svc-rating-question-controls {
|
|
2617
2618
|
display: flex;
|
|
2618
|
-
width: calc(8 * var(--base-unit, 8px));
|
|
2619
|
+
width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2619
2620
|
min-width: auto;
|
|
2620
2621
|
justify-content: flex-start;
|
|
2621
2622
|
}
|
|
2622
2623
|
.svc-question__content .sd-rating__item--fixed-size:focus-within {
|
|
2623
2624
|
width: unset;
|
|
2624
|
-
padding: calc(0.5 * var(--base-unit, 8px)) calc(2.5 * var(--base-unit, 8px));
|
|
2625
|
+
padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2625
2626
|
}
|
|
2626
2627
|
.svc-item-value-wrapper {
|
|
2627
2628
|
position: relative;
|
|
2628
2629
|
display: flex;
|
|
2629
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
2630
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2630
2631
|
align-items: center;
|
|
2631
|
-
margin-left: calc(-5 * var(--base-unit, 8px));
|
|
2632
|
+
margin-left: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2632
2633
|
}
|
|
2633
2634
|
|
|
2634
2635
|
.svc-question__dropdown-choice .svc-item-value-wrapper,
|
|
2635
2636
|
.sd-selectbase .svc-item-value-wrapper {
|
|
2636
2637
|
align-items: flex-start;
|
|
2637
|
-
min-width: calc(28 * var(--base-unit, 8px));
|
|
2638
|
+
min-width: calc(28 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2638
2639
|
}
|
|
2639
2640
|
.svc-question__dropdown-choice .svc-item-value__item,
|
|
2640
2641
|
.sd-selectbase .svc-item-value__item {
|
|
2641
|
-
padding-right: calc(1 * var(--base-unit, 8px));
|
|
2642
|
+
padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2642
2643
|
}
|
|
2643
2644
|
|
|
2644
2645
|
.svc-question__content .sd-selectbase__column:not(.sd-imagepicker__column):not(:first-of-type) {
|
|
2645
|
-
margin-left: calc(5 * var(--base-unit, 8px));
|
|
2646
|
+
margin-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2646
2647
|
}
|
|
2647
2648
|
.svc-question__content .sd-selectbase__column:not(:last-child) {
|
|
2648
2649
|
padding-right: 0;
|
|
2649
2650
|
}
|
|
2650
2651
|
|
|
2651
2652
|
.svc-item-value--dragging {
|
|
2652
|
-
background: var(--background, #fff);
|
|
2653
|
-
box-shadow:
|
|
2654
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
2655
|
-
padding-right: calc(3 * var(--base-unit, 8px));
|
|
2656
|
-
padding-left: calc(0.5 * var(--base-unit, 8px));
|
|
2653
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
2654
|
+
box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
|
|
2655
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2656
|
+
padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2657
|
+
padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2657
2658
|
-moz-user-select: none;
|
|
2658
2659
|
-webkit-user-select: none;
|
|
2659
2660
|
-ms-user-select: none;
|
|
@@ -2662,8 +2663,8 @@ svc-question .sv-action-bar,
|
|
|
2662
2663
|
|
|
2663
2664
|
.svc-item-value-controls {
|
|
2664
2665
|
display: flex;
|
|
2665
|
-
margin: calc(1 * var(--base-unit, 8px)) 0;
|
|
2666
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
2666
|
+
margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
2667
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2667
2668
|
box-sizing: border-box;
|
|
2668
2669
|
flex-shrink: 0;
|
|
2669
2670
|
min-width: 72px;
|
|
@@ -2672,11 +2673,11 @@ svc-question .sv-action-bar,
|
|
|
2672
2673
|
|
|
2673
2674
|
.svc-item-value-controls__button {
|
|
2674
2675
|
border-radius: 50%;
|
|
2675
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
2676
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2676
2677
|
cursor: pointer;
|
|
2677
2678
|
display: inline-block;
|
|
2678
2679
|
outline: none;
|
|
2679
|
-
height: calc(2 * var(--base-unit, 8px));
|
|
2680
|
+
height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2680
2681
|
box-sizing: content-box;
|
|
2681
2682
|
}
|
|
2682
2683
|
.svc-item-value-controls__button .sv-svg-icon {
|
|
@@ -2697,7 +2698,7 @@ svc-question .sv-action-bar,
|
|
|
2697
2698
|
}
|
|
2698
2699
|
|
|
2699
2700
|
.svc-item-value-controls__drag {
|
|
2700
|
-
padding: calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
|
|
2701
|
+
padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2701
2702
|
cursor: move;
|
|
2702
2703
|
opacity: 0.25;
|
|
2703
2704
|
}
|
|
@@ -2705,29 +2706,29 @@ svc-question .sv-action-bar,
|
|
|
2705
2706
|
visibility: hidden;
|
|
2706
2707
|
}
|
|
2707
2708
|
.svc-item-value-controls__drag use {
|
|
2708
|
-
fill: var(--foreground, #161616);
|
|
2709
|
+
fill: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
2709
2710
|
}
|
|
2710
2711
|
|
|
2711
2712
|
.svc-item-value-controls__button--disabled {
|
|
2712
|
-
fill: var(--foreground-light, #909090);
|
|
2713
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2713
2714
|
opacity: 0.25;
|
|
2714
2715
|
cursor: default;
|
|
2715
2716
|
}
|
|
2716
2717
|
|
|
2717
2718
|
.svc-item-value-controls__remove:not(.svc-item-value-controls__button--disabled) use {
|
|
2718
|
-
fill: var(--red, #e60a3e);
|
|
2719
|
+
fill: var(--sjs-special-red, var(--red, #e60a3e));
|
|
2719
2720
|
}
|
|
2720
2721
|
|
|
2721
2722
|
.svc-item-value-controls__add:not(.svc-item-value-controls__button--disabled) use {
|
|
2722
|
-
fill: var(--primary, #19b394);
|
|
2723
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
2723
2724
|
}
|
|
2724
2725
|
|
|
2725
2726
|
.svc-item-value-controls__add:not(.svc-item-value-controls__button--disabled):hover, .svc-item-value-controls__add:not(.svc-item-value-controls__button--disabled):focus {
|
|
2726
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
2727
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
2727
2728
|
}
|
|
2728
2729
|
|
|
2729
2730
|
.svc-item-value-controls__remove:not(.svc-item-value-controls__button--disabled):hover, .svc-item-value-controls__remove:not(.svc-item-value-controls__button--disabled):focus {
|
|
2730
|
-
background-color: var(--red-light, rgba(
|
|
2731
|
+
background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
|
|
2731
2732
|
}
|
|
2732
2733
|
|
|
2733
2734
|
.sv-string-editor {
|
|
@@ -2736,13 +2737,13 @@ svc-question .sv-action-bar,
|
|
|
2736
2737
|
|
|
2737
2738
|
.svc-item-value--new .svc-item-value__item .sd-item__control-label,
|
|
2738
2739
|
.svc-item-value--new .svc-item-value__item .sv-ranking-item__text {
|
|
2739
|
-
color: var(--foreground-light, #909090);
|
|
2740
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2740
2741
|
}
|
|
2741
2742
|
.svc-item-value--new .svc-item-value__item .sd-item__decorator {
|
|
2742
2743
|
opacity: 0.35;
|
|
2743
2744
|
}
|
|
2744
2745
|
.svc-item-value--new .sv-ranking-item__index {
|
|
2745
|
-
background: var(--background-dim, #f3f3f3);
|
|
2746
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
2746
2747
|
}
|
|
2747
2748
|
.svc-item-value--new .sv-ranking-item__index.sv-ranking-item__index--empty:empty {
|
|
2748
2749
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAaSURBVHgBjcABDQAACAKwa2X6b1Tghxi8UQEkAAB3NR3N2gAAAABJRU5ErkJggg==);
|
|
@@ -2750,7 +2751,7 @@ svc-question .sv-action-bar,
|
|
|
2750
2751
|
|
|
2751
2752
|
.sv-ranking .svc-item-value-wrapper {
|
|
2752
2753
|
align-items: center;
|
|
2753
|
-
min-width: calc(27 * var(--base-unit, 8px));
|
|
2754
|
+
min-width: calc(27 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2754
2755
|
}
|
|
2755
2756
|
.sv-ranking .svc-item-value__item {
|
|
2756
2757
|
padding-right: 0;
|
|
@@ -2803,9 +2804,9 @@ svc-question .sv-action-bar,
|
|
|
2803
2804
|
}
|
|
2804
2805
|
.svc-item-value__ghost {
|
|
2805
2806
|
display: none;
|
|
2806
|
-
background: var(--background-dim, #f3f3f3);
|
|
2807
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
2808
|
-
width: calc(25 * var(--base-unit, 8px));
|
|
2807
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
2808
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2809
|
+
width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2809
2810
|
height: 40px;
|
|
2810
2811
|
z-index: 11;
|
|
2811
2812
|
position: absolute;
|
|
@@ -2822,12 +2823,12 @@ svc-question .sv-action-bar,
|
|
|
2822
2823
|
}
|
|
2823
2824
|
.svc-image-item-value--new .sd-imagepicker__image {
|
|
2824
2825
|
box-sizing: border-box;
|
|
2825
|
-
border: 1px dashed var(--border, #d6d6d6);
|
|
2826
|
+
border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
|
|
2826
2827
|
}
|
|
2827
2828
|
|
|
2828
2829
|
.svc-image-item-value--file-dragging .sd-imagepicker__image {
|
|
2829
|
-
border: 2px solid var(--primary, #19b394);
|
|
2830
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
2830
|
+
border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
2831
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
2831
2832
|
}
|
|
2832
2833
|
.svc-image-item-value--file-dragging .svc-image-item-value__item {
|
|
2833
2834
|
position: relative;
|
|
@@ -2840,13 +2841,13 @@ svc-question .sv-action-bar,
|
|
|
2840
2841
|
|
|
2841
2842
|
.svc-image-item-value-controls {
|
|
2842
2843
|
position: absolute;
|
|
2843
|
-
top: calc(1 * var(--base-unit, 8px));
|
|
2844
|
-
right: calc(1 * var(--base-unit, 8px));
|
|
2844
|
+
top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2845
|
+
right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2845
2846
|
}
|
|
2846
2847
|
|
|
2847
2848
|
.svc-image-item-value--new .svc-image-item-value-controls {
|
|
2848
|
-
top: calc(50% - 3 * var(--base-unit, 8px));
|
|
2849
|
-
left: calc(50% - 3 * var(--base-unit, 8px));
|
|
2849
|
+
top: calc(50% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2850
|
+
left: calc(50% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2850
2851
|
}
|
|
2851
2852
|
|
|
2852
2853
|
.svc-image-item-value--new .svc-image-item-value-controls__button {
|
|
@@ -2854,11 +2855,11 @@ svc-question .sv-action-bar,
|
|
|
2854
2855
|
}
|
|
2855
2856
|
|
|
2856
2857
|
.svc-image-item-value-controls__add use {
|
|
2857
|
-
fill: var(--primary, #19b394);
|
|
2858
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
2858
2859
|
}
|
|
2859
2860
|
|
|
2860
2861
|
.svc-image-item-value-controls__add:hover, .svc-image-item-value-controls__add:focus {
|
|
2861
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
2862
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
2862
2863
|
}
|
|
2863
2864
|
|
|
2864
2865
|
.svc-choose-file-input {
|
|
@@ -2877,8 +2878,8 @@ svc-question .sv-action-bar,
|
|
|
2877
2878
|
display: none;
|
|
2878
2879
|
cursor: move;
|
|
2879
2880
|
position: absolute;
|
|
2880
|
-
top: calc(1 * var(--base-unit, 8px));
|
|
2881
|
-
left: calc(1 * var(--base-unit, 8px));
|
|
2881
|
+
top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2882
|
+
left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2882
2883
|
}
|
|
2883
2884
|
|
|
2884
2885
|
.svc-question__content--selected .svc-image-item-value-wrapper:hover .svc-image-item-value-controls__drag-area-indicator {
|
|
@@ -2894,31 +2895,31 @@ svc-question .sv-action-bar,
|
|
|
2894
2895
|
|
|
2895
2896
|
.svc-image-item-value-wrapper__ghost {
|
|
2896
2897
|
display: none;
|
|
2897
|
-
background: var(--background-dim, #f3f3f3);
|
|
2898
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
2898
2899
|
}
|
|
2899
2900
|
|
|
2900
2901
|
.svc-image-item-value--single {
|
|
2901
2902
|
width: 100%;
|
|
2902
2903
|
}
|
|
2903
2904
|
.svc-image-item-value--single .sd-imagepicker__image {
|
|
2904
|
-
height: calc(30 * var(--base-unit, 8px));
|
|
2905
|
+
height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2905
2906
|
}
|
|
2906
2907
|
.svc-matrix-cell {
|
|
2907
2908
|
position: relative;
|
|
2908
2909
|
}
|
|
2909
2910
|
|
|
2910
2911
|
.sd-table thead tr th .svc-matrix-cell {
|
|
2911
|
-
padding: calc(1.5 * var(--base-unit, 8px));
|
|
2912
|
+
padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2912
2913
|
}
|
|
2913
2914
|
|
|
2914
2915
|
.svc-matrix-cell--selected {
|
|
2915
2916
|
position: absolute;
|
|
2916
|
-
border: calc(0.25 * var(--base-unit, 8px)) solid var(--secondary, #ff9814);
|
|
2917
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
2918
|
-
top: calc(0 * var(--base-unit, 8px));
|
|
2919
|
-
left: calc(0 * var(--base-unit, 8px));
|
|
2920
|
-
right: calc(0 * var(--base-unit, 8px));
|
|
2921
|
-
bottom: calc(0 * var(--base-unit, 8px));
|
|
2917
|
+
border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
2918
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2919
|
+
top: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2920
|
+
left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2921
|
+
right: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2922
|
+
bottom: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2922
2923
|
display: none;
|
|
2923
2924
|
}
|
|
2924
2925
|
.svc-matrix-cell--selected.svc-visible {
|
|
@@ -2926,32 +2927,32 @@ svc-question .sv-action-bar,
|
|
|
2926
2927
|
}
|
|
2927
2928
|
|
|
2928
2929
|
.svc-hovered > .svc-matrix-cell--selected:not(.svc-visible) {
|
|
2929
|
-
border: calc(0.25 * var(--base-unit, 8px)) solid var(--secondary-light, rgba(255, 152, 20, 0.25));
|
|
2930
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
2930
|
+
border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
|
|
2931
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2931
2932
|
display: block;
|
|
2932
2933
|
}
|
|
2933
2934
|
|
|
2934
2935
|
.svc-matrix-cell__question-controls {
|
|
2935
2936
|
display: none;
|
|
2936
2937
|
position: absolute;
|
|
2937
|
-
top: calc(50% - 3 * var(--base-unit, 8px));
|
|
2938
|
-
left: calc(50% - 3 * var(--base-unit, 8px));
|
|
2938
|
+
top: calc(50% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2939
|
+
left: calc(50% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2939
2940
|
z-index: 2;
|
|
2940
2941
|
}
|
|
2941
2942
|
|
|
2942
2943
|
.svc-matrix-cell__question-controls-button {
|
|
2943
2944
|
display: block;
|
|
2944
|
-
width: calc(6 * var(--base-unit, 8px));
|
|
2945
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
2946
|
-
background: var(--background, #fff);
|
|
2947
|
-
border: 1px solid var(--border, #d6d6d6);
|
|
2945
|
+
width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2946
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2947
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
2948
|
+
border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
2948
2949
|
box-sizing: border-box;
|
|
2949
2950
|
border-radius: 50%;
|
|
2950
|
-
padding: calc(1.5 * var(--base-unit, 8px));
|
|
2951
|
+
padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2951
2952
|
cursor: pointer;
|
|
2952
2953
|
}
|
|
2953
2954
|
.svc-matrix-cell__question-controls-button use {
|
|
2954
|
-
fill: var(--foreground-light, #909090);
|
|
2955
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2955
2956
|
}
|
|
2956
2957
|
|
|
2957
2958
|
.svc-matrix-cell:hover .svc-matrix-cell__question-controls {
|
|
@@ -2959,13 +2960,13 @@ svc-question .sv-action-bar,
|
|
|
2959
2960
|
}
|
|
2960
2961
|
|
|
2961
2962
|
.svc-question__content--in-popup {
|
|
2962
|
-
width: calc(100% - 25 * var(--base-unit, 8px));
|
|
2963
|
-
min-width: calc(70 * var(--base-unit, 8px));
|
|
2964
|
-
padding: calc(5 * var(--base-unit, 8px));
|
|
2963
|
+
width: calc(100% - 25 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2964
|
+
min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2965
|
+
padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2965
2966
|
}
|
|
2966
2967
|
|
|
2967
2968
|
.svc-matrix-cell__popup .sv-popup__scrolling-content {
|
|
2968
|
-
margin-top: calc(1 * var(--base-unit, 8px));
|
|
2969
|
+
margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2969
2970
|
padding-top: 0;
|
|
2970
2971
|
}
|
|
2971
2972
|
.svc-matrix-cell__popup .svc-question__content {
|
|
@@ -2982,31 +2983,31 @@ svc-question .sv-action-bar,
|
|
|
2982
2983
|
font-family: var(--font-family);
|
|
2983
2984
|
width: 80%;
|
|
2984
2985
|
margin: auto;
|
|
2985
|
-
margin-bottom: calc(5 * var(--base-unit, 8px));
|
|
2986
|
-
background-color: var(--background, #fff);
|
|
2987
|
-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
|
2986
|
+
margin-bottom: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2987
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
2988
|
+
box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
|
|
2988
2989
|
border-radius: 4px;
|
|
2989
2990
|
}
|
|
2990
2991
|
.svd-test-results .svd-test-results__header {
|
|
2991
2992
|
display: flex;
|
|
2992
2993
|
justify-content: space-between;
|
|
2993
2994
|
align-items: center;
|
|
2994
|
-
padding: calc(2 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
2995
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
2996
|
-
color: var(--foreground-light, #909090);
|
|
2997
|
-
border-bottom: 2px solid var(--border-light, #eaeaea);
|
|
2995
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2996
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
2997
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
2998
|
+
border-bottom: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
|
|
2998
2999
|
}
|
|
2999
3000
|
.svd-test-results .svd-test-results__header .svd-test-results__header-text {
|
|
3000
3001
|
margin: 0;
|
|
3001
3002
|
}
|
|
3002
3003
|
.svd-test-results .svd-test-results__header .svd-test-results__header-types {
|
|
3003
3004
|
display: flex;
|
|
3004
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
3005
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3005
3006
|
}
|
|
3006
3007
|
.svd-test-results .svd-test-results__text {
|
|
3007
3008
|
display: flex;
|
|
3008
|
-
padding: calc(2 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
3009
|
-
width: calc(100% - (6 * var(--base-unit, 8px)));
|
|
3009
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3010
|
+
width: calc(100% - (6 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
3010
3011
|
overflow: auto;
|
|
3011
3012
|
user-select: text;
|
|
3012
3013
|
white-space: pre-wrap;
|
|
@@ -3020,34 +3021,34 @@ svc-question .sv-action-bar,
|
|
|
3020
3021
|
}
|
|
3021
3022
|
.svd-test-results .svd-test-results__table table .svd-test-results__marker {
|
|
3022
3023
|
position: absolute;
|
|
3023
|
-
top: calc(1.5 * var(--base-unit, 8px));
|
|
3024
|
+
top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3024
3025
|
}
|
|
3025
3026
|
.svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
|
|
3026
3027
|
transition: transform 0.2s ease-in-out;
|
|
3027
3028
|
}
|
|
3028
3029
|
.svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon use {
|
|
3029
|
-
fill: var(--foreground-light, #909090);
|
|
3030
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3030
3031
|
}
|
|
3031
3032
|
.svd-test-results .svd-test-results__table table .svd-test-results__marker.svd-test-results__marker--expanded .sv-svg-icon {
|
|
3032
3033
|
transform-origin: center;
|
|
3033
3034
|
transform: rotate(90deg);
|
|
3034
3035
|
}
|
|
3035
3036
|
.svd-test-results .svd-test-results__table table th {
|
|
3036
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
|
|
3037
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
3037
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3038
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
3038
3039
|
text-align: left;
|
|
3039
3040
|
font-weight: 600;
|
|
3040
3041
|
font-size: 12px;
|
|
3041
|
-
color: var(--foreground-light, #909090);
|
|
3042
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3042
3043
|
}
|
|
3043
3044
|
.svd-test-results .svd-test-results__table table th:nth-child(1) {
|
|
3044
|
-
padding-left: calc(3 * var(--base-unit, 8px));
|
|
3045
|
+
padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3045
3046
|
}
|
|
3046
3047
|
.svd-test-results .svd-test-results__table table td {
|
|
3047
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
|
|
3048
|
-
max-width: calc(50 * var(--base-unit, 8px));
|
|
3048
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3049
|
+
max-width: calc(50 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3049
3050
|
overflow: auto;
|
|
3050
|
-
border-top: 2px solid var(--border-light, #eaeaea);
|
|
3051
|
+
border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
|
|
3051
3052
|
user-select: text;
|
|
3052
3053
|
}
|
|
3053
3054
|
.svd-test-results .svd-test-results__table table td:nth-child(1) {
|
|
@@ -3057,7 +3058,7 @@ svc-question .sv-action-bar,
|
|
|
3057
3058
|
}
|
|
3058
3059
|
.svd-test-results .svd-test-results__table table td:nth-child(2) {
|
|
3059
3060
|
width: 50%;
|
|
3060
|
-
padding-right: calc(3 * var(--base-unit, 8px));
|
|
3061
|
+
padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3061
3062
|
}
|
|
3062
3063
|
.svd-test-results .svd-test-results__table table .survey-result-value {
|
|
3063
3064
|
word-break: break-all;
|
|
@@ -3066,11 +3067,11 @@ svc-question .sv-action-bar,
|
|
|
3066
3067
|
vertical-align: top;
|
|
3067
3068
|
}
|
|
3068
3069
|
.svd-test-results .svd-test-results__table table tr .svd-test-results__node-value {
|
|
3069
|
-
color: var(--foreground-light, #909090);
|
|
3070
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3070
3071
|
}
|
|
3071
3072
|
.svc-designer-header .sd-container-modern__title {
|
|
3072
3073
|
gap: 0;
|
|
3073
|
-
column-gap: calc(6 * var(--base-unit, 8px));
|
|
3074
|
+
column-gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3074
3075
|
}
|
|
3075
3076
|
|
|
3076
3077
|
.svc-logo-image {
|
|
@@ -3083,39 +3084,39 @@ svc-question .sv-action-bar,
|
|
|
3083
3084
|
}
|
|
3084
3085
|
.svc-logo-image .svc-image-item-value-controls {
|
|
3085
3086
|
display: block;
|
|
3086
|
-
top: calc(2.5 * var(--base-unit, 8px));
|
|
3087
|
-
right: calc(1.5 * var(--base-unit, 8px));
|
|
3087
|
+
top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3088
|
+
right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3088
3089
|
}
|
|
3089
3090
|
|
|
3090
3091
|
.svc-logo-image-placeholder {
|
|
3091
|
-
font-size: calc(4 * var(--base-unit, 8px));
|
|
3092
|
-
color: var(--foreground-light, #909090);
|
|
3092
|
+
font-size: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3093
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3093
3094
|
opacity: 0.25;
|
|
3094
3095
|
white-space: nowrap;
|
|
3095
3096
|
word-break: keep-all;
|
|
3096
3097
|
padding: 0;
|
|
3097
|
-
width: calc(8 * var(--base-unit, 8px));
|
|
3098
|
-
height: calc(8 * var(--base-unit, 8px));
|
|
3098
|
+
width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3099
|
+
height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3099
3100
|
display: flex;
|
|
3100
3101
|
justify-content: center;
|
|
3101
3102
|
align-items: center;
|
|
3102
|
-
margin-right: calc(-2 * var(--base-unit, 8px));
|
|
3103
|
-
border-radius: calc(4 * var(--base-unit, 8px));
|
|
3103
|
+
margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3104
|
+
border-radius: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3104
3105
|
}
|
|
3105
3106
|
.svc-logo-image-placeholder:hover {
|
|
3106
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
3107
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
3107
3108
|
opacity: unset;
|
|
3108
3109
|
}
|
|
3109
3110
|
.svc-logo-image-placeholder:hover use {
|
|
3110
|
-
fill: var(--primary, #19b394);
|
|
3111
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3111
3112
|
}
|
|
3112
3113
|
.svc-logo-image-placeholder svg {
|
|
3113
|
-
width: calc(4 * var(--base-unit, 8px));
|
|
3114
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
3114
|
+
width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3115
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3115
3116
|
}
|
|
3116
3117
|
|
|
3117
3118
|
.svc-logo-image-placeholder use {
|
|
3118
|
-
fill: var(--foreground-light, #909090);
|
|
3119
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3119
3120
|
}
|
|
3120
3121
|
|
|
3121
3122
|
.svc-logo-image-container {
|
|
@@ -3152,21 +3153,21 @@ svc-question .sv-action-bar,
|
|
|
3152
3153
|
}
|
|
3153
3154
|
|
|
3154
3155
|
.svc-link-value-button {
|
|
3155
|
-
margin-left: calc(-2 * var(--base-unit, 8px));
|
|
3156
|
+
margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3156
3157
|
}
|
|
3157
3158
|
|
|
3158
3159
|
.svc-question-link__clear-button {
|
|
3159
|
-
color: var(--red, #e60a3e);
|
|
3160
|
+
color: var(--sjs-special-red, var(--red, #e60a3e));
|
|
3160
3161
|
font-weight: 600;
|
|
3161
3162
|
cursor: pointer;
|
|
3162
3163
|
}
|
|
3163
3164
|
|
|
3164
3165
|
.svc-question-link__clear-button:focus,
|
|
3165
3166
|
.svc-question-link__clear-button:hover {
|
|
3166
|
-
background-color: var(--red-light, rgba(
|
|
3167
|
+
background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
|
|
3167
3168
|
}
|
|
3168
3169
|
.svc-property-panel__item {
|
|
3169
|
-
margin: calc(2 * var(--base-unit, 8px)) 0;
|
|
3170
|
+
margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
3170
3171
|
width: 100%;
|
|
3171
3172
|
}
|
|
3172
3173
|
.svc-property-panel__group {
|
|
@@ -3174,67 +3175,67 @@ svc-question .sv-action-bar,
|
|
|
3174
3175
|
-moz-appearance: none;
|
|
3175
3176
|
appearance: none;
|
|
3176
3177
|
width: 100%;
|
|
3177
|
-
padding: calc(2 * var(--base-unit, 8px));
|
|
3178
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3178
3179
|
border: none;
|
|
3179
3180
|
outline: none;
|
|
3180
|
-
color: var(--foreground-light, #909090);
|
|
3181
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3181
3182
|
cursor: pointer;
|
|
3182
3183
|
text-align: left;
|
|
3183
|
-
background: var(--background, #fff);
|
|
3184
|
-
box-shadow: inset 0px -1px 0px var(--border, #d6d6d6);
|
|
3184
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3185
|
+
box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
|
|
3185
3186
|
font-family: var(--font-family);
|
|
3186
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
3187
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3187
3188
|
}
|
|
3188
3189
|
|
|
3189
3190
|
.svc-property-panel__group:disabled,
|
|
3190
3191
|
.svc-property-panel__group:disabled:hover {
|
|
3191
|
-
background-color: var(--background, #fff);
|
|
3192
|
-
color: var(--foreground, #161616);
|
|
3192
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3193
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3193
3194
|
opacity: 0.25;
|
|
3194
3195
|
cursor: default;
|
|
3195
3196
|
}
|
|
3196
3197
|
|
|
3197
3198
|
.svc-property-panel__group:hover {
|
|
3198
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
3199
|
-
color: var(--foreground-light, #909090);
|
|
3199
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
3200
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3200
3201
|
font-weight: 400;
|
|
3201
3202
|
}
|
|
3202
3203
|
|
|
3203
3204
|
.svc-property-panel__group--active,
|
|
3204
3205
|
.svc-property-panel__group--active:hover {
|
|
3205
|
-
color: var(--foreground, #161616);
|
|
3206
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3206
3207
|
font-weight: 600;
|
|
3207
|
-
background-color: var(--background, #fff);
|
|
3208
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3208
3209
|
}
|
|
3209
3210
|
.svc-tabbed-menu-item {
|
|
3210
|
-
padding: calc(2 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
3211
|
-
height: calc(8 * var(--base-unit, 8px));
|
|
3212
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
3211
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3212
|
+
height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3213
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3213
3214
|
box-sizing: border-box;
|
|
3214
3215
|
cursor: pointer;
|
|
3215
3216
|
}
|
|
3216
3217
|
.svc-tabbed-menu-item:hover, .svc-tabbed-menu-item:focus {
|
|
3217
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
3218
|
-
box-shadow: inset 0px -1px 0px var(--border, #d6d6d6);
|
|
3218
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
3219
|
+
box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
|
|
3219
3220
|
outline: none;
|
|
3220
3221
|
}
|
|
3221
3222
|
|
|
3222
3223
|
.svc-tabbed-menu-item--selected {
|
|
3223
|
-
background: var(--background, #fff);
|
|
3224
|
-
box-shadow: inset 0px -2px 0px var(--primary, #19b394);
|
|
3224
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3225
|
+
box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3225
3226
|
}
|
|
3226
3227
|
.svc-tabbed-menu-item--selected:hover, .svc-tabbed-menu-item--selected:focus {
|
|
3227
|
-
background: var(--background, #fff);
|
|
3228
|
-
box-shadow: inset 0px -2px 0px var(--primary, #19b394);
|
|
3228
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3229
|
+
box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3229
3230
|
}
|
|
3230
3231
|
|
|
3231
3232
|
.svc-tabbed-menu-item--disabled {
|
|
3232
3233
|
cursor: default;
|
|
3233
|
-
color: var(--foreground, #161616);
|
|
3234
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3234
3235
|
opacity: 0.25;
|
|
3235
3236
|
}
|
|
3236
3237
|
.svc-tabbed-menu-item--disabled:hover {
|
|
3237
|
-
background-color: var(--background, #fff);
|
|
3238
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3238
3239
|
}
|
|
3239
3240
|
|
|
3240
3241
|
.svc-tabbed-menu-item--hidden {
|
|
@@ -3243,7 +3244,7 @@ svc-question .sv-action-bar,
|
|
|
3243
3244
|
|
|
3244
3245
|
.svc-tabbed-menu-item .svc-tabbed-menu-item__text {
|
|
3245
3246
|
white-space: nowrap;
|
|
3246
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
3247
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3247
3248
|
}
|
|
3248
3249
|
|
|
3249
3250
|
.svc-tabbed-menu-item-container .sv-dots__item {
|
|
@@ -3254,7 +3255,7 @@ svc-question .sv-action-bar,
|
|
|
3254
3255
|
white-space: nowrap;
|
|
3255
3256
|
overflow: hidden;
|
|
3256
3257
|
align-items: center;
|
|
3257
|
-
height: calc(8 * var(--base-unit, 8px));
|
|
3258
|
+
height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3258
3259
|
}
|
|
3259
3260
|
|
|
3260
3261
|
.svc-tabbed-menu-wrapper {
|
|
@@ -3267,19 +3268,19 @@ svc-question .sv-action-bar,
|
|
|
3267
3268
|
align-items: center;
|
|
3268
3269
|
z-index: 20;
|
|
3269
3270
|
outline: none;
|
|
3270
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
|
|
3271
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3271
3272
|
}
|
|
3272
3273
|
.svc-toolbox__item sv-svg-icon,
|
|
3273
3274
|
.svc-toolbox__item .sv-svg-icon {
|
|
3274
3275
|
display: block;
|
|
3275
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
3276
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3276
3277
|
}
|
|
3277
3278
|
|
|
3278
3279
|
.svc-toolbox__item-container {
|
|
3279
3280
|
outline: none;
|
|
3280
3281
|
}
|
|
3281
3282
|
.svc-toolbox__item-container .sv-svg-icon use {
|
|
3282
|
-
fill: var(--foreground-light, #909090);
|
|
3283
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3283
3284
|
}
|
|
3284
3285
|
|
|
3285
3286
|
.svc-toolbox__item-banner {
|
|
@@ -3288,19 +3289,19 @@ svc-question .sv-action-bar,
|
|
|
3288
3289
|
box-sizing: border-box;
|
|
3289
3290
|
align-items: center;
|
|
3290
3291
|
margin-right: 0;
|
|
3291
|
-
margin-left: calc(-1.5 * var(--base-unit, 8px));
|
|
3292
|
+
margin-left: calc(-1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3292
3293
|
}
|
|
3293
3294
|
.svc-toolbox__item-banner .svc-toolbox__item-icon {
|
|
3294
3295
|
position: absolute;
|
|
3295
3296
|
display: block;
|
|
3296
|
-
left: calc(1.5 * var(--base-unit, 8px));
|
|
3297
|
-
top: calc(1 * var(--base-unit, 8px));
|
|
3297
|
+
left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3298
|
+
top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3298
3299
|
}
|
|
3299
3300
|
.svc-toolbox__item-banner .svc-toolbox__item-title {
|
|
3300
|
-
color: var(--foreground, #161616);
|
|
3301
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3301
3302
|
}
|
|
3302
3303
|
.svc-toolbox__item-banner .sv-svg-icon use {
|
|
3303
|
-
fill: var(--primary, #19b394);
|
|
3304
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3304
3305
|
}
|
|
3305
3306
|
|
|
3306
3307
|
.svc-creator__toolbox--right .svc-toolbox__item:hover .svc-toolbox__item-banner,
|
|
@@ -3312,11 +3313,11 @@ svc-question .sv-action-bar,
|
|
|
3312
3313
|
[style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner,
|
|
3313
3314
|
[style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner {
|
|
3314
3315
|
flex-direction: row-reverse;
|
|
3315
|
-
padding-right: calc(1.5 * var(--base-unit, 8px));
|
|
3316
|
-
padding-left: calc(2 * var(--base-unit, 8px));
|
|
3316
|
+
padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3317
|
+
padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3317
3318
|
margin-left: 0;
|
|
3318
3319
|
margin-right: 0;
|
|
3319
|
-
transform: translateX(calc(1.5 * var(--base-unit, 8px)));
|
|
3320
|
+
transform: translateX(calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
3320
3321
|
}
|
|
3321
3322
|
.svc-creator__toolbox--right .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
|
|
3322
3323
|
.svc-creator__toolbox--right .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
|
|
@@ -3326,8 +3327,8 @@ svc-question .sv-action-bar,
|
|
|
3326
3327
|
[style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
|
|
3327
3328
|
[style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
|
|
3328
3329
|
[style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
|
|
3329
|
-
padding-left: calc(1 * var(--base-unit, 8px));
|
|
3330
|
-
padding-right: calc(4 * var(--base-unit, 8px));
|
|
3330
|
+
padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3331
|
+
padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3331
3332
|
}
|
|
3332
3333
|
.svc-creator__toolbox--right .svc-toolbox__item,
|
|
3333
3334
|
[dir=rtl] .svc-toolbox__item,
|
|
@@ -3358,61 +3359,61 @@ svc-question .sv-action-bar,
|
|
|
3358
3359
|
[style*="direction:rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon,
|
|
3359
3360
|
[style*="direction: rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon {
|
|
3360
3361
|
left: auto;
|
|
3361
|
-
right: calc(1.5 * var(--base-unit, 8px));
|
|
3362
|
+
right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3362
3363
|
}
|
|
3363
3364
|
|
|
3364
3365
|
.svc-toolbox__item-title {
|
|
3365
|
-
font-family: var(--font-family);
|
|
3366
|
+
font-family: var(--font-family, var(--font-family));
|
|
3366
3367
|
font-style: normal;
|
|
3367
3368
|
font-weight: 600;
|
|
3368
|
-
font-size: calc(
|
|
3369
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
3369
|
+
font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
3370
|
+
line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
|
|
3370
3371
|
display: block;
|
|
3371
|
-
padding-left: calc(1 * var(--base-unit, 8px));
|
|
3372
|
-
padding-right: calc(1.5 * var(--base-unit, 8px));
|
|
3372
|
+
padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3373
|
+
padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3373
3374
|
white-space: nowrap;
|
|
3374
|
-
color: var(--foreground-light, #909090);
|
|
3375
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3375
3376
|
}
|
|
3376
3377
|
|
|
3377
3378
|
.svc-toolbox__item:hover .svc-toolbox__item-banner,
|
|
3378
3379
|
.svc-toolbox__item:focus .svc-toolbox__item-banner {
|
|
3379
|
-
max-width: calc(100 * var(--base-unit, 8px));
|
|
3380
|
-
padding-left: calc(1.5 * var(--base-unit, 8px));
|
|
3381
|
-
padding-right: calc(2 * var(--base-unit, 8px));
|
|
3380
|
+
max-width: calc(100 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3381
|
+
padding-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3382
|
+
padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3382
3383
|
opacity: 1;
|
|
3383
3384
|
}
|
|
3384
3385
|
.svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
|
|
3385
3386
|
.svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
|
|
3386
|
-
padding-left: calc(4 * var(--base-unit, 8px));
|
|
3387
|
+
padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3387
3388
|
}
|
|
3388
3389
|
|
|
3389
3390
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
|
|
3390
3391
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
|
|
3391
3392
|
overflow: hidden;
|
|
3392
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
3393
|
-
background-color: var(--background, #fff);
|
|
3394
|
-
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
|
|
3393
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3394
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3395
|
+
box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
|
|
3395
3396
|
transition: 0.1s ease-in-out;
|
|
3396
3397
|
}
|
|
3397
3398
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus .svc-toolbox__item-title,
|
|
3398
3399
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover .svc-toolbox__item-title {
|
|
3399
|
-
color: var(--foreground, #161616);
|
|
3400
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3400
3401
|
}
|
|
3401
3402
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus .sv-svg-icon use,
|
|
3402
3403
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover .sv-svg-icon use {
|
|
3403
|
-
fill: var(--primary, #19b394);
|
|
3404
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3404
3405
|
}
|
|
3405
3406
|
|
|
3406
3407
|
.svc-toolbox__tool .sv-dots__item:hover:enabled,
|
|
3407
3408
|
.svc-toolbox__tool .sv-dots__item:focus:enabled,
|
|
3408
3409
|
.svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed {
|
|
3409
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
3410
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
3410
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
3411
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3411
3412
|
}
|
|
3412
3413
|
.svc-toolbox__tool .sv-dots__item:hover:enabled .sv-svg-icon use,
|
|
3413
3414
|
.svc-toolbox__tool .sv-dots__item:focus:enabled .sv-svg-icon use,
|
|
3414
3415
|
.svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed .sv-svg-icon use {
|
|
3415
|
-
fill: var(--primary, #19b394);
|
|
3416
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3416
3417
|
}
|
|
3417
3418
|
|
|
3418
3419
|
[dir=rtl] .svc-toolbox-popup,
|
|
@@ -3425,24 +3426,24 @@ svc-question .sv-action-bar,
|
|
|
3425
3426
|
display: none;
|
|
3426
3427
|
}
|
|
3427
3428
|
.svc-toolbox-popup .sv-list__item .sv-list__item-body {
|
|
3428
|
-
padding-top: calc(1.5 * var(--base-unit, 8px));
|
|
3429
|
-
padding-bottom: calc(1.5 * var(--base-unit, 8px));
|
|
3430
|
-
padding-inline-start: calc(2 * var(--base-unit, 8px));
|
|
3431
|
-
padding-inline-end: calc(5 * var(--base-unit, 8px));
|
|
3429
|
+
padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3430
|
+
padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3431
|
+
padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3432
|
+
padding-inline-end: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3432
3433
|
}
|
|
3433
3434
|
|
|
3434
3435
|
.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
|
|
3435
3436
|
.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots):hover,
|
|
3436
3437
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
|
|
3437
3438
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots):hover {
|
|
3438
|
-
color: var(--foreground, #161616);
|
|
3439
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3439
3440
|
opacity: 0.5;
|
|
3440
3441
|
}
|
|
3441
3442
|
.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
|
|
3442
3443
|
.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots):hover .sv-svg-icon use,
|
|
3443
3444
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
|
|
3444
3445
|
.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots):hover .sv-svg-icon use {
|
|
3445
|
-
fill: var(--foreground, #161616);
|
|
3446
|
+
fill: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3446
3447
|
opacity: 0.5;
|
|
3447
3448
|
}
|
|
3448
3449
|
svc-toolbox {
|
|
@@ -3453,14 +3454,14 @@ svc-toolbox {
|
|
|
3453
3454
|
|
|
3454
3455
|
.svc-toolbox {
|
|
3455
3456
|
height: 100%;
|
|
3456
|
-
padding: calc(2 * var(--base-unit, 8px));
|
|
3457
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3457
3458
|
box-sizing: border-box;
|
|
3458
3459
|
overflow-y: auto;
|
|
3459
3460
|
direction: rtl;
|
|
3460
3461
|
}
|
|
3461
3462
|
|
|
3462
3463
|
.svc-toolbox--compact {
|
|
3463
|
-
width: calc(10.5 * var(--base-unit, 8px));
|
|
3464
|
+
width: calc(10.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3464
3465
|
overflow: visible;
|
|
3465
3466
|
direction: ltr;
|
|
3466
3467
|
}
|
|
@@ -3481,25 +3482,25 @@ svc-toolbox {
|
|
|
3481
3482
|
}
|
|
3482
3483
|
|
|
3483
3484
|
.svc-toolbox__tool .sv-dots__item {
|
|
3484
|
-
width: calc(6 * var(--base-unit, 8px));
|
|
3485
|
-
margin-top: calc(0.5 * var(--base-unit, 8px));
|
|
3485
|
+
width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3486
|
+
margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3486
3487
|
}
|
|
3487
3488
|
|
|
3488
3489
|
.svc-toolbox__category-separator {
|
|
3489
3490
|
height: 1px;
|
|
3490
|
-
width: calc(6 * var(--base-unit, 8px));
|
|
3491
|
-
background-color: var(--border, #d6d6d6);
|
|
3492
|
-
margin: calc(1 * var(--base-unit, 8px)) 0 calc(1.5 * var(--base-unit, 8px));
|
|
3491
|
+
width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3492
|
+
background-color: var(--sjs-border-default, var(--border, #d6d6d6));
|
|
3493
|
+
margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3493
3494
|
}
|
|
3494
3495
|
|
|
3495
3496
|
.svc-toolbox__category-header {
|
|
3496
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
3497
|
-
padding: calc(1.5 * var(--base-unit, 8px));
|
|
3498
|
-
background: var(--background-dim, #f3f3f3);
|
|
3499
|
-
border-bottom: 1px solid var(--border, #d6d6d6);
|
|
3497
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3498
|
+
padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3499
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
3500
|
+
border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
3500
3501
|
box-sizing: border-box;
|
|
3501
3502
|
width: 100%;
|
|
3502
|
-
min-width: calc(20 * var(--base-unit, 8px));
|
|
3503
|
+
min-width: calc(20 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3503
3504
|
position: relative;
|
|
3504
3505
|
}
|
|
3505
3506
|
|
|
@@ -3509,23 +3510,23 @@ svc-toolbox {
|
|
|
3509
3510
|
|
|
3510
3511
|
.svc-toolbox__category-title {
|
|
3511
3512
|
font-family: var(--font-family);
|
|
3512
|
-
font-size: calc(1.5 * var(--base-unit, 8px));
|
|
3513
|
+
font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3513
3514
|
font-weight: bold;
|
|
3514
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
3515
|
-
color: var(--foreground, #161616);
|
|
3515
|
+
line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3516
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3516
3517
|
vertical-align: middle;
|
|
3517
3518
|
display: block;
|
|
3518
3519
|
}
|
|
3519
3520
|
|
|
3520
3521
|
.svc-toolbox__category-header__controls {
|
|
3521
3522
|
position: absolute;
|
|
3522
|
-
right: calc(1 * var(--base-unit, 8px));
|
|
3523
|
-
top: calc(1 * var(--base-unit, 8px));
|
|
3523
|
+
right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3524
|
+
top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3524
3525
|
display: none;
|
|
3525
3526
|
}
|
|
3526
3527
|
|
|
3527
3528
|
.svc-toolbox__category-header__button {
|
|
3528
|
-
fill: var(--foreground-light, #909090);
|
|
3529
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3529
3530
|
}
|
|
3530
3531
|
|
|
3531
3532
|
.svc-toolbox__category-header:hover .svc-toolbox__category-header__controls {
|
|
@@ -3537,7 +3538,7 @@ svc-toolbox {
|
|
|
3537
3538
|
}
|
|
3538
3539
|
.svc-toolbox__tool .sv-action__content {
|
|
3539
3540
|
display: flex;
|
|
3540
|
-
padding-top: calc(0.5 * var(--base-unit, 8px));
|
|
3541
|
+
padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3541
3542
|
flex-direction: column;
|
|
3542
3543
|
align-items: flex-start;
|
|
3543
3544
|
}
|
|
@@ -3577,9 +3578,9 @@ svc-toolbox {
|
|
|
3577
3578
|
}
|
|
3578
3579
|
|
|
3579
3580
|
.svc-side-bar__container-header {
|
|
3580
|
-
background: var(--background, #fff);
|
|
3581
|
-
box-shadow: inset 0px -2px 0px var(--primary, #19b394);
|
|
3582
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
3581
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3582
|
+
box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3583
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3583
3584
|
display: flex;
|
|
3584
3585
|
}
|
|
3585
3586
|
|
|
@@ -3587,9 +3588,9 @@ svc-toolbox {
|
|
|
3587
3588
|
display: flex;
|
|
3588
3589
|
flex-direction: column;
|
|
3589
3590
|
align-items: flex-start;
|
|
3590
|
-
height: calc(100% - (8 * var(--base-unit, 8px)));
|
|
3591
|
+
height: calc(100% - (8 * var(--sjs-base-unit, var(--base-unit, 8px))));
|
|
3591
3592
|
overflow-y: auto;
|
|
3592
|
-
background-color: var(--background, #fff);
|
|
3593
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3593
3594
|
}
|
|
3594
3595
|
|
|
3595
3596
|
.svc-side-bar__container-container {
|
|
@@ -3597,24 +3598,24 @@ svc-toolbox {
|
|
|
3597
3598
|
flex-direction: column;
|
|
3598
3599
|
align-items: flex-start;
|
|
3599
3600
|
width: 100%;
|
|
3600
|
-
padding: 0px calc(2 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
3601
|
+
padding: 0px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3601
3602
|
box-sizing: border-box;
|
|
3602
|
-
background: var(--background-dim, #f3f3f3);
|
|
3603
|
-
box-shadow: inset 0px -1px 0px var(--border, #d6d6d6);
|
|
3603
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
3604
|
+
box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
|
|
3604
3605
|
}
|
|
3605
3606
|
|
|
3606
3607
|
.svc-side-bar__container-title {
|
|
3607
3608
|
display: flex;
|
|
3608
|
-
line-height: calc(4.5 * var(--base-unit, 8px));
|
|
3609
|
+
line-height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3609
3610
|
flex-grow: 1;
|
|
3610
3611
|
flex-shrink: 0;
|
|
3611
3612
|
justify-content: flex-end;
|
|
3612
|
-
padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
3613
|
+
padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3613
3614
|
}
|
|
3614
3615
|
|
|
3615
3616
|
.svc-side-bar__container-actions {
|
|
3616
3617
|
width: 100%;
|
|
3617
|
-
padding: calc(1.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
|
|
3618
|
+
padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3618
3619
|
}
|
|
3619
3620
|
.svc-side-bar__container-actions .sv-action-bar {
|
|
3620
3621
|
justify-content: flex-end;
|
|
@@ -3627,9 +3628,9 @@ svc-toolbox {
|
|
|
3627
3628
|
|
|
3628
3629
|
.svc-flex-column.svc-side-bar__wrapper {
|
|
3629
3630
|
width: auto;
|
|
3630
|
-
border-left: 1px solid var(--border, #d6d6d6);
|
|
3631
|
+
border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
3631
3632
|
height: 100%;
|
|
3632
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
3633
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
3633
3634
|
}
|
|
3634
3635
|
|
|
3635
3636
|
.svc-side-bar {
|
|
@@ -3641,7 +3642,7 @@ svc-toolbox {
|
|
|
3641
3642
|
overflow: visible;
|
|
3642
3643
|
}
|
|
3643
3644
|
.svc-flyout-side-bar .svc-side-bar__shadow {
|
|
3644
|
-
background-color: var(--foreground-light, #909090);
|
|
3645
|
+
background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3645
3646
|
opacity: 0.75;
|
|
3646
3647
|
position: absolute;
|
|
3647
3648
|
top: 0;
|
|
@@ -3689,12 +3690,12 @@ svc-toolbox {
|
|
|
3689
3690
|
.sv-mobile-side-bar .svc-side-bar__container-title {
|
|
3690
3691
|
display: block;
|
|
3691
3692
|
font-weight: bold;
|
|
3692
|
-
font-size: calc(3 * var(--base-unit, 8px));
|
|
3693
|
-
line-height: calc(4 * var(--base-unit, 8px));
|
|
3693
|
+
font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3694
|
+
line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3694
3695
|
flex: unset;
|
|
3695
3696
|
}
|
|
3696
3697
|
.sv-mobile-side-bar .svc-side-bar__wrapper {
|
|
3697
|
-
top: calc(2 * var(--base-unit, 8px));
|
|
3698
|
+
top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3698
3699
|
background: none;
|
|
3699
3700
|
}
|
|
3700
3701
|
.sv-mobile-side-bar .svc-side-bar__container {
|
|
@@ -3703,20 +3704,20 @@ svc-toolbox {
|
|
|
3703
3704
|
}
|
|
3704
3705
|
.sv-mobile-side-bar .svc-side-bar__container-header {
|
|
3705
3706
|
border: unset;
|
|
3706
|
-
box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
3707
|
-
border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;
|
|
3707
|
+
box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3708
|
+
border-radius: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px 0px;
|
|
3708
3709
|
}
|
|
3709
3710
|
.sv-mobile-side-bar .svc-side-bar__container-content {
|
|
3710
|
-
height: calc(100% - 20 * var(--base-unit, 8px));
|
|
3711
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
3711
|
+
height: calc(100% - 20 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3712
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
3712
3713
|
}
|
|
3713
3714
|
.sv-mobile-side-bar .svc-side-bar__container-close {
|
|
3714
3715
|
display: flex;
|
|
3715
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
3716
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
3716
3717
|
}
|
|
3717
3718
|
.sv-mobile-side-bar .svc-side-bar__container-close .svc-side-bar__container-close-button {
|
|
3718
3719
|
width: 100%;
|
|
3719
|
-
margin: calc(2 * var(--base-unit, 8px));
|
|
3720
|
+
margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3720
3721
|
}
|
|
3721
3722
|
|
|
3722
3723
|
.svc-side-bar .svc-toolbox {
|
|
@@ -3725,7 +3726,7 @@ svc-toolbox {
|
|
|
3725
3726
|
.spg-action-bar {
|
|
3726
3727
|
display: flex;
|
|
3727
3728
|
box-sizing: content-box;
|
|
3728
|
-
padding-right: calc(0.5 * var(--base-unit, 8px));
|
|
3729
|
+
padding-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3729
3730
|
position: relative;
|
|
3730
3731
|
align-items: center;
|
|
3731
3732
|
margin-left: auto;
|
|
@@ -3741,46 +3742,46 @@ svc-toolbox {
|
|
|
3741
3742
|
-moz-appearance: none;
|
|
3742
3743
|
appearance: none;
|
|
3743
3744
|
display: flex;
|
|
3744
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
3745
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3745
3746
|
box-sizing: border-box;
|
|
3746
3747
|
border: none;
|
|
3747
|
-
color: var(--primary, #19b394);
|
|
3748
|
+
color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3748
3749
|
font-weight: 600;
|
|
3749
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
3750
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
3750
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3751
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3751
3752
|
font-family: var(--font-family);
|
|
3752
|
-
border-radius: calc(12.5 * var(--base-unit, 8px));
|
|
3753
|
+
border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3753
3754
|
background-color: transparent;
|
|
3754
3755
|
cursor: pointer;
|
|
3755
3756
|
}
|
|
3756
3757
|
.spg-action-button:hover, .spg-action-button:focus {
|
|
3757
3758
|
opacity: 1;
|
|
3758
3759
|
outline: none;
|
|
3759
|
-
background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
|
|
3760
|
+
background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
|
|
3760
3761
|
}
|
|
3761
3762
|
.spg-action-button:hover use, .spg-action-button:focus use {
|
|
3762
|
-
fill: var(--primary, #19b394);
|
|
3763
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3763
3764
|
}
|
|
3764
3765
|
|
|
3765
3766
|
.spg-action-button__icon {
|
|
3766
3767
|
display: block;
|
|
3767
3768
|
}
|
|
3768
3769
|
.spg-action-button__icon use {
|
|
3769
|
-
fill: var(--foreground-light, #909090);
|
|
3770
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3770
3771
|
}
|
|
3771
3772
|
|
|
3772
3773
|
.spg-action-button--danger {
|
|
3773
|
-
color: var(--red, #e60a3e);
|
|
3774
|
+
color: var(--sjs-special-red, var(--red, #e60a3e));
|
|
3774
3775
|
}
|
|
3775
3776
|
.spg-action-button--danger:hover, .spg-action-button--danger:focus {
|
|
3776
|
-
background-color: var(--red-light, rgba(
|
|
3777
|
+
background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
|
|
3777
3778
|
}
|
|
3778
3779
|
.spg-action-button--danger:hover use, .spg-action-button--danger:focus use {
|
|
3779
|
-
fill: var(--red, #e60a3e);
|
|
3780
|
+
fill: var(--sjs-special-red, var(--red, #e60a3e));
|
|
3780
3781
|
}
|
|
3781
3782
|
|
|
3782
3783
|
button.spg-action-button--large {
|
|
3783
|
-
padding: calc(0.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
3784
|
+
padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3784
3785
|
}
|
|
3785
3786
|
|
|
3786
3787
|
.spg-action-button:disabled {
|
|
@@ -3798,7 +3799,7 @@ button.spg-action-button--large {
|
|
|
3798
3799
|
}
|
|
3799
3800
|
|
|
3800
3801
|
.spg-action-button--text {
|
|
3801
|
-
padding: calc(0.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
3802
|
+
padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3802
3803
|
}
|
|
3803
3804
|
|
|
3804
3805
|
.spg-question {
|
|
@@ -3815,18 +3816,18 @@ button.spg-action-button--large {
|
|
|
3815
3816
|
.spg-question__title {
|
|
3816
3817
|
width: 100%;
|
|
3817
3818
|
margin: 0;
|
|
3818
|
-
padding: calc(1 * var(--base-unit, 8px)) 0;
|
|
3819
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
3820
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
3819
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
3820
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3821
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3821
3822
|
font-family: var(--font-family);
|
|
3822
|
-
color: var(--foreground-light, #909090);
|
|
3823
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3823
3824
|
font-weight: normal;
|
|
3824
3825
|
box-sizing: border-box;
|
|
3825
3826
|
}
|
|
3826
3827
|
|
|
3827
3828
|
.spg-question__content {
|
|
3828
3829
|
width: 100%;
|
|
3829
|
-
color: var(--primary, #19b394);
|
|
3830
|
+
color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3830
3831
|
cursor: pointer;
|
|
3831
3832
|
}
|
|
3832
3833
|
|
|
@@ -3846,40 +3847,40 @@ button.spg-action-button--large {
|
|
|
3846
3847
|
align-items: flex-end;
|
|
3847
3848
|
padding: 0px;
|
|
3848
3849
|
font-family: var(--font-family);
|
|
3849
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
3850
|
-
font-size: calc(1.5 * var(--base-unit, 8px));
|
|
3851
|
-
color: var(--foreground-light, #909090);
|
|
3850
|
+
line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3851
|
+
font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3852
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3852
3853
|
position: absolute;
|
|
3853
|
-
inset-inline-end: calc(0.75 * var(--base-unit, 8px));
|
|
3854
|
-
inset-block-end: calc(0.5 * var(--base-unit, 8px));
|
|
3854
|
+
inset-inline-end: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3855
|
+
inset-block-end: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3855
3856
|
}
|
|
3856
3857
|
|
|
3857
3858
|
.spg-question__description {
|
|
3858
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
3859
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
3860
|
-
color: var(--foreground, #161616);
|
|
3861
|
-
padding-bottom: calc(2 * var(--base-unit, 8px));
|
|
3859
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3860
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3861
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3862
|
+
padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3862
3863
|
white-space: normal;
|
|
3863
3864
|
}
|
|
3864
3865
|
|
|
3865
3866
|
.spg-row-narrow__question {
|
|
3866
|
-
margin-top: calc(-2 * var(--base-unit, 8px));
|
|
3867
|
+
margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3867
3868
|
}
|
|
3868
3869
|
|
|
3869
3870
|
.spg-row--multiple > div > .spg-row-narrow__question {
|
|
3870
|
-
margin-top: calc(-1 * var(--base-unit, 8px));
|
|
3871
|
+
margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3871
3872
|
}
|
|
3872
3873
|
|
|
3873
3874
|
.spg-question--location--left {
|
|
3874
3875
|
flex-direction: row;
|
|
3875
|
-
background: var(--background, #fff);
|
|
3876
|
-
box-shadow: inset 0 0 0 1px var(--border-inside, rgba(0, 0, 0, 0.16));
|
|
3877
|
-
line-height: calc(6 * var(--base-unit, 8px));
|
|
3876
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3877
|
+
box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
|
|
3878
|
+
line-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3878
3879
|
vertical-align: middle;
|
|
3879
3880
|
align-items: stretch;
|
|
3880
3881
|
}
|
|
3881
3882
|
.spg-question--location--left:focus-within {
|
|
3882
|
-
box-shadow: inset 0 0 0 2px var(--primary, #19b394);
|
|
3883
|
+
box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3883
3884
|
}
|
|
3884
3885
|
|
|
3885
3886
|
.spg-question__header--location--left {
|
|
@@ -3891,8 +3892,8 @@ button.spg-action-button--large {
|
|
|
3891
3892
|
align-items: center;
|
|
3892
3893
|
}
|
|
3893
3894
|
.spg-question__header--location--left .spg-question__title {
|
|
3894
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
3895
|
-
border-right: 1px solid var(--border, #d6d6d6);
|
|
3895
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3896
|
+
border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
3896
3897
|
display: inline-block;
|
|
3897
3898
|
}
|
|
3898
3899
|
|
|
@@ -3910,48 +3911,48 @@ button.spg-action-button--large {
|
|
|
3910
3911
|
|
|
3911
3912
|
.spg-row--multiple {
|
|
3912
3913
|
display: flex;
|
|
3913
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
3914
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3914
3915
|
flex-wrap: wrap;
|
|
3915
3916
|
}
|
|
3916
3917
|
.spg-row--multiple > div {
|
|
3917
3918
|
flex-grow: 1;
|
|
3918
|
-
min-width: calc(25.5 * var(--base-unit, 8px));
|
|
3919
|
+
min-width: calc(25.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3919
3920
|
}
|
|
3920
3921
|
.spg-row--multiple > div .spg-question__header--location--left {
|
|
3921
|
-
min-width: calc(8 * var(--base-unit, 8px));
|
|
3922
|
+
min-width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3922
3923
|
}
|
|
3923
3924
|
.spg-row--multiple > div input {
|
|
3924
|
-
min-width: max(17 * var(--base-unit, 8px), 100%);
|
|
3925
|
+
min-width: max(17 * var(--sjs-base-unit, var(--base-unit, 8px)), 100%);
|
|
3925
3926
|
width: 0;
|
|
3926
3927
|
}
|
|
3927
3928
|
|
|
3928
3929
|
.spg-question__erbox {
|
|
3929
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
|
|
3930
|
-
color: var(--foreground, #161616);
|
|
3931
|
-
background-color: var(--red-light, rgba(
|
|
3932
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
3933
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
3930
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3931
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3932
|
+
background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
|
|
3933
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3934
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3934
3935
|
}
|
|
3935
3936
|
.spg-question__erbox > div {
|
|
3936
3937
|
display: flex;
|
|
3937
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
3938
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3938
3939
|
}
|
|
3939
3940
|
|
|
3940
3941
|
.spg-question__erbox-icon {
|
|
3941
3942
|
display: block;
|
|
3942
3943
|
flex-grow: 0;
|
|
3943
3944
|
flex-shrink: 0;
|
|
3944
|
-
width: calc(3 * var(--base-unit, 8px));
|
|
3945
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
3946
|
-
background-size: calc(3 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
3945
|
+
width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3946
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3947
|
+
background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3947
3948
|
background-repeat: no-repeat;
|
|
3948
3949
|
background-position: 0 0;
|
|
3949
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
3950
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3950
3951
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.0336 15.4803L14.5736 1.45346C13.9936 0.487805 12.9936 0 12.0036 0C11.0136 0 10.0136 0.487805 9.43364 1.45346L0.973642 15.4803C-0.226358 17.4714 1.21364 20 3.54364 20H20.4536C22.7836 20 24.2236 17.4714 23.0236 15.4803H23.0336ZM21.3336 17.5112C21.2436 17.6605 20.9936 18.0189 20.4636 18.0189H3.54364C3.01364 18.0189 2.76364 17.6705 2.67364 17.5112C2.58364 17.3519 2.41364 16.9537 2.68364 16.5057L11.1436 2.47885C11.4036 2.04082 11.8336 1.99104 12.0036 1.99104C12.1736 1.99104 12.5936 2.04082 12.8636 2.47885L21.3136 16.5057C21.5836 16.9537 21.4136 17.3519 21.3236 17.5112H21.3336ZM13.0036 7.05824V12.0358C13.0036 12.5834 12.5536 13.0314 12.0036 13.0314C11.4536 13.0314 11.0036 12.5834 11.0036 12.0358V7.05824C11.0036 6.5107 11.4536 6.06272 12.0036 6.06272C12.5536 6.06272 13.0036 6.5107 13.0036 7.05824ZM13.0036 15.0224C13.0036 15.5699 12.5536 16.0179 12.0036 16.0179C11.4536 16.0179 11.0036 15.5699 11.0036 15.0224C11.0036 14.4749 11.4536 14.0269 12.0036 14.0269C12.5536 14.0269 13.0036 14.4749 13.0036 15.0224Z' fill='%23E60A3E'/%3E%3C/svg%3E");
|
|
3951
3952
|
}
|
|
3952
3953
|
|
|
3953
3954
|
.spg-question__erbox--location--bottom {
|
|
3954
|
-
margin-top: calc(1 * var(--base-unit, 8px));
|
|
3955
|
+
margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3955
3956
|
}
|
|
3956
3957
|
|
|
3957
3958
|
.spg-input {
|
|
@@ -3959,63 +3960,63 @@ button.spg-action-button--large {
|
|
|
3959
3960
|
-moz-appearance: none;
|
|
3960
3961
|
appearance: none;
|
|
3961
3962
|
display: block;
|
|
3962
|
-
background-color: var(--background, #fff);
|
|
3963
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
3963
3964
|
box-sizing: border-box;
|
|
3964
3965
|
width: 100%;
|
|
3965
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
3966
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3966
3967
|
border: none;
|
|
3967
|
-
box-shadow: inset 0 0 0 1px var(--border-inside, rgba(0, 0, 0, 0.16));
|
|
3968
|
-
padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
3968
|
+
box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
|
|
3969
|
+
padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3969
3970
|
outline: none;
|
|
3970
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
3971
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3971
3972
|
font-family: var(--font-family);
|
|
3972
|
-
color: var(--foreground, #161616);
|
|
3973
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3973
3974
|
}
|
|
3974
3975
|
|
|
3975
3976
|
.spg-input::placeholder {
|
|
3976
|
-
color: var(--foreground-light, #909090);
|
|
3977
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
3977
3978
|
}
|
|
3978
3979
|
|
|
3979
3980
|
.spg-input:focus,
|
|
3980
3981
|
.spg-input.spg-dropdown:focus,
|
|
3981
3982
|
.spg-input.spg-dropdown:focus-within,
|
|
3982
3983
|
.spg-input-container:focus-within {
|
|
3983
|
-
box-shadow: inset 0 0 0 2px var(--primary, #19b394);
|
|
3984
|
+
box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
3984
3985
|
}
|
|
3985
3986
|
|
|
3986
3987
|
.spg-input:disabled,
|
|
3987
3988
|
.spg-input:disabled::placeholder {
|
|
3988
|
-
color: var(--foreground, #161616);
|
|
3989
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
3989
3990
|
opacity: 0.25;
|
|
3990
3991
|
}
|
|
3991
3992
|
|
|
3992
3993
|
.spg-input[type=color] {
|
|
3993
3994
|
padding-left: 0;
|
|
3994
3995
|
padding-right: 0;
|
|
3995
|
-
min-width: calc(8 * var(--base-unit, 8px));
|
|
3996
|
+
min-width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
3996
3997
|
}
|
|
3997
3998
|
|
|
3998
3999
|
.spg-input__edit-button {
|
|
3999
4000
|
position: relative;
|
|
4000
4001
|
box-sizing: border-box;
|
|
4001
4002
|
appearance: none;
|
|
4002
|
-
background: var(--background, #fff);
|
|
4003
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4003
4004
|
border: none;
|
|
4004
4005
|
outline: none;
|
|
4005
|
-
width: calc(5 * var(--base-unit, 8px));
|
|
4006
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
4007
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
4006
|
+
width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4007
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4008
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4008
4009
|
line-height: 0;
|
|
4009
4010
|
}
|
|
4010
4011
|
.spg-input__edit-button:hover {
|
|
4011
|
-
background: var(--background-dim, #f3f3f3);
|
|
4012
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
4012
4013
|
}
|
|
4013
4014
|
.spg-input__edit-button:active {
|
|
4014
4015
|
opacity: 0.5;
|
|
4015
4016
|
}
|
|
4016
4017
|
.spg-input__edit-button:disabled {
|
|
4017
4018
|
opacity: 0.25;
|
|
4018
|
-
background: var(--background, #fff);
|
|
4019
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4019
4020
|
}
|
|
4020
4021
|
.spg-input__edit-button svg {
|
|
4021
4022
|
height: 24px;
|
|
@@ -4024,55 +4025,59 @@ button.spg-action-button--large {
|
|
|
4024
4025
|
}
|
|
4025
4026
|
|
|
4026
4027
|
.spg-input.spg-input--error {
|
|
4027
|
-
box-shadow: 0 0 0 1px inset var(--red, #e60a3e);
|
|
4028
|
+
box-shadow: 0 0 0 1px inset var(--sjs-special-red, var(--red, #e60a3e));
|
|
4028
4029
|
}
|
|
4029
4030
|
|
|
4030
4031
|
.spg-input-container {
|
|
4031
4032
|
display: flex;
|
|
4032
4033
|
justify-content: space-between;
|
|
4033
4034
|
cursor: default;
|
|
4034
|
-
padding: calc(0.5 * var(--base-unit, 8px));
|
|
4035
|
+
padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4035
4036
|
align-items: center;
|
|
4036
|
-
gap: calc(0.5 * var(--base-unit, 8px));
|
|
4037
|
-
box-shadow: 0 0 0 1px inset var(--border-inside, rgba(0, 0, 0, 0.16));
|
|
4037
|
+
gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4038
|
+
box-shadow: 0 0 0 1px inset var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
|
|
4038
4039
|
}
|
|
4039
4040
|
|
|
4040
4041
|
.spg-input-container__input {
|
|
4041
4042
|
flex-grow: 1;
|
|
4042
4043
|
width: 100%;
|
|
4043
|
-
padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
|
|
4044
|
-
color: var(--foreground, #161616);
|
|
4045
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
4044
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4045
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
4046
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4046
4047
|
font-family: var(--font-family);
|
|
4047
4048
|
outline: none;
|
|
4048
4049
|
border: none;
|
|
4049
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
4050
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4050
4051
|
background-color: transparent;
|
|
4051
4052
|
}
|
|
4052
4053
|
|
|
4053
4054
|
.spg-input-container__buttons-container {
|
|
4054
4055
|
display: flex;
|
|
4055
|
-
gap: calc(0.5 * var(--base-unit, 8px));
|
|
4056
|
+
gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4056
4057
|
}
|
|
4057
4058
|
|
|
4058
4059
|
.spg-dropdown {
|
|
4059
4060
|
border-radius: 0;
|
|
4060
4061
|
display: flex;
|
|
4061
|
-
padding-right: calc(5.5 * var(--base-unit, 8px));
|
|
4062
|
+
padding-right: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4062
4063
|
line-height: normal;
|
|
4063
|
-
background-position: right calc(1.625 * var(--base-unit, 8px)) top 50%, 0 0;
|
|
4064
|
+
background-position: right calc(1.625 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
|
|
4064
4065
|
}
|
|
4065
4066
|
|
|
4066
4067
|
.spg-dropdown__filter-string-input {
|
|
4067
4068
|
line-height: unset;
|
|
4068
4069
|
}
|
|
4069
4070
|
|
|
4071
|
+
.spg-dropdown_chevron-button {
|
|
4072
|
+
line-height: normal;
|
|
4073
|
+
}
|
|
4074
|
+
|
|
4070
4075
|
.spg-comment {
|
|
4071
|
-
height: calc(9 * var(--base-unit, 8px));
|
|
4076
|
+
height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4072
4077
|
max-width: 100%;
|
|
4073
|
-
min-width: calc(6 * var(--base-unit, 8px));
|
|
4074
|
-
min-height: calc(6 * var(--base-unit, 8px));
|
|
4075
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
4078
|
+
min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4079
|
+
min-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4080
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4076
4081
|
}
|
|
4077
4082
|
|
|
4078
4083
|
.spg-panel__title {
|
|
@@ -4081,34 +4086,34 @@ button.spg-action-button--large {
|
|
|
4081
4086
|
appearance: none;
|
|
4082
4087
|
box-sizing: border-box;
|
|
4083
4088
|
width: 100%;
|
|
4084
|
-
padding: calc(2 * var(--base-unit, 8px));
|
|
4089
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4085
4090
|
border: none;
|
|
4086
4091
|
outline: none;
|
|
4087
|
-
color: var(--foreground-light, #909090);
|
|
4092
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
4088
4093
|
cursor: pointer;
|
|
4089
4094
|
text-align: left;
|
|
4090
|
-
background-color: var(--background, #fff);
|
|
4091
|
-
box-shadow: inset 0px -1px 0px var(--border, #d6d6d6);
|
|
4095
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4096
|
+
box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4092
4097
|
font-family: var(--font-family);
|
|
4093
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
4098
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4094
4099
|
font-weight: 400;
|
|
4095
4100
|
margin: 0;
|
|
4096
4101
|
}
|
|
4097
4102
|
|
|
4098
4103
|
.spg-panel__title:disabled,
|
|
4099
4104
|
.spg-panel__title:disabled:hover {
|
|
4100
|
-
color: var(--foreground, #161616);
|
|
4105
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
4101
4106
|
opacity: 0.25;
|
|
4102
4107
|
cursor: default;
|
|
4103
4108
|
}
|
|
4104
4109
|
|
|
4105
4110
|
.spg-panel__title--expandable:not(.spg-panel__title[aria-expanded=true]):hover, .spg-panel__title--expandable:not(.spg-panel__title[aria-expanded=true]):focus {
|
|
4106
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
4111
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
4107
4112
|
}
|
|
4108
4113
|
|
|
4109
4114
|
.spg-panel__title[aria-expanded=true],
|
|
4110
4115
|
.spg-panel__title--expanded {
|
|
4111
|
-
color: var(--foreground, #161616);
|
|
4116
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
4112
4117
|
font-weight: 600;
|
|
4113
4118
|
}
|
|
4114
4119
|
|
|
@@ -4117,27 +4122,27 @@ button.spg-action-button--large {
|
|
|
4117
4122
|
flex-direction: column;
|
|
4118
4123
|
align-items: flex-start;
|
|
4119
4124
|
width: 100%;
|
|
4120
|
-
padding: 0 calc(4 * var(--base-unit, 8px)) calc(5 * var(--base-unit, 8px));
|
|
4125
|
+
padding: 0 calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4121
4126
|
box-sizing: border-box;
|
|
4122
|
-
background: var(--background-dim, #f3f3f3);
|
|
4123
|
-
box-shadow: inset 0px -1px 0px var(--border, #d6d6d6);
|
|
4127
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
4128
|
+
box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4124
4129
|
}
|
|
4125
4130
|
|
|
4126
4131
|
.spg-panel__content .spg-row {
|
|
4127
4132
|
width: 100%;
|
|
4128
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
4133
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4129
4134
|
}
|
|
4130
4135
|
.spg-panel__content .spg-row--multiple {
|
|
4131
|
-
margin-top: calc(1 * var(--base-unit, 8px));
|
|
4136
|
+
margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4132
4137
|
}
|
|
4133
4138
|
|
|
4134
4139
|
.sv-mobile-side-bar .spg-panel__content {
|
|
4135
|
-
padding: 0 calc(2 * var(--base-unit, 8px)) calc(5 * var(--base-unit, 8px));
|
|
4140
|
+
padding: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4136
4141
|
}
|
|
4137
4142
|
|
|
4138
4143
|
.spg-checkbox {
|
|
4139
4144
|
cursor: pointer;
|
|
4140
|
-
margin-top: calc(2 * var(--base-unit, 8px));
|
|
4145
|
+
margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4141
4146
|
}
|
|
4142
4147
|
|
|
4143
4148
|
.spg-checkbox--disabled {
|
|
@@ -4147,36 +4152,36 @@ button.spg-action-button--large {
|
|
|
4147
4152
|
cursor: default;
|
|
4148
4153
|
}
|
|
4149
4154
|
.spg-checkbox--disabled .spg-checkbox__caption {
|
|
4150
|
-
color: var(--foreground-light, #909090);
|
|
4155
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
4151
4156
|
}
|
|
4152
4157
|
|
|
4153
4158
|
.spg-checkbox__caption {
|
|
4154
4159
|
font-family: var(--font-family);
|
|
4155
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
4156
|
-
color: var(--foreground, #161616);
|
|
4157
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
4160
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4161
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
4162
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4158
4163
|
}
|
|
4159
4164
|
|
|
4160
4165
|
.spg-checkbox__rectangle {
|
|
4161
|
-
background: var(--background, #fff);
|
|
4162
|
-
border: 1px solid var(--border, #d6d6d6);
|
|
4166
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4167
|
+
border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4163
4168
|
box-sizing: border-box;
|
|
4164
|
-
width: calc(3 * var(--base-unit, 8px));
|
|
4165
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
4169
|
+
width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4170
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4166
4171
|
flex-shrink: 0;
|
|
4167
4172
|
padding: 1px 1px;
|
|
4168
4173
|
}
|
|
4169
4174
|
|
|
4170
4175
|
.spg-checkbox:hover .spg-checkbox__rectangle {
|
|
4171
|
-
background-color: var(--background-dim, #f3f3f3);
|
|
4176
|
+
background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
4172
4177
|
}
|
|
4173
4178
|
|
|
4174
4179
|
.spg-checkbox--disabled .spg-checkbox__rectangle:hover {
|
|
4175
|
-
background: var(--background, #fff);
|
|
4180
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4176
4181
|
}
|
|
4177
4182
|
|
|
4178
4183
|
.spg-checkbox__control:focus + .spg-checkbox__rectangle {
|
|
4179
|
-
outline: 2px solid var(--primary, #19b394);
|
|
4184
|
+
outline: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
4180
4185
|
outline-offset: -2px;
|
|
4181
4186
|
}
|
|
4182
4187
|
|
|
@@ -4186,15 +4191,15 @@ button.spg-action-button--large {
|
|
|
4186
4191
|
|
|
4187
4192
|
.spg-checkbox--checked .spg-checkbox__svg {
|
|
4188
4193
|
display: block;
|
|
4189
|
-
width: calc(2.5 * var(--base-unit, 8px));
|
|
4190
|
-
height: calc(2.5 * var(--base-unit, 8px));
|
|
4194
|
+
width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4195
|
+
height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4191
4196
|
background-repeat: no-repeat;
|
|
4192
|
-
background-size: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
|
|
4193
|
-
fill: var(--primary, #19b394);
|
|
4197
|
+
background-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4198
|
+
fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
4194
4199
|
}
|
|
4195
4200
|
|
|
4196
4201
|
.spg-checkbox--disabled.spg-checkbox--checked .spg-checkbox__svg {
|
|
4197
|
-
fill: var(--border, #d6d6d6);
|
|
4202
|
+
fill: var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4198
4203
|
}
|
|
4199
4204
|
|
|
4200
4205
|
.spg-checkbox__control {
|
|
@@ -4219,30 +4224,30 @@ button.spg-action-button--large {
|
|
|
4219
4224
|
.spg-selectbase__label {
|
|
4220
4225
|
display: flex;
|
|
4221
4226
|
align-items: flex-start;
|
|
4222
|
-
gap: calc(1 * var(--base-unit, 8px));
|
|
4227
|
+
gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4223
4228
|
}
|
|
4224
4229
|
|
|
4225
4230
|
.spg-matrixdynamic__drag-element {
|
|
4226
|
-
padding: calc(2 * var(--base-unit, 8px));
|
|
4231
|
+
padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4227
4232
|
}
|
|
4228
4233
|
.spg-matrixdynamic__drag-element:hover {
|
|
4229
|
-
background-color: var(--background, #fff);
|
|
4234
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4230
4235
|
}
|
|
4231
4236
|
.spg-matrixdynamic__drag-element:after {
|
|
4232
4237
|
content: " ";
|
|
4233
4238
|
display: block;
|
|
4234
|
-
height: calc(0.5 * var(--base-unit, 8px));
|
|
4239
|
+
height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4235
4240
|
}
|
|
4236
4241
|
|
|
4237
4242
|
.spg-drag-element__svg {
|
|
4238
|
-
width: calc(3 * var(--base-unit, 8px));
|
|
4239
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
4240
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
4243
|
+
width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4244
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4245
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4241
4246
|
display: block;
|
|
4242
4247
|
opacity: 0.5;
|
|
4243
4248
|
}
|
|
4244
4249
|
.spg-drag-element__svg use {
|
|
4245
|
-
fill: var(--foreground-light, #909090);
|
|
4250
|
+
fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
4246
4251
|
}
|
|
4247
4252
|
|
|
4248
4253
|
.spg-matrixdynamic__drag-drop-ghost-position-top,
|
|
@@ -4254,8 +4259,8 @@ button.spg-action-button--large {
|
|
|
4254
4259
|
.spg-matrixdynamic__drag-drop-ghost-position-bottom::after {
|
|
4255
4260
|
content: "";
|
|
4256
4261
|
width: 100%;
|
|
4257
|
-
height: calc(0.5 * var(--base-unit, 8px));
|
|
4258
|
-
background-color: var(--secondary, #ff9814);
|
|
4262
|
+
height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4263
|
+
background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
|
|
4259
4264
|
position: absolute;
|
|
4260
4265
|
left: 0;
|
|
4261
4266
|
}
|
|
@@ -4269,13 +4274,13 @@ button.spg-action-button--large {
|
|
|
4269
4274
|
}
|
|
4270
4275
|
|
|
4271
4276
|
.spg-matrixdynamic__placeholder {
|
|
4272
|
-
padding: calc(6 * var(--base-unit, 8px)) 0;
|
|
4277
|
+
padding: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
4273
4278
|
display: flex;
|
|
4274
4279
|
flex-direction: column;
|
|
4275
4280
|
justify-content: center;
|
|
4276
4281
|
align-items: center;
|
|
4277
|
-
background: var(--background, #fff);
|
|
4278
|
-
border: 1px solid var(--border, #d6d6d6);
|
|
4282
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4283
|
+
border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4279
4284
|
box-sizing: border-box;
|
|
4280
4285
|
}
|
|
4281
4286
|
.spg-matrixdynamic__placeholder .spg-matrixdynamic__add-btn {
|
|
@@ -4283,64 +4288,64 @@ button.spg-action-button--large {
|
|
|
4283
4288
|
}
|
|
4284
4289
|
|
|
4285
4290
|
.spg-matrixdynamic__placeholder-text {
|
|
4286
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
4287
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
4288
|
-
color: var(--foreground-light, #909090);
|
|
4291
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4292
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4293
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
4289
4294
|
}
|
|
4290
4295
|
|
|
4291
4296
|
.spg-matrixdynamic__add-btn {
|
|
4292
4297
|
display: none;
|
|
4293
4298
|
appearance: none;
|
|
4294
4299
|
border: none;
|
|
4295
|
-
margin-top: calc(0.5 * var(--base-unit, 8px));
|
|
4300
|
+
margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4296
4301
|
background: transparent;
|
|
4297
|
-
color: var(--primary, #19b394);
|
|
4302
|
+
color: var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
4298
4303
|
font-family: var(--font-family);
|
|
4299
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
4304
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4300
4305
|
font-weight: 600;
|
|
4301
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
4306
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4302
4307
|
}
|
|
4303
4308
|
|
|
4304
4309
|
.spg-smiley-icon {
|
|
4305
|
-
width: calc(3 * var(--base-unit, 8px));
|
|
4306
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
4307
|
-
margin: calc(1 * var(--base-unit, 8px));
|
|
4310
|
+
width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4311
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4312
|
+
margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4308
4313
|
border-radius: 100px;
|
|
4309
|
-
border: 1px solid var(--foreground, #161616);
|
|
4314
|
+
border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
4310
4315
|
display: flex;
|
|
4311
4316
|
justify-content: center;
|
|
4312
4317
|
align-items: center;
|
|
4313
|
-
margin-right: calc(4 * var(--base-unit, 8px));
|
|
4318
|
+
margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4314
4319
|
}
|
|
4315
4320
|
.spg-smiley-icon svg {
|
|
4316
|
-
width: calc(1.5 * var(--base-unit, 8px));
|
|
4317
|
-
height: calc(1.5 * var(--base-unit, 8px));
|
|
4318
|
-
fill: var(--foreground, #161616);
|
|
4321
|
+
width: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4322
|
+
height: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4323
|
+
fill: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
4319
4324
|
}
|
|
4320
4325
|
|
|
4321
4326
|
.spg-table-wrapper {
|
|
4322
|
-
border: 1px solid var(--border, #d6d6d6);
|
|
4327
|
+
border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4323
4328
|
border-bottom: none;
|
|
4324
4329
|
}
|
|
4325
4330
|
|
|
4326
4331
|
.spg-table {
|
|
4327
4332
|
width: 100%;
|
|
4328
|
-
background-color: var(--background, #fff);
|
|
4333
|
+
background-color: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4329
4334
|
border-collapse: collapse;
|
|
4330
4335
|
}
|
|
4331
4336
|
.spg-table tr {
|
|
4332
|
-
border-bottom: 1px solid var(--border, #d6d6d6);
|
|
4337
|
+
border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4333
4338
|
}
|
|
4334
4339
|
|
|
4335
4340
|
.spg-table__cell {
|
|
4336
4341
|
padding: 0;
|
|
4337
4342
|
}
|
|
4338
4343
|
.spg-table__cell .spg-checkbox {
|
|
4339
|
-
margin: 0 calc(2 * var(--base-unit, 8px));
|
|
4344
|
+
margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4340
4345
|
}
|
|
4341
4346
|
|
|
4342
4347
|
.spg-table__cell--detail-panel {
|
|
4343
|
-
background: var(--background-dim, #f3f3f3);
|
|
4348
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
4344
4349
|
}
|
|
4345
4350
|
.spg-table__cell--detail-panel .spg-panel__content {
|
|
4346
4351
|
box-shadow: none;
|
|
@@ -4352,35 +4357,40 @@ button.spg-action-button--large {
|
|
|
4352
4357
|
|
|
4353
4358
|
.spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input {
|
|
4354
4359
|
appearance: none;
|
|
4355
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
4356
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
4360
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4361
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4357
4362
|
box-shadow: none;
|
|
4358
|
-
border-radius: calc(0.5 * var(--base-unit, 8px));
|
|
4363
|
+
border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4359
4364
|
background-color: transparent;
|
|
4360
|
-
padding: calc(1 * var(--base-unit, 8px));
|
|
4365
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4361
4366
|
height: auto;
|
|
4362
4367
|
}
|
|
4363
4368
|
.spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input[type=color] {
|
|
4364
4369
|
padding-right: 0;
|
|
4365
4370
|
}
|
|
4366
4371
|
.spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input:focus, .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input:focus-within {
|
|
4367
|
-
box-shadow: inset 0 0 0 2px var(--primary, #19b394);
|
|
4372
|
+
box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
|
|
4373
|
+
}
|
|
4374
|
+
|
|
4375
|
+
.spg-table__cell:not(.spg-table__cell--detail-panel) .spg-dropdown_chevron-button {
|
|
4376
|
+
display: none;
|
|
4368
4377
|
}
|
|
4369
4378
|
|
|
4370
4379
|
.spg-table__cell:not(.spg-table__cell--detail-panel) .spg-dropdown {
|
|
4371
4380
|
width: max-content;
|
|
4372
|
-
padding-right: calc(4 * var(--base-unit, 8px));
|
|
4373
|
-
background-size: calc(3 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
|
|
4374
|
-
background-position: right calc(0.5 * var(--base-unit, 8px)) top 50%, 0 0;
|
|
4381
|
+
padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4382
|
+
background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4383
|
+
background-position: right calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
|
|
4375
4384
|
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='%2390909080'/%3E%3C/svg%3E%0A");
|
|
4385
|
+
background-repeat: no-repeat;
|
|
4376
4386
|
}
|
|
4377
4387
|
|
|
4378
4388
|
.spg-table__cell:not(.spg-table__cell--detail-panel):first-of-type .spg-text {
|
|
4379
|
-
padding-left: calc(2 * var(--base-unit, 8px));
|
|
4389
|
+
padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4380
4390
|
}
|
|
4381
4391
|
|
|
4382
4392
|
.spg-table__cell--actions:first-of-type {
|
|
4383
|
-
width: calc(5 * var(--base-unit, 8px));
|
|
4393
|
+
width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4384
4394
|
}
|
|
4385
4395
|
|
|
4386
4396
|
.spg-table__cell--actions:last-of-type .spg-action-bar {
|
|
@@ -4389,16 +4399,16 @@ button.spg-action-button--large {
|
|
|
4389
4399
|
|
|
4390
4400
|
.spg-table__cell--actions > .spg-matrixdynamic__drag-element {
|
|
4391
4401
|
display: inline-block;
|
|
4392
|
-
margin-top: calc(0.5 * var(--base-unit, 8px));
|
|
4402
|
+
margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4393
4403
|
cursor: move;
|
|
4394
4404
|
}
|
|
4395
4405
|
|
|
4396
4406
|
.spg-table__cell--header {
|
|
4397
|
-
font-size: calc(1.5 * var(--base-unit, 8px));
|
|
4407
|
+
font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4398
4408
|
font-weight: normal;
|
|
4399
|
-
color: var(--foreground-light, #909090);
|
|
4400
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
4401
|
-
background: var(--background-dim, #f3f3f3);
|
|
4409
|
+
color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
|
|
4410
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4411
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
4402
4412
|
text-align: left;
|
|
4403
4413
|
white-space: nowrap;
|
|
4404
4414
|
text-overflow: ellipsis;
|
|
@@ -4407,14 +4417,14 @@ button.spg-action-button--large {
|
|
|
4407
4417
|
}
|
|
4408
4418
|
|
|
4409
4419
|
.spg-table__question-wrapper {
|
|
4410
|
-
padding: calc(0.5 * var(--base-unit, 8px)) 0;
|
|
4420
|
+
padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
4411
4421
|
}
|
|
4412
4422
|
|
|
4413
4423
|
.spg-question-group .spg-row {
|
|
4414
4424
|
margin-top: 0;
|
|
4415
4425
|
}
|
|
4416
4426
|
.spg-question-group .spg-row:not(:first-of-type) {
|
|
4417
|
-
margin-top: calc(1 * var(--base-unit, 8px));
|
|
4427
|
+
margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4418
4428
|
}
|
|
4419
4429
|
|
|
4420
4430
|
.spg-color-editor__color-input {
|
|
@@ -4431,7 +4441,7 @@ button.spg-action-button--large {
|
|
|
4431
4441
|
|
|
4432
4442
|
.spg-color-editor__color-item {
|
|
4433
4443
|
display: flex;
|
|
4434
|
-
gap: calc(2 * var(--base-unit, 8px));
|
|
4444
|
+
gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4435
4445
|
}
|
|
4436
4446
|
.spg-color-editor__color-item .spg-color-editor__color-swatch {
|
|
4437
4447
|
margin-left: 0;
|
|
@@ -4442,24 +4452,24 @@ button.spg-action-button--large {
|
|
|
4442
4452
|
flex-shrink: 0;
|
|
4443
4453
|
flex-grow: 0;
|
|
4444
4454
|
border-radius: 3px;
|
|
4445
|
-
width: calc(4 * var(--base-unit, 8px));
|
|
4446
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
4455
|
+
width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4456
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4447
4457
|
box-sizing: border-box;
|
|
4448
4458
|
border: 1px solid rgba(0, 0, 0, 0.16);
|
|
4449
|
-
margin-left: calc(1.5 * var(--base-unit, 8px));
|
|
4459
|
+
margin-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4450
4460
|
}
|
|
4451
4461
|
.spg-color-editor__color-swatch .sv-svg-icon {
|
|
4452
4462
|
position: absolute;
|
|
4453
|
-
width: calc(2 * var(--base-unit, 8px));
|
|
4454
|
-
height: calc(2 * var(--base-unit, 8px));
|
|
4463
|
+
width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4464
|
+
height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4455
4465
|
left: 50%;
|
|
4456
4466
|
top: 50%;
|
|
4457
4467
|
transform: translate(-50%, -50%);
|
|
4458
|
-
fill: var(--background, #fff);
|
|
4468
|
+
fill: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4459
4469
|
}
|
|
4460
4470
|
|
|
4461
4471
|
.spg-color-editor .spg-input__edit-button + * {
|
|
4462
|
-
margin-inline-end: calc(-0.5 * var(--base-unit, 8px));
|
|
4472
|
+
margin-inline-end: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4463
4473
|
}
|
|
4464
4474
|
|
|
4465
4475
|
.spg-file-edit__choose-button {
|
|
@@ -4473,10 +4483,10 @@ button.spg-action-button--large {
|
|
|
4473
4483
|
.spg-theme-builder-root .spg-paneldynamic__separator {
|
|
4474
4484
|
border: none;
|
|
4475
4485
|
margin: 0;
|
|
4476
|
-
height: calc(2 * var(--base-unit, 8px));
|
|
4486
|
+
height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4477
4487
|
}
|
|
4478
4488
|
.spg-theme-builder-root .spg-panel__footer {
|
|
4479
|
-
margin: calc(1 * var(--base-unit, 8px)) auto 0;
|
|
4489
|
+
margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) auto 0;
|
|
4480
4490
|
}
|
|
4481
4491
|
.spg-theme-builder-root .spg-paneldynamic__add-btn {
|
|
4482
4492
|
margin: 0 auto;
|
|
@@ -4489,13 +4499,13 @@ button.spg-action-button--large {
|
|
|
4489
4499
|
}
|
|
4490
4500
|
.spg-theme-builder-root .spg-row--multiple > div {
|
|
4491
4501
|
flex: 1 1 0;
|
|
4492
|
-
min-width: calc(12.5 * var(--base-unit, 8px));
|
|
4502
|
+
min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4493
4503
|
}
|
|
4494
4504
|
.spg-theme-builder-root .spg-row--multiple > div input {
|
|
4495
4505
|
min-width: 0;
|
|
4496
4506
|
}
|
|
4497
4507
|
.spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left {
|
|
4498
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
4508
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4499
4509
|
box-sizing: border-box;
|
|
4500
4510
|
}
|
|
4501
4511
|
.spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left .spg-input {
|
|
@@ -4515,23 +4525,23 @@ button.spg-action-button--large {
|
|
|
4515
4525
|
}
|
|
4516
4526
|
.spg-theme-builder-root .spg-panel__content .spg-panel__content {
|
|
4517
4527
|
padding: 0;
|
|
4518
|
-
padding-bottom: calc(5 * var(--base-unit, 8px));
|
|
4528
|
+
padding-bottom: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4519
4529
|
box-shadow: none;
|
|
4520
4530
|
}
|
|
4521
4531
|
.spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__title {
|
|
4522
4532
|
background-color: transparent;
|
|
4523
4533
|
box-shadow: none;
|
|
4524
|
-
padding: calc(1 * var(--base-unit, 8px)) 0;
|
|
4534
|
+
padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
|
|
4525
4535
|
}
|
|
4526
4536
|
.spg-theme-builder-root .spg-panel__content .spg-panel__content::after {
|
|
4527
4537
|
content: " ";
|
|
4528
4538
|
display: block;
|
|
4529
4539
|
position: relative;
|
|
4530
|
-
left: calc(-4 * var(--base-unit, 8px));
|
|
4531
|
-
top: calc(5 * var(--base-unit, 8px));
|
|
4532
|
-
width: calc(8 * var(--base-unit, 8px) + 100%);
|
|
4540
|
+
left: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4541
|
+
top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4542
|
+
width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)) + 100%);
|
|
4533
4543
|
height: 1px;
|
|
4534
|
-
background-color: var(--border, #d6d6d6);
|
|
4544
|
+
background-color: var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4535
4545
|
}
|
|
4536
4546
|
.spg-theme-builder-root .spg-panel__content .spg-panel__content > .spg-row:first-of-type {
|
|
4537
4547
|
margin-top: 0;
|
|
@@ -4543,7 +4553,7 @@ button.spg-action-button--large {
|
|
|
4543
4553
|
content: none;
|
|
4544
4554
|
}
|
|
4545
4555
|
.spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row {
|
|
4546
|
-
margin-top: calc(1 * var(--base-unit, 8px));
|
|
4556
|
+
margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4547
4557
|
}
|
|
4548
4558
|
.spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row:first-of-type {
|
|
4549
4559
|
margin-top: 0;
|
|
@@ -4575,12 +4585,12 @@ button.spg-action-button--large {
|
|
|
4575
4585
|
|
|
4576
4586
|
.spg-root-modern {
|
|
4577
4587
|
width: 100%;
|
|
4578
|
-
border-right: 1px solid var(--border, #d6d6d6);
|
|
4588
|
+
border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4579
4589
|
box-sizing: border-box;
|
|
4580
4590
|
}
|
|
4581
4591
|
|
|
4582
4592
|
.sv-popup--modal {
|
|
4583
|
-
padding: calc(4 * var(--base-unit, 8px));
|
|
4593
|
+
padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4584
4594
|
}
|
|
4585
4595
|
.sv-popup--modal.sv-property-editor .sv-popup__container .sv-popup_shadow {
|
|
4586
4596
|
background-color: transparent;
|
|
@@ -4597,7 +4607,7 @@ button.spg-action-button--large {
|
|
|
4597
4607
|
}
|
|
4598
4608
|
.sv-popup--modal .sd-body,
|
|
4599
4609
|
.sv-popup--modal .sl-body {
|
|
4600
|
-
min-width: calc(78 * var(--base-unit, 8px));
|
|
4610
|
+
min-width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4601
4611
|
}
|
|
4602
4612
|
|
|
4603
4613
|
.sv-popup.sv-property-editor .sd-root-modern {
|
|
@@ -4605,8 +4615,8 @@ button.spg-action-button--large {
|
|
|
4605
4615
|
}
|
|
4606
4616
|
|
|
4607
4617
|
.svc-object-selector .sv-popup__container {
|
|
4608
|
-
margin-left: calc(1 * var(--base-unit, 8px));
|
|
4609
|
-
margin-right: calc(1 * var(--base-unit, 8px));
|
|
4618
|
+
margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4619
|
+
margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4610
4620
|
}
|
|
4611
4621
|
|
|
4612
4622
|
.svc-object-selector__content {
|
|
@@ -4618,8 +4628,8 @@ button.spg-action-button--large {
|
|
|
4618
4628
|
}
|
|
4619
4629
|
|
|
4620
4630
|
.spg-title .spg-action-bar {
|
|
4621
|
-
margin-top: calc(-1 * var(--base-unit, 8px));
|
|
4622
|
-
margin-bottom: calc(-1 * var(--base-unit, 8px));
|
|
4631
|
+
margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4632
|
+
margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4623
4633
|
margin-right: 1px;
|
|
4624
4634
|
}
|
|
4625
4635
|
|
|
@@ -4628,23 +4638,23 @@ button.spg-action-button--large {
|
|
|
4628
4638
|
}
|
|
4629
4639
|
|
|
4630
4640
|
.spg-body--empty {
|
|
4631
|
-
margin: calc(3 * var(--base-unit, 8px));
|
|
4641
|
+
margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4632
4642
|
}
|
|
4633
4643
|
.svc-text {
|
|
4634
4644
|
font-family: var(--font-family);
|
|
4635
4645
|
font-style: normal;
|
|
4636
4646
|
font-weight: normal;
|
|
4637
|
-
color: var(--foreground, #161616);
|
|
4647
|
+
color: var(--sjs-general-forecolor, var(--foreground, #161616));
|
|
4638
4648
|
}
|
|
4639
4649
|
|
|
4640
4650
|
.svc-text--normal {
|
|
4641
|
-
font-size: calc(2 * var(--base-unit, 8px));
|
|
4642
|
-
line-height: calc(3 * var(--base-unit, 8px));
|
|
4651
|
+
font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4652
|
+
line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4643
4653
|
}
|
|
4644
4654
|
|
|
4645
4655
|
.svc-text--small {
|
|
4646
|
-
font-size: calc(1.5 * var(--base-unit, 8px));
|
|
4647
|
-
line-height: calc(2 * var(--base-unit, 8px));
|
|
4656
|
+
font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4657
|
+
line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4648
4658
|
}
|
|
4649
4659
|
|
|
4650
4660
|
.svc-text--bold {
|
|
@@ -4657,7 +4667,7 @@ button.spg-action-button--large {
|
|
|
4657
4667
|
.svc-flex-row {
|
|
4658
4668
|
display: flex;
|
|
4659
4669
|
flex-direction: row;
|
|
4660
|
-
background: var(--background-dim, #f3f3f3);
|
|
4670
|
+
background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
|
|
4661
4671
|
}
|
|
4662
4672
|
|
|
4663
4673
|
.svc-full-container {
|
|
@@ -4676,15 +4686,15 @@ button.spg-action-button--large {
|
|
|
4676
4686
|
}
|
|
4677
4687
|
|
|
4678
4688
|
.sv-action-bar--default-size-mode .sv-action-bar-separator {
|
|
4679
|
-
height: calc(5 * var(--base-unit, 8px));
|
|
4689
|
+
height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4680
4690
|
}
|
|
4681
4691
|
|
|
4682
4692
|
.sv-action-bar--small-size-mode .sv-action-bar-separator {
|
|
4683
|
-
height: calc(4 * var(--base-unit, 8px));
|
|
4693
|
+
height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4684
4694
|
}
|
|
4685
4695
|
|
|
4686
4696
|
.svc-creator--mobile .sv-action-bar-separator {
|
|
4687
|
-
height: calc(3 * var(--base-unit, 8px));
|
|
4697
|
+
height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4688
4698
|
}
|
|
4689
4699
|
|
|
4690
4700
|
.sv-action-bar--small-size-mode .sv-action-bar-item {
|
|
@@ -4694,20 +4704,20 @@ button.spg-action-button--large {
|
|
|
4694
4704
|
|
|
4695
4705
|
.svc-top-bar {
|
|
4696
4706
|
display: flex;
|
|
4697
|
-
background: var(--background, #fff);
|
|
4707
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4698
4708
|
box-sizing: border-box;
|
|
4699
|
-
box-shadow: inset 0px -1px 0px var(--border, #d6d6d6);
|
|
4709
|
+
box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4700
4710
|
}
|
|
4701
4711
|
.svc-top-bar .svc-toolbar-wrapper {
|
|
4702
4712
|
flex: 0 0 auto;
|
|
4703
4713
|
display: flex;
|
|
4704
4714
|
}
|
|
4705
4715
|
.svc-top-bar .svc-toolbar-wrapper .sv-action-bar {
|
|
4706
|
-
padding: 0 calc(1 * var(--base-unit, 8px));
|
|
4716
|
+
padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4707
4717
|
justify-content: flex-end;
|
|
4708
4718
|
}
|
|
4709
4719
|
.svc-top-bar .svc-toolbar-wrapper .sv-action .sv-action-bar-item {
|
|
4710
|
-
margin: 0 calc(1 * var(--base-unit, 8px));
|
|
4720
|
+
margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4711
4721
|
}
|
|
4712
4722
|
|
|
4713
4723
|
.svc-footer-bar .svc-toolbar-wrapper {
|
|
@@ -4715,15 +4725,15 @@ button.spg-action-button--large {
|
|
|
4715
4725
|
left: 0;
|
|
4716
4726
|
right: 0;
|
|
4717
4727
|
bottom: 0;
|
|
4718
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
4728
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4719
4729
|
}
|
|
4720
4730
|
.svc-footer-bar .svc-toolbar-wrapper .sv-action-bar {
|
|
4721
4731
|
justify-content: center;
|
|
4722
4732
|
padding: 0;
|
|
4723
4733
|
width: 100%;
|
|
4724
|
-
height: calc(6 * var(--base-unit, 8px));
|
|
4725
|
-
background: var(--background, #fff);
|
|
4726
|
-
border-top: 1px solid var(--border, #d6d6d6);
|
|
4734
|
+
height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
|
|
4735
|
+
background: var(--sjs-general-backcolor, var(--background, #fff));
|
|
4736
|
+
border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
|
|
4727
4737
|
}
|
|
4728
4738
|
|
|
4729
4739
|
/*# sourceMappingURL=survey-creator-core.fontless.css.map*/
|