@entur/form 8.3.0 → 8.3.1

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 (8) hide show
  1. package/dist/form.cjs.development.js +1 -1
  2. package/dist/form.cjs.development.js.map +1 -1
  3. package/dist/form.cjs.production.min.js +1 -1
  4. package/dist/form.cjs.production.min.js.map +1 -1
  5. package/dist/form.esm.js +1 -1
  6. package/dist/form.esm.js.map +1 -1
  7. package/dist/styles.css +497 -497
  8. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -1,212 +1,80 @@
1
+ .eds-fieldset {
2
+ margin: 0;
3
+ padding: 0;
4
+ border: 0;
5
+ }
1
6
  /* DO NOT CHANGE!*/
2
7
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-form-control__field-and-feedback-text {
4
- display: flex;
5
- flex-direction: column;
6
- height: -moz-fit-content;
7
- height: fit-content;
8
- width: 100%;
9
- }
10
- .eds-form-control__field-and-feedback-text--has-tooltip {
11
- padding-right: 2rem;
12
- }
13
- .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
14
- cursor: not-allowed;
15
- }
16
- .eds-form-control-wrapper {
8
+ .eds-feedback-text {
17
9
  display: flex;
18
10
  align-items: center;
19
- position: relative;
20
- flex: 1;
21
- min-height: 3rem;
22
- padding-left: 1rem;
23
- padding-right: 1rem;
24
- background-color: var(--components-form-baseform-standard-fill-default);
25
- border-radius: 0.25rem;
26
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
27
- box-shadow: 0 0 0 transparent;
28
- color: var(--components-form-baseform-standard-text-content);
29
- transition: border-color 0.1s ease-in-out;
30
- }
31
- .eds-form-control-wrapper:hover {
32
- border-color: var(--components-form-baseform-standard-border-interactive);
33
- }
34
- .eds-contrast .eds-form-control-wrapper:hover {
35
- border-color: var(--components-form-baseform-contrast-border-interactive);
36
- }
37
- .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
38
- border-color: var(--components-form-baseform-standard-border-interactive);
39
- outline: 2px solid var(--components-form-baseform-standard-border-interactive);
40
- }
41
- .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
42
- border-color: var(--components-form-baseform-contrast-border-interactive);
43
- outline-color: var(--components-form-baseform-contrast-border-interactive);
44
- }
45
- .eds-form-control-wrapper ::-moz-placeholder {
46
- color: var(--components-form-baseform-standard-text-label);
47
- }
48
- .eds-form-control-wrapper ::placeholder {
49
- color: var(--components-form-baseform-standard-text-label);
50
- }
51
- .eds-form-control-wrapper--disabled {
52
- border-color: transparent;
53
- background-color: var(--components-form-baseform-standard-fill-disabled);
54
- pointer-events: none;
55
- color: var(--components-form-baseform-standard-text-disabled);
56
- }
57
- .eds-form-control-wrapper--disabled .eds-input-group__label {
58
- color: var(--components-form-baseform-standard-text-disabled);
59
- }
60
- .eds-contrast .eds-form-control-wrapper--disabled {
61
- border-color: transparent;
62
- background-color: var(--components-form-baseform-contrast-fill-disabled);
63
- color: var(--components-form-baseform-contrast-text-disabled);
64
- }
65
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
66
- color: var(--components-form-baseform-contrast-text-disabled);
67
- }
68
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
69
- display: none;
70
- }
71
- .eds-form-control-wrapper--disabled:focus-within {
72
- border-color: transparent;
73
- outline: none;
74
- }
75
- .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
76
- border-color: transparent;
77
- outline: none;
78
- }
79
- .eds-form-control-wrapper--readonly {
80
- border-color: transparent;
81
- cursor: default;
82
- background: var(--components-form-baseform-standard-fill-readonly);
83
- border: var(--components-form-baseform-standard-fill-readonly);
84
- }
85
- .eds-form-control-wrapper--readonly:focus-visible {
86
- outline: none;
87
- }
88
- .eds-contrast .eds-form-control-wrapper--readonly {
89
- background: var(--components-form-baseform-contrast-fill-readonly);
90
- border: var(--components-form-baseform-contrast-fill-readonly);
91
- color: var(--components-form-baseform-contrast-text-description);
92
- }
93
- .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
94
- color: var(--components-form-baseform-contrast-text-description);
95
- }
96
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
97
- color: var(--components-form-baseform-contrast-text-description);
11
+ margin-top: 0.25rem;
98
12
  }
99
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
100
- display: none;
13
+ .eds-feedback-text--info, .eds-feedback-text--information {
14
+ padding-left: calc(1rem + 0.125rem);
101
15
  }
102
- .eds-form-control-wrapper--size-medium .eds-form-control,
103
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
104
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
105
- font-size: 1rem;
106
- line-height: 1rem;
16
+ .eds-feedback-text__text {
17
+ color: var(--components-form-feedbacktext-information-standard-text);
107
18
  }
