@bpmn-io/form-js-viewer 0.13.0 → 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 -779
  4. package/dist/assets/form-js.css +5 -3
  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 +3 -3
package/dist/assets/form-js-base.css CHANGED
@@ -1,779 +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
- display: flex;
274
- overflow: hidden;
275
- }
276
-
277
- .fjs-container .fjs-input-adornment span {
278
- width: 100%;
279
- text-align: center;
280
- overflow: hidden;
281
- text-overflow: ellipsis;
282
- white-space: nowrap;
283
- }
284
-
285
- .fjs-container .fjs-input-adornment svg {
286
- margin: auto;
287
- }
288
-
289
- .fjs-container .fjs-input[type='text'],
290
- .fjs-container .fjs-input[type='email'],
291
- .fjs-container .fjs-input[type='tel'],
292
- .fjs-container .fjs-input[type='number'],
293
- .fjs-container .fjs-button[type='submit'],
294
- .fjs-container .fjs-button[type='reset'],
295
- .fjs-container .fjs-textarea,
296
- .fjs-container .fjs-select {
297
- display: block;
298
- width: 100%;
299
- padding: 8px;
300
- margin: 4px 0;
301
- border: var(--border-definition);
302
- border-radius: 3px;
303
- }
304
-
305
- .fjs-container .fjs-input-group .fjs-input[type='text'],
306
- .fjs-container .fjs-input-group .fjs-input[type='email'],
307
- .fjs-container .fjs-input-group .fjs-input[type='tel'],
308
- .fjs-container .fjs-input-group .fjs-input[type='number'],
309
- .fjs-container .fjs-select {
310
- height: var(--form-field-height);
311
- }
312
-
313
- .fjs-container .fjs-taglist {
314
- min-height: var(--form-field-height);
315
- }
316
-
317
-
318
- .fjs-container .fjs-datepicker,
319
- .fjs-container .fjs-timepicker,
320
- .fjs-container .fjs-datetime-subsection {
321
- width: 100%;
322
- }
323
-
324
- .fjs-container .fjs-timepicker-anchor {
325
- height: 100%;
326
- display: flex;
327
- }
328
-
329
- .fjs-container .fjs-form-field-datetime .fjs-input-adornment svg {
330
- color: var(--color-icon-base);
331
- }
332
-
333
- .fjs-container .fjs-datetime-separator {
334
- width: 10px;
335
- }
336
-
337
- .fjs-container .fjs-input-group {
338
- display: flex;
339
- width: 100%;
340
- height: var(--form-field-height);
341
- margin: 4px 0;
342
- border: var(--border-definition);
343
- border-radius: 3px;
344
- }
345
-
346
-
347
- .fjs-container .fjs-input-group .fjs-input[type='text'],
348
- .fjs-container .fjs-input-group .fjs-input[type='email'],
349
- .fjs-container .fjs-input-group .fjs-input[type='tel'],
350
- .fjs-container .fjs-input-group .fjs-input[type='number'],
351
- .fjs-container .fjs-input-group .fjs-taglist,
352
- .fjs-container .fjs-input-group .fjs-select {
353
- height: unset;
354
- width: 100%;
355
- }
356
-
357
- .fjs-container .fjs-taglist .fjs-taglist-input,
358
- .fjs-container .fjs-input-group .fjs-input {
359
- border: none;
360
- border-radius: 0;
361
- margin: 0;
362
- outline: 0;
363
- width: auto;
364
- flex-grow: 1;
365
- }
366
-
367
- .fjs-container .fjs-input-group .fjs-select-display {
368
- line-height: var(--line-height-base);
369
- user-select: none;
370
- padding: 8px;
371
- flex: 1;
372
- }
373
-
374
- .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
375
- .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display {
376
- color: var(--color-text-lightest);
377
- line-height: var(--line-height-input);
378
- }
379
-
380
- .fjs-container .fjs-input-group .fjs-input-adornment {
381
- border-width: 0;
382
- }
383
-
384
- .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
385
- border-left-width: 1px;
386
- }
387
-
388
- .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
389
- border-right-width: 1px;
390
- }
391
-
392
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
393
- border-radius: 0 3px 3px 0;
394
- }
395
-
396
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
397
- border-radius: 3px 0 0 3px;
398
- }
399
-
400
- .fjs-container .fjs-input-group .fjs-input {
401
- border-radius: 3px;
402
- }
403
-
404
- .fjs-container .fjs-vertical-group {
405
- display: flex;
406
- width: 100%;
407
- }
408
-
409
- .fjs-container .flatpickr-wrapper {
410
- width: 100%;
411
- height: 100%;
412
- display: flex;
413
- }
414
-
415
- .fjs-container .fjs-textarea {
416
- resize: none;
417
- overflow: hidden;
418
- height: 75px;
419
- }
420
-
421
- .fjs-container .fjs-select-cross,
422
- .fjs-container .fjs-select-arrow {
423
- padding: 6px 10px;
424
- }
425
-
426
- .fjs-container .fjs-number-arrow-container {
427
- display: flex;
428
- flex-direction: column;
429
- border-radius: 0 2px 2px 0;
430
- width: 23px;
431
- overflow: clip;
432
- border-left: var(--border-definition-adornment);
433
- }
434
-
435
- .fjs-container .fjs-number-arrow-separator {
436
- height: 1px;
437
- background-color: var(--color-borders-adornment);
438
- }
439
-
440
- .fjs-container .fjs-number-arrow-container button {
441
- border: none;
442
- flex: 1;
443
- color: var(--color-text-light);
444
- background-color: var(--color-grey-225-10-95);
445
- font-weight: bold;
446
- font-size: 10px;
447
- line-height: 15px;
448
- }
449
-
450
- .fjs-container .fjs-number-arrow-container button:hover {
451
- background-color: var(--color-grey-225-10-93);
452
- color: var(--color-text);
453
- }
454
-
455
-
456
-
457
- .fjs-container .fjs-radio {
458
- display: flex;
459
- flex-direction: column;
460
- }
461
-
462
- .fjs-container .fjs-input[type='checkbox'],
463
- .fjs-container .fjs-input[type='radio'] {
464
- margin: 6px 10px 6px 4px;
465
- }
466
-
467
- .fjs-container .fjs-button[type='submit'] {
468
- color: var(--color-text-inverted);
469
- background-color: var(--color-accent);
470
- border-color: var(--color-accent);
471
- }
472
-
473
- .fjs-container .fjs-button[type='reset'] {
474
- color: var(--color-text);
475
- background-color: transparent;
476
- border-color: var(--color-borders);
477
- }
478
-
479
- .fjs-container .fjs-button[type='submit'],
480
- .fjs-container .fjs-button[type='reset'] {
481
- min-width: 100px;
482
- width: auto;
483
- }
484
-
485
- .fjs-container .fjs-button[type='submit'] {
486
- font-weight: 600;
487
- }
488
-
489
- .fjs-container .fjs-taglist:focus-within,
490
- .fjs-container .fjs-input-group:focus-within,
491
- .fjs-container .fjs-input[type='text']:focus,
492
- .fjs-container .fjs-input[type='email']:focus,
493
- .fjs-container .fjs-input[type='tel']:focus,
494
- .fjs-container .fjs-input[type='number']:focus,
495
- .fjs-container .fjs-button[type='submit']:focus,
496
- .fjs-container .fjs-button[type='reset']:focus,
497
- .fjs-container .fjs-textarea:focus,
498
- .fjs-container .fjs-select:focus {
499
- outline: var(--outline-definition);
500
- }
501
-
502
- .fjs-container .fjs-input-group .fjs-input,
503
- .fjs-container .fjs-input-group .fjs-input:focus {
504
- outline: none;
505
- }
506
-
507
- .fjs-container .fjs-input-group .fjs-input,
508
- .fjs-container .fjs-input-group .fjs-input:focus {
509
- outline: none;
510
- }
511
-
512
- .fjs-container .fjs-button[type='submit']:focus {
513
- border-color: var(--color-accent);
514
- }
515
-
516
- .fjs-container .fjs-input:disabled,
517
- .fjs-container .fjs-textarea:disabled,
518
- .fjs-container .fjs-select:disabled,
519
- .fjs-container .fjs-number-arrow-container.fjs-disabled button,
520
- .fjs-container .fjs-taglist.fjs-disabled,
521
- .fjs-container .fjs-disabled .fjs-input-group {
522
- background-color: var(--color-background-disabled);
523
- border-color: var(--color-borders-disabled);
524
- }
525
-
526
- .fjs-container .fjs-button[type='submit']:disabled,
527
- .fjs-container .fjs-button[type='reset']:disabled {
528
- color: var(--text-light);
529
- background-color: var(--color-background-disabled);
530
- border-color: var(--color-borders-disabled);
531
- }
532
- .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
533
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
534
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator
535
- {
536
- border-color: var(--color-borders-disabled);
537
- }
538
-
539
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
540
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
541
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
542
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
543
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
544
- border-color: var(--color-warning);
545
- outline-color: var(--color-warning);
546
- }
547
-
548
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
549
- border-color: var(--color-red-360-100-92);
550
- }
551
-
552
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
553
- background-color: var(--color-red-360-100-92);
554
- }
555
-
556
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
557
- background-color: var(--color-red-360-100-97);
558
- }
559
-
560
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
561
- background-color: var(--color-red-360-100-95);
562
- }
563
-
564
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
565
- border-color: var(--color-red-360-100-92);
566
- background: var(--color-red-360-100-97);
567
- }
568
-
569
- .fjs-container .fjs-form-field-error {
570
- color: var(--color-warning);
571
- }
572
-
573
- .fjs-container .fjs-form-field-error > ul {
574
- list-style-type: none;
575
- margin: 0;
576
- padding: 0;
577
- }
578
-
579
- .fjs-container .fjs-form-field-error > ul > li {
580
- list-style-type: none;
581
- }
582
-
583
- .fjs-container .fjs-form-field-text a {
584
- color: var(--color-accent);
585
- }
586
-
587
- .fjs-container .fjs-form-field-text a {
588
- color: var(--color-accent);
589
- }
590
-
591
- .fjs-container .fjs-form-field-text .fjs-disabled-link {
592
- pointer-events: none;
593
- cursor: default;
594
- }
595
-
596
- .fjs-container .fjs-taglist-anchor,
597
- .fjs-container .fjs-select-anchor,
598
- .fjs-container .fjs-timepicker-anchor {
599
- position: relative;
600
- }
601
-
602
- .fjs-container .fjs-taglist-anchor .fjs-dropdownlist,
603
- .fjs-container .fjs-select-anchor .fjs-dropdownlist {
604
- position: absolute;
605
- top: -5px;
606
- }
607
-
608
- .fjs-container .fjs-taglist {
609
- display: flex;
610
- flex-wrap: wrap;
611
- gap: 5px;
612
- border: var(--color-borders) solid 1px;
613
- border-radius: 3px;
614
- margin: 4px 0;
615
- padding: 5px;
616
- background-color: var(--color-background);
617
- }
618
-
619
- .fjs-container .fjs-taglist .fjs-taglist-tag {
620
- display: flex;
621
- overflow: hidden;
622
- user-select: none;
623
- background-color: var(--color-grey-225-10-90);
624
- border-radius: 2px;
625
- }
626
-
627
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag {
628
- background-color: var(--color-grey-225-10-85);
629
- }
630
-
631
- .fjs-container .fjs-taglist .fjs-taglist-tags {
632
- display: flex;
633
- flex-wrap: wrap;
634
- gap: 5px;
635
- }
636
-
637
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
638
- padding: 2px 6px 2px 8px;
639
- }
640
-
641
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label {
642
- padding: 2px 8px;
643
- }
644
-
645
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
646
- overflow: clip;
647
- width: 24px;
648
- height: 24px;
649
- text-align: center;
650
- line-height: 28px;
651
- background-color: var(--color-grey-225-10-80);
652
- border: none;
653
- padding: 1px 0;
654
- }
655
-
656
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
657
- margin-bottom: 4px;
658
- opacity: 0.6;
659
- color: var(--color-icon-base);
660
- }
661
-
662
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
663
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
664
- background-color: var(--color-grey-225-10-75);
665
- }
666
-
667
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
668
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
669
- opacity: 1;
670
- }
671
-
672
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
673
- outline: none;
674
- }
675
-
676
- .fjs-container .fjs-taglist .fjs-taglist-input {
677
- border: none;
678
- background-color: transparent;
679
- min-width: 100px;
680
- height: 22px;
681
- margin: 1px 0;
682
- flex-grow: 1;
683
- }
684
-
685
- .fjs-container .fjs-dropdownlist {
686
- z-index: 1;
687
- position: absolute;
688
- user-select: none;
689
- overflow-y: auto;
690
- width: 100%;
691
- border-radius: 3px;
692
- margin-top: 3px;
693
- box-shadow: 0px 0px 5px var(--color-grey-225-10-85);
694
- background-color: var(--color-white);
695
- }
696
-
697
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
698
- padding: 6px 8px;
699
- border-bottom: 1px solid var(--color-grey-225-10-90);
700
- color: var(--color-grey-225-10-35);
701
- }
702
-
703
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
704
- border-bottom: none;
705
- }
706
-
707
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
708
- background-color: var(--color-grey-225-10-90);
709
- color: var(--color-black);
710
- }
711
-
712
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
713
- padding: 6px 8px;
714
- color: var(--color-text-lightest);
715
- }
716
-
717
- .fjs-container .fjs-image-container {
718
- width: fit-content;
719
- height: fit-content;
720
- }
721
-
722
- .fjs-container .fjs-image {
723
- object-fit: contain;
724
- }
725
-
726
- .fjs-container .fjs-image-placeholder {
727
- height: 64px;
728
- margin: 4px 0;
729
- }
730
-
731
- /**
732
- * Flatpickr style adjustments
733
- */
734
-
735
- .fjs-container .flatpickr-day.today {
736
- border-color: transparent;
737
- background-color: transparent;
738
- font-weight: bold;
739
- }
740
-
741
- .fjs-container .flatpickr-day.today:hover,
742
- .fjs-container .flatpickr-day.today:focus {
743
- border-color: var(--color-borders);
744
- background-color: var(--color-datepicker-focused-day);
745
- color: var(--color-text-inverted);
746
- }
747
-
748
- .fjs-container .flatpickr-day.selected {
749
- border-color: var(--color-accent);
750
- background-color: inherit;
751
- color: inherit;
752
- font-weight: normal;
753
- }
754
-
755
- .fjs-container .flatpickr-day.selected.today {
756
- font-weight: bold;
757
- }
758
-
759
- .fjs-container .flatpickr-day.selected:hover,
760
- .fjs-container .flatpickr-day.selected:focus {
761
- background-color: var(--color-accent);
762
- font-weight: bold;
763
- color: var(--color-text-inverted);
764
- border-color: var(--color-accent);
765
- }
766
-
767
- .fjs-container .flatpickr-days, .flatpickr-weekdays {
768
- padding: 10px;
769
- width: 100%;
770
- }
771
-
772
- .fjs-container .flatpickr-calendar.hasTime.noCalendar {
773
- width: auto;
774
- max-width: 250px;
775
- }
776
-
777
- .fjs-container .flatpickr-calendar {
778
- width: 326px;
779
- }
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
+ }