@entur/form 8.3.2-beta.11 → 8.3.2-beta.13

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 (2) hide show
  1. package/dist/styles.css +535 -535
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,5 +1,197 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ .eds-checkbox__container {
4
+ display: flex;
5
+ align-items: center;
6
+ position: relative;
7
+ -webkit-appearance: none;
8
+ -moz-appearance: none;
9
+ appearance: none;
10
+ cursor: pointer;
11
+ -webkit-user-select: none;
12
+ -moz-user-select: none;
13
+ user-select: none;
14
+ width: -moz-fit-content;
15
+ width: fit-content;
16
+ margin: 0.5rem 0;
17
+ }
18
+ .eds-checkbox__container--reduced-click-area {
19
+ height: -moz-fit-content;
20
+ height: fit-content;
21
+ }
22
+ .eds-checkbox__container input {
23
+ position: absolute;
24
+ opacity: 0;
25
+ height: 0;
26
+ width: 0;
27
+ }
28
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
29
+ background-color: var(--components-form-checkbox-standard-fill-selected);
30
+ }
31
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
32
+ visibility: visible;
33
+ }
34
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
35
+ stroke: var(--components-form-checkbox-standard-icon);
36
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
37
+ }
38
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
39
+ fill: var(--components-form-checkbox-standard-icon);
40
+ }
41
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
42
+ color: var(--components-form-checkbox-contrast-fill-selected);
43
+ }
44
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
45
+ stroke: var(--components-form-checkbox-contrast-icon);
46
+ }
47
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
48
+ fill: var(--components-form-checkbox-contrast-icon);
49
+ }
50
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
51
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
52
+ }
53
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
54
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
55
+ }
56
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
57
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
58
+ }
59
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
60
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
61
+ }
62
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
63
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
64
+ }
65
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly {
66
+ background-color: var(--components-form-checkbox-standard-fill-disabled);
67
+ }
68
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
69
+ stroke: var(--components-form-checkbox-standard-icon-readonly);
70
+ }
71
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
72
+ fill: var(--components-form-checkbox-standard-icon-readonly);
73
+ }
74
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
75
+ stroke: var(--components-form-checkbox-contrast-icon-readonly);
76
+ }
77
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
78
+ fill: var(--components-form-checkbox-contrast-icon-readonly);
79
+ }
80
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
81
+ border-color: var(--components-form-checkbox-standard-border);
82
+ background-color: var(--components-form-checkbox-standard-fill-hover);
83
+ }
84
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
85
+ border-color: var(--components-form-checkbox-contrast-border);
86
+ background-color: var(--components-form-checkbox-contrast-fill-hover);
87
+ }
88
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
89
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
90
+ border-color: transparent;
91
+ background-color: var(--components-form-checkbox-standard-fill-selectedhover);
92
+ }
93
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
94
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
95
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
96
+ }
97
+ .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
98
+ .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
99
+ background-color: var(--components-form-checkbox-standard-fill-selected);
100
+ }
101
+ .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
102
+ .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
103
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
104
+ }
105
+ .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
106
+ outline: 2px solid #181c56;
107
+ outline-color: var(--basecolors-stroke-focus-standard);
108
+ outline-offset: 0.125rem;
109
+ }
110
+ .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
111
+ outline-color: var(--basecolors-stroke-focus-contrast);
112
+ }
113
+ .eds-checkbox--disabled {
114
+ cursor: not-allowed;
115
+ }
116
+ .eds-checkbox--disabled input {
117
+ pointer-events: none;
118
+ }
119
+ .eds-checkbox--disabled .eds-checkbox__label {
120
+ opacity: 0.5;
121
+ }
122
+ .eds-checkbox--disabled .eds-checkbox__icon {
123
+ border-color: var(--components-form-checkbox-standard-icon-disabled);
124
+ }
125
+ .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
126
+ border-color: var(--components-form-checkbox-contrast-icon-disabled);
127
+ }
128
+ .eds-checkbox--readonly {
129
+ cursor: default;
130
+ pointer-events: auto;
131
+ -webkit-user-select: text;
132
+ -moz-user-select: text;
133
+ user-select: text;
134
+ }
135
+ .eds-checkbox--readonly input {
136
+ pointer-events: auto;
137
+ -webkit-user-select: text;
138
+ -moz-user-select: text;
139
+ user-select: text;
140
+ }
141
+ .eds-checkbox--readonly .eds-checkbox__icon {
142
+ border-color: var(--components-form-checkbox-standard-border-readonly);
143
+ }
144
+ .eds-contrast .eds-checkbox--readonly .eds-checkbox__icon {
145
+ border-color: var(--components-form-checkbox-contrast-border-readonly);
146
+ }
147
+ .eds-checkbox__icon {
148
+ box-sizing: border-box;
149
+ display: inline-flex;
150
+ justify-content: center;
151
+ align-items: center;
152
+ position: relative;
153
+ margin-right: 1rem;
154
+ height: 1.25rem;
155
+ width: 1.25rem;
156
+ border: 0.125rem solid var(--components-form-checkbox-standard-border);
157
+ border-radius: 0.125rem;
158
+ background-color: transparent;
159
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
160
+ }
161
+ .eds-checkbox__icon--reduced-click-area {
162
+ margin-right: 0;
163
+ }
164
+ .eds-contrast .eds-checkbox__icon {
165
+ border-color: var(--components-form-checkbox-contrast-border);
166
+ }
167
+ .eds-checkbox__icon .eds-checkbox-icon {
168
+ height: 1rem;
169
+ width: 1rem;
170
+ visibility: hidden;
171
+ }
172
+ .eds-checkbox__icon .eds-checkbox-icon path {
173
+ transform-origin: 50% 50%;
174
+ stroke-dasharray: 48;
175
+ stroke-dashoffset: 48;
176
+ stroke-width: 0.375rem;
177
+ }
178
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
179
+ animation: none !important;
180
+ transition: none !important;
181
+ stroke-dasharray: 48;
182
+ stroke-dashoffset: 0;
183
+ }
184
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
185
+ transition: none !important;
186
+ }
187
+
188
+ @keyframes stroke {
189
+ 100% {
190
+ stroke-dashoffset: 0;
191
+ }
192
+ }
193
+ /* DO NOT CHANGE!*/
194
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
195
  .eds-form-control__field-and-feedback-text {
4
196
  display: flex;
5
197
  flex-direction: column;
@@ -208,6 +400,11 @@
208
400
  margin-right: 0;
209
401
  margin-left: 0.75rem;
210
402
  }
