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