@bpmn-io/form-js-editor 0.14.1 → 1.0.0-alpha.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 (36) hide show
  1. package/dist/assets/form-js-editor-base.css +266 -37
  2. package/dist/assets/form-js-editor.css +318 -53
  3. package/dist/index.cjs +1241 -418
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +1113 -290
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/FormEditor.d.ts +9 -4
  8. package/dist/types/core/EventBus.d.ts +1 -1
  9. package/dist/types/core/FormLayoutValidator.d.ts +5 -1
  10. package/dist/types/core/index.d.ts +2 -1
  11. package/dist/types/features/dragging/Dragging.d.ts +3 -3
  12. package/dist/types/features/editor-actions/FormEditorActions.d.ts +2 -1
  13. package/dist/types/features/editor-actions/index.d.ts +1 -1
  14. package/dist/types/features/keyboard/index.d.ts +1 -1
  15. package/dist/types/features/modeling/FormLayoutUpdater.d.ts +2 -1
  16. package/dist/types/features/modeling/behavior/IdBehavior.d.ts +2 -1
  17. package/dist/types/features/modeling/behavior/KeyBehavior.d.ts +2 -1
  18. package/dist/types/features/modeling/behavior/ValidateBehavior.d.ts +2 -1
  19. package/dist/types/features/modeling/index.d.ts +6 -1
  20. package/dist/types/features/palette/PaletteRenderer.d.ts +1 -1
  21. package/dist/types/features/palette/components/Palette.d.ts +1 -1
  22. package/dist/types/features/properties-panel/PropertiesPanel.d.ts +1 -1
  23. package/dist/types/features/properties-panel/PropertiesPanelHeaderProvider.d.ts +1 -1
  24. package/dist/types/features/properties-panel/PropertiesPanelRenderer.d.ts +1 -1
  25. package/dist/types/features/properties-panel/entries/InputKeyValuesSourceEntry.d.ts +1 -1
  26. package/dist/types/features/properties-panel/entries/ReadonlyEntry.d.ts +9 -0
  27. package/dist/types/features/properties-panel/entries/index.d.ts +1 -0
  28. package/dist/types/render/Renderer.d.ts +1 -1
  29. package/dist/types/render/components/FieldDragPreview.d.ts +1 -1
  30. package/dist/types/render/components/FieldResizer.d.ts +1 -0
  31. package/dist/types/render/components/FormEditor.d.ts +1 -1
  32. package/dist/types/render/components/Util.d.ts +27 -1
  33. package/dist/types/render/components/editor-form-fields/EditorText.d.ts +2 -4
  34. package/dist/types/render/components/icons/index.d.ts +1 -1
  35. package/package.json +4 -4
  36. package/dist/types/features/properties-panel/icons/index.d.ts +0 -1
package/dist/assets/form-js-editor.css CHANGED
@@ -1,49 +1,185 @@
1
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);
2
+ --color-children-border: var(
3
+ --cds-border-strong,
4
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
5
+ );
6
+ --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
4
7
  --color-children-selected-background: transparent;
5
- --color-children-hover-border: var(--color-blue-219-100-53-05);
6
- --color-context-pad-item-background: var(--color-white);
7
- --color-context-pad-item-fill: var(--color-grey-225-10-35);
8
- --color-context-pad-item-hover-fill: var(--color-black);
9
- --color-dragula-background: var(--color-blue-205-100-95);
10
- --color-dragula-border: var(--color-blue-205-100-45);
11
- --color-dragula-mirror-background: var(--color-white);
12
- --color-dragula-mirror-border: var(--color-grey-225-10-90);
8
+ --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
9
+ --color-context-pad-item-background: transparent;
10
+ --color-context-pad-item-fill: var(--cds-icon-secondary, var(--color-grey-225-10-15));
11
+ --color-context-pad-item-hover-fill: var(--color-red-360-100-45);
12
+ --color-resize-handle-background: var(--cds-border-interactive, var(--color-blue-219-100-53));
13
+ --color-resize-handle-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
14
+ --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
15
+ --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
16
+ --color-dragula-mirror-background: var(--cds-background, var(--color-white));
17
+ --color-dragula-mirror-border: var(
18
+ --cds-border-strong,
19
+ var(--cds-border-strong-01, var(--color-grey-225-10-90))
20
+ );
13
21
  --color-dragula-error-background: var(--color-red-360-100-92);
14
- --color-dragula-error-border: var(--color-red-360-100-45);
22
+ --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
15
23
  }
