@entur/form 7.0.29 → 7.0.31-RC.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +408 -411
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,5 +1,219 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ .eds-feedback-text {
4
+ display: flex;
5
+ align-items: center;
6
+ margin-top: 0.25rem;
7
+ }
8
+ .eds-feedback-text--info {
9
+ padding-left: calc(1rem + 0.125rem);
10
+ }
11
+ .eds-feedback-text__text {
12
+ color: #181c56;
13
+ }
14
+ .eds-contrast .eds-feedback-text__text {
15
+ color: #ffffff;
16
+ }
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;
25
+ }
26
+ .eds-feedback-text__icon--success {
27
+ color: #1a8e60;
28
+ }
29
+ .eds-contrast .eds-feedback-text__icon--success {
30
+ color: #5ac39a;
31
+ }
32
+ .eds-feedback-text__icon--error {
33
+ color: #d31b1b;
34
+ }
35
+ .eds-contrast .eds-feedback-text__icon--error {
36
+ color: #ff9494;
37
+ }
38
+ .eds-feedback-text__icon--info {
39
+ color: #0082b9;
40
+ }
41
+ .eds-contrast .eds-feedback-text__icon--info {
42
+ color: #64b3e7;
43
+ }
44
+ .eds-feedback-text__icon--warning {
45
+ color: #ffca28;
46
+ }
47
+ .eds-feedback-text__icon--warning circle {
48
+ fill: #181c56;
49
+ }
50
+ .eds-contrast .eds-feedback-text__icon--warning {
51
+ color: #ffe082;
52
+ }
53
+ /* DO NOT CHANGE!*/
54
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
55
+ .eds-checkbox__container {
56
+ display: flex;
57
+ align-items: center;
58
+ position: relative;
59
+ -webkit-appearance: none;
60
+ -moz-appearance: none;
61
+ appearance: none;
62
+ cursor: pointer;
63
+ -webkit-user-select: none;
64
+ -moz-user-select: none;
65
+ user-select: none;
66
+ width: -moz-fit-content;
67
+ width: fit-content;
68
+ margin: 0.5rem 0;
69
+ }
70
+ .eds-checkbox__container--reduced-click-area {
71
+ height: -moz-fit-content;
72
+ height: fit-content;
73
+ }
74
+ .eds-checkbox__container input {
75
+ position: absolute;
76
+ opacity: 0;
77
+ height: 0;
78
+ width: 0;
79
+ }
80
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
81
+ background-color: #181c56;
82
+ }
83
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
84
+ visibility: visible;
85
+ }
86
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
87
+ stroke: #ffffff;
88
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
89
+ }
90
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
91
+ fill: #ffffff;
92
+ }
93
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
94
+ opacity: 0.5;
95
+ }
96
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
97
+ opacity: 0.5;
98
+ }
99
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
100
+ opacity: 0.5;
101
+ }
102
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
103
+ opacity: 0.5;
104
+ }
105
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
106
+ opacity: 0.5;
107
+ }
108
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
109
+ background-color: #aeb7e2;
110
+ }
111
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
112
+ stroke: #181c56;
113
+ }
114
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
115
+ fill: #181c56;
116
+ }
117
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
118
+ border-color: #292b6a;
119
+ background-color: #d1d4e3;
120
+ }
121
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
122
+ border-color: #b6bee5;
123
+ background-color: rgba(174, 183, 226, 0.2);
124
+ }
125
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
126
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
127
+ border-color: transparent;
128
+ background-color: #54568c;
129
+ }
130
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
131
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
132
+ background-color: #b6bee5;
133
+ }
134
+ .eds-checkbox__container:active input + .eds-checkbox__icon {
135
+ border-color: #16194d;
136
+ }
137
+ .eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
138
+ border-color: #9da5cb;
139
+ }
140
+ .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
141
+ .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
142
+ background-color: #16194d;
143
+ }
144
+ .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
145
+ .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
146
+ background-color: #9da5cb;
147
+ }
148
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
149
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
150
+ outline: none;
151
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
152
+ outline-offset: 0.125rem;
153
+ }
154
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
155
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
156
+ outline: none;
157
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
158
+ outline-offset: 0.125rem;
159
+ }
160
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
161
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
162
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
163
+ }
164
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
165
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
166
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
167
+ }
168
+ .eds-checkbox--disabled {
169
+ pointer-events: none;
170
+ }
171
+ .eds-checkbox--disabled .eds-checkbox__label {
172
+ opacity: 0.5;
173
+ }
174
+ .eds-checkbox--disabled .eds-checkbox__icon {
175
+ opacity: 0.5;
176
+ }
177
+ .eds-checkbox__icon {
178
+ box-sizing: border-box;
179
+ display: inline-flex;
180
+ justify-content: center;
181
+ align-items: center;
182
+ position: relative;
183
+ margin-right: 1rem;
184
+ height: 1.25rem;
185
+ width: 1.25rem;
186
+ border: 0.125rem solid #181c56;
187
+ border-radius: 0.125rem;
188
+ background-color: transparent;
189
+ color: #ffffff;
190
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
191
+ }
192
+ .eds-checkbox__icon--reduced-click-area {
193
+ margin-right: 0;
194
+ }
195
+ .eds-contrast .eds-checkbox__icon {
196
+ border-color: #aeb7e2;
197
+ }
198
+ .eds-checkbox__icon .eds-checkbox-icon {
199
+ height: 1rem;
200
+ width: 1rem;
201
+ visibility: hidden;
202
+ }
203
+ .eds-checkbox__icon .eds-checkbox-icon path {
204
+ transform-origin: 50% 50%;
205
+ stroke-dasharray: 48;
206
+ stroke-dashoffset: 48;
207
+ stroke-width: 0.375rem;
208
+ }
209
+
210
+ @keyframes stroke {
211
+ 100% {
212
+ stroke-dashoffset: 0;
213
+ }
214
+ }
215
+ /* DO NOT CHANGE!*/
216
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
217
  .eds-form-control-wrapper {
4
218
  --border-color: #7C7F9F;
5
219
  --border-color-hover: #aeb7e2;
@@ -242,222 +456,253 @@
242
456
  }