108
- .eds-form-control-wrapper--size-large {
109
- min-height: 4rem;
19
+ .eds-contrast .eds-feedback-text__text {
20
+ color: var(--components-form-feedbacktext-information-contrast-text);
110
21
  }
111
- .eds-form-control-wrapper--size-large .eds-form-control,
112
- .eds-form-control-wrapper--size-large .eds-form-control__append,
113
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
22
+
23
+ .eds-feedback-text__icon {
114
24
  font-size: 1.5rem;
25
+ min-height: 1.5rem;
26
+ min-width: 1.5rem;
27
+ padding-right: 0.5rem;
28
+ position: relative;
29
+ top: -0.1rem;
115
30
  }
116
- .eds-form-control-wrapper--success {
117
- border-color: var(--components-form-baseform-standard-border-success);
118
- }
119
- .eds-form-control-wrapper--success:focus-within {
120
- border-color: var(--components-form-baseform-standard-border-success);
121
- outline-color: var(--components-form-baseform-standard-border-success);
122
- }
123
- .eds-contrast .eds-form-control-wrapper--success {
124
- border-color: var(--components-form-baseform-standard-border-success);
125
- }
126
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
127
- border-color: var(--components-form-baseform-contrast-border-success);
128
- outline-color: var(--components-form-baseform-contrast-border-success);
129
- }
130
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
131
- border-color: var(--components-form-baseform-standard-border-negative);
31
+ .eds-feedback-text__icon--success {
32
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
132
33
  }
133
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
134
- border-color: var(--components-form-baseform-standard-border-negative);
135
- outline-color: var(--components-form-baseform-standard-border-negative);
34
+ .eds-feedback-text__icon--success circle {
35
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
136
36
  }
137
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
138
- border-color: var(--components-form-baseform-contrast-border-negative);
37
+ .eds-contrast .eds-feedback-text__icon--success {
38
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
139
39
  }
140
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
141
- border-color: var(--components-form-baseform-contrast-border-negative);
142
- outline-color: var(--components-form-baseform-contrast-border-negative);
40
+ .eds-contrast .eds-feedback-text__icon--success circle {
41
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
143
42
  }
144
- .eds-contrast .eds-form-control .eds-tooltip {
145
- background: var(--components-tooltip-tooltip-standard-fill);
146
- color: var(--components-tooltip-tooltip-standard-text);
147
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
43
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
44
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
148
45
  }
149
- .eds-form-control .eds-tooltip::after {
150
- background: var(--components-tooltip-tooltip-standard-fill);
46
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
47
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
151
48
  }
152
-
153
- .eds-form-control {
154
- display: block;
155
- -webkit-appearance: none;
156
- -moz-appearance: none;
157
- appearance: none;
158
- width: 100%;
159
- height: 100%;
160
- padding: 20px 0rem 0.25rem;
161
- font-family: inherit;
162
- font-size: 1rem;
163
- line-height: 1rem;
164
- border: 0;
165
- color: var(--components-form-baseform-standard-text-content);
166
- background-color: transparent;
49
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
50
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
167
51
  }
168
- .eds-form-control::-moz-placeholder {
169
- opacity: 0;
170
- -moz-transition: opacity 0.2s ease-in-out;
171
- transition: opacity 0.2s ease-in-out;
52
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
53
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
172
54
  }
173
- .eds-form-control::placeholder {
174
- opacity: 0;
175
- transition: opacity 0.2s ease-in-out;
55
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
56
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
176
57
  }
177
- .eds-form-control:focus {
178
- outline: none;
58
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
59
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
179
60
  }
180
- .eds-form-control:focus::-moz-placeholder {
181
- opacity: 1;
61
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
62
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
182
63
  }
183
- .eds-form-control:focus::placeholder {
184
- opacity: 1;
64
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
65
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
185
66
  }
