@bpmn-io/properties-panel 0.10.1 → 0.10.2

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