243
457
  /* DO NOT CHANGE!*/
244
458
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
245
- .eds-feedback-text {
459
+ .eds-form-component--radio__container {
246
460
  display: flex;
461
+ justify-content: center;
247
462
  align-items: center;
248
- margin-top: 0.25rem;
463
+ position: relative;
464
+ cursor: pointer;
465
+ height: 2rem;
466
+ width: -moz-fit-content;
467
+ width: fit-content;
468
+ -webkit-user-select: none;
469
+ -moz-user-select: none;
470
+ user-select: none;
249
471
  }
250
- .eds-feedback-text--info {
251
- padding-left: calc(1rem + 0.125rem);
472
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
473
+ border-color: #54568c;
252
474
  }
253
- .eds-feedback-text__text {
254
- color: #181c56;
475
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
476
+ background-color: #54568c;
255
477
  }
256
- .eds-contrast .eds-feedback-text__text {
257
- color: #ffffff;
478
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
479
+ border-color: #8285a8;
258
480
  }
259
-
260
- .eds-feedback-text__icon {
261
- font-size: 1.5rem;
262
- min-height: 1.5rem;
263
- min-width: 1.5rem;
264
- padding-right: 0.5rem;
265
- position: relative;
266
- top: -0.1rem;
481
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
482
+ background-color: #8285a8;
267
483
  }
268
- .eds-feedback-text__icon--success {
269
- color: #1a8e60;
484
+ .eds-form-component--radio__container input {
485
+ position: absolute;
486
+ opacity: 0;
487
+ cursor: pointer;
488
+ height: 0;
489
+ width: 0;
270
490
  }
271
- .eds-contrast .eds-feedback-text__icon--success {
272
- color: #5ac39a;
491
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
492
+ height: 0.625rem;
493
+ width: 0.625rem;
273
494
  }
274
- .eds-feedback-text__icon--error {
275
- color: #d31b1b;
495
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
496
+ outline: none;
497
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
498
+ outline-offset: 0.125rem;
276
499
  }
277
- .eds-contrast .eds-feedback-text__icon--error {
278
- color: #ff9494;
500
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
501
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
279
502
  }
280
- .eds-feedback-text__icon--info {
281
- color: #0082b9;
503
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
504
+ position: relative;
505
+ height: 1.25rem;
506
+ width: 1.25rem;
507
+ margin-right: 1rem;
508
+ background-color: #ffffff;
509
+ border: 0.125rem solid #181c56;
510
+ border-radius: 50%;
511
+ display: flex;
512
+ align-items: center;
513
+ justify-content: center;
282
514
  }
283
- .eds-contrast .eds-feedback-text__icon--info {
284
- color: #64b3e7;
515
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
516
+ background-color: #181c56;
517
+ border-color: #aeb7e2;
285
518
  }
286
- .eds-feedback-text__icon--warning {
287
- color: #ffca28;
519
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
520
+ background: #d1d3d3;
521
+ border-color: #d1d3d3;
522
+ cursor: not-allowed;
288
523
  }
289
- .eds-feedback-text__icon--warning circle {
290
- fill: #181c56;
524
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
525
+ border-color: #d1d3d3;
291
526
  }
292
- .eds-contrast .eds-feedback-text__icon--warning {
293
- color: #ffe082;
527
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
528
+ background: #d1d3d3;
529
+ border-color: #d1d3d3;
294
530
  }
295
- .eds-fieldset {
296
- margin: 0;
297
- padding: 0;
298
- border: 0;
531
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
532
+ color: #656782;
533
+ }
534
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
535
+ display: block;
536
+ width: 0;
537
+ height: 0;
538
+ border-radius: 50%;
539
+ background-color: #181c56;
540
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
541
+ }
542
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
543
+ background-color: #aeb7e2;
299
544
  }