16
24
 
17
25
  .fjs-palette-container {
18
- --color-palette-text: var(--color-grey-225-10-15);
19
- --color-palette-container-background: var(--color-grey-225-10-95);
20
- --color-palette-container-border: var(--color-grey-225-10-80);
21
- --color-palette-header: var(--color-text);
22
- --color-palette-header-background: var(--color-grey-225-10-95);
23
- --color-palette-header-border: var(--color-grey-225-10-85);
26
+ --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
27
+ --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
28
+ --color-palette-container-border: var(
29
+ --cds-border-strong,
30
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
31
+ );
32
+ --color-palette-header: var(--cds-text-primary, var(--color-text));
33
+ --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
34
+ --color-palette-header-border: var(
35
+ --cds-border-strong,
36
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
37
+ );
24
38
  --color-palette-search: var(--color-palette-text);
25
- --color-palette-search-icon: var(--color-grey-225-10-35);
26
- --color-palette-search-icon-hover: var(--color-grey-225-10-15);
27
- --color-palette-search-background: var(--color-white);
28
- --color-palette-search-border: var(--color-grey-225-10-75);
29
- --color-palette-search-focus-background: var(--color-blue-205-100-95);
30
- --color-palette-search-focus-border: var(--color-blue-205-100-50);
31
- --color-palette-search-clear-focus-border: var(--color-grey-225-10-50);
39
+ --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
40
+ --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
41
+ --color-palette-search-background: var(
42
+ --cds-field,
43
+ var(--cds-field-01, var(--color-white))
44
+ );
45
+ --color-palette-search-border: var(
46
+ --cds-border-strong,
47
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
48
+ );
49
+ --color-palette-search-focus-background: var(
50
+ --cds-field,
51
+ var(--cds-field-01, var(--color-blue-205-100-95))
52
+ );
53
+ --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
54
+ --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
32
55
  --color-palette-group-title: var(--color-palette-text);
33
56
  --color-palette-field: var(--color-palette-text);
34
- --color-palette-field-background: var(--color-white);
35
- --color-palette-field-border: var(--color-grey-225-10-80);
36
- --color-palette-field-hover-background: var(--color-grey-225-10-90);
57
+ --color-palette-field-background: var(
58
+ --cds-layer,
59
+ var(--cds-layer-01, var(--color-white))
60
+ );
61
+ --color-palette-field-border: var(
62
+ --cds-border-strong,
63
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
64
+ );
65
+ --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
37
66
  --cursor-palette-field: grab;
38
67
  --palette-width: 250px;
39
68
  }
40
69
 
41
70
  .fjs-properties-container {
42
- --color-properties-container-background: var(--color-white);
43
- --color-properties-container-border: var(--color-grey-225-10-80);
71
+ --color-properties-container-background: var(--cds-background, var(--color-white));
72
+ --color-properties-container-border: var(
73
+ --cds-border-strong,
74
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
75
+ );
44
76
  --properties-panel-width: 300px;
45
77
  }
46
78
 
