@bpmn-io/form-js-editor 1.3.3 → 1.4.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 (47) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +152 -116
  3. package/dist/assets/form-js-editor-base.css +821 -797
  4. package/dist/assets/form-js-editor.css +46 -17
  5. package/dist/assets/properties-panel.css +6 -1
  6. package/dist/index.cjs +1011 -855
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.es.js +1045 -894
  9. package/dist/index.es.js.map +1 -1
  10. package/dist/types/FormEditor.d.ts +1 -0
  11. package/dist/types/features/palette/components/Palette.d.ts +35 -5
  12. package/dist/types/features/palette/components/PaletteEntry.d.ts +1 -0
  13. package/dist/types/features/properties-panel/PropertiesPanelHeaderProvider.d.ts +1 -1
  14. package/dist/types/features/properties-panel/PropertiesPanelRenderer.d.ts +17 -0
  15. package/dist/types/features/properties-panel/PropertiesProvider.d.ts +10 -0
  16. package/dist/types/features/properties-panel/Util.d.ts +2 -0
  17. package/dist/types/features/properties-panel/entries/ActionEntry.d.ts +1 -0
  18. package/dist/types/features/properties-panel/entries/AdornerEntry.d.ts +1 -0
  19. package/dist/types/features/properties-panel/entries/AltTextEntry.d.ts +1 -0
  20. package/dist/types/features/properties-panel/entries/DateTimeConstraintsEntry.d.ts +1 -0
  21. package/dist/types/features/properties-panel/entries/DateTimeEntry.d.ts +1 -0
  22. package/dist/types/features/properties-panel/entries/DateTimeSerializationEntry.d.ts +1 -0
  23. package/dist/types/features/properties-panel/entries/DefaultValueEntry.d.ts +11 -1
  24. package/dist/types/features/properties-panel/entries/DescriptionEntry.d.ts +1 -0
  25. package/dist/types/features/properties-panel/entries/DisabledEntry.d.ts +1 -0
  26. package/dist/types/features/properties-panel/entries/GroupEntries.d.ts +1 -0
  27. package/dist/types/features/properties-panel/entries/IdEntry.d.ts +1 -0
  28. package/dist/types/features/properties-panel/entries/ImageSourceEntry.d.ts +1 -0
  29. package/dist/types/features/properties-panel/entries/KeyEntry.d.ts +1 -0
  30. package/dist/types/features/properties-panel/entries/LabelEntry.d.ts +1 -0
  31. package/dist/types/features/properties-panel/entries/NumberEntries.d.ts +1 -0
  32. package/dist/types/features/properties-panel/entries/NumberSerializationEntry.d.ts +1 -0
  33. package/dist/types/features/properties-panel/entries/ReadonlyEntry.d.ts +1 -0
  34. package/dist/types/features/properties-panel/entries/SelectEntries.d.ts +1 -0
  35. package/dist/types/features/properties-panel/entries/SpacerEntry.d.ts +1 -0
  36. package/dist/types/features/properties-panel/entries/TextEntry.d.ts +1 -0
  37. package/dist/types/features/properties-panel/entries/factories/simpleBoolEntryFactory.d.ts +1 -0
  38. package/dist/types/features/properties-panel/groups/AppearanceGroup.d.ts +1 -0
  39. package/dist/types/features/properties-panel/groups/ConstraintsGroup.d.ts +1 -0
  40. package/dist/types/features/properties-panel/groups/GeneralGroup.d.ts +17 -1
  41. package/dist/types/features/properties-panel/groups/SerializationGroup.d.ts +1 -0
  42. package/dist/types/features/properties-panel/groups/ValidationGroup.d.ts +1 -0
  43. package/dist/types/features/properties-panel/groups/ValuesGroups.d.ts +1 -1
  44. package/dist/types/features/properties-panel/index.d.ts +2 -0
  45. package/dist/types/index.d.ts +2 -0
  46. package/dist/types/types.d.ts +28 -28
  47. package/package.json +4 -4
