@bpmn-io/form-js-editor 0.13.1 → 0.14.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 (10) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +116 -116
  3. package/dist/assets/form-js-editor-base.css +489 -486
  4. package/dist/assets/form-js-editor.css +15 -12
  5. package/dist/index.cjs +231 -231
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.es.js +231 -231
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/types/types.d.ts +28 -28
  10. package/package.json +3 -4
package/dist/assets/form-js-editor-base.css CHANGED
@@ -1,486 +1,489 @@
1
- .fjs-editor-container {
2
- --color-children-border: var(--color-grey-225-10-75);
3
- --color-children-selected-border: var(--color-blue-219-100-53);
4
- --color-children-selected-background: transparent;
5
- --color-children-hover-border: var(--color-blue-219-100-53-05);
6
-
7
- --color-context-pad-item-background: var(--color-white);
8
- --color-context-pad-item-fill: var(--color-grey-225-10-35);
9
- --color-context-pad-item-hover-fill: var(--color-black);
10
-
11
- --color-dragula-background: var(--color-blue-205-100-95);
12
- --color-dragula-border: var(--color-blue-205-100-45);
13
- --color-dragula-mirror-background: var(--color-white);
14
- --color-dragula-mirror-border: var(--color-grey-225-10-90);
15
- --color-dragula-error-background: var(--color-red-360-100-92);
16
- --color-dragula-error-border: var(--color-red-360-100-45);
17
- }
18
-
19
- .fjs-palette-container {
20
- --color-palette-text: var(--color-grey-225-10-15);
21
- --color-palette-container-background: var(--color-grey-225-10-95);
22
- --color-palette-container-border: var(--color-grey-225-10-80);
23
- --color-palette-header: var(--color-text);
24
- --color-palette-header-background: var(--color-grey-225-10-95);
25
- --color-palette-header-border: var(--color-grey-225-10-85);
26
- --color-palette-search: var(--color-palette-text);
27
- --color-palette-search-icon: var(--color-grey-225-10-35);
28
- --color-palette-search-icon-hover: var(--color-grey-225-10-15);
29
- --color-palette-search-background: var(--color-white);
30
- --color-palette-search-border: var(--color-grey-225-10-75);
31
- --color-palette-search-focus-background: var(--color-blue-205-100-95);
32
- --color-palette-search-focus-border: var(--color-blue-205-100-50);
33
- --color-palette-search-clear-focus-border: var(--color-grey-225-10-50);
34
- --color-palette-group-title: var(--color-palette-text);
35
- --color-palette-field: var(--color-palette-text);
36
- --color-palette-field-background: var(--color-white);
37
- --color-palette-field-border: var(--color-grey-225-10-80);
38
- --color-palette-field-hover-background: var(--color-grey-225-10-90);
39
- --cursor-palette-field: grab;
40
- --palette-width: 250px;
41
- }
42
-
43
- .fjs-properties-container {
44
- --color-properties-container-background: var(--color-white);
45
- --color-properties-container-border: var(--color-grey-225-10-80);
46
- --properties-panel-width: 300px;
47
- }
48
-
49
- .fjs-editor-container {
50
- height: 100%;
51
- width: 100%;
52
- display: flex;
53
- }
54
-
55
- .fjs-editor-container .fjs-form-editor {
56
- display: flex;
57
- flex: 1;
58
- flex-direction: row;
59
- }
60
-
61
- .fjs-editor-container .fjs-form-container,
62
- .fjs-editor-container .fjs-editor-palette-container,
63
- .fjs-editor-container .fjs-editor-properties-container {
64
- overflow-y: auto;
65
- position: relative;
66
- }
67
-
68
- .fjs-editor-container .fjs-form-container,
69
- .fjs-editor-container .fjs-form {
70
- display: flex;
71
- flex-direction: column;
72
- flex: 1;
73
- }
74
-
75
- .fjs-editor-container .fjs-form > .fjs-element {
76
- flex-grow: 1;
77
- }
78
-
79
- .fjs-editor-container .fjs-children .fjs-children {
80
- border: dashed 2px var(--color-children-border);
81
- }
82
-
83
- .fjs-editor-container .fjs-children .fjs-element {
84
- position: relative;
85
- border: solid 2px transparent;
86
- }
87
-
88
- .fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
89
- margin: 1px 6px;
90
- }
91
-
92
- .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
93
- border-color: var(--color-children-selected-border) !important;
94
- background-color: var(--color-children-selected-background);
95
- }
96
-
97
- .fjs-editor-container .fjs-children .fjs-element:hover {
98
- border-color: var(--color-children-hover-border);
99
- }
100
-
101
- .fjs-editor-container .fjs-input:disabled,
102
- .fjs-editor-container .fjs-textarea:disabled,
103
- .fjs-editor-container .fjs-taglist-input:disabled,
104
- .fjs-editor-container .fjs-select:disabled {
105
- pointer-events: none;
106
- }
107
-
108
- .fjs-editor-container .fjs-drag-container,
109
- .fjs-editor-container .fjs-drop-container-vertical {
110
- user-select: none;
111
- }
112
-
113
- .fjs-editor-container .fjs-layout-row {
114
- padding: 4px 0px;
115
- }
116
-
117
- .fjs-editor-container .fjs-drag-row-move {
118
- display: flex;
119
- width: 100%;
120
- padding: 3px 0px;
121
- }
122
-
123
- .fjs-editor-container .fjs-row-dragger {
124
- visibility: hidden;
125
- z-index: 2;
126
- position: relative;
127
- margin-left: -12px;
128
- margin-top: auto;
129
- margin-bottom: auto;
130
- cursor: grab;
131
- width: 32px;
132
- height: 32px;
133
- display: flex;
134
- justify-content: center;
135
- align-items: center;
136
- }
137
-
138
- .fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger {
139
- visibility: visible;
140
- }
141
-
142
- /**
143
- * Cursor styles
144
- */
145
- .fjs-cursor-grab {
146
- cursor: -webkit-grab;
147
- cursor: -moz-grab;
148
- cursor: grab;
149
- }
150
-
151
- .fjs-cursor-grabbing {
152
- cursor: -webkit-grabbing;
153
- cursor: -moz-grabbing;
154
- cursor: grabbing;
155
- }
156
-
157
- .fjs-cursor-crosshair {
158
- cursor: crosshair;
159
- }
160
-
161
- .fjs-cursor-move {
162
- cursor: move;
163
- }
164
-
165
- .fjs-cursor-not-allowed {
166
- cursor: not-allowed;
167
- }
168
-
169
-
170
- /**
171
- * Context Pad
172
- */
173
- .fjs-editor-container .fjs-context-pad {
174
- z-index: 2;
175
- position: absolute;
176
- top: 3px;
177
- right: 3px;
178
- box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
179
- }
180
-
181
- .fjs-editor-container .fjs-context-pad-item {
182
- border: none;
183
- border-radius: 3px;
184
- background-color: var(--color-context-pad-item-background);
185
- padding: 0;
186
- width: 24px;
187
- height: 24px;
188
- fill: var(--color-context-pad-item-fill);
189
- display: flex;
190
- justify-content: center;
191
- align-items: center;
192
- }
193
-
194
- .fjs-editor-container .fjs-context-pad-item:hover {
195
- fill: var(--color-context-pad-item-hover-fill);
196
- }
197
-
198
- /**
199
- * Palette
200
- */
201
- .fjs-editor-container .fjs-palette-container {
202
- height: 100%;
203
- }
204
-
205
- .fjs-palette-container {
206
- width: var(--palette-width);
207
- background-color: var(--color-palette-container-background);
208
- border-right: solid 1px var(--color-palette-container-border);
209
- font-family: var(--font-family);
210
- }
211
-
212
- .fjs-palette-container .fjs-palette {
213
- height: 100%;
214
- display: flex;
215
- flex-direction: column;
216
- flex: 1;
217
- }
218
-
219
- .fjs-palette-container .fjs-palette-header {
220
- font-size: 14px;
221
- font-weight: bold;
222
- color: var(--color-palette-header);
223
- padding: 10px 15px;
224
- border-bottom: solid 1px var(--color-palette-header-border);
225
- background: var(--color-palette-header-background);
226
- user-select: none;
227
- }
228
-
229
- .fjs-palette-container .fjs-palette-search-container {
230
- display: flex;
231
- flex-direction: row;
232
- padding: 4px;
233
- margin: 15px;
234
- margin-top: 12px;
235
- color: var(--color-palette-search);
236
- border: 1px solid var(--color-palette-search-border);
237
- background-color: var(--color-palette-search-background);
238
- border-radius: 2px;
239
- font-size: 14px;
240
- }
241
-
242
- .fjs-palette-container .fjs-palette-search-container:focus-within {
243
- outline: none;
244
- background-color: var(--color-palette-search-focus-background);
245
- border: 1px solid var(--color-palette-search-focus-border);
246
- }
247
-
248
- .fjs-palette-container .fjs-palette-search-icon {
249
- margin-right: 6px;
250
- display: flex;
251
- align-items: center;
252
- justify-content: center;
253
- color: var(--color-palette-search-icon);
254
- }
255
-
256
- .fjs-palette-container .fjs-palette-search {
257
- background-color: inherit;
258
- font-family: inherit;
259
- margin: 0;
260
- border: none;
261
- padding: 0;
262
- }
263
-
264
- .fjs-palette-container .fjs-palette-search:focus {
265
- outline: none;
266
- }
267
-
268
- .fjs-palette-container .fjs-palette-search-clear {
269
- display: flex;
270
- justify-content: center;
271
- align-items: center;
272
- border: none;
273
- margin-left: auto;
274
- padding: 0;
275
- background: transparent;
276
- color: var(--color-palette-search-icon);
277
- }
278
-
279
- .fjs-palette-container .fjs-palette-search-clear svg {
280
- margin: 0;
281
- }
282
-
283
- .fjs-palette-container .fjs-palette-search-clear:hover {
284
- color: var(--color-palette-search-icon-hover);
285
- }
286
-
287
- .fjs-palette-container .fjs-palette-entries {
288
- height: 100%;
289
- overflow-x: hidden;
290
- overflow-y: auto;
291
- }
292
-
293
- .fjs-palette-container .fjs-palette-group {
294
- padding: 5px 15px;
295
- padding-right: 0px;
296
- }
297
-
298
- .fjs-palette-container .fjs-palette-group-title {
299
- font-size: 14px;
300
- font-weight: 500;
301
- color: var(--color-palette-group-title);
302
- user-select: none;
303
- }
304
-
305
- .fjs-palette-container .fjs-palette-fields {
306
- height: 100%;
307
- display: flex;
308
- flex-wrap: wrap;
309
- gap: 3%;
310
- }
311
-
312
- .fjs-palette-field {
313
- height: 68px;
314
- margin: 5px 0;
315
- display: flex;
316
- flex-direction: column;
317
- justify-content: center;
318
- font-size: 11px;
319
- user-select: none;
320
- color: var( --color-palette-field);
321
- background: var(--color-palette-field-background);
322
- }
323
-
324
- .fjs-palette-container .fjs-palette-field {
325
- width: 68px;
326
- }
327
-
328
- .fjs-palette-field .fjs-palette-field-icon {
329
- margin: 0 auto;
330
- }
331
-
332
- .fjs-palette-field .fjs-palette-field-text {
333
- text-align: center;
334
- }
335
-
336
- .fjs-palette-container .fjs-palette-field:hover {
337
- background-color: var(--color-palette-field-hover-background);
338
- cursor: var(--cursor-palette-field);
339
- }
340
-
341
- .fjs-palette-container .fjs-palette-no-entries {
342
- padding: 5px 15px;
343
- font-size: 14px;
344
- color: var(--color-palette-text);
345
- }
346
-
347
- /**
348
- * Properties Panel
349
- */
350
- .fjs-editor-container .fjs-properties-container {
351
- height: 100%;
352
- }
353
-
354
- .fjs-properties-container {
355
- background-color: var(--color-properties-container-background);
356
- width: var(--properties-panel-width);
357
- border-left: solid 1px var(--color-properties-container-border);
358
- color: var(--color-text);
359
- }
360
-
361
- .fjs-properties-container .fjs-properties-panel {
362
- height: 100%;
363
- }
364
-
365
- .fjs-properties-container .fjs-properties-panel * {
366
- box-sizing: border-box;
367
- }
368
-
369
- .fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
370
- transform: scale(1.3);
371
- }
372
-
373
- /**
374
- * Editor Form Fields
375
- */
376
- .fjs-editor-container .fjs-form-field-placeholder {
377
- color: var(--color-text-light);
378
- font-style: italic;
379
- }
380
-
381
- .fjs-editor-container .fjs-form-field-placeholder svg {
382
- width: 36px;
383
- height: 36px;
384
- vertical-align: middle;
385
- margin-top: -2px;
386
- margin-right: 2px;
387
- }
388
-
389
- /**
390
- * Custom Dragula Styles
391
- */
392
- .gu-transit {
393
- background: var(--color-dragula-background) !important;
394
- border: dashed 2px var(--color-dragula-border) !important;
395
- border-radius: 3px !important;
396
- filter: none !important;
397
- height: 70px !important;
398
- opacity: 1 !important;
399
- /* mitigate for additional border in row */
400
- flex-grow: 0.98 !important;
401
- margin: 0 !important;
402
- }
403
-
404
- /* row drop preview */
405
- .fjs-children > .gu-transit {
406
- height: 28px !important;
407
- margin-left: 28px !important;
408
- margin-right: -8px !important;
409
- flex: unset !important;
410
- width: unset !important;
411
- max-width: unset !important;
412
- }
413
-
414
- /* error drop preview */
415
- .fjs-error-drop > .gu-transit {
416
- height: 100% !important;
417
- background: var(--color-dragula-error-background) !important;
418
- border: none !important;
419
- width: 6px !important;
420
- flex: none !important;
421
- padding: 0 !important;
422
- border-radius: 5px !important;
423
- }
424
-
425
- .fjs-error-drop.cds--row {
426
- flex-wrap: nowrap !important;
427
- }
428
-
429
- .gu-transit * {
430
- display: none !important;
431
- }
432
-
433
- .gu-mirror {
434
- background-color: var(--color-dragula-mirror-background) !important;
435
- border: solid 1px var(--color-dragula-mirror-border) !important;
436
- border-radius: 5px !important;
437
- box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15) !important;
438
- display: flex !important;
439
- filter: none !important;
440
- flex-direction: row !important;
441
- justify-content: center !important;
442
- align-items: center !important;
443
- opacity: 0.5 !important;
444
- padding: 0 !important;
445
- pointer-events: none !important;
446
- height: 54px !important;
447
- }
448
-
449
- .fjs-field-preview {
450
- margin: 5px 0;
451
- display: flex;
452
- flex-direction: column;
453
- justify-content: center;
454
- font-size: 11px;
455
- user-select: none;
456
- color: var(--color-text);
457
- background: var(--color-white);
458
- }
459
-
460
- .fjs-field-preview .fjs-field-preview-icon {
461
- margin: 0 auto;
462
- }
463
-
464
- .fjs-field-preview .fjs-field-preview-text {
465
- text-align: center;
466
- }
467
-
468
- .gu-mirror.fjs-field-preview-container {
469
- transform: rotate(-15deg);
470
- font-family: var(--font-family);
471
- width: 68px !important;
472
- height: 68px !important;
473
- }
474
-
475
- .gu-mirror.fjs-drag-row-move {
476
- padding: 4px 12px !important;
477
- height: fit-content !important;
478
- opacity: 0.8 !important;
479
- max-height: 120px !important;
480
- overflow: hidden !important;
481
- align-items: start !important;
482
- }
483
-
484
- .gu-mirror.fjs-drag-row-move .cds--row {
485
- flex-wrap: nowrap !important;
486
- }
1
+ .fjs-editor-container {
2
+ --color-children-border: var(--color-grey-225-10-75);
3
+ --color-children-selected-border: var(--color-blue-219-100-53);
4
+ --color-children-selected-background: transparent;
5
+ --color-children-hover-border: var(--color-blue-219-100-53-05);
6
+
7
+ --color-context-pad-item-background: var(--color-white);
8
+ --color-context-pad-item-fill: var(--color-grey-225-10-35);
9
+ --color-context-pad-item-hover-fill: var(--color-black);
10
+
11
+ --color-dragula-background: var(--color-blue-205-100-95);
12
+ --color-dragula-border: var(--color-blue-205-100-45);
13
+ --color-dragula-mirror-background: var(--color-white);
14
+ --color-dragula-mirror-border: var(--color-grey-225-10-90);
15
+ --color-dragula-error-background: var(--color-red-360-100-92);
16
+ --color-dragula-error-border: var(--color-red-360-100-45);
17
+ }
18
+
19
+ .fjs-palette-container {
20
+ --color-palette-text: var(--color-grey-225-10-15);
21
+ --color-palette-container-background: var(--color-grey-225-10-95);
22
+ --color-palette-container-border: var(--color-grey-225-10-80);
23
+ --color-palette-header: var(--color-text);
24
+ --color-palette-header-background: var(--color-grey-225-10-95);
25
+ --color-palette-header-border: var(--color-grey-225-10-85);
26
+ --color-palette-search: var(--color-palette-text);
27
+ --color-palette-search-icon: var(--color-grey-225-10-35);
28
+ --color-palette-search-icon-hover: var(--color-grey-225-10-15);
29
+ --color-palette-search-background: var(--color-white);
30
+ --color-palette-search-border: var(--color-grey-225-10-75);
31
+ --color-palette-search-focus-background: var(--color-blue-205-100-95);
32
+ --color-palette-search-focus-border: var(--color-blue-205-100-50);
33
+ --color-palette-search-clear-focus-border: var(--color-grey-225-10-50);
34
+ --color-palette-group-title: var(--color-palette-text);
35
+ --color-palette-field: var(--color-palette-text);
36
+ --color-palette-field-background: var(--color-white);
37
+ --color-palette-field-border: var(--color-grey-225-10-80);
38
+ --color-palette-field-hover-background: var(--color-grey-225-10-90);
39
+ --cursor-palette-field: grab;
40
+ --palette-width: 250px;
41
+ }
42
+
43
+ .fjs-properties-container {
44
+ --color-properties-container-background: var(--color-white);
45
+ --color-properties-container-border: var(--color-grey-225-10-80);
46
+ --properties-panel-width: 300px;
47
+ }
48
+
49
+ .fjs-editor-container {
50
+ height: 100%;
51
+ width: 100%;
52
+ display: flex;
53
+ }
54
+
55
+ .fjs-editor-container .fjs-form-editor {
56
+ display: flex;
57
+ flex: 1;
58
+ flex-direction: row;
59
+ }
60
+
61
+ .fjs-editor-container .fjs-form-container,
62
+ .fjs-editor-container .fjs-editor-palette-container,
63
+ .fjs-editor-container .fjs-editor-properties-container {
64
+ overflow-y: auto;
65
+ position: relative;
66
+ }
67
+
68
+ .fjs-editor-container .fjs-form-container,
69
+ .fjs-editor-container .fjs-form {
70
+ display: flex;
71
+ flex-direction: column;
72
+ flex: 1;
73
+ }
74
+
75
+ .fjs-editor-container .fjs-form > .fjs-element {
76
+ flex-grow: 1;
77
+ }
78
+
79
+ .fjs-editor-container .fjs-children .fjs-children {
80
+ border: dashed 2px var(--color-children-border);
81
+ }
82
+
83
+ .fjs-editor-container .fjs-children .fjs-element {
84
+ position: relative;
85
+ border: solid 2px transparent;
86
+ }
87
+
88
+ .fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
89
+ margin: 1px 6px;
90
+ }
91
+
92
+ .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
93
+ border-color: var(--color-children-selected-border) !important;
94
+ background-color: var(--color-children-selected-background);
95
+ }
96
+
97
+ .fjs-editor-container .fjs-children .fjs-element:hover {
98
+ border-color: var(--color-children-hover-border);
99
+ }
100
+
101
+ .fjs-editor-container .fjs-input:disabled,
102
+ .fjs-editor-container .fjs-textarea:disabled,
103
+ .fjs-editor-container .fjs-taglist-input:disabled,
104
+ .fjs-editor-container .fjs-button:disabled,
105
+ .fjs-editor-container .fjs-select:disabled {
106
+ pointer-events: none;
107
+ }
108
+
109
+ .fjs-editor-container .fjs-drag-container,
110
+ .fjs-editor-container .fjs-drop-container-vertical {
111
+ user-select: none;
112
+ }
113
+
114
+ .fjs-editor-container .fjs-layout-row {
115
+ padding: 4px 0px;
116
+ }
117
+
118
+ .fjs-editor-container .fjs-drag-row-move {
119
+ display: flex;
120
+ width: 100%;
121
+ padding: 3px 0px;
122
+ position: relative;
123
+ }
124
+
125
+ .fjs-editor-container .fjs-row-dragger {
126
+ z-index: 2;
127
+ position: absolute;
128
+ top: 25%;
129
+ height: 50%;
130
+ left: -33px;
131
+ width: 23px;
132
+ padding-right: 7px;
133
+ cursor: grab;
134
+ display: flex;
135
+ justify-content: center;
136
+ align-items: center;
137
+ }
138
+
139
+ .fjs-editor-container .fjs-row-dragger svg {
140
+ visibility: hidden;
141
+ }
142
+
143
+ .fjs-editor-container .fjs-row-dragger:hover svg,
144
+ .fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger svg {
145
+ visibility: visible;
146
+ }
147
+
148
+ /**
149
+ * Cursor styles
150
+ */
151
+ .fjs-cursor-grab {
152
+ cursor: -webkit-grab;
153
+ cursor: -moz-grab;
154
+ cursor: grab;
155
+ }
156
+
157
+ .fjs-cursor-grabbing {
158
+ cursor: -webkit-grabbing;
159
+ cursor: -moz-grabbing;
160
+ cursor: grabbing;
161
+ }
162
+
163
+ .fjs-cursor-crosshair {
164
+ cursor: crosshair;
165
+ }
166
+
167
+ .fjs-cursor-move {
168
+ cursor: move;
169
+ }
170
+
171
+ .fjs-cursor-not-allowed {
172
+ cursor: not-allowed;
173
+ }
174
+
175
+
176
+ /**
177
+ * Context Pad
178
+ */
179
+ .fjs-editor-container .fjs-context-pad {
180
+ z-index: 2;
181
+ position: absolute;
182
+ top: 3px;
183
+ right: 3px;
184
+ box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
185
+ }
186
+
187
+ .fjs-editor-container .fjs-context-pad-item {
188
+ border: none;
189
+ border-radius: 3px;
190
+ background-color: var(--color-context-pad-item-background);
191
+ padding: 0;
192
+ width: 24px;
193
+ height: 24px;
194
+ fill: var(--color-context-pad-item-fill);
195
+ display: flex;
196
+ justify-content: center;
197
+ align-items: center;
198
+ }
199
+
200
+ .fjs-editor-container .fjs-context-pad-item:hover {
201
+ fill: var(--color-context-pad-item-hover-fill);
202
+ }
203
+
204
+ /**
205
+ * Palette
206
+ */
207
+ .fjs-editor-container .fjs-palette-container {
208
+ height: 100%;
209
+ }
210
+
211
+ .fjs-palette-container {
212
+ width: var(--palette-width);
213
+ background-color: var(--color-palette-container-background);
214
+ border-right: solid 1px var(--color-palette-container-border);
215
+ font-family: var(--font-family);
216
+ }
217
+
218
+ .fjs-palette-container .fjs-palette {
219
+ height: 100%;
220
+ display: flex;
221
+ flex-direction: column;
222
+ flex: 1;
223
+ }
224
+
225
+ .fjs-palette-container .fjs-palette-header {
226
+ font-size: 14px;
227
+ font-weight: bold;
228
+ color: var(--color-palette-header);
229
+ padding: 10px 15px;
230
+ border-bottom: solid 1px var(--color-palette-header-border);
231
+ background: var(--color-palette-header-background);
232
+ user-select: none;
233
+ }
234
+
235
+ .fjs-palette-container .fjs-palette-search-container {
236
+ display: flex;
237
+ flex-direction: row;
238
+ padding: 4px;
239
+ margin: 15px;
240
+ margin-top: 12px;
241
+ color: var(--color-palette-search);
242
+ border: 1px solid var(--color-palette-search-border);
243
+ background-color: var(--color-palette-search-background);
244
+ border-radius: 2px;
245
+ font-size: 14px;
246
+ }
247
+
248
+ .fjs-palette-container .fjs-palette-search-container:focus-within {
249
+ outline: none;
250
+ background-color: var(--color-palette-search-focus-background);
251
+ border: 1px solid var(--color-palette-search-focus-border);
252
+ }
253
+
254
+ .fjs-palette-container .fjs-palette-search-icon {
255
+ margin-right: 6px;
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: center;
259
+ color: var(--color-palette-search-icon);
260
+ }
261
+
262
+ .fjs-palette-container .fjs-palette-search {
263
+ background-color: inherit;
264
+ font-family: inherit;
265
+ margin: 0;
266
+ border: none;
267
+ padding: 0;
268
+ }
269
+
270
+ .fjs-palette-container .fjs-palette-search:focus {
271
+ outline: none;
272
+ }
273
+
274
+ .fjs-palette-container .fjs-palette-search-clear {
275
+ display: flex;
276
+ justify-content: center;
277
+ align-items: center;
278
+ border: none;
279
+ margin-left: auto;
280
+ padding: 0;
281
+ background: transparent;
282
+ color: var(--color-palette-search-icon);
283
+ }
284
+
285
+ .fjs-palette-container .fjs-palette-search-clear svg {
286
+ margin: 0;
287
+ }
288
+
289
+ .fjs-palette-container .fjs-palette-search-clear:hover {
290
+ color: var(--color-palette-search-icon-hover);
291
+ }
292
+
293
+ .fjs-palette-container .fjs-palette-entries {
294
+ height: 100%;
295
+ overflow-x: hidden;
296
+ overflow-y: auto;
297
+ }
298
+
299
+ .fjs-palette-container .fjs-palette-group {
300
+ padding: 5px 15px;
301
+ padding-right: 0px;
302
+ }
303
+
304
+ .fjs-palette-container .fjs-palette-group-title {
305
+ font-size: 14px;
306
+ font-weight: 500;
307
+ color: var(--color-palette-group-title);
308
+ user-select: none;
309
+ }
310
+
311
+ .fjs-palette-container .fjs-palette-fields {
312
+ height: 100%;
313
+ display: flex;
314
+ flex-wrap: wrap;
315
+ gap: 3%;
316
+ }
317
+
318
+ .fjs-palette-field {
319
+ height: 68px;
320
+ margin: 5px 0;
321
+ display: flex;
322
+ flex-direction: column;
323
+ justify-content: center;
324
+ font-size: 11px;
325
+ user-select: none;
326
+ color: var( --color-palette-field);
327
+ background: var(--color-palette-field-background);
328
+ }
329
+
330
+ .fjs-palette-container .fjs-palette-field {
331
+ width: 68px;
332
+ }
333
+
334
+ .fjs-palette-field .fjs-palette-field-icon {
335
+ margin: 0 auto;
336
+ }
337
+
338
+ .fjs-palette-field .fjs-palette-field-text {
339
+ text-align: center;
340
+ }
341
+
342
+ .fjs-palette-container .fjs-palette-field:hover {
343
+ background-color: var(--color-palette-field-hover-background);
344
+ cursor: var(--cursor-palette-field);
345
+ }
346
+
347
+ .fjs-palette-container .fjs-palette-no-entries {
348
+ padding: 5px 15px;
349
+ font-size: 14px;
350
+ color: var(--color-palette-text);
351
+ }
352
+
353
+ /**
354
+ * Properties Panel
355
+ */
356
+ .fjs-editor-container .fjs-properties-container {
357
+ height: 100%;
358
+ }
359
+
360
+ .fjs-properties-container {
361
+ background-color: var(--color-properties-container-background);
362
+ width: var(--properties-panel-width);
363
+ border-left: solid 1px var(--color-properties-container-border);
364
+ color: var(--color-text);
365
+ }
366
+
367
+ .fjs-properties-container .fjs-properties-panel {
368
+ height: 100%;
369
+ }
370
+
371
+ .fjs-properties-container .fjs-properties-panel * {
372
+ box-sizing: border-box;
373
+ }
374
+
375
+ .fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
376
+ transform: scale(1.3);
377
+ }
378
+
379
+ /**
380
+ * Editor Form Fields
381
+ */
382
+ .fjs-editor-container .fjs-form-field-placeholder {
383
+ color: var(--color-text-light);
384
+ font-style: italic;
385
+ }
386
+
387
+ .fjs-editor-container .fjs-form-field-placeholder svg {
388
+ width: 36px;
389
+ height: 36px;
390
+ vertical-align: middle;
391
+ margin-top: -2px;
392
+ margin-right: 2px;
393
+ }
394
+
395
+ /**
396
+ * Custom Dragula Styles
397
+ */
398
+ .gu-transit {
399
+ background: var(--color-dragula-background) !important;
400
+ border: dashed 2px var(--color-dragula-border) !important;
401
+ border-radius: 3px !important;
402
+ filter: none !important;
403
+ height: 70px !important;
404
+ opacity: 1 !important;
405
+ /* mitigate for additional border in row */
406
+ flex-grow: 0.98 !important;
407
+ margin: 0 !important;
408
+ }
409
+
410
+ /* row drop preview */
411
+ .fjs-children > .gu-transit {
412
+ height: 28px !important;
413
+ width: 100% !important;
414
+ flex: unset !important;
415
+ }
416
+
417
+ /* error drop preview */
418
+ .fjs-error-drop > .gu-transit {
419
+ height: 100% !important;
420
+ background: var(--color-dragula-error-background) !important;
421
+ border: none !important;
422
+ width: 6px !important;
423
+ flex: none !important;
424
+ padding: 0 !important;
425
+ border-radius: 5px !important;
426
+ }
427
+
428
+ .fjs-error-drop.cds--row {
429
+ flex-wrap: nowrap !important;
430
+ }
431
+
432
+ .gu-transit * {
433
+ display: none !important;
434
+ }
435
+
436
+ .gu-mirror {
437
+ background-color: var(--color-dragula-mirror-background) !important;
438
+ border: solid 1px var(--color-dragula-mirror-border) !important;
439
+ border-radius: 5px !important;
440
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15) !important;
441
+ display: flex !important;
442
+ filter: none !important;
443
+ flex-direction: row !important;
444
+ justify-content: center !important;
445
+ align-items: center !important;
446
+ opacity: 0.5 !important;
447
+ padding: 0 !important;
448
+ pointer-events: none !important;
449
+ height: 54px !important;
450
+ }
451
+
452
+ .fjs-field-preview {
453
+ margin: 5px 0;
454
+ display: flex;
455
+ flex-direction: column;
456
+ justify-content: center;
457
+ font-size: 11px;
458
+ user-select: none;
459
+ color: var(--color-text);
460
+ background: var(--color-white);
461
+ }
462
+
463
+ .fjs-field-preview .fjs-field-preview-icon {
464
+ margin: 0 auto;
465
+ }
466
+
467
+ .fjs-field-preview .fjs-field-preview-text {
468
+ text-align: center;
469
+ }
470
+
471
+ .gu-mirror.fjs-field-preview-container {
472
+ transform: rotate(-15deg);
473
+ font-family: var(--font-family);
474
+ width: 68px !important;
475
+ height: 68px !important;
476
+ }
477
+
478
+ .gu-mirror.fjs-drag-row-move {
479
+ padding: 4px 12px !important;
480
+ height: fit-content !important;
481
+ opacity: 0.8 !important;
482
+ max-height: 120px !important;
483
+ overflow: hidden !important;
484
+ align-items: start !important;
485
+ }
486
+
487
+ .gu-mirror.fjs-drag-row-move .cds--row {
488
+ flex-wrap: nowrap !important;
489
+ }