79
+ /**
80
+ * Theming overrides
81
+ */
82
+ .fjs-properties-container .bio-properties-panel {
83
+ --text-base-color: var(--cds-text-primary, var(--color-grey-225-10-15));
84
+ --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
85
+ --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
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
+ --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
97
+ --placeholder-background-color: var(
98
+ --cds-layer,
99
+ var(--cds-layer-01, var(--color-grey-225-10-95))
100
+ );
101
+ --header-background-color: var(
102
+ --cds-layer,
103
+ var(--cds-layer-01, var(--color-grey-225-10-95))
104
+ );
105
+ --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
106
+ --header-bottom-border-color: var(--color-grey-225-10-75);
107
+ --group-background-color: var(--cds-background, var(--color-white));
108
+ --group-bottom-border-color: var(
109
+ --cds-border-strong,
110
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
111
+ );
112
+ --sticky-group-background-color: var(
113
+ --cds-layer,
114
+ var(--cds-layer-01, var(--color-grey-225-10-95))
115
+ );
116
+ --sticky-group-bottom-border-color: var(
117
+ --cds-border-strong,
118
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
119
+ );
120
+ --add-entry-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
121
+ --add-entry-hover-fill-color: var(--cds-icon-inverse, var(--color-white));
122
+ --add-entry-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
123
+ --add-entry-label-color: var(--cds-text-inverse, var(--color-white));
124
+ --remove-entry-fill-color: var(--color-red-360-100-45);
125
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
126
+ --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
127
+ --arrow-hover-background-color: var(
128
+ --cds-layer,
129
+ var(--cds-layer-01, var(--color-grey-225-10-95))
130
+ );
131
+ --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
132
+ --list-badge-color: var(--cds-text-inverse, var(--color-white));
133
+ --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
134
+ --input-background-color: var(
135
+ --cds-field,
136
+ var(--cds-field-01, var(--color-grey-225-10-97))
137
+ );
138
+ --input-border-color: var(
139
+ --cds-border-strong,
140
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
141
+ );
142
+ --input-focus-background-color: var(
143
+ --cds-field,
144
+ var(--cds-field-01, var(--color-blue-205-100-95))
145
+ );
146
+ --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
147
+ --input-error-background-color: var(
148
+ --cds-field,
149
+ var(--cds-field-01, var(--color-red-360-100-97))
150
+ );
151
+ --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
152
+ --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
153
+ --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
154
+ --input-disabled-background-color: var(
155
+ --cds-field,
156
+ var(--cds-field-01, var(--color-grey-225-10-97))
157
+ );
158
+ --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
159
+ --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
160
+ --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
161
+ --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
162
+ --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
163
+ --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
164
+ --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
165
+ --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
166
+ --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
167
+ --list-entry-add-entry-empty-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-45));
168
+ --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
169
+ --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
170
+ --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
171
+ --feel-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
172
+ --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
173
+ --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
174
+ --feel-hover-background-color: var(--cds-field-hover-02, var(--color-grey-225-10-90));
175
+ --feel-active-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
176
+ --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
177
+ }
178
+
179
+ .fjs-properties-container .bio-properties-panel-input {
180
+ color: var(--color-text);
181
+ }
182
+
47
183
  .fjs-editor-container {
48
184
  height: 100%;
49
185
  width: 100%;
@@ -92,8 +228,10 @@
92
228
  background-color: var(--color-children-selected-background);
93
229
  }
94
230
 
95
- .fjs-editor-container .fjs-children .fjs-element:hover {
231
+ .fjs-editor-container .fjs-children .fjs-element:hover,
232
+ .fjs-editor-container .fjs-children .fjs-element:focus-within {
96
233
  border-color: var(--color-children-hover-border);
234
+ outline: none;
97
235
  }
98
236
 
99
237
  .fjs-editor-container .fjs-input:disabled,
@@ -104,11 +242,19 @@
104
242
  pointer-events: none;
105
243
  }
106
244
 
245
+ .fjs-editor-container .fjs-readonly {
246
+ pointer-events: none;
247
+ }
248
+
107
249
  .fjs-editor-container .fjs-drag-container,
108
250
  .fjs-editor-container .fjs-drop-container-vertical {
109
251
  user-select: none;
110
252
  }
111
253
 
254
+ .fjs-editor-container .fjs-drop-container-horizontal {
255
+ width: 100%;
256
+ }
257
+
112
258
  .fjs-editor-container .fjs-layout-row {
113
259
  padding: 4px 0px;
114
260
  }
@@ -143,6 +289,64 @@
143
289
  visibility: visible;
144
290
  }
145
291
 
292
+ .fjs-editor-container .fjs-drag-move {
293
+ padding-left: 3px;
294
+ }
295
+
296
+ .fjs-editor-container .fjs-field-resize-handle {
297
+ resize: horizontal;
298
+ position: absolute;
299
+ visibility: hidden;
300
+ width: 6px;
301
+ top: 0;
302
+ bottom: 0;
303
+ margin: auto;
304
+ height: 50px;
305
+ max-height: calc(100% - 2px);
306
+ border: 1px solid var(--color-resize-handle-border);
307
+ border-radius: 50px;
308
+ background: var(--color-white);
309
+ z-index: 3;
310
+ }
311
+
312
+ .fjs-editor-container .fjs-field-resize-handle-right {
313
+ right: -4px;
314
+ cursor: ew-resize;
315
+ }
316
+
317
+ .fjs-editor-container .fjs-field-resize-handle-left {
318
+ left: -4px;
319
+ cursor: ew-resize;
320
+ }
321
+
322
+ .fjs-editor-container .fjs-element-resizing-right .fjs-field-resize-handle-right,
323
+ .fjs-editor-container .fjs-element-resizing-left .fjs-field-resize-handle-left,
324
+ .fjs-editor-container .fjs-field-resize-handle:hover {
325
+ background: var(--color-resize-handle-background);
326
+ }
327
+
328
+ .fjs-editor-container .fjs-element-resizing-right .fjs-context-pad,
329
+ .fjs-editor-container .fjs-element-resizing-left .fjs-context-pad {
330
+ display: none;
331
+ }
332
+
333
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
334
+ visibility: visible;
335
+ }
336
+
337
+ .fjs-resize-drag-preview {
338
+ width: 1px;
339
+ height: 1px;
340
+ position: absolute;
341
+ top: 0;
342
+ }
343
+
344
+ /* do not show resize handles on small screens */
345
+ @media (max-width: 66rem) {
346
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
347
+ display: none !important;
348
+ }
349
+ }
146
350
  /**
147
351
  * Cursor styles
148
352
  */
