@entur/form 7.1.5 → 7.1.6

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 (6) hide show
  1. package/dist/Checkbox.d.ts +2 -2
  2. package/dist/form.cjs.development.js.map +1 -1
  3. package/dist/form.cjs.production.min.js.map +1 -1
  4. package/dist/form.esm.js.map +1 -1
  5. package/dist/styles.css +371 -371
  6. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -1,157 +1,75 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-checkbox__container {
3
+ .eds-feedback-text {
4
4
  display: flex;
5
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--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
42
- opacity: 0.5;
43
- }
44
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
45
- opacity: 0.5;
46
- }
47
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
48
- opacity: 0.5;
49
- }
50
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
51
- opacity: 0.5;
52
- }
53
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
54
- opacity: 0.5;
55
- }
56
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
57
- background-color: var(--components-form-checkbox-contrast-fill-selected);
58
- }
59
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
60
- stroke: var(--components-form-checkbox-contrast-icon);
6
+ margin-top: 0.25rem;
61
7
  }
62
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
63
- fill: var(--components-form-checkbox-contrast-icon);
8
+ .eds-feedback-text--info, .eds-feedback-text--information {
9
+ padding-left: calc(1rem + 0.125rem);
64
10
  }
65
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
66
- border-color: var(--components-form-checkbox-standard-border);
67
- background-color: var(--components-form-checkbox-standard-fill-hover);
11
+ .eds-feedback-text__text {
12
+ color: var(--components-form-feedbacktext-information-standard-text);
68
13
  }
69
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
70
- border-color: var(--components-form-checkbox-contrast-border);
71
- background-color: var(--components-form-checkbox-contrast-fill-hover);
14
+ .eds-contrast .eds-feedback-text__text {
15
+ color: var(--components-form-feedbacktext-information-contrast-text);
72
16
  }
73
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
74
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
75
- border-color: transparent;
76
- background-color: var(--components-form-checkbox-standard-fill-selectedhover);
17
+
18
+ .eds-feedback-text__icon {
19
+ font-size: 1.5rem;
20
+ min-height: 1.5rem;
21
+ min-width: 1.5rem;
22
+ padding-right: 0.5rem;
23
+ position: relative;
24
+ top: -0.1rem;
77
25
  }
78
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
79
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
80
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
26
+ .eds-feedback-text__icon--success {
27
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
81
28
  }
82
- .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
83
- .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
84
- background-color: var(--components-form-checkbox-standard-fill-selected);
29
+ .eds-feedback-text__icon--success circle {
30
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
85
31
  }
86
- .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
87
- .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
88
- background-color: var(--components-form-checkbox-contrast-fill-selected);
32
+ .eds-contrast .eds-feedback-text__icon--success {
33
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
89
34
  }
90
- .eds-checkbox__container:focus + .eds-checkbox__icon,
91
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
92
- outline: 2px solid #181c56;
93
- outline-color: var(--basecolors-stroke-focus-standard);
94
- outline-offset: 0.125rem;
35
+ .eds-contrast .eds-feedback-text__icon--success circle {
36
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
95
37
  }
96
- .eds-checkbox__container:focus + .eds-checkbox__icon,
97
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
98
- outline: 2px solid #181c56;
99
- outline-color: var(--basecolors-stroke-focus-standard);
100
- outline-offset: 0.125rem;
38
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
39
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
101
40
  }
102
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
103
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
104
- outline-color: var(--basecolors-stroke-focus-contrast);
41
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
42
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
105
43
  }
106
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
107
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
108
- outline-color: var(--basecolors-stroke-focus-contrast);
44
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
45
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
109
46
  }
110
- .eds-checkbox--disabled {
111
- pointer-events: none;
47
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
48
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
112
49
  }
113
- .eds-checkbox--disabled .eds-checkbox__label {
114
- opacity: 0.5;
50
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
51
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
115
52
  }
116
- .eds-checkbox--disabled .eds-checkbox__icon {
117
- opacity: 0.5;
53
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
54
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
118
55
  }
