@bpmn-io/properties-panel 0.4.1 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/assets/properties-panel.css +351 -129
  3. package/lib/PropertiesPanel.js +9 -4
  4. package/lib/PropertiesPanel.js.map +1 -1
  5. package/lib/components/Group.js +10 -24
  6. package/lib/components/Group.js.map +1 -1
  7. package/lib/components/Header.js +6 -6
  8. package/lib/components/Header.js.map +1 -1
  9. package/lib/components/ListGroup.js +40 -33
  10. package/lib/components/ListGroup.js.map +1 -1
  11. package/lib/components/ListItem.js +6 -1
  12. package/lib/components/ListItem.js.map +1 -1
  13. package/lib/components/entries/Checkbox.js +9 -4
  14. package/lib/components/entries/Checkbox.js.map +1 -1
  15. package/lib/components/entries/Collapsible.js +8 -5
  16. package/lib/components/entries/Collapsible.js.map +1 -1
  17. package/lib/components/entries/List.js +31 -23
  18. package/lib/components/entries/List.js.map +1 -1
  19. package/lib/components/entries/ToggleSwitch.js +1 -1
  20. package/lib/components/entries/ToggleSwitch.js.map +1 -1
  21. package/lib/components/icons/index.js +18 -33
  22. package/lib/context/LayoutContext.js +1 -0
  23. package/lib/context/LayoutContext.js.map +1 -1
  24. package/lib/hooks/index.js +1 -0
  25. package/lib/hooks/index.js.map +1 -1
  26. package/lib/hooks/useLayoutState.js +36 -0
  27. package/lib/hooks/useLayoutState.js.map +1 -0
  28. package/package.json +2 -2
package/assets/properties-panel.css CHANGED
@@ -2,47 +2,96 @@
2
2
  * Theming
3
3
  */
