@bpmn-io/form-js-editor 1.26.1 → 2.0.0-alpha.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.
- package/dist/assets/form-js-editor-base.css +69 -132
- package/dist/assets/form-js-editor.css +482 -271
- package/dist/assets/properties-panel.css +449 -179
- package/dist/index.cjs +329 -139
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +333 -143
- package/dist/index.es.js.map +1 -1
- package/package.json +7 -5
|
@@ -1,135 +1,196 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Semantic tokens, copied from `@bpmn-io/theme` to style the components
|
|
3
|
+
* according to this theme.
|
|
4
|
+
*
|
|
5
|
+
* Names and values of the tokens should stay intact with the `@bpmn-io/theme`
|
|
6
|
+
* source of truth, to ensure matching styles and allow overrides with an
|
|
7
|
+
* alternative theme.
|
|
3
8
|
*/
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
|
|
9
|
+
.bio-theme-parent {
|
|
10
|
+
--bio-surface: hsl(0, 0%, 100%);
|
|
11
|
+
--bio-surface-overlay: hsl(0, 0%, 100%);
|
|
12
|
+
--bio-surface-subtle: hsl(225, 10%, 97%);
|
|
13
|
+
--bio-surface-medium: hsl(225, 10%, 95%);
|
|
14
|
+
--bio-surface-strong: hsl(225, 10%, 90%);
|
|
15
|
+
--bio-surface-inverted: hsl(0, 0%, 22%);
|
|
16
|
+
--bio-text: hsl(225, 10%, 15%);
|
|
17
|
+
--bio-text-subtle: hsl(225, 10%, 35%);
|
|
18
|
+
--bio-text-subtlest: hsl(225, 10%, 55%);
|
|
19
|
+
--bio-text-on-primary: hsl(0, 0%, 100%);
|
|
20
|
+
--bio-text-on-inverted: hsl(0, 0%, 100%);
|
|
21
|
+
--bio-border: hsl(225, 10%, 75%);
|
|
22
|
+
--bio-border-subtle: hsl(225, 10%, 85%);
|
|
23
|
+
--bio-border-disabled: hsl(225, 10%, 90%);
|
|
24
|
+
--bio-border-input: hsl(225, 10%, 75%);
|
|
25
|
+
--bio-primary: hsl(205, 100%, 40%);
|
|
26
|
+
--bio-primary-hover: hsl(205, 100%, 35%);
|
|
27
|
+
--bio-primary-surface: hsl(205, 100%, 95%);
|
|
28
|
+
--bio-primary-surface-strong: hsl(205, 100%, 85%);
|
|
29
|
+
--bio-neutral: hsl(225, 10%, 35%);
|
|
30
|
+
--bio-danger: hsl(360, 100%, 45%);
|
|
31
|
+
--bio-danger-hover: hsl(360, 100%, 40%);
|
|
32
|
+
--bio-danger-surface: hsl(360, 100%, 92%);
|
|
33
|
+
--bio-danger-surface-subtle: hsl(360, 100%, 97%);
|
|
34
|
+
--bio-warning: hsl(35, 84%, 62%);
|
|
35
|
+
--bio-warning-hover: hsl(35, 84%, 57%);
|
|
36
|
+
--bio-warning-text: hsl(39, 100%, 33%);
|
|
37
|
+
--bio-warning-surface: hsl(38, 100%, 96%);
|
|
38
|
+
--bio-info: hsl(205, 100%, 40%);
|
|
39
|
+
--bio-info-on-inverted: hsl(218, 100%, 74%);
|
|
40
|
+
--bio-focus: hsl(205, 100%, 40%);
|
|
41
|
+
--bio-focus-ring: hsla(205, 100%, 40%, 0.35);
|
|
42
|
+
--bio-focus-ring-danger: hsla(360, 100%, 45%, 0.35);
|
|
43
|
+
--bio-focus-ring-warning: hsla(35, 84%, 62%, 0.35);
|
|
44
|
+
--bio-shadow: hsla(0, 0%, 0%, 30%);
|
|
45
|
+
--bio-shadow-subtle: hsla(0, 0%, 0%, 10%);
|
|
46
|
+
--bio-radius-sm: 2px;
|
|
47
|
+
--bio-radius-lg: 4px;
|
|
35
48
|
}
|
|
36
49
|
|
|
37
50
|
.bio-properties-panel {
|
|
38
|
-
--text-base-color: var(--
|
|
39
|
-
--text-error-color: var(--
|
|
40
|
-
--
|
|
41
|
-
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--description-code-border-color: var(--color-grey-225-10-85);
|
|
45
|
-
--description-list-item-color: var(--color-grey-225-10-35);
|
|
46
|
-
|
|
47
|
-
--tooltip-underline-color: var(--color-grey-225-10-55);
|
|
48
|
-
|
|
49
|
-
--placeholder-color: var(--color-grey-225-10-35);
|
|
50
|
-
--placeholder-background-color: var(--color-grey-225-10-95);
|
|
51
|
-
|
|
52
|
-
--header-background-color: var(--color-grey-225-10-95);
|
|
53
|
-
--header-icon-fill-color: var(--color-grey-225-10-15);
|
|
54
|
-
--header-bottom-border-color: var(--color-grey-225-10-75);
|
|
55
|
-
|
|
56
|
-
--group-background-color: var(--color-white);
|
|
57
|
-
--group-bottom-border-color: var(--color-grey-225-10-75);
|
|
58
|
-
|
|
59
|
-
--sticky-group-background-color: var(--color-grey-225-10-95);
|
|
60
|
-
--sticky-group-bottom-border-color: var(--color-grey-225-10-75);
|
|
61
|
-
|
|
62
|
-
--add-entry-fill-color: var(--color-grey-225-10-35);
|
|
63
|
-
--add-entry-hover-fill-color: var(--color-white);
|
|
64
|
-
--add-entry-hover-background-color: var(--color-blue-205-100-50);
|
|
65
|
-
--add-entry-label-color: var(--color-white);
|
|
66
|
-
|
|
67
|
-
--remove-entry-fill-color: var(--color-red-360-100-45);
|
|
68
|
-
--remove-entry-hover-background-color: var(--color-red-360-100-92);
|
|
69
|
-
|
|
70
|
-
--arrow-fill-color: var(--color-grey-225-10-35);
|
|
71
|
-
--arrow-hover-background-color: var(--color-grey-225-10-95);
|
|
72
|
-
|
|
73
|
-
--dot-color: var(--color-grey-225-10-35);
|
|
74
|
-
--dot-color-error: var(--color-red-360-100-45);
|
|
75
|
-
|
|
76
|
-
--list-badge-color: var(--color-white);
|
|
77
|
-
--list-badge-background-color: var(--color-grey-225-10-35);
|
|
78
|
-
|
|
79
|
-
--input-background-color: var(--color-grey-225-10-97);
|
|
80
|
-
--input-border-color: var(--color-grey-225-10-75);
|
|
81
|
-
|
|
82
|
-
--input-focus-background-color: var(--color-blue-205-100-95);
|
|
83
|
-
--input-focus-border-color: var(--color-blue-205-100-50);
|
|
84
|
-
--focus-outline-color: var(--color-blue-205-100-40);
|
|
85
|
-
|
|
86
|
-
--input-error-background-color: var(--color-red-360-100-97);
|
|
87
|
-
--input-error-border-color: var(--color-red-360-100-45);
|
|
88
|
-
--input-error-focus-border-color: var(--color-red-360-100-45);
|
|
89
|
-
|
|
90
|
-
--input-disabled-color: var(--color-grey-225-10-55);
|
|
91
|
-
--input-disabled-background-color: var(--color-grey-225-10-97);
|
|
92
|
-
--input-disabled-border-color: var(--color-grey-225-10-90);
|
|
51
|
+
--text-base-color: var(--bio-text);
|
|
52
|
+
--text-error-color: var(--bio-danger);
|
|
53
|
+
--text-warning-color: var(--bio-warning-text);
|
|
54
|
+
|
|
55
|
+
--accent-color: var(--bio-primary);
|
|
56
|
+
--accent-hover-color: var(--bio-primary-hover);
|
|
93
57
|
|
|
94
|
-
--
|
|
95
|
-
|
|
96
|
-
--
|
|
97
|
-
|
|
98
|
-
--
|
|
99
|
-
--
|
|
100
|
-
|
|
101
|
-
--
|
|
102
|
-
|
|
103
|
-
--
|
|
104
|
-
--
|
|
105
|
-
|
|
106
|
-
--
|
|
107
|
-
--
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
--
|
|
111
|
-
--
|
|
58
|
+
--link-color: var(--bio-info);
|
|
59
|
+
|
|
60
|
+
--description-color: var(--bio-text-subtle);
|
|
61
|
+
--description-code-background-color: var(--bio-surface-subtle);
|
|
62
|
+
--description-code-border-color: var(--bio-border-subtle);
|
|
63
|
+
--description-list-item-color: var(--bio-text-subtle);
|
|
64
|
+
|
|
65
|
+
--tooltip-underline-color: var(--bio-text-subtlest);
|
|
66
|
+
|
|
67
|
+
--placeholder-color: var(--bio-text-subtle);
|
|
68
|
+
--placeholder-background-color: var(--bio-surface-medium);
|
|
69
|
+
|
|
70
|
+
--header-background-color: var(--bio-surface-medium);
|
|
71
|
+
--header-icon-fill-color: var(--bio-text);
|
|
72
|
+
--header-bottom-border-color: var(--bio-border);
|
|
73
|
+
|
|
74
|
+
--group-background-color: var(--bio-surface);
|
|
75
|
+
--group-bottom-border-color: var(--bio-border);
|
|
76
|
+
|
|
77
|
+
--sticky-group-background-color: var(--bio-surface-medium);
|
|
78
|
+
--sticky-list-entry-background-color: var(--bio-surface);
|
|
79
|
+
--sticky-group-bottom-border-color: var(--bio-border);
|
|
80
|
+
|
|
81
|
+
--add-entry-fill-color: var(--bio-text-subtle);
|
|
82
|
+
--add-entry-hover-fill-color: var(--bio-text-on-primary);
|
|
83
|
+
--add-entry-hover-background-color: var(--bio-primary);
|
|
84
|
+
--add-entry-label-color: var(--bio-text-on-primary);
|
|
85
|
+
|
|
86
|
+
--remove-entry-fill-color: var(--bio-danger);
|
|
87
|
+
--remove-entry-hover-background-color: var(--bio-danger-surface);
|
|
88
|
+
|
|
89
|
+
--arrow-fill-color: var(--bio-text-subtle);
|
|
90
|
+
--arrow-hover-background-color: var(--bio-surface-medium);
|
|
91
|
+
|
|
92
|
+
--warning-badge-background-color: var(--bio-warning);
|
|
93
|
+
--warning-badge-color: var(--bio-text);
|
|
94
|
+
--warning-badge-hover-background-color: var(--bio-warning-hover);
|
|
95
|
+
--error-badge-background-color: var(--bio-danger);
|
|
96
|
+
--error-badge-color: var(--bio-text-on-primary);
|
|
97
|
+
--error-badge-hover-background-color: var(--bio-danger-hover);
|
|
98
|
+
|
|
99
|
+
--accent-badge-background-color: var(--accent-color);
|
|
100
|
+
--accent-badge-color: var(--bio-text-on-primary);
|
|
101
|
+
--accent-badge-fill-color: var(--bio-text-on-primary);
|
|
102
|
+
--accent-badge-hover-background-color: var(--accent-hover-color);
|
|
103
|
+
|
|
104
|
+
--dot-color: var(--bio-neutral);
|
|
105
|
+
--dot-color-error: var(--error-badge-background-color);
|
|
106
|
+
--dot-color-warning: var(--warning-badge-background-color);
|
|
107
|
+
|
|
108
|
+
--list-badge-color: var(--bio-text-on-primary);
|
|
109
|
+
--list-badge-background-color: var(--bio-neutral);
|
|
110
|
+
|
|
111
|
+
--input-background-color: var(--bio-surface-subtle);
|
|
112
|
+
--input-border-color: var(--bio-border-input);
|
|
113
|
+
--input-border-radius: var(--bio-radius-sm);
|
|
114
|
+
|
|
115
|
+
--checkbox-size: 14px;
|
|
116
|
+
--checkbox-border-radius: var(--bio-radius-lg);
|
|
117
|
+
--checkbox-border-color: var(--input-border-color);
|
|
118
|
+
--checkbox-background-color: var(--input-background-color);
|
|
119
|
+
--checkbox-checked-background-color: var(--bio-primary);
|
|
120
|
+
--checkbox-checked-border-color: var(--bio-primary);
|
|
121
|
+
|
|
122
|
+
--input-focus-background-color: var(--bio-primary-surface);
|
|
123
|
+
--input-focus-border-color: var(--bio-primary);
|
|
124
|
+
|
|
125
|
+
--focus-outline-color: var(--bio-focus);
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* Focus ring — reusable, themeable primitive shared by inputs, checkboxes,
|
|
129
|
+
* toggles and any control with the `bio-properties-panel-focus-ring` class.
|
|
130
|
+
*/
|
|
131
|
+
--focus-ring-color: var(--bio-focus-ring);
|
|
132
|
+
--focus-ring-error-color: var(--bio-focus-ring-danger);
|
|
133
|
+
--focus-ring-warning-color: var(--bio-focus-ring-warning);
|
|
134
|
+
--focus-ring-width: 2px;
|
|
135
|
+
--focus-ring-offset: 0px;
|
|
136
|
+
--focus-ring-offset-color: var(--group-background-color);
|
|
137
|
+
|
|
138
|
+
--input-error-background-color: var(--bio-danger-surface-subtle);
|
|
139
|
+
--input-error-border-color: var(--bio-danger);
|
|
140
|
+
--input-error-focus-border-color: var(--bio-danger);
|
|
141
|
+
|
|
142
|
+
--input-warning-background-color: var(--bio-warning-surface);
|
|
143
|
+
--input-warning-border-color: var(--bio-warning);
|
|
144
|
+
--input-warning-focus-border-color: var(--bio-warning);
|
|
145
|
+
|
|
146
|
+
--input-disabled-color: var(--bio-text-subtlest);
|
|
147
|
+
--input-disabled-background-color: var(--bio-surface-subtle);
|
|
148
|
+
--input-disabled-border-color: var(--bio-border-disabled);
|
|
149
|
+
|
|
150
|
+
--toggle-switch-on-background-color: var(--bio-primary);
|
|
151
|
+
--toggle-switch-off-background-color: var(--bio-border-input);
|
|
152
|
+
--toggle-switch-switcher-background-color: var(--bio-surface);
|
|
153
|
+
|
|
154
|
+
--side-line-background-color: var(--bio-text-subtle);
|
|
155
|
+
--side-line-extension-background-color: var(--bio-text-subtle);
|
|
156
|
+
|
|
157
|
+
--list-entry-dot-background-color: var(--bio-neutral);
|
|
158
|
+
--list-entry-header-button-fill-color: var(--bio-text-subtle);
|
|
159
|
+
--list-entry-add-entry-empty-background-color: var(--bio-primary);
|
|
160
|
+
--list-entry-add-entry-empty-hover-background-color: var(--bio-primary-hover);
|
|
161
|
+
--list-entry-add-entry-label-color: var(--bio-text-on-primary);
|
|
162
|
+
--list-entry-add-entry-background-color: var(--bio-primary);
|
|
163
|
+
--list-entry-add-entry-fill-color: var(--bio-text-on-primary);
|
|
164
|
+
|
|
165
|
+
--dropdown-item-background-color: var(--bio-surface-overlay);
|
|
166
|
+
--dropdown-item-hover-background-color: var(--bio-surface-medium);
|
|
167
|
+
--dropdown-separator-background-color: var(--bio-border);
|
|
112
168
|
|
|
113
169
|
--feel-background-color: transparent;
|
|
114
|
-
--feel-active-color: var(--color
|
|
115
|
-
--feel-inactive-color: var(--
|
|
116
|
-
--feel-hover-color: var(--
|
|
117
|
-
--feel-hover-background-color: var(--
|
|
170
|
+
--feel-active-color: var(--accent-color);
|
|
171
|
+
--feel-inactive-color: var(--bio-text-subtle);
|
|
172
|
+
--feel-hover-color: var(--bio-text);
|
|
173
|
+
--feel-hover-background-color: var(--bio-surface-subtle);
|
|
118
174
|
--feel-active-background-color: transparent;
|
|
119
|
-
--feel-required-color: var(--
|
|
120
|
-
--feel-open-popup-color:
|
|
121
|
-
--feel-open-popup-background-color: var(--
|
|
122
|
-
--feel-open-popup-hover-color:
|
|
175
|
+
--feel-required-color: var(--bio-text-subtlest);
|
|
176
|
+
--feel-open-popup-color: var(--bio-text-subtle);
|
|
177
|
+
--feel-open-popup-background-color: var(--bio-surface-overlay);
|
|
178
|
+
--feel-open-popup-hover-color: var(--bio-primary);
|
|
123
179
|
|
|
124
|
-
--feel-indicator-background-color: var(--
|
|
180
|
+
--feel-indicator-background-color: var(--bio-surface-strong);
|
|
125
181
|
|
|
126
|
-
--feelers-select-color:
|
|
182
|
+
--feelers-select-color: var(--bio-primary-surface-strong);
|
|
127
183
|
|
|
128
184
|
--text-size-base: 14px;
|
|
129
185
|
--text-size-small: 13px;
|
|
130
186
|
--text-size-smallest: 12px;
|
|
131
187
|
--text-line-height: 21px;
|
|
132
|
-
--line-height-condensed:
|
|
188
|
+
--line-height-condensed: 18px;
|
|
189
|
+
|
|
190
|
+
--input-height: 28px;
|
|
191
|
+
|
|
192
|
+
--description-offset: 5px;
|
|
193
|
+
--label-offset: 3px;
|
|
133
194
|
|
|
134
195
|
--font-family: sans-serif;
|
|
135
196
|
--font-family-monospace: monospace;
|
|
@@ -376,6 +437,10 @@
|
|
|
376
437
|
background-color: var(--dot-color);
|
|
377
438
|
}
|
|
378
439
|
|
|
440
|
+
.bio-properties-panel-dot--warning {
|
|
441
|
+
--dot-color: var(--dot-color-warning);
|
|
442
|
+
}
|
|
443
|
+
|
|
379
444
|
.bio-properties-panel-dot--error {
|
|
380
445
|
--dot-color: var(--dot-color-error);
|
|
381
446
|
}
|
|
@@ -407,15 +472,26 @@
|
|
|
407
472
|
background-color: var(--list-badge-background-color);
|
|
408
473
|
}
|
|
409
474
|
|
|
475
|
+
.bio-properties-panel-list-badge--warning {
|
|
476
|
+
--list-badge-background-color: var(--warning-badge-background-color);
|
|
477
|
+
--list-badge-color: var(--warning-badge-color);
|
|
478
|
+
}
|
|
479
|
+
|
|
410
480
|
.bio-properties-panel-list-badge--error {
|
|
411
|
-
--list-badge-background-color: var(--
|
|
481
|
+
--list-badge-background-color: var(--error-badge-background-color);
|
|
482
|
+
--list-badge-color: var(--error-badge-color);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.bio-properties-panel-list-badge--accent {
|
|
486
|
+
--list-badge-background-color: var(--accent-badge-background-color);
|
|
487
|
+
--list-badge-color: var(--accent-badge-color);
|
|
412
488
|
}
|
|
413
489
|
|
|
414
490
|
/**
|
|
415
491
|
* Basic entries
|
|
416
492
|
*/
|
|
417
493
|
.bio-properties-panel-entry {
|
|
418
|
-
margin:
|
|
494
|
+
margin: 3px 32px 6px 12px;
|
|
419
495
|
}
|
|
420
496
|
|
|
421
497
|
.bio-properties-panel-entry:last-child {
|
|
@@ -425,7 +501,7 @@
|
|
|
425
501
|
.bio-properties-panel-label {
|
|
426
502
|
display: block;
|
|
427
503
|
font-size: var(--text-size-small);
|
|
428
|
-
margin:
|
|
504
|
+
margin: var(--label-offset) 0;
|
|
429
505
|
}
|
|
430
506
|
|
|
431
507
|
.bio-properties-panel-description,
|
|
@@ -434,7 +510,7 @@
|
|
|
434
510
|
.bio-properties-panel-description div {
|
|
435
511
|
color: var(--description-color);
|
|
436
512
|
display: block;
|
|
437
|
-
margin:
|
|
513
|
+
margin: var(--description-offset) 0;
|
|
438
514
|
line-height: var(--line-height-condensed);
|
|
439
515
|
font-weight: 400;
|
|
440
516
|
font-size: var(--text-size-small);
|
|
@@ -478,11 +554,25 @@
|
|
|
478
554
|
|
|
479
555
|
.bio-properties-panel-feelers-editor.bio-properties-panel-input {
|
|
480
556
|
padding: 0;
|
|
557
|
+
min-height: var(--input-height);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/**
|
|
561
|
+
* Normalize the vertical rhythm of the feelers and JSON editors so single-line
|
|
562
|
+
* editors line up with plain inputs. CodeMirror's default `.cm-content` padding
|
|
563
|
+
* of `4px 0` would otherwise render them a few pixels taller than the
|
|
564
|
+
* surrounding controls. (The FEEL editor already zeroes its own content padding
|
|
565
|
+
* and sizes to the shared baseline, so it is intentionally left untouched.)
|
|
566
|
+
*/
|
|
567
|
+
.bio-properties-panel-feelers-editor .cm-content,
|
|
568
|
+
.bio-properties-panel-json-editor .cm-content {
|
|
569
|
+
padding-top: 3px;
|
|
570
|
+
padding-bottom: 2px;
|
|
481
571
|
}
|
|
482
572
|
|
|
483
573
|
.bio-properties-panel-feelers-input .cm-editor
|
|
484
574
|
{
|
|
485
|
-
min-height:
|
|
575
|
+
min-height: var(--input-height);
|
|
486
576
|
max-height: 215px;
|
|
487
577
|
background-color: transparent;
|
|
488
578
|
}
|
|
@@ -495,7 +585,7 @@
|
|
|
495
585
|
.bio-properties-panel-input {
|
|
496
586
|
padding: 3px 6px 2px;
|
|
497
587
|
border: 1px solid var(--input-border-color);
|
|
498
|
-
border-radius:
|
|
588
|
+
border-radius: var(--input-border-radius);
|
|
499
589
|
background-color: var(--input-background-color);
|
|
500
590
|
font-size: var(--text-size-base);
|
|
501
591
|
font-family: inherit;
|
|
@@ -507,25 +597,56 @@ textarea.bio-properties-panel-input,
|
|
|
507
597
|
.bio-properties-panel-input[type=text] {
|
|
508
598
|
display: block;
|
|
509
599
|
width: 100%;
|
|
600
|
+
min-height: var(--input-height);
|
|
510
601
|
}
|
|
511
602
|
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
603
|
+
/**
|
|
604
|
+
* Focus ring
|
|
605
|
+
*
|
|
606
|
+
* A themeable, reusable focus indicator shared by all controls — inputs,
|
|
607
|
+
* checkboxes (rendered as custom `appearance: none` controls so the ring
|
|
608
|
+
* paints and follows their corners) and toggles. To reuse it in a custom
|
|
609
|
+
* component, add the `bio-properties-panel-focus-ring` class to the focusable
|
|
610
|
+
* element; when placed inside an entry with `has-error` it switches to the
|
|
611
|
+
* error color. Tune the look via the `--focus-ring-*` variables (and
|
|
612
|
+
* `--input-border-radius` / `--checkbox-border-radius` for corners).
|
|
613
|
+
*/
|
|
516
614
|
.bio-properties-panel-input:focus,
|
|
517
|
-
.bio-properties-panel-input:focus-within
|
|
615
|
+
.bio-properties-panel-input:focus-within,
|
|
616
|
+
.bio-properties-panel-toggle-switch__switcher:focus-within,
|
|
617
|
+
.bio-properties-panel-focus-ring:focus,
|
|
618
|
+
.bio-properties-panel-focus-ring:focus-within {
|
|
518
619
|
outline: none;
|
|
620
|
+
box-shadow:
|
|
621
|
+
0 0 0 var(--focus-ring-offset) var(--focus-ring-offset-color),
|
|
622
|
+
0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
/* keep focus visible where box-shadow is dropped (e.g. Windows High Contrast) */
|
|
626
|
+
@media (forced-colors: active) {
|
|
627
|
+
.bio-properties-panel-input:focus,
|
|
628
|
+
.bio-properties-panel-input:focus-within,
|
|
629
|
+
.bio-properties-panel-toggle-switch__switcher:focus-within,
|
|
630
|
+
.bio-properties-panel-focus-ring:focus,
|
|
631
|
+
.bio-properties-panel-focus-ring:focus-within {
|
|
632
|
+
outline: 2px solid Highlight;
|
|
633
|
+
outline-offset: var(--focus-ring-offset);
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
/* the custom checkmark (SVG background) is not recolored by the OS; fall back
|
|
637
|
+
to the native checkbox so the checked state stays visible */
|
|
638
|
+
.bio-properties-panel-input[type="checkbox"] {
|
|
639
|
+
appearance: auto;
|
|
640
|
+
-webkit-appearance: auto;
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
.bio-properties-panel-input:focus:not([type="checkbox"]),
|
|
645
|
+
.bio-properties-panel-input:focus-within {
|
|
519
646
|
background-color: var(--input-focus-background-color);
|
|
520
647
|
border: 1px solid var(--input-focus-border-color);
|
|
521
648
|
}
|
|
522
649
|
|
|
523
|
-
.bio-properties-panel-textfield:focus-within,
|
|
524
|
-
.bio-properties-panel-feel-entry:focus-within {
|
|
525
|
-
--input-background-color: var(--input-focus-background-color);
|
|
526
|
-
--input-border-color: var(--input-focus-border-color);
|
|
527
|
-
}
|
|
528
|
-
|
|
529
650
|
.bio-properties-panel-input:disabled {
|
|
530
651
|
border-color: var(--input-disabled-border-color);
|
|
531
652
|
background-color: var(--input-disabled-background-color);
|
|
@@ -541,22 +662,57 @@ select.bio-properties-panel-input {
|
|
|
541
662
|
font-family: var(--font-family-monospace);
|
|
542
663
|
}
|
|
543
664
|
|
|
544
|
-
.bio-properties-panel-input[type="
|
|
665
|
+
.bio-properties-panel-input[type="radio"] {
|
|
545
666
|
margin: 0;
|
|
546
667
|
vertical-align: middle;
|
|
547
668
|
}
|
|
548
669
|
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
outline
|
|
552
|
-
outline-offset:
|
|
670
|
+
/* native radios drop `box-shadow`; keep a visible outline-based focus ring */
|
|
671
|
+
.bio-properties-panel-input[type="radio"]:focus {
|
|
672
|
+
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
673
|
+
outline-offset: var(--focus-ring-offset);
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
/**
|
|
677
|
+
* Checkbox
|
|
678
|
+
*
|
|
679
|
+
* Rendered as a custom control (`appearance: none`) following shadcn/ui: native
|
|
680
|
+
* checkboxes drop `box-shadow`, so the shared focus ring could never paint on
|
|
681
|
+
* them and fell back to the browser's square outline. As a custom element the
|
|
682
|
+
* box-shadow ring renders and follows `border-radius`, giving a properly rounded
|
|
683
|
+
* ring — no checkbox-specific focus rule needed. Themeable via `--checkbox-*`.
|
|
684
|
+
*/
|
|
685
|
+
.bio-properties-panel-input[type="checkbox"] {
|
|
686
|
+
appearance: none;
|
|
687
|
+
-webkit-appearance: none;
|
|
688
|
+
box-sizing: border-box;
|
|
689
|
+
width: var(--checkbox-size);
|
|
690
|
+
height: var(--checkbox-size);
|
|
691
|
+
margin: 0;
|
|
692
|
+
padding: 0;
|
|
693
|
+
vertical-align: middle;
|
|
694
|
+
border: 1px solid var(--checkbox-border-color);
|
|
695
|
+
border-radius: var(--checkbox-border-radius);
|
|
696
|
+
background: var(--checkbox-background-color) center / contain no-repeat;
|
|
697
|
+
cursor: pointer;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
.bio-properties-panel-input[type="checkbox"]:checked {
|
|
701
|
+
border-color: var(--checkbox-checked-border-color);
|
|
702
|
+
background-color: var(--checkbox-checked-background-color);
|
|
703
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4.5 6.5 11.5 3 8'/%3E%3C/svg%3E");
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
.bio-properties-panel-input[type="checkbox"]:disabled {
|
|
707
|
+
cursor: not-allowed;
|
|
708
|
+
border-color: var(--input-disabled-border-color);
|
|
709
|
+
background-color: var(--input-disabled-background-color);
|
|
553
710
|
}
|
|
554
711
|
|
|
555
712
|
.bio-properties-panel-checkbox > .bio-properties-panel-label {
|
|
556
713
|
display: inline-block;
|
|
557
714
|
font-size: var(--text-size-base);
|
|
558
715
|
margin-left: 6px;
|
|
559
|
-
margin-top: auto;
|
|
560
716
|
vertical-align: middle;
|
|
561
717
|
}
|
|
562
718
|
|
|
@@ -572,6 +728,36 @@ textarea.bio-properties-panel-input {
|
|
|
572
728
|
resize: vertical;
|
|
573
729
|
}
|
|
574
730
|
|
|
731
|
+
textarea.bio-properties-panel-input.auto-resize {
|
|
732
|
+
/* auto-resizing textareas grow with their content, so manual resizing is pointless */
|
|
733
|
+
resize: none;
|
|
734
|
+
field-sizing: content;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-input,
|
|
738
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-feel-editor__open-popup-placeholder {
|
|
739
|
+
border-color: var(--input-warning-border-color);
|
|
740
|
+
background-color: var(--input-warning-background-color);
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-feel-indicator {
|
|
744
|
+
border-color: var(--input-warning-border-color);
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-input:focus,
|
|
748
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-input:focus-within,
|
|
749
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-feel-indicator:focus {
|
|
750
|
+
border-color: var(--input-warning-focus-border-color);
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-input:focus,
|
|
754
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-input:focus-within,
|
|
755
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-toggle-switch__switcher:focus-within,
|
|
756
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-focus-ring:focus,
|
|
757
|
+
.bio-properties-panel-entry.has-warning .bio-properties-panel-focus-ring:focus-within {
|
|
758
|
+
--focus-ring-color: var(--focus-ring-warning-color);
|
|
759
|
+
}
|
|
760
|
+
|
|
575
761
|
.bio-properties-panel-entry.has-error .bio-properties-panel-input,
|
|
576
762
|
.bio-properties-panel-entry.has-error .bio-properties-panel-feel-editor__open-popup-placeholder {
|
|
577
763
|
border-color: var(--input-error-border-color);
|
|
@@ -583,14 +769,32 @@ textarea.bio-properties-panel-input {
|
|
|
583
769
|
}
|
|
584
770
|
|
|
585
771
|
.bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
|
|
772
|
+
.bio-properties-panel-entry.has-error .bio-properties-panel-input:focus-within,
|
|
586
773
|
.bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
|
|
587
774
|
border-color: var(--input-error-focus-border-color);
|
|
588
775
|
}
|
|
589
776
|
|
|
590
|
-
.bio-properties-panel-entry .bio-properties-panel-
|
|
591
|
-
|
|
592
|
-
|
|
777
|
+
.bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
|
|
778
|
+
.bio-properties-panel-entry.has-error .bio-properties-panel-input:focus-within,
|
|
779
|
+
.bio-properties-panel-entry.has-error .bio-properties-panel-toggle-switch__switcher:focus-within,
|
|
780
|
+
.bio-properties-panel-entry.has-error .bio-properties-panel-focus-ring:focus,
|
|
781
|
+
.bio-properties-panel-entry.has-error .bio-properties-panel-focus-ring:focus-within {
|
|
782
|
+
--focus-ring-color: var(--focus-ring-error-color);
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
.bio-properties-panel-warning,
|
|
786
|
+
.bio-properties-panel-error {
|
|
787
|
+
margin: var(--description-offset) 0;
|
|
593
788
|
font-size: var(--text-size-small);
|
|
789
|
+
line-height: var(--line-height-condensed);
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
.bio-properties-panel-warning {
|
|
793
|
+
color: var(--text-warning-color);
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
.bio-properties-panel-error {
|
|
797
|
+
color: var(--text-error-color);
|
|
594
798
|
}
|
|
595
799
|
|
|
596
800
|
.bio-properties-panel-simple {
|
|
@@ -608,6 +812,7 @@ textarea.bio-properties-panel-input {
|
|
|
608
812
|
|
|
609
813
|
.bio-properties-panel-json-editor .bio-properties-panel-input {
|
|
610
814
|
padding: 0;
|
|
815
|
+
min-height: var(--input-height);
|
|
611
816
|
}
|
|
612
817
|
|
|
613
818
|
.bio-properties-panel-json-editor .cm-editor {
|
|
@@ -667,11 +872,7 @@ textarea.bio-properties-panel-input {
|
|
|
667
872
|
position: relative;
|
|
668
873
|
width: 32px;
|
|
669
874
|
height: 16px;
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
.bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
|
|
673
|
-
outline: 2px solid var(--input-focus-border-color);
|
|
674
|
-
outline-offset: 1px;
|
|
875
|
+
border-radius: 34px;
|
|
675
876
|
}
|
|
676
877
|
|
|
677
878
|
.bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
|
|
@@ -851,7 +1052,7 @@ textarea.bio-properties-panel-input {
|
|
|
851
1052
|
}
|
|
852
1053
|
|
|
853
1054
|
.bio-properties-panel-list-entry-header.sticky {
|
|
854
|
-
background-color: var(--color
|
|
1055
|
+
background-color: var(--sticky-list-entry-background-color);
|
|
855
1056
|
border-bottom: 1px solid var(--sticky-group-bottom-border-color);
|
|
856
1057
|
top: 32px;
|
|
857
1058
|
z-index: 9;
|
|
@@ -1005,7 +1206,7 @@ textarea.bio-properties-panel-input {
|
|
|
1005
1206
|
|
|
1006
1207
|
padding: 8px 0;
|
|
1007
1208
|
|
|
1008
|
-
box-shadow: 0 1px 4px 0 var(--
|
|
1209
|
+
box-shadow: 0 1px 4px 0 var(--bio-shadow-subtle), 0 2px 16px 0 var(--bio-shadow)
|
|
1009
1210
|
}
|
|
1010
1211
|
|
|
1011
1212
|
.bio-properties-panel-dropdown-button__menu-item {
|
|
@@ -1117,7 +1318,17 @@ textarea.bio-properties-panel-input {
|
|
|
1117
1318
|
.bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
|
|
1118
1319
|
position: static;
|
|
1119
1320
|
padding-left: 2.4em !important;
|
|
1120
|
-
min-height:
|
|
1321
|
+
min-height: var(--input-height);
|
|
1322
|
+
}
|
|
1323
|
+
|
|
1324
|
+
/* reserve space on the first line for the open pop-up button, only while the input is focused or hovered */
|
|
1325
|
+
.bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container:is(:hover, :focus-within) .cm-line:first-child::before,
|
|
1326
|
+
.bio-properties-panel-feelers-input .bio-properties-panel-feelers-editor-container:is(:hover, :focus-within) .cm-line:first-child::before,
|
|
1327
|
+
.bio-properties-panel-feel-container .bio-properties-panel-feelers-editor-container:is(:hover, :focus-within) .cm-line:first-child::before {
|
|
1328
|
+
content: "";
|
|
1329
|
+
float: right;
|
|
1330
|
+
width: 1.7em;
|
|
1331
|
+
height: 1.5em;
|
|
1121
1332
|
}
|
|
1122
1333
|
|
|
1123
1334
|
.bio-properties-panel-feel-indicator {
|
|
@@ -1125,7 +1336,7 @@ textarea.bio-properties-panel-input {
|
|
|
1125
1336
|
border: 1px solid var(--input-border-color);
|
|
1126
1337
|
background-color: var(--feel-indicator-background-color);
|
|
1127
1338
|
border-right: 0px;
|
|
1128
|
-
border-radius:
|
|
1339
|
+
border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
|
|
1129
1340
|
z-index: 1;
|
|
1130
1341
|
height: 100%;
|
|
1131
1342
|
width: 2em;
|
|
@@ -1133,6 +1344,28 @@ textarea.bio-properties-panel-input {
|
|
|
1133
1344
|
padding: 2px 6px;
|
|
1134
1345
|
}
|
|
1135
1346
|
|
|
1347
|
+
/**
|
|
1348
|
+
* `:has()` so the indicator tracks real editor focus only — a plain
|
|
1349
|
+
* `:focus-within` would also match the sibling pop-out button. Degrades to a
|
|
1350
|
+
* neutral border where `:has()` is unsupported.
|
|
1351
|
+
*/
|
|
1352
|
+
.bio-properties-panel-feel-container:has(.bio-properties-panel-input:focus-within)
|
|
1353
|
+
.bio-properties-panel-feel-indicator {
|
|
1354
|
+
border-color: var(--input-focus-border-color);
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
.bio-properties-panel-entry.has-warning
|
|
1358
|
+
.bio-properties-panel-feel-container:has(.bio-properties-panel-input:focus-within)
|
|
1359
|
+
.bio-properties-panel-feel-indicator {
|
|
1360
|
+
border-color: var(--input-warning-focus-border-color);
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
.bio-properties-panel-entry.has-error
|
|
1364
|
+
.bio-properties-panel-feel-container:has(.bio-properties-panel-input:focus-within)
|
|
1365
|
+
.bio-properties-panel-feel-indicator {
|
|
1366
|
+
border-color: var(--input-error-focus-border-color);
|
|
1367
|
+
}
|
|
1368
|
+
|
|
1136
1369
|
.bio-properties-panel-feel-editor-container .cm-scroller {
|
|
1137
1370
|
overflow: hidden !important;
|
|
1138
1371
|
}
|
|
@@ -1198,13 +1431,14 @@ textarea.bio-properties-panel-input {
|
|
|
1198
1431
|
}
|
|
1199
1432
|
|
|
1200
1433
|
.bio-properties-panel-tooltip {
|
|
1201
|
-
--tooltip-background-color: var(--
|
|
1202
|
-
--tooltip-
|
|
1203
|
-
--tooltip-
|
|
1204
|
-
--tooltip-code-
|
|
1434
|
+
--tooltip-background-color: var(--bio-surface-inverted);
|
|
1435
|
+
--tooltip-color: var(--bio-text-on-inverted);
|
|
1436
|
+
--tooltip-link: var(--bio-info-on-inverted);
|
|
1437
|
+
--tooltip-code-background-color: var(--bio-surface-subtle);
|
|
1438
|
+
--tooltip-code-border-color: var(--bio-border-subtle);
|
|
1205
1439
|
|
|
1206
1440
|
display: flex;
|
|
1207
|
-
color: var(--color
|
|
1441
|
+
color: var(--tooltip-color);
|
|
1208
1442
|
position: fixed;
|
|
1209
1443
|
z-index: 1001;
|
|
1210
1444
|
max-width: 300px;
|
|
@@ -1277,15 +1511,20 @@ textarea.bio-properties-panel-input {
|
|
|
1277
1511
|
transform: rotate(90deg);
|
|
1278
1512
|
}
|
|
1279
1513
|
|
|
1514
|
+
.bio-properties-panel-textarea-container {
|
|
1515
|
+
position: relative;
|
|
1516
|
+
}
|
|
1517
|
+
|
|
1280
1518
|
.bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
|
|
1281
|
-
.bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder
|
|
1519
|
+
.bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder,
|
|
1520
|
+
.bio-properties-panel-textarea-container .bio-properties-panel-textarea__open-popup-placeholder {
|
|
1282
1521
|
display: none;
|
|
1283
1522
|
justify-content: center;
|
|
1284
1523
|
flex-direction: column;
|
|
1285
1524
|
color: hsla(0, 0%, 9%, 0.25);
|
|
1286
1525
|
padding: 3px 6px 2px;
|
|
1287
1526
|
border: 1px solid var(--input-border-color);
|
|
1288
|
-
border-radius:
|
|
1527
|
+
border-radius: var(--input-border-radius);
|
|
1289
1528
|
background-color: var(--input-background-color);
|
|
1290
1529
|
font-size: var(--text-size-base);
|
|
1291
1530
|
font-family: inherit;
|
|
@@ -1298,19 +1537,30 @@ textarea.bio-properties-panel-input {
|
|
|
1298
1537
|
display: none;
|
|
1299
1538
|
}
|
|
1300
1539
|
|
|
1540
|
+
.bio-properties-panel-textarea-container.popupOpen .bio-properties-panel-input {
|
|
1541
|
+
visibility: hidden;
|
|
1542
|
+
}
|
|
1543
|
+
|
|
1301
1544
|
.bio-properties-panel-feelers-editor-container.popupOpen .bio-properties-panel-feelers-editor__open-popup-placeholder,
|
|
1302
|
-
.bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-feel-editor__open-popup-placeholder
|
|
1545
|
+
.bio-properties-panel-feel-editor-container.popupOpen .bio-properties-panel-feel-editor__open-popup-placeholder,
|
|
1546
|
+
.bio-properties-panel-textarea-container.popupOpen .bio-properties-panel-textarea__open-popup-placeholder {
|
|
1303
1547
|
display: flex;
|
|
1304
1548
|
}
|
|
1305
1549
|
|
|
1550
|
+
.bio-properties-panel-textarea-container.popupOpen .bio-properties-panel-textarea__open-popup-placeholder {
|
|
1551
|
+
position: absolute;
|
|
1552
|
+
inset: 0;
|
|
1553
|
+
justify-content: flex-start;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1306
1556
|
.bio-properties-panel-popup {
|
|
1307
|
-
--popup-background-color:
|
|
1308
|
-
--popup-header-background-color:
|
|
1309
|
-
--popup-font-color:
|
|
1310
|
-
--popup-title-color:
|
|
1557
|
+
--popup-background-color: var(--bio-surface-subtle);
|
|
1558
|
+
--popup-header-background-color: var(--bio-surface);
|
|
1559
|
+
--popup-font-color: var(--bio-text);
|
|
1560
|
+
--popup-title-color: var(--bio-text);
|
|
1311
1561
|
|
|
1312
|
-
--feel-popup-close-background-color:
|
|
1313
|
-
--feel-popup-gutters-background-color:
|
|
1562
|
+
--feel-popup-close-background-color: var(--bio-primary);
|
|
1563
|
+
--feel-popup-gutters-background-color: var(--bio-surface-strong);
|
|
1314
1564
|
|
|
1315
1565
|
position: fixed;
|
|
1316
1566
|
display: flex;
|
|
@@ -1328,6 +1578,15 @@ textarea.bio-properties-panel-input {
|
|
|
1328
1578
|
font-size: 14px;
|
|
1329
1579
|
}
|
|
1330
1580
|
|
|
1581
|
+
/**
|
|
1582
|
+
* Popups render through a portal outside `.bio-properties-panel`, so re-apply
|
|
1583
|
+
* the global box-sizing reset here.
|
|
1584
|
+
*/
|
|
1585
|
+
.bio-properties-panel-popup,
|
|
1586
|
+
.bio-properties-panel-popup * {
|
|
1587
|
+
box-sizing: border-box;
|
|
1588
|
+
}
|
|
1589
|
+
|
|
1331
1590
|
.bio-properties-panel-popup h1,
|
|
1332
1591
|
.bio-properties-panel-popup h2,
|
|
1333
1592
|
.bio-properties-panel-popup h3,
|
|
@@ -1379,6 +1638,7 @@ textarea.bio-properties-panel-input {
|
|
|
1379
1638
|
|
|
1380
1639
|
.bio-properties-panel-popup .bio-properties-panel-popup__title {
|
|
1381
1640
|
margin-left: 8px;
|
|
1641
|
+
margin-right: auto;
|
|
1382
1642
|
}
|
|
1383
1643
|
|
|
1384
1644
|
.bio-properties-panel-popup .bio-properties-panel-popup__title::first-letter {
|
|
@@ -1428,11 +1688,6 @@ textarea.bio-properties-panel-input {
|
|
|
1428
1688
|
right: 8px;
|
|
1429
1689
|
}
|
|
1430
1690
|
|
|
1431
|
-
.bio-properties-panel-feel-popup {
|
|
1432
|
-
min-height: 400px;
|
|
1433
|
-
width: fit-content;
|
|
1434
|
-
}
|
|
1435
|
-
|
|
1436
1691
|
.bio-properties-panel-feel-popup .bio-properties-panel-feel-popup__body {
|
|
1437
1692
|
display: flex;
|
|
1438
1693
|
margin: 0;
|
|
@@ -1492,36 +1747,42 @@ textarea.bio-properties-panel-input {
|
|
|
1492
1747
|
}
|
|
1493
1748
|
|
|
1494
1749
|
.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
|
|
1495
|
-
.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup
|
|
1750
|
+
.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup,
|
|
1751
|
+
.bio-properties-panel-textarea-container .bio-properties-panel-open-feel-popup {
|
|
1496
1752
|
position: absolute;
|
|
1497
|
-
top:
|
|
1753
|
+
top: 4px;
|
|
1498
1754
|
right: 0;
|
|
1499
1755
|
line-height: 1;
|
|
1500
|
-
padding:
|
|
1501
|
-
margin: 3px;
|
|
1756
|
+
padding: 2px 4px;
|
|
1757
|
+
margin: 0 3px;
|
|
1502
1758
|
display: none;
|
|
1503
1759
|
background: none;
|
|
1504
1760
|
border: none;
|
|
1505
|
-
|
|
1761
|
+
fill: var(--feel-open-popup-color);
|
|
1506
1762
|
cursor: pointer;
|
|
1507
1763
|
}
|
|
1508
1764
|
|
|
1509
1765
|
.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup svg,
|
|
1510
|
-
.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup svg
|
|
1766
|
+
.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup svg,
|
|
1767
|
+
.bio-properties-panel-textarea-container .bio-properties-panel-open-feel-popup svg {
|
|
1768
|
+
display: block;
|
|
1511
1769
|
width: 16px;
|
|
1512
1770
|
height: 16px;
|
|
1513
1771
|
}
|
|
1514
1772
|
|
|
1515
1773
|
.bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
|
|
1516
1774
|
.bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
|
|
1775
|
+
.bio-properties-panel-textarea-container:hover .bio-properties-panel-open-feel-popup,
|
|
1517
1776
|
.bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,
|
|
1518
|
-
.bio-properties-panel-feel-container:focus-within .bio-properties-panel-open-feel-popup
|
|
1777
|
+
.bio-properties-panel-feel-container:focus-within .bio-properties-panel-open-feel-popup,
|
|
1778
|
+
.bio-properties-panel-textarea-container:focus-within .bio-properties-panel-open-feel-popup {
|
|
1519
1779
|
display: block;
|
|
1520
1780
|
}
|
|
1521
1781
|
|
|
1522
1782
|
.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
|
|
1523
|
-
.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover
|
|
1524
|
-
|
|
1783
|
+
.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover,
|
|
1784
|
+
.bio-properties-panel-textarea-container .bio-properties-panel-open-feel-popup:hover {
|
|
1785
|
+
fill: var(--feel-open-popup-hover-color);
|
|
1525
1786
|
}
|
|
1526
1787
|
|
|
1527
1788
|
.bio-properties-panel-feel-popup .bio-properties-panel-popup__footer .bio-properties-panel-feel-popup__close-btn {
|
|
@@ -1563,6 +1824,15 @@ textarea.bio-properties-panel-input {
|
|
|
1563
1824
|
text-align: center;
|
|
1564
1825
|
}
|
|
1565
1826
|
|
|
1827
|
+
.bio-properties-panel-text-popup .bio-properties-panel-input {
|
|
1828
|
+
width: 100%;
|
|
1829
|
+
height: 100%;
|
|
1830
|
+
min-height: 100%;
|
|
1831
|
+
resize: none;
|
|
1832
|
+
border: none;
|
|
1833
|
+
padding: 8px 12px;
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1566
1836
|
/* Checkbox Group */
|
|
1567
1837
|
.bio-properties-panel-checkbox-group .bio-properties-panel-checkbox-group-entries > .bio-properties-panel-entry {
|
|
1568
1838
|
margin: 0;
|