186
- .eds-form-control__prepend, .eds-form-control__append {
187
- position: relative;
188
- line-height: inherit;
67
+ .eds-feedback-text__icon--warning {
68
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
189
69
  }
190
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
191
- all: unset;
192
- position: absolute;
193
- display: flex;
194
- align-items: center;
195
- justify-content: center;
196
- height: 1.5rem;
197
- width: 1.5rem;
198
- right: -2rem;
199
- border-radius: 100%;
200
- color: var(--primary-text-color);
201
- cursor: pointer;
70
+ .eds-feedback-text__icon--warning .svg-exclamation {
71
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
202
72
  }
203
- .eds-form-control__prepend {
204
- margin-right: 0.75rem;
205
- margin-left: 0;
73
+ .eds-contrast .eds-feedback-text__icon--warning {
74
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
206
75
  }
207
- .eds-form-control__append {
208
- margin-right: 0;
209
- margin-left: 0.75rem;
76
+ .eds-contrast .eds-feedback-text__icon--warning circle {
77
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
210
78
  }
211
79
  /* DO NOT CHANGE!*/
212
80
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -402,169 +270,213 @@
402
270
  }
403
271
  /* DO NOT CHANGE!*/
404
272
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
405
- .eds-feedback-text {
273
+ .eds-form-control__field-and-feedback-text {
406
274
  display: flex;
407
- align-items: center;
408
- margin-top: 0.25rem;
409
- }
410
- .eds-feedback-text--info, .eds-feedback-text--information {
411
- padding-left: calc(1rem + 0.125rem);
275
+ flex-direction: column;
276
+ height: -moz-fit-content;
277
+ height: fit-content;
278
+ width: 100%;
412
279
  }
413
- .eds-feedback-text__text {
414
- color: var(--components-form-feedbacktext-information-standard-text);
280
+ .eds-form-control__field-and-feedback-text--has-tooltip {
281
+ padding-right: 2rem;
415
282
  }
416
- .eds-contrast .eds-feedback-text__text {
417
- color: var(--components-form-feedbacktext-information-contrast-text);
283
+ .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
284
+ cursor: not-allowed;
418
285
  }
419
-
420
- .eds-feedback-text__icon {
421
- font-size: 1.5rem;
422
- min-height: 1.5rem;
423
- min-width: 1.5rem;
424
- padding-right: 0.5rem;
286
+ .eds-form-control-wrapper {
287
+ display: flex;
288
+ align-items: center;
425
289
  position: relative;
426
- top: -0.1rem;
290
+ flex: 1;
291
+ min-height: 3rem;
292
+ padding-left: 1rem;
293
+ padding-right: 1rem;
294
+ background-color: var(--components-form-baseform-standard-fill-default);
295
+ border-radius: 0.25rem;
296
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
297
+ box-shadow: 0 0 0 transparent;
298
+ color: var(--components-form-baseform-standard-text-content);
299
+ transition: border-color 0.1s ease-in-out;
427
300
  }
428
- .eds-feedback-text__icon--success {
429
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
301
+ .eds-form-control-wrapper:hover {
302
+ border-color: var(--components-form-baseform-standard-border-interactive);
430
303
  }
431
- .eds-feedback-text__icon--success circle {
432
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
304
+ .eds-contrast .eds-form-control-wrapper:hover {
305
+ border-color: var(--components-form-baseform-contrast-border-interactive);
433
306
  }
434
- .eds-contrast .eds-feedback-text__icon--success {
435
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
307
+ .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
308
+ border-color: var(--components-form-baseform-standard-border-interactive);
309
+ outline: 2px solid var(--components-form-baseform-standard-border-interactive);
436
310
  }
437
- .eds-contrast .eds-feedback-text__icon--success circle {
438
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
311
+ .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
312
+ border-color: var(--components-form-baseform-contrast-border-interactive);
313
+ outline-color: var(--components-form-baseform-contrast-border-interactive);
439
314
  }
440
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
441
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
315
+ .eds-form-control-wrapper ::-moz-placeholder {
316
+ color: var(--components-form-baseform-standard-text-label);
442
317
  }
443
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
444
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
318
+ .eds-form-control-wrapper ::placeholder {
319
+ color: var(--components-form-baseform-standard-text-label);
445
320
  }
446
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
447
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
321
+ .eds-form-control-wrapper--disabled {
322
+ border-color: transparent;
323
+ background-color: var(--components-form-baseform-standard-fill-disabled);
324
+ pointer-events: none;
325
+ color: var(--components-form-baseform-standard-text-disabled);
448
326
  }
449
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
450
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
327
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
328
+ color: var(--components-form-baseform-standard-text-disabled);
451
329
  }
452
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
453
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
330
+ .eds-contrast .eds-form-control-wrapper--disabled {
331
+ border-color: transparent;
332
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
333
+ color: var(--components-form-baseform-contrast-text-disabled);
454
334
  }
455
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
456
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
335
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
336
+ color: var(--components-form-baseform-contrast-text-disabled);
457
337
  }
458
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
459
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
338
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
339
+ display: none;
460
340
  }
461
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
462
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
341
+ .eds-form-control-wrapper--disabled:focus-within {
342
+ border-color: transparent;
343
+ outline: none;
463
344
  }
464
- .eds-feedback-text__icon--warning {
465
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
345
+ .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
346
+ border-color: transparent;
347
+ outline: none;
466
348
  }
467
- .eds-feedback-text__icon--warning .svg-exclamation {
468
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
349
+ .eds-form-control-wrapper--readonly {
350
+ border-color: transparent;
351
+ cursor: default;
352
+ background: var(--components-form-baseform-standard-fill-readonly);
353
+ border: var(--components-form-baseform-standard-fill-readonly);
469
354
  }
470
- .eds-contrast .eds-feedback-text__icon--warning {
471
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
355
+ .eds-form-control-wrapper--readonly:focus-visible {
356
+ outline: none;
472
357
  }
473
- .eds-contrast .eds-feedback-text__icon--warning circle {
474
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
358
+ .eds-contrast .eds-form-control-wrapper--readonly {
359
+ background: var(--components-form-baseform-contrast-fill-readonly);
360
+ border: var(--components-form-baseform-contrast-fill-readonly);
361
+ color: var(--components-form-baseform-contrast-text-description);
475
362
  }
476
- .eds-fieldset {
477
- margin: 0;
478
- padding: 0;
479
- border: 0;
363
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
364
+ color: var(--components-form-baseform-contrast-text-description);
480
365
  }
481
- /* DO NOT CHANGE!*/
482
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
483
- .eds-input-group {
484
- color: inherit;
485
- display: block;
486
- position: relative;
366
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
367
+ color: var(--components-form-baseform-contrast-text-description);
487
368
  }
488
- .eds-input-group__label {
489
- color: var(--components-form-baseform-standard-text-label);
490
- display: flex;
369
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
370
+ display: none;
371
+ }
372
+ .eds-form-control-wrapper--size-medium .eds-form-control,
373
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
374
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
491
375
  font-size: 1rem;
492
- position: absolute;
493
376
  line-height: 1rem;
494
- height: 3rem;
495
- padding-left: 0;
496
- top: 1rem;
497
- transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
498
- -webkit-user-select: none;
499
- -moz-user-select: none;
500
- user-select: none;
501
- pointer-events: none;
502
377
  }
503
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
504
- top: 0.375rem;
505
- font-size: 0.75rem;
506
- line-height: 0.75rem;
507
- height: 10px;
508
- padding: 0;
378
+ .eds-form-control-wrapper--size-large {
379
+ min-height: 4rem;
509
380
  }
510
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
511
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
512
- background: var(--textarea-label-background);
513
- width: calc(100% - 1rem - 1rem - 4px);
381
+ .eds-form-control-wrapper--size-large .eds-form-control,
382
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
383
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
384
+ font-size: 1.5rem;
514
385
  }
515
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
516
- top: 0.5rem;
517
- font-size: 0.875rem;
518
- line-height: 1rem;
519
- padding: 0;
386
+ .eds-form-control-wrapper--success {
387
+ border-color: var(--components-form-baseform-standard-border-success);
520
388
  }
521
- .eds-form-control-wrapper--size-large .eds-input-group__label {
522
- top: 0.75rem;
523
- font-size: 1.5rem;
524
- line-height: 2.25rem;
389
+ .eds-form-control-wrapper--success:focus-within {
390
+ border-color: var(--components-form-baseform-standard-border-success);
391
+ outline-color: var(--components-form-baseform-standard-border-success);
525
392
  }
526
- .eds-input-group__label--filled {
527
- top: 0.375rem;
528
- font-size: 0.75rem;
529
- line-height: 0.75rem;
530
- height: 10px;
531
- padding: 0;
393
+ .eds-contrast .eds-form-control-wrapper--success {
394
+ border-color: var(--components-form-baseform-standard-border-success);
532
395
  }
533
- .eds-textarea__label .eds-input-group__label--filled {
534
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
535
- background: var(--textarea-label-background);
536
- width: calc(100% - 1rem - 1rem - 4px);
396
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
397
+ border-color: var(--components-form-baseform-contrast-border-success);
398
+ outline-color: var(--components-form-baseform-contrast-border-success);
537
399
  }
538
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
539
- top: 0.5rem;
540
- font-size: 0.875rem;
541
- line-height: 1rem;
542
- padding: 0;
400
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
401
+ border-color: var(--components-form-baseform-standard-border-negative);
543
402
  }
544
-
545
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
546
- top: 0.375rem;
547
- font-size: 0.75rem;
548
- line-height: 0.75rem;
549
- height: 10px;
550
- padding: 0;
403
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
404
+ border-color: var(--components-form-baseform-standard-border-negative);
405
+ outline-color: var(--components-form-baseform-standard-border-negative);
551
406
  }
552
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
553
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
554
- background: var(--textarea-label-background);
555
- width: calc(100% - 1rem - 1rem - 4px);
407
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
408
+ border-color: var(--components-form-baseform-contrast-border-negative);
556
409
  }
557
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
558
- top: 0.5rem;
559
- font-size: 0.875rem;
560
- line-height: 1rem;
561
- padding: 0;
410
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
411
+ border-color: var(--components-form-baseform-contrast-border-negative);
412
+ outline-color: var(--components-form-baseform-contrast-border-negative);
562
413
  }
563
- .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
564
- top: 1rem;
414
+ .eds-contrast .eds-form-control .eds-tooltip {
415
+ background: var(--components-tooltip-tooltip-standard-fill);
416
+ color: var(--components-tooltip-tooltip-standard-text);
417
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
418
+ }
419
+ .eds-form-control .eds-tooltip::after {
420
+ background: var(--components-tooltip-tooltip-standard-fill);
421
+ }
422
+
423
+ .eds-form-control {
424
+ display: block;
425
+ -webkit-appearance: none;
426
+ -moz-appearance: none;
427
+ appearance: none;
428
+ width: 100%;
429
+ height: 100%;
430
+ padding: 20px 0rem 0.25rem;
431
+ font-family: inherit;
565
432
  font-size: 1rem;
566
- height: 3rem;
567
433
  line-height: 1rem;
434
+ border: 0;
435
+ color: var(--components-form-baseform-standard-text-content);
436
+ background-color: transparent;
437
+ }
438
+ .eds-form-control::-moz-placeholder {
439
+ opacity: 0;
440
+ -moz-transition: opacity 0.2s ease-in-out;
441
+ transition: opacity 0.2s ease-in-out;
442
+ }
443
+ .eds-form-control::placeholder {
444
+ opacity: 0;
445
+ transition: opacity 0.2s ease-in-out;
446
+ }
447
+ .eds-form-control:focus {
448
+ outline: none;
449
+ }
450
+ .eds-form-control:focus::-moz-placeholder {
451
+ opacity: 1;
452
+ }
453
+ .eds-form-control:focus::placeholder {
454
+ opacity: 1;
455
+ }
456
+ .eds-form-control__prepend, .eds-form-control__append {
457
+ position: relative;
458
+ line-height: inherit;
459
+ }
460
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
461
+ all: unset;
462
+ position: absolute;
463
+ display: flex;
464
+ align-items: center;
465
+ justify-content: center;
466
+ height: 1.5rem;
467
+ width: 1.5rem;
468
+ right: -2rem;
469
+ border-radius: 100%;
470
+ color: var(--primary-text-color);
471
+ cursor: pointer;
472
+ }
473
+ .eds-form-control__prepend {
474
+ margin-right: 0.75rem;
475
+ margin-left: 0;
476
+ }
477
+ .eds-form-control__append {
478
+ margin-right: 0;
479
+ margin-left: 0.75rem;
568
480
  }
569
481
  /* DO NOT CHANGE!*/
570
482
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -740,62 +652,298 @@
740
652
  .eds-contrast .eds-switch__switch {
741
653
  background-color: var(--components-form-switch-contrast-fill-false);
742
654
  }
743
- .eds-switch--right .eds-switch__switch {
744
- margin-right: 0.75rem;
655
+ .eds-switch--right .eds-switch__switch {
656
+ margin-right: 0.75rem;
657
+ }
658
+ .eds-switch__switch svg g,
659
+ .eds-switch__switch path {
660
+ fill: var(--components-form-switch-standard-icon-false);
661
+ transition: fill ease-in-out 0.1s;
662
+ }
663
+ .eds-contrast .eds-switch__switch svg g,
664
+ .eds-contrast .eds-switch__switch path {
665
+ fill: var(--components-form-switch-contrast-icon-false);
666
+ }
667
+ :checked + .eds-switch__switch {
668
+ background-color: var(--eds-switch-color);
669
+ }
670
+ :checked + .eds-switch__switch .eds-switch__circle {
671
+ left: 1.625rem;
672
+ }
673
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
674
+ :checked + .eds-switch__switch .eds-switch__circle path {
675
+ fill: var(--eds-switch-color);
676
+ }
677
+ .eds-contrast :checked + .eds-switch__switch {
678
+ background-color: var(--eds-switch-contrast-color);
679
+ }
680
+ :focus-visible + .eds-switch__switch {
681
+ outline: 2px solid #181c56;
682
+ outline-color: var(--basecolors-stroke-focus-standard);
683
+ outline-offset: 0.125rem;
684
+ }
685
+ .eds-contrast :focus-visible + .eds-switch__switch {
686
+ outline-color: var(--basecolors-stroke-focus-contrast);
687
+ }
688
+ .eds-switch__switch--large {
689
+ width: 3.75rem;
690
+ height: 2rem;
691
+ border-radius: 3.75rem;
692
+ }
693
+ :checked + .eds-switch__switch--large .eds-switch__circle {
694
+ left: 1.875rem;
695
+ }
696
+ .eds-switch__switch--large svg {
697
+ position: relative;
698
+ right: 0.05rem;
699
+ }
700
+ .eds-switch__label--large--right {
701
+ font-size: 1rem;
702
+ }
703
+ .eds-switch__label--large--bottom {
704
+ font-size: 0.875rem;
705
+ }
706
+ .eds-switch__label--medium--right {
707
+ font-size: 0.875rem;
708
+ }
709
+ .eds-switch__label--medium--bottom {
710
+ font-size: 0.75rem;
711
+ }
712
+ /* DO NOT CHANGE!*/
713
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
714
+ .eds-input-group {
715
+ color: inherit;
716
+ display: block;
717
+ position: relative;
718
+ }
719
+ .eds-input-group__label {
720
+ color: var(--components-form-baseform-standard-text-label);
721
+ display: flex;
722
+ font-size: 1rem;
723
+ position: absolute;
724
+ line-height: 1rem;
725
+ height: 3rem;
726
+ padding-left: 0;
727
+ top: 1rem;
728
+ transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
729
+ -webkit-user-select: none;
730
+ -moz-user-select: none;
731
+ user-select: none;
732
+ pointer-events: none;
733
+ }
734
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
735
+ top: 0.375rem;
736
+ font-size: 0.75rem;
737
+ line-height: 0.75rem;
738
+ height: 10px;
739
+ padding: 0;
740
+ }
741
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
742
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
743
+ background: var(--textarea-label-background);
744
+ width: calc(100% - 1rem - 1rem - 4px);
745
+ }
746
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
747
+ top: 0.5rem;
748
+ font-size: 0.875rem;
749
+ line-height: 1rem;
750
+ padding: 0;
751
+ }
752
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
753
+ top: 0.75rem;
754
+ font-size: 1.5rem;
755
+ line-height: 2.25rem;
756
+ }
757
+ .eds-input-group__label--filled {
758
+ top: 0.375rem;
759
+ font-size: 0.75rem;
760
+ line-height: 0.75rem;
761
+ height: 10px;
762
+ padding: 0;
763
+ }
764
+ .eds-textarea__label .eds-input-group__label--filled {
765
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
766
+ background: var(--textarea-label-background);
767
+ width: calc(100% - 1rem - 1rem - 4px);
768
+ }
769
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
770
+ top: 0.5rem;
771
+ font-size: 0.875rem;
772
+ line-height: 1rem;
773
+ padding: 0;
774
+ }
775
+
776
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
777
+ top: 0.375rem;
778
+ font-size: 0.75rem;
779
+ line-height: 0.75rem;
780
+ height: 10px;
781
+ padding: 0;
782
+ }
783
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
784
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
785
+ background: var(--textarea-label-background);
786
+ width: calc(100% - 1rem - 1rem - 4px);
787
+ }
788
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
789
+ top: 0.5rem;
790
+ font-size: 0.875rem;
791
+ line-height: 1rem;
792
+ padding: 0;
793
+ }
794
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
795
+ top: 1rem;
796
+ font-size: 1rem;
797
+ height: 3rem;
798
+ line-height: 1rem;
799
+ }
800
+ /* DO NOT CHANGE!*/
801
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
802
+ .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
803
+ outline: 2px solid #181c56;
804
+ outline-color: var(--basecolors-stroke-focus-standard);
805
+ outline-offset: 0.125rem;
806
+ }
807
+ .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
808
+ outline-color: var(--basecolors-stroke-focus-contrast);
809
+ }
810
+ .eds-input-panel > input {
811
+ position: absolute;
812
+ opacity: 0;
813
+ cursor: pointer;
814
+ height: 0;
815
+ width: 0;
816
+ }
817
+ .eds-input-panel > input:checked + .eds-input-panel__container {
818
+ border-color: var(--components-form-basepanel-standard-border-selected);
819
+ background: var(--components-form-basepanel-standard-fill-selected);
820
+ }
821
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
822
+ border-color: var(--components-form-basepanel-contrast-border-selected);
823
+ background: var(--components-form-basepanel-contrast-fill-selected);
824
+ }
825
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
826
+ width: 0.75rem;
827
+ height: 0.75rem;
828
+ }
829
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
830
+ background-color: var(--components-form-radio-contrast-icon);
831
+ }
832
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
833
+ background-color: var(--components-form-basepanel-standard-fill-hover);
834
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
835
+ hover state styling with the inputPanel container */
836
+ }
837
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
838
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
839
+ }
840
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
841
+ background-color: var(--components-form-basepanel-standard-fill-hover);
842
+ border-color: var(--components-form-basepanel-standard-border-selected);
843
+ }
844
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
845
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
846
+ border-color: var(--components-form-basepanel-contrast-border-selected);
847
+ }
848
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
849
+ border-color: transparent;
850
+ }
851
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
852
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
853
+ }
854
+ .eds-input-panel__container {
855
+ background: var(--components-form-basepanel-standard-fill-default);
856
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
857
+ color: var(--components-form-basepanel-standard-text-accent);
858
+ border-radius: 0.25rem;
859
+ display: flex;
860
+ flex-direction: column;
861
+ justify-content: flex-start;
862
+ min-width: 20rem;
863
+ position: relative;
864
+ padding: 1rem;
865
+ -webkit-user-select: none;
866
+ -moz-user-select: none;
867
+ user-select: none;
868
+ width: -moz-fit-content;
869
+ width: fit-content;
870
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
871
+ }
872
+ .eds-contrast .eds-input-panel__container {
873
+ background-color: var(--components-form-basepanel-contrast-fill-default);
874
+ border-color: var(--components-form-basepanel-contrast-border-default);
875
+ color: var(--components-form-basepanel-contrast-text-accent);
745
876
  }