300
545
  /* DO NOT CHANGE!*/
301
546
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
302
- .eds-checkbox__container {
303
- display: flex;
304
- align-items: center;
305
- position: relative;
306
- -webkit-appearance: none;
307
- -moz-appearance: none;
308
- appearance: none;
309
- cursor: pointer;
310
- -webkit-user-select: none;
311
- -moz-user-select: none;
312
- user-select: none;
313
- width: -moz-fit-content;
314
- width: fit-content;
315
- margin: 0.5rem 0;
547
+ .eds-input-panel[focus-within] .eds-input-panel__container {
548
+ border-color: #181c56;
549
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
316
550
  }
317
- .eds-checkbox__container--reduced-click-area {
318
- height: -moz-fit-content;
319
- height: fit-content;
551
+ .eds-input-panel:focus-within .eds-input-panel__container {
552
+ border-color: #181c56;
553
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
320
554
  }
321
- .eds-checkbox__container input {
555
+ .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
556
+ border-color: #ffffff;
557
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
558
+ }
559
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
560
+ border-color: #ffffff;
561
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
562
+ }
563
+ .eds-input-panel > input {
322
564
  position: absolute;
323
565
  opacity: 0;
566
+ cursor: pointer;
324
567
  height: 0;
325
568
  width: 0;
326
569
  }
327
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
328
- background-color: #181c56;
329
- }
330
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
331
- visibility: visible;
332
- }
333
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
334
- stroke: #ffffff;
335
- animation: stroke ease-in-out 0.2s 0.1s forwards;
336
- }
337
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
338
- fill: #ffffff;
339
- }
340
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
341
- opacity: 0.5;
342
- }
343
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
344
- opacity: 0.5;
345
- }
346
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
347
- opacity: 0.5;
570
+ .eds-input-panel > input:checked + .eds-input-panel__container {
571
+ border-color: #181c56;
572
+ background: #f5f5f8;
348
573
  }
