@bpmn-io/properties-panel 1.1.1 → 1.2.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 (8) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +34 -34
  3. package/assets/properties-panel.css +1016 -1016
  4. package/dist/index.esm.js +335 -304
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +335 -304
  7. package/dist/index.js.map +1 -1
  8. package/package.json +89 -89
package/assets/properties-panel.css CHANGED
@@ -1,1016 +1,1016 @@
1
- /**
2
- * Theming
3
- */
4
- .bio-properties-panel {
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%);
14
-
15
- --color-blue-205-100-35: hsl(205, 100%, 35%);
16
- --color-blue-205-100-45: hsl(205, 100%, 45%);
17
- --color-blue-205-100-50: hsl(205, 100%, 50%);
18
- --color-blue-205-100-95: hsl(205, 100%, 95%);
19
-
20
- --color-green-150-86-44: hsl(150, 86%, 44%);
21
-
22
- --color-red-360-100-40: hsl(360, 100%, 40%);
23
- --color-red-360-100-45: hsl(360, 100%, 45%);
24
- --color-red-360-100-92: hsl(360, 100%, 92%);
25
- --color-red-360-100-97: hsl(360, 100%, 97%);
26
-
27
- --color-white: white;
28
- --color-black: black;
29
- --color-transparent: transparent;
30
-
31
- --text-base-color: var(--color-grey-225-10-15);
32
- --text-error-color: var(--color-red-360-100-45);
33
- --link-color: var(--color-blue-205-100-50);
34
-
35
- --description-color: var(--color-grey-225-10-35);
36
- --description-code-background-color: var(--color-grey-225-10-97);
37
- --description-code-border-color: var(--color-grey-225-10-85);
38
- --description-list-item-color: var(--color-grey-225-10-35);
39
-
40
- --placeholder-color: var(--color-grey-225-10-35);
41
- --placeholder-background-color: var(--color-grey-225-10-95);
42
-
43
- --header-background-color: var(--color-grey-225-10-95);
44
- --header-icon-fill-color: var(--color-grey-225-10-15);
45
- --header-bottom-border-color: var(--color-grey-225-10-75);
46
-
47
- --group-background-color: var(--color-white);
48
- --group-bottom-border-color: var(--color-grey-225-10-75);
49
-
50
- --sticky-group-background-color: var(--color-grey-225-10-95);
51
- --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
52
-
53
- --add-entry-fill-color: var(--color-grey-225-10-35);
54
- --add-entry-hover-fill-color: var(--color-white);
55
- --add-entry-hover-background-color: var(--color-blue-205-100-50);
56
- --add-entry-label-color: var(--color-white);
57
-
58
- --remove-entry-fill-color: var(--color-red-360-100-45);
59
- --remove-entry-hover-background-color: var(--color-red-360-100-92);
60
-
61
- --arrow-fill-color: var(--color-grey-225-10-35);
62
- --arrow-hover-background-color: var(--color-grey-225-10-95);
63
-
64
- --dot-color: var(--color-grey-225-10-35);
65
-
66
- --list-badge-color: var(--color-white);
67
- --list-badge-background-color: var(--color-grey-225-10-35);
68
-
69
- --input-background-color: var(--color-grey-225-10-97);
70
- --input-border-color: var(--color-grey-225-10-75);
71
-
72
- --input-focus-background-color: var(--color-blue-205-100-95);
73
- --input-focus-border-color: var(--color-blue-205-100-50);
74
-
75
- --input-error-background-color: var(--color-red-360-100-97);
76
- --input-error-border-color: var(--color-red-360-100-45);
77
- --input-error-focus-border-color: var(--color-red-360-100-45);
78
-
79
- --input-disabled-color: var(--color-grey-225-10-55);
80
- --input-disabled-background-color: var(--color-grey-225-10-97);
81
- --input-disabled-border-color: var(--color-grey-225-10-90);
82
-
83
- --toggle-switch-on-background-color: var(--color-blue-205-100-50);
84
- --toggle-switch-off-background-color: var(--color-grey-225-10-75);
85
- --toggle-switch-switcher-background-color: var(--color-white);
86
-
87
- --side-line-background-color: var(--color-grey-225-10-35);
88
- --side-line-extension-background-color: var(--color-grey-225-10-35);
89
-
90
- --list-entry-dot-background-color: var(--color-grey-225-10-35);
91
- --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
92
- --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
93
- --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
94
- --list-entry-add-entry-label-color: var(--color-white);
95
- --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
96
- --list-entry-add-entry-fill-color: var(--color-white);
97
-
98
- --dropdown-item-background-color: var(--color-white);
99
- --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
100
- --dropdown-separator-background-color: var(--color-grey-225-10-75);
101
-
102
- --feel-active-color: var(--color-blue-205-100-35);
103
- --feel-inactive-color: var(--color-grey-225-10-35);
104
-
105
- --feel-indicator-background-color: var(--color-grey-225-10-90);
106
-
107
- --text-size-base: 14px;
108
- --text-size-small: 13px;
109
- --text-size-smallest: 12px;
110
- --text-line-height: 21px;
111
- --line-height-condensed: 17px;
112
-
113
- --font-family: sans-serif;
114
- --font-family-monospace: monospace;
115
-
116
- display: none;
117
- position: relative;
118
- height: 100%;
119
- width: 100%;
120
- overflow: hidden;
121
- }
122
-
123
- .bio-properties-panel {
124
- color: var(--text-base-color);
125
- }
126
-
127
- .bio-properties-panel * {
128
- font-size: var(--text-size-base);
129
- line-height: var(--text-line-height);
130
- font-weight: 400;
131
- box-sizing: border-box;
132
- }
133
-
134
- .bio-properties-panel {
135
- font-family: var(--font-family);
136
- }
137
-
138
- .bio-properties-panel.open {
139
- display: flex;
140
- flex-direction: column;
141
- flex: 1;
142
- }
143
-
144
- /**
145
- * Placeholder (empty, multi select, ...)
146
- */
147
- .bio-properties-panel-placeholder {
148
- position: absolute;
149
- display: flex;
150
- flex-direction: column;
151
- justify-content: center;
152
- align-items: center;
153
- top: 0;
154
- right: 0;
155
- bottom: 0;
156
- left: 0;
157
- background-color: var(--placeholder-background-color);
158
- }
159
-
160
- .bio-properties-panel-placeholder-text {
161
- color: var(--placeholder-color);
162
- font-size: var(--text-size-base);
163
- text-align: center;
164
- margin: 12px 48px;
165
- }
166
-
167
- /**
168
- * Header
169
- */
170
- .bio-properties-panel-header {
171
- display: flex;
172
- flex-direction: row;
173
- align-items: center;
174
- font-size: var(--text-size-base);
175
- padding: 16px 10px;
176
- background-color: var(--header-background-color);
177
- border-bottom: 1px solid var(--header-bottom-border-color);
178
- width: 100%;
179
- z-index: 10;
180
- max-height: 64px;
181
- overflow: hidden;
182
- }
183
-
184
- .bio-properties-panel-header-icon {
185
- fill: var(--header-icon-fill-color);
186
- display: flex;
187
- flex-direction: row;
188
- align-items: center;
189
- justify-content: center;
190
- width: 32px;
191
- height: 32px;
192
- }
193
-
194
- .bio-properties-panel-header-labels {
195
- overflow: hidden;
196
- margin-left: 12px;
197
- user-select: none;
198
- }
199
-
200
- .bio-properties-panel-header-type {
201
- font-size: var(--text-size-smallest);
202
- font-weight: 600;
203
- white-space: nowrap;
204
- text-overflow: ellipsis;
205
- overflow: hidden;
206
- text-transform: uppercase;
207
- }
208
-
209
- .bio-properties-panel-header-label {
210
- white-space: nowrap;
211
- text-overflow: ellipsis;
212
- overflow: hidden;
213
- margin-top: -6px;
214
- }
215
-
216
- .bio-properties-panel-header-actions {
217
- margin-left: auto;
218
- margin-top: auto;
219
- }
220
-
221
- /**
222
- * Scroll container
223
- */
224
- .bio-properties-panel-scroll-container {
225
- overflow-y: auto;
226
- overflow-x: hidden;
227
- flex: 1;
228
- }
229
-
230
- /**
231
- * Groups
232
- */
233
- .bio-properties-panel-group {
234
- background-color: var(--group-background-color);
235
- border-bottom: 1px solid var(--group-bottom-border-color);
236
- position: relative;
237
- }
238
-
239
- .bio-properties-panel-group-header {
240
- display: flex;
241
- flex-direction: row;
242
- align-items: center;
243
- font-size: var(--text-size-base);
244
- height: 32px;
245
- user-select: none;
246
- justify-content: space-between;
247
- margin-bottom: -1px; /* avoid double borders */
248
- position: relative; /* browsers not supporting sticky */
249
- position: -webkit-sticky; /* for safari */
250
- position: sticky;
251
- top: 0;
252
- z-index: 10;
253
- }
254
-
255
- .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
256
- white-space: nowrap;
257
- overflow: hidden;
258
- text-overflow: ellipsis;
259
- margin: 1px 12px 0;
260
- }
261
-
262
- .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
263
- font-weight: 500;
264
- }
265
-
266
- .bio-properties-panel-group-header.sticky {
267
- background-color: var(--sticky-group-background-color);
268
- border-bottom: 1px solid var(--sticky-group-bottom-border-color);
269
- }
270
-
271
- .bio-properties-panel-group-header-buttons {
272
- display: flex;
273
- }
274
-
275
- .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
276
- display: inline-flex;
277
- justify-content: center;
278
- align-items: center;
279
- align-self: center;
280
- height: 22px;
281
- line-height: 22px;
282
- min-width: 22px;
283
- margin: 5px;
284
- padding: 0 3px;
285
- border: none;
286
- background: none;
287
- }
288
-
289
- .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
290
- margin-right: 0;
291
- }
292
-
293
- .bio-properties-panel-add-entry {
294
- fill: var(--add-entry-fill-color);
295
- border-radius: 11px;
296
- }
297
-
298
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
299
- margin-right: 69px;
300
- }
301
-
302
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
303
- margin-right: 19px;
304
- }
305
-
306
- .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
307
- display: none;
308
- color: var(--add-entry-label-color);
309
- padding: 0 6px 0 2px;
310
- }
311
-
312
- .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
313
- background-color: var(--add-entry-hover-background-color);
314
- fill: var(--add-entry-hover-fill-color);
315
- }
316
-
317
- .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
318
- display: block;
319
- }
320
-
321
- .bio-properties-panel-group-entries {
322
- display: none;
323
- }
324
-
325
- .bio-properties-panel-group-entries.open {
326
- display: block;
327
- }
328
-
329
- .bio-properties-panel-arrow {
330
- display: flex;
331
- justify-content: center;
332
- text-align: center;
333
- fill: var(--arrow-fill-color);
334
- min-width: 22px;
335
- border-radius: 11px;
336
- border: none;
337
- background: none;
338
- }
339
-
340
- .bio-properties-panel-arrow:hover {
341
- background-color: var(--arrow-hover-background-color);
342
- }
343
-
344
- .bio-properties-panel-arrow-down {
345
- transform: rotate(90deg);
346
- }
347
-
348
- .bio-properties-panel-dot {
349
- align-self: center;
350
- height: 8px;
351
- min-width: 8px;
352
- border-radius: 50%;
353
- margin: 12px;
354
- background-color: var(--dot-color);
355
- }
356
-
357
- /**
358
- * Lists
359
- */
360
- .bio-properties-panel-list {
361
- display: none;
362
- }
363
-
364
- .bio-properties-panel-list.open {
365
- display: block;
366
- margin-bottom: 6px;
367
- padding-bottom: 2px;
368
- }
369
-
370
- .bio-properties-panel-list-badge {
371
- height: 22px;
372
- min-width: 22px;
373
- color: var(--list-badge-color);
374
- border-radius: 11px;
375
- font-size: var(--text-size-small);
376
- line-height: 22px;
377
- text-align: center;
378
- user-select: none;
379
- padding: 0 5px;
380
- margin: 5px;
381
- background-color: var(--list-badge-background-color);
382
- }
383
-
384
- /**
385
- * Basic entries
386
- */
387
- .bio-properties-panel-entry {
388
- margin: 2px 32px 6px 12px;
389
- }
390
-
391
- .bio-properties-panel-entry:last-child {
392
- padding-bottom: 10px;
393
- }
394
-
395
- .bio-properties-panel-label {
396
- display: block;
397
- font-size: var(--text-size-small);
398
- margin: 2px 0 1px;
399
- }
400
-
401
- .bio-properties-panel-description,
402
- .bio-properties-panel-description p,
403
- .bio-properties-panel-description span,
404
- .bio-properties-panel-description div {
405
- color: var(--description-color);
406
- display: block;
407
- margin: 2px 0 4px;
408
- line-height: var(--line-height-condensed);
409
- font-weight: 400;
410
- font-size: var(--text-size-small);
411
- }
412
-
413
- .bio-properties-panel-description code {
414
- color: var(--description-color);
415
- font-family: var(--font-family);
416
- font-size: var(--text-size-small);
417
- line-height: var(--line-height-condensed);
418
- padding: 0 2px;
419
- background-color: var(--description-code-background-color);
420
- border: 1px solid var(--description-code-border-color);
421
- border-radius: 3px;
422
- }
423
-
424
- .bio-properties-panel-description ul {
425
- padding: 0;
426
- margin: 0 0 0 12px;
427
- list-style-type: disc;
428
- }
429
-
430
- .bio-properties-panel-description li {
431
- color: var(--description-list-item-color);
432
- margin: 0 0 0 12px;
433
- }
434
-
435
- .bio-properties-panel-description a {
436
- color: var(--link-color);
437
- font-size: var(--text-size-small);
438
- text-decoration: underline;
439
- }
440
-
441
- .bio-properties-panel-input {
442
- padding: 3px 6px 2px;
443
- border: 1px solid var(--input-border-color);
444
- border-radius: 2px;
445
- background-color: var(--input-background-color);
446
- font-size: var(--text-size-base);
447
- font-family: inherit;
448
- }
449
-
450
- .bio-properties-panel-input[type=number],
451
- select.bio-properties-panel-input,
452
- textarea.bio-properties-panel-input,
453
- .bio-properties-panel-input[type=text] {
454
- display: block;
455
- width: 100%;
456
- }
457
-
458
- .bio-properties-panel-input:focus,
459
- .bio-properties-panel-input:focus-within {
460
- outline: none;
461
- background-color: var(--input-focus-background-color);
462
- border: 1px solid var(--input-focus-border-color);
463
- }
464
-
465
- .bio-properties-panel-textfield:focus-within,
466
- .bio-properties-panel-feel-entry:focus-within {
467
- --input-background-color: var(--input-focus-background-color);
468
- --input-border-color: var(--input-focus-border-color);
469
- }
470
-
471
- .bio-properties-panel-input:disabled {
472
- border-color: var(--input-disabled-border-color);
473
- background-color: var(--input-disabled-background-color);
474
- color: var(--input-disabled-color);
475
- }
476
-
477
- select.bio-properties-panel-input {
478
- padding: 4px 6px;
479
- }
480
-
481
- .bio-properties-panel-input-monospace {
482
- font-family: var(--font-family-monospace);
483
- }
484
-
485
- .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
486
- margin: 0;
487
- vertical-align: middle;
488
- }
489
-
490
- .bio-properties-panel-input[type="checkbox"]:focus {
491
- outline: 1px solid var(--input-focus-border-color);
492
- outline-offset: 0;
493
- }
494
-
495
- .bio-properties-panel-checkbox > .bio-properties-panel-label {
496
- display: inline-block;
497
- font-size: var(--text-size-base);
498
- margin-left: 6px;
499
- margin-top: auto;
500
- vertical-align: middle;
501
- }
502
-
503
- .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
504
- margin-top: -8px;
505
- }
506
-
507
- .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
508
- margin-left: 18px;
509
- }
510
-
511
- textarea.bio-properties-panel-input {
512
- resize: vertical;
513
- }
514
-
515
- .bio-properties-panel-entry.has-error .bio-properties-panel-input {
516
- border-color: var(--input-error-border-color);
517
- background-color: var(--input-error-background-color);
518
- }
519
-
520
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
521
- border-color: var(--input-error-border-color);
522
- }
523
-
524
- .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
525
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
526
- border-color: var(--input-error-focus-border-color);
527
- }
528
-
529
- .bio-properties-panel-entry .bio-properties-panel-error {
530
- color: var(--text-error-color);
531
- margin: 4px 0;
532
- font-size: var(--text-size-small);
533
- }
534
-
535
- .bio-properties-panel-simple {
536
- width: 100%;
537
- margin-right: 8px;
538
- }
539
-
540
- .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
541
- margin: auto;
542
- }
543
-
544
- /**
545
- * Toggle Switch
546
- */
547
- .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
548
- margin-top: -8px;
549
- }
550
-
551
- .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
552
- margin-left: 38px;
553
- }
554
-
555
- .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
556
- display: flex;
557
- flex-direction: row;
558
- align-items: center;
559
- }
560
-
561
- .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
562
- font-size: var(--text-size-base);
563
- }
564
-
565
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
566
- margin: 0;
567
- margin-left: 6px;
568
- font-size: var(--text-size-base);
569
- }
570
-
571
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
572
- position: relative;
573
- width: 32px;
574
- height: 16px;
575
- }
576
-
577
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
578
- opacity: 0;
579
- width: 0;
580
- height: 0;
581
- }
582
-
583
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
584
- position: absolute;
585
- top: 0;
586
- left: 0;
587
- right: 0;
588
- bottom: 0;
589
- background-color: var(--toggle-switch-off-background-color);
590
- -webkit-transition: 0.4s;
591
- transition: 0.4s;
592
- border-radius: 34px;
593
- }
594
-
595
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
596
- position: absolute;
597
- content: "";
598
- height: 12px;
599
- width: 12px;
600
- left: 2px;
601
- bottom: 2px;
602
- background-color: var(--toggle-switch-switcher-background-color);
603
- -webkit-transition: 0.4s;
604
- transition: 0.4s;
605
- border-radius: 50%;
606
- }
607
-
608
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
609
- background-color: var(--toggle-switch-on-background-color);
610
- box-shadow: 0 0 1px ;
611
- }
612
-
613
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
614
- -webkit-transform: translateX(16px);
615
- -ms-transform: translateX(16px);
616
- transform: translateX(16px);
617
- }
618
-
619
- /**
620
- * Collapsible entries
621
- */
622
- .bio-properties-panel-collapsible-entry-entries {
623
- position: relative;
624
- display: none;
625
- }
626
-
627
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
628
- padding-bottom: 0;
629
- }
630
-
631
- .bio-properties-panel-collapsible-entry-entries.open {
632
- display: block;
633
- }
634
-
635
- .bio-properties-panel-collapsible-entry-entries {
636
- padding-left: 20px;
637
- margin-bottom: 10px;
638
- position: relative;
639
- display: none;
640
- }
641
-
642
- .bio-properties-panel-collapsible-entry-header {
643
- position: relative;
644
- display: flex;
645
- justify-content: space-between;
646
- align-items: center;
647
- overflow: hidden;
648
- }
649
-
650
- .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
651
- padding: 2px 24px 2px 32px;
652
- font-size: var(--text-size-base);
653
- white-space: nowrap;
654
- overflow: hidden;
655
- text-overflow: ellipsis;
656
- user-select: none;
657
- }
658
-
659
- .bio-properties-panel-collapsible-entry-arrow {
660
- position: absolute;
661
- top: 2px;
662
- left: 6px;
663
- padding: 0 3px;
664
- height: 22px;
665
- display: inline-flex;
666
- justify-content: center;
667
- align-items: center;
668
- align-self: center;
669
- }
670
-
671
- .bio-properties-panel-remove-entry {
672
- display: flex;
673
- align-items: center;
674
- justify-content: center;
675
- margin-right: 5px;
676
- padding: 0;
677
- width: 22px;
678
- height: 22px;
679
- fill: var(--remove-entry-fill-color);
680
- border-radius: 50%;
681
- border: none;
682
- background: none;
683
- visibility: hidden;
684
- }
685
-
686
- .bio-properties-panel-remove-entry:hover {
687
- background-color: var(--remove-entry-hover-background-color);
688
- }
689
-
690
- .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
691
- .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
692
- .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
693
- {
694
- visibility: visible;
695
- }
696
-
697
- /* Side line */
698
- .bio-properties-panel-collapsible-entry-entries::before {
699
- content: "";
700
- position: absolute;
701
- left: 16px;
702
- width: 2px;
703
- top: -6px;
704
- bottom: 12px;
705
- background-color: var(--side-line-background-color);
706
- border-radius: 1px;
707
- }
708
-
709
- /* Side line extension for non-list entry or open list entry positioned as the last one. */
710
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
711
- .bio-properties-panel-list-entry.open:last-child {
712
- position: relative;
713
- }
714
-
715
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
716
- .bio-properties-panel-list-entry.open:last-child::after {
717
- content: "";
718
- position: absolute;
719
- left: -16px;
720
- width: 2px;
721
- top: 0;
722
- bottom: -4px;
723
- background-color: var(--side-line-extension-background-color);
724
- border-radius: 1px;
725
- }
726
-
727
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
728
- left: -18px;
729
- }
730
-
731
- /*
732
- * List entry
733
- */
734
- .bio-properties-panel-list-entry {
735
- position: relative;
736
- margin-right: 5px;
737
- margin-bottom: 0;
738
- }
739
-
740
- .bio-properties-panel-list-entry .bio-properties-panel-entry {
741
- margin-right: 0;
742
- }
743
-
744
- .bio-properties-panel-list-entry-header {
745
- position: relative;
746
- overflow: hidden;
747
- display: flex;
748
- justify-content: space-between;
749
- height: 32px;
750
- }
751
-
752
- /* Nested list dot */
753
- .bio-properties-panel-list-entry::before {
754
- content: "";
755
- width: 8px;
756
- height: 8px;
757
- position: absolute;
758
- left: -19px;
759
- top: 13px;
760
- border-radius: 50%;
761
- background-color: var(--list-entry-dot-background-color);
762
- }
763
-
764
- .bio-properties-panel-list-entry-header-title {
765
- display: block;
766
- margin: auto 0;
767
- padding: 2px 0;
768
- font-size: var(--text-size-base);
769
- white-space: nowrap;
770
- overflow: hidden;
771
- text-overflow: ellipsis;
772
- }
773
-
774
- .bio-properties-panel-list-entry-header-title.open {
775
- font-weight: 500;
776
- }
777
-
778
- .bio-properties-panel-list-entry-header-buttons {
779
- display: flex;
780
- align-items: center;
781
- }
782
-
783
- .bio-properties-panel-list-entry-header-buttons > button {
784
- display: inline-flex;
785
- justify-content: center;
786
- align-items: center;
787
- align-self: center;
788
- height: 22px;
789
- line-height: 22px;
790
- min-width: 22px;
791
- margin: 5px;
792
- padding: 0 3px;
793
- border: none;
794
- background: none;
795
- fill: var(--list-entry-header-button-fill-color);
796
- }
797
-
798
- .bio-properties-panel-list-entry-header-buttons > :last-child {
799
- margin-right: 0;
800
- }
801
-
802
- .bio-properties-panel-list-entry-items {
803
- padding: 0;
804
- margin: 0;
805
-
806
- list-style: none;
807
- }
808
-
809
- .bio-properties-panel-list-entry-items:not(.open) {
810
- display: none;
811
- }
812
-
813
- .bio-properties-panel-list-entry-item {
814
- display: flex;
815
- justify-content: space-between;
816
- }
817
-
818
- .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
819
- margin-right: 1px;
820
- }
821
-
822
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
823
- width: 100%;
824
- margin-right: 4px;
825
- }
826
-
827
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
828
- margin-left: -8px;
829
- }
830
-
831
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
832
- left: 2px;
833
- }
834
-
835
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
836
- padding-left: 30px;
837
- }
838
-
839
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
840
- padding-left: 10px;
841
- }
842
-
843
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
844
- left: 4px;
845
- }
846
-
847
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
848
- margin-right: 16px;
849
- padding-left: 6px;
850
- }
851
-
852
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
853
- color: var(--list-entry-add-entry-label-color);
854
- padding: 4px 6px 3px 2px;
855
- }
856
-
857
- .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
858
- background-color: var(--list-entry-add-entry-background-color);
859
- fill: var(--list-entry-add-entry-fill-color);
860
- }
861
-
862
- .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
863
- border-radius: 0;
864
- margin-bottom: -2px;
865
- }
866
-
867
- .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
868
- border-top-left-radius: 2px;
869
- border-top-right-radius: 2px;
870
- }
871
-
872
- .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
873
- border-bottom-left-radius: 2px;
874
- border-bottom-right-radius: 2px;
875
- }
876
-
877
- .bio-properties-panel-dropdown-button {
878
- position: relative;
879
-
880
- --dropdown-button-margin: 5px;
881
- }
882
-
883
- .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
884
- display: none;
885
- }
886
-
887
- .bio-properties-panel-dropdown-button__menu {
888
- min-width: calc(100% - var(--dropdown-button-margin) * 2);
889
- max-width: 240px;
890
-
891
- position: absolute;
892
- top: calc(100% - var(--dropdown-button-margin));
893
- right: var(--dropdown-button-margin);
894
- z-index: 101;
895
-
896
- background-color: var(--dropdown-item-background-color);
897
-
898
- padding: 8px 0;
899
-
900
- box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
901
- }
902
-
903
- .bio-properties-panel-dropdown-button__menu-item {
904
- display: block;
905
- width: 100%;
906
- padding: 4px 12px;
907
-
908
- font-size: var(--text-size-small);
909
- appearance: revert;
910
- border: unset;
911
- background: unset;
912
- text-align: unset;
913
- }
914
-
915
- .bio-properties-panel-dropdown-button__menu-item--separator {
916
- width: 100%;
917
- height: 1px;
918
-
919
- padding: 0;
920
- margin: 8px 0;
921
-
922
- background-color: var(--dropdown-separator-background-color);
923
- }
924
-
925
- .bio-properties-panel-dropdown-button__menu-item--actionable {
926
- font-size: var(--text-size-base);
927
- }
928
-
929
- .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
930
- background-color: var(--dropdown-item-hover-background-color);
931
- }
932
-
933
- .bio-properties-panel-feel-input {
934
- position: relative;
935
- }
936
-
937
- .bio-properties-panel-feel-input input {
938
- padding-right: 2em
939
- }
940
-
941
- .bio-properties-panel-feel-icon {
942
- display: inline-block;
943
- height: 16px;
944
- border-radius: 8px;
945
- vertical-align: text-bottom;
946
- padding: 0;
947
- margin: 0 3px;
948
- align-items: center;
949
- align-self: center;
950
- border: none;
951
- background: none;
952
- }
953
-
954
- .bio-properties-panel-feel-icon.optional {
955
- cursor: pointer;
956
- }
957
-
958
- .bio-properties-panel-feel-icon svg * {
959
- color: var(--feel-inactive-color);
960
- }
961
-
962
- .bio-properties-panel-feel-icon.active svg * {
963
- color: var(--feel-active-color);
964
- }
965
-
966
- .bio-properties-panel-feel-icon svg {
967
- width: 16px;
968
- height: 16px;
969
- }
970
-
971
- .bio-properties-panel-feel-editor-container {
972
- position: relative;
973
- }
974
-
975
- .bio-properties-panel-feel-editor-container.active {
976
- font-family: var(--font-family-monospace);
977
- }
978
-
979
- .bio-properties-panel-feel-container {
980
- position: relative;
981
- }
982
-
983
- .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
984
- position: static;
985
- padding-left: 2.4em !important;
986
- min-height: 28px;
987
- }
988
-
989
- .bio-properties-panel-feel-container .cm-scroller {
990
- overflow: hidden !important;
991
- }
992
-
993
- .bio-properties-panel-feel-indicator {
994
- position: absolute;
995
- border: 1px solid var(--input-border-color);
996
- background-color: var(--feel-indicator-background-color);
997
- border-right: 0px;
998
- border-radius: 2px 0 0 2px;
999
- z-index: 1;
1000
- height: 100%;
1001
- width: 2em;
1002
- text-align: center;
1003
- padding: 2px 6px;
1004
- }
1005
-
1006
- .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1007
- resize: vertical;
1008
- overflow: hidden;
1009
- overflow-y: auto;
1010
- }
1011
-
1012
- .bio-properties-panel-feel-editor-container,
1013
- .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1014
- .bio-properties-panel-feel-container .cm-editor {
1015
- min-height: 100%;
1016
- }
1
+ /**
2
+ * Theming
3
+ */
4
+ .bio-properties-panel {
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%);
14
+
15
+ --color-blue-205-100-35: hsl(205, 100%, 35%);
16
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
17
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
18
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
19
+
20
+ --color-green-150-86-44: hsl(150, 86%, 44%);
21
+
22
+ --color-red-360-100-40: hsl(360, 100%, 40%);
23
+ --color-red-360-100-45: hsl(360, 100%, 45%);
24
+ --color-red-360-100-92: hsl(360, 100%, 92%);
25
+ --color-red-360-100-97: hsl(360, 100%, 97%);
26
+
27
+ --color-white: white;
28
+ --color-black: black;
29
+ --color-transparent: transparent;
30
+
31
+ --text-base-color: var(--color-grey-225-10-15);
32
+ --text-error-color: var(--color-red-360-100-45);
33
+ --link-color: var(--color-blue-205-100-50);
34
+
35
+ --description-color: var(--color-grey-225-10-35);
36
+ --description-code-background-color: var(--color-grey-225-10-97);
37
+ --description-code-border-color: var(--color-grey-225-10-85);
38
+ --description-list-item-color: var(--color-grey-225-10-35);
39
+
40
+ --placeholder-color: var(--color-grey-225-10-35);
41
+ --placeholder-background-color: var(--color-grey-225-10-95);
42
+
43
+ --header-background-color: var(--color-grey-225-10-95);
44
+ --header-icon-fill-color: var(--color-grey-225-10-15);
45
+ --header-bottom-border-color: var(--color-grey-225-10-75);
46
+
47
+ --group-background-color: var(--color-white);
48
+ --group-bottom-border-color: var(--color-grey-225-10-75);
49
+
50
+ --sticky-group-background-color: var(--color-grey-225-10-95);
51
+ --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
52
+
53
+ --add-entry-fill-color: var(--color-grey-225-10-35);
54
+ --add-entry-hover-fill-color: var(--color-white);
55
+ --add-entry-hover-background-color: var(--color-blue-205-100-50);
56
+ --add-entry-label-color: var(--color-white);
57
+
58
+ --remove-entry-fill-color: var(--color-red-360-100-45);
59
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
60
+
61
+ --arrow-fill-color: var(--color-grey-225-10-35);
62
+ --arrow-hover-background-color: var(--color-grey-225-10-95);
63
+
64
+ --dot-color: var(--color-grey-225-10-35);
65
+
66
+ --list-badge-color: var(--color-white);
67
+ --list-badge-background-color: var(--color-grey-225-10-35);
68
+
69
+ --input-background-color: var(--color-grey-225-10-97);
70
+ --input-border-color: var(--color-grey-225-10-75);
71
+
72
+ --input-focus-background-color: var(--color-blue-205-100-95);
73
+ --input-focus-border-color: var(--color-blue-205-100-50);
74
+
75
+ --input-error-background-color: var(--color-red-360-100-97);
76
+ --input-error-border-color: var(--color-red-360-100-45);
77
+ --input-error-focus-border-color: var(--color-red-360-100-45);
78
+
79
+ --input-disabled-color: var(--color-grey-225-10-55);
80
+ --input-disabled-background-color: var(--color-grey-225-10-97);
81
+ --input-disabled-border-color: var(--color-grey-225-10-90);
82
+
83
+ --toggle-switch-on-background-color: var(--color-blue-205-100-50);
84
+ --toggle-switch-off-background-color: var(--color-grey-225-10-75);
85
+ --toggle-switch-switcher-background-color: var(--color-white);
86
+
87
+ --side-line-background-color: var(--color-grey-225-10-35);
88
+ --side-line-extension-background-color: var(--color-grey-225-10-35);
89
+
90
+ --list-entry-dot-background-color: var(--color-grey-225-10-35);
91
+ --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
92
+ --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
93
+ --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
94
+ --list-entry-add-entry-label-color: var(--color-white);
95
+ --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
96
+ --list-entry-add-entry-fill-color: var(--color-white);
97
+
98
+ --dropdown-item-background-color: var(--color-white);
99
+ --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
100
+ --dropdown-separator-background-color: var(--color-grey-225-10-75);
101
+
102
+ --feel-active-color: var(--color-blue-205-100-35);
103
+ --feel-inactive-color: var(--color-grey-225-10-35);
104
+
105
+ --feel-indicator-background-color: var(--color-grey-225-10-90);
106
+
107
+ --text-size-base: 14px;
108
+ --text-size-small: 13px;
109
+ --text-size-smallest: 12px;
110
+ --text-line-height: 21px;
111
+ --line-height-condensed: 17px;
112
+
113
+ --font-family: sans-serif;
114
+ --font-family-monospace: monospace;
115
+
116
+ display: none;
117
+ position: relative;
118
+ height: 100%;
119
+ width: 100%;
120
+ overflow: hidden;
121
+ }
122
+
123
+ .bio-properties-panel {
124
+ color: var(--text-base-color);
125
+ }
126
+
127
+ .bio-properties-panel * {
128
+ font-size: var(--text-size-base);
129
+ line-height: var(--text-line-height);
130
+ font-weight: 400;
131
+ box-sizing: border-box;
132
+ }
133
+
134
+ .bio-properties-panel {
135
+ font-family: var(--font-family);
136
+ }
137
+
138
+ .bio-properties-panel.open {
139
+ display: flex;
140
+ flex-direction: column;
141
+ flex: 1;
142
+ }
143
+
144
+ /**
145
+ * Placeholder (empty, multi select, ...)
146
+ */
147
+ .bio-properties-panel-placeholder {
148
+ position: absolute;
149
+ display: flex;
150
+ flex-direction: column;
151
+ justify-content: center;
152
+ align-items: center;
153
+ top: 0;
154
+ right: 0;
155
+ bottom: 0;
156
+ left: 0;
157
+ background-color: var(--placeholder-background-color);
158
+ }
159
+
160
+ .bio-properties-panel-placeholder-text {
161
+ color: var(--placeholder-color);
162
+ font-size: var(--text-size-base);
163
+ text-align: center;
164
+ margin: 12px 48px;
165
+ }
166
+
167
+ /**
168
+ * Header
169
+ */
170
+ .bio-properties-panel-header {
171
+ display: flex;
172
+ flex-direction: row;
173
+ align-items: center;
174
+ font-size: var(--text-size-base);
175
+ padding: 16px 10px;
176
+ background-color: var(--header-background-color);
177
+ border-bottom: 1px solid var(--header-bottom-border-color);
178
+ width: 100%;
179
+ z-index: 10;
180
+ max-height: 64px;
181
+ overflow: hidden;
182
+ }
183
+
184
+ .bio-properties-panel-header-icon {
185
+ fill: var(--header-icon-fill-color);
186
+ display: flex;
187
+ flex-direction: row;
188
+ align-items: center;
189
+ justify-content: center;
190
+ width: 32px;
191
+ height: 32px;
192
+ }
193
+
194
+ .bio-properties-panel-header-labels {
195
+ overflow: hidden;
196
+ margin-left: 12px;
197
+ user-select: none;
198
+ }
199
+
200
+ .bio-properties-panel-header-type {
201
+ font-size: var(--text-size-smallest);
202
+ font-weight: 600;
203
+ white-space: nowrap;
204
+ text-overflow: ellipsis;
205
+ overflow: hidden;
206
+ text-transform: uppercase;
207
+ }
208
+
209
+ .bio-properties-panel-header-label {
210
+ white-space: nowrap;
211
+ text-overflow: ellipsis;
212
+ overflow: hidden;
213
+ margin-top: -6px;
214
+ }
215
+
216
+ .bio-properties-panel-header-actions {
217
+ margin-left: auto;
218
+ margin-top: auto;
219
+ }
220
+
221
+ /**
222
+ * Scroll container
223
+ */
224
+ .bio-properties-panel-scroll-container {
225
+ overflow-y: auto;
226
+ overflow-x: hidden;
227
+ flex: 1;
228
+ }
229
+
230
+ /**
231
+ * Groups
232
+ */
233
+ .bio-properties-panel-group {
234
+ background-color: var(--group-background-color);
235
+ border-bottom: 1px solid var(--group-bottom-border-color);
236
+ position: relative;
237
+ }
238
+
239
+ .bio-properties-panel-group-header {
240
+ display: flex;
241
+ flex-direction: row;
242
+ align-items: center;
243
+ font-size: var(--text-size-base);
244
+ height: 32px;
245
+ user-select: none;
246
+ justify-content: space-between;
247
+ margin-bottom: -1px; /* avoid double borders */
248
+ position: relative; /* browsers not supporting sticky */
249
+ position: -webkit-sticky; /* for safari */
250
+ position: sticky;
251
+ top: 0;
252
+ z-index: 10;
253
+ }
254
+
255
+ .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
256
+ white-space: nowrap;
257
+ overflow: hidden;
258
+ text-overflow: ellipsis;
259
+ margin: 1px 12px 0;
260
+ }
261
+
262
+ .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
263
+ font-weight: 500;
264
+ }
265
+
266
+ .bio-properties-panel-group-header.sticky {
267
+ background-color: var(--sticky-group-background-color);
268
+ border-bottom: 1px solid var(--sticky-group-bottom-border-color);
269
+ }
270
+
271
+ .bio-properties-panel-group-header-buttons {
272
+ display: flex;
273
+ }
274
+
275
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
276
+ display: inline-flex;
277
+ justify-content: center;
278
+ align-items: center;
279
+ align-self: center;
280
+ height: 22px;
281
+ line-height: 22px;
282
+ min-width: 22px;
283
+ margin: 5px;
284
+ padding: 0 3px;
285
+ border: none;
286
+ background: none;
287
+ }
288
+
289
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
290
+ margin-right: 0;
291
+ }
292
+
293
+ .bio-properties-panel-add-entry {
294
+ fill: var(--add-entry-fill-color);
295
+ border-radius: 11px;
296
+ }
297
+
298
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
299
+ margin-right: 69px;
300
+ }
301
+
302
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
303
+ margin-right: 19px;
304
+ }
305
+
306
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
307
+ display: none;
308
+ color: var(--add-entry-label-color);
309
+ padding: 0 6px 0 2px;
310
+ }
311
+
312
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
313
+ background-color: var(--add-entry-hover-background-color);
314
+ fill: var(--add-entry-hover-fill-color);
315
+ }
316
+
317
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
318
+ display: block;
319
+ }
320
+
321
+ .bio-properties-panel-group-entries {
322
+ display: none;
323
+ }
324
+
325
+ .bio-properties-panel-group-entries.open {
326
+ display: block;
327
+ }
328
+
329
+ .bio-properties-panel-arrow {
330
+ display: flex;
331
+ justify-content: center;
332
+ text-align: center;
333
+ fill: var(--arrow-fill-color);
334
+ min-width: 22px;
335
+ border-radius: 11px;
336
+ border: none;
337
+ background: none;
338
+ }
339
+
340
+ .bio-properties-panel-arrow:hover {
341
+ background-color: var(--arrow-hover-background-color);
342
+ }
343
+
344
+ .bio-properties-panel-arrow-down {
345
+ transform: rotate(90deg);
346
+ }
347
+
348
+ .bio-properties-panel-dot {
349
+ align-self: center;
350
+ height: 8px;
351
+ min-width: 8px;
352
+ border-radius: 50%;
353
+ margin: 12px;
354
+ background-color: var(--dot-color);
355
+ }
356
+
357
+ /**
358
+ * Lists
359
+ */
360
+ .bio-properties-panel-list {
361
+ display: none;
362
+ }
363
+
364
+ .bio-properties-panel-list.open {
365
+ display: block;
366
+ margin-bottom: 6px;
367
+ padding-bottom: 2px;
368
+ }
369
+
370
+ .bio-properties-panel-list-badge {
371
+ height: 22px;
372
+ min-width: 22px;
373
+ color: var(--list-badge-color);
374
+ border-radius: 11px;
375
+ font-size: var(--text-size-small);
376
+ line-height: 22px;
377
+ text-align: center;
378
+ user-select: none;
379
+ padding: 0 5px;
380
+ margin: 5px;
381
+ background-color: var(--list-badge-background-color);
382
+ }
383
+
384
+ /**
385
+ * Basic entries
386
+ */
387
+ .bio-properties-panel-entry {
388
+ margin: 2px 32px 6px 12px;
389
+ }
390
+
391
+ .bio-properties-panel-entry:last-child {
392
+ padding-bottom: 10px;
393
+ }
394
+
395
+ .bio-properties-panel-label {
396
+ display: block;
397
+ font-size: var(--text-size-small);
398
+ margin: 2px 0 1px;
399
+ }
400
+
401
+ .bio-properties-panel-description,
402
+ .bio-properties-panel-description p,
403
+ .bio-properties-panel-description span,
404
+ .bio-properties-panel-description div {
405
+ color: var(--description-color);
406
+ display: block;
407
+ margin: 2px 0 4px;
408
+ line-height: var(--line-height-condensed);
409
+ font-weight: 400;
410
+ font-size: var(--text-size-small);
411
+ }
412
+
413
+ .bio-properties-panel-description code {
414
+ color: var(--description-color);
415
+ font-family: var(--font-family);
416
+ font-size: var(--text-size-small);
417
+ line-height: var(--line-height-condensed);
418
+ padding: 0 2px;
419
+ background-color: var(--description-code-background-color);
420
+ border: 1px solid var(--description-code-border-color);
421
+ border-radius: 3px;
422
+ }
423
+
424
+ .bio-properties-panel-description ul {
425
+ padding: 0;
426
+ margin: 0 0 0 12px;
427
+ list-style-type: disc;
428
+ }
429
+
430
+ .bio-properties-panel-description li {
431
+ color: var(--description-list-item-color);
432
+ margin: 0 0 0 12px;
433
+ }
434
+
435
+ .bio-properties-panel-description a {
436
+ color: var(--link-color);
437
+ font-size: var(--text-size-small);
438
+ text-decoration: underline;
439
+ }
440
+
441
+ .bio-properties-panel-input {
442
+ padding: 3px 6px 2px;
443
+ border: 1px solid var(--input-border-color);
444
+ border-radius: 2px;
445
+ background-color: var(--input-background-color);
446
+ font-size: var(--text-size-base);
447
+ font-family: inherit;
448
+ }
449
+
450
+ .bio-properties-panel-input[type=number],
451
+ select.bio-properties-panel-input,
452
+ textarea.bio-properties-panel-input,
453
+ .bio-properties-panel-input[type=text] {
454
+ display: block;
455
+ width: 100%;
456
+ }
457
+
458
+ .bio-properties-panel-input:focus,
459
+ .bio-properties-panel-input:focus-within {
460
+ outline: none;
461
+ background-color: var(--input-focus-background-color);
462
+ border: 1px solid var(--input-focus-border-color);
463
+ }
464
+
465
+ .bio-properties-panel-textfield:focus-within,
466
+ .bio-properties-panel-feel-entry:focus-within {
467
+ --input-background-color: var(--input-focus-background-color);
468
+ --input-border-color: var(--input-focus-border-color);
469
+ }
470
+
471
+ .bio-properties-panel-input:disabled {
472
+ border-color: var(--input-disabled-border-color);
473
+ background-color: var(--input-disabled-background-color);
474
+ color: var(--input-disabled-color);
475
+ }
476
+
477
+ select.bio-properties-panel-input {
478
+ padding: 4px 6px;
479
+ }
480
+
481
+ .bio-properties-panel-input-monospace {
482
+ font-family: var(--font-family-monospace);
483
+ }
484
+
485
+ .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
486
+ margin: 0;
487
+ vertical-align: middle;
488
+ }
489
+
490
+ .bio-properties-panel-input[type="checkbox"]:focus {
491
+ outline: 1px solid var(--input-focus-border-color);
492
+ outline-offset: 0;
493
+ }
494
+
495
+ .bio-properties-panel-checkbox > .bio-properties-panel-label {
496
+ display: inline-block;
497
+ font-size: var(--text-size-base);
498
+ margin-left: 6px;
499
+ margin-top: auto;
500
+ vertical-align: middle;
501
+ }
502
+
503
+ .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
504
+ margin-top: -8px;
505
+ }
506
+
507
+ .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
508
+ margin-left: 18px;
509
+ }
510
+
511
+ textarea.bio-properties-panel-input {
512
+ resize: vertical;
513
+ }
514
+
515
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input {
516
+ border-color: var(--input-error-border-color);
517
+ background-color: var(--input-error-background-color);
518
+ }
519
+
520
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
521
+ border-color: var(--input-error-border-color);
522
+ }
523
+
524
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
525
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
526
+ border-color: var(--input-error-focus-border-color);
527
+ }
528
+
529
+ .bio-properties-panel-entry .bio-properties-panel-error {
530
+ color: var(--text-error-color);
531
+ margin: 4px 0;
532
+ font-size: var(--text-size-small);
533
+ }
534
+
535
+ .bio-properties-panel-simple {
536
+ width: 100%;
537
+ margin-right: 8px;
538
+ }
539
+
540
+ .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
541
+ margin: auto;
542
+ }
543
+
544
+ /**
545
+ * Toggle Switch
546
+ */
547
+ .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
548
+ margin-top: -8px;
549
+ }
550
+
551
+ .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
552
+ margin-left: 38px;
553
+ }
554
+
555
+ .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
556
+ display: flex;
557
+ flex-direction: row;
558
+ align-items: center;
559
+ }
560
+
561
+ .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
562
+ font-size: var(--text-size-base);
563
+ }
564
+
565
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
566
+ margin: 0;
567
+ margin-left: 6px;
568
+ font-size: var(--text-size-base);
569
+ }
570
+
571
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
572
+ position: relative;
573
+ width: 32px;
574
+ height: 16px;
575
+ }
576
+
577
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
578
+ opacity: 0;
579
+ width: 0;
580
+ height: 0;
581
+ }
582
+
583
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
584
+ position: absolute;
585
+ top: 0;
586
+ left: 0;
587
+ right: 0;
588
+ bottom: 0;
589
+ background-color: var(--toggle-switch-off-background-color);
590
+ -webkit-transition: 0.4s;
591
+ transition: 0.4s;
592
+ border-radius: 34px;
593
+ }
594
+
595
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
596
+ position: absolute;
597
+ content: "";
598
+ height: 12px;
599
+ width: 12px;
600
+ left: 2px;
601
+ bottom: 2px;
602
+ background-color: var(--toggle-switch-switcher-background-color);
603
+ -webkit-transition: 0.4s;
604
+ transition: 0.4s;
605
+ border-radius: 50%;
606
+ }
607
+
608
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
609
+ background-color: var(--toggle-switch-on-background-color);
610
+ box-shadow: 0 0 1px ;
611
+ }
612
+
613
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
614
+ -webkit-transform: translateX(16px);
615
+ -ms-transform: translateX(16px);
616
+ transform: translateX(16px);
617
+ }
618
+
619
+ /**
620
+ * Collapsible entries
621
+ */
622
+ .bio-properties-panel-collapsible-entry-entries {
623
+ position: relative;
624
+ display: none;
625
+ }
626
+
627
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
628
+ padding-bottom: 0;
629
+ }
630
+
631
+ .bio-properties-panel-collapsible-entry-entries.open {
632
+ display: block;
633
+ }
634
+
635
+ .bio-properties-panel-collapsible-entry-entries {
636
+ padding-left: 20px;
637
+ margin-bottom: 10px;
638
+ position: relative;
639
+ display: none;
640
+ }
641
+
642
+ .bio-properties-panel-collapsible-entry-header {
643
+ position: relative;
644
+ display: flex;
645
+ justify-content: space-between;
646
+ align-items: center;
647
+ overflow: hidden;
648
+ }
649
+
650
+ .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
651
+ padding: 2px 24px 2px 32px;
652
+ font-size: var(--text-size-base);
653
+ white-space: nowrap;
654
+ overflow: hidden;
655
+ text-overflow: ellipsis;
656
+ user-select: none;
657
+ }
658
+
659
+ .bio-properties-panel-collapsible-entry-arrow {
660
+ position: absolute;
661
+ top: 2px;
662
+ left: 6px;
663
+ padding: 0 3px;
664
+ height: 22px;
665
+ display: inline-flex;
666
+ justify-content: center;
667
+ align-items: center;
668
+ align-self: center;
669
+ }
670
+
671
+ .bio-properties-panel-remove-entry {
672
+ display: flex;
673
+ align-items: center;
674
+ justify-content: center;
675
+ margin-right: 5px;
676
+ padding: 0;
677
+ width: 22px;
678
+ height: 22px;
679
+ fill: var(--remove-entry-fill-color);
680
+ border-radius: 50%;
681
+ border: none;
682
+ background: none;
683
+ visibility: hidden;
684
+ }
685
+
686
+ .bio-properties-panel-remove-entry:hover {
687
+ background-color: var(--remove-entry-hover-background-color);
688
+ }
689
+
690
+ .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
691
+ .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
692
+ .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
693
+ {
694
+ visibility: visible;
695
+ }
696
+
697
+ /* Side line */
698
+ .bio-properties-panel-collapsible-entry-entries::before {
699
+ content: "";
700
+ position: absolute;
701
+ left: 16px;
702
+ width: 2px;
703
+ top: -6px;
704
+ bottom: 12px;
705
+ background-color: var(--side-line-background-color);
706
+ border-radius: 1px;
707
+ }
708
+
709
+ /* Side line extension for non-list entry or open list entry positioned as the last one. */
710
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
711
+ .bio-properties-panel-list-entry.open:last-child {
712
+ position: relative;
713
+ }
714
+
715
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
716
+ .bio-properties-panel-list-entry.open:last-child::after {
717
+ content: "";
718
+ position: absolute;
719
+ left: -16px;
720
+ width: 2px;
721
+ top: 0;
722
+ bottom: -4px;
723
+ background-color: var(--side-line-extension-background-color);
724
+ border-radius: 1px;
725
+ }
726
+
727
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
728
+ left: -18px;
729
+ }
730
+
731
+ /*
732
+ * List entry
733
+ */
734
+ .bio-properties-panel-list-entry {
735
+ position: relative;
736
+ margin-right: 5px;
737
+ margin-bottom: 0;
738
+ }
739
+
740
+ .bio-properties-panel-list-entry .bio-properties-panel-entry {
741
+ margin-right: 0;
742
+ }
743
+
744
+ .bio-properties-panel-list-entry-header {
745
+ position: relative;
746
+ overflow: hidden;
747
+ display: flex;
748
+ justify-content: space-between;
749
+ height: 32px;
750
+ }
751
+
752
+ /* Nested list dot */
753
+ .bio-properties-panel-list-entry::before {
754
+ content: "";
755
+ width: 8px;
756
+ height: 8px;
757
+ position: absolute;
758
+ left: -19px;
759
+ top: 13px;
760
+ border-radius: 50%;
761
+ background-color: var(--list-entry-dot-background-color);
762
+ }
763
+
764
+ .bio-properties-panel-list-entry-header-title {
765
+ display: block;
766
+ margin: auto 0;
767
+ padding: 2px 0;
768
+ font-size: var(--text-size-base);
769
+ white-space: nowrap;
770
+ overflow: hidden;
771
+ text-overflow: ellipsis;
772
+ }
773
+
774
+ .bio-properties-panel-list-entry-header-title.open {
775
+ font-weight: 500;
776
+ }
777
+
778
+ .bio-properties-panel-list-entry-header-buttons {
779
+ display: flex;
780
+ align-items: center;
781
+ }
782
+
783
+ .bio-properties-panel-list-entry-header-buttons > button {
784
+ display: inline-flex;
785
+ justify-content: center;
786
+ align-items: center;
787
+ align-self: center;
788
+ height: 22px;
789
+ line-height: 22px;
790
+ min-width: 22px;
791
+ margin: 5px;
792
+ padding: 0 3px;
793
+ border: none;
794
+ background: none;
795
+ fill: var(--list-entry-header-button-fill-color);
796
+ }
797
+
798
+ .bio-properties-panel-list-entry-header-buttons > :last-child {
799
+ margin-right: 0;
800
+ }
801
+
802
+ .bio-properties-panel-list-entry-items {
803
+ padding: 0;
804
+ margin: 0;
805
+
806
+ list-style: none;
807
+ }
808
+
809
+ .bio-properties-panel-list-entry-items:not(.open) {
810
+ display: none;
811
+ }
812
+
813
+ .bio-properties-panel-list-entry-item {
814
+ display: flex;
815
+ justify-content: space-between;
816
+ }
817
+
818
+ .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
819
+ margin-right: 1px;
820
+ }
821
+
822
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
823
+ width: 100%;
824
+ margin-right: 4px;
825
+ }
826
+
827
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
828
+ margin-left: -8px;
829
+ }
830
+
831
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
832
+ left: 2px;
833
+ }
834
+
835
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
836
+ padding-left: 30px;
837
+ }
838
+
839
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
840
+ padding-left: 10px;
841
+ }
842
+
843
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
844
+ left: 4px;
845
+ }
846
+
847
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
848
+ margin-right: 16px;
849
+ padding-left: 6px;
850
+ }
851
+
852
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
853
+ color: var(--list-entry-add-entry-label-color);
854
+ padding: 4px 6px 3px 2px;
855
+ }
856
+
857
+ .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
858
+ background-color: var(--list-entry-add-entry-background-color);
859
+ fill: var(--list-entry-add-entry-fill-color);
860
+ }
861
+
862
+ .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
863
+ border-radius: 0;
864
+ margin-bottom: -2px;
865
+ }
866
+
867
+ .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
868
+ border-top-left-radius: 2px;
869
+ border-top-right-radius: 2px;
870
+ }
871
+
872
+ .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
873
+ border-bottom-left-radius: 2px;
874
+ border-bottom-right-radius: 2px;
875
+ }
876
+
877
+ .bio-properties-panel-dropdown-button {
878
+ position: relative;
879
+
880
+ --dropdown-button-margin: 5px;
881
+ }
882
+
883
+ .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
884
+ display: none;
885
+ }
886
+
887
+ .bio-properties-panel-dropdown-button__menu {
888
+ min-width: calc(100% - var(--dropdown-button-margin) * 2);
889
+ max-width: 240px;
890
+
891
+ position: absolute;
892
+ top: calc(100% - var(--dropdown-button-margin));
893
+ right: var(--dropdown-button-margin);
894
+ z-index: 101;
895
+
896
+ background-color: var(--dropdown-item-background-color);
897
+
898
+ padding: 8px 0;
899
+
900
+ box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
901
+ }
902
+
903
+ .bio-properties-panel-dropdown-button__menu-item {
904
+ display: block;
905
+ width: 100%;
906
+ padding: 4px 12px;
907
+
908
+ font-size: var(--text-size-small);
909
+ appearance: revert;
910
+ border: unset;
911
+ background: unset;
912
+ text-align: unset;
913
+ }
914
+
915
+ .bio-properties-panel-dropdown-button__menu-item--separator {
916
+ width: 100%;
917
+ height: 1px;
918
+
919
+ padding: 0;
920
+ margin: 8px 0;
921
+
922
+ background-color: var(--dropdown-separator-background-color);
923
+ }
924
+
925
+ .bio-properties-panel-dropdown-button__menu-item--actionable {
926
+ font-size: var(--text-size-base);
927
+ }
928
+
929
+ .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
930
+ background-color: var(--dropdown-item-hover-background-color);
931
+ }
932
+
933
+ .bio-properties-panel-feel-input {
934
+ position: relative;
935
+ }
936
+
937
+ .bio-properties-panel-feel-input input {
938
+ padding-right: 2em
939
+ }
940
+
941
+ .bio-properties-panel-feel-icon {
942
+ display: inline-block;
943
+ height: 16px;
944
+ border-radius: 8px;
945
+ vertical-align: text-bottom;
946
+ padding: 0;
947
+ margin: 0 3px;
948
+ align-items: center;
949
+ align-self: center;
950
+ border: none;
951
+ background: none;
952
+ }
953
+
954
+ .bio-properties-panel-feel-icon.optional {
955
+ cursor: pointer;
956
+ }
957
+
958
+ .bio-properties-panel-feel-icon svg * {
959
+ color: var(--feel-inactive-color);
960
+ }
961
+
962
+ .bio-properties-panel-feel-icon.active svg * {
963
+ color: var(--feel-active-color);
964
+ }
965
+
966
+ .bio-properties-panel-feel-icon svg {
967
+ width: 16px;
968
+ height: 16px;
969
+ }
970
+
971
+ .bio-properties-panel-feel-editor-container {
972
+ position: relative;
973
+ }
974
+
975
+ .bio-properties-panel-feel-editor-container.active {
976
+ font-family: var(--font-family-monospace);
977
+ }
978
+
979
+ .bio-properties-panel-feel-container {
980
+ position: relative;
981
+ }
982
+
983
+ .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
984
+ position: static;
985
+ padding-left: 2.4em !important;
986
+ min-height: 28px;
987
+ }
988
+
989
+ .bio-properties-panel-feel-container .cm-scroller {
990
+ overflow: hidden !important;
991
+ }
992
+
993
+ .bio-properties-panel-feel-indicator {
994
+ position: absolute;
995
+ border: 1px solid var(--input-border-color);
996
+ background-color: var(--feel-indicator-background-color);
997
+ border-right: 0px;
998
+ border-radius: 2px 0 0 2px;
999
+ z-index: 1;
1000
+ height: 100%;
1001
+ width: 2em;
1002
+ text-align: center;
1003
+ padding: 2px 6px;
1004
+ }
1005
+
1006
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1007
+ resize: vertical;
1008
+ overflow: hidden;
1009
+ overflow-y: auto;
1010
+ }
1011
+
1012
+ .bio-properties-panel-feel-editor-container,
1013
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1014
+ .bio-properties-panel-feel-container .cm-editor {
1015
+ min-height: 100%;
1016
+ }