@@ -176,26 +380,29 @@
176
380
  .fjs-editor-container .fjs-context-pad {
177
381
  z-index: 2;
178
382
  position: absolute;
179
- top: 3px;
180
- right: 3px;
181
- box-shadow: 1px 1px 1px 1px rgb(0 0 0/10%);
383
+ top: 0;
384
+ right: 5px;
182
385
  }
183
386
 
184
387
  .fjs-editor-container .fjs-context-pad-item {
185
388
  border: none;
186
- border-radius: 3px;
187
389
  background-color: var(--color-context-pad-item-background);
188
390
  padding: 0;
189
391
  width: 24px;
190
392
  height: 24px;
191
- fill: var(--color-context-pad-item-fill);
393
+ color: var(--color-context-pad-item-fill);
192
394
  display: flex;
193
395
  justify-content: center;
194
396
  align-items: center;
195
397
  }
196
398
 
197
399
  .fjs-editor-container .fjs-context-pad-item:hover {
198
- fill: var(--color-context-pad-item-hover-fill);
400
+ color: var(--color-context-pad-item-hover-fill);
401
+ }
402
+
403
+ .fjs-editor-container .fjs-context-pad-item:focus-visible {
404
+ outline: 2px solid var(--color-children-selected-border);
405
+ border-radius: 2px;
199
406
  }
200
407
 
201
408
  /**
@@ -262,6 +469,7 @@
262
469
  margin: 0;
263
470
  border: none;
264
471
  padding: 0;
472
+ color: var(--color-palette-text);
265
473
  }
266
474
 
267
475
  .fjs-palette-container .fjs-palette-search:focus {
@@ -588,8 +796,11 @@
588
796
  --dropdown-item-background-color: var(--color-white);
589
797
  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
590
798
  --dropdown-separator-background-color: var(--color-grey-225-10-75);
591
- --feel-active-color: var(--color-blue-205-100-35);
799
+ --feel-background-color: var(--color-grey-225-10-95);
800
+ --feel-active-color: var(--color-blue-205-100-45);
592
801
  --feel-inactive-color: var(--color-grey-225-10-35);
802
+ --feel-hover-background-color: var(--color-grey-225-10-90);
803
+ --feel-active-background-color: var(--color-grey-225-10-95);
593
804
  --feel-indicator-background-color: var(--color-grey-225-10-90);
594
805
  --text-size-base: 14px;
595
806
  --text-size-small: 13px;
@@ -598,7 +809,9 @@
598
809
  --line-height-condensed: 17px;
599
810
  --font-family: sans-serif;
600
811
  --font-family-monospace: monospace;
601
- display: none;
812
+ display: flex;
813
+ flex-direction: column;
814
+ flex: 1;
602
815
  position: relative;
603
816
  height: 100%;
604
817
  width: 100%;
@@ -620,12 +833,6 @@
620
833
  font-family: var(--font-family);
621
834
  }
622
835
 
623
- .bio-properties-panel.open {
624
- display: flex;
625
- flex-direction: column;
626
- flex: 1;
627
- }
628
-
629
836
  /**
630
837
  * Placeholder (empty, multi select, ...)
631
838
  */
@@ -1000,7 +1207,7 @@ select.bio-properties-panel-input {
1000
1207
  }
1001
1208
 
1002
1209
  .bio-properties-panel-input[type=checkbox]:focus {
1003
- outline: 1px solid var(--input-focus-border-color);
1210
+ outline: 2px solid var(--input-focus-border-color);
1004
1211
  outline-offset: 0;
1005
1212
  }
1006
1213
 
@@ -1070,10 +1277,23 @@ textarea.bio-properties-panel-input {
1070
1277
  align-items: center;
1071
1278
  }