349
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
350
- opacity: 0.5;
574
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
575
+ border-color: #aeb7e2;
576
+ background: #393d79;
351
577
  }
352
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
353
- opacity: 0.5;
578
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
579
+ width: 0.75rem;
580
+ height: 0.75rem;
354
581
  }
355
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
356
- background-color: #aeb7e2;
582
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
583
+ background-color: #ffffff;
357
584
  }
358
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
359
- stroke: #181c56;
585
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
586
+ background-color: #ebebf1;
587
+ border: 0.125rem solid #babbcf;
588
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
589
+ hover state styling with the inputPanel container */
360
590
  }
361
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
362
- fill: #181c56;
591
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
592
+ background: #54568c;
363
593
  }
364
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
365
- border-color: #292b6a;
594
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
366
595
  background-color: #d1d4e3;
596
+ border-color: #292b6a;
367
597
  }
368
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
369
- border-color: #b6bee5;
598
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
370
599
  background-color: rgba(174, 183, 226, 0.2);
600
+ border-color: #b6bee5;
371
601
  }
372
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
373
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
602
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
603
+ background-color: #292b6a;
604
+ }
605
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
606
+ background-color: #ffffff;
607
+ }
608
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
609
+ background-color: #292b6a;
374
610
  border-color: transparent;
375
- background-color: #54568c;
376
611
  }
377
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
378
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
612
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
379
613
  background-color: #b6bee5;
380
614
  }
381
- .eds-checkbox__container:active input + .eds-checkbox__icon {
382
- border-color: #16194d;
615
+ .eds-input-panel__container {
616
+ background: #ffffff;
617
+ border: 0.125rem solid #babbcf;
618
+ border-radius: 0.25rem;
619
+ display: flex;
620
+ flex-direction: column;
621
+ justify-content: flex-start;
622
+ min-width: 20rem;
623
+ position: relative;
624
+ padding: 1rem;
625
+ -webkit-user-select: none;
626
+ -moz-user-select: none;
627
+ user-select: none;
628
+ width: -moz-fit-content;
629
+ width: fit-content;
630
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
383
631
  }
384
- .eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
385
- border-color: #9da5cb;
632
+ .eds-contrast .eds-input-panel__container {
633
+ background-color: transparent;
634
+ border-color: #aeb7e2;
386
635
  }
387
- .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
388
- .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
389
- background-color: #16194d;
636
+ .eds-input-panel__container:hover {
637
+ background-color: #ebebf1;
638
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
639
+ hover state styling with the inputPanel container */
390
640
  }
391
- .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
392
- .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
393
- background-color: #9da5cb;
641
+ .eds-contrast .eds-input-panel__container:hover {
642
+ background-color: #54568c;
394
643
  }
395
- .eds-checkbox__container:focus + .eds-checkbox__icon,
396
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
397
- outline: none;
398
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
399
- outline-offset: 0.125rem;
644
+ .eds-input-panel__container:hover .eds-checkbox__icon,
645
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
646
+ border-color: #292b6a;
647
+ background-color: #d1d4e3;
400
648
  }
401
- .eds-checkbox__container:focus + .eds-checkbox__icon,
402
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
403
- outline: none;
404
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
405
- outline-offset: 0.125rem;
649
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
650
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
651
+ border-color: #b6bee5;
652
+ background-color: rgba(174, 183, 226, 0.2);
406
653
  }
407
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
408
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
409
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
654
+ input:disabled + .eds-input-panel__container {
655
+ background: #f3f3f3;
656
+ border-color: #f3f3f3;
657
+ color: #656782;
658
+ pointer-events: none;
410
659
  }
