@entur/form 7.1.11 → 8.0.0-beta.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.
package/dist/styles.css CHANGED
@@ -1,187 +1,7 @@
1
- /* DO NOT CHANGE!*/
2
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-form-control-wrapper {
4
- align-items: center;
5
- background-color: var(--components-form-baseform-standard-fill-default);
6
- border-radius: 0.25rem;
7
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
8
- box-shadow: 0 0 0 transparent;
9
- color: var(--components-form-baseform-standard-text-content);
10
- display: flex;
11
- position: relative;
12
- width: 100%;
13
- min-height: 3rem;
14
- transition: border-color 0.1s ease-in-out;
15
- }
16
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
17
- border-color: var(--components-form-baseform-standard-border-interactive);
18
- }
19
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
20
- border-color: var(--components-form-baseform-standard-border-interactive);
21
- }
22
- .eds-contrast .eds-form-control-wrapper:hover {
23
- border-color: var(--components-form-baseform-contrast-border-interactive);
24
- }
25
- .eds-form-control-wrapper[focus-within] {
26
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
27
- }
28
- .eds-form-control-wrapper:focus-within {
29
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
30
- }
31
- .eds-contrast .eds-form-control-wrapper[focus-within] {
32
- outline: var(--components-form-baseform-contrast-border-interactive);
33
- }
34
- .eds-contrast .eds-form-control-wrapper:focus-within {
35
- outline: var(--components-form-baseform-contrast-border-interactive);
36
- }
37
- .eds-form-control-wrapper ::-moz-placeholder {
38
- color: var(--components-form-baseform-standard-text-label);
39
- }
40
- .eds-form-control-wrapper ::placeholder {
41
- color: var(--components-form-baseform-standard-text-label);
42
- }
43
- .eds-form-control-wrapper--disabled {
44
- border-color: transparent;
45
- background-color: var(--components-form-baseform-standard-fill-disabled);
46
- pointer-events: none;
47
- color: var(--components-form-baseform-standard-text-disabled);
48
- }
49
- .eds-form-control-wrapper--disabled .eds-input-group__label {
50
- color: var(--components-form-baseform-standard-text-disabled);
51
- }
52
- .eds-contrast .eds-form-control-wrapper--disabled {
53
- border-color: transparent;
54
- background-color: var(--components-form-baseform-contrast-fill-disabled);
55
- color: var(--components-form-baseform-contrast-text-disabled);
56
- }
57
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
58
- color: var(--components-form-baseform-contrast-text-disabled);
59
- }
60
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
61
- display: none;
62
- }
63
- .eds-form-control-wrapper--readonly {
64
- border-color: transparent;
65
- pointer-events: none;
66
- cursor: default;
67
- background: var(--components-form-baseform-standard-fill-readonly);
68
- border: var(--components-form-baseform-standard-fill-readonly);
69
- }
70
- .eds-contrast .eds-form-control-wrapper--readonly {
71
- background: var(--components-form-baseform-contrast-fill-readonly);
72
- color: var(--components-form-baseform-contrast-text-description);
73
- border: var(--components-form-baseform-contrast-fill-readonly);
74
- }
75
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
76
- color: var(--components-form-baseform-contrast-text-description);
77
- }
78
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
79
- display: none;
80
- }
81
- .eds-form-control-wrapper--size-medium .eds-form-control,
82
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
83
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
84
- font-size: 1rem;
85
- line-height: 1rem;
86
- }
87
- .eds-form-control-wrapper--size-large {
88
- min-height: 4rem;
89
- padding: 0 0.5rem;
90
- }
91
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
92
- border-width: 0.25rem;
93
- }
94
- .eds-form-control-wrapper--size-large .eds-form-control,
95
- .eds-form-control-wrapper--size-large .eds-form-control__append,
96
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
97
- font-size: 1.5rem;
98
- line-height: 2.25rem;
99
- }
100
- .eds-form-control-wrapper--success {
101
- border-color: var(--components-form-baseform-standard-border-success);
102
- }
103
- .eds-form-control-wrapper--success[focus-within] {
104
- border-color: var(--components-form-baseform-standard-border-success);
105
- }
106
- .eds-form-control-wrapper--success:focus-within {
107
- border-color: var(--components-form-baseform-standard-border-success);
108
- }
109
- .eds-contrast .eds-form-control-wrapper--success {
110
- border-color: var(--components-form-baseform-standard-border-success);
111
- }
112
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
113
- border-color: var(--components-form-baseform-contrast-border-success);
114
- }
115
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
116
- border-color: var(--components-form-baseform-contrast-border-success);
117
- }
118
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
119
- border-color: var(--components-form-baseform-standard-border-negative);
120
- }
121
- .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
122
- border-color: var(--components-form-baseform-standard-border-negative);
123
- }
124
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
125
- border-color: var(--components-form-baseform-standard-border-negative);
126
- }
127
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
128
- border-color: var(--components-form-baseform-contrast-border-negative);
129
- }
130
- .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
131
- border-color: var(--components-form-baseform-contrast-border-negative);
132
- }
133
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
134
- border-color: var(--components-form-baseform-contrast-border-negative);
135
- }
136
-
137
- .eds-form-control {
138
- -webkit-appearance: none;
139
- -moz-appearance: none;
140
- appearance: none;
141
- background-color: transparent;
1
+ .eds-fieldset {
2
+ margin: 0;
3
+ padding: 0;
142
4
  border: 0;
143
- color: var(--components-form-baseform-standard-text-content);
144
- display: block;
145
- font-family: inherit;
146
- line-height: 1rem;
147
- font-size: 1rem;
148
- padding: 20px 1rem 0.25rem;
149
- width: 100%;
150
- }
151
- .eds-form-control::-moz-placeholder {
152
- opacity: 0;
153
- -moz-transition: opacity 0.2s ease-in-out;
154
- transition: opacity 0.2s ease-in-out;
155
- }
156
- .eds-form-control::placeholder {
157
- opacity: 0;
158
- transition: opacity 0.2s ease-in-out;
159
- }
160
- .eds-form-control:focus {
161
- outline: none;
162
- }
163
- .eds-form-control:focus::-moz-placeholder {
164
- opacity: 1;
165
- }
166
- .eds-form-control:focus::placeholder {
167
- opacity: 1;
168
- }
169
- .eds-form-control__prepend, .eds-form-control__append {
170
- position: relative;
171
- margin: 0 1rem;
172
- line-height: inherit;
173
- }
174
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
175
- position: static;
176
- }
177
- .eds-form-control__prepend svg, .eds-form-control__append svg {
178
- top: 0.125rem;
179
- }
180
- .eds-form-control__prepend {
181
- margin-right: 0;
182
- }
183
- .eds-form-control__append {
184
- margin-left: 0;
185
5
  }