1072
1279
 
1280
+ .bio-properties-panel-toggle-switch.inline {
1281
+ display: flex;
1282
+ flex-direction: row;
1283
+ }
1284
+
1285
+ .bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
1286
+ margin-left: auto;
1287
+ }
1288
+
1073
1289
  .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
1074
1290
  font-size: var(--text-size-base);
1075
1291
  }
1076
1292
 
1293
+ .bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
1294
+ font-size: var(--text-size-small);
1295
+ }
1296
+
1077
1297
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
1078
1298
  margin: 0;
1079
1299
  margin-left: 6px;
@@ -1086,6 +1306,11 @@ textarea.bio-properties-panel-input {
1086
1306
  height: 16px;
1087
1307
  }
1088
1308
 
1309
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
1310
+ outline: 2px solid var(--input-focus-border-color);
1311
+ outline-offset: 1px;
1312
+ }
1313
+
1089
1314
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type=checkbox] {
1090
1315
  opacity: 0;
1091
1316
  width: 0;
@@ -1094,6 +1319,7 @@ textarea.bio-properties-panel-input {
1094
1319
 
1095
1320
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
1096
1321
  position: absolute;
1322
+ cursor: pointer;
1097
1323
  top: 0;
1098
1324
  left: 0;
1099
1325
  right: 0;
@@ -1440,34 +1666,56 @@ textarea.bio-properties-panel-input {
1440
1666
  padding-right: 2em;
1441
1667
  }
1442
1668
 
1669
+ .bio-properties-panel-feel-entry .bio-properties-panel-label {
1670
+ display: flex;
1671
+ }
1672
+
1443
1673
  .bio-properties-panel-feel-icon {
1444
- display: inline-block;
1445
- height: 16px;
1446
- border-radius: 8px;
1674
+ display: inline-flex;
1675
+ height: 22px;
1676
+ width: 22px;
1447
1677
  vertical-align: text-bottom;
1448
1678
  padding: 0;
1449
1679
  margin: 0 3px;
1450
1680
  align-items: center;
1451
1681
  align-self: center;
1682
+ justify-content: center;
1452
1683
  border: none;
1453
1684
  background: none;
1685
+ border-radius: 3px;
1454
1686
  }
1455
1687
 
1456
1688
  .bio-properties-panel-feel-icon.optional {
1457
1689
  cursor: pointer;
1690
+ background: var(--feel-background-color);
1458
1691
  }
1459
1692
 
1460
1693
  .bio-properties-panel-feel-icon svg * {
1461
- color: var(--feel-inactive-color);
1694
+ fill: var(--feel-inactive-color);
1695
+ }
1696
+
1697
+ .bio-properties-panel-feel-icon:hover {
1698
+ background: var(--feel-hover-background-color);
1699
+ }
1700
+
1701
+ .bio-properties-panel-feel-icon.active {
1702
+ background: var(--feel-active-background-color);
1703
+ }
1704
+
1705
+ .bio-properties-panel-feel-icon.active:hover {
1706
+ background: var(--feel-hover-background-color);
1707
+ }
1708
+
1709
+ .bio-properties-panel-feel-icon.required.active {
1710
+ background: none;
1462
1711
  }
1463
1712
 
1464
1713
  .bio-properties-panel-feel-icon.active svg * {
1465
- color: var(--feel-active-color);
1714
+ fill: var(--feel-active-color);
1466
1715
  }
1467
1716
 
1468
- .bio-properties-panel-feel-icon svg {
1469
- width: 16px;
1470
- height: 16px;
1717
+ .bio-properties-panel-feel-icon.required.active svg * {
1718
+ fill: var(--feel-inactive-color);
1471
1719
  }
1472
1720
 
1473
1721
  .bio-properties-panel-feel-editor-container {
@@ -1524,3 +1772,20 @@ textarea.bio-properties-panel-input {
1524
1772
  .bio-properties-panel-feel-container .cm-editor {
1525
1773
  min-height: 100%;
1526
1774
  }
1775
+
1776
+ .bio-properties-panel-feel-checkbox,
1777
+ .bio-properties-panel-feel-toggle-switch {
1778
+ padding-top: 1px;
1779
+ }
1780
+
1781
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
1782
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
1783
+ display: flex;
1784
+ flex-direction: row;
1785
+ align-items: center;
1786
+ }
1787
+
1788
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
1789
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
1790
+ margin-left: auto;
1791
+ }