@bpmn-io/form-js-editor 1.5.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +152 -152
  3. package/dist/assets/form-js-editor-base.css +863 -832
  4. package/dist/assets/form-js-editor.css +38 -7
  5. package/dist/index.cjs +1619 -549
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.es.js +1621 -551
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/types/FormEditor.d.ts +36 -4
  10. package/dist/types/features/dragging/Dragging.d.ts +1 -1
  11. package/dist/types/features/modeling/behavior/ColumnsSourceBehavior.d.ts +7 -0
  12. package/dist/types/features/modeling/behavior/OptionsSourceBehavior.d.ts +8 -0
  13. package/dist/types/features/modeling/behavior/TableDataSourceBehavior.d.ts +7 -0
  14. package/dist/types/features/modeling/behavior/index.d.ts +6 -2
  15. package/dist/types/features/modeling/index.d.ts +3 -1
  16. package/dist/types/features/properties-panel/Util.d.ts +11 -3
  17. package/dist/types/features/properties-panel/entries/ColumnEntry.d.ts +11 -0
  18. package/dist/types/features/properties-panel/entries/ColumnsExpressionEntry.d.ts +10 -0
  19. package/dist/types/features/properties-panel/entries/ConditionEntry.d.ts +1 -1
  20. package/dist/types/features/properties-panel/entries/{GroupEntries.d.ts → GroupAppearanceEntry.d.ts} +1 -1
  21. package/dist/types/features/properties-panel/entries/HeadersSourceSelectEntry.d.ts +9 -0
  22. package/dist/types/features/properties-panel/entries/{InputKeyValuesSourceEntry.d.ts → InputKeyOptionsSourceEntry.d.ts} +1 -1
  23. package/dist/types/features/properties-panel/entries/LayouterAppearanceEntry.d.ts +10 -0
  24. package/dist/types/features/properties-panel/entries/OptionsExpressionEntry.d.ts +9 -0
  25. package/dist/types/features/properties-panel/entries/{ValuesSourceSelectEntry.d.ts → OptionsSourceSelectEntry.d.ts} +1 -1
  26. package/dist/types/features/properties-panel/entries/PaginationEntry.d.ts +10 -0
  27. package/dist/types/features/properties-panel/entries/RepeatableEntry.d.ts +24 -0
  28. package/dist/types/features/properties-panel/entries/RowCountEntry.d.ts +10 -0
  29. package/dist/types/features/properties-panel/entries/StaticColumnsSourceEntry.d.ts +5 -0
  30. package/dist/types/features/properties-panel/entries/{StaticValuesSourceEntry.d.ts → StaticOptionsSourceEntry.d.ts} +1 -1
  31. package/dist/types/features/properties-panel/entries/TableDataSourceEntry.d.ts +10 -0
  32. package/dist/types/features/properties-panel/entries/factories/index.d.ts +3 -0
  33. package/dist/types/features/properties-panel/entries/factories/simpleRangeIntegerEntryFactory.d.ts +12 -0
  34. package/dist/types/features/properties-panel/entries/factories/simpleSelectEntryFactory.d.ts +10 -0
  35. package/dist/types/features/properties-panel/entries/factories/zeroPositiveIntegerEntryFactory.d.ts +9 -0
  36. package/dist/types/features/properties-panel/entries/index.d.ts +14 -6
  37. package/dist/types/features/properties-panel/groups/AppearanceGroup.d.ts +24 -3
  38. package/dist/types/features/properties-panel/groups/GeneralGroup.d.ts +11 -0
  39. package/dist/types/features/properties-panel/groups/OptionsGroups.d.ts +1 -0
  40. package/dist/types/features/properties-panel/groups/TableHeaderGroups.d.ts +1 -0
  41. package/dist/types/features/properties-panel/groups/index.d.ts +2 -1
  42. package/dist/types/features/repeat-render/EditorRepeatRenderManager.d.ts +17 -0
  43. package/dist/types/features/repeat-render/index.d.ts +7 -0
  44. package/dist/types/render/components/editor-form-fields/EditorTable.d.ts +10 -0
  45. package/dist/types/render/components/editor-form-fields/index.d.ts +2 -1
  46. package/dist/types/types.d.ts +28 -28
  47. package/package.json +3 -3
  48. package/dist/types/features/modeling/behavior/ValuesSourceBehavior.d.ts +0 -8
  49. package/dist/types/features/properties-panel/entries/ValuesExpressionEntry.d.ts +0 -9
  50. package/dist/types/features/properties-panel/groups/ValuesGroups.d.ts +0 -1
package/dist/assets/form-js-editor-base.css CHANGED
@@ -1,832 +1,863 @@
1
- .fjs-editor-container {
2
- --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
3
- --color-children-selected-background: transparent;
4
- --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
5
-
6
- --color-context-pad-item-background: transparent;
7
- --color-context-pad-item-fill: var(--cds-icon-secondary, var(--color-grey-225-10-15));
8
- --color-context-pad-item-hover-fill: var(--color-red-360-100-45);
9
-
10
- --color-resize-handle-background: var(--cds-border-interactive, var(--color-blue-219-100-53));
11
- --color-resize-handle-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
12
-
13
- --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
14
- --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
15
- --color-dragula-mirror-background: var(--cds-background, var(--color-white));
16
- --color-dragula-mirror-border: var(
17
- --cds-border-strong,
18
- var(--cds-border-strong-01, var(--color-grey-225-10-90))
19
- );
20
- --color-dragula-error-background: var(--color-red-360-100-92);
21
- --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
22
- }
23
-
24
- .fjs-palette-container {
25
- --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
26
- --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
27
- --color-palette-container-border: var(
28
- --cds-border-strong,
29
- var(--cds-border-strong-01, var(--color-grey-225-10-80))
30
- );
31
- --color-palette-header: var(--cds-text-primary, var(--color-text));
32
- --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
33
- --color-palette-header-border: var(
34
- --cds-border-strong,
35
- var(--cds-border-strong-01, var(--color-grey-225-10-85))
36
- );
37
- --color-palette-search: var(--color-palette-text);
38
- --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
39
- --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
40
- --color-palette-search-background: var(
41
- --cds-field,
42
- var(--cds-field-01, var(--color-white))
43
- );
44
- --color-palette-search-border: var(
45
- --cds-border-strong,
46
- var(--cds-border-strong-01, var(--color-grey-225-10-75))
47
- );
48
- --color-palette-search-focus-background: var(
49
- --cds-field,
50
- var(--cds-field-01, var(--color-blue-205-100-95))
51
- );
52
- --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
53
- --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
54
- --color-palette-group-title: var(--color-palette-text);
55
- --color-palette-field: var(--color-palette-text);
56
- --color-palette-field-background: var(
57
- --cds-layer,
58
- var(--cds-layer-01, var(--color-white))
59
- );
60
- --color-palette-field-border: var(
61
- --cds-border-subtle,
62
- var(--cds-border-subtle-01, var(--color-grey-225-10-93))
63
- );
64
- --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-205-100-45));
65
- --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
66
- --color-palette-field-hover-border: var(
67
- --cds-border-strong,
68
- var(--cds-border-strong-01, var(--color-grey-225-10-55))
69
- );
70
- --cursor-palette-field: grab;
71
- --palette-width: 270px;
72
- }
73
-
74
- .fjs-properties-container {
75
- --color-properties-container-background: var(--cds-background, var(--color-white));
76
- --color-properties-container-border: var(
77
- --cds-border-strong,
78
- var(--cds-border-strong-01, var(--color-grey-225-10-80))
79
- );
80
- --properties-panel-width: 300px;
81
- }
82
-
83
- /**
84
- * Theming overrides
85
- */
86
- .fjs-properties-container .bio-properties-panel {
87
- --text-base-color: var(--cds-text-primary, var(--color-grey-225-10-15));
88
- --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
89
- --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
90
-
91
- --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
92
- --description-code-background-color: var(
93
- --cds-layer,
94
- var(--cds-layer-01, var(--color-grey-225-10-97))
95
- );
96
- --description-code-border-color: var(
97
- --cds-border-strong,
98
- var(--cds-border-strong-01, var(--color-grey-225-10-85))
99
- );
100
- --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
101
-
102
- --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
103
- --placeholder-background-color: var(
104
- --cds-layer,
105
- var(--cds-layer-01, var(--color-grey-225-10-95))
106
- );
107
-
108
- --header-background-color: var(
109
- --cds-layer,
110
- var(--cds-layer-01, var(--color-grey-225-10-95))
111
- );
112
- --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
113
- --header-bottom-border-color: var(--color-grey-225-10-75);
114
-
115
- --group-background-color: var(--cds-background, var(--color-white));
116
- --group-bottom-border-color: var(
117
- --cds-border-strong,
118
- var(--cds-border-strong-01, var(--color-grey-225-10-75))
119
- );
120
-
121
- --sticky-group-background-color: var(
122
- --cds-layer,
123
- var(--cds-layer-01, var(--color-grey-225-10-95))
124
- );
125
- --sticky-group-bottom-border-color: var(
126
- --cds-border-strong,
127
- var(--cds-border-strong-01, var(--color-grey-225-10-75))
128
- );
129
-
130
- --add-entry-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
131
- --add-entry-hover-fill-color: var(--cds-icon-inverse, var(--color-white));
132
- --add-entry-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
133
- --add-entry-label-color: var(--cds-text-inverse, var(--color-white));
134
-
135
- --remove-entry-fill-color: var(--color-red-360-100-45);
136
- --remove-entry-hover-background-color: var(--color-red-360-100-92);
137
-
138
- --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
139
- --arrow-hover-background-color: var(
140
- --cds-layer,
141
- var(--cds-layer-01, var(--color-grey-225-10-95))
142
- );
143
-
144
- --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
145
-
146
- --list-badge-color: var(--cds-text-inverse, var(--color-white));
147
- --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
148
-
149
- --input-background-color: var(
150
- --cds-field,
151
- var(--cds-field-01, var(--color-grey-225-10-97))
152
- );
153
- --input-border-color: var(
154
- --cds-border-strong,
155
- var(--cds-border-strong-01, var(--color-grey-225-10-75))
156
- );
157
-
158
- --input-focus-background-color: var(
159
- --cds-field,
160
- var(--cds-field-01, var(--color-blue-205-100-95))
161
- );
162
- --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
163
-
164
- --input-error-background-color: var(
165
- --cds-field,
166
- var(--cds-field-01, var(--color-red-360-100-97))
167
- );
168
- --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
169
- --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
170
-
171
- --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
172
- --input-disabled-background-color: var(
173
- --cds-field,
174
- var(--cds-field-01, var(--color-grey-225-10-97))
175
- );
176
- --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
177
-
178
- --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
179
- --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
180
- --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
181
-
182
- --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
183
- --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
184
-
185
- --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
186
- --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
187
- --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
188
- --list-entry-add-entry-empty-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-45));
189
- --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
190
- --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
191
- --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
192
-
193
- --feel-background-color: transparent;
194
- --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
195
- --feel-inactive-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
196
- --feel-hover-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
197
- --feel-hover-background-color: var(--cds-layer-02, var(--color-grey-225-10-97));
198
- --feel-active-background-color: transparent;
199
- --feel-required-color: var(--cds-icon-disabled, var(--color-grey-225-10-55));
200
-
201
- --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
202
- }
203
-
204
- .fjs-properties-container .bio-properties-panel-input {
205
- color: var(--color-text);
206
- }
207
-
208
- .fjs-editor-container {
209
- height: 100%;
210
- width: 100%;
211
- display: flex;
212
- }
213
-
214
- .fjs-no-json-lint .cm-lint-marker,
215
- .fjs-no-json-lint .cm-lintPoint-error {
216
- display: none;
217
- }
218
-
219
- .fjs-no-json-lint .cm-activeLine,
220
- .fjs-no-json-lint .cm-activeLineGutter {
221
- background: none;
222
- }
223
-
224
- .fjs-no-json-lint .cm-placeholder {
225
- font-size: 12px;
226
- line-height: 16px;
227
- color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
228
- }
229
-
230
- .fjs-editor-container .fjs-form-editor {
231
- display: flex;
232
- flex: 1;
233
- flex-direction: row;
234
- }
235
-
236
- .fjs-editor-container .fjs-form-container {
237
- overflow-y: auto;
238
- position: relative;
239
- }
240
-
241
- .fjs-editor-container .fjs-render-injector-container {
242
- width: 0;
243
- height: 0;
244
- display: none;
245
- overflow: hidden;
246
- }
247
-
248
- .fjs-editor-container .fjs-form-container,
249
- .fjs-editor-container .fjs-form {
250
- display: flex;
251
- flex-direction: column;
252
- flex: 1;
253
- }
254
-
255
- .fjs-editor-container .fjs-form > .fjs-element {
256
- flex-grow: 1;
257
- }
258
-
259
- .fjs-editor-container .fjs-children .fjs-children {
260
- margin: 3px 0;
261
- }
262
-
263
- .fjs-editor-container .fjs-children .fjs-element {
264
- position: relative;
265
- border: solid 2px transparent;
266
- outline: none;
267
- }
268
-
269
- .fjs-editor-container .fjs-form > .fjs-element {
270
- border: none;
271
- }
272
-
273
- .fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
274
- margin: 1px 6px;
275
- }
276
-
277
- .fjs-editor-container .fjs-children .fjs-element.fjs-outlined {
278
- border-color: var(--color-borders-group);
279
- }
280
-
281
- .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
282
- border-color: var(--color-children-selected-border) !important;
283
- background-color: var(--color-children-selected-background);
284
- }
285
-
286
- .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
287
- .fjs-editor-container .fjs-children .fjs-element:focus {
288
- border-color: var(--color-children-hover-border);
289
- }
290
-
291
- .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"] {
292
- margin-left: -6px;
293
- }
294
-
295
- .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="group"] {
296
- margin-right: -6px;
297
- }
298
-
299
- .fjs-editor-container .fjs-form-field-group,
300
- .fjs-editor-container .fjs-form-field-group .fjs-form-field-group .fjs-form-field-group {
301
- margin: 1px 6px;
302
- padding: 0px;
303
- }
304
-
305
- .fjs-editor-container .fjs-form-field-group.fjs-outlined {
306
- outline: none;
307
- }
308
-
309
- .fjs-editor-container .fjs-form-field-group .cds--grid {
310
- padding: 0 2rem;
311
- }
312
-
313
- .fjs-editor-container .fjs-form-field-group > label {
314
- margin-top: 6px;
315
- }
316
-
317
- .fjs-editor-container .fjs-input:disabled,
318
- .fjs-editor-container .fjs-textarea:disabled,
319
- .fjs-editor-container .fjs-taglist-input:disabled,
320
- .fjs-editor-container .fjs-button:disabled,
321
- .fjs-editor-container .fjs-select:disabled {
322
- pointer-events: none;
323
- }
324
-
325
- .fjs-editor-container .fjs-readonly {
326
- pointer-events: none;
327
- }
328
-
329
- .fjs-editor-container .fjs-drag-container,
330
- .fjs-editor-container .fjs-drop-container-vertical {
331
- user-select: none;
332
- }
333
-
334
- .fjs-editor-container .fjs-empty-editor {
335
- display: flex;
336
- align-items: center;
337
- justify-content: center;
338
- position: absolute;
339
- top: 0;
340
- left: 0;
341
- width: 100%;
342
- height: 100%;
343
- }
344
-
345
- .fjs-cursor-grabbing .fjs-editor-container .fjs-empty-editor {
346
- display: none;
347
- }
348
-
349
- .fjs-editor-container .fjs-empty-editor .fjs-empty-editor-card {
350
- display: flex;
351
- flex-direction: column;
352
- padding: 20px;
353
- }
354
-
355
- .fjs-editor-container .fjs-drop-container-horizontal {
356
- width: 100%;
357
- }
358
-
359
- .fjs-editor-container .fjs-layout-row {
360
- padding: 4px 0px;
361
- }
362
-
363
- .fjs-editor-container .fjs-drag-row-move {
364
- display: flex;
365
- width: 100%;
366
- padding: 3px 0px;
367
- position: relative;
368
- }
369
-
370
- .fjs-editor-container .fjs-row-dragger {
371
- z-index: 2;
372
- position: absolute;
373
- top: 25%;
374
- height: 50%;
375
- left: -33px;
376
- width: 23px;
377
- padding-right: 7px;
378
- cursor: grab;
379
- display: flex;
380
- justify-content: center;
381
- align-items: center;
382
- }
383
-
384
- .fjs-editor-container .fjs-row-dragger svg {
385
- visibility: hidden;
386
- }
387
-
388
- .fjs-editor-container .fjs-row-dragger:hover svg,
389
- .fjs-editor-container .fjs-drag-row-move:hover > .fjs-row-dragger svg {
390
- visibility: visible;
391
- }
392
-
393
- .fjs-editor-container .fjs-drag-move {
394
- padding: 0 3px;
395
- }
396
-
397
- .fjs-editor-container .fjs-field-resize-handle {
398
- resize: horizontal;
399
- position: absolute;
400
- visibility: hidden;
401
- width: 6px;
402
- top: 0;
403
- bottom: 0;
404
- margin: auto;
405
- height: 50px;
406
- max-height: calc(100% - 2px);
407
- border: 1px solid var(--color-resize-handle-border);
408
- border-radius: 50px;
409
- background: var(--color-white);
410
- z-index: 3;
411
- }
412
-
413
- .fjs-editor-container .fjs-field-resize-handle-right {
414
- right: -4px;
415
- cursor: ew-resize;
416
- }
417
-
418
- .fjs-editor-container .fjs-field-resize-handle-left {
419
- left: -4px;
420
- cursor: ew-resize;
421
- }
422
-
423
- .fjs-editor-container .fjs-element-resizing-right .fjs-field-resize-handle-right,
424
- .fjs-editor-container .fjs-element-resizing-left .fjs-field-resize-handle-left,
425
- .fjs-editor-container .fjs-field-resize-handle:hover {
426
- background: var(--color-resize-handle-background);
427
- }
428
-
429
- .fjs-editor-container .fjs-element-resizing-right .fjs-context-pad,
430
- .fjs-editor-container .fjs-element-resizing-left .fjs-context-pad {
431
- display: none;
432
- }
433
-
434
- .fjs-editor-container .fjs-children .fjs-editor-selected > .fjs-field-resize-handle {
435
- visibility: visible;
436
- }
437
-
438
- .fjs-resize-drag-preview {
439
- width: 1px;
440
- height: 1px;
441
- position: absolute;
442
- top: 0;
443
- }
444
-
445
- /* do not show resize handles on small screens */
446
- @media (max-width: 66rem) {
447
- .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
448
- display: none !important;
449
- }
450
- }
451
-
452
- /**
453
- * Cursor styles
454
- */
455
- .fjs-cursor-grab {
456
- cursor: -webkit-grab;
457
- cursor: -moz-grab;
458
- cursor: grab;
459
- }
460
-
461
- .fjs-cursor-grabbing {
462
- cursor: -webkit-grabbing;
463
- cursor: -moz-grabbing;
464
- cursor: grabbing;
465
- }
466
-
467
- .fjs-cursor-crosshair {
468
- cursor: crosshair;
469
- }
470
-
471
- .fjs-cursor-move {
472
- cursor: move;
473
- }
474
-
475
- .fjs-cursor-not-allowed {
476
- cursor: not-allowed;
477
- }
478
-
479
-
480
- /**
481
- * Context Pad
482
- */
483
- .fjs-editor-container .fjs-context-pad {
484
- z-index: 2;
485
- position: absolute;
486
- top: 0;
487
- right: 5px;
488
- }
489
-
490
- .fjs-editor-container .fjs-context-pad-item {
491
- border: none;
492
- background-color: var(--color-context-pad-item-background);
493
- padding: 0;
494
- width: 24px;
495
- height: 24px;
496
- color: var(--color-context-pad-item-fill);
497
- display: flex;
498
- justify-content: center;
499
- align-items: center;
500
- }
501
-
502
- .fjs-editor-container .fjs-context-pad-item:hover {
503
- color: var(--color-context-pad-item-hover-fill);
504
- }
505
-
506
- .fjs-editor-container .fjs-context-pad-item:focus-visible {
507
- outline: 2px solid var(--color-children-selected-border);
508
- border-radius: 2px;
509
- }
510
-
511
- /**
512
- * Palette
513
- */
514
- .fjs-editor-container .fjs-palette-container {
515
- height: 100%;
516
- }
517
-
518
- .fjs-palette-container {
519
- width: var(--palette-width);
520
- background-color: var(--color-palette-container-background);
521
- border-right: solid 1px var(--color-palette-container-border);
522
- font-family: var(--font-family);
523
- }
524
-
525
- .fjs-palette-container .fjs-palette {
526
- height: 100%;
527
- display: flex;
528
- flex-direction: column;
529
- flex: 1;
530
- }
531
-
532
- .fjs-palette-container .fjs-palette-header {
533
- font-size: 14px;
534
- font-weight: bold;
535
- color: var(--color-palette-header);
536
- padding: 10px 15px;
537
- border-bottom: solid 1px var(--color-palette-header-border);
538
- background: var(--color-palette-header-background);
539
- user-select: none;
540
- }
541
-
542
- .fjs-palette-container .fjs-palette-footer {
543
- display: flex;
544
- flex-direction: column;
545
- align-items: center;
546
- }
547
-
548
- .fjs-palette-container .fjs-palette-footer .fjs-palette-footer-fill {
549
- padding: 10px;
550
- width: 100%;
551
- }
552
-
553
- .fjs-palette-container .fjs-palette-search-container {
554
- display: flex;
555
- flex-direction: row;
556
- padding: 4px;
557
- margin: 12px;
558
- color: var(--color-palette-search);
559
- border: 1px solid var(--color-palette-search-border);
560
- background-color: var(--color-palette-search-background);
561
- border-radius: 2px;
562
- font-size: 14px;
563
- }
564
-
565
- .fjs-palette-container .fjs-palette-search-container:focus-within {
566
- outline: none;
567
- background-color: var(--color-palette-search-focus-background);
568
- border: 1px solid var(--color-palette-search-focus-border);
569
- }
570
-
571
- .fjs-palette-container .fjs-palette-search-icon {
572
- margin-right: 6px;
573
- display: flex;
574
- align-items: center;
575
- justify-content: center;
576
- color: var(--color-palette-search-icon);
577
- }
578
-
579
- .fjs-palette-container .fjs-palette-search {
580
- background-color: inherit;
581
- font-family: inherit;
582
- margin: 0;
583
- border: none;
584
- padding: 0;
585
- color: var(--color-palette-text);
586
- }
587
-
588
- .fjs-palette-container .fjs-palette-search:focus {
589
- outline: none;
590
- }
591
-
592
- .fjs-palette-container .fjs-palette-search-clear {
593
- display: flex;
594
- justify-content: center;
595
- align-items: center;
596
- border: none;
597
- margin-left: auto;
598
- padding: 0;
599
- background: transparent;
600
- color: var(--color-palette-search-icon);
601
- }
602
-
603
- .fjs-palette-container .fjs-palette-search-clear svg {
604
- margin: 0;
605
- }
606
-
607
- .fjs-palette-container .fjs-palette-search-clear:hover {
608
- color: var(--color-palette-search-icon-hover);
609
- }
610
-
611
- .fjs-palette-container .fjs-palette-entries {
612
- display: flex;
613
- flex-direction: column;
614
- overflow-x: hidden;
615
- overflow-y: auto;
616
- gap: 20px;
617
- padding-bottom: 20px;
618
- }
619
-
620
- .fjs-palette-container .fjs-palette-group {
621
- display: flex;
622
- flex-direction: column;
623
- width: 236px;
624
- margin: auto;
625
- }
626
-
627
- .fjs-palette-container .fjs-palette-group-title {
628
- font-size: 14px;
629
- font-weight: 500;
630
- margin-bottom: 4px;
631
- color: var(--color-palette-group-title);
632
- user-select: none;
633
- }
634
-
635
- .fjs-palette-container .fjs-palette-fields {
636
- display: flex;
637
- flex-wrap: wrap;
638
- gap: 10px;
639
- }
640
-
641
- .fjs-palette-field {
642
- height: 72px;
643
- display: flex;
644
- flex-direction: column;
645
- justify-content: center;
646
- font-size: 11px;
647
- align-items: center;
648
- border: none;
649
- font-family: inherit;
650
- user-select: none;
651
- color: var( --color-palette-field);
652
- background-color: var(--color-palette-field-background);
653
- outline: solid 1px var(--color-palette-field-border);
654
- outline-offset: 0px;
655
- transition: all ease-in-out 0.05s;
656
- }
657
-
658
- .fjs-palette-container .fjs-palette-field {
659
- width: 72px;
660
- }
661
-
662
- .fjs-palette-container .fjs-palette-field:focus {
663
- outline: solid 1px var(--color-palette-field-focus);
664
- }
665
-
666
- .fjs-palette-field .fjs-palette-field-icon,
667
- .fjs-palette-field .fjs-field-icon-image {
668
- margin: 0 auto;
669
- }
670
-
671
- .fjs-palette-field .fjs-palette-field-text {
672
- text-align: center;
673
- width: inherit;
674
- }
675
-
676
- .fjs-palette-container .fjs-palette-field:hover {
677
- outline: solid 1px var(--color-palette-field-hover-border);
678
- cursor: var(--cursor-palette-field);
679
- }
680
-
681
- .fjs-palette-container .fjs-palette-no-entries {
682
- padding: 5px 15px;
683
- font-size: 14px;
684
- color: var(--color-palette-text);
685
- }
686
-
687
- /**
688
- * Properties Panel
689
- */
690
- .fjs-editor-container .fjs-properties-container {
691
- height: 100%;
692
- }
693
-
694
- .fjs-properties-container {
695
- background-color: var(--color-properties-container-background);
696
- width: var(--properties-panel-width);
697
- border-left: solid 1px var(--color-properties-container-border);
698
- color: var(--color-text);
699
- }
700
-
701
- .fjs-properties-container .fjs-properties-panel {
702
- height: 100%;
703
- }
704
-
705
- .fjs-properties-container .fjs-properties-panel * {
706
- box-sizing: border-box;
707
- }
708
-
709
- .fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
710
- transform: scale(1.3);
711
- }
712
-
713
- /**
714
- * Editor Form Fields
715
- */
716
- .fjs-editor-container .fjs-form-field-placeholder {
717
- color: var(--color-text-light);
718
- font-style: italic;
719
- }
720
-
721
- .fjs-editor-container .fjs-form-field-placeholder svg {
722
- width: 32px;
723
- height: 32px;
724
- vertical-align: middle;
725
- margin-top: -2px;
726
- margin-right: 2px;
727
- }
728
-
729
- .fjs-editor-container .fjs-form-field-spacer {
730
- min-height: 30px;
731
- background: repeating-linear-gradient( 45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
732
- }
733
-
734
- .fjs-editor-container .fjs-form-field-separator hr {
735
- margin: 10px 2px;
736
- }
737
-
738
- /**
739
- * Custom Dragula Styles
740
- */
741
- .gu-transit {
742
- background: var(--color-dragula-background) !important;
743
- border: dashed 2px var(--color-dragula-border) !important;
744
- border-radius: 3px !important;
745
- filter: none !important;
746
- height: 70px !important;
747
- opacity: 1 !important;
748
- /* mitigate for additional border in row */
749
- flex-grow: 0.98 !important;
750
- margin: 0 !important;
751
- }
752
-
753
- /* row drop preview */
754
- .fjs-children > .gu-transit {
755
- height: 28px !important;
756
- width: 100% !important;
757
- flex: unset !important;
758
- }
759
-
760
- /* error drop preview */
761
- .fjs-error-drop > .gu-transit {
762
- height: 100% !important;
763
- background: var(--color-dragula-error-background) !important;
764
- border: none !important;
765
- width: 6px !important;
766
- flex: none !important;
767
- padding: 0 !important;
768
- border-radius: 5px !important;
769
- }
770
-
771
- .fjs-error-drop.cds--row {
772
- flex-wrap: nowrap !important;
773
- }
774
-
775
- .gu-transit * {
776
- display: none !important;
777
- }
778
-
779
- .gu-mirror {
780
- background-color: var(--color-dragula-mirror-background) !important;
781
- border: solid 1px var(--color-dragula-mirror-border) !important;
782
- border-radius: 5px !important;
783
- box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15) !important;
784
- display: flex !important;
785
- filter: none !important;
786
- flex-direction: row !important;
787
- justify-content: center !important;
788
- align-items: center !important;
789
- opacity: 0.5 !important;
790
- padding: 0 !important;
791
- pointer-events: none !important;
792
- height: 54px !important;
793
- }
794
-
795
- .fjs-field-preview {
796
- margin: 5px 0;
797
- display: flex;
798
- flex-direction: column;
799
- justify-content: center;
800
- font-size: 11px;
801
- user-select: none;
802
- color: var(--color-text);
803
- background: var(--color-white);
804
- }
805
-
806
- .fjs-field-preview .fjs-field-preview-icon {
807
- margin: 0 auto;
808
- }
809
-
810
- .fjs-field-preview .fjs-field-preview-text {
811
- text-align: center;
812
- }
813
-
814
- .gu-mirror.fjs-field-preview-container {
815
- transform: rotate(-15deg);
816
- font-family: var(--font-family);
817
- width: 68px !important;
818
- height: 68px !important;
819
- }
820
-
821
- .gu-mirror.fjs-drag-row-move {
822
- padding: 4px 12px !important;
823
- height: fit-content !important;
824
- opacity: 0.8 !important;
825
- max-height: 120px !important;
826
- overflow: hidden !important;
827
- align-items: start !important;
828
- }
829
-
830
- .gu-mirror.fjs-drag-row-move .cds--row {
831
- flex-wrap: nowrap !important;
832
- }
1
+ .fjs-editor-container {
2
+ --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
3
+ --color-children-selected-background: transparent;
4
+ --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
5
+
6
+ --color-context-pad-item-background: transparent;
7
+ --color-context-pad-item-fill: var(--cds-icon-secondary, var(--color-grey-225-10-15));
8
+ --color-context-pad-item-hover-fill: var(--color-red-360-100-45);
9
+
10
+ --color-resize-handle-background: var(--cds-border-interactive, var(--color-blue-219-100-53));
11
+ --color-resize-handle-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
12
+
13
+ --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
14
+ --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
15
+ --color-dragula-mirror-background: var(--cds-background, var(--color-white));
16
+ --color-dragula-mirror-border: var(
17
+ --cds-border-strong,
18
+ var(--cds-border-strong-01, var(--color-grey-225-10-90))
19
+ );
20
+ --color-dragula-error-background: var(--color-red-360-100-92);
21
+ --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
22
+ }
23
+
24
+ .fjs-palette-container {
25
+ --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
26
+ --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
27
+ --color-palette-container-border: var(
28
+ --cds-border-strong,
29
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
30
+ );
31
+ --color-palette-header: var(--cds-text-primary, var(--color-text));
32
+ --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
33
+ --color-palette-header-border: var(
34
+ --cds-border-strong,
35
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
36
+ );
37
+ --color-palette-search: var(--color-palette-text);
38
+ --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
39
+ --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
40
+ --color-palette-search-background: var(
41
+ --cds-field,
42
+ var(--cds-field-01, var(--color-white))
43
+ );
44
+ --color-palette-search-border: var(
45
+ --cds-border-strong,
46
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
47
+ );
48
+ --color-palette-search-focus-background: var(
49
+ --cds-field,
50
+ var(--cds-field-01, var(--color-blue-205-100-95))
51
+ );
52
+ --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
53
+ --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
54
+ --color-palette-group-title: var(--color-palette-text);
55
+ --color-palette-field: var(--color-palette-text);
56
+ --color-palette-field-background: var(
57
+ --cds-layer,
58
+ var(--cds-layer-01, var(--color-white))
59
+ );
60
+ --color-palette-field-border: var(
61
+ --cds-border-subtle,
62
+ var(--cds-border-subtle-01, var(--color-grey-225-10-93))
63
+ );
64
+ --color-palette-field-focus: var(--cds-border-interactive, var(--color-blue-205-100-45));
65
+ --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
66
+ --color-palette-field-hover-border: var(
67
+ --cds-border-strong,
68
+ var(--cds-border-strong-01, var(--color-grey-225-10-55))
69
+ );
70
+ --cursor-palette-field: grab;
71
+ --palette-width: 270px;
72
+ }
73
+
74
+ .fjs-properties-container {
75
+ --color-properties-container-background: var(--cds-background, var(--color-white));
76
+ --color-properties-container-border: var(
77
+ --cds-border-strong,
78
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
79
+ );
80
+ --properties-panel-width: 300px;
81
+ }
82
+
83
+ /**
84
+ * Theming overrides
85
+ */
86
+ .fjs-properties-container .bio-properties-panel {
87
+ --text-base-color: var(--cds-text-primary, var(--color-grey-225-10-15));
88
+ --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
89
+ --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
90
+
91
+ --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
92
+ --description-code-background-color: var(
93
+ --cds-layer,
94
+ var(--cds-layer-01, var(--color-grey-225-10-97))
95
+ );
96
+ --description-code-border-color: var(
97
+ --cds-border-strong,
98
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
99
+ );
100
+ --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
101
+
102
+ --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
103
+ --placeholder-background-color: var(
104
+ --cds-layer,
105
+ var(--cds-layer-01, var(--color-grey-225-10-95))
106
+ );
107
+
108
+ --header-background-color: var(
109
+ --cds-layer,
110
+ var(--cds-layer-01, var(--color-grey-225-10-95))
111
+ );
112
+ --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
113
+ --header-bottom-border-color: var(--color-grey-225-10-75);
114
+
115
+ --group-background-color: var(--cds-background, var(--color-white));
116
+ --group-bottom-border-color: var(
117
+ --cds-border-strong,
118
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
119
+ );
120
+
121
+ --sticky-group-background-color: var(
122
+ --cds-layer,
123
+ var(--cds-layer-01, var(--color-grey-225-10-95))
124
+ );
125
+ --sticky-group-bottom-border-color: var(
126
+ --cds-border-strong,
127
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
128
+ );
129
+
130
+ --add-entry-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
131
+ --add-entry-hover-fill-color: var(--cds-icon-inverse, var(--color-white));
132
+ --add-entry-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
133
+ --add-entry-label-color: var(--cds-text-inverse, var(--color-white));
134
+
135
+ --remove-entry-fill-color: var(--color-red-360-100-45);
136
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
137
+
138
+ --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
139
+ --arrow-hover-background-color: var(
140
+ --cds-layer,
141
+ var(--cds-layer-01, var(--color-grey-225-10-95))
142
+ );
143
+
144
+ --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
145
+
146
+ --list-badge-color: var(--cds-text-inverse, var(--color-white));
147
+ --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
148
+
149
+ --input-background-color: var(
150
+ --cds-field,
151
+ var(--cds-field-01, var(--color-grey-225-10-97))
152
+ );
153
+ --input-border-color: var(
154
+ --cds-border-strong,
155
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
156
+ );
157
+
158
+ --input-focus-background-color: var(
159
+ --cds-field,
160
+ var(--cds-field-01, var(--color-blue-205-100-95))
161
+ );
162
+ --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
163
+
164
+ --input-error-background-color: var(
165
+ --cds-field,
166
+ var(--cds-field-01, var(--color-red-360-100-97))
167
+ );
168
+ --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
169
+ --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
170
+
171
+ --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
172
+ --input-disabled-background-color: var(
173
+ --cds-field,
174
+ var(--cds-field-01, var(--color-grey-225-10-97))
175
+ );
176
+ --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
177
+
178
+ --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
179
+ --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
180
+ --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
181
+
182
+ --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
183
+ --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
184
+
185
+ --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
186
+ --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
187
+ --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
188
+ --list-entry-add-entry-empty-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-45));
189
+ --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
190
+ --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
191
+ --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
192
+
193
+ --feel-background-color: transparent;
194
+ --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
195
+ --feel-inactive-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
196
+ --feel-hover-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
197
+ --feel-hover-background-color: var(--cds-layer-02, var(--color-grey-225-10-97));
198
+ --feel-active-background-color: transparent;
199
+ --feel-required-color: var(--cds-icon-disabled, var(--color-grey-225-10-55));
200
+
201
+ --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
202
+ }
203
+
204
+ .fjs-properties-container .bio-properties-panel-input {
205
+ color: var(--color-text);
206
+ }
207
+
208
+ .fjs-editor-container {
209
+ height: 100%;
210
+ width: 100%;
211
+ display: flex;
212
+ }
213
+
214
+ .fjs-no-json-lint .cm-lint-marker,
215
+ .fjs-no-json-lint .cm-lintPoint-error {
216
+ display: none;
217
+ }
218
+
219
+ .fjs-no-json-lint .cm-activeLine,
220
+ .fjs-no-json-lint .cm-activeLineGutter {
221
+ background: none;
222
+ }
223
+
224
+ .fjs-no-json-lint .cm-placeholder {
225
+ font-size: 12px;
226
+ line-height: 16px;
227
+ color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
228
+ }
229
+
230
+ .fjs-editor-container .fjs-form-editor {
231
+ display: flex;
232
+ flex: 1;
233
+ flex-direction: row;
234
+ }
235
+
236
+ .fjs-editor-container .fjs-form-container {
237
+ overflow-y: auto;
238
+ position: relative;
239
+ }
240
+
241
+ .fjs-editor-container .fjs-render-injector-container {
242
+ width: 0;
243
+ height: 0;
244
+ display: none;
245
+ overflow: hidden;
246
+ }
247
+
248
+ .fjs-editor-container .fjs-form-container,
249
+ .fjs-editor-container .fjs-form {
250
+ display: flex;
251
+ flex-direction: column;
252
+ flex: 1;
253
+ }
254
+
255
+ .fjs-editor-container .fjs-form > .fjs-element {
256
+ flex-grow: 1;
257
+ }
258
+
259
+ .fjs-editor-container .fjs-children .fjs-children {
260
+ margin: 3px 0;
261
+ }
262
+
263
+ .fjs-editor-container .fjs-children .fjs-element {
264
+ position: relative;
265
+ border: solid 2px transparent;
266
+ outline: none;
267
+ }
268
+
269
+ .fjs-editor-container .fjs-form > .fjs-element {
270
+ border: none;
271
+ outline: none;
272
+ }
273
+
274
+ .fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
275
+ margin: 1px 6px;
276
+ }
277
+
278
+ .fjs-editor-container .fjs-children .fjs-element.fjs-outlined {
279
+ border-color: var(--color-borders-group);
280
+ }
281
+
282
+ .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
283
+ border-color: var(--color-children-selected-border) !important;
284
+ background-color: var(--color-children-selected-background);
285
+ }
286
+
287
+ .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
288
+ .fjs-editor-container .fjs-children .fjs-element:focus {
289
+ border-color: var(--color-children-hover-border);
290
+ }
291
+
292
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"],
293
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="dynamiclist"] {
294
+ margin-left: -6px;
295
+ }
296
+
297
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="group"],
298
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="dynamiclist"] {
299
+ margin-right: -6px;
300
+ }
301
+
302
+ .fjs-editor-container .fjs-form-field-grouplike,
303
+ .fjs-editor-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-form-field-grouplike {
304
+ margin: 1px 6px;
305
+ padding: 0px;
306
+ }
307
+
308
+ .fjs-editor-container .fjs-form-field-grouplike.fjs-outlined {
309
+ outline: none;
310
+ }
311
+
312
+ .fjs-editor-container .fjs-form-field-grouplike .cds--grid {
313
+ padding: 0 2rem;
314
+ }
315
+
316
+ .fjs-editor-container .fjs-form-field-grouplike > label {
317
+ margin-top: 6px;
318
+ }
319
+
320
+ .fjs-editor-container .fjs-input:disabled,
321
+ .fjs-editor-container .fjs-textarea:disabled,
322
+ .fjs-editor-container .fjs-taglist-input:disabled,
323
+ .fjs-editor-container .fjs-button:disabled,
324
+ .fjs-editor-container .fjs-select:disabled {
325
+ pointer-events: none;
326
+ }
327
+
328
+ .fjs-editor-container .fjs-readonly {
329
+ pointer-events: none;
330
+ }
331
+
332
+ .fjs-editor-container .fjs-drag-container,
333
+ .fjs-editor-container .fjs-drop-container-vertical {
334
+ user-select: none;
335
+ }
336
+
337
+ .fjs-editor-container .fjs-empty-component {
338
+ display: flex;
339
+ justify-content: center;
340
+ align-items: center;
341
+ height: 80px;
342
+ width: calc(100% - 4rem);
343
+ position: absolute;
344
+ }
345
+
346
+ .fjs-editor-container .fjs-empty-component span {
347
+ color: var(--cds-text-disabled, var(--color-grey-225-10-55));
348
+ }
349
+
350
+ .fjs-editor-container .fjs-empty-editor {
351
+ display: flex;
352
+ align-items: center;
353
+ justify-content: center;
354
+ position: absolute;
355
+ top: 0;
356
+ left: 0;
357
+ width: 100%;
358
+ height: 100%;
359
+ }
360
+
361
+ .fjs-cursor-grabbing .fjs-editor-container .fjs-empty-editor {
362
+ display: none;
363
+ }
364
+
365
+ .fjs-editor-container .fjs-empty-editor .fjs-empty-editor-card {
366
+ display: flex;
367
+ flex-direction: column;
368
+ padding: 20px;
369
+ }
370
+
371
+ .fjs-editor-container .fjs-drop-container-horizontal {
372
+ width: 100%;
373
+ }
374
+
375
+ .fjs-editor-container .fjs-layout-row {
376
+ padding: 4px 0px;
377
+ }
378
+
379
+ .fjs-editor-container .fjs-drag-row-move {
380
+ display: flex;
381
+ width: 100%;
382
+ padding: 3px 0px;
383
+ position: relative;
384
+ }
385
+
386
+ .fjs-editor-container .fjs-row-dragger {
387
+ z-index: 2;
388
+ position: absolute;
389
+ top: 25%;
390
+ height: 50%;
391
+ left: -33px;
392
+ width: 23px;
393
+ padding-right: 7px;
394
+ cursor: grab;
395
+ display: flex;
396
+ justify-content: center;
397
+ align-items: center;
398
+ }
399
+
400
+ .fjs-editor-container .fjs-row-dragger svg {
401
+ visibility: hidden;
402
+ }
403
+
404
+ .fjs-editor-container .fjs-row-dragger:hover svg,
405
+ .fjs-editor-container .fjs-drag-row-move:hover > .fjs-row-dragger svg {
406
+ visibility: visible;
407
+ }
408
+
409
+ .fjs-editor-container .fjs-drag-move {
410
+ padding: 0 3px;
411
+ }
412
+
413
+ .fjs-editor-container .fjs-field-resize-handle {
414
+ resize: horizontal;
415
+ position: absolute;
416
+ visibility: hidden;
417
+ width: 6px;
418
+ top: 0;
419
+ bottom: 0;
420
+ margin: auto;
421
+ height: 50px;
422
+ max-height: calc(100% - 2px);
423
+ border: 1px solid var(--color-resize-handle-border);
424
+ border-radius: 50px;
425
+ background: var(--color-white);
426
+ z-index: 3;
427
+ }
428
+
429
+ .fjs-editor-container .fjs-field-resize-handle-right {
430
+ right: -4px;
431
+ cursor: ew-resize;
432
+ }
433
+
434
+ .fjs-editor-container .fjs-field-resize-handle-left {
435
+ left: -4px;
436
+ cursor: ew-resize;
437
+ }
438
+
439
+ .fjs-editor-container .fjs-element-resizing-right .fjs-field-resize-handle-right,
440
+ .fjs-editor-container .fjs-element-resizing-left .fjs-field-resize-handle-left,
441
+ .fjs-editor-container .fjs-field-resize-handle:hover {
442
+ background: var(--color-resize-handle-background);
443
+ }
444
+
445
+ .fjs-editor-container .fjs-element-resizing-right .fjs-context-pad,
446
+ .fjs-editor-container .fjs-element-resizing-left .fjs-context-pad {
447
+ display: none;
448
+ }
449
+
450
+ .fjs-editor-container .fjs-children .fjs-editor-selected > .fjs-field-resize-handle {
451
+ visibility: visible;
452
+ }
453
+
454
+ .fjs-resize-drag-preview {
455
+ width: 1px;
456
+ height: 1px;
457
+ position: absolute;
458
+ top: 0;
459
+ }
460
+
461
+ .fjs-editor-container .fjs-repeat-render-footer {
462
+ font-size: var(--font-size-label);
463
+ background: var(--cds-field, var(--color-background-disabled));
464
+ color: var(--cds-text-disabled, var(--color-grey-225-10-45));
465
+ padding: 3px;
466
+ display: flex;
467
+ align-items: center;
468
+ justify-content: center;
469
+ margin: 0px 5px 3px 5px;
470
+ }
471
+
472
+ .fjs-editor-container .fjs-repeat-render-footer svg {
473
+ margin-right: 4px;
474
+ }
475
+
476
+ /* do not show resize handles on small screens */
477
+ @media (max-width: 66rem) {
478
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
479
+ display: none !important;
480
+ }
481
+ }
482
+
483
+ /**
484
+ * Cursor styles
485
+ */
486
+ .fjs-cursor-grab {
487
+ cursor: -webkit-grab;
488
+ cursor: -moz-grab;
489
+ cursor: grab;
490
+ }
491
+
492
+ .fjs-cursor-grabbing {
493
+ cursor: -webkit-grabbing;
494
+ cursor: -moz-grabbing;
495
+ cursor: grabbing;
496
+ }
497
+
498
+ .fjs-cursor-crosshair {
499
+ cursor: crosshair;
500
+ }
501
+
502
+ .fjs-cursor-move {
503
+ cursor: move;
504
+ }
505
+
506
+ .fjs-cursor-not-allowed {
507
+ cursor: not-allowed;
508
+ }
509
+
510
+
511
+ /**
512
+ * Context Pad
513
+ */
514
+ .fjs-editor-container .fjs-context-pad {
515
+ z-index: 2;
516
+ position: absolute;
517
+ top: 0;
518
+ right: 5px;
519
+ }
520
+
521
+ .fjs-editor-container .fjs-context-pad-item {
522
+ border: none;
523
+ background-color: var(--color-context-pad-item-background);
524
+ padding: 0;
525
+ width: 24px;
526
+ height: 24px;
527
+ color: var(--color-context-pad-item-fill);
528
+ display: flex;
529
+ justify-content: center;
530
+ align-items: center;
531
+ }
532
+
533
+ .fjs-editor-container .fjs-context-pad-item:hover {
534
+ color: var(--color-context-pad-item-hover-fill);
535
+ }
536
+
537
+ .fjs-editor-container .fjs-context-pad-item:focus-visible {
538
+ outline: 2px solid var(--color-children-selected-border);
539
+ border-radius: 2px;
540
+ }
541
+
542
+ /**
543
+ * Palette
544
+ */
545
+ .fjs-editor-container .fjs-palette-container {
546
+ height: 100%;
547
+ }
548
+
549
+ .fjs-palette-container {
550
+ width: var(--palette-width);
551
+ background-color: var(--color-palette-container-background);
552
+ border-right: solid 1px var(--color-palette-container-border);
553
+ font-family: var(--font-family);
554
+ }
555
+
556
+ .fjs-palette-container .fjs-palette {
557
+ height: 100%;
558
+ display: flex;
559
+ flex-direction: column;
560
+ flex: 1;
561
+ }
562
+
563
+ .fjs-palette-container .fjs-palette-header {
564
+ font-size: 14px;
565
+ font-weight: bold;
566
+ color: var(--color-palette-header);
567
+ padding: 10px 15px;
568
+ border-bottom: solid 1px var(--color-palette-header-border);
569
+ background: var(--color-palette-header-background);
570
+ user-select: none;
571
+ }
572
+
573
+ .fjs-palette-container .fjs-palette-footer {
574
+ display: flex;
575
+ flex-direction: column;
576
+ align-items: center;
577
+ }
578
+
579
+ .fjs-palette-container .fjs-palette-footer .fjs-palette-footer-fill {
580
+ padding: 10px;
581
+ width: 100%;
582
+ }
583
+
584
+ .fjs-palette-container .fjs-palette-search-container {
585
+ display: flex;
586
+ flex-direction: row;
587
+ padding: 4px;
588
+ margin: 12px;
589
+ color: var(--color-palette-search);
590
+ border: 1px solid var(--color-palette-search-border);
591
+ background-color: var(--color-palette-search-background);
592
+ border-radius: 2px;
593
+ font-size: 14px;
594
+ }
595
+
596
+ .fjs-palette-container .fjs-palette-search-container:focus-within {
597
+ outline: none;
598
+ background-color: var(--color-palette-search-focus-background);
599
+ border: 1px solid var(--color-palette-search-focus-border);
600
+ }
601
+
602
+ .fjs-palette-container .fjs-palette-search-icon {
603
+ margin-right: 6px;
604
+ display: flex;
605
+ align-items: center;
606
+ justify-content: center;
607
+ color: var(--color-palette-search-icon);
608
+ }
609
+
610
+ .fjs-palette-container .fjs-palette-search {
611
+ background-color: inherit;
612
+ font-family: inherit;
613
+ margin: 0;
614
+ border: none;
615
+ padding: 0;
616
+ color: var(--color-palette-text);
617
+ }
618
+
619
+ .fjs-palette-container .fjs-palette-search:focus {
620
+ outline: none;
621
+ }
622
+
623
+ .fjs-palette-container .fjs-palette-search-clear {
624
+ display: flex;
625
+ justify-content: center;
626
+ align-items: center;
627
+ border: none;
628
+ margin-left: auto;
629
+ padding: 0;
630
+ background: transparent;
631
+ color: var(--color-palette-search-icon);
632
+ }
633
+
634
+ .fjs-palette-container .fjs-palette-search-clear svg {
635
+ margin: 0;
636
+ }
637
+
638
+ .fjs-palette-container .fjs-palette-search-clear:hover {
639
+ color: var(--color-palette-search-icon-hover);
640
+ }
641
+
642
+ .fjs-palette-container .fjs-palette-entries {
643
+ display: flex;
644
+ flex-direction: column;
645
+ overflow-x: hidden;
646
+ overflow-y: auto;
647
+ gap: 20px;
648
+ padding-bottom: 20px;
649
+ }
650
+
651
+ .fjs-palette-container .fjs-palette-group {
652
+ display: flex;
653
+ flex-direction: column;
654
+ width: 236px;
655
+ margin: auto;
656
+ }
657
+
658
+ .fjs-palette-container .fjs-palette-group-title {
659
+ font-size: 14px;
660
+ font-weight: 500;
661
+ margin-bottom: 4px;
662
+ color: var(--color-palette-group-title);
663
+ user-select: none;
664
+ }
665
+
666
+ .fjs-palette-container .fjs-palette-fields {
667
+ display: flex;
668
+ flex-wrap: wrap;
669
+ gap: 10px;
670
+ }
671
+
672
+ .fjs-palette-field {
673
+ height: 72px;
674
+ display: flex;
675
+ flex-direction: column;
676
+ justify-content: center;
677
+ font-size: 11px;
678
+ align-items: center;
679
+ border: none;
680
+ font-family: inherit;
681
+ user-select: none;
682
+ color: var( --color-palette-field);
683
+ background-color: var(--color-palette-field-background);
684
+ outline: solid 1px var(--color-palette-field-border);
685
+ outline-offset: 0px;
686
+ transition: all ease-in-out 0.05s;
687
+ }
688
+
689
+ .fjs-palette-container .fjs-palette-field {
690
+ width: 72px;
691
+ }
692
+
693
+ .fjs-palette-container .fjs-palette-field:focus {
694
+ outline: solid 1px var(--color-palette-field-focus);
695
+ }
696
+
697
+ .fjs-palette-field .fjs-palette-field-icon,
698
+ .fjs-palette-field .fjs-field-icon-image {
699
+ margin: 0 auto;
700
+ }
701
+
702
+ .fjs-palette-field .fjs-palette-field-text {
703
+ text-align: center;
704
+ width: inherit;
705
+ }
706
+
707
+ .fjs-palette-container .fjs-palette-field:hover {
708
+ outline: solid 1px var(--color-palette-field-hover-border);
709
+ cursor: var(--cursor-palette-field);
710
+ }
711
+
712
+ .fjs-palette-container .fjs-palette-no-entries {
713
+ padding: 5px 15px;
714
+ font-size: 14px;
715
+ color: var(--color-palette-text);
716
+ }
717
+
718
+ /**
719
+ * Properties Panel
720
+ */
721
+ .fjs-editor-container .fjs-properties-container {
722
+ height: 100%;
723
+ }
724
+
725
+ .fjs-properties-container {
726
+ background-color: var(--color-properties-container-background);
727
+ width: var(--properties-panel-width);
728
+ border-left: solid 1px var(--color-properties-container-border);
729
+ color: var(--color-text);
730
+ }
731
+
732
+ .fjs-properties-container .fjs-properties-panel {
733
+ height: 100%;
734
+ }
735
+
736
+ .fjs-properties-container .fjs-properties-panel * {
737
+ box-sizing: border-box;
738
+ }
739
+
740
+ .fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
741
+ transform: scale(1.3);
742
+ }
743
+
744
+ /**
745
+ * Editor Form Fields
746
+ */
747
+ .fjs-editor-container .fjs-form-field-placeholder {
748
+ color: var(--color-text-light);
749
+ font-style: italic;
750
+ }
751
+
752
+ .fjs-editor-container .fjs-form-field-placeholder svg {
753
+ width: 32px;
754
+ height: 32px;
755
+ vertical-align: middle;
756
+ margin-top: -2px;
757
+ margin-right: 2px;
758
+ }
759
+
760
+ .fjs-editor-container .fjs-form-field-spacer {
761
+ min-height: 30px;
762
+ background: repeating-linear-gradient( 45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
763
+ }
764
+
765
+ .fjs-editor-container .fjs-form-field-separator hr {
766
+ margin: 10px 2px;
767
+ }
768
+
769
+ /**
770
+ * Custom Dragula Styles
771
+ */
772
+ .gu-transit {
773
+ background: var(--color-dragula-background) !important;
774
+ border: dashed 2px var(--color-dragula-border) !important;
775
+ border-radius: 3px !important;
776
+ filter: none !important;
777
+ height: 70px !important;
778
+ opacity: 1 !important;
779
+ /* mitigate for additional border in row */
780
+ flex-grow: 0.98 !important;
781
+ margin: 0 !important;
782
+ }
783
+
784
+ /* row drop preview */
785
+ .fjs-children > .gu-transit {
786
+ height: 28px !important;
787
+ width: 100% !important;
788
+ flex: unset !important;
789
+ }
790
+
791
+ /* error drop preview */
792
+ .fjs-error-drop > .gu-transit {
793
+ height: 100% !important;
794
+ background: var(--color-dragula-error-background) !important;
795
+ border: none !important;
796
+ width: 6px !important;
797
+ flex: none !important;
798
+ padding: 0 !important;
799
+ border-radius: 5px !important;
800
+ }
801
+
802
+ .fjs-error-drop.cds--row {
803
+ flex-wrap: nowrap !important;
804
+ }
805
+
806
+ .gu-transit * {
807
+ display: none !important;
808
+ }
809
+
810
+ .gu-mirror {
811
+ background-color: var(--color-dragula-mirror-background) !important;
812
+ border: solid 1px var(--color-dragula-mirror-border) !important;
813
+ border-radius: 5px !important;
814
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15) !important;
815
+ display: flex !important;
816
+ filter: none !important;
817
+ flex-direction: row !important;
818
+ justify-content: center !important;
819
+ align-items: center !important;
820
+ opacity: 0.5 !important;
821
+ padding: 0 !important;
822
+ pointer-events: none !important;
823
+ height: 54px !important;
824
+ }
825
+
826
+ .fjs-field-preview {
827
+ margin: 5px 0;
828
+ display: flex;
829
+ flex-direction: column;
830
+ justify-content: center;
831
+ font-size: 11px;
832
+ user-select: none;
833
+ color: var(--color-text);
834
+ background: var(--color-white);
835
+ }
836
+
837
+ .fjs-field-preview .fjs-field-preview-icon {
838
+ margin: 0 auto;
839
+ }
840
+
841
+ .fjs-field-preview .fjs-field-preview-text {
842
+ text-align: center;
843
+ }
844
+
845
+ .gu-mirror.fjs-field-preview-container {
846
+ transform: rotate(-15deg);
847
+ font-family: var(--font-family);
848
+ width: 68px !important;
849
+ height: 68px !important;
850
+ }
851
+
852
+ .gu-mirror.fjs-drag-row-move {
853
+ padding: 4px 12px !important;
854
+ height: fit-content !important;
855
+ opacity: 0.8 !important;
856
+ max-height: 120px !important;
857
+ overflow: hidden !important;
858
+ align-items: start !important;
859
+ }
860
+
861
+ .gu-mirror.fjs-drag-row-move .cds--row {
862
+ flex-wrap: nowrap !important;
863
+ }