403
+ .eds-fieldset {
404
+ margin: 0;
405
+ padding: 0;
406
+ border: 0;
407
+ }
211
408
  /* DO NOT CHANGE!*/
212
409
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
213
410
  .eds-feedback-text {
@@ -281,355 +478,39 @@
281
478
  .eds-contrast .eds-feedback-text__icon--warning circle {
282
479
  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
283
480
  }
284
- .eds-fieldset {
285
- margin: 0;
286
- padding: 0;
287
- border: 0;
288
- }
289
481
  /* DO NOT CHANGE!*/
290
482
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
291
- .eds-switch {
292
- cursor: pointer;
483
+ .eds-input-group {
484
+ color: inherit;
485
+ display: block;
486
+ position: relative;
487
+ }
488
+ .eds-input-group__label {
489
+ color: var(--components-form-baseform-standard-text-label);
490
+ display: flex;
491
+ font-size: 1rem;
492
+ position: absolute;
493
+ 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;
293
498
  -webkit-user-select: none;
294
499
  -moz-user-select: none;
295
500
  user-select: none;
296
- padding: 0.5rem 0;
297
- width: -moz-fit-content;
298
- width: fit-content;
299
- }
300
- .eds-switch input {
301
- opacity: 0;
302
501
  pointer-events: none;
303
- position: absolute;
304
502
  }
305
- .eds-switch--right {
306
- display: flex;
307
- flex-direction: row;
308
- align-items: center;
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;
309
509
  }
310
- .eds-switch--bottom {
311
- display: flex;
312
- flex-direction: column;
313
- align-items: center;
314
- }
315
- .eds-switch__circle {
316
- border-radius: 50%;
317
- height: 1.25rem;
318
- width: 1.25rem;
319
- content: "";
320
- display: flex;
321
- align-items: center;
322
- justify-content: center;
323
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
324
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
325
- background-color: var(--components-form-switch-standard-switch);
326
- top: 0.125rem;
327
- left: 0.125rem;
328
- position: relative;
329
- }
330
- .eds-switch__switch--large .eds-switch__circle {
331
- height: 1.75rem;
332
- width: 1.75rem;
333
- }
334
- .eds-contrast .eds-switch__circle {
335
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
336
- }
337
- .eds-switch__switch {
338
- position: relative;
339
- background-color: var(--components-form-switch-standard-fill-false);
340
- content: "";
341
- display: block;
342
- transition: background-color 0.1s ease-in-out;
343
- height: 1.5rem;
344
- width: 3rem;
345
- border-radius: 1.5rem;
346
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
347
- }
348
- .eds-contrast .eds-switch__switch {
349
- background-color: var(--components-form-switch-contrast-fill-false);
350
- }
351
- .eds-switch--right .eds-switch__switch {
352
- margin-right: 0.75rem;
353
- }
354
- .eds-switch__switch svg g,
355
- .eds-switch__switch path {
356
- fill: var(--components-form-switch-standard-icon-false);
357
- transition: fill ease-in-out 0.1s;
358
- }
359
- .eds-contrast .eds-switch__switch svg g,
360
- .eds-contrast .eds-switch__switch path {
361
- fill: var(--components-form-switch-contrast-icon-false);
362
- }
363
- :checked + .eds-switch__switch {
364
- background-color: var(--eds-switch-color);
365
- }
366
- :checked + .eds-switch__switch .eds-switch__circle {
367
- left: 1.625rem;
368
- }
369
- :checked + .eds-switch__switch .eds-switch__circle svg g,
370
- :checked + .eds-switch__switch .eds-switch__circle path {
371
- fill: var(--eds-switch-color);
372
- }
373
- .eds-contrast :checked + .eds-switch__switch {
374
- background-color: var(--eds-switch-contrast-color);
375
- }
376
- :focus-visible + .eds-switch__switch {
377
- outline: 2px solid #181c56;
378
- outline-color: var(--basecolors-stroke-focus-standard);
379
- outline-offset: 0.125rem;
380
- }
381
- .eds-contrast :focus-visible + .eds-switch__switch {
382
- outline-color: var(--basecolors-stroke-focus-contrast);
383
- }
384
- .eds-switch__switch--large {
385
- width: 3.75rem;
386
- height: 2rem;
387
- border-radius: 3.75rem;
388
- }
389
- :checked + .eds-switch__switch--large .eds-switch__circle {
390
- left: 1.875rem;
391
- }
392
- .eds-switch__switch--large svg {
393
- position: relative;
394
- right: 0.05rem;
395
- }
396
- .eds-switch__label--large--right {
397
- font-size: 1rem;
398
- }
399
- .eds-switch__label--large--bottom {
400
- font-size: 0.875rem;
401
- }
402
- .eds-switch__label--medium--right {
403
- font-size: 0.875rem;
404
- }
405
- .eds-switch__label--medium--bottom {
406
- font-size: 0.75rem;
407
- }
408
- /* DO NOT CHANGE!*/
409
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
410
- .eds-checkbox__container {
411
- display: flex;
412
- align-items: center;
413
- position: relative;
414
- -webkit-appearance: none;
415
- -moz-appearance: none;
416
- appearance: none;
417
- cursor: pointer;
418
- -webkit-user-select: none;
419
- -moz-user-select: none;
420
- user-select: none;
421
- width: -moz-fit-content;
422
- width: fit-content;
423
- margin: 0.5rem 0;
424
- }
425
- .eds-checkbox__container--reduced-click-area {
426
- height: -moz-fit-content;
427
- height: fit-content;
428
- }
429
- .eds-checkbox__container input {
430
- position: absolute;
431
- opacity: 0;
432
- height: 0;
433
- width: 0;
434
- }
435
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
436
- background-color: var(--components-form-checkbox-standard-fill-selected);
437
- }
438
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
439
- visibility: visible;
440
- }
441
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
442
- stroke: var(--components-form-checkbox-standard-icon);
443
- animation: stroke ease-in-out 0.2s 0.1s forwards;
444
- }
445
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
446
- fill: var(--components-form-checkbox-standard-icon);
447
- }
448
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
449
- color: var(--components-form-checkbox-contrast-fill-selected);
450
- }
451
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
452
- stroke: var(--components-form-checkbox-contrast-icon);
453
- }
454
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
455
- fill: var(--components-form-checkbox-contrast-icon);
456
- }
457
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
458
- background-color: var(--components-form-checkbox-standard-icon-disabled);
459
- }
460
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
461
- background-color: var(--components-form-checkbox-standard-icon-disabled);
462
- }
463
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
464
- background-color: var(--components-form-checkbox-standard-icon-disabled);
465
- }
466
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
467
- background-color: var(--components-form-checkbox-standard-icon-disabled);
468
- }
469
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
470
- background-color: var(--components-form-checkbox-standard-icon-disabled);
471
- }
472
- .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly {
473
- background-color: var(--components-form-checkbox-standard-fill-disabled);
474
- }
475
- .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
476
- stroke: var(--components-form-checkbox-standard-icon-readonly);
477
- }
478
- .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
479
- fill: var(--components-form-checkbox-standard-icon-readonly);
480
- }
481
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon path {
482
- stroke: var(--components-form-checkbox-contrast-icon-readonly);
483
- }
484
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
485
- fill: var(--components-form-checkbox-contrast-icon-readonly);
486
- }
487
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
488
- border-color: var(--components-form-checkbox-standard-border);
489
- background-color: var(--components-form-checkbox-standard-fill-hover);
490
- }
491
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
492
- border-color: var(--components-form-checkbox-contrast-border);
493
- background-color: var(--components-form-checkbox-contrast-fill-hover);
494
- }
495
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
496
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
497
- border-color: transparent;
498
- background-color: var(--components-form-checkbox-standard-fill-selectedhover);
499
- }
500
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
501
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
502
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
503
- }
504
- .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
505
- .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
506
- background-color: var(--components-form-checkbox-standard-fill-selected);
507
- }
508
- .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
509
- .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
510
- background-color: var(--components-form-checkbox-contrast-fill-selected);
511
- }
512
- .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
513
- outline: 2px solid #181c56;
514
- outline-color: var(--basecolors-stroke-focus-standard);
515
- outline-offset: 0.125rem;
516
- }
517
- .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
518
- outline-color: var(--basecolors-stroke-focus-contrast);
519
- }
520
- .eds-checkbox--disabled {
521
- cursor: not-allowed;
522
- }
523
- .eds-checkbox--disabled input {
524
- pointer-events: none;
525
- }
526
- .eds-checkbox--disabled .eds-checkbox__label {
527
- opacity: 0.5;
528
- }
529
- .eds-checkbox--disabled .eds-checkbox__icon {
530
- border-color: var(--components-form-checkbox-standard-icon-disabled);
531
- }
532
- .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
533
- border-color: var(--components-form-checkbox-contrast-icon-disabled);
534
- }
535
- .eds-checkbox--readonly {
536
- cursor: default;
537
- pointer-events: auto;
538
- -webkit-user-select: text;
539
- -moz-user-select: text;
540
- user-select: text;
541
- }
542
- .eds-checkbox--readonly input {
543
- pointer-events: auto;
544
- -webkit-user-select: text;
545
- -moz-user-select: text;
546
- user-select: text;
547
- }
548
- .eds-checkbox--readonly .eds-checkbox__icon {
549
- border-color: var(--components-form-checkbox-standard-border-readonly);
550
- }
551
- .eds-contrast .eds-checkbox--readonly .eds-checkbox__icon {
552
- border-color: var(--components-form-checkbox-contrast-border-readonly);
553
- }
554
- .eds-checkbox__icon {
555
- box-sizing: border-box;
556
- display: inline-flex;
557
- justify-content: center;
558
- align-items: center;
559
- position: relative;
560
- margin-right: 1rem;
561
- height: 1.25rem;
562
- width: 1.25rem;
563
- border: 0.125rem solid var(--components-form-checkbox-standard-border);
564
- border-radius: 0.125rem;
565
- background-color: transparent;
566
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
567
- }
568
- .eds-checkbox__icon--reduced-click-area {
569
- margin-right: 0;
570
- }
571
- .eds-contrast .eds-checkbox__icon {
572
- border-color: var(--components-form-checkbox-contrast-border);
573
- }
574
- .eds-checkbox__icon .eds-checkbox-icon {
575
- height: 1rem;
576
- width: 1rem;
577
- visibility: hidden;
578
- }
579
- .eds-checkbox__icon .eds-checkbox-icon path {
580
- transform-origin: 50% 50%;
581
- stroke-dasharray: 48;
582
- stroke-dashoffset: 48;
583
- stroke-width: 0.375rem;
584
- }
585
- .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
586
- animation: none !important;
587
- transition: none !important;
588
- stroke-dasharray: 48;
589
- stroke-dashoffset: 0;
590
- }
591
- .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
592
- transition: none !important;
593
- }
594
-
595
- @keyframes stroke {
596
- 100% {
597
- stroke-dashoffset: 0;
598
- }
599
- }
600
- /* DO NOT CHANGE!*/
601
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
602
- .eds-input-group {
603
- color: inherit;
604
- display: block;
605
- position: relative;
606
- }
607
- .eds-input-group__label {
608
- color: var(--components-form-baseform-standard-text-label);
609
- display: flex;
610
- font-size: 1rem;
611
- position: absolute;
612
- line-height: 1rem;
613
- height: 3rem;
614
- padding-left: 0;
615
- top: 1rem;
616
- 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;
617
- -webkit-user-select: none;
618
- -moz-user-select: none;
619
- user-select: none;
620
- pointer-events: none;
621
- }
622
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
623
- top: 0.375rem;
624
- font-size: 0.75rem;
625
- line-height: 0.75rem;
626
- height: 10px;
627
- padding: 0;
628
- }
629
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
630
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
631
- background: var(--textarea-label-background);
632
- width: calc(100% - 1rem - 1rem - 4px);
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);
633
514
  }