411
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
412
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
413
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
660
+ .eds-contrast input:disabled + .eds-input-panel__container {
661
+ background: #181c56;
662
+ border-style: dashed;
663
+ border-color: #54568c;
664
+ color: #babbcf;
414
665
  }
415
- .eds-checkbox--disabled {
416
- pointer-events: none;
666
+ .eds-input-panel__container .eds-checkbox__icon,
667
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
668
+ .eds-input-panel__container .eds-form-component--radio__radio {
669
+ width: 1.5rem;
670
+ height: 1.5rem;
671
+ margin-right: 0;
417
672
  }
418
- .eds-checkbox--disabled .eds-checkbox__label {
419
- opacity: 0.5;
673
+ .eds-input-panel--medium .eds-input-panel__title {
674
+ font-size: 1rem;
675
+ font-weight: 500;
420
676
  }
421
- .eds-checkbox--disabled .eds-checkbox__icon {
422
- opacity: 0.5;
677
+ .eds-input-panel--medium.eds-input-panel__container {
678
+ padding-bottom: 1rem;
679
+ min-height: 3.75rem;
423
680
  }
424
- .eds-checkbox__icon {
425
- box-sizing: border-box;
426
- display: inline-flex;
427
- justify-content: center;
428
- align-items: center;
429
- position: relative;
430
- margin-right: 1rem;
431
- height: 1.25rem;
432
- width: 1.25rem;
433
- border: 0.125rem solid #181c56;
434
- border-radius: 0.125rem;
435
- background-color: transparent;
436
- color: #ffffff;
437
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
681
+ .eds-input-panel--large.eds-input-panel__container {
682
+ min-height: 6rem;
438
683
  }
439
- .eds-checkbox__icon--reduced-click-area {
440
- margin-right: 0;
684
+ .eds-input-panel--large .eds-input-panel__title {
685
+ font-size: 1.25rem;
686
+ font-weight: 500;
687
+ line-height: 1.875rem;
441
688
  }
442
- .eds-contrast .eds-checkbox__icon {
443
- border-color: #aeb7e2;
689
+ .eds-input-panel__title-wrapper {
690
+ display: flex;
691
+ justify-content: space-between;
692
+ align-items: center;
444
693
  }
445
- .eds-checkbox__icon .eds-checkbox-icon {
446
- height: 1rem;
447
- width: 1rem;
448
- visibility: hidden;
694
+ .eds-input-panel__secondary-label-and-icon-wrapper {
695
+ display: flex;
696
+ justify-content: center;
697
+ align-items: center;
698
+ gap: 0.75rem;
449
699
  }
450
- .eds-checkbox__icon .eds-checkbox-icon path {
451
- transform-origin: 50% 50%;
452
- stroke-dasharray: 48;
453
- stroke-dashoffset: 48;
454
- stroke-width: 0.375rem;
700
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
701
+ margin: 0;
455
702
  }
456
-
457
- @keyframes stroke {
458
- 100% {
459
- stroke-dashoffset: 0;
460
- }
703
+ .eds-input-panel__additional-content {
704
+ margin-top: 0.25rem;
705
+ word-wrap: break-word;
461
706
  }
462
707
  /* DO NOT CHANGE!*/
463
708
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -580,94 +825,6 @@
580
825
  }
581
826
  /* DO NOT CHANGE!*/
582
827
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
583
- .eds-form-component--radio__container {
584
- display: flex;
585
- justify-content: center;
586
- align-items: center;
587
- position: relative;
588
- cursor: pointer;
589
- height: 2rem;
590
- width: -moz-fit-content;
591
- width: fit-content;
592
- -webkit-user-select: none;
593
- -moz-user-select: none;
594
- user-select: none;
595
- }
596
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
597
- border-color: #54568c;
598
- }
599
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
600
- background-color: #54568c;
601
- }
602
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
603
- border-color: #8285a8;
604
- }
605
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
606
- background-color: #8285a8;
607
- }
608
- .eds-form-component--radio__container input {
609
- position: absolute;
610
- opacity: 0;
611
- cursor: pointer;
612
- height: 0;
613
- width: 0;
614
- }
615
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
616
- height: 0.625rem;
617
- width: 0.625rem;
618
- }
619
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
620
- outline: none;
621
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
622
- outline-offset: 0.125rem;
623
- }
624
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
625
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
626
- }
627
- .eds-form-component--radio__container .eds-form-component--radio__radio {
628
- position: relative;
629
- height: 1.25rem;
630
- width: 1.25rem;
631
- margin-right: 1rem;
632
- background-color: #ffffff;
633
- border: 0.125rem solid #181c56;
634
- border-radius: 50%;
635
- display: flex;
636
- align-items: center;
637
- justify-content: center;
638
- }
639
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
640
- background-color: #181c56;
641
- border-color: #aeb7e2;
642
- }
643
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
644
- background: #d1d3d3;
645
- border-color: #d1d3d3;
646
- cursor: not-allowed;
647
- }
648
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
649
- border-color: #d1d3d3;
650
- }
651
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
652
- background: #d1d3d3;
653
- border-color: #d1d3d3;
654
- }
655
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
656
- color: #656782;
657
- }
658
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
659
- display: block;
660
- width: 0;
661
- height: 0;
662
- border-radius: 50%;
663
- background-color: #181c56;
664
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
665
- }
666
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
667
- background-color: #aeb7e2;
668
- }
669
- /* DO NOT CHANGE!*/
670
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
671
828
  .eds-input-group {
672
829
  color: inherit;
673
830
  display: block;
@@ -797,170 +954,10 @@
797
954
  padding: 0;
798
955
  margin-left: 1rem;
799
956
  }
