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