@bpmn-io/form-js-viewer 0.14.0 → 0.15.0-alpha.0

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