@entur/form 7.0.6 → 7.0.7

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 +279 -283
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -3,65 +3,175 @@
3
3
  }
4
4
  /* DO NOT CHANGE!*/
5
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-feedback-text {
6
+ .eds-checkbox__container {
7
7
  display: flex;
8
8
  align-items: center;
9
- margin-top: 0.25rem;
9
+ position: relative;
10
+ -webkit-appearance: none;
11
+ -moz-appearance: none;
12
+ appearance: none;
13
+ cursor: pointer;
14
+ -webkit-user-select: none;
15
+ -moz-user-select: none;
16
+ user-select: none;
17
+ width: -moz-fit-content;
18
+ width: fit-content;
19
+ margin: 0.5rem 0;
10
20
  }
11
- .eds-feedback-text--info {
12
- padding-left: calc(1rem + 0.125rem);
21
+ .eds-checkbox__container--reduced-click-area {
22
+ height: -moz-fit-content;
23
+ height: fit-content;
13
24
  }
14
- .eds-feedback-text__text {
15
- color: #181c56;
25
+ .eds-checkbox__container input {
26
+ position: absolute;
27
+ opacity: 0;
28
+ height: 0;
29
+ width: 0;
16
30
  }
17
- .eds-contrast .eds-feedback-text__text {
18
- color: #ffffff;
31
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
32
+ background-color: #181c56;
19
33
  }
20
-
21
- .eds-feedback-text__icon {
22
- font-size: 1.5rem;
23
- min-height: 1.5rem;
24
- min-width: 1.5rem;
25
- padding-right: 0.5rem;
26
- position: relative;
27
- top: -0.1rem;
34
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
35
+ visibility: visible;
28
36
  }
29
- .eds-feedback-text__icon--success {
30
- color: #1a8e60;
37
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
38
+ stroke: #ffffff;
39
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
31
40
  }
32
- .eds-contrast .eds-feedback-text__icon--success {
33
- color: #5ac39a;
41
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
42
+ fill: #ffffff;
34
43
  }
35
- .eds-feedback-text__icon--error {
36
- color: #d31b1b;
44
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
45
+ opacity: 0.5;
37
46
  }
38
- .eds-contrast .eds-feedback-text__icon--error {
39
- color: #ff9494;
47
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
48
+ opacity: 0.5;
40
49
  }
41
- .eds-feedback-text__icon--info {
42
- color: #0082b9;
50
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
51
+ opacity: 0.5;
43
52
  }
44
- .eds-contrast .eds-feedback-text__icon--info {
45
- color: #64b3e7;
53
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
54
+ opacity: 0.5;
46
55
  }
47
- .eds-feedback-text__icon--warning {
48
- color: #ffca28;
56
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
57
+ opacity: 0.5;
49
58
  }
50
- .eds-feedback-text__icon--warning circle {
59
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
60
+ background-color: #aeb7e2;
61
+ }
62
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
63
+ stroke: #181c56;
64
+ }
65
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
51
66
  fill: #181c56;
52
67
  }
53
- .eds-contrast .eds-feedback-text__icon--warning {
54
- color: #ffe082;
68
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
69
+ border-color: #292b6a;
70
+ background-color: #d1d4e3;
71
+ }
72
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
73
+ border-color: #b6bee5;
74
+ background-color: rgba(174, 183, 226, 0.2);
75
+ }
76
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
77
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
78
+ border-color: transparent;
79
+ background-color: #54568c;
80
+ }
81
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
82
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
83
+ background-color: #b6bee5;
84
+ }
85
+ .eds-checkbox__container:active input + .eds-checkbox__icon {
86
+ border-color: #16194d;
87
+ }
88
+ .eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
89
+ border-color: #9da5cb;
90
+ }
91
+ .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
92
+ .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
93
+ background-color: #16194d;
94
+ }
95
+ .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
96
+ .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
97
+ background-color: #9da5cb;
98
+ }
99
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
100
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
101
+ outline: none;
102
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
103
+ outline-offset: 0.125rem;
104
+ }
105
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
106
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
107
+ outline: none;
108
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
109
+ outline-offset: 0.125rem;
110
+ }
111
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
112
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
113
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
114
+ }
115
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
116
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
117
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
118
+ }
119
+ .eds-checkbox--disabled {
120
+ pointer-events: none;
121
+ }
122
+ .eds-checkbox--disabled .eds-checkbox__label {
123
+ opacity: 0.5;
124
+ }
125
+ .eds-checkbox--disabled .eds-checkbox__icon {
126
+ opacity: 0.5;
127
+ }
128
+ .eds-checkbox__icon {
129
+ box-sizing: border-box;
130
+ display: inline-flex;
131
+ justify-content: center;
132
+ align-items: center;
133
+ position: relative;
134
+ margin-right: 1rem;
135
+ height: 1.25rem;
136
+ width: 1.25rem;
137
+ border: 0.125rem solid #181c56;
138
+ border-radius: 0.125rem;
139
+ background-color: transparent;
140
+ color: #ffffff;
141
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
142
+ }
143
+ .eds-checkbox__icon--reduced-click-area {
144
+ margin-right: 0;
145
+ }
146
+ .eds-contrast .eds-checkbox__icon {
147
+ border-color: #aeb7e2;
148
+ }
149
+ .eds-checkbox__icon .eds-checkbox-icon {
150
+ height: 1rem;
151
+ width: 1rem;
152
+ visibility: hidden;
153
+ }
154
+ .eds-checkbox__icon .eds-checkbox-icon path {
155
+ transform-origin: 50% 50%;
156
+ stroke-dasharray: 48;
157
+ stroke-dashoffset: 48;
158
+ stroke-width: 0.375rem;
159
+ }
160
+
161
+ @keyframes stroke {
162
+ 100% {
163
+ stroke-dashoffset: 0;
164
+ }
55
165
  }
