@entur/form 5.4.5 → 5.4.6-RC.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/styles.css +644 -644
  3. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -2,57 +2,6 @@
2
2
  --eds-form: 1;
3
3
  }/* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- textarea.eds-form-control.eds-textarea {
6
- min-height: 7.75rem;
7
- resize: vertical;
8
- line-height: 1.5rem;
9
- }/* DO NOT CHANGE!*/
10
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
11
- .eds-fieldset {
12
- margin: 0;
13
- padding: 0;
14
- border: 0;
15
- }
16
- .eds-fieldset .eds-legend {
17
- margin: 0 0 0.5rem;
18
- }/* DO NOT CHANGE!*/
19
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
20
- .eds-textfield__clear-button {
21
- background: none;
22
- border: none;
23
- border-radius: 50%;
24
- color: inherit;
25
- cursor: pointer;
26
- display: flex;
27
- font: inherit;
28
- font-size: 1rem;
29
- line-height: 1rem;
30
- padding: 0.5rem;
31
- margin-right: -0.75rem;
32
- }
33
- .eds-textfield__clear-button-wrapper {
34
- display: flex;
35
- align-items: center;
36
- }
37
- .eds-textfield__clear-button:hover {
38
- background: #f3f3f3;
39
- }
40
- .eds-textfield__clear-button:focus {
41
- outline: none;
42
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
43
- }
44
-
45
- .eds-textfield__divider {
46
- content: "";
47
- display: block;
48
- background-color: #e9e9e9;
49
- height: 1.5rem;
50
- width: 1px;
51
- }
52
- .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
53
- background-color: #8285a8;
54
- }/* DO NOT CHANGE!*/
55
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
56
5
  .eds-feedback-text {
57
6
  display: flex;
58
7
  align-items: center;
@@ -104,95 +53,6 @@ textarea.eds-form-control.eds-textarea {
104
53
  color: #ffe082;
105
54
  }/* DO NOT CHANGE!*/
106
55
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
107
- .eds-form-component--radio__container {
108
- display: flex;
109
- justify-content: center;
110
- align-items: center;
111
- position: relative;
112
- cursor: pointer;
113
- height: 2rem;
114
- width: -webkit-fit-content;
115
- width: -moz-fit-content;
116
- width: fit-content;
117
- -webkit-user-select: none;
118
- -moz-user-select: none;
119
- -ms-user-select: none;
120
- user-select: none;
121
- }
122
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
123
- border-color: #54568c;
124
- }
125
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
126
- background-color: #54568c;
127
- }
128
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
129
- border-color: #8285a8;
130
- }
131
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
132
- background-color: #8285a8;
133
- }
134
- .eds-form-component--radio__container input {
135
- position: absolute;
136
- opacity: 0;
137
- cursor: pointer;
138
- height: 0;
139
- width: 0;
140
- }
141
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
142
- height: 0.625rem;
143
- width: 0.625rem;
144
- }
145
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
146
- outline: none;
147
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
148
- outline-offset: 0.125rem;
149
- }
150
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
151
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
152
- }
153
- .eds-form-component--radio__container .eds-form-component--radio__radio {
154
- position: relative;
155
- height: 1.25rem;
156
- width: 1.25rem;
157
- margin-right: 1rem;
158
- background-color: #ffffff;
159
- border: 0.125rem solid #181c56;
160
- border-radius: 50%;
161
- display: flex;
162
- align-items: center;
163
- justify-content: center;
164
- }
165
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
166
- background-color: #181c56;
167
- border-color: #aeb7e2;
168
- }
169
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
170
- background: #d1d3d3;
171
- border-color: #d1d3d3;
172
- cursor: not-allowed;
173
- }
174
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
175
- border-color: #d1d3d3;
176
- }
177
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
178
- background: #d1d3d3;
179
- border-color: #d1d3d3;
180
- }
181
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
182
- color: #656782;
183
- }
184
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
185
- display: block;
186
- width: 0;
187
- height: 0;
188
- border-radius: 50%;
189
- background-color: #181c56;
190
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
191
- }
192
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
193
- background-color: #aeb7e2;
194
- }/* DO NOT CHANGE!*/
195
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
196
56
  .eds-checkbox__container {
197
57
  display: flex;
198
58
  align-items: center;
@@ -331,640 +191,790 @@ textarea.eds-form-control.eds-textarea {
331
191
  }
332
192
  }/* DO NOT CHANGE!*/
333
193
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
334
- .eds-switch {
335
- cursor: pointer;
336
- -webkit-user-select: none;
337
- -moz-user-select: none;
338
- -ms-user-select: none;
339
- user-select: none;
340
- padding: 0.5rem 0;
341
- width: -webkit-fit-content;
342
- width: -moz-fit-content;
343
- width: fit-content;
344
- }
345
- .eds-switch input {
346
- opacity: 0;
347
- pointer-events: none;
348
- position: absolute;
349
- }
350
- .eds-switch--right {
351
- display: flex;
352
- flex-direction: row;
194
+ .eds-form-control-wrapper {
195
+ --border-color: #181c56;
196
+ --border-color-hover: #aeb7e2;
353
197
  align-items: center;
354
- }
355
- .eds-switch--bottom {
198
+ background-color: #ffffff;
199
+ border-radius: 0.25rem;
200
+ border: 0.125rem solid #d1d3d3;
201
+ box-shadow: 0 0 0 transparent;
202
+ color: #181c56;
356
203
  display: flex;
357
- flex-direction: column;
358
- align-items: center;
204
+ position: relative;
205
+ width: 100%;
206
+ min-height: 3rem;
207
+ transition: border-color 0.1s ease-in-out;
208
+ --textarea-label-background: $colors-brand-white;
209
+ /*
210
+ Some input controls require a darker design while inside a contrast block.
211
+ These elements require the `--dark` modifier, even on the wrapper.
212
+ */
359
213
  }
360
- .eds-switch__circle {
361
- border-radius: 50%;
362
- height: 1.25rem;
363
- width: 1.25rem;
364
- content: "";
365
- display: flex;
366
- align-items: center;
367
- justify-content: center;
368
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
369
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
214
+ .eds-contrast .eds-form-control-wrapper {
215
+ --border-color: #aeb7e2;
370
216
  background-color: #ffffff;
371
- top: 0.125rem;
372
- left: 0.125rem;
373
- position: relative;
217
+ border-color: #54568c;
374
218
  }
375
- .eds-switch__switch--large .eds-switch__circle {
376
- height: 1.75rem;
377
- width: 1.75rem;
219
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
220
+ border-color: #181c56;
378
221
  }
379
- .eds-switch .eds-switch__switch svg g,
380
- .eds-switch .eds-switch__switch path {
381
- fill: #949494;
382
- transition: fill ease-in-out 0.1s;
222
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
223
+ border-color: #181c56;
383
224
  }
384
- .eds-switch__switch {
385
- position: relative;
386
- background-color: #d1d3d3;
387
- content: "";
388
- display: block;
389
- transition: background-color 0.1s ease-in-out;
390
- height: 1.5rem;
391
- width: 3rem;
392
- border-radius: 1.5rem;
225
+ .eds-contrast .eds-form-control-wrapper:hover {
226
+ border-color: #aeb7e2;
227
+ background: #ebebf1;
393
228
  }
394
- .eds-switch--right .eds-switch__switch {
395
- margin-right: 0.75rem;
229
+ .eds-form-control-wrapper[focus-within] {
230
+ box-shadow: inset 0 0 0 1px var(--border-color);
396
231
  }
397
- :checked + .eds-switch__switch {
398
- background-color: var(--eds-switch-color);
232
+ .eds-form-control-wrapper:focus-within {
233
+ box-shadow: inset 0 0 0 1px var(--border-color);
399
234
  }
400
- :checked + .eds-switch__switch .eds-switch__circle {
401
- left: 1.625rem;
235
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
236
+ border-color: #181c56;
237
+ --border-color: #aeb7e2;
238
+ box-shadow: 0 0 0 0.125rem var(--border-color);
402
239
  }
403
- :checked + .eds-switch__switch .eds-switch__circle svg g,
404
- :checked + .eds-switch__switch .eds-switch__circle path {
405
- fill: var(--eds-switch-color);
240
+ .eds-contrast .eds-form-control-wrapper:focus-within {
241
+ border-color: #181c56;
242
+ --border-color: #aeb7e2;
243
+ box-shadow: 0 0 0 0.125rem var(--border-color);
406
244
  }
407
- .eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
408
- .eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
409
- fill: var(--eds-switch-color);
245
+ .eds-form-control-wrapper ::-moz-placeholder {
246
+ color: #656782;
410
247
  }
411
- .eds-contrast :checked + .eds-switch__switch {
412
- background-color: var(--eds-switch-contrast-color);
248
+ .eds-form-control-wrapper :-ms-input-placeholder {
249
+ color: #656782;
413
250
  }
414
- :focus + .eds-switch__switch {
415
- outline: none;
416
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
417
- outline-offset: 0.125rem;
251
+ .eds-form-control-wrapper ::placeholder {
252
+ color: #656782;
418
253
  }
419
- .eds-contrast :focus + .eds-switch__switch {
420
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
254
+ .eds-form-control-wrapper--disabled {
255
+ background-color: #e9e9e9;
256
+ color: #656782;
257
+ border-color: transparent;
258
+ pointer-events: none;
421
259
  }
422
- .eds-contrast .eds-switch__switch {
423
- background-color: #54568c;
260
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
261
+ display: none;
424
262
  }
425
- .eds-switch__switch--large {
426
- width: 3.75rem;
427
- height: 2rem;
428
- border-radius: 3.75rem;
263
+ .eds-contrast .eds-form-control-wrapper--disabled {
264
+ background: #292b6a;
265
+ border-color: transparent;
266
+ color: #8285a8;
429
267
  }
430
- :checked + .eds-switch__switch--large .eds-switch__circle {
431
- left: 1.875rem;
268
+ .eds-form-control-wrapper--readonly {
269
+ pointer-events: none;
270
+ cursor: default;
271
+ border-color: transparent;
272
+ background: #f8f8f8;
273
+ --textarea-label-background: $colors-greys-grey90;
432
274
  }
433
- .eds-switch__label--large--right {
275
+ .eds-contrast .eds-form-control-wrapper--readonly {
276
+ background: #292b6a;
277
+ --textarea-label-background: $colors-blues-blue10;
278
+ color: #ffffff;
279
+ border-color: transparent;
280
+ }
281
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
282
+ display: none;
283
+ }
284
+ .eds-form-control-wrapper--size-medium .eds-form-control,
285
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
286
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
434
287
  font-size: 1rem;
288
+ line-height: 1rem;
435
289
  }
436
- .eds-switch__label--large--bottom {
437
- font-size: 0.875rem;
290
+ .eds-form-control-wrapper--size-large {
291
+ min-height: 4rem;
292
+ padding: 0 0.5rem;
438
293
  }
439
- .eds-switch__label--medium--right {
440
- font-size: 0.875rem;
294
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
295
+ border-width: 0.25rem;
441
296
  }
442
- .eds-switch__label--medium--bottom {
443
- font-size: 0.75rem;
444
- }/* DO NOT CHANGE!*/
445
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
446
- .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
447
- border-color: #181c56;
448
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
297
+ .eds-form-control-wrapper--size-large .eds-form-control,
298
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
299
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
300
+ font-size: 1.5rem;
301
+ line-height: 2.25rem;
449
302
  }
450
- .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
451
- border-color: #181c56;
452
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
303
+ .eds-form-control-wrapper--success {
304
+ border-color: #1a8e60;
305
+ --border-color: #1a8e60;
453
306
  }
454
- .eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
455
- border-color: #ffffff;
456
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
307
+ .eds-form-control-wrapper--success:hover {
308
+ border-color: #5ac39a;
457
309
  }
458
- .eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
459
- border-color: #ffffff;
460
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
310
+ .eds-form-control-wrapper--success[focus-within] {
311
+ border-color: #1a8e60;
461
312
  }
462
- .eds-radio-panel__wrapper input {
463
- position: absolute;
464
- opacity: 0;
465
- cursor: pointer;
466
- height: 0;
467
- width: 0;
313
+ .eds-form-control-wrapper--success:focus-within {
314
+ border-color: #1a8e60;
468
315
  }
469
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
470
- border-color: #181c56;
471
- background: #f5f5f8;
316
+ .eds-contrast .eds-form-control-wrapper--success {
317
+ border-color: #5ac39a;
318
+ --border-color: #5ac39a;
472
319
  }
473
- .eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
474
- border-color: #aeb7e2;
475
- background: #393d79;
320
+ .eds-contrast .eds-form-control-wrapper--success:hover {
321
+ border-color: #1a8e60;
476
322
  }
477
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
478
- background-color: #181c56;
323
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
324
+ --border-color: #5ac39a;
479
325
  border-color: #181c56;
480
326
  }
481
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
482
- visibility: visible;
327
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
328
+ --border-color: #5ac39a;
329
+ border-color: #181c56;
483
330
  }
484
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
485
- stroke: #5ac39a;
486
- -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
487
- animation: stroke ease-in-out 0.2s 0.1s forwards;
331
+ .eds-form-control-wrapper--error {
332
+ border-color: #d31b1b;
333
+ --border-color: #d31b1b;
488
334
  }
489
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
490
- opacity: 0.5;
335
+ .eds-form-control-wrapper--error:hover {
336
+ border-color: #ff9494;
491
337
  }
492
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
493
- opacity: 0.5;
338
+ .eds-form-control-wrapper--error[focus-within] {
339
+ border-color: #d31b1b;
494
340
  }
495
- .eds-radio-panel__container {
496
- background: #ffffff;
497
- border: 0.125rem solid #d1d3d3;
498
- border-radius: 0.25rem;
499
- display: flex;
500
- flex-direction: column;
501
- justify-content: flex-start;
502
- min-width: 20rem;
503
- position: relative;
504
- padding: 1rem;
505
- -webkit-user-select: none;
506
- -moz-user-select: none;
507
- -ms-user-select: none;
508
- user-select: none;
509
- width: -webkit-fit-content;
510
- width: -moz-fit-content;
511
- width: fit-content;
341
+ .eds-form-control-wrapper--error:focus-within {
342
+ border-color: #d31b1b;
512
343
  }
513
- .eds-contrast .eds-radio-panel__container {
514
- background: #181c56;
515
- border-color: #54568c;
344
+ .eds-contrast .eds-form-control-wrapper--error {
345
+ border-color: #ff9494;
346
+ --border-color: #ff9494;
516
347
  }
517
- .eds-radio-panel__title-wrapper {
518
- display: flex;
519
- justify-content: space-between;
520
- align-items: center;
348
+ .eds-contrast .eds-form-control-wrapper--error:hover {
349
+ border-color: #d31b1b;
521
350
  }
522
- .eds-radio-panel__label {
523
- display: flex;
524
- justify-content: center;
351
+ .eds-contrast .eds-form-control-wrapper--error[focus-within] {
352
+ border-color: #181c56;
353
+ --border-color: #ff9494;
525
354
  }
526
- .eds-radio-panel__check {
527
- height: 2rem;
528
- width: 2rem;
529
- margin-left: 1rem;
530
- border-radius: 50%;
531
- border: 0.125rem solid #e9e9e9;
532
- display: flex;
533
- align-items: center;
534
- justify-content: center;
535
- background: #ffffff;
536
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
355
+ .eds-contrast .eds-form-control-wrapper--error:focus-within {
356
+ border-color: #181c56;
357
+ --border-color: #ff9494;
537
358
  }
538
- .eds-contrast .eds-radio-panel__check {
539
- background: #181c56;
540
- border-color: #54568c;
359
+ .eds-contrast .eds-form-control-wrapper--dark {
360
+ background-color: #181c56;
361
+ color: #ffffff;
541
362
  }
542
- .eds-radio-panel__additional-content {
543
- margin-top: 0.25rem;
544
- word-wrap: break-word;
363
+ .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
364
+ color: #aeb7e2;
545
365
  }
546
- .eds-radio-panel--medium .eds-radio-panel__title {
547
- font-size: 1rem;
548
- font-weight: 500;
366
+ .eds-contrast .eds-form-control-wrapper--dark :-ms-input-placeholder {
367
+ color: #aeb7e2;
549
368
  }
550
- .eds-radio-panel--medium.eds-radio-panel__container {
551
- padding-bottom: 1rem;
552
- min-height: 3.75rem;
369
+ .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
370
+ color: #aeb7e2;
553
371
  }
554
- .eds-radio-panel--large.eds-radio-panel__container {
555
- min-height: 6.5rem;
372
+ .eds-contrast .eds-form-control-wrapper--dark:hover {
373
+ border-color: #aeb7e2;
556
374
  }
557
- .eds-radio-panel--large .eds-radio-panel__title-wrapper {
558
- height: 2rem;
375
+ .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
376
+ background-color: #292b6a;
377
+ border-color: #aeb7e2;
559
378
  }
560
- .eds-radio-panel--large .eds-radio-panel__title {
561
- font-size: 1.25rem;
562
- font-weight: 500;
563
- line-height: 1.875rem;
379
+ .eds-contrast .eds-form-control-wrapper--dark:focus-within {
380
+ background-color: #292b6a;
381
+ border-color: #aeb7e2;
564
382
  }
565
- .eds-radio-panel--disabled {
566
- background: #f3f3f3;
567
- border-color: #f3f3f3;
568
- color: #656782;
383
+ .eds-contrast .eds-form-control-wrapper--dark * {
384
+ background-color: transparent;
385
+ color: inherit;
569
386
  }
570
- .eds-contrast .eds-radio-panel--disabled {
571
- background: #181c56;
572
- border-style: dashed;
573
- border-color: #54568c;
574
- color: #babbcf;
387
+ .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
388
+ background-color: #292b6a;
389
+ color: #8285a8;
575
390
  }
576
391
 
577
- .eds-checkbox-icon {
578
- width: 1.5em;
579
- height: 1.5em;
580
- }
581
- .eds-checkbox-icon__path {
582
- transform-origin: 50% 50%;
583
- stroke-dasharray: 48;
584
- stroke-dashoffset: 48;
585
- stroke-width: 0.375rem;
586
- }/* DO NOT CHANGE!*/
587
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
588
- .eds-input-group {
392
+ .eds-form-control {
393
+ -webkit-appearance: none;
394
+ -moz-appearance: none;
395
+ appearance: none;
396
+ background-color: transparent;
397
+ border: 0;
589
398
  color: inherit;
590
399
  display: block;
591
- position: relative;
592
- }
593
- .eds-input-group__label {
594
- color: #656782;
595
- display: flex;
596
- font-size: 1rem;
597
- position: absolute;
400
+ font-family: inherit;
598
401
  line-height: 1rem;
599
- height: 3rem;
600
- padding: 1rem;
601
- padding-left: 0;
602
- margin-left: 1rem;
603
- top: -0.125rem;
604
- transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
605
- -webkit-user-select: none;
402
+ font-size: 1rem;
403
+ padding: 20px 1rem 0.25rem;
404
+ width: 100%;
405
+ }
406
+ .eds-form-control::-moz-placeholder {
407
+ opacity: 0;
408
+ -moz-transition: opacity 0.2s ease-in-out;
409
+ transition: opacity 0.2s ease-in-out;
410
+ }
411
+ .eds-form-control:-ms-input-placeholder {
412
+ opacity: 0;
413
+ -ms-transition: opacity 0.2s ease-in-out;
414
+ transition: opacity 0.2s ease-in-out;
415
+ }
416
+ .eds-form-control::placeholder {
417
+ opacity: 0;
418
+ transition: opacity 0.2s ease-in-out;
419
+ }
420
+ .eds-form-control:focus {
421
+ outline: none;
422
+ }
423
+ .eds-form-control:focus::-moz-placeholder {
424
+ opacity: 1;
425
+ }
426
+ .eds-form-control:focus:-ms-input-placeholder {
427
+ opacity: 1;
428
+ }
429
+ .eds-form-control:focus::placeholder {
430
+ opacity: 1;
431
+ }
432
+ .eds-form-control__prepend, .eds-form-control__append {
433
+ position: relative;
434
+ margin: 0 1rem;
435
+ line-height: inherit;
436
+ }
437
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
438
+ position: static;
439
+ }
440
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
441
+ top: 0.125rem;
442
+ }
443
+ .eds-form-control__prepend {
444
+ margin-right: 0;
445
+ }
446
+ .eds-form-control__append {
447
+ margin-left: 0;
448
+ }/* DO NOT CHANGE!*/
449
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
450
+ .eds-fieldset {
451
+ margin: 0;
452
+ padding: 0;
453
+ border: 0;
454
+ }
455
+ .eds-fieldset .eds-legend {
456
+ margin: 0 0 0.5rem;
457
+ }/* DO NOT CHANGE!*/
458
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
459
+ .eds-form-component--radio__container {
460
+ display: flex;
461
+ justify-content: center;
462
+ align-items: center;
463
+ position: relative;
464
+ cursor: pointer;
465
+ height: 2rem;
466
+ width: -webkit-fit-content;
467
+ width: -moz-fit-content;
468
+ width: fit-content;
469
+ -webkit-user-select: none;
606
470
  -moz-user-select: none;
607
471
  -ms-user-select: none;
608
472
  user-select: none;
609
- pointer-events: none;
610
473
  }
611
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
612
- top: calc(0.5rem - 0.125rem);
613
- font-size: 0.75rem;
614
- line-height: 0.75rem;
615
- height: 10px;
616
- padding: 0;
617
- margin-left: 1rem;
618
- }
619
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
620
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
621
- background: var(--textarea-label-background);
622
- width: calc( 100% - 1rem - 1rem - 4px );
474
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
475
+ border-color: #54568c;
623
476
  }
624
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
625
- top: 0.5rem;
626
- font-size: 0.875rem;
627
- line-height: 1rem;
628
- padding: 0;
629
- margin-left: 1rem;
477
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
478
+ background-color: #54568c;
630
479
  }
631
- .eds-contrast .eds-input-group__label {
632
- color: #8285a8;
480
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
481
+ border-color: #8285a8;
633
482
  }
634
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
635
- color: #aeb7e2;
483
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
484
+ background-color: #8285a8;
636
485
  }
637
- .eds-form-control-wrapper--size-large .eds-input-group__label {
638
- font-size: 1.5rem;
639
- line-height: 2.25rem;
640
- height: 4rem;
486
+ .eds-form-component--radio__container input {
487
+ position: absolute;
488
+ opacity: 0;
489
+ cursor: pointer;
490
+ height: 0;
491
+ width: 0;
641
492
  }
642
- .eds-input-group__label--filled {
643
- top: calc(0.5rem - 0.125rem);
644
- font-size: 0.75rem;
645
- line-height: 0.75rem;
646
- height: 10px;
647
- padding: 0;
648
- margin-left: 1rem;
493
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
494
+ height: 0.625rem;
495
+ width: 0.625rem;
649
496
  }
650
- .eds-textarea__label .eds-input-group__label--filled {
651
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
652
- background: var(--textarea-label-background);
653
- width: calc( 100% - 1rem - 1rem - 4px );
497
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
498
+ outline: none;
499
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
500
+ outline-offset: 0.125rem;
654
501
  }
655
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
656
- top: 0.5rem;
657
- font-size: 0.875rem;
658
- line-height: 1rem;
659
- padding: 0;
660
- margin-left: 1rem;
502
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
503
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
661
504
  }
662
- .eds-input-group__label-tooltip-icon {
663
- color: #0082b9;
664
- padding-left: 0.25rem;
665
- padding-right: 0.25rem;
505
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
506
+ position: relative;
507
+ height: 1.25rem;
508
+ width: 1.25rem;
509
+ margin-right: 1rem;
510
+ background-color: #ffffff;
511
+ border: 0.125rem solid #181c56;
512
+ border-radius: 50%;
666
513
  display: flex;
667
514
  align-items: center;
668
- cursor: help;
669
- font-size: 1rem;
515
+ justify-content: center;
670
516
  }
671
-
672
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
673
- top: calc(0.5rem - 0.125rem);
674
- font-size: 0.75rem;
675
- line-height: 0.75rem;
676
- height: 10px;
677
- padding: 0;
678
- margin-left: 1rem;
517
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
518
+ background-color: #181c56;
519
+ border-color: #aeb7e2;
679
520
  }
680
-
681
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
682
- top: calc(0.5rem - 0.125rem);
683
- font-size: 0.75rem;
684
- line-height: 0.75rem;
685
- height: 10px;
686
- padding: 0;
687
- margin-left: 1rem;
521
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
522
+ background: #d1d3d3;
523
+ border-color: #d1d3d3;
524
+ cursor: not-allowed;
688
525
  }
689
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
690
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
691
- background: var(--textarea-label-background);
692
- width: calc( 100% - 1rem - 1rem - 4px );
526
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
527
+ border-color: #d1d3d3;
693
528
  }
694
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
695
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
696
- background: var(--textarea-label-background);
697
- width: calc( 100% - 1rem - 1rem - 4px );
529
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
530
+ background: #d1d3d3;
531
+ border-color: #d1d3d3;
698
532
  }
699
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
700
- top: 0.5rem;
701
- font-size: 0.875rem;
702
- line-height: 1rem;
703
- padding: 0;
704
- margin-left: 1rem;
533
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
534
+ color: #656782;
705
535
  }
706
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
707
- top: 0.5rem;
708
- font-size: 0.875rem;
709
- line-height: 1rem;
710
- padding: 0;
711
- margin-left: 1rem;
536
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
537
+ display: block;
538
+ width: 0;
539
+ height: 0;
540
+ border-radius: 50%;
541
+ background-color: #181c56;
542
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
543
+ }
544
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
545
+ background-color: #aeb7e2;
712
546
  }/* DO NOT CHANGE!*/
713
547
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
714
- .eds-form-control-wrapper {
715
- --border-color: #181c56;
716
- --border-color-hover: #aeb7e2;
548
+ .eds-switch {
549
+ cursor: pointer;
550
+ -webkit-user-select: none;
551
+ -moz-user-select: none;
552
+ -ms-user-select: none;
553
+ user-select: none;
554
+ padding: 0.5rem 0;
555
+ width: -webkit-fit-content;
556
+ width: -moz-fit-content;
557
+ width: fit-content;
558
+ }
559
+ .eds-switch input {
560
+ opacity: 0;
561
+ pointer-events: none;
562
+ position: absolute;
563
+ }
564
+ .eds-switch--right {
565
+ display: flex;
566
+ flex-direction: row;
717
567
  align-items: center;
718
- background-color: #ffffff;
719
- border-radius: 0.25rem;
720
- border: 0.125rem solid #d1d3d3;
721
- box-shadow: 0 0 0 transparent;
722
- color: #181c56;
568
+ }
569
+ .eds-switch--bottom {
570
+ display: flex;
571
+ flex-direction: column;
572
+ align-items: center;
573
+ }
574
+ .eds-switch__circle {
575
+ border-radius: 50%;
576
+ height: 1.25rem;
577
+ width: 1.25rem;
578
+ content: "";
723
579
  display: flex;
580
+ align-items: center;
581
+ justify-content: center;
582
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
583
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
584
+ background-color: #ffffff;
585
+ top: 0.125rem;
586
+ left: 0.125rem;
587
+ position: relative;
588
+ }
589
+ .eds-switch__switch--large .eds-switch__circle {
590
+ height: 1.75rem;
591
+ width: 1.75rem;
592
+ }
593
+ .eds-switch .eds-switch__switch svg g,
594
+ .eds-switch .eds-switch__switch path {
595
+ fill: #949494;
596
+ transition: fill ease-in-out 0.1s;
597
+ }
598
+ .eds-switch__switch {
724
599
  position: relative;
725
- width: 100%;
726
- min-height: 3rem;
727
- transition: border-color 0.1s ease-in-out;
728
- --textarea-label-background: $colors-brand-white;
729
- /*
730
- Some input controls require a darker design while inside a contrast block.
731
- These elements require the `--dark` modifier, even on the wrapper.
732
- */
600
+ background-color: #d1d3d3;
601
+ content: "";
602
+ display: block;
603
+ transition: background-color 0.1s ease-in-out;
604
+ height: 1.5rem;
605
+ width: 3rem;
606
+ border-radius: 1.5rem;
733
607
  }
734
- .eds-contrast .eds-form-control-wrapper {
735
- --border-color: #aeb7e2;
736
- background-color: #ffffff;
737
- border-color: #54568c;
608
+ .eds-switch--right .eds-switch__switch {
609
+ margin-right: 0.75rem;
738
610
  }
739
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
740
- border-color: #181c56;
611
+ :checked + .eds-switch__switch {
612
+ background-color: var(--eds-switch-color);
741
613
  }
742
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
743
- border-color: #181c56;
614
+ :checked + .eds-switch__switch .eds-switch__circle {
615
+ left: 1.625rem;
744
616
  }
745
- .eds-contrast .eds-form-control-wrapper:hover {
746
- border-color: #aeb7e2;
747
- background: #ebebf1;
617
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
618
+ :checked + .eds-switch__switch .eds-switch__circle path {
619
+ fill: var(--eds-switch-color);
748
620
  }
749
- .eds-form-control-wrapper[focus-within] {
750
- box-shadow: inset 0 0 0 1px var(--border-color);
621
+ .eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
622
+ .eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
623
+ fill: var(--eds-switch-color);
751
624
  }
752
- .eds-form-control-wrapper:focus-within {
753
- box-shadow: inset 0 0 0 1px var(--border-color);
625
+ .eds-contrast :checked + .eds-switch__switch {
626
+ background-color: var(--eds-switch-contrast-color);
754
627
  }
755
- .eds-contrast .eds-form-control-wrapper[focus-within] {
756
- border-color: #181c56;
757
- --border-color: #aeb7e2;
758
- box-shadow: 0 0 0 0.125rem var(--border-color);
628
+ :focus + .eds-switch__switch {
629
+ outline: none;
630
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
631
+ outline-offset: 0.125rem;
759
632
  }
760
- .eds-contrast .eds-form-control-wrapper:focus-within {
761
- border-color: #181c56;
762
- --border-color: #aeb7e2;
763
- box-shadow: 0 0 0 0.125rem var(--border-color);
633
+ .eds-contrast :focus + .eds-switch__switch {
634
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
764
635
  }
765
- .eds-form-control-wrapper ::-moz-placeholder {
766
- color: #656782;
636
+ .eds-contrast .eds-switch__switch {
637
+ background-color: #54568c;
767
638
  }
768
- .eds-form-control-wrapper :-ms-input-placeholder {
769
- color: #656782;
639
+ .eds-switch__switch--large {
640
+ width: 3.75rem;
641
+ height: 2rem;
642
+ border-radius: 3.75rem;
770
643
  }
771
- .eds-form-control-wrapper ::placeholder {
772
- color: #656782;
644
+ :checked + .eds-switch__switch--large .eds-switch__circle {
645
+ left: 1.875rem;
773
646
  }
774
- .eds-form-control-wrapper--disabled {
775
- background-color: #e9e9e9;
776
- color: #656782;
777
- border-color: transparent;
778
- pointer-events: none;
647
+ .eds-switch__label--large--right {
648
+ font-size: 1rem;
779
649
  }
780
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
781
- display: none;
650
+ .eds-switch__label--large--bottom {
651
+ font-size: 0.875rem;
782
652
  }
783
- .eds-contrast .eds-form-control-wrapper--disabled {
784
- background: #292b6a;
785
- border-color: transparent;
786
- color: #8285a8;
653
+ .eds-switch__label--medium--right {
654
+ font-size: 0.875rem;
787
655
  }
788
- .eds-form-control-wrapper--readonly {
789
- pointer-events: none;
790
- cursor: default;
791
- border-color: transparent;
792
- background: #f8f8f8;
793
- --textarea-label-background: $colors-greys-grey90;
656
+ .eds-switch__label--medium--bottom {
657
+ font-size: 0.75rem;
658
+ }/* DO NOT CHANGE!*/
659
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
660
+ .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
661
+ border-color: #181c56;
662
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
794
663
  }
795
- .eds-contrast .eds-form-control-wrapper--readonly {
796
- background: #292b6a;
797
- --textarea-label-background: $colors-blues-blue10;
798
- color: #ffffff;
799
- border-color: transparent;
664
+ .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
665
+ border-color: #181c56;
666
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
800
667
  }
801
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
802
- display: none;
668
+ .eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
669
+ border-color: #ffffff;
670
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
803
671
  }
804
- .eds-form-control-wrapper--size-medium .eds-form-control,
805
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
806
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
807
- font-size: 1rem;
808
- line-height: 1rem;
672
+ .eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
673
+ border-color: #ffffff;
674
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
809
675
  }
810
- .eds-form-control-wrapper--size-large {
811
- min-height: 4rem;
812
- padding: 0 0.5rem;
676
+ .eds-radio-panel__wrapper input {
677
+ position: absolute;
678
+ opacity: 0;
679
+ cursor: pointer;
680
+ height: 0;
681
+ width: 0;
813
682
  }
814
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
815
- border-width: 0.25rem;
683
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
684
+ border-color: #181c56;
685
+ background: #f5f5f8;
816
686
  }
817
- .eds-form-control-wrapper--size-large .eds-form-control,
818
- .eds-form-control-wrapper--size-large .eds-form-control__append,
819
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
820
- font-size: 1.5rem;
821
- line-height: 2.25rem;
687
+ .eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
688
+ border-color: #aeb7e2;
689
+ background: #393d79;
822
690
  }
823
- .eds-form-control-wrapper--success {
824
- border-color: #1a8e60;
825
- --border-color: #1a8e60;
691
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
692
+ background-color: #181c56;
693
+ border-color: #181c56;
826
694
  }
827
- .eds-form-control-wrapper--success:hover {
828
- border-color: #5ac39a;
695
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
696
+ visibility: visible;
829
697
  }
830
- .eds-form-control-wrapper--success[focus-within] {
831
- border-color: #1a8e60;
698
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
699
+ stroke: #5ac39a;
700
+ -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
701
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
832
702
  }
833
- .eds-form-control-wrapper--success:focus-within {
834
- border-color: #1a8e60;
703
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
704
+ opacity: 0.5;
835
705
  }
836
- .eds-contrast .eds-form-control-wrapper--success {
837
- border-color: #5ac39a;
838
- --border-color: #5ac39a;
706
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
707
+ opacity: 0.5;
839
708
  }
840
- .eds-contrast .eds-form-control-wrapper--success:hover {
841
- border-color: #1a8e60;
709
+ .eds-radio-panel__container {
710
+ background: #ffffff;
711
+ border: 0.125rem solid #d1d3d3;
712
+ border-radius: 0.25rem;
713
+ display: flex;
714
+ flex-direction: column;
715
+ justify-content: flex-start;
716
+ min-width: 20rem;
717
+ position: relative;
718
+ padding: 1rem;
719
+ -webkit-user-select: none;
720
+ -moz-user-select: none;
721
+ -ms-user-select: none;
722
+ user-select: none;
723
+ width: -webkit-fit-content;
724
+ width: -moz-fit-content;
725
+ width: fit-content;
842
726
  }
843
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
844
- --border-color: #5ac39a;
845
- border-color: #181c56;
727
+ .eds-contrast .eds-radio-panel__container {
728
+ background: #181c56;
729
+ border-color: #54568c;
846
730
  }
847
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
848
- --border-color: #5ac39a;
849
- border-color: #181c56;
731
+ .eds-radio-panel__title-wrapper {
732
+ display: flex;
733
+ justify-content: space-between;
734
+ align-items: center;
850
735
  }
851
- .eds-form-control-wrapper--error {
852
- border-color: #d31b1b;
853
- --border-color: #d31b1b;
736
+ .eds-radio-panel__label {
737
+ display: flex;
738
+ justify-content: center;
854
739
  }
855
- .eds-form-control-wrapper--error:hover {
856
- border-color: #ff9494;
740
+ .eds-radio-panel__check {
741
+ height: 2rem;
742
+ width: 2rem;
743
+ margin-left: 1rem;
744
+ border-radius: 50%;
745
+ border: 0.125rem solid #e9e9e9;
746
+ display: flex;
747
+ align-items: center;
748
+ justify-content: center;
749
+ background: #ffffff;
750
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
857
751
  }
858
- .eds-form-control-wrapper--error[focus-within] {
859
- border-color: #d31b1b;
752
+ .eds-contrast .eds-radio-panel__check {
753
+ background: #181c56;
754
+ border-color: #54568c;
860
755
  }
861
- .eds-form-control-wrapper--error:focus-within {
862
- border-color: #d31b1b;
756
+ .eds-radio-panel__additional-content {
757
+ margin-top: 0.25rem;
758
+ word-wrap: break-word;
863
759
  }
864
- .eds-contrast .eds-form-control-wrapper--error {
865
- border-color: #ff9494;
866
- --border-color: #ff9494;
760
+ .eds-radio-panel--medium .eds-radio-panel__title {
761
+ font-size: 1rem;
762
+ font-weight: 500;
763
+ }
764
+ .eds-radio-panel--medium.eds-radio-panel__container {
765
+ padding-bottom: 1rem;
766
+ min-height: 3.75rem;
767
+ }
768
+ .eds-radio-panel--large.eds-radio-panel__container {
769
+ min-height: 6.5rem;
770
+ }
771
+ .eds-radio-panel--large .eds-radio-panel__title-wrapper {
772
+ height: 2rem;
773
+ }
774
+ .eds-radio-panel--large .eds-radio-panel__title {
775
+ font-size: 1.25rem;
776
+ font-weight: 500;
777
+ line-height: 1.875rem;
778
+ }
779
+ .eds-radio-panel--disabled {
780
+ background: #f3f3f3;
781
+ border-color: #f3f3f3;
782
+ color: #656782;
867
783
  }
868
- .eds-contrast .eds-form-control-wrapper--error:hover {
869
- border-color: #d31b1b;
784
+ .eds-contrast .eds-radio-panel--disabled {
785
+ background: #181c56;
786
+ border-style: dashed;
787
+ border-color: #54568c;
788
+ color: #babbcf;
870
789
  }
871
- .eds-contrast .eds-form-control-wrapper--error[focus-within] {
872
- border-color: #181c56;
873
- --border-color: #ff9494;
790
+
791
+ .eds-checkbox-icon {
792
+ width: 1.5em;
793
+ height: 1.5em;
874
794
  }
875
- .eds-contrast .eds-form-control-wrapper--error:focus-within {
876
- border-color: #181c56;
877
- --border-color: #ff9494;
795
+ .eds-checkbox-icon__path {
796
+ transform-origin: 50% 50%;
797
+ stroke-dasharray: 48;
798
+ stroke-dashoffset: 48;
799
+ stroke-width: 0.375rem;
800
+ }/* DO NOT CHANGE!*/
801
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
802
+ .eds-input-group {
803
+ color: inherit;
804
+ display: block;
805
+ position: relative;
878
806
  }
879
- .eds-contrast .eds-form-control-wrapper--dark {
880
- background-color: #181c56;
881
- color: #ffffff;
807
+ .eds-input-group__label {
808
+ color: #656782;
809
+ display: flex;
810
+ font-size: 1rem;
811
+ position: absolute;
812
+ line-height: 1rem;
813
+ height: 3rem;
814
+ padding: 1rem;
815
+ padding-left: 0;
816
+ margin-left: 1rem;
817
+ top: -0.125rem;
818
+ transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
819
+ -webkit-user-select: none;
820
+ -moz-user-select: none;
821
+ -ms-user-select: none;
822
+ user-select: none;
823
+ pointer-events: none;
882
824
  }
883
- .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
884
- color: #aeb7e2;
825
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
826
+ top: calc(0.5rem - 0.125rem);
827
+ font-size: 0.75rem;
828
+ line-height: 0.75rem;
829
+ height: 10px;
830
+ padding: 0;
831
+ margin-left: 1rem;
885
832
  }
886
- .eds-contrast .eds-form-control-wrapper--dark :-ms-input-placeholder {
887
- color: #aeb7e2;
833
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
834
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
835
+ background: var(--textarea-label-background);
836
+ width: calc( 100% - 1rem - 1rem - 4px );
888
837
  }
889
- .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
890
- color: #aeb7e2;
838
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
839
+ top: 0.5rem;
840
+ font-size: 0.875rem;
841
+ line-height: 1rem;
842
+ padding: 0;
843
+ margin-left: 1rem;
891
844
  }
892
- .eds-contrast .eds-form-control-wrapper--dark:hover {
893
- border-color: #aeb7e2;
845
+ .eds-contrast .eds-input-group__label {
846
+ color: #8285a8;
894
847
  }
895
- .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
896
- background-color: #292b6a;
897
- border-color: #aeb7e2;
848
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
849
+ color: #aeb7e2;
898
850
  }
899
- .eds-contrast .eds-form-control-wrapper--dark:focus-within {
900
- background-color: #292b6a;
901
- border-color: #aeb7e2;
851
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
852
+ font-size: 1.5rem;
853
+ line-height: 2.25rem;
854
+ height: 4rem;
902
855
  }
903
- .eds-contrast .eds-form-control-wrapper--dark * {
904
- background-color: transparent;
905
- color: inherit;
856
+ .eds-input-group__label--filled {
857
+ top: calc(0.5rem - 0.125rem);
858
+ font-size: 0.75rem;
859
+ line-height: 0.75rem;
860
+ height: 10px;
861
+ padding: 0;
862
+ margin-left: 1rem;
906
863
  }
907
- .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
908
- background-color: #292b6a;
909
- color: #8285a8;
864
+ .eds-textarea__label .eds-input-group__label--filled {
865
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
866
+ background: var(--textarea-label-background);
867
+ width: calc( 100% - 1rem - 1rem - 4px );
910
868
  }
911
-
912
- .eds-form-control {
913
- -webkit-appearance: none;
914
- -moz-appearance: none;
915
- appearance: none;
916
- background-color: transparent;
917
- border: 0;
918
- color: inherit;
919
- display: block;
920
- font-family: inherit;
869
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
870
+ top: 0.5rem;
871
+ font-size: 0.875rem;
921
872
  line-height: 1rem;
873
+ padding: 0;
874
+ margin-left: 1rem;
875
+ }
876
+ .eds-input-group__label-tooltip-icon {
877
+ color: #0082b9;
878
+ padding-left: 0.25rem;
879
+ padding-right: 0.25rem;
880
+ display: flex;
881
+ align-items: center;
882
+ cursor: help;
922
883
  font-size: 1rem;
923
- padding: 20px 1rem 0.25rem;
924
- width: 100%;
925
884
  }
926
- .eds-form-control::-moz-placeholder {
927
- opacity: 0;
928
- -moz-transition: opacity 0.2s ease-in-out;
929
- transition: opacity 0.2s ease-in-out;
885
+
886
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
887
+ top: calc(0.5rem - 0.125rem);
888
+ font-size: 0.75rem;
889
+ line-height: 0.75rem;
890
+ height: 10px;
891
+ padding: 0;
892
+ margin-left: 1rem;
930
893
  }
931
- .eds-form-control:-ms-input-placeholder {
932
- opacity: 0;
933
- -ms-transition: opacity 0.2s ease-in-out;
934
- transition: opacity 0.2s ease-in-out;
894
+
895
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
896
+ top: calc(0.5rem - 0.125rem);
897
+ font-size: 0.75rem;
898
+ line-height: 0.75rem;
899
+ height: 10px;
900
+ padding: 0;
901
+ margin-left: 1rem;
935
902
  }
936
- .eds-form-control::placeholder {
937
- opacity: 0;
938
- transition: opacity 0.2s ease-in-out;
903
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
904
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
905
+ background: var(--textarea-label-background);
906
+ width: calc( 100% - 1rem - 1rem - 4px );
939
907
  }
940
- .eds-form-control:focus {
941
- outline: none;
908
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
909
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
910
+ background: var(--textarea-label-background);
911
+ width: calc( 100% - 1rem - 1rem - 4px );
942
912
  }
943
- .eds-form-control:focus::-moz-placeholder {
944
- opacity: 1;
913
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
914
+ top: 0.5rem;
915
+ font-size: 0.875rem;
916
+ line-height: 1rem;
917
+ padding: 0;
918
+ margin-left: 1rem;
945
919
  }
946
- .eds-form-control:focus:-ms-input-placeholder {
947
- opacity: 1;
920
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
921
+ top: 0.5rem;
922
+ font-size: 0.875rem;
923
+ line-height: 1rem;
924
+ padding: 0;
925
+ margin-left: 1rem;
926
+ }/* DO NOT CHANGE!*/
927
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
928
+ textarea.eds-form-control.eds-textarea {
929
+ min-height: 7.75rem;
930
+ resize: vertical;
931
+ line-height: 1.5rem;
932
+ }/* DO NOT CHANGE!*/
933
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
934
+ .eds-textfield__clear-button {
935
+ background: none;
936
+ border: none;
937
+ border-radius: 50%;
938
+ color: inherit;
939
+ cursor: pointer;
940
+ display: flex;
941
+ font: inherit;
942
+ font-size: 1rem;
943
+ line-height: 1rem;
944
+ padding: 0.5rem;
945
+ margin-right: -0.75rem;
948
946
  }
949
- .eds-form-control:focus::placeholder {
950
- opacity: 1;
947
+ .eds-textfield__clear-button-wrapper {
948
+ display: flex;
949
+ align-items: center;
951
950
  }
952
- .eds-form-control__prepend, .eds-form-control__append {
953
- position: relative;
954
- margin: 0 1rem;
955
- line-height: inherit;
951
+ .eds-textfield__clear-button:hover {
952
+ background: #f3f3f3;
956
953
  }
957
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
958
- position: static;
954
+ .eds-textfield__clear-button:focus {
955
+ outline: none;
956
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
959
957
  }
960
- .eds-form-control__prepend svg, .eds-form-control__append svg {
961
- top: 0.125rem;
958
+
959
+ .eds-textfield__divider {
960
+ content: "";
961
+ display: block;
962
+ background-color: #e9e9e9;
963
+ height: 1.5rem;
964
+ width: 1px;
962
965
  }
963
- .eds-form-control__prepend {
964
- margin-right: 0;
966
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
967
+ background-color: #8285a8;
968
+ }/* DO NOT CHANGE!*/
969
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
970
+ .eds-segmented-control {
971
+ margin-top: 0.25rem;
972
+ display: flex;
973
+ background: #d1d4e3;
974
+ border-radius: 0.25rem;
965
975
  }
966
- .eds-form-control__append {
967
- margin-left: 0;
976
+ .eds-contrast .eds-segmented-control {
977
+ background: #393d79;
968
978
  }/* DO NOT CHANGE!*/
969
979
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
970
980
  .eds-segmented-choice {
@@ -1034,14 +1044,4 @@ textarea.eds-form-control.eds-textarea {
1034
1044
  }
1035
1045
  .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1036
1046
  --background-color: #d1d4e3;
1037
- }/* DO NOT CHANGE!*/
1038
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1039
- .eds-segmented-control {
1040
- margin-top: 0.25rem;
1041
- display: flex;
1042
- background: #d1d4e3;
1043
- border-radius: 0.25rem;
1044
- }
1045
- .eds-contrast .eds-segmented-control {
1046
- background: #393d79;
1047
1047
  }