package/dist/assets/form-js-editor-base.css CHANGED
@@ -1,797 +1,821 @@
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-editor-container .fjs-form-editor {
220
+ display: flex;
221
+ flex: 1;
222
+ flex-direction: row;
223
+ }
224
+
225
+ .fjs-editor-container .fjs-form-container {
226
+ overflow-y: auto;
227
+ position: relative;
228
+ }
229
+
230
+ .fjs-editor-container .fjs-render-injector-container {
231
+ width: 0;
232
+ height: 0;
233
+ display: none;
234
+ overflow: hidden;
235
+ }
236
+
237
+ .fjs-editor-container .fjs-form-container,
238
+ .fjs-editor-container .fjs-form {
239
+ display: flex;
240
+ flex-direction: column;
241
+ flex: 1;
242
+ }
243
+
244
+ .fjs-editor-container .fjs-form > .fjs-element {
245
+ flex-grow: 1;
246
+ }
247
+
248
+ .fjs-editor-container .fjs-children .fjs-children {
249
+ margin: 3px 0;
250
+ }
251
+
252
+ .fjs-editor-container .fjs-children .fjs-element {
253
+ position: relative;
254
+ border: solid 2px transparent;
255
+ outline: none;
256
+ }
257
+
258
+ .fjs-editor-container .fjs-form > .fjs-element {
259
+ border: none;
260
+ }
261
+
262
+ .fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
263
+ margin: 1px 6px;
264
+ }
265
+
266
+ .fjs-editor-container .fjs-children .fjs-element.fjs-outlined {
267
+ border-color: var(--color-borders-group);
268
+ }
269
+
270
+ .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
271
+ border-color: var(--color-children-selected-border) !important;
272
+ background-color: var(--color-children-selected-background);
273
+ }
274
+
275
+ .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
276
+ .fjs-editor-container .fjs-children .fjs-element:focus {
277
+ border-color: var(--color-children-hover-border);
278
+ }
279
+
280
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"] {
281
+ margin-left: -6px;
282
+ }
283
+
284
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="group"] {
285
+ margin-right: -6px;
286
+ }
287
+
288
+ .fjs-editor-container .fjs-form-field-group,
289
+ .fjs-editor-container .fjs-form-field-group .fjs-form-field-group .fjs-form-field-group {
290
+ margin: 1px 6px;
291
+ padding: 0px;
292
+ }
293
+
294
+ .fjs-editor-container .fjs-form-field-group.fjs-outlined {
295
+ outline: none;
296
+ }
297
+
298
+ .fjs-editor-container .fjs-form-field-group .cds--grid {
299
+ padding: 0 2rem;
300
+ }
301
+
302
+ .fjs-editor-container .fjs-form-field-group > label {
303
+ margin-top: 6px;
304
+ }
305
+
306
+ .fjs-editor-container .fjs-input:disabled,
307
+ .fjs-editor-container .fjs-textarea:disabled,
308
+ .fjs-editor-container .fjs-taglist-input:disabled,
309
+ .fjs-editor-container .fjs-button:disabled,
310
+ .fjs-editor-container .fjs-select:disabled {
311
+ pointer-events: none;
312
+ }
313
+
314
+ .fjs-editor-container .fjs-readonly {
315
+ pointer-events: none;
316
+ }
317
+
318
+ .fjs-editor-container .fjs-drag-container,
319
+ .fjs-editor-container .fjs-drop-container-vertical {
320
+ user-select: none;
321
+ }
322
+
323
+ .fjs-editor-container .fjs-empty-editor {
324
+ display: flex;
325
+ align-items: center;
326
+ justify-content: center;
327
+ position: absolute;
328
+ top: 0;
329
+ left: 0;
330
+ width: 100%;
331
+ height: 100%;
332
+ }
333
+
334
+ .fjs-cursor-grabbing .fjs-editor-container .fjs-empty-editor {
335
+ display: none;
336
+ }
337
+
338
+ .fjs-editor-container .fjs-empty-editor .fjs-empty-editor-card {
339
+ display: flex;
340
+ flex-direction: column;
341
+ padding: 20px;
342
+ }
343
+
344
+ .fjs-editor-container .fjs-drop-container-horizontal {
345
+ width: 100%;
346
+ }
347
+
348
+ .fjs-editor-container .fjs-layout-row {
349
+ padding: 4px 0px;
350
+ }
351
+
352
+ .fjs-editor-container .fjs-drag-row-move {
353
+ display: flex;
354
+ width: 100%;
355
+ padding: 3px 0px;
356
+ position: relative;
357
+ }
358
+
359
+ .fjs-editor-container .fjs-row-dragger {
360
+ z-index: 2;
361
+ position: absolute;
362
+ top: 25%;
363
+ height: 50%;
364
+ left: -33px;
365
+ width: 23px;
366
+ padding-right: 7px;
367
+ cursor: grab;
368
+ display: flex;
369
+ justify-content: center;
370
+ align-items: center;
371
+ }
372
+
373
+ .fjs-editor-container .fjs-row-dragger svg {
374
+ visibility: hidden;
375
+ }
376
+
377
+ .fjs-editor-container .fjs-row-dragger:hover svg,
378
+ .fjs-editor-container .fjs-drag-row-move:hover > .fjs-row-dragger svg {
379
+ visibility: visible;
380
+ }
381
+
382
+ .fjs-editor-container .fjs-drag-move {
383
+ padding: 0 3px;
384
+ }
385
+
386
+ .fjs-editor-container .fjs-field-resize-handle {
387
+ resize: horizontal;
388
+ position: absolute;
389
+ visibility: hidden;
390
+ width: 6px;
391
+ top: 0;
392
+ bottom: 0;
393
+ margin: auto;
394
+ height: 50px;
395
+ max-height: calc(100% - 2px);
396
+ border: 1px solid var(--color-resize-handle-border);
397
+ border-radius: 50px;
398
+ background: var(--color-white);
399
+ z-index: 3;
400
+ }
401
+
402
+ .fjs-editor-container .fjs-field-resize-handle-right {
403
+ right: -4px;
404
+ cursor: ew-resize;
405
+ }
406
+
407
+ .fjs-editor-container .fjs-field-resize-handle-left {
408
+ left: -4px;
409
+ cursor: ew-resize;
410
+ }
411
+
412
+ .fjs-editor-container .fjs-element-resizing-right .fjs-field-resize-handle-right,
413
+ .fjs-editor-container .fjs-element-resizing-left .fjs-field-resize-handle-left,
414
+ .fjs-editor-container .fjs-field-resize-handle:hover {
415
+ background: var(--color-resize-handle-background);
416
+ }
417
+
418
+ .fjs-editor-container .fjs-element-resizing-right .fjs-context-pad,
419
+ .fjs-editor-container .fjs-element-resizing-left .fjs-context-pad {
420
+ display: none;
421
+ }
422
+
423
+ .fjs-editor-container .fjs-children .fjs-editor-selected > .fjs-field-resize-handle {
424
+ visibility: visible;
425
+ }
426
+
427
+ .fjs-resize-drag-preview {
428
+ width: 1px;
429
+ height: 1px;
430
+ position: absolute;
431
+ top: 0;
432
+ }
433
+
434
+ /* do not show resize handles on small screens */
435
+ @media (max-width: 66rem) {
436
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
437
+ display: none !important;
438
+ }
439
+ }
440
+
441
+ /**
442
+ * Cursor styles
443
+ */
444
+ .fjs-cursor-grab {
445
+ cursor: -webkit-grab;
446
+ cursor: -moz-grab;
447
+ cursor: grab;
448
+ }
449
+
450
+ .fjs-cursor-grabbing {
451
+ cursor: -webkit-grabbing;
452
+ cursor: -moz-grabbing;
453
+ cursor: grabbing;
454
+ }
455
+
456
+ .fjs-cursor-crosshair {
457
+ cursor: crosshair;
458
+ }
459
+
460
+ .fjs-cursor-move {
461
+ cursor: move;
462
+ }
463
+
464
+ .fjs-cursor-not-allowed {
465
+ cursor: not-allowed;
466
+ }
467
+
468
+
469
+ /**
470
+ * Context Pad
471
+ */
472
+ .fjs-editor-container .fjs-context-pad {
473
+ z-index: 2;
474
+ position: absolute;
475
+ top: 0;
476
+ right: 5px;
477
+ }
478
+
479
+ .fjs-editor-container .fjs-context-pad-item {
480
+ border: none;
481
+ background-color: var(--color-context-pad-item-background);
482
+ padding: 0;
483
+ width: 24px;
484
+ height: 24px;
485
+ color: var(--color-context-pad-item-fill);
486
+ display: flex;
487
+ justify-content: center;
488
+ align-items: center;
489
+ }
490
+
491
+ .fjs-editor-container .fjs-context-pad-item:hover {
492
+ color: var(--color-context-pad-item-hover-fill);
493
+ }
494
+
495
+ .fjs-editor-container .fjs-context-pad-item:focus-visible {
496
+ outline: 2px solid var(--color-children-selected-border);
497
+ border-radius: 2px;
498
+ }
499
+
500
+ /**
501
+ * Palette
502
+ */
503
+ .fjs-editor-container .fjs-palette-container {
504
+ height: 100%;
505
+ }
506
+
507
+ .fjs-palette-container {
508
+ width: var(--palette-width);
509
+ background-color: var(--color-palette-container-background);
510
+ border-right: solid 1px var(--color-palette-container-border);
511
+ font-family: var(--font-family);
512
+ }
513
+
514
+ .fjs-palette-container .fjs-palette {
515
+ height: 100%;
516
+ display: flex;
517
+ flex-direction: column;
518
+ flex: 1;
519
+ }
520
+
521
+ .fjs-palette-container .fjs-palette-header {
522
+ font-size: 14px;
523
+ font-weight: bold;
524
+ color: var(--color-palette-header);
525
+ padding: 10px 15px;
526
+ border-bottom: solid 1px var(--color-palette-header-border);
527
+ background: var(--color-palette-header-background);
528
+ user-select: none;
529
+ }
530
+
531
+ .fjs-palette-container .fjs-palette-footer {
532
+ display: flex;
533
+ flex-direction: column;
534
+ align-items: center;
535
+ }
536
+
537
+ .fjs-palette-container .fjs-palette-footer .fjs-palette-footer-fill {
538
+ padding: 10px;
539
+ width: 100%;
540
+ }
541
+
542
+ .fjs-palette-container .fjs-palette-search-container {
543
+ display: flex;
544
+ flex-direction: row;
545
+ padding: 4px;
546
+ margin: 12px;
547
+ color: var(--color-palette-search);
548
+ border: 1px solid var(--color-palette-search-border);
549
+ background-color: var(--color-palette-search-background);
550
+ border-radius: 2px;
551
+ font-size: 14px;
552
+ }
553
+
554
+ .fjs-palette-container .fjs-palette-search-container:focus-within {
555
+ outline: none;
556
+ background-color: var(--color-palette-search-focus-background);
557
+ border: 1px solid var(--color-palette-search-focus-border);
558
+ }
559
+
560
+ .fjs-palette-container .fjs-palette-search-icon {
561
+ margin-right: 6px;
562
+ display: flex;
563
+ align-items: center;
564
+ justify-content: center;
565
+ color: var(--color-palette-search-icon);
566
+ }
567
+
568
+ .fjs-palette-container .fjs-palette-search {
569
+ background-color: inherit;
570
+ font-family: inherit;
571
+ margin: 0;
572
+ border: none;
573
+ padding: 0;
574
+ color: var(--color-palette-text);
575
+ }
576
+
577
+ .fjs-palette-container .fjs-palette-search:focus {
578
+ outline: none;
579
+ }
580
+
581
+ .fjs-palette-container .fjs-palette-search-clear {
582
+ display: flex;
583
+ justify-content: center;
584
+ align-items: center;
585
+ border: none;
586
+ margin-left: auto;
587
+ padding: 0;
588
+ background: transparent;
589
+ color: var(--color-palette-search-icon);
590
+ }
591
+
592
+ .fjs-palette-container .fjs-palette-search-clear svg {
593
+ margin: 0;
594
+ }
595
+
596
+ .fjs-palette-container .fjs-palette-search-clear:hover {
597
+ color: var(--color-palette-search-icon-hover);
598
+ }
599
+
600
+ .fjs-palette-container .fjs-palette-entries {
601
+ display: flex;
602
+ flex-direction: column;
603
+ overflow-x: hidden;
604
+ overflow-y: auto;
605
+ gap: 20px;
606
+ padding-bottom: 20px;
607
+ }
608
+
609
+ .fjs-palette-container .fjs-palette-group {
610
+ display: flex;
611
+ flex-direction: column;
612
+ width: 212px;
613
+ margin: auto;
614
+ }
615
+
616
+ .fjs-palette-container .fjs-palette-group-title {
617
+ font-size: 14px;
618
+ font-weight: 500;
619
+ margin-bottom: 4px;
620
+ color: var(--color-palette-group-title);
621
+ user-select: none;
622
+ }
623
+
624
+ .fjs-palette-container .fjs-palette-fields {
625
+ display: flex;
626
+ flex-wrap: wrap;
627
+ gap: 10px;
628
+ }
629
+
630
+ .fjs-palette-field {
631
+ height: 64px;
632
+ display: flex;
633
+ flex-direction: column;
634
+ justify-content: center;
635
+ font-size: 11px;
636
+ align-items: center;
637
+ border: none;
638
+ font-family: inherit;
639
+ user-select: none;
640
+ color: var( --color-palette-field);
641
+ background-color: var(--color-palette-field-background);
642
+ outline: solid 1px var(--color-palette-field-border);
643
+ outline-offset: 0px;
644
+ transition: all ease-in-out 0.05s;
645
+ }
646
+
647
+ .fjs-palette-container .fjs-palette-field {
648
+ width: 64px;
649
+ }
650
+
651
+ .fjs-palette-container .fjs-palette-field:focus {
652
+ outline: solid 1px var(--color-palette-field-focus);
653
+ }
654
+
655
+ .fjs-palette-field .fjs-palette-field-icon,
656
+ .fjs-palette-field .fjs-field-icon-image {
657
+ margin: 0 auto;
658
+ }
659
+
660
+ .fjs-palette-field .fjs-palette-field-text {
661
+ text-align: center;
662
+ width: inherit;
663
+ }
664
+
665
+ .fjs-palette-container .fjs-palette-field:hover {
666
+ outline: solid 1px var(--color-palette-field-hover-border);
667
+ cursor: var(--cursor-palette-field);
668
+ }
669
+
670
+ .fjs-palette-container .fjs-palette-no-entries {
671
+ padding: 5px 15px;
672
+ font-size: 14px;
673
+ color: var(--color-palette-text);
674
+ }
675
+
676
+ /**
677
+ * Properties Panel
678
+ */
679
+ .fjs-editor-container .fjs-properties-container {
680
+ height: 100%;
681
+ }
682
+
683
+ .fjs-properties-container {
684
+ background-color: var(--color-properties-container-background);
685
+ width: var(--properties-panel-width);
686
+ border-left: solid 1px var(--color-properties-container-border);
687
+ color: var(--color-text);
688
+ }
689
+
690
+ .fjs-properties-container .fjs-properties-panel {
691
+ height: 100%;
692
+ }
693
+
694
+ .fjs-properties-container .fjs-properties-panel * {
695
+ box-sizing: border-box;
696
+ }
697
+
698
+ .fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
699
+ transform: scale(1.3);
700
+ }
701
+
702
+ /**
703
+ * Editor Form Fields
704
+ */
705
+ .fjs-editor-container .fjs-form-field-placeholder {
706
+ color: var(--color-text-light);
707
+ font-style: italic;
708
+ }
709
+
710
+ .fjs-editor-container .fjs-form-field-placeholder svg {
711
+ width: 36px;
712
+ height: 36px;
713
+ vertical-align: middle;
714
+ margin-top: -2px;
715
+ margin-right: 2px;
716
+ }
717
+
718
+ .fjs-editor-container .fjs-form-field-spacer {
719
+ min-height: 30px;
720
+ background: repeating-linear-gradient( 45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
721
+ }
722
+
723
+ .fjs-editor-container .fjs-form-field-separator hr {
724
+ margin: 10px 2px;
725
+ }
726
+
727
+ /**
728
+ * Custom Dragula Styles
729
+ */
730
+ .gu-transit {
731
+ background: var(--color-dragula-background) !important;
732
+ border: dashed 2px var(--color-dragula-border) !important;
733
+ border-radius: 3px !important;
734
+ filter: none !important;
735
+ height: 70px !important;
736
+ opacity: 1 !important;
737
+ /* mitigate for additional border in row */
738
+ flex-grow: 0.98 !important;
739
+ margin: 0 !important;
740
+ }
741
+
742
+ /* row drop preview */
743
+ .fjs-children > .gu-transit {
744
+ height: 28px !important;
745
+ width: 100% !important;
746
+ flex: unset !important;
747
+ }
748
+
749
+ /* error drop preview */
750
+ .fjs-error-drop > .gu-transit {
751
+ height: 100% !important;
752
+ background: var(--color-dragula-error-background) !important;
753
+ border: none !important;
754
+ width: 6px !important;
755
+ flex: none !important;
756
+ padding: 0 !important;
757
+ border-radius: 5px !important;
758
+ }
759
+
760
+ .fjs-error-drop.cds--row {
761
+ flex-wrap: nowrap !important;
762
+ }
763
+
764
+ .gu-transit * {
765
+ display: none !important;
766
+ }
767
+
768
+ .gu-mirror {
769
+ background-color: var(--color-dragula-mirror-background) !important;
770
+ border: solid 1px var(--color-dragula-mirror-border) !important;
771
+ border-radius: 5px !important;
772
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15) !important;
773
+ display: flex !important;
774
+ filter: none !important;
775
+ flex-direction: row !important;
776
+ justify-content: center !important;
777
+ align-items: center !important;
778
+ opacity: 0.5 !important;
779
+ padding: 0 !important;
780
+ pointer-events: none !important;
781
+ height: 54px !important;
782
+ }
783
+
784
+ .fjs-field-preview {
785
+ margin: 5px 0;
786
+ display: flex;
787
+ flex-direction: column;
788
+ justify-content: center;
789
+ font-size: 11px;
790
+ user-select: none;
791
+ color: var(--color-text);
792
+ background: var(--color-white);
793
+ }
794
+
795
+ .fjs-field-preview .fjs-field-preview-icon {
796
+ margin: 0 auto;
797
+ }
798
+
799
+ .fjs-field-preview .fjs-field-preview-text {
800
+ text-align: center;
801
+ }
802
+
803
+ .gu-mirror.fjs-field-preview-container {
804
+ transform: rotate(-15deg);
805
+ font-family: var(--font-family);
806
+ width: 68px !important;
807
+ height: 68px !important;
808
+ }
809
+
810
+ .gu-mirror.fjs-drag-row-move {
811
+ padding: 4px 12px !important;
812
+ height: fit-content !important;
813
+ opacity: 0.8 !important;
814
+ max-height: 120px !important;
815
+ overflow: hidden !important;
816
+ align-items: start !important;
817
+ }
818
+
819
+ .gu-mirror.fjs-drag-row-move .cds--row {
820
+ flex-wrap: nowrap !important;
821
+ }