634
515
  .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
635
516
  top: 0.5rem;
@@ -750,52 +631,319 @@
750
631
  background-color: var(--components-form-radio-contrast-fill-default);
751
632
  border-color: var(--components-form-radio-contrast-border);
752
633
  }
753
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
754
- background: var(--components-form-radio-contrast-fill-disabled);
755
- border-color: var(--components-form-radio-contrast-text-disabled);
634
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
635
+ background: var(--components-form-radio-contrast-fill-disabled);
636
+ border-color: var(--components-form-radio-contrast-text-disabled);
637
+ }
638
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
639
+ border-color: var(--components-form-radio-contrast-text-disabled);
640
+ }
641
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
642
+ background: var(--components-form-radio-contrast-fill-disabled);
643
+ border-color: var(--components-form-radio-contrast-text-disabled);
644
+ }
645
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
646
+ color: var(--components-form-radio-contrast-text-disabled);
647
+ }
648
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
649
+ background-color: var(--components-form-radio-standard-icon-disabled);
650
+ border-color: var(--components-form-radio-contrast-text-disabled);
651
+ }
652
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
653
+ background-color: var(--components-form-radio-standard-icon-disabled);
654
+ }
655
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
656
+ background-color: var(--components-form-radio-contrast-icon-disabled);
657
+ }
658
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
659
+ background: var(--components-form-radio-standard-fill-disabled);
660
+ border-color: var(--components-form-radio-standard-border-readonly);
661
+ }
662
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
663
+ background: var(--components-form-radio-contrast-fill-disabled);
664
+ border-color: var(--components-form-radio-contrast-border-readonly);
665
+ }
666
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
667
+ background-color: var(--components-form-radio-standard-icon);
668
+ border-color: var(--components-form-radio-standard-border-readonly);
669
+ }
670
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
671
+ display: block;
672
+ width: 0;
673
+ height: 0;
674
+ border-radius: 50%;
675
+ background-color: var(--components-form-radio-standard-fill-selected);
676
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
677
+ }
678
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
679
+ background-color: var(--components-form-radio-contrast-icon);
680
+ }
681
+ /* DO NOT CHANGE!*/
682
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
683
+ .eds-switch {
684
+ cursor: pointer;
685
+ -webkit-user-select: none;
686
+ -moz-user-select: none;
687
+ user-select: none;
688
+ padding: 0.5rem 0;
689
+ width: -moz-fit-content;
690
+ width: fit-content;
691
+ }
692
+ .eds-switch input {
693
+ opacity: 0;
694
+ pointer-events: none;
695
+ position: absolute;
696
+ }
697
+ .eds-switch--right {
698
+ display: flex;
699
+ flex-direction: row;
700
+ align-items: center;
701
+ }
702
+ .eds-switch--bottom {
703
+ display: flex;
704
+ flex-direction: column;
705
+ align-items: center;
706
+ }
707
+ .eds-switch__circle {
708
+ border-radius: 50%;
709
+ height: 1.25rem;
710
+ width: 1.25rem;
711
+ content: "";
712
+ display: flex;
713
+ align-items: center;
714
+ justify-content: center;
715
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
716
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
717
+ background-color: var(--components-form-switch-standard-switch);
718
+ top: 0.125rem;
719
+ left: 0.125rem;
720
+ position: relative;
721
+ }
722
+ .eds-switch__switch--large .eds-switch__circle {
723
+ height: 1.75rem;
724
+ width: 1.75rem;
725
+ }
726
+ .eds-contrast .eds-switch__circle {
727
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
728
+ }
729
+ .eds-switch__switch {
730
+ position: relative;
731
+ background-color: var(--components-form-switch-standard-fill-false);
732
+ content: "";
733
+ display: block;
734
+ transition: background-color 0.1s ease-in-out;
735
+ height: 1.5rem;
736
+ width: 3rem;
737
+ border-radius: 1.5rem;
738
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
739
+ }
740
+ .eds-contrast .eds-switch__switch {
741
+ background-color: var(--components-form-switch-contrast-fill-false);
742
+ }
743
+ .eds-switch--right .eds-switch__switch {
744
+ margin-right: 0.75rem;
745
+ }
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;
750
+ }
751
+ .eds-contrast .eds-switch__switch svg g,
752
+ .eds-contrast .eds-switch__switch path {
753
+ fill: var(--components-form-switch-contrast-icon-false);
754
+ }
755
+ :checked + .eds-switch__switch {
756
+ background-color: var(--eds-switch-color);
757
+ }
758
+ :checked + .eds-switch__switch .eds-switch__circle {
759
+ left: 1.625rem;
760
+ }
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);
764
+ }
765
+ .eds-contrast :checked + .eds-switch__switch {
766
+ background-color: var(--eds-switch-contrast-color);
767
+ }
768
+ :focus-visible + .eds-switch__switch {
769
+ outline: 2px solid #181c56;
770
+ outline-color: var(--basecolors-stroke-focus-standard);
771
+ outline-offset: 0.125rem;
772
+ }
773
+ .eds-contrast :focus-visible + .eds-switch__switch {
774
+ outline-color: var(--basecolors-stroke-focus-contrast);
775
+ }
776
+ .eds-switch__switch--large {
777
+ width: 3.75rem;
778
+ height: 2rem;
779
+ border-radius: 3.75rem;
780
+ }
781
+ :checked + .eds-switch__switch--large .eds-switch__circle {
782
+ left: 1.875rem;
783
+ }
784
+ .eds-switch__switch--large svg {
785
+ position: relative;
786
+ right: 0.05rem;
787
+ }
788
+ .eds-switch__label--large--right {
789
+ font-size: 1rem;
790
+ }
791
+ .eds-switch__label--large--bottom {
792
+ font-size: 0.875rem;
793
+ }
794
+ .eds-switch__label--medium--right {
795
+ font-size: 0.875rem;
796
+ }
797
+ .eds-switch__label--medium--bottom {
798
+ font-size: 0.75rem;
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);
876
+ }
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 */
881
+ }
882
+ .eds-contrast .eds-input-panel__container:hover {
883
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
884
+ }
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);
756
889
  }