800
- /* DO NOT CHANGE!*/
801
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
802
- .eds-input-panel[focus-within] .eds-input-panel__container {
803
- border-color: #181c56;
804
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
805
- }
806
- .eds-input-panel:focus-within .eds-input-panel__container {
807
- border-color: #181c56;
808
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
809
- }
810
- .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
811
- border-color: #ffffff;
812
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
813
- }
814
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
815
- border-color: #ffffff;
816
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
817
- }
818
- .eds-input-panel > input {
819
- position: absolute;
820
- opacity: 0;
821
- cursor: pointer;
822
- height: 0;
823
- width: 0;
824
- }
825
- .eds-input-panel > input:checked + .eds-input-panel__container {
826
- border-color: #181c56;
827
- background: #f5f5f8;
828
- }
829
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
830
- border-color: #aeb7e2;
831
- background: #393d79;
832
- }
833
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
834
- width: 0.75rem;
835
- height: 0.75rem;
836
- }
837
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
838
- background-color: #ffffff;
839
- }
840
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
841
- background-color: #ebebf1;
842
- border: 0.125rem solid #babbcf;
843
- /* The following styling is needed to sync the inner checkbox/radiobutton's
844
- hover state styling with the inputPanel container */
845
- }
846
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
847
- background: #54568c;
848
- }
849
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
850
- background-color: #d1d4e3;
851
- border-color: #292b6a;
852
- }
853
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
854
- background-color: rgba(174, 183, 226, 0.2);
855
- border-color: #b6bee5;
856
- }
857
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
858
- background-color: #292b6a;
859
- }
860
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
861
- background-color: #ffffff;
862
- }
863
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
864
- background-color: #292b6a;
865
- border-color: transparent;
866
- }
867
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
868
- background-color: #b6bee5;
869
- }
870
- .eds-input-panel__container {
871
- background: #ffffff;
872
- border: 0.125rem solid #babbcf;
873
- border-radius: 0.25rem;
874
- display: flex;
875
- flex-direction: column;
876
- justify-content: flex-start;
877
- min-width: 20rem;
878
- position: relative;
879
- padding: 1rem;
880
- -webkit-user-select: none;
881
- -moz-user-select: none;
882
- user-select: none;
883
- width: -moz-fit-content;
884
- width: fit-content;
885
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
886
- }
887
- .eds-contrast .eds-input-panel__container {
888
- background-color: transparent;
889
- border-color: #aeb7e2;
890
- }
891
- .eds-input-panel__container:hover {
892
- background-color: #ebebf1;
893
- /* The following styling is needed to sync the inner checkbox/radiobutton's
894
- hover state styling with the inputPanel container */
895
- }
896
- .eds-contrast .eds-input-panel__container:hover {
897
- background-color: #54568c;
898
- }
899
- .eds-input-panel__container:hover .eds-checkbox__icon,
900
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
901
- border-color: #292b6a;
902
- background-color: #d1d4e3;
903
- }
904
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
905
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
906
- border-color: #b6bee5;
907
- background-color: rgba(174, 183, 226, 0.2);
908
- }
909
- input:disabled + .eds-input-panel__container {
910
- background: #f3f3f3;
911
- border-color: #f3f3f3;
912
- color: #656782;
913
- pointer-events: none;
914
- }
915
- .eds-contrast input:disabled + .eds-input-panel__container {
916
- background: #181c56;
917
- border-style: dashed;
918
- border-color: #54568c;
919
- color: #babbcf;
920
- }
921
- .eds-input-panel__container .eds-checkbox__icon,
922
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
923
- .eds-input-panel__container .eds-form-component--radio__radio {
924
- width: 1.5rem;
925
- height: 1.5rem;
926
- margin-right: 0;
927
- }
928
- .eds-input-panel--medium .eds-input-panel__title {
929
- font-size: 1rem;
930
- font-weight: 500;
931
- }
932
- .eds-input-panel--medium.eds-input-panel__container {
933
- padding-bottom: 1rem;
934
- min-height: 3.75rem;
935
- }
936
- .eds-input-panel--large.eds-input-panel__container {
937
- min-height: 6rem;
938
- }
939
- .eds-input-panel--large .eds-input-panel__title-wrapper {
940
- height: 2rem;
941
- }
942
- .eds-input-panel--large .eds-input-panel__title {
943
- font-size: 1.25rem;
944
- font-weight: 500;
945
- line-height: 1.875rem;
946
- }
947
- .eds-input-panel__title-wrapper {
948
- display: flex;
949
- justify-content: space-between;
950
- align-items: center;
951
- }
952
- .eds-input-panel__secondary-label-and-icon-wrapper {
953
- display: flex;
954
- justify-content: center;
955
- align-items: center;
956
- gap: 0.75rem;
957
- }
958
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
957
+ .eds-fieldset {
959
958
  margin: 0;
960
- }
961
- .eds-input-panel__additional-content {
962
- margin-top: 0.25rem;
963
- word-wrap: break-word;
959
+ padding: 0;
960
+ border: 0;
964
961
  }
965
962
  /* DO NOT CHANGE!*/
966
963
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.29",
3
+ "version": "7.0.31-RC.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,12 +27,12 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^6.12.1",
31
- "@entur/tokens": "^3.11.1",
32
- "@entur/tooltip": "^2.6.38",
33
- "@entur/typography": "^1.8.17",
30
+ "@entur/icons": "^6.13.1-RC.0",
31
+ "@entur/tokens": "^3.11.2-RC.0",
32
+ "@entur/tooltip": "^2.6.40-RC.0",
33
+ "@entur/typography": "^1.8.19-RC.0",
34
34
  "@entur/utils": "^0.9.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "3fc001a78ef085d8fd22bb8aa245ec488214de72"
37
+ "gitHead": "ffc1bbef705504dd4e8df8abccc435dd01513ce3"
38
38
  }