56
166
  /* DO NOT CHANGE!*/
57
167
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
58
168
  .eds-form-control-wrapper {
59
- --border-color: #181c56;
169
+ --border-color: #7C7F9F;
60
170
  --border-color-hover: #aeb7e2;
61
171
  align-items: center;
62
172
  background-color: #ffffff;
63
173
  border-radius: 0.25rem;
64
- border: 0.125rem solid #d1d3d3;
174
+ border: 0.125rem solid var(--border-color);
65
175
  box-shadow: 0 0 0 transparent;
66
176
  color: #181c56;
67
177
  display: flex;
@@ -75,20 +185,14 @@
75
185
  These elements require the `--dark` modifier, even on the wrapper.
76
186
  */
77
187
  }
78
- .eds-contrast .eds-form-control-wrapper {
79
- --border-color: #aeb7e2;
80
- background-color: #ffffff;
81
- border-color: #54568c;
82
- }
83
188
  .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
84
- border-color: #181c56;
189
+ --border-color: #181c56;
85
190
  }
86
191
  .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
87
- border-color: #181c56;
192
+ --border-color: #181c56;
88
193
  }
89
194
  .eds-contrast .eds-form-control-wrapper:hover {
90
- border-color: #aeb7e2;
91
- background: #ebebf1;
195
+ --border-color: #aeb7e2;
92
196
  }
93
197
  .eds-form-control-wrapper[focus-within] {
94
198
  box-shadow: inset 0 0 0 1px var(--border-color);
@@ -97,14 +201,12 @@
97
201
  box-shadow: inset 0 0 0 1px var(--border-color);
98
202
  }
99
203
  .eds-contrast .eds-form-control-wrapper[focus-within] {
100
- border-color: #181c56;
101
- --border-color: #aeb7e2;
102
- box-shadow: 0 0 0 0.125rem var(--border-color);
204
+ --border-color: #181c56;
205
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
103
206
  }
104
207
  .eds-contrast .eds-form-control-wrapper:focus-within {
105
- border-color: #181c56;
106
- --border-color: #aeb7e2;
107
- box-shadow: 0 0 0 0.125rem var(--border-color);
208
+ --border-color: #181c56;
209
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
108
210
  }
109
211
  .eds-form-control-wrapper ::-moz-placeholder {
110
212
  color: #656782;
@@ -113,31 +215,38 @@
113
215
  color: #656782;
114
216
  }
115
217
  .eds-form-control-wrapper--disabled {
218
+ --border-color: transparent;
116
219
  background-color: #e9e9e9;
117
- color: #656782;
118
- border-color: transparent;
119
220
  pointer-events: none;
221
+ color: #646464;
120
222
  }
121
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
122
- display: none;
223
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
224
+ color: #646464;
123
225
  }