119
- .eds-checkbox__icon {
120
- box-sizing: border-box;
121
- display: inline-flex;
122
- justify-content: center;
123
- align-items: center;
124
- position: relative;
125
- margin-right: 1rem;
126
- height: 1.25rem;
127
- width: 1.25rem;
128
- border: 0.125rem solid var(--components-form-checkbox-standard-border);
129
- border-radius: 0.125rem;
130
- background-color: transparent;
131
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
56
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
57
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
132
58
  }
133
- .eds-checkbox__icon--reduced-click-area {
134
- margin-right: 0;
59
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
60
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
135
61
  }
136
- .eds-contrast .eds-checkbox__icon {
137
- border-color: var(--components-form-checkbox-contrast-border);
62
+ .eds-feedback-text__icon--warning {
63
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
138
64
  }
139
- .eds-checkbox__icon .eds-checkbox-icon {
140
- height: 1rem;
141
- width: 1rem;
142
- visibility: hidden;
65
+ .eds-feedback-text__icon--warning .svg-exclamation {
66
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
143
67
  }
144
- .eds-checkbox__icon .eds-checkbox-icon path {
145
- transform-origin: 50% 50%;
146
- stroke-dasharray: 48;
147
- stroke-dashoffset: 48;
148
- stroke-width: 0.375rem;
68
+ .eds-contrast .eds-feedback-text__icon--warning {
69
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
149
70
  }
150
-
151
- @keyframes stroke {
152
- 100% {
153
- stroke-dashoffset: 0;
154
- }
71
+ .eds-contrast .eds-feedback-text__icon--warning circle {
72
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
155
73
  }
156
74
  /* DO NOT CHANGE!*/
157
75
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -338,92 +256,160 @@
338
256
  .eds-form-control__append {
339
257
  margin-left: 0;
340
258
  }
341
- .eds-fieldset {
342
- margin: 0;
343
- padding: 0;
344
- border: 0;
345
- }
346
259
  /* DO NOT CHANGE!*/
347
260
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
348
- .eds-form-component--radio__container {
261
+ .eds-checkbox__container {
349
262
  display: flex;
350
- justify-content: center;
351
263
  align-items: center;
352
264
  position: relative;
265
+ -webkit-appearance: none;
266
+ -moz-appearance: none;
267
+ appearance: none;
353
268
  cursor: pointer;
354
- height: 2rem;
355
- width: -moz-fit-content;
356
- width: fit-content;
357
269
  -webkit-user-select: none;
358
270
  -moz-user-select: none;
359
271
  user-select: none;
272
+ width: -moz-fit-content;
273
+ width: fit-content;
274
+ margin: 0.5rem 0;
360
275
  }
361
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
362
- background-color: var(--components-form-radio-standard-fill-hover);
363
- }
364
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
365
- background-color: var(--components-form-radio-contrast-fill-hover);
276
+ .eds-checkbox__container--reduced-click-area {
277
+ height: -moz-fit-content;
278
+ height: fit-content;
366
279
  }
367
- .eds-form-component--radio__container input {
280
+ .eds-checkbox__container input {
368
281
  position: absolute;
369
282
  opacity: 0;
370
- cursor: pointer;
371
283
  height: 0;
372
284
  width: 0;
373
285
  }
374
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
375
- height: 0.625rem;
376
- width: 0.625rem;
286
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
287
+ background-color: var(--components-form-checkbox-standard-fill-selected);
377
288
  }
378
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
379
- outline: 2px solid #181c56;
380
- outline-color: var(--basecolors-stroke-focus-standard);
381
- outline-offset: 0.125rem;
289
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
290
+ visibility: visible;
382
291
  }
383
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
384
- outline-color: var(--basecolors-stroke-focus-contrast);
292
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
293
+ stroke: var(--components-form-checkbox-standard-icon);
294
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
385
295
  }
386
- .eds-form-component--radio__container .eds-form-component--radio__radio {
387
- position: relative;
388
- height: 1.25rem;
389
- width: 1.25rem;
390
- margin-right: 1rem;
391
- background-color: var(--components-form-radio-standard-fill-default);
392
- border: 0.125rem solid var(--components-form-radio-standard-border);
393
- border-radius: 50%;
394
- display: flex;
395
- align-items: center;
396
- justify-content: center;
296
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
297
+ fill: var(--components-form-checkbox-standard-icon);
397
298
  }
398
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
399
- background-color: var(--components-form-radio-contrast-fill-default);
400
- border-color: var(--components-form-radio-contrast-border);
299
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
300
+ opacity: 0.5;
401
301
  }
402
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
403
- background: var(--components-form-baseform-contrast-fill-disabled);
404
- border-color: var(--components-form-baseform-contrast-text-disabled);
405
- cursor: not-allowed;
302
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
303
+ opacity: 0.5;
406
304
  }