186
6
  /* DO NOT CHANGE!*/
187
7
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -413,133 +233,213 @@
413
233
  }
414
234
  /* DO NOT CHANGE!*/
415
235
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
416
- .eds-input-group {
417
- color: inherit;
418
- display: block;
236
+ .eds-form-control__field-and-feedback-text {
237
+ display: flex;
238
+ flex-direction: column;
239
+ height: -moz-fit-content;
240
+ height: fit-content;
241
+ width: 100%;
242
+ }
243
+ .eds-form-control__field-and-feedback-text--has-tooltip {
244
+ padding-right: 2rem;
245
+ }
246
+ .eds-form-control-wrapper {
247
+ display: flex;
248
+ align-items: center;
419
249
  position: relative;
250
+ flex: 1;
251
+ min-height: 3rem;
252
+ padding-left: 1rem;
253
+ padding-right: 1rem;
254
+ background-color: var(--components-form-baseform-standard-fill-default);
255
+ border-radius: 0.25rem;
256
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
257
+ box-shadow: 0 0 0 transparent;
258
+ color: var(--components-form-baseform-standard-text-content);
259
+ transition: border-color 0.1s ease-in-out;
420
260
  }
421
- .eds-input-group__label {
261
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
262
+ border-color: var(--components-form-baseform-standard-border-interactive);
263
+ }
264
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
265
+ border-color: var(--components-form-baseform-standard-border-interactive);
266
+ }
267
+ .eds-contrast .eds-form-control-wrapper:hover {
268
+ border-color: var(--components-form-baseform-contrast-border-interactive);
269
+ }
270
+ .eds-form-control-wrapper[focus-within] {
271
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
272
+ }
273
+ .eds-form-control-wrapper:focus-within {
274
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
275
+ }
276
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
277
+ outline: var(--components-form-baseform-contrast-border-interactive);
278
+ }
279
+ .eds-contrast .eds-form-control-wrapper:focus-within {
280
+ outline: var(--components-form-baseform-contrast-border-interactive);
281
+ }
282
+ .eds-form-control-wrapper ::-moz-placeholder {
422
283
  color: var(--components-form-baseform-standard-text-label);
423
- display: flex;
424
- font-size: 1rem;
425
- position: absolute;
426
- line-height: 1rem;
427
- height: 3rem;
428
- padding: 1rem;
429
- padding-left: 0;
430
- margin-left: 1rem;
431
- top: -0.125rem;
432
- 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;
433
- -webkit-user-select: none;
434
- -moz-user-select: none;
435
- user-select: none;
284
+ }
285
+ .eds-form-control-wrapper ::placeholder {
286
+ color: var(--components-form-baseform-standard-text-label);
287
+ }
288
+ .eds-form-control-wrapper--disabled {
289
+ border-color: transparent;
290
+ background-color: var(--components-form-baseform-standard-fill-disabled);
436
291
  pointer-events: none;
292
+ color: var(--components-form-baseform-standard-text-disabled);
437
293
  }
