@bpmn-io/form-js-viewer 0.10.1 → 0.12.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 (69) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +165 -165
  3. package/dist/assets/form-js.css +715 -611
  4. package/dist/index.cjs +953 -691
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.es.js +877 -606
  7. package/dist/index.es.js.map +1 -1
  8. package/dist/types/Form.d.ts +144 -144
  9. package/dist/types/core/ConditionChecker.d.ts +57 -57
  10. package/dist/types/core/EventBus.d.ts +1 -1
  11. package/dist/types/core/FormFieldRegistry.d.ts +17 -17
  12. package/dist/types/core/Validator.d.ts +7 -7
  13. package/dist/types/core/index.d.ts +18 -18
  14. package/dist/types/import/Importer.d.ts +43 -43
  15. package/dist/types/import/index.d.ts +5 -5
  16. package/dist/types/index.d.ts +18 -18
  17. package/dist/types/render/FormFields.d.ts +5 -5
  18. package/dist/types/render/Renderer.d.ts +23 -23
  19. package/dist/types/render/components/Description.d.ts +1 -1
  20. package/dist/types/render/components/Errors.d.ts +1 -1
  21. package/dist/types/render/components/FormComponent.d.ts +1 -1
  22. package/dist/types/render/components/FormField.d.ts +1 -1
  23. package/dist/types/render/components/Label.d.ts +1 -1
  24. package/dist/types/render/components/PoweredBy.d.ts +1 -1
  25. package/dist/types/render/components/Sanitizer.d.ts +8 -8
  26. package/dist/types/render/components/Util.d.ts +17 -17
  27. package/dist/types/render/components/form-fields/Button.d.ts +12 -11
  28. package/dist/types/render/components/form-fields/Checkbox.d.ts +14 -13
  29. package/dist/types/render/components/form-fields/Checklist.d.ts +18 -12
  30. package/dist/types/render/components/form-fields/Datetime.d.ts +13 -11
  31. package/dist/types/render/components/form-fields/Default.d.ts +11 -9
  32. package/dist/types/render/components/form-fields/Image.d.ts +10 -8
  33. package/dist/types/render/components/form-fields/Number.d.ts +15 -14
  34. package/dist/types/render/components/form-fields/Radio.d.ts +18 -12
  35. package/dist/types/render/components/form-fields/Select.d.ts +18 -12
  36. package/dist/types/render/components/form-fields/Taglist.d.ts +18 -12
  37. package/dist/types/render/components/form-fields/Text.d.ts +12 -10
  38. package/dist/types/render/components/form-fields/Textarea.d.ts +14 -13
  39. package/dist/types/render/components/form-fields/Textfield.d.ts +14 -13
  40. package/dist/types/render/components/form-fields/parts/Datepicker.d.ts +1 -1
  41. package/dist/types/render/components/form-fields/parts/DropdownList.d.ts +1 -1
  42. package/dist/types/render/components/form-fields/parts/InputAdorner.d.ts +1 -1
  43. package/dist/types/render/components/form-fields/parts/SearchableSelect.d.ts +1 -0
  44. package/dist/types/render/components/form-fields/parts/SimpleSelect.d.ts +1 -0
  45. package/dist/types/render/components/form-fields/parts/Timepicker.d.ts +1 -1
  46. package/dist/types/render/components/icons/index.d.ts +16 -16
  47. package/dist/types/render/components/index.d.ts +17 -17
  48. package/dist/types/render/components/util/dateTimeUtil.d.ts +12 -12
  49. package/dist/types/render/components/util/numberFieldUtil.d.ts +4 -4
  50. package/dist/types/render/components/util/sanitizerUtil.d.ts +3 -3
  51. package/dist/types/render/context/FormContext.d.ts +12 -12
  52. package/dist/types/render/context/FormRenderContext.d.ts +6 -6
  53. package/dist/types/render/context/index.d.ts +2 -2
  54. package/dist/types/render/hooks/useCondition.d.ts +9 -9
  55. package/dist/types/render/hooks/useEvaluation.d.ts +6 -6
  56. package/dist/types/render/hooks/useExpressionValue.d.ts +5 -5
  57. package/dist/types/render/hooks/useKeyDownAction.d.ts +1 -1
  58. package/dist/types/render/hooks/useService.d.ts +1 -1
  59. package/dist/types/render/hooks/useValuesAsync.d.ts +28 -28
  60. package/dist/types/render/index.d.ts +11 -11
  61. package/dist/types/src/types.d.ts +35 -35
  62. package/dist/types/util/constants/DatetimeConstants.d.ts +24 -24
  63. package/dist/types/util/constants/ValuesSourceConstants.d.ts +18 -15
  64. package/dist/types/util/constants/index.d.ts +2 -2
  65. package/dist/types/util/feel.d.ts +15 -15
  66. package/dist/types/util/form.d.ts +6 -6
  67. package/dist/types/util/index.d.ts +26 -25
  68. package/dist/types/util/injector.d.ts +2 -2
  69. package/package.json +4 -4
package/dist/assets/form-js.css CHANGED
@@ -1,611 +1,715 @@
1
- /**
2
- * Theming
3
- */
4
- .fjs-container {
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-45: hsl(225, 10%, 45%);
8
- --color-grey-225-10-55: hsl(225, 10%, 55%);
9
- --color-grey-225-10-75: hsl(225, 10%, 75%);
10
- --color-grey-225-10-80: hsl(225, 10%, 80%);
11
- --color-grey-225-10-85: hsl(225, 10%, 85%);
12
- --color-grey-225-10-90: hsl(225, 10%, 90%);
13
- --color-grey-225-10-93: hsl(225, 10%, 93%);
14
- --color-grey-225-10-95: hsl(225, 10%, 95%);
15
- --color-grey-225-10-97: hsl(225, 10%, 97%);
16
-
17
- --color-blue-205-100-40: hsl(205, 100%, 40%);
18
- --color-blue-205-100-45: hsl(205, 100%, 45%);
19
- --color-blue-205-100-50: hsl(205, 100%, 50%);
20
- --color-blue-205-100-80: hsl(205, 100%, 80%);
21
- --color-blue-205-100-95: hsl(205, 100%, 95%);
22
-
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-95: hsl(360, 100%, 95%);
29
- --color-red-360-100-97: hsl(360, 100%, 97%);
30
-
31
- --color-white: hsl(0, 0%, 100%);
32
- --color-black: hsl(0, 0%, 0%);
33
-
34
- --color-background: var(--color-white);
35
- --color-background-disabled: var(--color-grey-225-10-95);
36
- --color-background-adornment: var(--color-grey-225-10-95);
37
- --color-text: var(--color-grey-225-10-15);
38
- --color-text-light: var(--color-grey-225-10-35);
39
- --color-text-lighter: var(--color-grey-225-10-45);
40
- --color-text-lightest: var(--color-grey-225-10-55);
41
- --color-text-inverted: var(--color-white);
42
- --color-borders: var(--color-grey-225-10-55);
43
- --color-borders-disabled: var(--color-grey-225-10-75);
44
- --color-borders-adornment: var(--color-grey-225-10-85);
45
- --color-warning: var(--color-red-360-100-45);
46
- --color-accent: var(--color-blue-205-100-40);
47
- --color-datepicker-focused-day: var(--color-grey-225-10-55);
48
-
49
- --font-family: 'IBM Plex Sans', sans-serif;
50
-
51
- --border-definition: 1px solid var(--color-borders);
52
- --border-definition-adornment: 1px solid var(--color-borders-adornment);
53
- --outline-definition: 1px solid var(--color-borders);
54
- --border-definition-disabled: 1px solid var(--color-borders-disabled);
55
-
56
- height: 100%;
57
- }
58
-
59
- /**
60
- * Layout styles
61
- */
62
- .fjs-container .fjs-vertical-layout {
63
- display: flex;
64
- flex-direction: column;
65
- }
66
-
67
- .fjs-container .fjs-columns {
68
- display: flex;
69
- flex-direction: row;
70
- }
71
-
72
- .fjs-container .fjs-vertical-group {
73
- display: flex;
74
- flex: 1;
75
- width: 100%;
76
- }
77
-
78
- .fjs-container .fjs-column {
79
- flex-grow: 1;
80
- }
81
-
82
- .fjs-container img {
83
- max-width: 100%;
84
- }
85
-
86
- /**
87
- * Visual styles
88
- */
89
- .fjs-container .fjs-form {
90
- font-family: var(--font-family);
91
- font-size: 14px;
92
- line-height: 1.3;
93
- font-weight: 400;
94
- color: var(--color-text);
95
- background-color: var(--color-background);
96
- position: relative;
97
- }
98
-
99
- .fjs-container .fjs-form * {
100
- box-sizing: border-box;
101
- }
102
-
103
- .fjs-container .fjs-form-field {
104
- margin: 16px;
105
- }
106
-
107
- .fjs-container .fjs-form-field-placeholder {
108
- color: var(--color-text-light);
109
- font-style: italic;
110
- }
111
-
112
- .fjs-container .fjs-form-field-placeholder svg {
113
- width: 36px;
114
- height: 36px;
115
- vertical-align: middle;
116
- margin-top: -2px;
117
- margin-right: 2px;
118
- }
119
-
120
- .fjs-container .fjs-input,
121
- .fjs-container .fjs-textarea,
122
- .fjs-container .fjs-select {
123
- border-color: var(--color-borders);
124
- background-color: var(--color-background);
125
- font-family: inherit;
126
- }
127
-
128
- .fjs-container .fjs-input::placeholder,
129
- .fjs-container .fjs-textarea::placeholder,
130
- .fjs-container .fjs-select > option:disabled,
131
- .fjs-container .fjs-select [disabled] {
132
- font-style: italic;
133
- letter-spacing: 0.25px;
134
- color: var(--color-text-lightest);
135
- }
136
-
137
- .fjs-container .fjs-form-field-label {
138
- display: flex;
139
- align-items: center;
140
- }
141
-
142
- .fjs-container .fjs-incollapsible-label {
143
- min-height: 18.2px;
144
- }
145
-
146
- .fjs-container .fjs-form-field-description {
147
- display: block;
148
- color: var(--color-text-light);
149
- }
150
-
151
- .fjs-container .fjs-form-field-label,
152
- .fjs-container .fjs-form-field-description {
153
- margin: 4px 0;
154
- }
155
-
156
- .fjs-container .fjs-form-field.required label::after,
157
- .fjs-container .fjs-form-field.required .group-title::after {
158
- content: '*';
159
- }
160
-
161
- .fjs-container .fjs-checkbox.group.required label::after,
162
- .fjs-container .fjs-radio.required label::after {
163
- display: none;
164
- }
165
-
166
- .fjs-container .fjs-input,
167
- .fjs-container .fjs-textarea,
168
- .fjs-container .fjs-select {
169
- background-color: var(--color-background);
170
- }
171
-
172
- .fjs-container .fjs-input-adornment {
173
- border-style: solid;
174
- border-color: var(--color-borders-adornment);
175
- background-color: var(--color-background-adornment);
176
- color: var(--color-text-lighter);
177
- padding: 8px;
178
- width: auto !important;
179
- min-width: 34px;
180
- text-align: center;
181
- }
182
-
183
- .fjs-container .fjs-input-adornment svg {
184
- display: block;
185
- margin: auto;
186
- width: 15px;
187
- }
188
-
189
- .fjs-container .fjs-input-adornment span {
190
- color: var(--color-background-adornment);
191
- }
192
-
193
- .fjs-container .fjs-input::placeholder,
194
- .fjs-container .fjs-textarea::placeholder,
195
- .fjs-container .fjs-select > option:disabled,
196
- .fjs-container .fjs-select [disabled] {
197
- font-style: italic;
198
- letter-spacing: 0.25px;
199
- color: var(--color-text-lightest);
200
- }
201
-
202
- .fjs-container .fjs-input[type='text'],
203
- .fjs-container .fjs-input[type='email'],
204
- .fjs-container .fjs-input[type='tel'],
205
- .fjs-container .fjs-input[type='number'],
206
- .fjs-container .fjs-button[type='submit'],
207
- .fjs-container .fjs-button[type='reset'],
208
- .fjs-container .fjs-textarea,
209
- .fjs-container .fjs-select {
210
- display: block;
211
- width: 100%;
212
- padding: 8px;
213
- margin: 4px 0;
214
- border: var(--border-definition);
215
- border-radius: 3px;
216
- }
217
-
218
- .fjs-container .fjs-datepicker,
219
- .fjs-container .fjs-timepicker,
220
- .fjs-container .fjs-datetime-subsection {
221
- width: 100%;
222
- }
223
-
224
- .fjs-container .fjs-datetime-separator {
225
- width: 10px;
226
- }
227
-
228
- .fjs-container .fjs-input-group {
229
- display: flex;
230
- width: 100%;
231
- margin: 4px 0;
232
- border: var(--border-definition);
233
- border-radius: 3px;
234
- }
235
-
236
- .fjs-container .fjs-taglist .fjs-taglist-input,
237
- .fjs-container .fjs-input-group .fjs-input {
238
- border: none;
239
- border-radius: 0;
240
- margin: 0;
241
- outline: 0;
242
- width: auto;
243
- flex-grow: 1;
244
- }
245
-
246
- .fjs-container .fjs-input-group .fjs-input-adornment {
247
- border-width: 0;
248
- }
249
-
250
- .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
251
- border-left-width: 1px;
252
- }
253
-
254
- .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
255
- border-right-width: 1px;
256
- }
257
-
258
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
259
- border-radius: 0 3px 3px 0;
260
- }
261
-
262
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
263
- border-radius: 3px 0 0 3px;
264
- }
265
-
266
- .fjs-container .fjs-input-group .fjs-input,
267
- .fjs-container .fjs-input-group.disabled .fjs-input {
268
- border-radius: 3px;
269
- }
270
-
271
- .fjs-container .fjs-vertical-group {
272
- display: flex;
273
- width: 100%;
274
- }
275
-
276
- .fjs-container .flatpickr-wrapper {
277
- width: 100%;
278
- }
279
-
280
- .fjs-container .fjs-textarea {
281
- resize: none;
282
- overflow: hidden;
283
- height: 75px;
284
- font-size: 14px;
285
- }
286
-
287
- .fjs-container .fjs-number-arrow-container {
288
- display: flex;
289
- flex-direction: column;
290
- border-radius: 0 2px 2px 0;
291
- width: 23px;
292
- overflow: clip;
293
- border-left: var(--border-definition-adornment);
294
- }
295
-
296
- .fjs-container .fjs-number-arrow-separator {
297
- height: 1px;
298
- background-color: var(--color-borders-adornment);
299
- }
300
-
301
- .fjs-container .fjs-number-arrow-container button {
302
- border: none;
303
- flex: 1;
304
- color: var(--color-text-light);
305
- background-color: var(--color-grey-225-10-95);
306
- font-weight: bold;
307
- font-size: 10px;
308
- }
309
-
310
- .fjs-container .fjs-number-arrow-container button:hover {
311
- background-color: var(--color-grey-225-10-93);
312
- color: var(--color-text);
313
- }
314
-
315
-
316
-
317
- .fjs-container .fjs-radio {
318
- display: flex;
319
- flex-direction: column;
320
- }
321
-
322
- .fjs-container .fjs-input[type='checkbox'],
323
- .fjs-container .fjs-input[type='radio'] {
324
- margin: 6px 10px 6px 4px;
325
- }
326
-
327
- .fjs-container .fjs-button[type='submit'] {
328
- color: var(--color-text-inverted);
329
- background-color: var(--color-accent);
330
- border-color: var(--color-accent);
331
- }
332
-
333
- .fjs-container .fjs-button[type='reset'] {
334
- color: var(--color-text);
335
- background-color: transparent;
336
- border-color: var(--color-borders);
337
- }
338
-
339
- .fjs-container .fjs-button[type='submit'],
340
- .fjs-container .fjs-button[type='reset'] {
341
- min-width: 100px;
342
- width: auto;
343
- }
344
-
345
- .fjs-container .fjs-button[type='submit'] {
346
- font-weight: 600;
347
- }
348
-
349
- .fjs-container .fjs-taglist:focus-within,
350
- .fjs-container .fjs-input-group:focus-within,
351
- .fjs-container .fjs-input[type='text']:focus,
352
- .fjs-container .fjs-input[type='email']:focus,
353
- .fjs-container .fjs-input[type='tel']:focus,
354
- .fjs-container .fjs-input[type='number']:focus,
355
- .fjs-container .fjs-button[type='submit']:focus,
356
- .fjs-container .fjs-button[type='reset']:focus,
357
- .fjs-container .fjs-textarea:focus,
358
- .fjs-container .fjs-select:focus {
359
- outline: var(--outline-definition);
360
- }
361
-
362
- .fjs-container .fjs-input-group .fjs-input,
363
- .fjs-container .fjs-input-group .fjs-input:focus {
364
- outline: none;
365
- }
366
-
367
- .fjs-container .fjs-input-group .fjs-input,
368
- .fjs-container .fjs-input-group .fjs-input:focus {
369
- outline: none;
370
- }
371
-
372
- .fjs-container .fjs-button[type='submit']:focus {
373
- border-color: var(--color-accent);
374
- }
375
-
376
- .fjs-container .fjs-input:disabled,
377
- .fjs-container .fjs-textarea:disabled,
378
- .fjs-container .fjs-select:disabled,
379
- .fjs-container .fjs-number-arrow-container.disabled button,
380
- .fjs-container .fjs-input-group.disabled,
381
- .fjs-container .fjs-taglist.disabled {
382
- background-color: var(--color-background-disabled);
383
- border-color: var(--color-borders-disabled);
384
- }
385
-
386
- .fjs-container .fjs-button[type='submit']:disabled,
387
- .fjs-container .fjs-button[type='reset']:disabled {
388
- color: var(--text-light);
389
- background-color: var(--color-background-disabled);
390
- border-color: var(--color-borders-disabled);
391
- }
392
-
393
- .fjs-container .fjs-input-group.disabled .fjs-input,
394
- .fjs-container .fjs-input-group.disabled .fjs-input-adornment {
395
- border-color: var(--color-borders-disabled);
396
- }
397
-
398
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
399
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
400
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
401
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
402
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
403
- border-color: var(--color-warning);
404
- outline-color: var(--color-warning);
405
- }
406
-
407
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
408
- border-color: var(--color-red-360-100-92);
409
- }
410
-
411
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
412
- background-color: var(--color-red-360-100-92);
413
- }
414
-
415
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
416
- background-color: var(--color-red-360-100-97);
417
- }
418
-
419
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
420
- background-color: var(--color-red-360-100-95);
421
- }
422
-
423
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
424
- border-color: var(--color-red-360-100-92);
425
- background: var(--color-red-360-100-97);
426
- }
427
-
428
- .fjs-container .fjs-form-field-error {
429
- color: var(--color-warning);
430
- }
431
-
432
- .fjs-container .fjs-form-field-error > ul {
433
- list-style-type: none;
434
- margin: 0;
435
- padding: 0;
436
- }
437
-
438
- .fjs-container .fjs-form-field-error > ul > li {
439
- list-style-type: none;
440
- }
441
-
442
- .fjs-container .fjs-form-field-text a {
443
- color: var(--color-accent);
444
- }
445
-
446
- .fjs-container .fjs-taglist-anchor,
447
- .fjs-container .fjs-timepicker-anchor {
448
- position: relative;
449
- }
450
-
451
- .fjs-container .fjs-taglist {
452
- display: flex;
453
- flex-wrap: wrap;
454
- gap: 5px;
455
- border: var(--color-borders) solid 1px;
456
- border-radius: 3px;
457
- margin: 4px 0;
458
- padding: 5px;
459
- background-color: var(--color-background);
460
- }
461
-
462
- .fjs-container .fjs-taglist .fjs-taglist-tag {
463
- display: flex;
464
- overflow: hidden;
465
- user-select: none;
466
- border-radius: 2px;
467
- background-color: var(--color-grey-225-10-90);
468
- }
469
-
470
- .fjs-container .fjs-taglist .fjs-taglist-tags {
471
- display: flex;
472
- flex-wrap: wrap;
473
- gap: 5px;
474
- }
475
-
476
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
477
- padding: 2px 6px 2px 8px;
478
- }
479
-
480
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
481
- overflow: clip;
482
- width: 22px;
483
- height: 22px;
484
- text-align: center;
485
- line-height: 28px;
486
- background-color: var(--color-grey-225-10-80);
487
- border: none;
488
- padding: 1px 0;
489
- color: var(--color-black);
490
- }
491
-
492
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove svg {
493
- opacity: 0.6;
494
- }
495
-
496
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
497
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
498
- background-color: var(--color-grey-225-10-75);
499
- }
500
-
501
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
502
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
503
- opacity: 1;
504
- }
505
-
506
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
507
- outline: none;
508
- }
509
-
510
- .fjs-container .fjs-taglist .fjs-taglist-input {
511
- border: none;
512
- background-color: transparent;
513
- min-width: 100px;
514
- height: 22px;
515
- flex-grow: 1;
516
- }
517
-
518
- .fjs-container .fjs-dropdownlist {
519
- z-index: 1;
520
- position: absolute;
521
- user-select: none;
522
- overflow-y: auto;
523
- width: 100%;
524
- border-radius: 3px;
525
- margin-top: 3px;
526
- box-shadow: 0px 0px 5px var(--color-grey-225-10-85);
527
- background-color: var(--color-white);
528
- }
529
-
530
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
531
- padding: 6px 8px;
532
- border-bottom: 1px solid var(--color-grey-225-10-90);
533
- color: var(--color-grey-225-10-35);
534
- }
535
-
536
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
537
- border-bottom: none;
538
- }
539
-
540
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
541
- background-color: var(--color-grey-225-10-90);
542
- color: var(--color-black);
543
- }
544
-
545
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
546
- padding: 6px 8px;
547
- color: var(--color-text-lightest);
548
- }
549
-
550
- .fjs-container .fjs-image-container {
551
- width: fit-content;
552
- height: fit-content;
553
- }
554
-
555
- .fjs-container .fjs-image {
556
- object-fit: contain;
557
- }
558
-
559
- .fjs-container .fjs-image-placeholder {
560
- height: 64px;
561
- margin: 4px 0;
562
- }
563
-
564
- /**
565
- * Flatpickr style adjustments
566
- */
567
-
568
- .flatpickr-day.today {
569
- border-color: transparent !important;
570
- background-color: transparent !important;
571
- font-weight: bold !important;
572
- }
573
-
574
- .flatpickr-day.today:hover,
575
- .flatpickr-day.today:focus {
576
- border-color: var(--color-borders) !important;
577
- background-color: var(--color-datepicker-focused-day) !important;
578
- color: var(--color-text-inverted) !important;
579
- }
580
-
581
- .flatpickr-day.selected {
582
- border-color: var(--color-accent) !important;
583
- background-color: inherit !important;
584
- color: inherit !important;
585
- font-weight: normal !important;
586
- }
587
-
588
- .flatpickr-day.selected.today {
589
- font-weight: bold !important;
590
- }
591
-
592
- .flatpickr-day.selected:hover,
593
- .flatpickr-day.selected:focus {
594
- background-color: var(--color-accent) !important;
595
- font-weight: bold !important;
596
- color: var(--color-text-inverted) !important;
597
- }
598
-
599
- .flatpickr-days, .flatpickr-weekdays {
600
- padding: 10px !important;
601
- width: 100% !important;
602
- }
603
-
604
- .fjs-container .flatpickr-calendar.hasTime.noCalendar {
605
- width: auto !important;
606
- max-width: 250px !important;
607
- }
608
-
609
- .flatpickr-calendar {
610
- width: 326px !important;
611
- }
1
+ /**
2
+ * Theming
3
+ */
4
+ .fjs-container {
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-45: hsl(225, 10%, 45%);
8
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
9
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
10
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
11
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
12
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
13
+ --color-grey-225-10-93: hsl(225, 10%, 93%);
14
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
15
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
16
+
17
+ --color-blue-205-100-40: hsl(205, 100%, 40%);
18
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
19
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
20
+ --color-blue-205-100-80: hsl(205, 100%, 80%);
21
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
22
+
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-95: hsl(360, 100%, 95%);
29
+ --color-red-360-100-97: hsl(360, 100%, 97%);
30
+
31
+ --color-white: hsl(0, 0%, 100%);
32
+ --color-black: hsl(0, 0%, 0%);
33
+
34
+ --color-background: var(--color-white);
35
+ --color-background-disabled: var(--color-grey-225-10-95);
36
+ --color-background-adornment: var(--color-grey-225-10-95);
37
+ --color-icon-base: var(--color-black);
38
+ --color-text: var(--color-grey-225-10-15);
39
+ --color-text-light: var(--color-grey-225-10-35);
40
+ --color-text-lighter: var(--color-grey-225-10-45);
41
+ --color-text-lightest: var(--color-grey-225-10-55);
42
+ --color-text-inverted: var(--color-white);
43
+ --color-borders: var(--color-grey-225-10-55);
44
+ --color-borders-disabled: var(--color-grey-225-10-75);
45
+ --color-borders-adornment: var(--color-grey-225-10-85);
46
+ --color-warning: var(--color-red-360-100-45);
47
+ --color-accent: var(--color-blue-205-100-40);
48
+ --color-datepicker-focused-day: var(--color-grey-225-10-55);
49
+
50
+ --font-family: 'IBM Plex Sans', sans-serif;
51
+
52
+ --font-size-base: 14px;
53
+ --font-size-input: 14px;
54
+ --font-size-label: 12px;
55
+
56
+ --line-height-base: 20px;
57
+ --line-height-input: 18px;
58
+ --line-height-label: 16px;
59
+
60
+ --letter-spacing-base: .16px;
61
+ --letter-spacing-input: .16px;
62
+ --letter-spacing-label: .32px;
63
+
64
+ --form-field-height: 36px;
65
+
66
+ --border-definition: 1px solid var(--color-borders);
67
+ --border-definition-adornment: 1px solid var(--color-borders-adornment);
68
+ --outline-definition: 1px solid var(--color-borders);
69
+ --border-definition-disabled: 1px solid var(--color-borders-disabled);
70
+
71
+ height: 100%;
72
+ }
73
+
74
+ /**
75
+ * Layout styles
76
+ */
77
+ .fjs-container .fjs-vertical-layout {
78
+ display: flex;
79
+ flex-direction: column;
80
+ }
81
+
82
+ .fjs-container .fjs-columns {
83
+ display: flex;
84
+ flex-direction: row;
85
+ }
86
+
87
+ .fjs-container .fjs-vertical-group {
88
+ display: flex;
89
+ flex: 1;
90
+ width: 100%;
91
+ }
92
+
93
+ .fjs-container .fjs-column {
94
+ flex-grow: 1;
95
+ }
96
+
97
+ .fjs-container img {
98
+ max-width: 100%;
99
+ }
100
+
101
+ /**
102
+ * Visual styles
103
+ */
104
+ .fjs-container .fjs-form {
105
+ font-family: var(--font-family);
106
+ font-size: var(--font-size-base);
107
+ line-height: var(--line-height-base);
108
+ letter-spacing: var(--letter-spacing-base);
109
+ font-weight: 400;
110
+ color: var(--color-text);
111
+ background-color: var(--color-background);
112
+ position: relative;
113
+ }
114
+
115
+ .fjs-container .fjs-form * {
116
+ box-sizing: border-box;
117
+ }
118
+
119
+ .fjs-container .fjs-form-field {
120
+ margin: 16px;
121
+ }
122
+
123
+ .fjs-container .fjs-input,
124
+ .fjs-container .fjs-taglist-input,
125
+ .fjs-container .fjs-textarea,
126
+ .fjs-container .fjs-select {
127
+ border-color: var(--color-borders);
128
+ background-color: var(--color-background);
129
+ font-family: inherit;
130
+ line-height: inherit;
131
+ letter-spacing: inherit;
132
+ }
133
+
134
+ .fjs-container .fjs-button {
135
+ font-family: inherit;
136
+ line-height: inherit;
137
+ letter-spacing: inherit;
138
+ }
139
+
140
+ .fjs-container .fjs-input::placeholder,
141
+ .fjs-container .fjs-taglist-input::placeholder,
142
+ .fjs-container .fjs-textarea::placeholder,
143
+ .fjs-container .fjs-select > option:disabled,
144
+ .fjs-container .fjs-select [disabled] {
145
+ color: var(--color-text-lightest);
146
+ font-size: var(--font-size-input);
147
+ line-height: var(--line-height-input);
148
+ letter-spacing: var(--letter-spacing-input);
149
+ }
150
+
151
+ .fjs-container .fjs-form-field-label {
152
+ display: flex;
153
+ align-items: center;
154
+ }
155
+
156
+ .fjs-container .fjs-incollapsible-label {
157
+ min-height: var(--line-height-label);
158
+ }
159
+
160
+ .fjs-container .fjs-form-field-label,
161
+ .fjs-container .fjs-form-field-description,
162
+ .fjs-container .fjs-form-field-error {
163
+ font-size: var(--font-size-label);
164
+ line-height: var(--line-height-label);
165
+ letter-spacing: var(--letter-spacing-label);
166
+ }
167
+
168
+ .fjs-container .fjs-form-field-label {
169
+ color: var(--color-text-light);
170
+ }
171
+
172
+ .fjs-container .fjs-form-field-description {
173
+ color: var(--color-text-lighter);
174
+ }
175
+
176
+ .fjs-container .fjs-form-field-checkbox .fjs-form-field-label,
177
+ .fjs-container .fjs-form-field-checklist .fjs-form-field-label:not(:first-child),
178
+ .fjs-container .fjs-form-field-radio .fjs-form-field-label:not(:first-child) {
179
+ font-size: var(--font-size-input);
180
+ line-height: var(--line-height-input);
181
+ letter-spacing: var(--letter-spacing-input);
182
+ color: var(--color-text);
183
+ }
184
+
185
+ .fjs-container .fjs-form-field-checklist .fjs-form-field-label:first-child,
186
+ .fjs-container .fjs-form-field-radio .fjs-form-field-label:first-child {
187
+ margin-bottom: 4px;
188
+ }
189
+
190
+ .fjs-container .fjs-form-field.required label::after,
191
+ .fjs-container .fjs-form-field.required .group-title::after {
192
+ content: '*';
193
+ }
194
+
195
+ .fjs-container .fjs-checkbox.group.required label::after,
196
+ .fjs-container .fjs-radio.required label::after {
197
+ display: none;
198
+ }
199
+
200
+ .fjs-container .fjs-input,
201
+ .fjs-container .fjs-textarea,
202
+ .fjs-container .fjs-select {
203
+ background-color: var(--color-background);
204
+ font-size: var(--font-size-input);
205
+ line-height: var(--line-height-input);
206
+ letter-spacing: var(--letter-spacing-input);
207
+ }
208
+
209
+ .fjs-container .fjs-input-adornment {
210
+ border-style: solid;
211
+ border-color: var(--color-borders-adornment);
212
+ background-color: var(--color-background-adornment);
213
+ line-height: var(--line-height-input);
214
+ color: var(--color-text-lighter);
215
+ padding: 8px;
216
+ width: auto !important;
217
+ min-width: 34px;
218
+ text-align: center;
219
+ overflow: hidden;
220
+ text-overflow: ellipsis;
221
+ display: flex;
222
+ }
223
+
224
+ .fjs-container .fjs-input-adornment svg {
225
+ display: block;
226
+ margin: auto;
227
+ width: 15px;
228
+ }
229
+
230
+ .fjs-container .fjs-input-adornment span {
231
+ color: var(--color-background-adornment);
232
+ }
233
+
234
+
235
+ .fjs-container .fjs-input[type='text'],
236
+ .fjs-container .fjs-input[type='email'],
237
+ .fjs-container .fjs-input[type='tel'],
238
+ .fjs-container .fjs-input[type='number'],
239
+ .fjs-container .fjs-button[type='submit'],
240
+ .fjs-container .fjs-button[type='reset'],
241
+ .fjs-container .fjs-textarea,
242
+ .fjs-container .fjs-select {
243
+ display: block;
244
+ width: 100%;
245
+ padding: 8px;
246
+ margin: 4px 0;
247
+ border: var(--border-definition);
248
+ border-radius: 3px;
249
+ }
250
+
251
+ .fjs-container .fjs-input-group .fjs-input[type='text'],
252
+ .fjs-container .fjs-input-group .fjs-input[type='email'],
253
+ .fjs-container .fjs-input-group .fjs-input[type='tel'],
254
+ .fjs-container .fjs-input-group .fjs-input[type='number'],
255
+ .fjs-container .fjs-select {
256
+ height: var(--form-field-height);
257
+ }
258
+
259
+ .fjs-container .fjs-taglist {
260
+ min-height: var(--form-field-height);
261
+ }
262
+
263
+
264
+ .fjs-container .fjs-datepicker,
265
+ .fjs-container .fjs-timepicker,
266
+ .fjs-container .fjs-datetime-subsection {
267
+ width: 100%;
268
+ }
269
+
270
+ .fjs-container .fjs-form-field-datetime .fjs-input-adornment svg {
271
+ color: var(--color-icon-base);
272
+ }
273
+
274
+ .fjs-container .fjs-datetime-separator {
275
+ width: 10px;
276
+ }
277
+
278
+ .fjs-container .fjs-input-group {
279
+ display: flex;
280
+ width: 100%;
281
+ height: var(--form-field-height);
282
+ margin: 4px 0;
283
+ border: var(--border-definition);
284
+ border-radius: 3px;
285
+ }
286
+
287
+
288
+ .fjs-container .fjs-input-group .fjs-input[type='text'],
289
+ .fjs-container .fjs-input-group .fjs-input[type='email'],
290
+ .fjs-container .fjs-input-group .fjs-input[type='tel'],
291
+ .fjs-container .fjs-input-group .fjs-input[type='number'],
292
+ .fjs-container .fjs-input-group .fjs-taglist,
293
+ .fjs-container .fjs-input-group .fjs-select {
294
+ height: unset;
295
+ }
296
+
297
+ .fjs-container .fjs-taglist .fjs-taglist-input,
298
+ .fjs-container .fjs-input-group .fjs-input {
299
+ border: none;
300
+ border-radius: 0;
301
+ margin: 0;
302
+ outline: 0;
303
+ width: auto;
304
+ flex-grow: 1;
305
+ }
306
+
307
+ .fjs-container .fjs-input-group .fjs-select-display {
308
+ flex: 1;
309
+ padding: 8px;
310
+ user-select: none;
311
+ }
312
+
313
+ .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
314
+ .fjs-container .fjs-input-group.disabled .fjs-select-display {
315
+ color: var(--color-text-lightest);
316
+ }
317
+
318
+ .fjs-container .fjs-input-group .fjs-input-adornment {
319
+ border-width: 0;
320
+ }
321
+
322
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
323
+ border-left-width: 1px;
324
+ }
325
+
326
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
327
+ border-right-width: 1px;
328
+ }
329
+
330
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
331
+ border-radius: 0 3px 3px 0;
332
+ }
333
+
334
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
335
+ border-radius: 3px 0 0 3px;
336
+ }
337
+
338
+ .fjs-container .fjs-input-group .fjs-input,
339
+ .fjs-container .fjs-input-group.fjs-disabled .fjs-input {
340
+ border-radius: 3px;
341
+ }
342
+
343
+ .fjs-container .fjs-vertical-group {
344
+ display: flex;
345
+ width: 100%;
346
+ }
347
+
348
+ .fjs-container .flatpickr-wrapper {
349
+ width: 100%;
350
+ }
351
+
352
+ .fjs-container .fjs-textarea {
353
+ resize: none;
354
+ overflow: hidden;
355
+ height: 75px;
356
+ }
357
+
358
+ .fjs-container .fjs-select-cross,
359
+ .fjs-container .fjs-select-arrow {
360
+ padding: 6px 10px;
361
+ }
362
+
363
+ .fjs-container .fjs-number-arrow-container {
364
+ display: flex;
365
+ flex-direction: column;
366
+ border-radius: 0 2px 2px 0;
367
+ width: 23px;
368
+ overflow: clip;
369
+ border-left: var(--border-definition-adornment);
370
+ }
371
+
372
+ .fjs-container .fjs-number-arrow-separator {
373
+ height: 1px;
374
+ background-color: var(--color-borders-adornment);
375
+ }
376
+
377
+ .fjs-container .fjs-number-arrow-container button {
378
+ border: none;
379
+ flex: 1;
380
+ color: var(--color-text-light);
381
+ background-color: var(--color-grey-225-10-95);
382
+ font-weight: bold;
383
+ font-size: 10px;
384
+ line-height: 15px;
385
+ }
386
+
387
+ .fjs-container .fjs-number-arrow-container button:hover {
388
+ background-color: var(--color-grey-225-10-93);
389
+ color: var(--color-text);
390
+ }
391
+
392
+
393
+
394
+ .fjs-container .fjs-radio {
395
+ display: flex;
396
+ flex-direction: column;
397
+ }
398
+
399
+ .fjs-container .fjs-input[type='checkbox'],
400
+ .fjs-container .fjs-input[type='radio'] {
401
+ margin: 6px 10px 6px 4px;
402
+ }
403
+
404
+ .fjs-container .fjs-button[type='submit'] {
405
+ color: var(--color-text-inverted);
406
+ background-color: var(--color-accent);
407
+ border-color: var(--color-accent);
408
+ }
409
+
410
+ .fjs-container .fjs-button[type='reset'] {
411
+ color: var(--color-text);
412
+ background-color: transparent;
413
+ border-color: var(--color-borders);
414
+ }
415
+
416
+ .fjs-container .fjs-button[type='submit'],
417
+ .fjs-container .fjs-button[type='reset'] {
418
+ min-width: 100px;
419
+ width: auto;
420
+ }
421
+
422
+ .fjs-container .fjs-button[type='submit'] {
423
+ font-weight: 600;
424
+ }
425
+
426
+ .fjs-container .fjs-taglist:focus-within,
427
+ .fjs-container .fjs-input-group:focus-within,
428
+ .fjs-container .fjs-input[type='text']:focus,
429
+ .fjs-container .fjs-input[type='email']:focus,
430
+ .fjs-container .fjs-input[type='tel']:focus,
431
+ .fjs-container .fjs-input[type='number']:focus,
432
+ .fjs-container .fjs-button[type='submit']:focus,
433
+ .fjs-container .fjs-button[type='reset']:focus,
434
+ .fjs-container .fjs-textarea:focus,
435
+ .fjs-container .fjs-select:focus {
436
+ outline: var(--outline-definition);
437
+ }
438
+
439
+ .fjs-container .fjs-input-group .fjs-input,
440
+ .fjs-container .fjs-input-group .fjs-input:focus {
441
+ outline: none;
442
+ }
443
+
444
+ .fjs-container .fjs-input-group .fjs-input,
445
+ .fjs-container .fjs-input-group .fjs-input:focus {
446
+ outline: none;
447
+ }
448
+
449
+ .fjs-container .fjs-button[type='submit']:focus {
450
+ border-color: var(--color-accent);
451
+ }
452
+
453
+ .fjs-container .fjs-input:disabled,
454
+ .fjs-container .fjs-textarea:disabled,
455
+ .fjs-container .fjs-select:disabled,
456
+ .fjs-container .fjs-number-arrow-container.fjs-disabled button,
457
+ .fjs-container .fjs-input-group.fjs-disabled,
458
+ .fjs-container .fjs-taglist.fjs-disabled {
459
+ background-color: var(--color-background-disabled);
460
+ border-color: var(--color-borders-disabled);
461
+ }
462
+
463
+ .fjs-container .fjs-button[type='submit']:disabled,
464
+ .fjs-container .fjs-button[type='reset']:disabled {
465
+ color: var(--text-light);
466
+ background-color: var(--color-background-disabled);
467
+ border-color: var(--color-borders-disabled);
468
+ }
469
+
470
+ .fjs-container .fjs-input-group.fjs-disabled .fjs-input,
471
+ .fjs-container .fjs-input-group.fjs-disabled .fjs-input-adornment {
472
+ border-color: var(--color-borders-disabled);
473
+ }
474
+
475
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
476
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
477
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
478
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
479
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
480
+ border-color: var(--color-warning);
481
+ outline-color: var(--color-warning);
482
+ }
483
+
484
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
485
+ border-color: var(--color-red-360-100-92);
486
+ }
487
+
488
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
489
+ background-color: var(--color-red-360-100-92);
490
+ }
491
+
492
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
493
+ background-color: var(--color-red-360-100-97);
494
+ }
495
+
496
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
497
+ background-color: var(--color-red-360-100-95);
498
+ }
499
+
500
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
501
+ border-color: var(--color-red-360-100-92);
502
+ background: var(--color-red-360-100-97);
503
+ }
504
+
505
+ .fjs-container .fjs-form-field-error {
506
+ color: var(--color-warning);
507
+ }
508
+
509
+ .fjs-container .fjs-form-field-error > ul {
510
+ list-style-type: none;
511
+ margin: 0;
512
+ padding: 0;
513
+ }
514
+
515
+ .fjs-container .fjs-form-field-error > ul > li {
516
+ list-style-type: none;
517
+ }
518
+
519
+ .fjs-container .fjs-form-field-text a {
520
+ color: var(--color-accent);
521
+ }
522
+
523
+ .fjs-container .fjs-form-field-text a {
524
+ color: var(--color-accent);
525
+ }
526
+
527
+ .fjs-container .fjs-form-field-text .fjs-disabled-link {
528
+ pointer-events: none;
529
+ cursor: default;
530
+ }
531
+
532
+ .fjs-container .fjs-taglist-anchor,
533
+ .fjs-container .fjs-select-anchor,
534
+ .fjs-container .fjs-timepicker-anchor {
535
+ position: relative;
536
+ }
537
+
538
+ .fjs-container .fjs-taglist-anchor .fjs-dropdownlist,
539
+ .fjs-container .fjs-select-anchor .fjs-dropdownlist {
540
+ position: absolute;
541
+ top: -5px;
542
+ }
543
+
544
+ .fjs-container .fjs-taglist {
545
+ display: flex;
546
+ flex-wrap: wrap;
547
+ gap: 5px;
548
+ border: var(--color-borders) solid 1px;
549
+ border-radius: 3px;
550
+ margin: 4px 0;
551
+ padding: 5px;
552
+ background-color: var(--color-background);
553
+ }
554
+
555
+ .fjs-container .fjs-taglist .fjs-taglist-tag {
556
+ display: flex;
557
+ overflow: hidden;
558
+ user-select: none;
559
+ background-color: var(--color-grey-225-10-90);
560
+ border-radius: 2px;
561
+ }
562
+
563
+ .fjs-container .fjs-taglist .fjs-taglist-tag.fjs-disabled {
564
+ background-color: var(--color-grey-225-10-85);
565
+ }
566
+
567
+ .fjs-container .fjs-taglist .fjs-taglist-tags {
568
+ display: flex;
569
+ flex-wrap: wrap;
570
+ gap: 5px;
571
+ }
572
+
573
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
574
+ padding: 2px 6px 2px 8px;
575
+ }
576
+
577
+ .fjs-container .fjs-taglist .fjs-taglist-tag.fjs-disabled .fjs-taglist-tag-label {
578
+ padding: 2px 8px;
579
+ }
580
+
581
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
582
+ overflow: clip;
583
+ width: 24px;
584
+ height: 24px;
585
+ text-align: center;
586
+ line-height: 28px;
587
+ background-color: var(--color-grey-225-10-80);
588
+ border: none;
589
+ padding: 1px 0;
590
+ }
591
+
592
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
593
+ margin-bottom: 4px;
594
+ opacity: 0.6;
595
+ color: var(--color-icon-base);
596
+ }
597
+
598
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
599
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
600
+ background-color: var(--color-grey-225-10-75);
601
+ }
602
+
603
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
604
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
605
+ opacity: 1;
606
+ }
607
+
608
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
609
+ outline: none;
610
+ }
611
+
612
+ .fjs-container .fjs-taglist .fjs-taglist-input {
613
+ border: none;
614
+ background-color: transparent;
615
+ min-width: 100px;
616
+ height: 22px;
617
+ margin: 1px 0;
618
+ flex-grow: 1;
619
+ }
620
+
621
+ .fjs-container .fjs-dropdownlist {
622
+ z-index: 1;
623
+ position: absolute;
624
+ user-select: none;
625
+ overflow-y: auto;
626
+ width: 100%;
627
+ border-radius: 3px;
628
+ margin-top: 3px;
629
+ box-shadow: 0px 0px 5px var(--color-grey-225-10-85);
630
+ background-color: var(--color-white);
631
+ }
632
+
633
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
634
+ padding: 6px 8px;
635
+ border-bottom: 1px solid var(--color-grey-225-10-90);
636
+ color: var(--color-grey-225-10-35);
637
+ }
638
+
639
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
640
+ border-bottom: none;
641
+ }
642
+
643
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
644
+ background-color: var(--color-grey-225-10-90);
645
+ color: var(--color-black);
646
+ }
647
+
648
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
649
+ padding: 6px 8px;
650
+ color: var(--color-text-lightest);
651
+ }
652
+
653
+ .fjs-container .fjs-image-container {
654
+ width: fit-content;
655
+ height: fit-content;
656
+ }
657
+
658
+ .fjs-container .fjs-image {
659
+ object-fit: contain;
660
+ }
661
+
662
+ .fjs-container .fjs-image-placeholder {
663
+ height: 64px;
664
+ margin: 4px 0;
665
+ }
666
+
667
+ /**
668
+ * Flatpickr style adjustments
669
+ */
670
+
671
+ .fjs-container .flatpickr-day.today {
672
+ border-color: transparent;
673
+ background-color: transparent;
674
+ font-weight: bold;
675
+ }
676
+
677
+ .fjs-container .flatpickr-day.today:hover,
678
+ .fjs-container .flatpickr-day.today:focus {
679
+ border-color: var(--color-borders);
680
+ background-color: var(--color-datepicker-focused-day);
681
+ color: var(--color-text-inverted);
682
+ }
683
+
684
+ .fjs-container .flatpickr-day.selected {
685
+ border-color: var(--color-accent);
686
+ background-color: inherit;
687
+ color: inherit;
688
+ font-weight: normal;
689
+ }
690
+
691
+ .fjs-container .flatpickr-day.selected.today {
692
+ font-weight: bold;
693
+ }
694
+
695
+ .fjs-container .flatpickr-day.selected:hover,
696
+ .fjs-container .flatpickr-day.selected:focus {
697
+ background-color: var(--color-accent);
698
+ font-weight: bold;
699
+ color: var(--color-text-inverted);
700
+ border-color: var(--color-accent);
701
+ }
702
+
703
+ .fjs-container .flatpickr-days, .flatpickr-weekdays {
704
+ padding: 10px;
705
+ width: 100%;
706
+ }
707
+
708
+ .fjs-container .flatpickr-calendar.hasTime.noCalendar {
709
+ width: auto;
710
+ max-width: 250px;
711
+ }
712
+
713
+ .fjs-container .flatpickr-calendar {
714
+ width: 326px;
715
+ }