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