757
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
758
- border-color: var(--components-form-radio-contrast-text-disabled);
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);
759
894
  }
760
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
761
- background: var(--components-form-radio-contrast-fill-disabled);
762
- border-color: var(--components-form-radio-contrast-text-disabled);
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;
763
900
  }
764
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
765
- color: var(--components-form-radio-contrast-text-disabled);
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);
766
906
  }
767
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
768
- background-color: var(--components-form-radio-standard-icon-disabled);
769
- border-color: var(--components-form-radio-contrast-text-disabled);
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;
770
913
  }
771
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
772
- background-color: var(--components-form-radio-standard-icon-disabled);
914
+ .eds-input-panel--medium .eds-input-panel__title {
915
+ font-size: 1rem;
916
+ font-weight: 500;
773
917
  }
774
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
775
- background-color: var(--components-form-radio-contrast-icon-disabled);
918
+ .eds-input-panel--medium.eds-input-panel__container {
919
+ padding-bottom: 1rem;
920
+ min-height: 3.75rem;
776
921
  }
777
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
778
- background: var(--components-form-radio-standard-fill-disabled);
779
- border-color: var(--components-form-radio-standard-border-readonly);
922
+ .eds-input-panel--large.eds-input-panel__container {
923
+ min-height: 6rem;
780
924
  }