4
4
  .bio-properties-panel {
5
- --color-silver-darken-80: #cdcdcd;
5
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
6
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
7
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
8
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
9
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
10
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
11
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
12
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
13
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
6
14
 
7
- --color-blue-205-100-95: #e5f4ff;
8
- --color-blue-205-100-50: #0095ff;
15
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
16
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
17
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
9
18
 
10
- --color-red-360-100-97: #fff0f0;
11
- --color-red-360-100-45: #e60000;
19
+ --color-green-150-86-44: hsl(150, 86%, 44%);
12
20
 
13
- --color-grey-225-10-35: hsl(225, 10%, 35%);
21
+ --color-red-360-100-40: hsl(360, 100%, 40%);
22
+ --color-red-360-100-45: hsl(360, 100%, 45%);
23
+ --color-red-360-100-92: hsl(360, 100%, 92%);
24
+ --color-red-360-100-97: hsl(360, 100%, 97%);
14
25
 
15
- --color-cccccc: #cccccc;
16
- --color-aaaaaa: #aaaaaa;
17
26
  --color-white: white;
18
27
  --color-black: black;
19
- --color-999999: #999999;
20
- --color-000000-opacity-5: rgba(0, 0, 0, 0.05);
21
- --color-000000-opacity-20: rgba(0, 0, 0, 0.2);
22
- --color-000000-opacity-25: rgba(0, 0, 0, 0.25);
23
- --color-000000-opacity-40: rgba(0, 0, 0, 0.4);
28
+ --color-transparent: transparent;
29
+
30
+ --text-base-color: var(--color-grey-225-10-15);
31
+ --text-error-color: var(--color-red-360-100-45);
32
+ --description-color: var(--color-grey-225-10-35);
33
+
34
+ --placeholder-color: var(--color-grey-225-10-75);
35
+
36
+ --header-background-color: var(--color-grey-225-10-95);
37
+ --header-icon-fill-color: var(--color-grey-225-10-15);
38
+ --header-bottom-border-color: var(--color-grey-225-10-75);
39
+
40
+ --group-background-color: var(--color-white);
41
+ --group-bottom-border-color: var(--color-grey-225-10-75);
42
+
43
+ --add-entry-fill-color: var(--color-grey-225-10-35);
44
+ --add-entry-empty-fill-color: var(--color-grey-225-10-75);
45
+ --add-entry-hover-fill-color: var(--color-white);
46
+ --add-entry-hover-background-color: var(--color-blue-205-100-50);
47
+ --add-entry-label-color: var(--color-white);
48
+
49
+ --remove-entry-fill-color: var(--color-red-360-100-45);
50
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
51
+
52
+ --arrow-fill-color: var(--color-grey-225-10-35);
53
+ --arrow-hover-background-color: var(--color-grey-225-10-95);
54
+ --arrow-empty-fill-color: var(--color-grey-225-10-75);
24
55
 
25
- --color-background-light: #e8eaee;
56
+ --dot-color: var(--color-grey-225-10-35);
26
57
 
27
- --color-input-background: #f1f2f4;
28
- --color-input-border: #d5d6dd;
29
- --color-input-background-focus: var(--color-blue-205-100-95);
30
- --color-input-border-focus: var(--color-blue-205-100-50);
58
+ --list-badge-color: var(--color-white);
59
+ --list-badge-background-color: var(--color-grey-225-10-35);
31
60
 
32
- --color-input-background-error: var(--color-red-360-100-97);
33
- --color-input-border-error: var(--color-red-360-100-45);
34
- --color-input-border-error-focus: var(--color-red-360-100-45);
61
+ --input-background-color: var(--color-grey-225-10-97);
62
+ --input-border-color: var(--color-grey-225-10-75);
63
+
64
+ --input-focus-background-color: var(--color-blue-205-100-95);
65
+ --input-focus-border-color: var(--color-blue-205-100-50);
35
66
 
36
- --color-toggle-switch-background-on: var(--color-blue-205-100-50);
37
- --color-toggle-switch-background-off: var(--color-silver-darken-80);
67
+ --input-error-background-color: var(--color-red-360-100-97);
68
+ --input-error-border-color: var(--color-red-360-100-45);
69
+ --input-error-focus-border-color: var(--color-red-360-100-45);
38
70
 
39
- --color-text-base: var(--color-black);
40
- --color-text-error: var(--color-red-360-100-45);
71
+ --toggle-switch-on-background-color: var(--color-blue-205-100-50);
72
+ --toggle-switch-off-background-color: var(--color-grey-225-10-75);
73
+ --toggle-switch-switcher-background-color: var(--color-white);
74
+
75
+ --side-line-background-color: var(--color-grey-225-10-35);
76
+ --side-line-extension-background-color: var(--color-grey-225-10-35);
77
+
78
+ --list-entry-dot-background-color: var(--color-grey-225-10-35);
79
+ --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
80
+ --list-entry-add-entry-empty-fill-color: var(--color-white);
81
+ --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
82
+ --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
83
+ --list-entry-add-entry-label-color: var(--color-white);
84
+ --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
85
+ --list-entry-add-entry-fill-color: var(--color-white);
41
86
 
42
87
  --text-size-base: 14px;
43
- --text-line-height: 1.5;
88
+ --text-size-small: 13px;
89
+ --text-size-smallest: 12px;
90
+ --text-line-height: 21px;
91
+ --line-height-condensed: 17px;
44
92
 
45
- --color-description: var(--color-999999);
93
+ --font-family: sans-serif;
94
+ --font-family-monospace: monospace;
46
95
 
47
96
  display: none;
48
97
  position: relative;
@@ -52,8 +101,15 @@
52
101
  }
53
102
 
54
103
  .bio-properties-panel * {
55
- box-sizing: border-box;
104
+ color: var(--text-base-color);
105
+ font-size: var(--text-size-base);
56
106
  line-height: var(--text-line-height);
107
+ font-weight: 400;
108
+ box-sizing: border-box;
109
+ }
110
+
111
+ .bio-properties-panel {
112
+ font-family: var(--font-family);
57
113
  }
58
114
 
