@bpmn-io/form-js-editor 1.2.0 → 1.3.0

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