407
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
408
- border-color: var(--components-form-baseform-contrast-text-disabled);
305
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
306
+ opacity: 0.5;
409
307
  }
410
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
411
- background: var(--components-form-baseform-contrast-fill-disabled);
412
- border-color: var(--components-form-baseform-contrast-text-disabled);
308
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
309
+ opacity: 0.5;
413
310
  }
414
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
415
- color: var(--components-form-baseform-contrast-text-disabled);
311
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
312
+ opacity: 0.5;
416
313
  }
417
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
418
- display: block;
419
- width: 0;
420
- height: 0;
421
- border-radius: 50%;
422
- background-color: var(--components-form-radio-standard-fill-selected);
423
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
314
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
315
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
424
316
  }
425
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
426
- background-color: var(--components-form-radio-contrast-icon);
317
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
318
+ stroke: var(--components-form-checkbox-contrast-icon);
319
+ }
320
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
321
+ fill: var(--components-form-checkbox-contrast-icon);
322
+ }
323
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
324
+ border-color: var(--components-form-checkbox-standard-border);
325
+ background-color: var(--components-form-checkbox-standard-fill-hover);
326
+ }
327
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
328
+ border-color: var(--components-form-checkbox-contrast-border);
329
+ background-color: var(--components-form-checkbox-contrast-fill-hover);
330
+ }
331
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
332
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
333
+ border-color: transparent;
334
+ background-color: var(--components-form-checkbox-standard-fill-selectedhover);
335
+ }
336
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
337
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
338
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
339
+ }
340
+ .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
341
+ .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
342
+ background-color: var(--components-form-checkbox-standard-fill-selected);
343
+ }
344
+ .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
345
+ .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
346
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
347
+ }
348
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
349
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
350
+ outline: 2px solid #181c56;
351
+ outline-color: var(--basecolors-stroke-focus-standard);
352
+ outline-offset: 0.125rem;
353
+ }
354
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
355
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
356
+ outline: 2px solid #181c56;
357
+ outline-color: var(--basecolors-stroke-focus-standard);
358
+ outline-offset: 0.125rem;
359
+ }
360
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
361
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
362
+ outline-color: var(--basecolors-stroke-focus-contrast);
363
+ }
364
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
365
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
366
+ outline-color: var(--basecolors-stroke-focus-contrast);
367
+ }
368
+ .eds-checkbox--disabled {
369
+ pointer-events: none;
370
+ }
371
+ .eds-checkbox--disabled .eds-checkbox__label {
372
+ opacity: 0.5;
373
+ }
374
+ .eds-checkbox--disabled .eds-checkbox__icon {
375
+ opacity: 0.5;
376
+ }
377
+ .eds-checkbox__icon {
378
+ box-sizing: border-box;
379
+ display: inline-flex;
380
+ justify-content: center;
381
+ align-items: center;
382
+ position: relative;
383
+ margin-right: 1rem;
384
+ height: 1.25rem;
385
+ width: 1.25rem;
386
+ border: 0.125rem solid var(--components-form-checkbox-standard-border);
387
+ border-radius: 0.125rem;
388
+ background-color: transparent;
389
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
390
+ }
391
+ .eds-checkbox__icon--reduced-click-area {
392
+ margin-right: 0;
393
+ }
394
+ .eds-contrast .eds-checkbox__icon {
395
+ border-color: var(--components-form-checkbox-contrast-border);
396
+ }
397
+ .eds-checkbox__icon .eds-checkbox-icon {
398
+ height: 1rem;
399
+ width: 1rem;
400
+ visibility: hidden;
401
+ }
402
+ .eds-checkbox__icon .eds-checkbox-icon path {
403
+ transform-origin: 50% 50%;
404
+ stroke-dasharray: 48;
405
+ stroke-dashoffset: 48;
406
+ stroke-width: 0.375rem;
407
+ }
408
+
409
+ @keyframes stroke {
410
+ 100% {
411
+ stroke-dashoffset: 0;
412
+ }
427
413
  }