59
115
  .bio-properties-panel.open {
@@ -64,8 +120,8 @@
64
120
 
65
121
  .bio-properties-panel-placeholder {
66
122
  padding: 10px;
67
- color: var(--color-silver-darken);
68
- font-size: 14px;
123
+ color: var(--placeholder-color);
124
+ font-size: var(--text-size-base);
69
125
  text-align: center;
70
126
  }
71
127
 
@@ -77,10 +133,10 @@
77
133
  flex-direction: row;
78
134
  align-items: center;
79
135
  font-size: var(--text-size-base);
80
- padding: 10px;
136
+ padding: 16px 10px;
81
137
  margin-bottom: 2px;
82
- background-color: var(--color-background-light);
83
- border-bottom: 1px solid var(--color-cccccc);
138
+ background-color: var(--header-background-color);
139
+ border-bottom: 1px solid var(--header-bottom-border-color);
84
140
  width: 100%;
85
141
  z-index: 1;
86
142
  max-height: 64px;
@@ -88,32 +144,35 @@
88
144
  }
89
145
 
90
146
  .bio-properties-panel-header-icon {
147
+ fill: var(--header-icon-fill-color);
91
148
  display: flex;
92
149
  flex-direction: row;
93
150
  align-items: center;
94
151
  justify-content: center;
95
- min-width: 48px;
96
- height: 48px;
152
+ width: 32px;
153
+ height: 32px;
97
154
  }
98
155
 
99
156
  .bio-properties-panel-header-labels {
100
157
  overflow: hidden;
158
+ margin-left: 12px;
159
+ user-select: none;
101
160
  }
102
161
 
103
162
  .bio-properties-panel-header-type {
104
- font-size: 12px;
105
- font-weight: bold;
163
+ font-size: var(--text-size-smallest);
164
+ font-weight: 600;
106
165
  white-space: nowrap;
107
166
  text-overflow: ellipsis;
108
167
  overflow: hidden;
109
- padding: 2px;
168
+ text-transform: uppercase;
110
169
  }
111
170
 
112
171
  .bio-properties-panel-header-label {
113
172
  white-space: nowrap;
114
173
  text-overflow: ellipsis;
115
174
  overflow: hidden;
116
- padding: 2px;
175
+ margin-top: -6px;
117
176
  }
118
177
 
119
178
  /**
@@ -130,8 +189,8 @@
130
189
  * Groups
131
190
  */
132
191
  .bio-properties-panel-group {
133
- background-color: var(--color-white);
134
- border-bottom: 1px solid var(--color-cccccc);
192
+ background-color: var(--group-background-color);
193
+ border-bottom: 1px solid var(--group-bottom-border-color);
135
194
  }
136
195
 
137
196
  .bio-properties-panel-group-header {
@@ -153,9 +212,12 @@
153
212
  margin: 1px 12px 0;
154
213
  }
155
214
 
215
+ .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
216
+ font-weight: 500;
217
+ }
218
+
156
219
  .bio-properties-panel-group-header-buttons {
157
220
  display: flex;
158
- margin-right: 12px;
159
221
  }
160
222
 
161
223
  .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
@@ -163,48 +225,93 @@
163
225
  justify-content: center;
164
226
  align-items: center;
165
227
  align-self: center;
166
- width: 20px;
167
- height: 20px;
168
- margin-right: 4px;
169
- padding: 0;
228
+ font-size: var(--text-size-small);
229
+ height: 22px;
230
+ line-height: 22px;
231
+ min-width: 22px;
232
+ margin: 5px;
233
+ padding: 0 3px;
170
234
  border: none;
171
235
  background: none;
172
236
  }
173
237
 
174
- .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button:last-child {
238
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
175
239
  margin-right: 0;
176
240
  }
177
241
 
178
- .bio-properties-panel-group-header:not(.empty) .bio-properties-panel-add-entry {
179
- visibility: hidden;
242
+ .bio-properties-panel-add-container {
243
+ pointer-events: none;
180
244
  }
181
245
 
182
- .bio-properties-panel-group-header:not(.empty):hover .bio-properties-panel-add-entry {
183
- visibility: visible;
246
+ .bio-properties-panel-add-entry {
247
+ pointer-events: all;
248
+ fill: var(--add-entry-fill-color);
249
+ border-radius: 11px;
184
250
  }
185
251
 
252
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
253
+ fill: var(--add-entry-empty-fill-color);
254
+ margin-right: 69px;
255
+ padding-left: 6px;
256
+ }
186
257
 
187
- .bio-properties-panel-group-entries {
188
- border-bottom: solid 1px var(--color-silver-darken);
258
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
259
+ margin-right: 19px;
260
+ }
261
+
262
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
189
263
  display: none;
264
+ color: var(--add-entry-label-color);
265
+ padding: 4px 6px 3px 2px;
190
266
  }