438
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
439
- top: 0.375rem;
440
- font-size: 0.75rem;
441
- line-height: 0.75rem;
442
- height: 10px;
443
- padding: 0;
444
- margin-left: 1rem;
294
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
295
+ color: var(--components-form-baseform-standard-text-disabled);
445
296
  }
446
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
447
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
448
- background: var(--textarea-label-background);
449
- width: calc(100% - 1rem - 1rem - 4px);
297
+ .eds-contrast .eds-form-control-wrapper--disabled {
298
+ border-color: transparent;
299
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
300
+ color: var(--components-form-baseform-contrast-text-disabled);
450
301
  }
451
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
452
- top: 0.5rem;
453
- font-size: 0.875rem;
302
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
303
+ color: var(--components-form-baseform-contrast-text-disabled);
304
+ }
305
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
306
+ display: none;
307
+ }
308
+ .eds-form-control-wrapper--readonly {
309
+ border-color: transparent;
310
+ pointer-events: none;
311
+ cursor: default;
312
+ background: var(--components-form-baseform-standard-fill-readonly);
313
+ border: var(--components-form-baseform-standard-fill-readonly);
314
+ }
315
+ .eds-contrast .eds-form-control-wrapper--readonly {
316
+ background: var(--components-form-baseform-contrast-fill-readonly);
317
+ color: var(--components-form-baseform-contrast-text-description);
318
+ border: var(--components-form-baseform-contrast-fill-readonly);
319
+ }
320
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
321
+ color: var(--components-form-baseform-contrast-text-description);
322
+ }
323
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
324
+ display: none;
325
+ }
326
+ .eds-form-control-wrapper--size-medium .eds-form-control,
327
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
328
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
329
+ font-size: 1rem;
454
330
  line-height: 1rem;
455
- padding: 0;
456
- margin-left: 1rem;
457
331
  }
