@bpmn-io/form-js-editor 1.3.3 → 1.4.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 -116
  3. package/dist/assets/form-js-editor-base.css +832 -797
  4. package/dist/assets/form-js-editor.css +74 -19
  5. package/dist/assets/properties-panel.css +23 -3
  6. package/dist/index.cjs +1097 -838
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.es.js +1130 -876
  9. package/dist/index.es.js.map +1 -1
  10. package/dist/types/FormEditor.d.ts +2 -0
  11. package/dist/types/features/modeling/behavior/ValuesSourceBehavior.d.ts +8 -0
  12. package/dist/types/features/modeling/behavior/index.d.ts +2 -0
  13. package/dist/types/features/modeling/index.d.ts +1 -0
  14. package/dist/types/features/palette/components/Palette.d.ts +35 -5
  15. package/dist/types/features/palette/components/PaletteEntry.d.ts +1 -0
  16. package/dist/types/features/properties-panel/PropertiesPanelHeaderProvider.d.ts +1 -1
  17. package/dist/types/features/properties-panel/PropertiesPanelRenderer.d.ts +17 -0
  18. package/dist/types/features/properties-panel/PropertiesProvider.d.ts +10 -0
  19. package/dist/types/features/properties-panel/Util.d.ts +2 -0
  20. package/dist/types/features/properties-panel/entries/ActionEntry.d.ts +1 -0
  21. package/dist/types/features/properties-panel/entries/AdornerEntry.d.ts +1 -0
  22. package/dist/types/features/properties-panel/entries/AltTextEntry.d.ts +1 -0
  23. package/dist/types/features/properties-panel/entries/DateTimeConstraintsEntry.d.ts +1 -0
  24. package/dist/types/features/properties-panel/entries/DateTimeEntry.d.ts +1 -0
  25. package/dist/types/features/properties-panel/entries/DateTimeSerializationEntry.d.ts +1 -0
  26. package/dist/types/features/properties-panel/entries/DefaultValueEntry.d.ts +11 -1
  27. package/dist/types/features/properties-panel/entries/DescriptionEntry.d.ts +1 -0
  28. package/dist/types/features/properties-panel/entries/DisabledEntry.d.ts +1 -0
  29. package/dist/types/features/properties-panel/entries/GroupEntries.d.ts +1 -0
  30. package/dist/types/features/properties-panel/entries/IdEntry.d.ts +1 -0
  31. package/dist/types/features/properties-panel/entries/ImageSourceEntry.d.ts +1 -0
  32. package/dist/types/features/properties-panel/entries/KeyEntry.d.ts +1 -0
  33. package/dist/types/features/properties-panel/entries/LabelEntry.d.ts +1 -0
  34. package/dist/types/features/properties-panel/entries/NumberEntries.d.ts +1 -0
  35. package/dist/types/features/properties-panel/entries/NumberSerializationEntry.d.ts +1 -0
  36. package/dist/types/features/properties-panel/entries/ReadonlyEntry.d.ts +1 -0
  37. package/dist/types/features/properties-panel/entries/SelectEntries.d.ts +1 -0
  38. package/dist/types/features/properties-panel/entries/SpacerEntry.d.ts +1 -0
  39. package/dist/types/features/properties-panel/entries/TextEntry.d.ts +1 -0
  40. package/dist/types/features/properties-panel/entries/factories/simpleBoolEntryFactory.d.ts +1 -0
  41. package/dist/types/features/properties-panel/groups/AppearanceGroup.d.ts +1 -0
  42. package/dist/types/features/properties-panel/groups/ConstraintsGroup.d.ts +1 -0
  43. package/dist/types/features/properties-panel/groups/GeneralGroup.d.ts +17 -1
  44. package/dist/types/features/properties-panel/groups/SerializationGroup.d.ts +1 -0
  45. package/dist/types/features/properties-panel/groups/ValidationGroup.d.ts +1 -0
  46. package/dist/types/features/properties-panel/groups/ValuesGroups.d.ts +1 -1
  47. package/dist/types/features/properties-panel/index.d.ts +2 -0
  48. package/dist/types/index.d.ts +2 -0
  49. package/dist/types/types.d.ts +28 -28
  50. package/package.json +4 -4
package/dist/assets/form-js-editor-base.css CHANGED
@@ -1,797 +1,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-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
- }
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: 246px;
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: 212px;
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: 64px;
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: 64px;
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: 36px;
723
+ height: 36px;
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
+ }