428
414
  /* DO NOT CHANGE!*/
429
415
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -554,6 +540,11 @@
554
540
  .eds-form-control-wrapper .eds-tooltip::after {
555
541
  background: var(--components-tooltip-tooltip-standard-fill);
556
542
  }
543
+ .eds-fieldset {
544
+ margin: 0;
545
+ padding: 0;
546
+ border: 0;
547
+ }
557
548
  /* DO NOT CHANGE!*/
558
549
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
559
550
  textarea.eds-form-control.eds-textarea {
@@ -563,159 +554,85 @@ textarea.eds-form-control.eds-textarea {
563
554
  }
564
555
  /* DO NOT CHANGE!*/
565
556
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
566
- .eds-input-panel[focus-within] .eds-input-panel__container {
567
- outline: 2px solid #181c56;
568
- outline-color: var(--basecolors-stroke-focus-standard);
569
- outline-offset: 0.125rem;
570
- }
571
- .eds-input-panel:focus-within .eds-input-panel__container {
572
- outline: 2px solid #181c56;
573
- outline-color: var(--basecolors-stroke-focus-standard);
574
- outline-offset: 0.125rem;
557
+ .eds-form-component--radio__container {
558
+ display: flex;
559
+ justify-content: center;
560
+ align-items: center;
561
+ position: relative;
562
+ cursor: pointer;
563
+ height: 2rem;
564
+ width: -moz-fit-content;
565
+ width: fit-content;
566
+ -webkit-user-select: none;
567
+ -moz-user-select: none;
568
+ user-select: none;
575
569
  }
576
- .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
577
- outline-color: var(--basecolors-stroke-focus-contrast);
570
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
571
+ background-color: var(--components-form-radio-standard-fill-hover);
578
572
  }
579
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
580
- outline-color: var(--basecolors-stroke-focus-contrast);
573
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
574
+ background-color: var(--components-form-radio-contrast-fill-hover);
581
575
  }
582
- .eds-input-panel > input {
576
+ .eds-form-component--radio__container input {
583
577
  position: absolute;
584
578
  opacity: 0;
585
579
  cursor: pointer;
586
580
  height: 0;
587
581
  width: 0;
588
582
  }
589
- .eds-input-panel > input:checked + .eds-input-panel__container {
590
- border-color: var(--components-form-basepanel-standard-border-selected);
591
- background: var(--components-form-basepanel-standard-fill-selected);
592
- }
593
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
594
- border-color: var(--components-form-basepanel-contrast-border-selected);
595
- background: var(--components-form-basepanel-contrast-fill-selected);
596
- }
597
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
598
- width: 0.75rem;
599
- height: 0.75rem;
600
- }
601
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
602
- background-color: var(--components-form-radio-contrast-icon);
603
- }
604
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
605
- background-color: var(--components-form-basepanel-standard-fill-hover);
606
- /* The following styling is needed to sync the inner checkbox/radiobutton's
607
- hover state styling with the inputPanel container */
608
- }
609
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
610
- background-color: var(--components-form-basepanel-contrast-fill-hover);
611
- }
612
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
613
- background-color: var(--components-form-basepanel-standard-fill-hover);
614
- border-color: var(--components-form-basepanel-standard-border-selected);
615
- }
616
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
617
- background-color: var(--components-form-basepanel-contrast-fill-hover);
618
- border-color: var(--components-form-basepanel-contrast-border-selected);
583
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
584
+ height: 0.625rem;
585
+ width: 0.625rem;
619
586
  }
620
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
621
- border-color: transparent;
587
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
588
+ outline: 2px solid #181c56;
589
+ outline-color: var(--basecolors-stroke-focus-standard);
590
+ outline-offset: 0.125rem;
622
591
  }
623
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
624
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
592
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
593
+ outline-color: var(--basecolors-stroke-focus-contrast);
625
594
  }
