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