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