@bpmn-io/form-js-viewer 0.14.0 → 0.14.1

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