124
226
  .eds-contrast .eds-form-control-wrapper--disabled {
125
227
  background: #292b6a;
126
- border-color: transparent;
127
228
  color: #8285a8;
128
229
  }
230
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
231
+ color: #8285a8;
232
+ }
233
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
234
+ display: none;
235
+ }
129
236
  .eds-form-control-wrapper--readonly {
237
+ --border-color: transparent;
238
+ --textarea-label-background: $colors-greys-grey90;
130
239
  pointer-events: none;
131
240
  cursor: default;
132
- border-color: transparent;
133
241
  background: #f8f8f8;
134
- --textarea-label-background: $colors-greys-grey90;
135
242
  }
136
243
  .eds-contrast .eds-form-control-wrapper--readonly {
137
- background: #292b6a;
138
244
  --textarea-label-background: $colors-blues-blue10;
245
+ background: #292b6a;
139
246
  color: #ffffff;
140
- border-color: transparent;
247
+ }
248
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
249
+ color: #aeb7e2;
141
250
  }
142
251
  .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
143
252
  display: none;
@@ -298,172 +407,157 @@
298
407
  }
299
408
  /* DO NOT CHANGE!*/
300
409
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
301
- .eds-fieldset {
302
- margin: 0;
303
- padding: 0;
304
- border: 0;
305
- }
306
- /* DO NOT CHANGE!*/
307
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
308
- .eds-checkbox__container {
410
+ .eds-feedback-text {
309
411
  display: flex;
310
412
  align-items: center;
311
- position: relative;
312
- -webkit-appearance: none;
313
- -moz-appearance: none;
314
- appearance: none;
315
- cursor: pointer;
316
- -webkit-user-select: none;
317
- -moz-user-select: none;
318
- user-select: none;
319
- width: -moz-fit-content;
320
- width: fit-content;
321
- margin: 0.5rem 0;
322
- }
323
- .eds-checkbox__container--reduced-click-area {
324
- height: -moz-fit-content;
325
- height: fit-content;
326
- }
327
- .eds-checkbox__container input {
328
- position: absolute;
329
- opacity: 0;
330
- height: 0;
331
- width: 0;
413
+ margin-top: 0.25rem;
332
414
  }
333
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
334
- background-color: #181c56;
415
+ .eds-feedback-text--info {
416
+ padding-left: calc(1rem + 0.125rem);
335
417
  }
336
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
337
- visibility: visible;
418
+ .eds-feedback-text__text {
419
+ color: #181c56;
338
420
  }
339
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
340
- stroke: #ffffff;
341
- animation: stroke ease-in-out 0.2s 0.1s forwards;
421
+ .eds-contrast .eds-feedback-text__text {
422
+ color: #ffffff;
342
423
  }
343
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
344
- fill: #ffffff;
424
+
425
+ .eds-feedback-text__icon {
426
+ font-size: 1.5rem;
427
+ min-height: 1.5rem;
428
+ min-width: 1.5rem;
429
+ padding-right: 0.5rem;
430
+ position: relative;
431
+ top: -0.1rem;
345
432
  }
346
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
347
- opacity: 0.5;
433
+ .eds-feedback-text__icon--success {
434
+ color: #1a8e60;
348
435
  }
349
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
350
- opacity: 0.5;
436
+ .eds-contrast .eds-feedback-text__icon--success {
437
+ color: #5ac39a;
351
438
  }
352
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
353
- opacity: 0.5;
439
+ .eds-feedback-text__icon--error {
440
+ color: #d31b1b;
354
441
  }
355
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
356
- opacity: 0.5;
442
+ .eds-contrast .eds-feedback-text__icon--error {
443
+ color: #ff9494;
357
444
  }
358
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
359
- opacity: 0.5;
445
+ .eds-feedback-text__icon--info {
446
+ color: #0082b9;
360
447
  }
361
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
362
- background-color: #aeb7e2;
448
+ .eds-contrast .eds-feedback-text__icon--info {
449
+ color: #64b3e7;
363
450
  }
364
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
365
- stroke: #181c56;
451
+ .eds-feedback-text__icon--warning {
452
+ color: #ffca28;
366
453
  }
367
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
454
+ .eds-feedback-text__icon--warning circle {
368
455
  fill: #181c56;
369
456
  }
370
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
371
- border-color: #292b6a;
372
- background-color: #d1d4e3;
457
+ .eds-contrast .eds-feedback-text__icon--warning {
458
+ color: #ffe082;
373
459
  }
374
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
375
- border-color: #b6bee5;
376
- background-color: rgba(174, 183, 226, 0.2);
460
+ /* DO NOT CHANGE!*/
461
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
462
+ .eds-fieldset {
463
+ margin: 0;
464
+ padding: 0;
465
+ border: 0;
377
466
  }
378
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
379
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
380
- border-color: transparent;
381
- background-color: #54568c;
467
+ /* DO NOT CHANGE!*/
468
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
469
+ .eds-form-component--radio__container {
470
+ display: flex;
471
+ justify-content: center;
472
+ align-items: center;
473
+ position: relative;
474
+ cursor: pointer;
475
+ height: 2rem;
476
+ width: -moz-fit-content;
477
+ width: fit-content;
478
+ -webkit-user-select: none;
479
+ -moz-user-select: none;
480
+ user-select: none;
382
481
  }
383
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
384
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
385
- background-color: #b6bee5;
482
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
483
+ border-color: #54568c;
386
484
  }
