@bpmn-io/properties-panel 1.3.1 → 1.5.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 +1043 -1020
  4. package/dist/index.esm.js +602 -324
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +604 -324
  7. package/dist/index.js.map +1 -1
  8. package/package.json +90 -89
package/assets/properties-panel.css CHANGED
@@ -1,1020 +1,1043 @@
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
- textarea.bio-properties-panel-input.auto-resize {
459
- min-height: 28px;
460
- }
461
-
462
- .bio-properties-panel-input:focus,
463
- .bio-properties-panel-input:focus-within {
464
- outline: none;
465
- background-color: var(--input-focus-background-color);
466
- border: 1px solid var(--input-focus-border-color);
467
- }
468
-
469
- .bio-properties-panel-textfield:focus-within,
470
- .bio-properties-panel-feel-entry:focus-within {
471
- --input-background-color: var(--input-focus-background-color);
472
- --input-border-color: var(--input-focus-border-color);
473
- }
474
-
475
- .bio-properties-panel-input:disabled {
476
- border-color: var(--input-disabled-border-color);
477
- background-color: var(--input-disabled-background-color);
478
- color: var(--input-disabled-color);
479
- }
480
-
481
- select.bio-properties-panel-input {
482
- padding: 4px 6px;
483
- }
484
-
485
- .bio-properties-panel-input-monospace {
486
- font-family: var(--font-family-monospace);
487
- }
488
-
489
- .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
490
- margin: 0;
491
- vertical-align: middle;
492
- }
493
-
494
- .bio-properties-panel-input[type="checkbox"]:focus {
495
- outline: 1px solid var(--input-focus-border-color);
496
- outline-offset: 0;
497
- }
498
-
499
- .bio-properties-panel-checkbox > .bio-properties-panel-label {
500
- display: inline-block;
501
- font-size: var(--text-size-base);
502
- margin-left: 6px;
503
- margin-top: auto;
504
- vertical-align: middle;
505
- }
506
-
507
- .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
508
- margin-top: -8px;
509
- }
510
-
511
- .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
512
- margin-left: 18px;
513
- }
514
-
515
- textarea.bio-properties-panel-input {
516
- resize: vertical;
517
- }
518
-
519
- .bio-properties-panel-entry.has-error .bio-properties-panel-input {
520
- border-color: var(--input-error-border-color);
521
- background-color: var(--input-error-background-color);
522
- }
523
-
524
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
525
- border-color: var(--input-error-border-color);
526
- }
527
-
528
- .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
529
- .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
530
- border-color: var(--input-error-focus-border-color);
531
- }
532
-
533
- .bio-properties-panel-entry .bio-properties-panel-error {
534
- color: var(--text-error-color);
535
- margin: 4px 0;
536
- font-size: var(--text-size-small);
537
- }
538
-
539
- .bio-properties-panel-simple {
540
- width: 100%;
541
- margin-right: 8px;
542
- }
543
-
544
- .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
545
- margin: auto;
546
- }
547
-
548
- /**
549
- * Toggle Switch
550
- */
551
- .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
552
- margin-top: -8px;
553
- }
554
-
555
- .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
556
- margin-left: 38px;
557
- }
558
-
559
- .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
560
- display: flex;
561
- flex-direction: row;
562
- align-items: center;
563
- }
564
-
565
- .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
566
- font-size: var(--text-size-base);
567
- }
568
-
569
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
570
- margin: 0;
571
- margin-left: 6px;
572
- font-size: var(--text-size-base);
573
- }
574
-
575
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
576
- position: relative;
577
- width: 32px;
578
- height: 16px;
579
- }
580
-
581
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
582
- opacity: 0;
583
- width: 0;
584
- height: 0;
585
- }
586
-
587
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
588
- position: absolute;
589
- top: 0;
590
- left: 0;
591
- right: 0;
592
- bottom: 0;
593
- background-color: var(--toggle-switch-off-background-color);
594
- -webkit-transition: 0.4s;
595
- transition: 0.4s;
596
- border-radius: 34px;
597
- }
598
-
599
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
600
- position: absolute;
601
- content: "";
602
- height: 12px;
603
- width: 12px;
604
- left: 2px;
605
- bottom: 2px;
606
- background-color: var(--toggle-switch-switcher-background-color);
607
- -webkit-transition: 0.4s;
608
- transition: 0.4s;
609
- border-radius: 50%;
610
- }
611
-
612
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
613
- background-color: var(--toggle-switch-on-background-color);
614
- box-shadow: 0 0 1px ;
615
- }
616
-
617
- .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
618
- -webkit-transform: translateX(16px);
619
- -ms-transform: translateX(16px);
620
- transform: translateX(16px);
621
- }
622
-
623
- /**
624
- * Collapsible entries
625
- */
626
- .bio-properties-panel-collapsible-entry-entries {
627
- position: relative;
628
- display: none;
629
- }
630
-
631
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
632
- padding-bottom: 0;
633
- }
634
-
635
- .bio-properties-panel-collapsible-entry-entries.open {
636
- display: block;
637
- }
638
-
639
- .bio-properties-panel-collapsible-entry-entries {
640
- padding-left: 20px;
641
- margin-bottom: 10px;
642
- position: relative;
643
- display: none;
644
- }
645
-
646
- .bio-properties-panel-collapsible-entry-header {
647
- position: relative;
648
- display: flex;
649
- justify-content: space-between;
650
- align-items: center;
651
- overflow: hidden;
652
- }
653
-
654
- .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
655
- padding: 2px 24px 2px 32px;
656
- font-size: var(--text-size-base);
657
- white-space: nowrap;
658
- overflow: hidden;
659
- text-overflow: ellipsis;
660
- user-select: none;
661
- }
662
-
663
- .bio-properties-panel-collapsible-entry-arrow {
664
- position: absolute;
665
- top: 2px;
666
- left: 6px;
667
- padding: 0 3px;
668
- height: 22px;
669
- display: inline-flex;
670
- justify-content: center;
671
- align-items: center;
672
- align-self: center;
673
- }
674
-
675
- .bio-properties-panel-remove-entry {
676
- display: flex;
677
- align-items: center;
678
- justify-content: center;
679
- margin-right: 5px;
680
- padding: 0;
681
- width: 22px;
682
- height: 22px;
683
- fill: var(--remove-entry-fill-color);
684
- border-radius: 50%;
685
- border: none;
686
- background: none;
687
- visibility: hidden;
688
- }
689
-
690
- .bio-properties-panel-remove-entry:hover {
691
- background-color: var(--remove-entry-hover-background-color);
692
- }
693
-
694
- .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
695
- .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
696
- .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
697
- {
698
- visibility: visible;
699
- }
700
-
701
- /* Side line */
702
- .bio-properties-panel-collapsible-entry-entries::before {
703
- content: "";
704
- position: absolute;
705
- left: 16px;
706
- width: 2px;
707
- top: -6px;
708
- bottom: 12px;
709
- background-color: var(--side-line-background-color);
710
- border-radius: 1px;
711
- }
712
-
713
- /* Side line extension for non-list entry or open list entry positioned as the last one. */
714
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
715
- .bio-properties-panel-list-entry.open:last-child {
716
- position: relative;
717
- }
718
-
719
- .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
720
- .bio-properties-panel-list-entry.open:last-child::after {
721
- content: "";
722
- position: absolute;
723
- left: -16px;
724
- width: 2px;
725
- top: 0;
726
- bottom: -4px;
727
- background-color: var(--side-line-extension-background-color);
728
- border-radius: 1px;
729
- }
730
-
731
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
732
- left: -18px;
733
- }
734
-
735
- /*
736
- * List entry
737
- */
738
- .bio-properties-panel-list-entry {
739
- position: relative;
740
- margin-right: 5px;
741
- margin-bottom: 0;
742
- }
743
-
744
- .bio-properties-panel-list-entry .bio-properties-panel-entry {
745
- margin-right: 0;
746
- }
747
-
748
- .bio-properties-panel-list-entry-header {
749
- position: relative;
750
- overflow: hidden;
751
- display: flex;
752
- justify-content: space-between;
753
- height: 32px;
754
- }
755
-
756
- /* Nested list dot */
757
- .bio-properties-panel-list-entry::before {
758
- content: "";
759
- width: 8px;
760
- height: 8px;
761
- position: absolute;
762
- left: -19px;
763
- top: 13px;
764
- border-radius: 50%;
765
- background-color: var(--list-entry-dot-background-color);
766
- }
767
-
768
- .bio-properties-panel-list-entry-header-title {
769
- display: block;
770
- margin: auto 0;
771
- padding: 2px 0;
772
- font-size: var(--text-size-base);
773
- white-space: nowrap;
774
- overflow: hidden;
775
- text-overflow: ellipsis;
776
- }
777
-
778
- .bio-properties-panel-list-entry-header-title.open {
779
- font-weight: 500;
780
- }
781
-
782
- .bio-properties-panel-list-entry-header-buttons {
783
- display: flex;
784
- align-items: center;
785
- }
786
-
787
- .bio-properties-panel-list-entry-header-buttons > button {
788
- display: inline-flex;
789
- justify-content: center;
790
- align-items: center;
791
- align-self: center;
792
- height: 22px;
793
- line-height: 22px;
794
- min-width: 22px;
795
- margin: 5px;
796
- padding: 0 3px;
797
- border: none;
798
- background: none;
799
- fill: var(--list-entry-header-button-fill-color);
800
- }
801
-
802
- .bio-properties-panel-list-entry-header-buttons > :last-child {
803
- margin-right: 0;
804
- }
805
-
806
- .bio-properties-panel-list-entry-items {
807
- padding: 0;
808
- margin: 0;
809
-
810
- list-style: none;
811
- }
812
-
813
- .bio-properties-panel-list-entry-items:not(.open) {
814
- display: none;
815
- }
816
-
817
- .bio-properties-panel-list-entry-item {
818
- display: flex;
819
- justify-content: space-between;
820
- }
821
-
822
- .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
823
- margin-right: 1px;
824
- }
825
-
826
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
827
- width: 100%;
828
- margin-right: 4px;
829
- }
830
-
831
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
832
- margin-left: -8px;
833
- }
834
-
835
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
836
- left: 2px;
837
- }
838
-
839
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
840
- padding-left: 30px;
841
- }
842
-
843
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
844
- padding-left: 10px;
845
- }
846
-
847
- .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
848
- left: 4px;
849
- }
850
-
851
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
852
- margin-right: 16px;
853
- padding-left: 6px;
854
- }
855
-
856
- .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
857
- color: var(--list-entry-add-entry-label-color);
858
- padding: 4px 6px 3px 2px;
859
- }
860
-
861
- .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
862
- background-color: var(--list-entry-add-entry-background-color);
863
- fill: var(--list-entry-add-entry-fill-color);
864
- }
865
-
866
- .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
867
- border-radius: 0;
868
- margin-bottom: -2px;
869
- }
870
-
871
- .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
872
- border-top-left-radius: 2px;
873
- border-top-right-radius: 2px;
874
- }
875
-
876
- .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
877
- border-bottom-left-radius: 2px;
878
- border-bottom-right-radius: 2px;
879
- }
880
-
881
- .bio-properties-panel-dropdown-button {
882
- position: relative;
883
-
884
- --dropdown-button-margin: 5px;
885
- }
886
-
887
- .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
888
- display: none;
889
- }
890
-
891
- .bio-properties-panel-dropdown-button__menu {
892
- min-width: calc(100% - var(--dropdown-button-margin) * 2);
893
- max-width: 240px;
894
-
895
- position: absolute;
896
- top: calc(100% - var(--dropdown-button-margin));
897
- right: var(--dropdown-button-margin);
898
- z-index: 101;
899
-
900
- background-color: var(--dropdown-item-background-color);
901
-
902
- padding: 8px 0;
903
-
904
- box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
905
- }
906
-
907
- .bio-properties-panel-dropdown-button__menu-item {
908
- display: block;
909
- width: 100%;
910
- padding: 4px 12px;
911
-
912
- font-size: var(--text-size-small);
913
- appearance: revert;
914
- border: unset;
915
- background: unset;
916
- text-align: unset;
917
- }
918
-
919
- .bio-properties-panel-dropdown-button__menu-item--separator {
920
- width: 100%;
921
- height: 1px;
922
-
923
- padding: 0;
924
- margin: 8px 0;
925
-
926
- background-color: var(--dropdown-separator-background-color);
927
- }
928
-
929
- .bio-properties-panel-dropdown-button__menu-item--actionable {
930
- font-size: var(--text-size-base);
931
- }
932
-
933
- .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
934
- background-color: var(--dropdown-item-hover-background-color);
935
- }
936
-
937
- .bio-properties-panel-feel-input {
938
- position: relative;
939
- }
940
-
941
- .bio-properties-panel-feel-input input {
942
- padding-right: 2em
943
- }
944
-
945
- .bio-properties-panel-feel-icon {
946
- display: inline-block;
947
- height: 16px;
948
- border-radius: 8px;
949
- vertical-align: text-bottom;
950
- padding: 0;
951
- margin: 0 3px;
952
- align-items: center;
953
- align-self: center;
954
- border: none;
955
- background: none;
956
- }
957
-
958
- .bio-properties-panel-feel-icon.optional {
959
- cursor: pointer;
960
- }
961
-
962
- .bio-properties-panel-feel-icon svg * {
963
- color: var(--feel-inactive-color);
964
- }
965
-
966
- .bio-properties-panel-feel-icon.active svg * {
967
- color: var(--feel-active-color);
968
- }
969
-
970
- .bio-properties-panel-feel-icon svg {
971
- width: 16px;
972
- height: 16px;
973
- }
974
-
975
- .bio-properties-panel-feel-editor-container {
976
- position: relative;
977
- }
978
-
979
- .bio-properties-panel-feel-editor-container.active {
980
- font-family: var(--font-family-monospace);
981
- }
982
-
983
- .bio-properties-panel-feel-container {
984
- position: relative;
985
- }
986
-
987
- .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
988
- position: static;
989
- padding-left: 2.4em !important;
990
- min-height: 28px;
991
- }
992
-
993
- .bio-properties-panel-feel-container .cm-scroller {
994
- overflow: hidden !important;
995
- }
996
-
997
- .bio-properties-panel-feel-indicator {
998
- position: absolute;
999
- border: 1px solid var(--input-border-color);
1000
- background-color: var(--feel-indicator-background-color);
1001
- border-right: 0px;
1002
- border-radius: 2px 0 0 2px;
1003
- z-index: 1;
1004
- height: 100%;
1005
- width: 2em;
1006
- text-align: center;
1007
- padding: 2px 6px;
1008
- }
1009
-
1010
- .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1011
- resize: vertical;
1012
- overflow: hidden;
1013
- overflow-y: auto;
1014
- }
1015
-
1016
- .bio-properties-panel-feel-editor-container,
1017
- .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1018
- .bio-properties-panel-feel-container .cm-editor {
1019
- min-height: 100%;
1020
- }
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 pre code {
425
+ width: 100%;
426
+ display: block;
427
+ overflow-x: auto;
428
+ padding: 4px 6px;
429
+ font-family: var(--font-family-monospace);
430
+ }
431
+
432
+ .bio-properties-panel-description ul {
433
+ padding: 0;
434
+ margin: 0 0 0 12px;
435
+ list-style-type: disc;
436
+ }
437
+
438
+ .bio-properties-panel-description li {
439
+ color: var(--description-list-item-color);
440
+ margin: 0 0 0 12px;
441
+ }
442
+
443
+ .bio-properties-panel-description a {
444
+ color: var(--link-color);
445
+ font-size: var(--text-size-small);
446
+ text-decoration: underline;
447
+ }
448
+
449
+ .bio-properties-panel-feelers-editor.bio-properties-panel-input {
450
+ padding: 0;
451
+ }
452
+
453
+ .bio-properties-panel-feelers-input .cm-editor
454
+ {
455
+ min-height: 32px;
456
+ max-height: 215px;
457
+ background-color: transparent;
458
+ }
459
+
460
+ .bio-properties-panel-feelers-input .cm-editor.cm-focused {
461
+ outline: none;
462
+ }
463
+
464
+ .bio-properties-panel-input {
465
+ padding: 3px 6px 2px;
466
+ border: 1px solid var(--input-border-color);
467
+ border-radius: 2px;
468
+ background-color: var(--input-background-color);
469
+ font-size: var(--text-size-base);
470
+ font-family: inherit;
471
+ }
472
+
473
+ .bio-properties-panel-input[type=number],
474
+ select.bio-properties-panel-input,
475
+ textarea.bio-properties-panel-input,
476
+ .bio-properties-panel-input[type=text] {
477
+ display: block;
478
+ width: 100%;
479
+ }
480
+
481
+ textarea.bio-properties-panel-input {
482
+ min-height: 28px;
483
+ }
484
+
485
+ .bio-properties-panel-input:focus,
486
+ .bio-properties-panel-input:focus-within {
487
+ outline: none;
488
+ background-color: var(--input-focus-background-color);
489
+ border: 1px solid var(--input-focus-border-color);
490
+ }
491
+
492
+ .bio-properties-panel-textfield:focus-within,
493
+ .bio-properties-panel-feel-entry:focus-within {
494
+ --input-background-color: var(--input-focus-background-color);
495
+ --input-border-color: var(--input-focus-border-color);
496
+ }
497
+
498
+ .bio-properties-panel-input:disabled {
499
+ border-color: var(--input-disabled-border-color);
500
+ background-color: var(--input-disabled-background-color);
501
+ color: var(--input-disabled-color);
502
+ }
503
+
504
+ select.bio-properties-panel-input {
505
+ padding: 4px 6px;
506
+ }
507
+
508
+ .bio-properties-panel-input-monospace {
509
+ font-family: var(--font-family-monospace);
510
+ }
511
+
512
+ .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
513
+ margin: 0;
514
+ vertical-align: middle;
515
+ }
516
+
517
+ .bio-properties-panel-input[type="checkbox"]:focus {
518
+ outline: 1px solid var(--input-focus-border-color);
519
+ outline-offset: 0;
520
+ }
521
+
522
+ .bio-properties-panel-checkbox > .bio-properties-panel-label {
523
+ display: inline-block;
524
+ font-size: var(--text-size-base);
525
+ margin-left: 6px;
526
+ margin-top: auto;
527
+ vertical-align: middle;
528
+ }
529
+
530
+ .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
531
+ margin-top: -8px;
532
+ }
533
+
534
+ .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
535
+ margin-left: 18px;
536
+ }
537
+
538
+ textarea.bio-properties-panel-input {
539
+ resize: vertical;
540
+ }
541
+
542
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input {
543
+ border-color: var(--input-error-border-color);
544
+ background-color: var(--input-error-background-color);
545
+ }
546
+
547
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
548
+ border-color: var(--input-error-border-color);
549
+ }
550
+
551
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
552
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
553
+ border-color: var(--input-error-focus-border-color);
554
+ }
555
+
556
+ .bio-properties-panel-entry .bio-properties-panel-error {
557
+ color: var(--text-error-color);
558
+ margin: 4px 0;
559
+ font-size: var(--text-size-small);
560
+ }
561
+
562
+ .bio-properties-panel-simple {
563
+ width: 100%;
564
+ margin-right: 8px;
565
+ }
566
+
567
+ .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
568
+ margin: auto;
569
+ }
570
+
571
+ /**
572
+ * Toggle Switch
573
+ */
574
+ .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
575
+ margin-top: -8px;
576
+ }
577
+
578
+ .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
579
+ margin-left: 38px;
580
+ }
581
+
582
+ .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
583
+ display: flex;
584
+ flex-direction: row;
585
+ align-items: center;
586
+ }
587
+
588
+ .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
589
+ font-size: var(--text-size-base);
590
+ }
591
+
592
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
593
+ margin: 0;
594
+ margin-left: 6px;
595
+ font-size: var(--text-size-base);
596
+ }
597
+
598
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
599
+ position: relative;
600
+ width: 32px;
601
+ height: 16px;
602
+ }
603
+
604
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
605
+ opacity: 0;
606
+ width: 0;
607
+ height: 0;
608
+ }
609
+
610
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
611
+ position: absolute;
612
+ top: 0;
613
+ left: 0;
614
+ right: 0;
615
+ bottom: 0;
616
+ background-color: var(--toggle-switch-off-background-color);
617
+ -webkit-transition: 0.4s;
618
+ transition: 0.4s;
619
+ border-radius: 34px;
620
+ }
621
+
622
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
623
+ position: absolute;
624
+ content: "";
625
+ height: 12px;
626
+ width: 12px;
627
+ left: 2px;
628
+ bottom: 2px;
629
+ background-color: var(--toggle-switch-switcher-background-color);
630
+ -webkit-transition: 0.4s;
631
+ transition: 0.4s;
632
+ border-radius: 50%;
633
+ }
634
+
635
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
636
+ background-color: var(--toggle-switch-on-background-color);
637
+ box-shadow: 0 0 1px ;
638
+ }
639
+
640
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
641
+ -webkit-transform: translateX(16px);
642
+ -ms-transform: translateX(16px);
643
+ transform: translateX(16px);
644
+ }
645
+
646
+ /**
647
+ * Collapsible entries
648
+ */
649
+ .bio-properties-panel-collapsible-entry-entries {
650
+ position: relative;
651
+ display: none;
652
+ }
653
+
654
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
655
+ padding-bottom: 0;
656
+ }
657
+
658
+ .bio-properties-panel-collapsible-entry-entries.open {
659
+ display: block;
660
+ }
661
+
662
+ .bio-properties-panel-collapsible-entry-entries {
663
+ padding-left: 20px;
664
+ margin-bottom: 10px;
665
+ position: relative;
666
+ display: none;
667
+ }
668
+
669
+ .bio-properties-panel-collapsible-entry-header {
670
+ position: relative;
671
+ display: flex;
672
+ justify-content: space-between;
673
+ align-items: center;
674
+ overflow: hidden;
675
+ }
676
+
677
+ .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
678
+ padding: 2px 24px 2px 32px;
679
+ font-size: var(--text-size-base);
680
+ white-space: nowrap;
681
+ overflow: hidden;
682
+ text-overflow: ellipsis;
683
+ user-select: none;
684
+ }
685
+
686
+ .bio-properties-panel-collapsible-entry-arrow {
687
+ position: absolute;
688
+ top: 2px;
689
+ left: 6px;
690
+ padding: 0 3px;
691
+ height: 22px;
692
+ display: inline-flex;
693
+ justify-content: center;
694
+ align-items: center;
695
+ align-self: center;
696
+ }
697
+
698
+ .bio-properties-panel-remove-entry {
699
+ display: flex;
700
+ align-items: center;
701
+ justify-content: center;
702
+ margin-right: 5px;
703
+ padding: 0;
704
+ width: 22px;
705
+ height: 22px;
706
+ fill: var(--remove-entry-fill-color);
707
+ border-radius: 50%;
708
+ border: none;
709
+ background: none;
710
+ visibility: hidden;
711
+ }
712
+
713
+ .bio-properties-panel-remove-entry:hover {
714
+ background-color: var(--remove-entry-hover-background-color);
715
+ }
716
+
717
+ .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
718
+ .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
719
+ .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
720
+ {
721
+ visibility: visible;
722
+ }
723
+
724
+ /* Side line */
725
+ .bio-properties-panel-collapsible-entry-entries::before {
726
+ content: "";
727
+ position: absolute;
728
+ left: 16px;
729
+ width: 2px;
730
+ top: -6px;
731
+ bottom: 12px;
732
+ background-color: var(--side-line-background-color);
733
+ border-radius: 1px;
734
+ }
735
+
736
+ /* Side line extension for non-list entry or open list entry positioned as the last one. */
737
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
738
+ .bio-properties-panel-list-entry.open:last-child {
739
+ position: relative;
740
+ }
741
+
742
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
743
+ .bio-properties-panel-list-entry.open:last-child::after {
744
+ content: "";
745
+ position: absolute;
746
+ left: -16px;
747
+ width: 2px;
748
+ top: 0;
749
+ bottom: -4px;
750
+ background-color: var(--side-line-extension-background-color);
751
+ border-radius: 1px;
752
+ }
753
+
754
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
755
+ left: -18px;
756
+ }
757
+
758
+ /*
759
+ * List entry
760
+ */
761
+ .bio-properties-panel-list-entry {
762
+ position: relative;
763
+ margin-right: 5px;
764
+ margin-bottom: 0;
765
+ }
766
+
767
+ .bio-properties-panel-list-entry .bio-properties-panel-entry {
768
+ margin-right: 0;
769
+ }
770
+
771
+ .bio-properties-panel-list-entry-header {
772
+ position: relative;
773
+ overflow: hidden;
774
+ display: flex;
775
+ justify-content: space-between;
776
+ height: 32px;
777
+ }
778
+
779
+ /* Nested list dot */
780
+ .bio-properties-panel-list-entry::before {
781
+ content: "";
782
+ width: 8px;
783
+ height: 8px;
784
+ position: absolute;
785
+ left: -19px;
786
+ top: 13px;
787
+ border-radius: 50%;
788
+ background-color: var(--list-entry-dot-background-color);
789
+ }
790
+
791
+ .bio-properties-panel-list-entry-header-title {
792
+ display: block;
793
+ margin: auto 0;
794
+ padding: 2px 0;
795
+ font-size: var(--text-size-base);
796
+ white-space: nowrap;
797
+ overflow: hidden;
798
+ text-overflow: ellipsis;
799
+ }
800
+
801
+ .bio-properties-panel-list-entry-header-title.open {
802
+ font-weight: 500;
803
+ }
804
+
805
+ .bio-properties-panel-list-entry-header-buttons {
806
+ display: flex;
807
+ align-items: center;
808
+ }
809
+
810
+ .bio-properties-panel-list-entry-header-buttons > button {
811
+ display: inline-flex;
812
+ justify-content: center;
813
+ align-items: center;
814
+ align-self: center;
815
+ height: 22px;
816
+ line-height: 22px;
817
+ min-width: 22px;
818
+ margin: 5px;
819
+ padding: 0 3px;
820
+ border: none;
821
+ background: none;
822
+ fill: var(--list-entry-header-button-fill-color);
823
+ }
824
+
825
+ .bio-properties-panel-list-entry-header-buttons > :last-child {
826
+ margin-right: 0;
827
+ }
828
+
829
+ .bio-properties-panel-list-entry-items {
830
+ padding: 0;
831
+ margin: 0;
832
+
833
+ list-style: none;
834
+ }
835
+
836
+ .bio-properties-panel-list-entry-items:not(.open) {
837
+ display: none;
838
+ }
839
+
840
+ .bio-properties-panel-list-entry-item {
841
+ display: flex;
842
+ justify-content: space-between;
843
+ }
844
+
845
+ .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
846
+ margin-right: 1px;
847
+ }
848
+
849
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
850
+ width: 100%;
851
+ margin-right: 4px;
852
+ }
853
+
854
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
855
+ margin-left: -8px;
856
+ }
857
+
858
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
859
+ left: 2px;
860
+ }
861
+
862
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
863
+ padding-left: 30px;
864
+ }
865
+
866
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
867
+ padding-left: 10px;
868
+ }
869
+
870
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
871
+ left: 4px;
872
+ }
873
+
874
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
875
+ margin-right: 16px;
876
+ padding-left: 6px;
877
+ }
878
+
879
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
880
+ color: var(--list-entry-add-entry-label-color);
881
+ padding: 4px 6px 3px 2px;
882
+ }
883
+
884
+ .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
885
+ background-color: var(--list-entry-add-entry-background-color);
886
+ fill: var(--list-entry-add-entry-fill-color);
887
+ }
888
+
889
+ .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
890
+ border-radius: 0;
891
+ margin-bottom: -2px;
892
+ }
893
+
894
+ .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
895
+ border-top-left-radius: 2px;
896
+ border-top-right-radius: 2px;
897
+ }
898
+
899
+ .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
900
+ border-bottom-left-radius: 2px;
901
+ border-bottom-right-radius: 2px;
902
+ }
903
+
904
+ .bio-properties-panel-dropdown-button {
905
+ position: relative;
906
+
907
+ --dropdown-button-margin: 5px;
908
+ }
909
+
910
+ .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
911
+ display: none;
912
+ }
913
+
914
+ .bio-properties-panel-dropdown-button__menu {
915
+ min-width: calc(100% - var(--dropdown-button-margin) * 2);
916
+ max-width: 240px;
917
+
918
+ position: absolute;
919
+ top: calc(100% - var(--dropdown-button-margin));
920
+ right: var(--dropdown-button-margin);
921
+ z-index: 101;
922
+
923
+ background-color: var(--dropdown-item-background-color);
924
+
925
+ padding: 8px 0;
926
+
927
+ box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
928
+ }
929
+
930
+ .bio-properties-panel-dropdown-button__menu-item {
931
+ display: block;
932
+ width: 100%;
933
+ padding: 4px 12px;
934
+
935
+ font-size: var(--text-size-small);
936
+ appearance: revert;
937
+ border: unset;
938
+ background: unset;
939
+ text-align: unset;
940
+ }
941
+
942
+ .bio-properties-panel-dropdown-button__menu-item--separator {
943
+ width: 100%;
944
+ height: 1px;
945
+
946
+ padding: 0;
947
+ margin: 8px 0;
948
+
949
+ background-color: var(--dropdown-separator-background-color);
950
+ }
951
+
952
+ .bio-properties-panel-dropdown-button__menu-item--actionable {
953
+ font-size: var(--text-size-base);
954
+ }
955
+
956
+ .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
957
+ background-color: var(--dropdown-item-hover-background-color);
958
+ }
959
+
960
+ .bio-properties-panel-feel-input {
961
+ position: relative;
962
+ }
963
+
964
+ .bio-properties-panel-feel-input input {
965
+ padding-right: 2em
966
+ }
967
+
968
+ .bio-properties-panel-feel-icon {
969
+ display: inline-block;
970
+ height: 16px;
971
+ border-radius: 8px;
972
+ vertical-align: text-bottom;
973
+ padding: 0;
974
+ margin: 0 3px;
975
+ align-items: center;
976
+ align-self: center;
977
+ border: none;
978
+ background: none;
979
+ }
980
+
981
+ .bio-properties-panel-feel-icon.optional {
982
+ cursor: pointer;
983
+ }
984
+
985
+ .bio-properties-panel-feel-icon svg * {
986
+ color: var(--feel-inactive-color);
987
+ }
988
+
989
+ .bio-properties-panel-feel-icon.active svg * {
990
+ color: var(--feel-active-color);
991
+ }
992
+
993
+ .bio-properties-panel-feel-icon svg {
994
+ width: 16px;
995
+ height: 16px;
996
+ }
997
+
998
+ .bio-properties-panel-feel-editor-container {
999
+ position: relative;
1000
+ }
1001
+
1002
+ .bio-properties-panel-feel-editor-container.active {
1003
+ font-family: var(--font-family-monospace);
1004
+ }
1005
+
1006
+ .bio-properties-panel-feel-container {
1007
+ position: relative;
1008
+ }
1009
+
1010
+ .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
1011
+ position: static;
1012
+ padding-left: 2.4em !important;
1013
+ min-height: 28px;
1014
+ }
1015
+
1016
+ .bio-properties-panel-feel-container .cm-scroller {
1017
+ overflow: hidden !important;
1018
+ }
1019
+
1020
+ .bio-properties-panel-feel-indicator {
1021
+ position: absolute;
1022
+ border: 1px solid var(--input-border-color);
1023
+ background-color: var(--feel-indicator-background-color);
1024
+ border-right: 0px;
1025
+ border-radius: 2px 0 0 2px;
1026
+ z-index: 1;
1027
+ height: 100%;
1028
+ width: 2em;
1029
+ text-align: center;
1030
+ padding: 2px 6px;
1031
+ }
1032
+
1033
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1034
+ resize: vertical;
1035
+ overflow: hidden;
1036
+ overflow-y: auto;
1037
+ }
1038
+
1039
+ .bio-properties-panel-feel-editor-container,
1040
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1041
+ .bio-properties-panel-feel-container .cm-editor {
1042
+ min-height: 100%;
1043
+ }