191
267
 
192
- .bio-properties-panel-group:last-child .bio-properties-panel-group-entries {
193
- border-bottom: none;
268
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
269
+ background-color: var(--add-entry-hover-background-color);
270
+ fill: var(--add-entry-hover-fill-color);
271
+ }
272
+
273
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
274
+ display: block;
275
+ }
276
+
277
+ .bio-properties-panel-group-entries {
278
+ display: none;
194
279
  }
195
280
 
196
281
  .bio-properties-panel-group-entries.open {
197
282
  display: block;
198
283
  }
199
284
 
285
+ .bio-properties-panel-arrow {
286
+ display: flex;
287
+ justify-content: center;
288
+ text-align: center;
289
+ fill: var(--arrow-fill-color);
290
+ min-width: 22px;
291
+ border-radius: 11px;
292
+ border: none;
293
+ background: none;
294
+ }
295
+
296
+ .bio-properties-panel-arrow:hover {
297
+ background-color: var(--arrow-hover-background-color);
298
+ }
299
+
200
300
  .bio-properties-panel-arrow-down {
201
301
  transform: rotate(90deg);
202
302
  }
203
303
 
304
+ .bio-properties-panel-group-header.empty .bio-properties-panel-arrow {
305
+ fill: var(--arrow-empty-fill-color);
306
+ }
307
+
204
308
  .bio-properties-panel-dot {
205
- width: 6px;
206
- margin-right: 12px;
207
- margin-top: -1px;
309
+ align-self: center;
310
+ height: 8px;
311
+ min-width: 8px;
312
+ border-radius: 50%;
313
+ margin: 12px;
314
+ background-color: var(--dot-color);
208
315
  }
209
316
 
210
317
  /**
@@ -217,27 +324,28 @@
217
324
  .bio-properties-panel-list.open {
218
325
  display: block;
219
326
  margin-bottom: 6px;
327
+ padding-bottom: 2px;
220
328
  }
221
329
 
222
330
  .bio-properties-panel-list-badge {
223
- color: var(--color-white);
224
- background-color: var(--color-black);
225
- border: 2px solid;
226
- border-radius: 20px;
227
- min-width: fit-content;
228
- font-size: 12px;
229
331
  height: 22px;
230
- padding: 2px 6px;
231
- margin-right: 4px;
332
+ min-width: 22px;
333
+ color: var(--list-badge-color);
334
+ border-radius: 11px;
335
+ font-size: var(--text-size-small);
336
+ line-height: 22px;
337
+ text-align: center;
232
338
  user-select: none;
233
- line-height: normal;
339
+ padding: 0 5px;
340
+ margin: 5px;
341
+ background-color: var(--list-badge-background-color);
234
342
  }
235
343
 
236
344
  /**
237
345
  * Basic entries
238
346
  */
239
347
  .bio-properties-panel-entry {
240
- margin: 2px 12px 4px;
348
+ margin: 2px 32px 6px 12px;
241
349
  }
242
350
 