626
- .eds-input-panel__container {
627
- background: var(--components-form-basepanel-standard-fill-default);
628
- border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
629
- color: var(--components-form-basepanel-standard-text-accent);
630
- border-radius: 0.25rem;
631
- display: flex;
632
- flex-direction: column;
633
- justify-content: flex-start;
634
- min-width: 20rem;
595
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
635
596
  position: relative;
636
- padding: 1rem;
637
- -webkit-user-select: none;
638
- -moz-user-select: none;
639
- user-select: none;
640
- width: -moz-fit-content;
641
- width: fit-content;
642
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
643
- }
644
- .eds-contrast .eds-input-panel__container {
645
- background-color: var(--components-form-basepanel-contrast-fill-default);
646
- border-color: var(--components-form-basepanel-contrast-border-default);
647
- color: var(--components-form-basepanel-contrast-text-accent);
648
- }
649
- .eds-input-panel__container:hover {
650
- background-color: var(--components-form-basepanel-standard-fill-hover);
651
- /* The following styling is needed to sync the inner checkbox/radiobutton's
652
- hover state styling with the inputPanel container */
653
- }
654
- .eds-contrast .eds-input-panel__container:hover {
655
- background-color: var(--components-form-basepanel-contrast-fill-hover);
656
- }
657
- .eds-input-panel__container:hover .eds-checkbox__icon,
658
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
659
- background-color: var(--components-form-basepanel-standard-fill-hover);
660
- border-color: var(--components-form-basepanel-standard-border-selected);
597
+ height: 1.25rem;
598
+ width: 1.25rem;
599
+ margin-right: 1rem;
600
+ background-color: var(--components-form-radio-standard-fill-default);
601
+ border: 0.125rem solid var(--components-form-radio-standard-border);
602
+ border-radius: 50%;
603
+ display: flex;
604
+ align-items: center;
605
+ justify-content: center;
661
606
  }
662
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
663
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
664
- background-color: var(--components-form-basepanel-contrast-fill-hover);
665
- border-color: var(--components-form-basepanel-contrast-border-selected);
607
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
608
+ background-color: var(--components-form-radio-contrast-fill-default);
609
+ border-color: var(--components-form-radio-contrast-border);
666
610
  }
667
- input:disabled + .eds-input-panel__container {
668
- background: var(--components-form-basepanel-standard-fill-disabled);
669
- border-color: var(--components-form-basepanel-standard-border-disabled);
670
- color: var(--components-form-basepanel-standard-text-disabled);
611
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
612
+ background: var(--components-form-baseform-contrast-fill-disabled);
613
+ border-color: var(--components-form-baseform-contrast-text-disabled);
671
614
  cursor: not-allowed;
672
615
  }
673
- .eds-contrast input:disabled + .eds-input-panel__container {
674
- background: var(--components-form-basepanel-contrast-fill-disabled);
675
- border-style: dashed;
676
- border-color: var(--components-form-basepanel-contrast-border-disabled);
677
- color: var(--components-form-basepanel-contrast-text-disabled);
678
- }
679
- .eds-input-panel__container .eds-checkbox__icon,
680
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
681
- .eds-input-panel__container .eds-form-component--radio__radio {
682
- width: 1.5rem;
683
- height: 1.5rem;
684
- margin-right: 0;
685
- }
686
- .eds-input-panel--medium .eds-input-panel__title {
687
- font-size: 1rem;
688
- font-weight: 500;
689
- }
690
- .eds-input-panel--medium.eds-input-panel__container {
691
- padding-bottom: 1rem;
692
- min-height: 3.75rem;
693
- }
694
- .eds-input-panel--large.eds-input-panel__container {
695
- min-height: 6rem;
696
- }
697
- .eds-input-panel--large .eds-input-panel__title {
698
- font-size: 1.25rem;
699
- font-weight: 500;
700
- line-height: 1.875rem;
616
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
617
+ border-color: var(--components-form-baseform-contrast-text-disabled);
701
618
  }
702
- .eds-input-panel__title-wrapper {
703
- display: flex;
704
- justify-content: space-between;
705
- align-items: center;
619
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
620
+ background: var(--components-form-baseform-contrast-fill-disabled);
621
+ border-color: var(--components-form-baseform-contrast-text-disabled);
706
622
  }
