@bpmn-io/form-js-viewer 1.0.0-alpha.0 → 1.0.0-alpha.3

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