243
351
  .bio-properties-panel-entry:last-child {
@@ -246,29 +354,25 @@
246
354
 
247
355
  .bio-properties-panel-label {
248
356
  display: block;
249
- margin: 4px 0;
250
- line-height: 18px;
251
- font-weight: 400;
252
- font-size: 13px;
357
+ font-size: var(--text-size-small);
358
+ margin: 2px 0 1px;
253
359
  }
254
360
 
255
361
  .bio-properties-panel-description {
256
- color: var(--color-description);
362
+ color: var(--description-color);
257
363
  display: block;
258
- margin: 4px 0 8px;
259
- line-height: 16px;
364
+ margin: 2px 0 4px;
365
+ line-height: var(--line-height-condensed);
260
366
  font-weight: 400;
261
- font-size: 12px;
367
+ font-size: var(--text-size-small);
262
368
  }
263
369
 
264
370
  .bio-properties-panel-input {
265
- padding: 5px 6px 4px;
266
- border: 1px solid var(--color-input-border);
267
- border-radius: 3px;
268
- background-color: var(--color-input-background);
269
- font-size: 14px;
270
- font-style: normal;
271
- font-weight: 400;
371
+ padding: 3px 6px 2px;
372
+ border: 1px solid var(--input-border-color);
373
+ border-radius: 2px;
374
+ background-color: var(--input-background-color);
375
+ font-size: var(--text-size-base);
272
376
  font-family: inherit;
273
377
  }
274
378
 
@@ -282,12 +386,16 @@ textarea.bio-properties-panel-input,
282
386
 
283
387
  .bio-properties-panel-input:focus {
284
388
  outline: none;
285
- background-color: var(--color-input-background-focus);
286
- border: 1px solid var(--color-input-border-focus);
389
+ background-color: var(--input-focus-background-color);
390
+ border: 1px solid var(--input-focus-border-color);
391
+ }
392
+
393
+ select.bio-properties-panel-input {
394
+ padding: 4px 6px;
287
395
  }
288
396
 
289
397
  .bio-properties-panel-input-monospace {
290
- font-family: monospace;
398
+ font-family: var(--font-family-monospace);
291
399
  }
292
400
 
293
401
  .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
@@ -297,32 +405,42 @@ textarea.bio-properties-panel-input,
297
405
 
298
406
  .bio-properties-panel-checkbox > .bio-properties-panel-label {
299
407
  display: inline-block;
300
- margin-left: 4px;
408
+ font-size: var(--text-size-base);
409
+ margin-left: 6px;
410
+ margin-top: auto;
301
411
  vertical-align: middle;
302
412
  }
303
413
 
414
+ .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
415
+ margin-top: -8px;
416
+ }
417
+
418
+ .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
419
+ margin-left: 18px;
420
+ }
421
+
304
422
  textarea.bio-properties-panel-input {
305
423
  resize: vertical;
306
424
  }
307
425
 
308
426
  .bio-properties-panel-entry.has-error .bio-properties-panel-input {
309
- border-color: var(--color-input-border-error);
310
- background-color: var(--color-input-background-error);
427
+ border-color: var(--input-error-border-color);
428
+ background-color: var(--input-error-background-color);
311
429
  }
312
430
 
313
431
  .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus {
314
- border-color: var(--color-input-border-error-focus);
432
+ border-color: var(--input-error-focus-border-color);
315
433
  }
316
434
 
317
435
  .bio-properties-panel-entry .bio-properties-panel-error {
318
- color: var(--color-text-error);
436
+ color: var(--text-error-color);
319
437
  margin: 4px 0;
320
- font-size: 13px;
438
+ font-size: var(--text-size-small);
321
439
  }
322
440
 
323
441
  .bio-properties-panel-simple {
324
442
  width: 100%;
325
- margin-right: 12px;
443
+ margin-right: 8px;
326
444
  }
327
445
 
328
446
  .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
@@ -332,16 +450,28 @@ textarea.bio-properties-panel-input {
332
450
  /**
333
451
  * Toggle Switch
334
452
  */
453
+ .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
454
+ margin-top: -8px;
455
+ }
456
+
457
+ .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
458
+ margin-left: 38px;
459
+ }
460
+
335
461
  .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
336
462
  display: flex;
337
463
  flex-direction: row;
338
464
  align-items: center;
339
465
  }
340
466
 
467
+ .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
468
+ font-size: var(--text-size-base);
469
+ }
470
+
341
471
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
342
472
  margin: 0;
343
473
  margin-left: 6px;
344
- font-size: 12px;
474
+ font-size: var(--text-size-base);
345
475
  }
346
476
 
347
477
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
@@ -362,7 +492,7 @@ textarea.bio-properties-panel-input {
362
492
  left: 0;
363
493
  right: 0;
364
494
  bottom: 0;
365
- background-color: var(--color-toggle-switch-background-off);
495
+ background-color: var(--toggle-switch-off-background-color);
366
496
  -webkit-transition: 0.4s;
367
497
  transition: 0.4s;
368
498
  border-radius: 34px;
@@ -375,14 +505,14 @@ textarea.bio-properties-panel-input {
375
505
  width: 12px;
376
506
  left: 2px;
377
507
  bottom: 2px;
378
- background-color: white;
508
+ background-color: var(--toggle-switch-switcher-background-color);
379
509
  -webkit-transition: 0.4s;
380
510
  transition: 0.4s;
381
511
  border-radius: 50%;
382
512
  }
383
513
 
384
514
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
385
- background-color: var(--color-toggle-switch-background-on);
515
+ background-color: var(--toggle-switch-on-background-color);
386
516
  box-shadow: 0 0 1px ;
387
517
  }