781
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
782
- background: var(--components-form-radio-contrast-fill-disabled);
783
- border-color: var(--components-form-radio-contrast-border-readonly);
925
+ .eds-input-panel--large .eds-input-panel__title {
926
+ font-size: 1.25rem;
927
+ font-weight: 500;
928
+ line-height: 1.875rem;
784
929
  }
785
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
786
- background-color: var(--components-form-radio-standard-icon);
787
- border-color: var(--components-form-radio-standard-border-readonly);
930
+ .eds-input-panel__title-wrapper {
931
+ display: flex;
932
+ justify-content: space-between;
933
+ align-items: center;
788
934
  }
789
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
790
- display: block;
791
- width: 0;
792
- height: 0;
793
- border-radius: 50%;
794
- background-color: var(--components-form-radio-standard-fill-selected);
795
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
935
+ .eds-input-panel__secondary-label-and-icon-wrapper {
936
+ display: flex;
937
+ justify-content: center;
938
+ align-items: center;
939
+ gap: 0.75rem;
796
940
  }
797
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
798
- background-color: var(--components-form-radio-contrast-icon);
941
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
942
+ margin: 0;
943
+ }
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;
@@ -1155,17 +1155,6 @@ input:disabled + .eds-input-panel__container {
1155
1155
  }