387
- .eds-checkbox__container:active input + .eds-checkbox__icon {
388
- border-color: #16194d;
485
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
486
+ background-color: #54568c;
389
487
  }
390
- .eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
391
- border-color: #9da5cb;
488
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
489
+ border-color: #8285a8;
392
490
  }
393
- .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
394
- .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
395
- background-color: #16194d;
491
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
492
+ background-color: #8285a8;
396
493
  }
397
- .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
398
- .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
399
- background-color: #9da5cb;
494
+ .eds-form-component--radio__container input {
495
+ position: absolute;
496
+ opacity: 0;
497
+ cursor: pointer;
498
+ height: 0;
499
+ width: 0;
400
500
  }
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;
501
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
502
+ height: 0.625rem;
503
+ width: 0.625rem;
406
504
  }
407
- .eds-checkbox__container:focus + .eds-checkbox__icon,
408
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
505
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
409
506
  outline: none;
410
507
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
411
508
  outline-offset: 0.125rem;
412
509
  }
413
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
414
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
415
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
416
- }
417
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
418
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
510
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
419
511
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
420
512
  }
421
- .eds-checkbox--disabled {
422
- pointer-events: none;
423
- }
424
- .eds-checkbox--disabled .eds-checkbox__label {
425
- opacity: 0.5;
426
- }
427
- .eds-checkbox--disabled .eds-checkbox__icon {
428
- opacity: 0.5;
429
- }
430
- .eds-checkbox__icon {
431
- box-sizing: border-box;
432
- display: inline-flex;
433
- justify-content: center;
434
- align-items: center;
513
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
435
514
  position: relative;
436
- margin-right: 1rem;
437
515
  height: 1.25rem;
438
516
  width: 1.25rem;
517
+ margin-right: 1rem;
518
+ background-color: #ffffff;
439
519
  border: 0.125rem solid #181c56;
440
- border-radius: 0.125rem;
441
- background-color: transparent;
442
- color: #ffffff;
443
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
444
- }
445
- .eds-checkbox__icon--reduced-click-area {
446
- margin-right: 0;
520
+ border-radius: 50%;
521
+ display: flex;
522
+ align-items: center;
523
+ justify-content: center;
447
524
  }
448
- .eds-contrast .eds-checkbox__icon {
525
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
526
+ background-color: #181c56;
449
527
  border-color: #aeb7e2;
450
528
  }
451
- .eds-checkbox__icon .eds-checkbox-icon {
452
- height: 1rem;
453
- width: 1rem;
454
- visibility: hidden;
529
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
530
+ background: #d1d3d3;
531
+ border-color: #d1d3d3;
532
+ cursor: not-allowed;
455
533
  }
456
- .eds-checkbox__icon .eds-checkbox-icon path {
457
- transform-origin: 50% 50%;
458
- stroke-dasharray: 48;
459
- stroke-dashoffset: 48;
460
- stroke-width: 0.375rem;
534
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
535
+ border-color: #d1d3d3;
461
536
  }