707
- .eds-input-panel__secondary-label-and-icon-wrapper {
708
- display: flex;
709
- justify-content: center;
710
- align-items: center;
711
- gap: 0.75rem;
623
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
624
+ color: var(--components-form-baseform-contrast-text-disabled);
712
625
  }
713
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
714
- margin: 0;
626
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
627
+ display: block;
628
+ width: 0;
629
+ height: 0;
630
+ border-radius: 50%;
631
+ background-color: var(--components-form-radio-standard-fill-selected);
632
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
715
633
  }
716
- .eds-input-panel__additional-content {
717
- margin-top: 0.25rem;
718
- word-wrap: break-word;
634
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
635
+ background-color: var(--components-form-radio-contrast-icon);
719
636
  }
720
637
  /* DO NOT CHANGE!*/
721
638
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -838,76 +755,159 @@ input:disabled + .eds-input-panel__container {
838
755
  }
839
756
  /* DO NOT CHANGE!*/
840
757
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
841
- .eds-feedback-text {
842
- display: flex;
843
- align-items: center;
844
- margin-top: 0.25rem;
758
+ .eds-input-panel[focus-within] .eds-input-panel__container {
759
+ outline: 2px solid #181c56;
760
+ outline-color: var(--basecolors-stroke-focus-standard);
761
+ outline-offset: 0.125rem;
845
762
  }
846
- .eds-feedback-text--info, .eds-feedback-text--information {
847
- padding-left: calc(1rem + 0.125rem);
763
+ .eds-input-panel:focus-within .eds-input-panel__container {
764
+ outline: 2px solid #181c56;
765
+ outline-color: var(--basecolors-stroke-focus-standard);
766
+ outline-offset: 0.125rem;
848
767
  }
849
- .eds-feedback-text__text {
850
- color: var(--components-form-feedbacktext-information-standard-text);
768
+ .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
769
+ outline-color: var(--basecolors-stroke-focus-contrast);
851
770
  }
852
- .eds-contrast .eds-feedback-text__text {
853
- color: var(--components-form-feedbacktext-information-contrast-text);
771
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
772
+ outline-color: var(--basecolors-stroke-focus-contrast);
854
773
  }
855
-
856
- .eds-feedback-text__icon {
857
- font-size: 1.5rem;
858
- min-height: 1.5rem;
859
- min-width: 1.5rem;
860
- padding-right: 0.5rem;
774
+ .eds-input-panel > input {
775
+ position: absolute;
776
+ opacity: 0;
777
+ cursor: pointer;
778
+ height: 0;
779
+ width: 0;
780
+ }
781
+ .eds-input-panel > input:checked + .eds-input-panel__container {
782
+ border-color: var(--components-form-basepanel-standard-border-selected);
783
+ background: var(--components-form-basepanel-standard-fill-selected);
784
+ }
785
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
786
+ border-color: var(--components-form-basepanel-contrast-border-selected);
787
+ background: var(--components-form-basepanel-contrast-fill-selected);
788
+ }
789
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
790
+ width: 0.75rem;
791
+ height: 0.75rem;
792
+ }
793
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
794
+ background-color: var(--components-form-radio-contrast-icon);
795
+ }
796
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
797
+ background-color: var(--components-form-basepanel-standard-fill-hover);
798
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
799
+ hover state styling with the inputPanel container */
800
+ }
801
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
802
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
803
+ }
804
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
805
+ background-color: var(--components-form-basepanel-standard-fill-hover);
806
+ border-color: var(--components-form-basepanel-standard-border-selected);
807
+ }
808
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
809
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
810
+ border-color: var(--components-form-basepanel-contrast-border-selected);
811
+ }
812
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
813
+ border-color: transparent;
814
+ }
815
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
816
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
817
+ }
818
+ .eds-input-panel__container {
819
+ background: var(--components-form-basepanel-standard-fill-default);
820
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
821
+ color: var(--components-form-basepanel-standard-text-accent);
822
+ border-radius: 0.25rem;
823
+ display: flex;
824
+ flex-direction: column;
825
+ justify-content: flex-start;
826
+ min-width: 20rem;
861
827
  position: relative;
862
- top: -0.1rem;
828
+ padding: 1rem;
829
+ -webkit-user-select: none;
830
+ -moz-user-select: none;
831
+ user-select: none;
832
+ width: -moz-fit-content;
833
+ width: fit-content;
834
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
863
835
  }