1156
1156
  /* DO NOT CHANGE!*/
1157
1157
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1158
- .eds-segmented-control {
1159
- margin-top: 0.25rem;
1160
- display: flex;
1161
- background: var(--components-form-segmentedcontrol-standard-background);
1162
- border-radius: 0.5rem;
1163
- }
1164
- .eds-contrast .eds-segmented-control {
1165
- background: var(--components-form-segmentedcontrol-contrast-background);
1166
- }
1167
- /* DO NOT CHANGE!*/
1168
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1169
1158
  .eds-segmented-choice {
1170
1159
  display: block;
1171
1160
  flex: 1 1 0px;
@@ -1845,3 +1834,14 @@ input:disabled + .eds-input-panel__container {
1845
1834
  :root {
1846
1835
  --eds-form: 1;
1847
1836
  }
1837
+ /* DO NOT CHANGE!*/
1838
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1839
+ .eds-segmented-control {
1840
+ margin-top: 0.25rem;
1841
+ display: flex;
1842
+ background: var(--components-form-segmentedcontrol-standard-background);
1843
+ border-radius: 0.5rem;
1844
+ }
1845
+ .eds-contrast .eds-segmented-control {
1846
+ background: var(--components-form-segmentedcontrol-contrast-background);
1847
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.3.2-beta.11",
3
+ "version": "8.3.2-beta.13",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,16 +27,16 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.13-beta.11",
30
+ "@entur/button": "^3.3.13-beta.13",
31
31
  "@entur/icons": "^8.0.0",
32
32
  "@entur/tokens": "^3.19.1",
33
- "@entur/tooltip": "^5.2.13-beta.11",
34
- "@entur/typography": "^1.10.0-beta.11",
33
+ "@entur/tooltip": "^5.2.13-beta.13",
34
+ "@entur/typography": "^1.10.0-beta.13",
35
35
  "@entur/utils": "^0.12.3",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "43d0a9514cbaeb6c8e319c4286bed9bd3ea21b22"
41
+ "gitHead": "c9b59ab0f79e2611a602951c89f4f2c8213e235f"
42
42
  }