@bpmn-io/properties-panel 3.3.2 → 3.4.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 (3) hide show
  1. package/assets/properties-panel.css +2 -1433
  2. package/dist/assets/properties-panel.css +1435 -0
  3. package/package.json +1 -1
package/dist/assets/properties-panel.css ADDED
@@ -0,0 +1,1435 @@
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
+ --color-grey-0-0-22: hsl(0, 0%, 22%);
15
+
16
+ --color-blue-205-100-35: hsl(205, 100%, 35%);
17
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
18
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
19
+ --color-blue-205-100-85: hsl(205, 100%, 85%);
20
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
21
+ --color-blue-219-99-53: hsl(219, 99%, 53%);
22
+ --color-blue-218-100-74: hsl(218, 100%, 74%);
23
+ --color-green-150-86-44: hsl(150, 86%, 44%);
24
+
25
+ --color-red-360-100-40: hsl(360, 100%, 40%);
26
+ --color-red-360-100-45: hsl(360, 100%, 45%);
27
+ --color-red-360-100-92: hsl(360, 100%, 92%);
28
+ --color-red-360-100-97: hsl(360, 100%, 97%);
29
+
30
+ --color-white: white;
31
+ --color-black: black;
32
+ --color-transparent: transparent;
33
+
34
+ --text-base-color: var(--color-grey-225-10-15);
35
+ --text-error-color: var(--color-red-360-100-45);
36
+ --link-color: var(--color-blue-205-100-50);
37
+
38
+ --description-color: var(--color-grey-225-10-35);
39
+ --description-code-background-color: var(--color-grey-225-10-97);
40
+ --description-code-border-color: var(--color-grey-225-10-85);
41
+ --description-list-item-color: var(--color-grey-225-10-35);
42
+
43
+ --placeholder-color: var(--color-grey-225-10-35);
44
+ --placeholder-background-color: var(--color-grey-225-10-95);
45
+
46
+ --header-background-color: var(--color-grey-225-10-95);
47
+ --header-icon-fill-color: var(--color-grey-225-10-15);
48
+ --header-bottom-border-color: var(--color-grey-225-10-75);
49
+
50
+ --group-background-color: var(--color-white);
51
+ --group-bottom-border-color: var(--color-grey-225-10-75);
52
+
53
+ --sticky-group-background-color: var(--color-grey-225-10-95);
54
+ --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
55
+
56
+ --add-entry-fill-color: var(--color-grey-225-10-35);
57
+ --add-entry-hover-fill-color: var(--color-white);
58
+ --add-entry-hover-background-color: var(--color-blue-205-100-50);
59
+ --add-entry-label-color: var(--color-white);
60
+
61
+ --remove-entry-fill-color: var(--color-red-360-100-45);
62
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
63
+
64
+ --arrow-fill-color: var(--color-grey-225-10-35);
65
+ --arrow-hover-background-color: var(--color-grey-225-10-95);
66
+
67
+ --dot-color: var(--color-grey-225-10-35);
68
+ --dot-color-error: var(--color-red-360-100-45);
69
+
70
+ --list-badge-color: var(--color-white);
71
+ --list-badge-background-color: var(--color-grey-225-10-35);
72
+
73
+ --input-background-color: var(--color-grey-225-10-97);
74
+ --input-border-color: var(--color-grey-225-10-75);
75
+
76
+ --input-focus-background-color: var(--color-blue-205-100-95);
77
+ --input-focus-border-color: var(--color-blue-205-100-50);
78
+
79
+ --input-error-background-color: var(--color-red-360-100-97);
80
+ --input-error-border-color: var(--color-red-360-100-45);
81
+ --input-error-focus-border-color: var(--color-red-360-100-45);
82
+
83
+ --input-disabled-color: var(--color-grey-225-10-55);
84
+ --input-disabled-background-color: var(--color-grey-225-10-97);
85
+ --input-disabled-border-color: var(--color-grey-225-10-90);
86
+
87
+ --toggle-switch-on-background-color: var(--color-blue-205-100-50);
88
+ --toggle-switch-off-background-color: var(--color-grey-225-10-75);
89
+ --toggle-switch-switcher-background-color: var(--color-white);
90
+
91
+ --side-line-background-color: var(--color-grey-225-10-35);
92
+ --side-line-extension-background-color: var(--color-grey-225-10-35);
93
+
94
+ --list-entry-dot-background-color: var(--color-grey-225-10-35);
95
+ --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
96
+ --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
97
+ --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
98
+ --list-entry-add-entry-label-color: var(--color-white);
99
+ --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
100
+ --list-entry-add-entry-fill-color: var(--color-white);
101
+
102
+ --dropdown-item-background-color: var(--color-white);
103
+ --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
104
+ --dropdown-separator-background-color: var(--color-grey-225-10-75);
105
+
106
+ --feel-background-color: transparent;
107
+ --feel-active-color: var(--color-blue-205-100-45);
108
+ --feel-inactive-color: var(--color-grey-225-10-35);
109
+ --feel-hover-color: var(--color-grey-225-10-15);
110
+ --feel-hover-background-color: var(--color-grey-225-10-97);
111
+ --feel-active-background-color: transparent;
112
+ --feel-required-color: var(--color-grey-225-10-55);
113
+ --feel-open-popup-color: hsla(0, 0%, 32%, 1);
114
+ --feel-open-popup-background-color: var(--color-white);
115
+ --feel-open-popup-hover-color: hsla(219, 99%, 53%, 1);
116
+
117
+ --feel-indicator-background-color: var(--color-grey-225-10-90);
118
+
119
+ --feelers-select-color: var(--color-blue-205-100-85);
120
+
121
+ --tooltip-underline-color: var(--color-blue-219-99-53);
122
+ --tooltip-background-color: var(--color-grey-0-0-22);
123
+ --tooltip-link: var(--color-blue-218-100-74);
124
+ --tooltip-code-background-color: var(--color-grey-225-10-97);
125
+ --tooltip-code-border-color: var(--color-grey-225-10-85);
126
+
127
+ --text-size-base: 14px;
128
+ --text-size-small: 13px;
129
+ --text-size-smallest: 12px;
130
+ --text-line-height: 21px;
131
+ --line-height-condensed: 17px;
132
+
133
+ --font-family: sans-serif;
134
+ --font-family-monospace: monospace;
135
+
136
+ display: flex;
137
+ flex-direction: column;
138
+ flex: 1;
139
+ position: relative;
140
+ height: 100%;
141
+ width: 100%;
142
+ overflow: hidden;
143
+ }
144
+
145
+ .bio-properties-panel {
146
+ color: var(--text-base-color);
147
+ }
148
+
149
+ .bio-properties-panel * {
150
+ font-size: var(--text-size-base);
151
+ line-height: var(--text-line-height);
152
+ font-weight: 400;
153
+ box-sizing: border-box;
154
+ }
155
+
156
+ .bio-properties-panel {
157
+ font-family: var(--font-family);
158
+ }
159
+
160
+ /**
161
+ * Placeholder (empty, multi select, ...)
162
+ */
163
+ .bio-properties-panel-placeholder {
164
+ position: absolute;
165
+ display: flex;
166
+ flex-direction: column;
167
+ justify-content: center;
168
+ align-items: center;
169
+ top: 0;
170
+ right: 0;
171
+ bottom: 0;
172
+ left: 0;
173
+ background-color: var(--placeholder-background-color);
174
+ }
175
+
176
+ .bio-properties-panel-placeholder-text {
177
+ color: var(--placeholder-color);
178
+ font-size: var(--text-size-base);
179
+ text-align: center;
180
+ margin: 12px 48px;
181
+ }
182
+
183
+ /**
184
+ * Header
185
+ */
186
+ .bio-properties-panel-header {
187
+ display: flex;
188
+ flex-direction: row;
189
+ align-items: center;
190
+ font-size: var(--text-size-base);
191
+ padding: 16px 10px;
192
+ background-color: var(--header-background-color);
193
+ border-bottom: 1px solid var(--header-bottom-border-color);
194
+ width: 100%;
195
+ z-index: 10;
196
+ max-height: 64px;
197
+ overflow: hidden;
198
+ }
199
+
200
+ .bio-properties-panel-header-icon {
201
+ fill: var(--header-icon-fill-color);
202
+ display: flex;
203
+ flex-direction: row;
204
+ align-items: center;
205
+ justify-content: center;
206
+ width: 32px;
207
+ height: 32px;
208
+ }
209
+
210
+ .bio-properties-panel-header-labels {
211
+ overflow: hidden;
212
+ margin-left: 12px;
213
+ user-select: none;
214
+ }
215
+
216
+ .bio-properties-panel-header-type {
217
+ font-size: var(--text-size-smallest);
218
+ font-weight: 600;
219
+ white-space: nowrap;
220
+ text-overflow: ellipsis;
221
+ overflow: hidden;
222
+ text-transform: uppercase;
223
+ }
224
+
225
+ .bio-properties-panel-header-label {
226
+ white-space: nowrap;
227
+ text-overflow: ellipsis;
228
+ overflow: hidden;
229
+ margin-top: -6px;
230
+ }
231
+
232
+ .bio-properties-panel-header-actions {
233
+ margin-left: auto;
234
+ margin-top: auto;
235
+ }
236
+
237
+ /**
238
+ * Scroll container
239
+ */
240
+ .bio-properties-panel-scroll-container {
241
+ overflow-y: auto;
242
+ overflow-x: hidden;
243
+ flex: 1;
244
+ }
245
+
246
+ /**
247
+ * Groups
248
+ */
249
+ .bio-properties-panel-group {
250
+ background-color: var(--group-background-color);
251
+ border-bottom: 1px solid var(--group-bottom-border-color);
252
+ position: relative;
253
+ }
254
+
255
+ .bio-properties-panel-group-header {
256
+ display: flex;
257
+ flex-direction: row;
258
+ align-items: center;
259
+ font-size: var(--text-size-base);
260
+ height: 32px;
261
+ user-select: none;
262
+ justify-content: space-between;
263
+ margin-bottom: -1px; /* avoid double borders */
264
+ position: relative; /* browsers not supporting sticky */
265
+ position: -webkit-sticky; /* for safari */
266
+ position: sticky;
267
+ top: 0;
268
+ z-index: 10;
269
+ }
270
+
271
+ .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
272
+ white-space: nowrap;
273
+ overflow: hidden;
274
+ text-overflow: ellipsis;
275
+ margin: 1px 12px 0;
276
+ }
277
+
278
+ .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
279
+ font-weight: 500;
280
+ }
281
+
282
+ .bio-properties-panel-group-header.sticky {
283
+ background-color: var(--sticky-group-background-color);
284
+ border-bottom: 1px solid var(--sticky-group-bottom-border-color);
285
+ }
286
+
287
+ .bio-properties-panel-group-header-buttons {
288
+ display: flex;
289
+ }
290
+
291
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
292
+ display: inline-flex;
293
+ justify-content: center;
294
+ align-items: center;
295
+ align-self: center;
296
+ height: 22px;
297
+ line-height: 22px;
298
+ min-width: 22px;
299
+ margin: 5px;
300
+ padding: 0 3px;
301
+ border: none;
302
+ background: none;
303
+ }
304
+
305
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
306
+ margin-right: 0;
307
+ }
308
+
309
+ .bio-properties-panel-add-entry {
310
+ fill: var(--add-entry-fill-color);
311
+ border-radius: 11px;
312
+ }
313
+
314
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
315
+ margin-right: 69px;
316
+ }
317
+
318
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
319
+ margin-right: 19px;
320
+ }
321
+
322
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
323
+ display: none;
324
+ color: var(--add-entry-label-color);
325
+ padding: 0 6px 0 2px;
326
+ }
327
+
328
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
329
+ background-color: var(--add-entry-hover-background-color);
330
+ fill: var(--add-entry-hover-fill-color);
331
+ }
332
+
333
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
334
+ display: block;
335
+ }
336
+
337
+ .bio-properties-panel-group-entries {
338
+ display: none;
339
+ }
340
+
341
+ .bio-properties-panel-group-entries.open {
342
+ display: block;
343
+ }
344
+
345
+ .bio-properties-panel-arrow {
346
+ display: flex;
347
+ justify-content: center;
348
+ text-align: center;
349
+ fill: var(--arrow-fill-color);
350
+ min-width: 22px;
351
+ border-radius: 11px;
352
+ border: none;
353
+ background: none;
354
+ }
355
+
356
+ .bio-properties-panel-arrow:hover {
357
+ background-color: var(--arrow-hover-background-color);
358
+ }
359
+
360
+ .bio-properties-panel-arrow-down {
361
+ transform: rotate(90deg);
362
+ }
363
+
364
+ .bio-properties-panel-dot {
365
+ align-self: center;
366
+ height: 8px;
367
+ min-width: 8px;
368
+ border-radius: 50%;
369
+ margin: 12px;
370
+ background-color: var(--dot-color);
371
+ }
372
+
373
+ .bio-properties-panel-dot--error {
374
+ --dot-color: var(--dot-color-error);
375
+ }
376
+
377
+ /**
378
+ * Lists
379
+ */
380
+ .bio-properties-panel-list {
381
+ display: none;
382
+ }
383
+
384
+ .bio-properties-panel-list.open {
385
+ display: block;
386
+ margin-bottom: 6px;
387
+ padding-bottom: 2px;
388
+ }
389
+
390
+ .bio-properties-panel-list-badge {
391
+ height: 22px;
392
+ min-width: 22px;
393
+ color: var(--list-badge-color);
394
+ border-radius: 11px;
395
+ font-size: var(--text-size-small);
396
+ line-height: 22px;
397
+ text-align: center;
398
+ user-select: none;
399
+ padding: 0 5px;
400
+ margin: 5px;
401
+ background-color: var(--list-badge-background-color);
402
+ }
403
+
404
+ .bio-properties-panel-list-badge--error {
405
+ --list-badge-background-color: var(--dot-color-error);
406
+ }
407
+
408
+ /**
409
+ * Basic entries
410
+ */
411
+ .bio-properties-panel-entry {
412
+ margin: 2px 32px 6px 12px;
413
+ }
414
+
415
+ .bio-properties-panel-entry:last-child {
416
+ padding-bottom: 10px;
417
+ }
418
+
419
+ .bio-properties-panel-label {
420
+ display: block;
421
+ font-size: var(--text-size-small);
422
+ margin: 2px 0 1px;
423
+ }
424
+
425
+ .bio-properties-panel-description,
426
+ .bio-properties-panel-description p,
427
+ .bio-properties-panel-description span,
428
+ .bio-properties-panel-description div {
429
+ color: var(--description-color);
430
+ display: block;
431
+ margin: 2px 0 4px;
432
+ line-height: var(--line-height-condensed);
433
+ font-weight: 400;
434
+ font-size: var(--text-size-small);
435
+ }
436
+
437
+ .bio-properties-panel-description code {
438
+ color: var(--description-color);
439
+ font-family: var(--font-family);
440
+ font-size: var(--text-size-small);
441
+ line-height: var(--line-height-condensed);
442
+ padding: 0 2px;
443
+ background-color: var(--description-code-background-color);
444
+ border: 1px solid var(--description-code-border-color);
445
+ border-radius: 3px;
446
+ }
447
+
448
+ .bio-properties-panel-description pre code {
449
+ width: 100%;
450
+ display: block;
451
+ overflow-x: auto;
452
+ padding: 4px 6px;
453
+ font-family: var(--font-family-monospace);
454
+ }
455
+
456
+ .bio-properties-panel-description ul {
457
+ padding: 0;
458
+ margin: 0 0 0 12px;
459
+ list-style-type: disc;
460
+ }
461
+
462
+ .bio-properties-panel-description li {
463
+ color: var(--description-list-item-color);
464
+ margin: 0 0 0 12px;
465
+ }
466
+
467
+ .bio-properties-panel-description a {
468
+ color: var(--link-color);
469
+ font-size: var(--text-size-small);
470
+ text-decoration: underline;
471
+ }
472
+
473
+ .bio-properties-panel-feelers-editor.bio-properties-panel-input {
474
+ padding: 0;
475
+ }
476
+
477
+ .bio-properties-panel-feelers-input .cm-editor
478
+ {
479
+ min-height: 32px;
480
+ max-height: 215px;
481
+ background-color: transparent;
482
+ }
483
+
484
+ .bio-properties-panel-feelers-editor .cm-editor.cm-focused,
485
+ .bio-properties-panel-feelers-input .cm-editor.cm-focused {
486
+ outline: none;
487
+ }
488
+
489
+ .bio-properties-panel-input {
490
+ padding: 3px 6px 2px;
491
+ border: 1px solid var(--input-border-color);
492
+ border-radius: 2px;
493
+ background-color: var(--input-background-color);
494
+ font-size: var(--text-size-base);
495
+ font-family: inherit;
496
+ }
497
+
498
+ .bio-properties-panel-input[type=number],
499
+ select.bio-properties-panel-input,
500
+ textarea.bio-properties-panel-input,
501
+ .bio-properties-panel-input[type=text] {
502
+ display: block;
503
+ width: 100%;
504
+ }
505
+
506
+ textarea.bio-properties-panel-input {
507
+ min-height: 28px;
508
+ }
509
+
510
+ .bio-properties-panel-input:focus,
511
+ .bio-properties-panel-input:focus-within {
512
+ outline: none;
513
+ background-color: var(--input-focus-background-color);
514
+ border: 1px solid var(--input-focus-border-color);
515
+ }
516
+
517
+ .bio-properties-panel-textfield:focus-within,
518
+ .bio-properties-panel-feel-entry:focus-within {
519
+ --input-background-color: var(--input-focus-background-color);
520
+ --input-border-color: var(--input-focus-border-color);
521
+ }
522
+
523
+ .bio-properties-panel-input:disabled {
524
+ border-color: var(--input-disabled-border-color);
525
+ background-color: var(--input-disabled-background-color);
526
+ color: var(--input-disabled-color);
527
+ }
528
+
529
+ select.bio-properties-panel-input {
530
+ padding: 4px 6px;
531
+ }
532
+
533
+ .bio-properties-panel-input-monospace {
534
+ font-family: var(--font-family-monospace);
535
+ }
536
+
537
+ .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
538
+ margin: 0;
539
+ vertical-align: middle;
540
+ }
541
+
542
+ .bio-properties-panel-input[type="checkbox"]:focus {
543
+ outline: 2px solid var(--input-focus-border-color);
544
+ outline-offset: 0;
545
+ }
546
+
547
+ .bio-properties-panel-checkbox > .bio-properties-panel-label {
548
+ display: inline-block;
549
+ font-size: var(--text-size-base);
550
+ margin-left: 6px;
551
+ margin-top: auto;
552
+ vertical-align: middle;
553
+ }
554
+
555
+ .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
556
+ margin-top: -8px;
557
+ }
558
+
559
+ .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
560
+ margin-left: 18px;
561
+ }
562
+
563
+ textarea.bio-properties-panel-input {
564
+ resize: vertical;
565
+ }
566
+
567
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input {
568
+ border-color: var(--input-error-border-color);
569
+ background-color: var(--input-error-background-color);
570
+ }
571
+
572
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
573
+ border-color: var(--input-error-border-color);
574
+ }
575
+
576
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
577
+ .bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
578
+ border-color: var(--input-error-focus-border-color);
579
+ }
580
+
581
+ .bio-properties-panel-entry .bio-properties-panel-error {
582
+ color: var(--text-error-color);
583
+ margin: 4px 0;
584
+ font-size: var(--text-size-small);
585
+ }
586
+
587
+ .bio-properties-panel-simple {
588
+ width: 100%;
589
+ margin-right: 8px;
590
+ }
591
+
592
+ .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
593
+ margin: auto;
594
+ }
595
+
596
+ /**
597
+ * Toggle Switch
598
+ */
599
+ .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
600
+ margin-top: -8px;
601
+ }
602
+
603
+ .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
604
+ margin-left: 38px;
605
+ }
606
+
607
+ .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
608
+ display: flex;
609
+ flex-direction: row;
610
+ align-items: center;
611
+ }
612
+
613
+ .bio-properties-panel-toggle-switch.inline {
614
+ display: flex;
615
+ flex-direction: row;
616
+ }
617
+
618
+ .bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
619
+ margin-left: auto;
620
+ }
621
+
622
+ .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
623
+ font-size: var(--text-size-base);
624
+ }
625
+
626
+ .bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
627
+ font-size: var(--text-size-small);
628
+ }
629
+
630
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
631
+ margin: 0;
632
+ margin-left: 6px;
633
+ font-size: var(--text-size-base);
634
+ }
635
+
636
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
637
+ position: relative;
638
+ width: 32px;
639
+ height: 16px;
640
+ }
641
+
642
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
643
+ outline: 2px solid var(--input-focus-border-color);
644
+ outline-offset: 1px;
645
+ }
646
+
647
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
648
+ opacity: 0;
649
+ width: 0;
650
+ height: 0;
651
+ }
652
+
653
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
654
+ position: absolute;
655
+ cursor: pointer;
656
+ top: 0;
657
+ left: 0;
658
+ right: 0;
659
+ bottom: 0;
660
+ background-color: var(--toggle-switch-off-background-color);
661
+ -webkit-transition: 0.4s;
662
+ transition: 0.4s;
663
+ border-radius: 34px;
664
+ }
665
+
666
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
667
+ position: absolute;
668
+ content: "";
669
+ height: 12px;
670
+ width: 12px;
671
+ left: 2px;
672
+ bottom: 2px;
673
+ background-color: var(--toggle-switch-switcher-background-color);
674
+ -webkit-transition: 0.4s;
675
+ transition: 0.4s;
676
+ border-radius: 50%;
677
+ }
678
+
679
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
680
+ background-color: var(--toggle-switch-on-background-color);
681
+ box-shadow: 0 0 1px ;
682
+ }
683
+
684
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
685
+ -webkit-transform: translateX(16px);
686
+ -ms-transform: translateX(16px);
687
+ transform: translateX(16px);
688
+ }
689
+
690
+ /**
691
+ * Collapsible entries
692
+ */
693
+ .bio-properties-panel-collapsible-entry-entries {
694
+ position: relative;
695
+ display: none;
696
+ }
697
+
698
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
699
+ padding-bottom: 0;
700
+ }
701
+
702
+ .bio-properties-panel-collapsible-entry-entries.open {
703
+ display: block;
704
+ }
705
+
706
+ .bio-properties-panel-collapsible-entry-entries {
707
+ padding-left: 20px;
708
+ margin-bottom: 10px;
709
+ position: relative;
710
+ display: none;
711
+ }
712
+
713
+ .bio-properties-panel-collapsible-entry-header {
714
+ position: relative;
715
+ display: flex;
716
+ justify-content: space-between;
717
+ align-items: center;
718
+ overflow: hidden;
719
+ }
720
+
721
+ .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
722
+ padding: 2px 24px 2px 32px;
723
+ font-size: var(--text-size-base);
724
+ white-space: nowrap;
725
+ overflow: hidden;
726
+ text-overflow: ellipsis;
727
+ user-select: none;
728
+ }
729
+
730
+ .bio-properties-panel-collapsible-entry-arrow {
731
+ position: absolute;
732
+ top: 2px;
733
+ left: 6px;
734
+ padding: 0 3px;
735
+ height: 22px;
736
+ display: inline-flex;
737
+ justify-content: center;
738
+ align-items: center;
739
+ align-self: center;
740
+ }
741
+
742
+ .bio-properties-panel-remove-entry {
743
+ display: flex;
744
+ align-items: center;
745
+ justify-content: center;
746
+ margin-right: 5px;
747
+ padding: 0;
748
+ width: 22px;
749
+ height: 22px;
750
+ fill: var(--remove-entry-fill-color);
751
+ border-radius: 50%;
752
+ border: none;
753
+ background: none;
754
+ visibility: hidden;
755
+ }
756
+
757
+ .bio-properties-panel-remove-entry:hover {
758
+ background-color: var(--remove-entry-hover-background-color);
759
+ }
760
+
761
+ .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
762
+ .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry,
763
+ .bio-properties-panel-collapsible-entry:focus-within > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry
764
+ {
765
+ visibility: visible;
766
+ }
767
+
768
+ /* Side line */
769
+ .bio-properties-panel-collapsible-entry-entries::before {
770
+ content: "";
771
+ position: absolute;
772
+ left: 16px;
773
+ width: 2px;
774
+ top: -6px;
775
+ bottom: 12px;
776
+ background-color: var(--side-line-background-color);
777
+ border-radius: 1px;
778
+ }
779
+
780
+ /* Side line extension for non-list entry or open list entry positioned as the last one. */
781
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
782
+ .bio-properties-panel-list-entry.open:last-child {
783
+ position: relative;
784
+ }
785
+
786
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
787
+ .bio-properties-panel-list-entry.open:last-child::after {
788
+ content: "";
789
+ position: absolute;
790
+ left: -16px;
791
+ width: 2px;
792
+ top: 0;
793
+ bottom: -4px;
794
+ background-color: var(--side-line-extension-background-color);
795
+ border-radius: 1px;
796
+ }
797
+
798
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
799
+ left: -18px;
800
+ }
801
+
802
+ /*
803
+ * List entry
804
+ */
805
+ .bio-properties-panel-list-entry {
806
+ position: relative;
807
+ margin-right: 5px;
808
+ margin-bottom: 0;
809
+ }
810
+
811
+ .bio-properties-panel-list-entry .bio-properties-panel-entry {
812
+ margin-right: 0;
813
+ }
814
+
815
+ .bio-properties-panel-list-entry-header {
816
+ position: relative;
817
+ overflow: hidden;
818
+ display: flex;
819
+ justify-content: space-between;
820
+ height: 32px;
821
+ }
822
+
823
+ /* Nested list dot */
824
+ .bio-properties-panel-list-entry::before {
825
+ content: "";
826
+ width: 8px;
827
+ height: 8px;
828
+ position: absolute;
829
+ left: -19px;
830
+ top: 13px;
831
+ border-radius: 50%;
832
+ background-color: var(--list-entry-dot-background-color);
833
+ }
834
+
835
+ .bio-properties-panel-list-entry-header-title {
836
+ display: block;
837
+ margin: auto 0;
838
+ padding: 2px 0;
839
+ font-size: var(--text-size-base);
840
+ white-space: nowrap;
841
+ overflow: hidden;
842
+ text-overflow: ellipsis;
843
+ }
844
+
845
+ .bio-properties-panel-list-entry-header-title.open {
846
+ font-weight: 500;
847
+ }
848
+
849
+ .bio-properties-panel-list-entry-header-buttons {
850
+ display: flex;
851
+ align-items: center;
852
+ }
853
+
854
+ .bio-properties-panel-list-entry-header-buttons > button {
855
+ display: inline-flex;
856
+ justify-content: center;
857
+ align-items: center;
858
+ align-self: center;
859
+ height: 22px;
860
+ line-height: 22px;
861
+ min-width: 22px;
862
+ margin: 5px;
863
+ padding: 0 3px;
864
+ border: none;
865
+ background: none;
866
+ fill: var(--list-entry-header-button-fill-color);
867
+ }
868
+
869
+ .bio-properties-panel-list-entry-header-buttons > :last-child {
870
+ margin-right: 0;
871
+ }
872
+
873
+ .bio-properties-panel-list-entry-items {
874
+ padding: 0;
875
+ margin: 0;
876
+
877
+ list-style: none;
878
+ }
879
+
880
+ .bio-properties-panel-list-entry-items:not(.open) {
881
+ display: none;
882
+ }
883
+
884
+ .bio-properties-panel-list-entry-item {
885
+ display: flex;
886
+ justify-content: space-between;
887
+ }
888
+
889
+ .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
890
+ margin-right: 1px;
891
+ }
892
+
893
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
894
+ width: 100%;
895
+ margin-right: 4px;
896
+ }
897
+
898
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
899
+ margin-left: -8px;
900
+ }
901
+
902
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
903
+ left: 2px;
904
+ }
905
+
906
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
907
+ padding-left: 30px;
908
+ }
909
+
910
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
911
+ padding-left: 10px;
912
+ }
913
+
914
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
915
+ left: 4px;
916
+ }
917
+
918
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
919
+ margin-right: 16px;
920
+ padding-left: 6px;
921
+ }
922
+
923
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
924
+ color: var(--list-entry-add-entry-label-color);
925
+ padding: 4px 6px 3px 2px;
926
+ }
927
+
928
+ .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
929
+ background-color: var(--list-entry-add-entry-background-color);
930
+ fill: var(--list-entry-add-entry-fill-color);
931
+ }
932
+
933
+ .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
934
+ border-radius: 0;
935
+ margin-bottom: -2px;
936
+ }
937
+
938
+ .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
939
+ border-top-left-radius: 2px;
940
+ border-top-right-radius: 2px;
941
+ }
942
+
943
+ .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
944
+ border-bottom-left-radius: 2px;
945
+ border-bottom-right-radius: 2px;
946
+ }
947
+
948
+ .bio-properties-panel-dropdown-button {
949
+ position: relative;
950
+
951
+ --dropdown-button-margin: 5px;
952
+ }
953
+
954
+ .bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
955
+ display: none;
956
+ }
957
+
958
+ .bio-properties-panel-dropdown-button__menu {
959
+ min-width: calc(100% - var(--dropdown-button-margin) * 2);
960
+ max-width: 240px;
961
+
962
+ position: absolute;
963
+ top: calc(100% - var(--dropdown-button-margin));
964
+ right: var(--dropdown-button-margin);
965
+ z-index: 101;
966
+
967
+ background-color: var(--dropdown-item-background-color);
968
+
969
+ padding: 8px 0;
970
+
971
+ box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
972
+ }
973
+
974
+ .bio-properties-panel-dropdown-button__menu-item {
975
+ display: block;
976
+ width: 100%;
977
+ padding: 4px 12px;
978
+
979
+ font-size: var(--text-size-small);
980
+ appearance: revert;
981
+ border: unset;
982
+ background: unset;
983
+ text-align: unset;
984
+ }
985
+
986
+ .bio-properties-panel-dropdown-button__menu-item--separator {
987
+ width: 100%;
988
+ height: 1px;
989
+
990
+ padding: 0;
991
+ margin: 8px 0;
992
+
993
+ background-color: var(--dropdown-separator-background-color);
994
+ }
995
+
996
+ .bio-properties-panel-dropdown-button__menu-item--actionable {
997
+ font-size: var(--text-size-base);
998
+ }
999
+
1000
+ .bio-properties-panel-dropdown-button__menu-item--actionable:hover {
1001
+ background-color: var(--dropdown-item-hover-background-color);
1002
+ }
1003
+
1004
+ .bio-properties-panel-feel-input {
1005
+ position: relative;
1006
+ }
1007
+
1008
+ .bio-properties-panel-feel-input input {
1009
+ padding-right: 2em
1010
+ }
1011
+
1012
+ .bio-properties-panel-feel-entry .bio-properties-panel-label {
1013
+ display: flex;
1014
+ }
1015
+
1016
+ .bio-properties-panel-feel-icon {
1017
+ display: inline-flex;
1018
+ height: 18px;
1019
+ width: 22px;
1020
+ vertical-align: text-bottom;
1021
+ padding: 0;
1022
+ margin: 0 3px;
1023
+ align-items: center;
1024
+ align-self: center;
1025
+ justify-content: center;
1026
+ border: none;
1027
+ background: none;
1028
+ border-radius: 3px;
1029
+ }
1030
+
1031
+ .bio-properties-panel-feel-icon.optional {
1032
+ cursor: pointer;
1033
+ background: var(--feel-background-color);
1034
+ }
1035
+
1036
+ .bio-properties-panel-feel-icon svg * {
1037
+ fill: var(--feel-inactive-color);
1038
+ }
1039
+
1040
+ .bio-properties-panel-feel-icon:hover {
1041
+ background: var(--feel-hover-background-color);
1042
+ }
1043
+
1044
+ .bio-properties-panel-feel-icon:hover svg * {
1045
+ fill: var(--feel-hover-color);
1046
+ }
1047
+
1048
+ .bio-properties-panel-feel-icon.active {
1049
+ background: var(--feel-active-background-color);
1050
+ }
1051
+
1052
+ .bio-properties-panel-feel-icon.active:hover {
1053
+ background: var(--feel-hover-background-color);
1054
+ }
1055
+
1056
+ .bio-properties-panel-feel-icon.required.active {
1057
+ background: none;
1058
+ }
1059
+
1060
+ .bio-properties-panel-feel-icon.active svg * {
1061
+ fill: var(--feel-active-color);
1062
+ }
1063
+
1064
+ .bio-properties-panel-feel-icon.required.active svg * {
1065
+ fill: var(--feel-required-color);
1066
+ }
1067
+
1068
+ .bio-properties-panel-feel-editor-container {
1069
+ position: relative;
1070
+ }
1071
+
1072
+ .bio-properties-panel-feel-editor-container.active {
1073
+ font-family: var(--font-family-monospace);
1074
+ }
1075
+
1076
+ .bio-properties-panel-feel-container {
1077
+ position: relative;
1078
+ }
1079
+
1080
+ .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
1081
+ position: static;
1082
+ padding-left: 2.4em !important;
1083
+ min-height: 28px;
1084
+ }
1085
+
1086
+ .bio-properties-panel-feel-indicator {
1087
+ position: absolute;
1088
+ border: 1px solid var(--input-border-color);
1089
+ background-color: var(--feel-indicator-background-color);
1090
+ border-right: 0px;
1091
+ border-radius: 2px 0 0 2px;
1092
+ z-index: 1;
1093
+ height: 100%;
1094
+ width: 2em;
1095
+ text-align: center;
1096
+ padding: 2px 6px;
1097
+ }
1098
+
1099
+ .bio-properties-panel-feel-editor-container .cm-scroller {
1100
+ overflow: hidden !important;
1101
+ }
1102
+
1103
+ .bio-properties-panel-feelers-editor .cm-editor {
1104
+ background-color: transparent;
1105
+ }
1106
+
1107
+
1108
+ /* @Note(pinussilvestrus): mitigate low contrast - https://github.com/bpmn-io/cm-theme/issues/4 */
1109
+ .bio-properties-panel-feelers-editor .cm-content ::selection {
1110
+ background: var(--feelers-select-color, hsl(205, 100%, 85%));
1111
+ }
1112
+
1113
+ .bio-properties-panel-feelers-editor .cm-editor.cm-focused {
1114
+ background-color: transparent;
1115
+ }
1116
+
1117
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1118
+ resize: vertical;
1119
+ overflow: hidden;
1120
+ overflow-y: auto;
1121
+ }
1122
+
1123
+ .bio-properties-panel-feel-editor-container,
1124
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1125
+ .bio-properties-panel-feel-container .cm-editor {
1126
+ min-height: 100%;
1127
+ }
1128
+
1129
+ .bio-properties-panel-feel-checkbox,
1130
+ .bio-properties-panel-feel-toggle-switch {
1131
+ padding-top: 1px;
1132
+ }
1133
+
1134
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
1135
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
1136
+ display: flex;
1137
+ flex-direction: row;
1138
+ align-items: center;
1139
+ }
1140
+
1141
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
1142
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
1143
+ margin-left: auto;
1144
+ }
1145
+
1146
+ .bio-properties-panel-tooltip-wrapper {
1147
+ text-decoration: underline;
1148
+ text-decoration-style: dotted;
1149
+ text-underline-offset: 2px;
1150
+ font: inherit;
1151
+ }
1152
+
1153
+ .bio-properties-panel-tooltip {
1154
+ display: flex;
1155
+ color: var(--color-white, white);
1156
+ position: fixed;
1157
+ z-index: 1000;
1158
+ padding-right: 6px;
1159
+ max-width: 300px;
1160
+ font-size: var(--text-size-small);
1161
+ font-family: var(--font-family);
1162
+ }
1163
+
1164
+ .bio-properties-panel-tooltip-content {
1165
+ background-color: var(--tooltip-background-color);
1166
+ padding: 16px;
1167
+ border-radius: 2px;
1168
+ font-weight: 400;
1169
+ white-space: pre-wrap;
1170
+ }
1171
+
1172
+ .bio-properties-panel-tooltip-content code,
1173
+ .bio-properties-panel-tooltip-content pre {
1174
+ color: var(--description-color);
1175
+ font-family: var(--font-family);
1176
+ font-size: var(--text-size-small);
1177
+ line-height: var(--line-height-condensed);
1178
+ padding: 0 2px;
1179
+ background-color: var(--tooltip-code-background-color);
1180
+ border: 1px solid var(--tooltip-code-border-color);
1181
+ border-radius: 3px;
1182
+ }
1183
+
1184
+ .bio-properties-panel-tooltip p:first-child {
1185
+ margin-top: 0;
1186
+ }
1187
+
1188
+ .bio-properties-panel-tooltip p:last-child {
1189
+ margin-bottom: 0;
1190
+ }
1191
+
1192
+ .bio-properties-panel-tooltip-content a {
1193
+ color: var(--tooltip-link);
1194
+ }
1195
+
1196
+ .bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
1197
+ width: 0;
1198
+ height: 0;
1199
+ border-top: 5px solid transparent;
1200
+ border-bottom: 5px solid transparent;
1201
+ border-left: 5px solid var(--tooltip-background-color);
1202
+ margin-top: 16px;
1203
+ }
1204
+
1205
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
1206
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
1207
+ display: none;
1208
+ justify-content: center;
1209
+ flex-direction: column;
1210
+ color: hsla(0, 0%, 9%, 0.25);
1211
+ padding: 3px 6px 2px;
1212
+ border: 1px solid var(--input-border-color);
1213
+ border-radius: 2px;
1214
+ background-color: var(--input-background-color);
1215
+ font-size: var(--text-size-base);
1216
+ font-family: inherit;
1217
+ width: 100%;
1218
+ min-height: 100%;
1219
+ }
1220
+
1221
+ .bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-input,
1222
+ .bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-input {
1223
+ display: none;
1224
+ }
1225
+
1226
+ .bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-feelers-editor__open-popup-placeholder,
1227
+ .bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-feel-editor__open-popup-placeholder {
1228
+ display: flex;
1229
+ }
1230
+
1231
+ .bio-properties-panel-popup {
1232
+ --popup-background-color: hsla(0, 0%, 96%, 1);
1233
+ --popup-header-background-color: white;
1234
+ --popup-font-color: hsla(0, 0%, 0%, 1);
1235
+ --popup-title-color: hsla(0, 0%, 0%, 1);
1236
+
1237
+ --feel-popup-close-background-color: hsla(219, 99%, 53%, 1);
1238
+ --feel-popup-gutters-background-color: hsla(0, 0%, 90%, 1);
1239
+
1240
+ position: absolute;
1241
+ display: flex;
1242
+ flex: auto;
1243
+ flex-direction: column;
1244
+ font-family: IBM Plex Sans, sans-serif;
1245
+ padding: 0;
1246
+ z-index: 1001;
1247
+ box-shadow: 0px 2px 6px 0px hsla(0, 0%, 0%, 0.3);
1248
+ background-color: var(--popup-background-color);
1249
+ color: var(--popup-font-color);
1250
+ height: auto;
1251
+ width: auto;
1252
+ overflow: hidden;
1253
+ font-size: 14px;
1254
+ }
1255
+
1256
+ .bio-properties-panel-popup h1,
1257
+ .bio-properties-panel-popup h2,
1258
+ .bio-properties-panel-popup h3,
1259
+ .bio-properties-panel-popup h4 {
1260
+ font-weight: 500;
1261
+ font-size: inherit;
1262
+ }
1263
+
1264
+ .bio-properties-panel-popup .bio-properties-panel-popup__header,
1265
+ .bio-properties-panel-popup .bio-properties-panel-popup__body,
1266
+ .bio-properties-panel-popup .bio-properties-panel-popup__footer {
1267
+ padding: 12px;
1268
+ display: flex;
1269
+ }
1270
+
1271
+ .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
1272
+ padding-top: 0;
1273
+ }
1274
+
1275
+ .bio-properties-panel-popup .bio-properties-panel-popup__header {
1276
+ background-color: var(--popup-header-background-color);
1277
+ margin: 0;
1278
+ font-size: 12px;
1279
+ font-weight: 400;
1280
+ line-height: 16px;
1281
+ text-align: left;
1282
+ color: var(--popup-title-color);
1283
+ }
1284
+
1285
+ .bio-properties-panel-popup .bio-properties-panel-popup__header.draggable {
1286
+ cursor: grab;
1287
+ }
1288
+
1289
+ .bio-properties-panel-popup .bio-properties-panel-popup__drag-handle {
1290
+ display: flex;
1291
+ }
1292
+
1293
+ .bio-properties-panel-popup .bio-properties-panel-popup__drag-preview {
1294
+ width: 1px;
1295
+ height: 1px;
1296
+ position: absolute;
1297
+ top: 0;
1298
+ }
1299
+
1300
+ .bio-properties-panel-popup .bio-properties-panel-popup__title {
1301
+ margin-left: 8px;
1302
+ }
1303
+
1304
+ .bio-properties-panel-popup .bio-properties-panel-popup__title::first-letter {
1305
+ text-transform: capitalize;
1306
+ }
1307
+
1308
+ .bio-properties-panel-popup .bio-properties-panel-popup__header svg {
1309
+ margin-left: -4px;
1310
+ }
1311
+
1312
+ .bio-properties-panel-popup .bio-properties-panel-popup__body {
1313
+ font-size: inherit;
1314
+ height: 100%;
1315
+ display: flex;
1316
+ overflow: auto;
1317
+ padding-bottom: 0;
1318
+ }
1319
+
1320
+ .bio-properties-panel-popup .bio-properties-panel-popup__footer {
1321
+ position: absolute;
1322
+ bottom: 0;
1323
+ right: 8px;
1324
+ }
1325
+
1326
+ .bio-properties-panel-feel-popup {
1327
+ min-height: 400px;
1328
+ width: fit-content;
1329
+ }
1330
+
1331
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-popup__body {
1332
+ display: flex;
1333
+ margin: 0;
1334
+ padding: 0;
1335
+ height: 100%;
1336
+ width: 100%;
1337
+ }
1338
+
1339
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
1340
+ display: flex;
1341
+ min-width: 100%;
1342
+ }
1343
+
1344
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
1345
+ width: 100%;
1346
+ display: flex;
1347
+ }
1348
+
1349
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor {
1350
+ display: flex;
1351
+ }
1352
+
1353
+ .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor .cm-editor {
1354
+ width: 100%;
1355
+ }
1356
+
1357
+ .bio-properties-panel-feel-popup .bio-properties-panel-input {
1358
+ width: 100%;
1359
+ resize: none;
1360
+ padding: 0;
1361
+ margin-left: -12px;
1362
+ overflow: hidden;
1363
+ overflow-y: auto
1364
+ }
1365
+
1366
+ .bio-properties-panel-feel-popup .bio-properties-panel-open-feel-popup {
1367
+ display: none !important;
1368
+ }
1369
+
1370
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
1371
+ .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
1372
+ position: absolute;
1373
+ display: none;
1374
+ right: 0;
1375
+ bottom: -1px;
1376
+ background: none;
1377
+ border: none;
1378
+ color: var(--feel-open-popup-color);
1379
+ cursor: pointer;
1380
+ }
1381
+
1382
+ .bio-properties-panel-open-feel-popup svg {
1383
+ background: var(--feel-open-popup-background-color);
1384
+ }
1385
+
1386
+ .bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
1387
+ .bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
1388
+ .bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,
1389
+ .bio-properties-panel-feel-container:focus-within .bio-properties-panel-open-feel-popup {
1390
+ display: block;
1391
+ }
1392
+
1393
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup {
1394
+ bottom: 0;
1395
+ }
1396
+
1397
+ .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
1398
+ .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
1399
+ color: var(--feel-open-popup-hover-color);
1400
+ }
1401
+
1402
+ .bio-properties-panel-feel-popup .bio-properties-panel-popup__footer .bio-properties-panel-feel-popup__close-btn {
1403
+ background: var(--feel-popup-close-background-color);
1404
+ width: 66px;
1405
+ font-weight: 400;
1406
+ font-size: 14px;
1407
+ font-family: inherit;
1408
+ color: white;
1409
+ border: none;
1410
+ height: 32px;
1411
+ cursor: pointer;
1412
+ }
1413
+
1414
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor {
1415
+ width: 100%;
1416
+ height: 100%;
1417
+ }
1418
+
1419
+ .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-editor .cm-content {
1420
+ padding-left: 4px;
1421
+ }
1422
+
1423
+ .bio-properties-panel-feel-popup .cm-gutters {
1424
+ background-color: var(--feel-popup-gutters-background-color);
1425
+ border: none;
1426
+ padding: 0;
1427
+ }
1428
+
1429
+ .bio-properties-panel-feel-popup .cm-gutter {
1430
+ min-width: 32px;
1431
+ }
1432
+
1433
+ .bio-properties-panel-feel-popup .cm-gutters .cm-lineNumbers .cm-gutterElement {
1434
+ text-align: center;
1435
+ }