746
- .eds-switch__switch svg g,
747
- .eds-switch__switch path {
748
- fill: var(--components-form-switch-standard-icon-false);
749
- transition: fill ease-in-out 0.1s;
877
+ .eds-input-panel__container:hover {
878
+ background-color: var(--components-form-basepanel-standard-fill-hover);
879
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
880
+ hover state styling with the inputPanel container */
750
881
  }
751
- .eds-contrast .eds-switch__switch svg g,
752
- .eds-contrast .eds-switch__switch path {
753
- fill: var(--components-form-switch-contrast-icon-false);
882
+ .eds-contrast .eds-input-panel__container:hover {
883
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
754
884
  }
755
- :checked + .eds-switch__switch {
756
- background-color: var(--eds-switch-color);
885
+ .eds-input-panel__container:hover .eds-checkbox__icon,
886
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
887
+ background-color: var(--components-form-basepanel-standard-fill-hover);
888
+ border-color: var(--components-form-basepanel-standard-border-selected);
757
889
  }
758
- :checked + .eds-switch__switch .eds-switch__circle {
759
- left: 1.625rem;
890
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
891
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
892
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
893
+ border-color: var(--components-form-basepanel-contrast-border-selected);
760
894
  }
761
- :checked + .eds-switch__switch .eds-switch__circle svg g,
762
- :checked + .eds-switch__switch .eds-switch__circle path {
763
- fill: var(--eds-switch-color);
895
+ input:disabled + .eds-input-panel__container {
896
+ background: var(--components-form-basepanel-standard-fill-disabled);
897
+ border-color: var(--components-form-basepanel-standard-border-disabled);
898
+ color: var(--components-form-basepanel-standard-text-disabled);
899
+ cursor: not-allowed;
764
900
  }
765
- .eds-contrast :checked + .eds-switch__switch {
766
- background-color: var(--eds-switch-contrast-color);
901
+ .eds-contrast input:disabled + .eds-input-panel__container {
902
+ background: var(--components-form-basepanel-contrast-fill-disabled);
903
+ border-style: dashed;
904
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
905
+ color: var(--components-form-basepanel-contrast-text-disabled);
767
906
  }
768
- :focus-visible + .eds-switch__switch {
769
- outline: 2px solid #181c56;
770
- outline-color: var(--basecolors-stroke-focus-standard);
771
- outline-offset: 0.125rem;
907
+ .eds-input-panel__container .eds-checkbox__icon,
908
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
909
+ .eds-input-panel__container .eds-form-component--radio__radio {
910
+ width: 1.5rem;
911
+ height: 1.5rem;
912
+ margin-right: 0;
772
913
  }
773
- .eds-contrast :focus-visible + .eds-switch__switch {
774
- outline-color: var(--basecolors-stroke-focus-contrast);
914
+ .eds-input-panel--medium .eds-input-panel__title {
915
+ font-size: 1rem;
916
+ font-weight: 500;
775
917
  }
776
- .eds-switch__switch--large {
777
- width: 3.75rem;
778
- height: 2rem;
779
- border-radius: 3.75rem;
918
+ .eds-input-panel--medium.eds-input-panel__container {
919
+ padding-bottom: 1rem;
920
+ min-height: 3.75rem;
780
921
  }
781
- :checked + .eds-switch__switch--large .eds-switch__circle {
782
- left: 1.875rem;
922
+ .eds-input-panel--large.eds-input-panel__container {
923
+ min-height: 6rem;
783
924
  }
784
- .eds-switch__switch--large svg {
785
- position: relative;
786
- right: 0.05rem;
925
+ .eds-input-panel--large .eds-input-panel__title {
926
+ font-size: 1.25rem;
927
+ font-weight: 500;
928
+ line-height: 1.875rem;
787
929
  }
788
- .eds-switch__label--large--right {
789
- font-size: 1rem;
930
+ .eds-input-panel__title-wrapper {
931
+ display: flex;
932
+ justify-content: space-between;
933
+ align-items: center;
790
934
  }
791
- .eds-switch__label--large--bottom {
792
- font-size: 0.875rem;
935
+ .eds-input-panel__secondary-label-and-icon-wrapper {
936
+ display: flex;
937
+ justify-content: center;
938
+ align-items: center;
939
+ gap: 0.75rem;
793
940
  }
794
- .eds-switch__label--medium--right {
795
- font-size: 0.875rem;
941
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
942
+ margin: 0;
796
943
  }
797
- .eds-switch__label--medium--bottom {
798
- font-size: 0.75rem;
944
+ .eds-input-panel__additional-content {
945
+ margin-top: 0.25rem;
946
+ word-wrap: break-word;
799
947
  }
800
948
  /* DO NOT CHANGE!*/
801
949
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -965,154 +1113,6 @@
965
1113
  }
966
1114
  /* DO NOT CHANGE!*/
967
1115
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
968
- .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
969
- outline: 2px solid #181c56;
970
- outline-color: var(--basecolors-stroke-focus-standard);
971
- outline-offset: 0.125rem;
972
- }
973
- .eds-contrast .eds-input-panel:has(:focus-visible) .eds-input-panel__container {
974
- outline-color: var(--basecolors-stroke-focus-contrast);
975
- }
976
- .eds-input-panel > input {
977
- position: absolute;
978
- opacity: 0;
979
- cursor: pointer;
980
- height: 0;
981
- width: 0;
982
- }
983
- .eds-input-panel > input:checked + .eds-input-panel__container {
984
- border-color: var(--components-form-basepanel-standard-border-selected);
985
- background: var(--components-form-basepanel-standard-fill-selected);
986
- }
987
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
988
- border-color: var(--components-form-basepanel-contrast-border-selected);
989
- background: var(--components-form-basepanel-contrast-fill-selected);
990
- }
991
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
992
- width: 0.75rem;
993
- height: 0.75rem;
994
- }
995
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
996
- background-color: var(--components-form-radio-contrast-icon);
997
- }
998
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
999
- background-color: var(--components-form-basepanel-standard-fill-hover);
1000
- /* The following styling is needed to sync the inner checkbox/radiobutton's
1001
- hover state styling with the inputPanel container */
1002
- }
1003
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
1004
- background-color: var(--components-form-basepanel-contrast-fill-hover);
1005
- }
1006
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
1007
- background-color: var(--components-form-basepanel-standard-fill-hover);
1008
- border-color: var(--components-form-basepanel-standard-border-selected);
1009
- }
1010
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
1011
- background-color: var(--components-form-basepanel-contrast-fill-hover);
1012
- border-color: var(--components-form-basepanel-contrast-border-selected);
1013
- }
1014
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
1015
- border-color: transparent;
1016
- }
1017
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
1018
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
1019
- }
1020
- .eds-input-panel__container {
1021
- background: var(--components-form-basepanel-standard-fill-default);
1022
- border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
1023
- color: var(--components-form-basepanel-standard-text-accent);
1024
- border-radius: 0.25rem;
1025
- display: flex;
1026
- flex-direction: column;
1027
- justify-content: flex-start;
1028
- min-width: 20rem;
1029
- position: relative;
1030
- padding: 1rem;
1031
- -webkit-user-select: none;
1032
- -moz-user-select: none;
1033
- user-select: none;
1034
- width: -moz-fit-content;
1035
- width: fit-content;
1036
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
1037
- }
1038
- .eds-contrast .eds-input-panel__container {
1039
- background-color: var(--components-form-basepanel-contrast-fill-default);
1040
- border-color: var(--components-form-basepanel-contrast-border-default);
1041
- color: var(--components-form-basepanel-contrast-text-accent);
1042
- }
1043
- .eds-input-panel__container:hover {
1044
- background-color: var(--components-form-basepanel-standard-fill-hover);
1045
- /* The following styling is needed to sync the inner checkbox/radiobutton's
1046
- hover state styling with the inputPanel container */
1047
- }
1048
- .eds-contrast .eds-input-panel__container:hover {
1049
- background-color: var(--components-form-basepanel-contrast-fill-hover);
1050
- }
1051
- .eds-input-panel__container:hover .eds-checkbox__icon,
1052
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
1053
- background-color: var(--components-form-basepanel-standard-fill-hover);
1054
- border-color: var(--components-form-basepanel-standard-border-selected);
1055
- }
1056
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
1057
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
1058
- background-color: var(--components-form-basepanel-contrast-fill-hover);
1059
- border-color: var(--components-form-basepanel-contrast-border-selected);
1060
- }
1061
- input:disabled + .eds-input-panel__container {
1062
- background: var(--components-form-basepanel-standard-fill-disabled);
1063
- border-color: var(--components-form-basepanel-standard-border-disabled);
1064
- color: var(--components-form-basepanel-standard-text-disabled);
1065
- cursor: not-allowed;
1066
- }
1067
- .eds-contrast input:disabled + .eds-input-panel__container {
1068
- background: var(--components-form-basepanel-contrast-fill-disabled);
1069
- border-style: dashed;
1070
- border-color: var(--components-form-basepanel-contrast-border-disabled);
1071
- color: var(--components-form-basepanel-contrast-text-disabled);
1072
- }
1073
- .eds-input-panel__container .eds-checkbox__icon,
1074
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
1075
- .eds-input-panel__container .eds-form-component--radio__radio {
1076
- width: 1.5rem;
1077
- height: 1.5rem;
1078
- margin-right: 0;
1079
- }
1080
- .eds-input-panel--medium .eds-input-panel__title {
1081
- font-size: 1rem;
1082
- font-weight: 500;
1083
- }
1084
- .eds-input-panel--medium.eds-input-panel__container {
1085
- padding-bottom: 1rem;
1086
- min-height: 3.75rem;
1087
- }
1088
- .eds-input-panel--large.eds-input-panel__container {
1089
- min-height: 6rem;
1090
- }
1091
- .eds-input-panel--large .eds-input-panel__title {
1092
- font-size: 1.25rem;
1093
- font-weight: 500;
1094
- line-height: 1.875rem;
1095
- }
1096
- .eds-input-panel__title-wrapper {
1097
- display: flex;
1098
- justify-content: space-between;
1099
- align-items: center;
1100
- }
1101
- .eds-input-panel__secondary-label-and-icon-wrapper {
1102
- display: flex;
1103
- justify-content: center;
1104
- align-items: center;
1105
- gap: 0.75rem;
1106
- }
1107
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
1108
- margin: 0;
1109
- }
1110
- .eds-input-panel__additional-content {
1111
- margin-top: 0.25rem;
1112
- word-wrap: break-word;
1113
- }
1114
- /* DO NOT CHANGE!*/
1115
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1116
1116
  .eds-textfield__clear-button {
1117
1117
  background: none;
1118
1118
  border: none;