458
- .eds-form-control-wrapper--size-large .eds-input-group__label {
332
+ .eds-form-control-wrapper--size-large {
333
+ min-height: 4rem;
334
+ }
335
+ .eds-form-control-wrapper--size-large .eds-form-control,
336
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
337
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
459
338
  font-size: 1.5rem;
460
- line-height: 2.25rem;
461
- height: 4rem;
462
- top: -0.25rem;
463
339
  }
464
- .eds-input-group__label--filled {
465
- top: 0.375rem;
466
- font-size: 0.75rem;
467
- line-height: 0.75rem;
468
- height: 10px;
469
- padding: 0;
470
- margin-left: 1rem;
340
+ .eds-form-control-wrapper--success {
341
+ border-color: var(--components-form-baseform-standard-border-success);
471
342
  }
472
- .eds-textarea__label .eds-input-group__label--filled {
473
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
474
- background: var(--textarea-label-background);
475
- width: calc(100% - 1rem - 1rem - 4px);
343
+ .eds-form-control-wrapper--success[focus-within] {
344
+ border-color: var(--components-form-baseform-standard-border-success);
476
345
  }
477
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
478
- top: 0.5rem;
479
- font-size: 0.875rem;
480
- line-height: 1rem;
481
- padding: 0;
482
- margin-left: 1rem;
346
+ .eds-form-control-wrapper--success:focus-within {
347
+ border-color: var(--components-form-baseform-standard-border-success);
483
348
  }
484
- .eds-input-group__label-tooltip-icon {
485
- color: var(--base-colors-shape-accent);
486
- padding-left: 0.25rem;
487
- padding-right: 0.25rem;
488
- display: flex;
489
- align-items: center;
490
- cursor: help;
491
- font-size: 1rem;
349
+ .eds-contrast .eds-form-control-wrapper--success {
350
+ border-color: var(--components-form-baseform-standard-border-success);
492
351
  }
493
-
494
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
495
- top: 0.375rem;
496
- font-size: 0.75rem;
497
- line-height: 0.75rem;
498
- height: 10px;
499
- padding: 0;
500
- margin-left: 1rem;
352
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
353
+ border-color: var(--components-form-baseform-contrast-border-success);
501
354
  }
502
-
503
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
504
- top: 0.375rem;
505
- font-size: 0.75rem;
506
- line-height: 0.75rem;
507
- height: 10px;
508
- padding: 0;
509
- margin-left: 1rem;
355
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
356
+ border-color: var(--components-form-baseform-contrast-border-success);
510
357
  }
511
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
512
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
513
- background: var(--textarea-label-background);
514
- width: calc(100% - 1rem - 1rem - 4px);
358
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
359
+ border-color: var(--components-form-baseform-standard-border-negative);
515
360
  }
516
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
517
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
518
- background: var(--textarea-label-background);
519
- width: calc(100% - 1rem - 1rem - 4px);
361
+ .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
362
+ border-color: var(--components-form-baseform-standard-border-negative);
520
363
  }
521
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
522
- top: 0.5rem;
523
- font-size: 0.875rem;
524
- line-height: 1rem;
525
- padding: 0;
526
- margin-left: 1rem;
364
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
365
+ border-color: var(--components-form-baseform-standard-border-negative);
527
366
  }
528
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
529
- top: 0.5rem;
530
- font-size: 0.875rem;
531
- line-height: 1rem;
532
- padding: 0;
533
- margin-left: 1rem;
367
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
368
+ border-color: var(--components-form-baseform-contrast-border-negative);
369
+ }
370
+ .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
371
+ border-color: var(--components-form-baseform-contrast-border-negative);
372
+ }
373
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
374
+ border-color: var(--components-form-baseform-contrast-border-negative);
534
375
  }