864
- .eds-feedback-text__icon--success {
865
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
836
+ .eds-contrast .eds-input-panel__container {
837
+ background-color: var(--components-form-basepanel-contrast-fill-default);
838
+ border-color: var(--components-form-basepanel-contrast-border-default);
839
+ color: var(--components-form-basepanel-contrast-text-accent);
866
840
  }
867
- .eds-feedback-text__icon--success circle {
868
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
841
+ .eds-input-panel__container:hover {
842
+ background-color: var(--components-form-basepanel-standard-fill-hover);
843
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
844
+ hover state styling with the inputPanel container */
869
845
  }
870
- .eds-contrast .eds-feedback-text__icon--success {
871
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
846
+ .eds-contrast .eds-input-panel__container:hover {
847
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
872
848
  }
873
- .eds-contrast .eds-feedback-text__icon--success circle {
874
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
849
+ .eds-input-panel__container:hover .eds-checkbox__icon,
850
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
851
+ background-color: var(--components-form-basepanel-standard-fill-hover);
852
+ border-color: var(--components-form-basepanel-standard-border-selected);
875
853
  }
876
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
877
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
854
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
855
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
856
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
857
+ border-color: var(--components-form-basepanel-contrast-border-selected);
878
858
  }
879
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
880
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
859
+ input:disabled + .eds-input-panel__container {
860
+ background: var(--components-form-basepanel-standard-fill-disabled);
861
+ border-color: var(--components-form-basepanel-standard-border-disabled);
862
+ color: var(--components-form-basepanel-standard-text-disabled);
863
+ cursor: not-allowed;
881
864
  }
882
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
883
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
865
+ .eds-contrast input:disabled + .eds-input-panel__container {
866
+ background: var(--components-form-basepanel-contrast-fill-disabled);
867
+ border-style: dashed;
868
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
869
+ color: var(--components-form-basepanel-contrast-text-disabled);
884
870
  }
885
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
886
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
871
+ .eds-input-panel__container .eds-checkbox__icon,
872
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
873
+ .eds-input-panel__container .eds-form-component--radio__radio {
874
+ width: 1.5rem;
875
+ height: 1.5rem;
876
+ margin-right: 0;
887
877
  }
888
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
889
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
878
+ .eds-input-panel--medium .eds-input-panel__title {
879
+ font-size: 1rem;
880
+ font-weight: 500;
890
881
  }
891
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
892
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
882
+ .eds-input-panel--medium.eds-input-panel__container {
883
+ padding-bottom: 1rem;
884
+ min-height: 3.75rem;
893
885
  }
894
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
895
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
886
+ .eds-input-panel--large.eds-input-panel__container {
887
+ min-height: 6rem;
896
888
  }
897
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
898
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
889
+ .eds-input-panel--large .eds-input-panel__title {
890
+ font-size: 1.25rem;
891
+ font-weight: 500;
892
+ line-height: 1.875rem;
899
893
  }
900
- .eds-feedback-text__icon--warning {
901
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
894
+ .eds-input-panel__title-wrapper {
895
+ display: flex;
896
+ justify-content: space-between;
897
+ align-items: center;
902
898
  }
903
- .eds-feedback-text__icon--warning .svg-exclamation {
904
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
899
+ .eds-input-panel__secondary-label-and-icon-wrapper {
900
+ display: flex;
901
+ justify-content: center;
902
+ align-items: center;
903
+ gap: 0.75rem;
905
904
  }
906
- .eds-contrast .eds-feedback-text__icon--warning {
907
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
905
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
906
+ margin: 0;
908
907
  }
909
- .eds-contrast .eds-feedback-text__icon--warning circle {
910
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
908
+ .eds-input-panel__additional-content {
909
+ margin-top: 0.25rem;
910
+ word-wrap: break-word;
911
911
  }
912
912
  /* DO NOT CHANGE!*/
913
913
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */