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