388
518
 
@@ -409,7 +539,7 @@ textarea.bio-properties-panel-input {
409
539
  }
410
540
 
411
541
  .bio-properties-panel-collapsible-entry-entries {
412
- padding-left: 15px;
542
+ padding-left: 20px;
413
543
  margin-bottom: 10px;
414
544
  position: relative;
415
545
  display: none;
@@ -424,7 +554,7 @@ textarea.bio-properties-panel-input {
424
554
  }
425
555
 
426
556
  .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
427
- padding: 2px 24px 2px 25px;
557
+ padding: 2px 24px 2px 32px;
428
558
  font-size: var(--text-size-base);
429
559
  white-space: nowrap;
430
560
  overflow: hidden;
@@ -434,41 +564,55 @@ textarea.bio-properties-panel-input {
434
564
 
435
565
  .bio-properties-panel-collapsible-entry-arrow {
436
566
  position: absolute;
437
- left: 8px;
438
- top: 0;
439
- width: 12px;
440
- height: 12px;
441
- font-size: 16px;
567
+ top: 2px;
568
+ left: 6px;
569
+ padding: 0 3px;
570
+ height: 22px;
571
+ display: inline-flex;
572
+ justify-content: center;
573
+ align-items: center;
574
+ align-self: center;
575
+ }
576
+
577
+ .bio-properties-panel-remove-container {
578
+ pointer-events: none;
442
579
  }
443
580
 
444
581
  .bio-properties-panel-remove-entry {
582
+ pointer-events: all;
445
583
  display: flex;
446
584
  align-items: center;
447
585
  justify-content: center;
448
- width: 16px;
449
- height: 16px;
450
-
451
- margin-right: 14px;
586
+ margin-right: 5px;
452
587
  padding: 0;
453
-
588
+ width: 22px;
589
+ height: 22px;
590
+ fill: var(--remove-entry-fill-color);
591
+ border-radius: 50%;
454
592
  border: none;
455
593
  background: none;
456
594
  visibility: hidden;
457
595
  }
458
596
 
459
- .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-entry,
460
- .bio-properties-panel-collapsible-entry-header:hover .bio-properties-panel-remove-entry {
597
+ .bio-properties-panel-remove-entry:hover {
598
+ background-color: var(--remove-entry-hover-background-color);
599
+ }
600
+
601
+ .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
602
+ .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry {
461
603
  visibility: visible;
462
604
  }
463
605
 
606
+ /* Side line */
464
607
  .bio-properties-panel-collapsible-entry-entries::before {
465
608
  content: "";
466
609
  position: absolute;
467
- left: 10px;
610
+ left: 16px;
468
611
  width: 2px;
469
- top: 0;
612
+ top: -6px;
470
613
  bottom: 12px;
471
- background-color: var(--color-grey-225-10-35);
614
+ background-color: var(--side-line-background-color);
615
+ border-radius: 1px;
472
616
  }
473
617
 
474
618
  /* Side line extension for non-list entry or open list entry positioned as the last one. */
@@ -481,38 +625,54 @@ textarea.bio-properties-panel-input {
481
625
  .bio-properties-panel-list-entry.open:last-child::after {
482
626
  content: "";
483
627
  position: absolute;
484
- left: -17px;
628
+ left: -16px;
485
629
  width: 2px;
486
630
  top: 0;
487
- bottom: 0;
488
- background-color: var(--color-grey-225-10-35);
631
+ bottom: -4px;
632
+ background-color: var(--side-line-extension-background-color);
633
+ border-radius: 1px;
489
634
  }
490
635
 
491
- /* List entry */
636
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
637
+ left: -18px;
638
+ }
492
639
 
640
+ /*
641
+ * List entry
642
+ */
493
643
  .bio-properties-panel-list-entry {
494
644
  position: relative;
645
+ margin-right: 5px;
646
+ margin-bottom: 0;
647
+ }
648
+
649
+ .bio-properties-panel-list-entry .bio-properties-panel-entry {
650
+ margin-right: 0;
495
651
  }
496
652
 
497
653
  .bio-properties-panel-list-entry-header {
654
+ position: relative;
655
+ overflow: hidden;
498
656
  display: flex;
499
657
  justify-content: space-between;
500
-
501
658
  height: 32px;
502
659
  }
503
660
 
661
+ /* Nested list dot */
504
662
  .bio-properties-panel-list-entry::before {
505
663
  content: "";
506
664
  width: 8px;
507
665
  height: 8px;
508
666
  position: absolute;
509
- left: -20px;
667
+ left: -19px;
510
668
  top: 13px;
511
669
  border-radius: 50%;
512
- background-color: var(--color-grey-225-10-35);
670
+ background-color: var(--list-entry-dot-background-color);
513
671
  }
514
672
 
515
673
  .bio-properties-panel-list-entry-header-title {
674
+ display: block;
675
+ margin: auto 0;
516
676
  padding: 2px 0;
517
677
  font-size: var(--text-size-base);
518
678
  white-space: nowrap;
@@ -521,10 +681,9 @@ textarea.bio-properties-panel-input {
521
681
  }
522
682
 
523
683
  .bio-properties-panel-list-entry-header-title.open {
524
- font-weight: 600;
684
+ font-weight: 500;
525
685
  }
526
686
 
527
- .bio-properties-panel-list-entry-header-title,
528
687
  .bio-properties-panel-list-entry-header-buttons {
529
688
  display: flex;
530
689
  align-items: center;
@@ -535,12 +694,14 @@ textarea.bio-properties-panel-input {
535
694
  justify-content: center;
536
695
  align-items: center;
537
696
  align-self: center;
538
- width: 20px;
539
- height: 20px;
540
- margin-right: 4px;
541
- padding: 0;
697
+ height: 22px;
698
+ line-height: 22px;
699
+ min-width: 22px;
700
+ margin: 5px;
701
+ padding: 0 3px;
542
702
  border: none;
543
703
  background: none;
704
+ fill: var(--list-entry-header-button-fill-color);
544
705
  }
545
706
 
546
707
  .bio-properties-panel-list-entry-header-buttons > :last-child {
@@ -563,6 +724,67 @@ textarea.bio-properties-panel-input {
563
724
  justify-content: space-between;
564
725
  }
565
726
 
566
- .bio-properties-panel-list-entry-item > .bio-properties-panel-remove-entry {
567
- margin-right: 2px;
727
+ .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
728
+ margin-right: 1px;
729
+ }
730
+
731
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
732
+ width: 100%;
733
+ margin-right: 4px;
734
+ }
735
+
736
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
737
+ margin-left: -8px;
738
+ }
739
+
740
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
741
+ left: 2px;
742
+ }
743
+
744
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
745
+ padding-left: 30px;
746
+ }
747
+
748
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
749
+ padding-left: 10px;
750
+ }
751
+
752
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
753
+ left: 4px;
754
+ }
755
+
756
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
757
+ fill: var(--list-entry-add-entry-empty-fill-color);
758
+ background-color: var(--list-entry-add-entry-empty-background-color);
759
+ margin-right: 16px;
760
+ padding-left: 6px;
761
+ }
762
+
763
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry:hover {
764
+ background-color: var(--list-entry-add-entry-empty-hover-background-color);
765
+ }
766
+
767
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
768
+ color: var(--list-entry-add-entry-label-color);
769
+ padding: 4px 6px 3px 2px;
770
+ }
771
+
772
+ .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
773
+ background-color: var(--list-entry-add-entry-background-color);
774
+ fill: var(--list-entry-add-entry-fill-color);
775
+ }
776
+
777
+ .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
778
+ border-radius: 0;
779
+ margin-bottom: -2px;
780
+ }
781
+
782
+ .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
783
+ border-top-left-radius: 2px;
784
+ border-top-right-radius: 2px;
785
+ }
786
+
787
+ .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
788
+ border-bottom-left-radius: 2px;
789
+ border-bottom-right-radius: 2px;
568
790
  }