535
- .eds-contrast .eds-form-control-wrapper .eds-tooltip {
376
+ .eds-contrast .eds-form-control .eds-tooltip {
536
377
  background: var(--components-tooltip-tooltip-standard-fill);
537
378
  color: var(--components-tooltip-tooltip-standard-text);
538
379
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
539
380
  }
540
- .eds-form-control-wrapper .eds-tooltip::after {
381
+ .eds-form-control .eds-tooltip::after {
541
382
  background: var(--components-tooltip-tooltip-standard-fill);
542
383
  }
384
+
385
+ .eds-form-control {
386
+ display: block;
387
+ -webkit-appearance: none;
388
+ -moz-appearance: none;
389
+ appearance: none;
390
+ width: 100%;
391
+ height: 100%;
392
+ padding: 20px 0rem 0.25rem;
393
+ font-family: inherit;
394
+ font-size: 1rem;
395
+ line-height: 1rem;
396
+ border: 0;
397
+ color: var(--components-form-baseform-standard-text-content);
398
+ background-color: transparent;
399
+ }
400
+ .eds-form-control::-moz-placeholder {
401
+ opacity: 0;
402
+ -moz-transition: opacity 0.2s ease-in-out;
403
+ transition: opacity 0.2s ease-in-out;
404
+ }
405
+ .eds-form-control::placeholder {
406
+ opacity: 0;
407
+ transition: opacity 0.2s ease-in-out;
408
+ }
409
+ .eds-form-control:focus {
410
+ outline: none;
411
+ }
412
+ .eds-form-control:focus::-moz-placeholder {
413
+ opacity: 1;
414
+ }
415
+ .eds-form-control:focus::placeholder {
416
+ opacity: 1;
417
+ }
418
+ .eds-form-control__prepend, .eds-form-control__append {
419
+ position: relative;
420
+ line-height: inherit;
421
+ }
422
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
423
+ all: unset;
424
+ position: absolute;
425
+ display: flex;
426
+ align-items: center;
427
+ justify-content: center;
428
+ height: 1.5rem;
429
+ width: 1.5rem;
430
+ right: -2rem;
431
+ border-radius: 100%;
432
+ color: var(--primary-text-color);
433
+ cursor: pointer;
434
+ }
435
+ .eds-form-control__prepend {
436
+ margin-right: 0.75rem;
437
+ margin-left: 0;
438
+ }
439
+ .eds-form-control__append {
440
+ margin-right: 0;
441
+ margin-left: 0.75rem;
442
+ }
543
443
  /* DO NOT CHANGE!*/
544
444
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
545
445
  .eds-form-component--radio__container {
@@ -624,122 +524,104 @@
624
524
  }
625
525
  /* DO NOT CHANGE!*/
626
526
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
627
- .eds-switch {
628
- cursor: pointer;
629
- -webkit-user-select: none;
630
- -moz-user-select: none;
631
- user-select: none;
632
- padding: 0.5rem 0;
633
- width: -moz-fit-content;
634
- width: fit-content;
635
- }
636
- .eds-switch input {
637
- opacity: 0;
638
- pointer-events: none;
639
- position: absolute;
640
- }
641
- .eds-switch--right {
642
- display: flex;
643
- flex-direction: row;
644
- align-items: center;
645
- }
646
- .eds-switch--bottom {
647
- display: flex;
648
- flex-direction: column;
649
- align-items: center;
650
- }
651
- .eds-switch__circle {
652
- border-radius: 50%;
653
- height: 1.25rem;
654
- width: 1.25rem;
655
- content: "";
656
- display: flex;
657
- align-items: center;
658
- justify-content: center;
659
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
660
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
661
- background-color: var(--components-form-switch-standard-switch);
662
- top: 0.125rem;
663
- left: 0.125rem;
664
- position: relative;
665
- }
666
- .eds-switch__switch--large .eds-switch__circle {
667
- height: 1.75rem;
668
- width: 1.75rem;
669
- }
670
- .eds-contrast .eds-switch__circle {
671
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
672
- }
673
- .eds-switch__switch {
674
- position: relative;
675
- background-color: var(--components-form-switch-standard-fill-false);
676
- content: "";
527
+ .eds-input-group {
528
+ color: inherit;
677
529
  display: block;
678
- transition: background-color 0.1s ease-in-out;
679
- height: 1.5rem;
680
- width: 3rem;
681
- border-radius: 1.5rem;
682
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
683
- }
684
- .eds-contrast .eds-switch__switch {
685
- background-color: var(--components-form-switch-contrast-fill-false);
686
- }
687
- .eds-switch--right .eds-switch__switch {
688
- margin-right: 0.75rem;
530
+ position: relative;
689
531
  }
690
- .eds-switch__switch svg g,
691
- .eds-switch__switch path {
692
- fill: var(--components-form-switch-standard-icon-false);
693
- transition: fill ease-in-out 0.1s;
532
+ .eds-input-group__label {
533
+ color: var(--components-form-baseform-standard-text-label);
534
+ display: flex;
535
+ font-size: 1rem;
536
+ position: absolute;
537
+ line-height: 1rem;
538
+ height: 3rem;
539
+ padding-left: 0;
540
+ top: 1rem;
541
+ 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;
542
+ -webkit-user-select: none;
543
+ -moz-user-select: none;
544
+ user-select: none;
545
+ pointer-events: none;
694
546
  }
695
- .eds-contrast .eds-switch__switch svg g,
696
- .eds-contrast .eds-switch__switch path {
697
- fill: var(--components-form-switch-contrast-icon-false);
547
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
548
+ top: 0.375rem;
549
+ font-size: 0.75rem;
550
+ line-height: 0.75rem;
551
+ height: 10px;
552
+ padding: 0;
698
553
  }
699
- :checked + .eds-switch__switch {
700
- background-color: var(--eds-switch-color);
554
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
555
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
556
+ background: var(--textarea-label-background);
557
+ width: calc(100% - 1rem - 1rem - 4px);
701
558
  }
702
- :checked + .eds-switch__switch .eds-switch__circle {
703
- left: 1.625rem;
559
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
560
+ top: 0.5rem;
561
+ font-size: 0.875rem;
562
+ line-height: 1rem;
563
+ padding: 0;
704
564
  }
705
- :checked + .eds-switch__switch .eds-switch__circle svg g,
706
- :checked + .eds-switch__switch .eds-switch__circle path {
707
- fill: var(--eds-switch-color);
565
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
566
+ top: 0.75rem;
567
+ font-size: 1.5rem;
568
+ line-height: 2.25rem;
708
569
  }
709
- .eds-contrast :checked + .eds-switch__switch {
710
- background-color: var(--eds-switch-contrast-color);
570
+ .eds-input-group__label--filled {
571
+ top: 0.375rem;
572
+ font-size: 0.75rem;
573
+ line-height: 0.75rem;
574
+ height: 10px;
575
+ padding: 0;
711
576
  }
712
- :focus + .eds-switch__switch {
713
- outline: 2px solid #181c56;
714
- outline-color: var(--basecolors-stroke-focus-standard);
715
- outline-offset: 0.125rem;
577
+ .eds-textarea__label .eds-input-group__label--filled {
578
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
579
+ background: var(--textarea-label-background);
580
+ width: calc(100% - 1rem - 1rem - 4px);
716
581
  }
717
- .eds-contrast :focus + .eds-switch__switch {
718
- outline-color: var(--basecolors-stroke-focus-contrast);
582
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
583
+ top: 0.5rem;
584
+ font-size: 0.875rem;
585
+ line-height: 1rem;
586
+ padding: 0;
719
587
  }
720
- .eds-switch__switch--large {
721
- width: 3.75rem;
722
- height: 2rem;
723
- border-radius: 3.75rem;
588
+
589
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
590
+ top: 0.375rem;
591
+ font-size: 0.75rem;
592
+ line-height: 0.75rem;
593
+ height: 10px;
594
+ padding: 0;
724
595
  }
725
- :checked + .eds-switch__switch--large .eds-switch__circle {
726
- left: 1.875rem;
596
+
597
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
598
+ top: 0.375rem;
599
+ font-size: 0.75rem;
600
+ line-height: 0.75rem;
601
+ height: 10px;
602
+ padding: 0;
727
603
  }
728
- .eds-switch__switch--large svg {
729
- position: relative;
730
- right: 0.05rem;
604
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
605
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
606
+ background: var(--textarea-label-background);
607
+ width: calc(100% - 1rem - 1rem - 4px);
731
608
  }
732
- .eds-switch__label--large--right {
733
- font-size: 1rem;
609
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
610
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
611
+ background: var(--textarea-label-background);
612
+ width: calc(100% - 1rem - 1rem - 4px);
734
613
  }
735
- .eds-switch__label--large--bottom {
614
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
615
+ top: 0.5rem;
736
616
  font-size: 0.875rem;
617
+ line-height: 1rem;
618
+ padding: 0;
737
619
  }
738
- .eds-switch__label--medium--right {
620
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
621
+ top: 0.5rem;
739
622
  font-size: 0.875rem;
740
- }
741
- .eds-switch__label--medium--bottom {
742
- font-size: 0.75rem;
623
+ line-height: 1rem;
624
+ padding: 0;
743
625
  }
744
626
  /* DO NOT CHANGE!*/
745
627
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -897,10 +779,124 @@ input:disabled + .eds-input-panel__container {
897
779
  margin-top: 0.25rem;
898
780
  word-wrap: break-word;
899
781
  }
900
- .eds-fieldset {
901
- margin: 0;
902
- padding: 0;
903
- border: 0;
782
+ /* DO NOT CHANGE!*/
783
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
784
+ .eds-switch {
785
+ cursor: pointer;
786
+ -webkit-user-select: none;
787
+ -moz-user-select: none;
788
+ user-select: none;
789
+ padding: 0.5rem 0;
790
+ width: -moz-fit-content;
791
+ width: fit-content;
792
+ }
793
+ .eds-switch input {
794
+ opacity: 0;
795
+ pointer-events: none;
796
+ position: absolute;
797
+ }
798
+ .eds-switch--right {
799
+ display: flex;
800
+ flex-direction: row;
801
+ align-items: center;
802
+ }
803
+ .eds-switch--bottom {
804
+ display: flex;
805
+ flex-direction: column;
806
+ align-items: center;
807
+ }
808
+ .eds-switch__circle {
809
+ border-radius: 50%;
810
+ height: 1.25rem;
811
+ width: 1.25rem;
812
+ content: "";
813
+ display: flex;
814
+ align-items: center;
815
+ justify-content: center;
816
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
817
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
818
+ background-color: var(--components-form-switch-standard-switch);
819
+ top: 0.125rem;
820
+ left: 0.125rem;
821
+ position: relative;
822
+ }
823
+ .eds-switch__switch--large .eds-switch__circle {
824
+ height: 1.75rem;
825
+ width: 1.75rem;
826
+ }
827
+ .eds-contrast .eds-switch__circle {
828
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
829
+ }
830
+ .eds-switch__switch {
831
+ position: relative;
832
+ background-color: var(--components-form-switch-standard-fill-false);
833
+ content: "";
834
+ display: block;
835
+ transition: background-color 0.1s ease-in-out;
836
+ height: 1.5rem;
837
+ width: 3rem;
838
+ border-radius: 1.5rem;
839
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
840
+ }
841
+ .eds-contrast .eds-switch__switch {
842
+ background-color: var(--components-form-switch-contrast-fill-false);
843
+ }
844
+ .eds-switch--right .eds-switch__switch {
845
+ margin-right: 0.75rem;
846
+ }
847
+ .eds-switch__switch svg g,
848
+ .eds-switch__switch path {
849
+ fill: var(--components-form-switch-standard-icon-false);
850
+ transition: fill ease-in-out 0.1s;
851
+ }
852
+ .eds-contrast .eds-switch__switch svg g,
853
+ .eds-contrast .eds-switch__switch path {
854
+ fill: var(--components-form-switch-contrast-icon-false);
855
+ }
856
+ :checked + .eds-switch__switch {
857
+ background-color: var(--eds-switch-color);
858
+ }
859
+ :checked + .eds-switch__switch .eds-switch__circle {
860
+ left: 1.625rem;
861
+ }
862
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
863
+ :checked + .eds-switch__switch .eds-switch__circle path {
864
+ fill: var(--eds-switch-color);
865
+ }
866
+ .eds-contrast :checked + .eds-switch__switch {
867
+ background-color: var(--eds-switch-contrast-color);
868
+ }
869
+ :focus + .eds-switch__switch {
870
+ outline: 2px solid #181c56;
871
+ outline-color: var(--basecolors-stroke-focus-standard);
872
+ outline-offset: 0.125rem;
873
+ }
874
+ .eds-contrast :focus + .eds-switch__switch {
875
+ outline-color: var(--basecolors-stroke-focus-contrast);
876
+ }
877
+ .eds-switch__switch--large {
878
+ width: 3.75rem;
879
+ height: 2rem;
880
+ border-radius: 3.75rem;
881
+ }
882
+ :checked + .eds-switch__switch--large .eds-switch__circle {
883
+ left: 1.875rem;
884
+ }
885
+ .eds-switch__switch--large svg {
886
+ position: relative;
887
+ right: 0.05rem;
888
+ }
889
+ .eds-switch__label--large--right {
890
+ font-size: 1rem;
891
+ }
892
+ .eds-switch__label--large--bottom {
893
+ font-size: 0.875rem;
894
+ }
895
+ .eds-switch__label--medium--right {
896
+ font-size: 0.875rem;
897
+ }
898
+ .eds-switch__label--medium--bottom {
899
+ font-size: 0.75rem;
904
900
  }
905
901
  /* DO NOT CHANGE!*/
906
902
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -909,6 +905,11 @@ textarea.eds-form-control.eds-textarea {
909
905
  resize: vertical;
910
906
  line-height: 1.5rem;
911
907
  }
908
+
909
+ .eds-textarea__wrapper .eds-form-control-wrapper {
910
+ padding-right: 0;
911
+ cursor: text;
912
+ }
912
913
  /* DO NOT CHANGE!*/
913
914
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
914
915
  .eds-textfield__clear-button {
@@ -947,6 +948,21 @@ textarea.eds-form-control.eds-textarea {
947
948
  .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
948
949
  background-color: var(--components-form-baseform-contrast-icon);
949
950
  }
951
+
952
+ .eds-textfield__wrapper {
953
+ cursor: text;
954
+ }
955
+ /* DO NOT CHANGE!*/
956
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
957
+ .eds-segmented-control {
958
+ margin-top: 0.25rem;
959
+ display: flex;
960
+ background: var(--components-form-segmentedcontrol-standard-background);
961
+ border-radius: 0.5rem;
962
+ }
963
+ .eds-contrast .eds-segmented-control {
964
+ background: var(--components-form-segmentedcontrol-contrast-background);
965
+ }
950
966
  /* DO NOT CHANGE!*/
951
967
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
952
968
  .eds-segmented-choice {
@@ -1031,17 +1047,6 @@ textarea.eds-form-control.eds-textarea {
1031
1047
  }
1032
1048
  /* DO NOT CHANGE!*/
1033
1049
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1034
- .eds-segmented-control {
1035
- margin-top: 0.25rem;
1036
- display: flex;
1037
- background: var(--components-form-segmentedcontrol-standard-background);
1038
- border-radius: 0.5rem;
1039
- }
1040
- .eds-contrast .eds-segmented-control {
1041
- background: var(--components-form-segmentedcontrol-contrast-background);
1042
- }
1043
- /* DO NOT CHANGE!*/
1044
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1045
1050
  /* DO NOT CHANGE!*/
1046
1051
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1047
1052
  /* DO NOT CHANGE!*/