462
-
463
- @keyframes stroke {
464
- 100% {
465
- stroke-dashoffset: 0;
466
- }
537
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
538
+ background: #d1d3d3;
539
+ border-color: #d1d3d3;
540
+ }
541
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
542
+ color: #656782;
543
+ }
544
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
545
+ display: block;
546
+ width: 0;
547
+ height: 0;
548
+ border-radius: 50%;
549
+ background-color: #181c56;
550
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
551
+ }
552
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
553
+ background-color: #aeb7e2;
554
+ }
555
+ /* DO NOT CHANGE!*/
556
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
557
+ textarea.eds-form-control.eds-textarea {
558
+ min-height: 7.75rem;
559
+ resize: vertical;
560
+ line-height: 1.5rem;
467
561
  }
468
562
  /* DO NOT CHANGE!*/
469
563
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -511,9 +605,6 @@
511
605
  padding: 0;
512
606
  margin-left: 1rem;
513
607
  }
514
- .eds-contrast .eds-input-group__label {
515
- color: #8285a8;
516
- }
517
608
  .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
518
609
  color: #aeb7e2;
519
610
  }
@@ -601,94 +692,6 @@
601
692
  }
602
693
  /* DO NOT CHANGE!*/
603
694
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
604
- .eds-form-component--radio__container {
605
- display: flex;
606
- justify-content: center;
607
- align-items: center;
608
- position: relative;
609
- cursor: pointer;
610
- height: 2rem;
611
- width: -moz-fit-content;
612
- width: fit-content;
613
- -webkit-user-select: none;
614
- -moz-user-select: none;
615
- user-select: none;
616
- }
617
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
618
- border-color: #54568c;
619
- }
620
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
621
- background-color: #54568c;
622
- }
623
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
624
- border-color: #8285a8;
625
- }
626
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
627
- background-color: #8285a8;
628
- }
629
- .eds-form-component--radio__container input {
630
- position: absolute;
631
- opacity: 0;
632
- cursor: pointer;
633
- height: 0;
634
- width: 0;
635
- }
636
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
637
- height: 0.625rem;
638
- width: 0.625rem;
639
- }
640
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
641
- outline: none;
642
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
643
- outline-offset: 0.125rem;
644
- }
645
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
646
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
647
- }
648
- .eds-form-component--radio__container .eds-form-component--radio__radio {
649
- position: relative;
650
- height: 1.25rem;
651
- width: 1.25rem;
652
- margin-right: 1rem;
653
- background-color: #ffffff;
654
- border: 0.125rem solid #181c56;
655
- border-radius: 50%;
656
- display: flex;
657
- align-items: center;
658
- justify-content: center;
659
- }
660
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
661
- background-color: #181c56;
662
- border-color: #aeb7e2;
663
- }
664
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
665
- background: #d1d3d3;
666
- border-color: #d1d3d3;
667
- cursor: not-allowed;
668
- }
669
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
670
- border-color: #d1d3d3;
671
- }
672
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
673
- background: #d1d3d3;
674
- border-color: #d1d3d3;
675
- }
676
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
677
- color: #656782;
678
- }
679
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
680
- display: block;
681
- width: 0;
682
- height: 0;
683
- border-radius: 50%;
684
- background-color: #181c56;
685
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
686
- }
687
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
688
- background-color: #aeb7e2;
689
- }
690
- /* DO NOT CHANGE!*/
691
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
692
695
  .eds-switch {
693
696
  cursor: pointer;
694
697
  -webkit-user-select: none;
@@ -808,13 +811,6 @@
808
811
  }
809
812
  /* DO NOT CHANGE!*/
810
813
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
811
- textarea.eds-form-control.eds-textarea {
812
- min-height: 7.75rem;
813
- resize: vertical;
814
- line-height: 1.5rem;
815
- }
816
- /* DO NOT CHANGE!*/
817
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
818
814
  .eds-textfield__clear-button {
819
815
  background: none;
820
816
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.6",
3
+ "version": "7.0.7",
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.2.0",
31
- "@entur/tokens": "^3.8.1",
32
- "@entur/tooltip": "^2.6.16",
33
- "@entur/typography": "^1.7.16",
30
+ "@entur/icons": "^6.2.1",
31
+ "@entur/tokens": "^3.9.0",
32
+ "@entur/tooltip": "^2.6.17",
33
+ "@entur/typography": "^1.7.17",
34
34
  "@entur/utils": "^0.9.0",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "02c9d76ac36b3357b91ee60ac3e0f66eb111c9c2"
37
+ "gitHead": "be029b3d6a7f40e805697a28daf0c5df55a6177d"
38
38
  }