@entur/form 7.0.36 → 7.0.37

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 +433 -433
  2. package/package.json +3 -3
package/dist/styles.css CHANGED
@@ -1,54 +1,244 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-feedback-text {
4
- display: flex;
3
+ .eds-form-control-wrapper {
4
+ --border-color: #7C7F9F;
5
+ --border-color-hover: #aeb7e2;
5
6
  align-items: center;
6
- margin-top: 0.25rem;
7
+ background-color: #ffffff;
8
+ border-radius: 0.25rem;
9
+ border: 0.125rem solid var(--border-color);
10
+ box-shadow: 0 0 0 transparent;
11
+ color: #181c56;
12
+ display: flex;
13
+ position: relative;
14
+ width: 100%;
15
+ min-height: 3rem;
16
+ transition: border-color 0.1s ease-in-out;
17
+ --textarea-label-background: t.$colors-brand-white;
18
+ /*
19
+ Some input controls require a darker design while inside a contrast block.
20
+ These elements require the `--dark` modifier, even on the wrapper.
21
+ */
7
22
  }
8
- .eds-feedback-text--info {
9
- padding-left: calc(1rem + 0.125rem);
23
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
24
+ --border-color: #181c56;
10
25
  }
11
- .eds-feedback-text__text {
12
- color: #181c56;
26
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
27
+ --border-color: #181c56;
13
28
  }
14
- .eds-contrast .eds-feedback-text__text {
29
+ .eds-contrast .eds-form-control-wrapper:hover {
30
+ --border-color: #aeb7e2;
31
+ }
32
+ .eds-form-control-wrapper[focus-within] {
33
+ box-shadow: inset 0 0 0 1px var(--border-color);
34
+ }
35
+ .eds-form-control-wrapper:focus-within {
36
+ box-shadow: inset 0 0 0 1px var(--border-color);
37
+ }
38
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
39
+ --border-color: #181c56;
40
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
41
+ }
42
+ .eds-contrast .eds-form-control-wrapper:focus-within {
43
+ --border-color: #181c56;
44
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
45
+ }
46
+ .eds-form-control-wrapper ::-moz-placeholder {
47
+ color: #656782;
48
+ }
49
+ .eds-form-control-wrapper ::placeholder {
50
+ color: #656782;
51
+ }
52
+ .eds-form-control-wrapper--disabled {
53
+ --border-color: transparent;
54
+ background-color: #e9e9e9;
55
+ pointer-events: none;
56
+ color: #646464;
57
+ }
58
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
59
+ color: #646464;
60
+ }
61
+ .eds-contrast .eds-form-control-wrapper--disabled {
62
+ background: #292b6a;
63
+ color: #8285a8;
64
+ }
65
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
66
+ color: #8285a8;
67
+ }
68
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
69
+ display: none;
70
+ }
71
+ .eds-form-control-wrapper--readonly {
72
+ --border-color: transparent;
73
+ --textarea-label-background: t.$colors-greys-grey90;
74
+ pointer-events: none;
75
+ cursor: default;
76
+ background: #f8f8f8;
77
+ }
78
+ .eds-contrast .eds-form-control-wrapper--readonly {
79
+ --textarea-label-background: t.$colors-blues-blue10;
80
+ background: #292b6a;
15
81
  color: #ffffff;
16
82
  }
17
-
18
- .eds-feedback-text__icon {
83
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
84
+ color: #aeb7e2;
85
+ }
86
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
87
+ display: none;
88
+ }
89
+ .eds-form-control-wrapper--size-medium .eds-form-control,
90
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
91
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
92
+ font-size: 1rem;
93
+ line-height: 1rem;
94
+ }
95
+ .eds-form-control-wrapper--size-large {
96
+ min-height: 4rem;
97
+ padding: 0 0.5rem;
98
+ }
99
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
100
+ border-width: 0.25rem;
101
+ }
102
+ .eds-form-control-wrapper--size-large .eds-form-control,
103
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
104
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
19
105
  font-size: 1.5rem;
20
- min-height: 1.5rem;
21
- min-width: 1.5rem;
22
- padding-right: 0.5rem;
23
- position: relative;
24
- top: -0.1rem;
106
+ line-height: 2.25rem;
25
107
  }
26
- .eds-feedback-text__icon--success {
27
- color: #1a8e60;
108
+ .eds-form-control-wrapper--success {
109
+ border-color: #1a8e60;
110
+ --border-color: #1a8e60;
28
111
  }
29
- .eds-contrast .eds-feedback-text__icon--success {
30
- color: #5ac39a;
112
+ .eds-form-control-wrapper--success:hover {
113
+ border-color: #5ac39a;
31
114
  }
32
- .eds-feedback-text__icon--error {
33
- color: #d31b1b;
115
+ .eds-form-control-wrapper--success[focus-within] {
116
+ border-color: #1a8e60;
34
117
  }
35
- .eds-contrast .eds-feedback-text__icon--error {
36
- color: #ff9494;
118
+ .eds-form-control-wrapper--success:focus-within {
119
+ border-color: #1a8e60;
37
120
  }
38
- .eds-feedback-text__icon--info {
39
- color: #0082b9;
121
+ .eds-contrast .eds-form-control-wrapper--success {
122
+ border-color: #5ac39a;
123
+ --border-color: #5ac39a;
40
124
  }
41
- .eds-contrast .eds-feedback-text__icon--info {
42
- color: #64b3e7;
125
+ .eds-contrast .eds-form-control-wrapper--success:hover {
126
+ border-color: #1a8e60;
43
127
  }
44
- .eds-feedback-text__icon--warning {
45
- color: #ffca28;
128
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
129
+ --border-color: #5ac39a;
130
+ border-color: #181c56;
46
131
  }
47
- .eds-feedback-text__icon--warning circle {
48
- fill: #181c56;
132
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
133
+ --border-color: #5ac39a;
134
+ border-color: #181c56;
49
135
  }
50
- .eds-contrast .eds-feedback-text__icon--warning {
51
- color: #ffe082;
136
+ .eds-form-control-wrapper--error {
137
+ border-color: #d31b1b;
138
+ --border-color: #d31b1b;
139
+ }
140
+ .eds-form-control-wrapper--error:hover {
141
+ border-color: #ff9494;
142
+ }
143
+ .eds-form-control-wrapper--error[focus-within] {
144
+ border-color: #d31b1b;
145
+ }
146
+ .eds-form-control-wrapper--error:focus-within {
147
+ border-color: #d31b1b;
148
+ }
149
+ .eds-contrast .eds-form-control-wrapper--error {
150
+ border-color: #ff9494;
151
+ --border-color: #ff9494;
152
+ }
153
+ .eds-contrast .eds-form-control-wrapper--error:hover {
154
+ border-color: #d31b1b;
155
+ }
156
+ .eds-contrast .eds-form-control-wrapper--error[focus-within] {
157
+ border-color: #181c56;
158
+ --border-color: #ff9494;
159
+ }
160
+ .eds-contrast .eds-form-control-wrapper--error:focus-within {
161
+ border-color: #181c56;
162
+ --border-color: #ff9494;
163
+ }
164
+ .eds-contrast .eds-form-control-wrapper--dark {
165
+ background-color: #181c56;
166
+ color: #ffffff;
167
+ }
168
+ .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
169
+ color: #aeb7e2;
170
+ }
171
+ .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
172
+ color: #aeb7e2;
173
+ }
174
+ .eds-contrast .eds-form-control-wrapper--dark:hover {
175
+ border-color: #aeb7e2;
176
+ }
177
+ .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
178
+ background-color: #292b6a;
179
+ border-color: #aeb7e2;
180
+ }
181
+ .eds-contrast .eds-form-control-wrapper--dark:focus-within {
182
+ background-color: #292b6a;
183
+ border-color: #aeb7e2;
184
+ }
185
+ .eds-contrast .eds-form-control-wrapper--dark * {
186
+ background-color: transparent;
187
+ color: inherit;
188
+ }
189
+ .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
190
+ background-color: #292b6a;
191
+ color: #8285a8;
192
+ }
193
+
194
+ .eds-form-control {
195
+ -webkit-appearance: none;
196
+ -moz-appearance: none;
197
+ appearance: none;
198
+ background-color: transparent;
199
+ border: 0;
200
+ color: inherit;
201
+ display: block;
202
+ font-family: inherit;
203
+ line-height: 1rem;
204
+ font-size: 1rem;
205
+ padding: 20px 1rem 0.25rem;
206
+ width: 100%;
207
+ }
208
+ .eds-form-control::-moz-placeholder {
209
+ opacity: 0;
210
+ -moz-transition: opacity 0.2s ease-in-out;
211
+ transition: opacity 0.2s ease-in-out;
212
+ }
213
+ .eds-form-control::placeholder {
214
+ opacity: 0;
215
+ transition: opacity 0.2s ease-in-out;
216
+ }
217
+ .eds-form-control:focus {
218
+ outline: none;
219
+ }
220
+ .eds-form-control:focus::-moz-placeholder {
221
+ opacity: 1;
222
+ }
223
+ .eds-form-control:focus::placeholder {
224
+ opacity: 1;
225
+ }
226
+ .eds-form-control__prepend, .eds-form-control__append {
227
+ position: relative;
228
+ margin: 0 1rem;
229
+ line-height: inherit;
230
+ }
231
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
232
+ position: static;
233
+ }
234
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
235
+ top: 0.125rem;
236
+ }
237
+ .eds-form-control__prepend {
238
+ margin-right: 0;
239
+ }
240
+ .eds-form-control__append {
241
+ margin-left: 0;
52
242
  }
53
243
  /* DO NOT CHANGE!*/
54
244
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -214,6 +404,195 @@
214
404
  }
215
405
  /* DO NOT CHANGE!*/
216
406
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
407
+ .eds-feedback-text {
408
+ display: flex;
409
+ align-items: center;
410
+ margin-top: 0.25rem;
411
+ }
412
+ .eds-feedback-text--info {
413
+ padding-left: calc(1rem + 0.125rem);
414
+ }
415
+ .eds-feedback-text__text {
416
+ color: #181c56;
417
+ }
418
+ .eds-contrast .eds-feedback-text__text {
419
+ color: #ffffff;
420
+ }
421
+
422
+ .eds-feedback-text__icon {
423
+ font-size: 1.5rem;
424
+ min-height: 1.5rem;
425
+ min-width: 1.5rem;
426
+ padding-right: 0.5rem;
427
+ position: relative;
428
+ top: -0.1rem;
429
+ }
430
+ .eds-feedback-text__icon--success {
431
+ color: #1a8e60;
432
+ }
433
+ .eds-contrast .eds-feedback-text__icon--success {
434
+ color: #5ac39a;
435
+ }
436
+ .eds-feedback-text__icon--error {
437
+ color: #d31b1b;
438
+ }
439
+ .eds-contrast .eds-feedback-text__icon--error {
440
+ color: #ff9494;
441
+ }
442
+ .eds-feedback-text__icon--info {
443
+ color: #0082b9;
444
+ }
445
+ .eds-contrast .eds-feedback-text__icon--info {
446
+ color: #64b3e7;
447
+ }
448
+ .eds-feedback-text__icon--warning {
449
+ color: #ffca28;
450
+ }
451
+ .eds-feedback-text__icon--warning circle {
452
+ fill: #181c56;
453
+ }
454
+ .eds-contrast .eds-feedback-text__icon--warning {
455
+ color: #ffe082;
456
+ }
457
+ .eds-fieldset {
458
+ margin: 0;
459
+ padding: 0;
460
+ border: 0;
461
+ }
462
+ /* DO NOT CHANGE!*/
463
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
464
+ .eds-input-group {
465
+ color: inherit;
466
+ display: block;
467
+ position: relative;
468
+ }
469
+ .eds-input-group__label {
470
+ color: #656782;
471
+ display: flex;
472
+ font-size: 1rem;
473
+ position: absolute;
474
+ line-height: 1rem;
475
+ height: 3rem;
476
+ padding: 1rem;
477
+ padding-left: 0;
478
+ margin-left: 1rem;
479
+ top: -0.125rem;
480
+ 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;
481
+ -webkit-user-select: none;
482
+ -moz-user-select: none;
483
+ user-select: none;
484
+ pointer-events: none;
485
+ }
486
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
487
+ top: 0.375rem;
488
+ font-size: 0.75rem;
489
+ line-height: 0.75rem;
490
+ height: 10px;
491
+ padding: 0;
492
+ margin-left: 1rem;
493
+ }
494
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
495
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
496
+ background: var(--textarea-label-background);
497
+ width: calc(
498
+ 100% - 1rem - 1rem - 4px
499
+ );
500
+ }
501
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
502
+ top: 0.5rem;
503
+ font-size: 0.875rem;
504
+ line-height: 1rem;
505
+ padding: 0;
506
+ margin-left: 1rem;
507
+ }
508
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
509
+ color: #aeb7e2;
510
+ }
511
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
512
+ font-size: 1.5rem;
513
+ line-height: 2.25rem;
514
+ height: 4rem;
515
+ top: -0.25rem;
516
+ }
517
+ .eds-input-group__label--filled {
518
+ top: 0.375rem;
519
+ font-size: 0.75rem;
520
+ line-height: 0.75rem;
521
+ height: 10px;
522
+ padding: 0;
523
+ margin-left: 1rem;
524
+ }
525
+ .eds-textarea__label .eds-input-group__label--filled {
526
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
527
+ background: var(--textarea-label-background);
528
+ width: calc(
529
+ 100% - 1rem - 1rem - 4px
530
+ );
531
+ }
532
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
533
+ top: 0.5rem;
534
+ font-size: 0.875rem;
535
+ line-height: 1rem;
536
+ padding: 0;
537
+ margin-left: 1rem;
538
+ }
539
+ .eds-input-group__label-tooltip-icon {
540
+ color: #0082b9;
541
+ padding-left: 0.25rem;
542
+ padding-right: 0.25rem;
543
+ display: flex;
544
+ align-items: center;
545
+ cursor: help;
546
+ font-size: 1rem;
547
+ }
548
+
549
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
550
+ top: 0.375rem;
551
+ font-size: 0.75rem;
552
+ line-height: 0.75rem;
553
+ height: 10px;
554
+ padding: 0;
555
+ margin-left: 1rem;
556
+ }
557
+
558
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
559
+ top: 0.375rem;
560
+ font-size: 0.75rem;
561
+ line-height: 0.75rem;
562
+ height: 10px;
563
+ padding: 0;
564
+ margin-left: 1rem;
565
+ }
566
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
567
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
568
+ background: var(--textarea-label-background);
569
+ width: calc(
570
+ 100% - 1rem - 1rem - 4px
571
+ );
572
+ }
573
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
574
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
575
+ background: var(--textarea-label-background);
576
+ width: calc(
577
+ 100% - 1rem - 1rem - 4px
578
+ );
579
+ }
580
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
581
+ top: 0.5rem;
582
+ font-size: 0.875rem;
583
+ line-height: 1rem;
584
+ padding: 0;
585
+ margin-left: 1rem;
586
+ }
587
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
588
+ top: 0.5rem;
589
+ font-size: 0.875rem;
590
+ line-height: 1rem;
591
+ padding: 0;
592
+ margin-left: 1rem;
593
+ }
594
+ /* DO NOT CHANGE!*/
595
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
217
596
  .eds-switch {
218
597
  cursor: pointer;
219
598
  -webkit-user-select: none;
@@ -421,164 +800,32 @@
421
800
  }
422
801
  /* DO NOT CHANGE!*/
423
802
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
424
- .eds-input-group {
425
- color: inherit;
426
- display: block;
427
- position: relative;
803
+ .eds-input-panel[focus-within] .eds-input-panel__container {
804
+ border-color: #181c56;
805
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
428
806
  }
429
- .eds-input-group__label {
430
- color: #656782;
431
- display: flex;
432
- font-size: 1rem;
433
- position: absolute;
434
- line-height: 1rem;
435
- height: 3rem;
436
- padding: 1rem;
437
- padding-left: 0;
438
- margin-left: 1rem;
439
- top: -0.125rem;
440
- 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;
441
- -webkit-user-select: none;
442
- -moz-user-select: none;
443
- user-select: none;
444
- pointer-events: none;
807
+ .eds-input-panel:focus-within .eds-input-panel__container {
808
+ border-color: #181c56;
809
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
445
810
  }
446
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
447
- top: 0.375rem;
448
- font-size: 0.75rem;
449
- line-height: 0.75rem;
450
- height: 10px;
451
- padding: 0;
452
- margin-left: 1rem;
811
+ .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
812
+ border-color: #ffffff;
813
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
453
814
  }
454
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
455
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
456
- background: var(--textarea-label-background);
457
- width: calc(
458
- 100% - 1rem - 1rem - 4px
459
- );
815
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
816
+ border-color: #ffffff;
817
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
460
818
  }
461
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
462
- top: 0.5rem;
463
- font-size: 0.875rem;
464
- line-height: 1rem;
465
- padding: 0;
466
- margin-left: 1rem;
819
+ .eds-input-panel > input {
820
+ position: absolute;
821
+ opacity: 0;
822
+ cursor: pointer;
823
+ height: 0;
824
+ width: 0;
467
825
  }
468
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
469
- color: #aeb7e2;
470
- }
471
- .eds-form-control-wrapper--size-large .eds-input-group__label {
472
- font-size: 1.5rem;
473
- line-height: 2.25rem;
474
- height: 4rem;
475
- top: -0.25rem;
476
- }
477
- .eds-input-group__label--filled {
478
- top: 0.375rem;
479
- font-size: 0.75rem;
480
- line-height: 0.75rem;
481
- height: 10px;
482
- padding: 0;
483
- margin-left: 1rem;
484
- }
485
- .eds-textarea__label .eds-input-group__label--filled {
486
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
487
- background: var(--textarea-label-background);
488
- width: calc(
489
- 100% - 1rem - 1rem - 4px
490
- );
491
- }
492
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
493
- top: 0.5rem;
494
- font-size: 0.875rem;
495
- line-height: 1rem;
496
- padding: 0;
497
- margin-left: 1rem;
498
- }
499
- .eds-input-group__label-tooltip-icon {
500
- color: #0082b9;
501
- padding-left: 0.25rem;
502
- padding-right: 0.25rem;
503
- display: flex;
504
- align-items: center;
505
- cursor: help;
506
- font-size: 1rem;
507
- }
508
-
509
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
510
- top: 0.375rem;
511
- font-size: 0.75rem;
512
- line-height: 0.75rem;
513
- height: 10px;
514
- padding: 0;
515
- margin-left: 1rem;
516
- }
517
-
518
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
519
- top: 0.375rem;
520
- font-size: 0.75rem;
521
- line-height: 0.75rem;
522
- height: 10px;
523
- padding: 0;
524
- margin-left: 1rem;
525
- }
526
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
527
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
528
- background: var(--textarea-label-background);
529
- width: calc(
530
- 100% - 1rem - 1rem - 4px
531
- );
532
- }
533
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
534
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
535
- background: var(--textarea-label-background);
536
- width: calc(
537
- 100% - 1rem - 1rem - 4px
538
- );
539
- }
540
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
541
- top: 0.5rem;
542
- font-size: 0.875rem;
543
- line-height: 1rem;
544
- padding: 0;
545
- margin-left: 1rem;
546
- }
547
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
548
- top: 0.5rem;
549
- font-size: 0.875rem;
550
- line-height: 1rem;
551
- padding: 0;
552
- margin-left: 1rem;
553
- }
554
- /* DO NOT CHANGE!*/
555
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
556
- .eds-input-panel[focus-within] .eds-input-panel__container {
557
- border-color: #181c56;
558
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
559
- }
560
- .eds-input-panel:focus-within .eds-input-panel__container {
561
- border-color: #181c56;
562
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
563
- }
564
- .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
565
- border-color: #ffffff;
566
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
567
- }
568
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
569
- border-color: #ffffff;
570
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
571
- }
572
- .eds-input-panel > input {
573
- position: absolute;
574
- opacity: 0;
575
- cursor: pointer;
576
- height: 0;
577
- width: 0;
578
- }
579
- .eds-input-panel > input:checked + .eds-input-panel__container {
580
- border-color: #181c56;
581
- background: #f5f5f8;
826
+ .eds-input-panel > input:checked + .eds-input-panel__container {
827
+ border-color: #181c56;
828
+ background: #f5f5f8;
582
829
  }
583
830
  .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
584
831
  border-color: #aeb7e2;
@@ -715,253 +962,6 @@ input:disabled + .eds-input-panel__container {
715
962
  }
716
963
  /* DO NOT CHANGE!*/
717
964
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
718
- .eds-form-control-wrapper {
719
- --border-color: #7C7F9F;
720
- --border-color-hover: #aeb7e2;
721
- align-items: center;
722
- background-color: #ffffff;
723
- border-radius: 0.25rem;
724
- border: 0.125rem solid var(--border-color);
725
- box-shadow: 0 0 0 transparent;
726
- color: #181c56;
727
- display: flex;
728
- position: relative;
729
- width: 100%;
730
- min-height: 3rem;
731
- transition: border-color 0.1s ease-in-out;
732
- --textarea-label-background: t.$colors-brand-white;
733
- /*
734
- Some input controls require a darker design while inside a contrast block.
735
- These elements require the `--dark` modifier, even on the wrapper.
736
- */
737
- }
738
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
739
- --border-color: #181c56;
740
- }
741
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
742
- --border-color: #181c56;
743
- }
744
- .eds-contrast .eds-form-control-wrapper:hover {
745
- --border-color: #aeb7e2;
746
- }
747
- .eds-form-control-wrapper[focus-within] {
748
- box-shadow: inset 0 0 0 1px var(--border-color);
749
- }
750
- .eds-form-control-wrapper:focus-within {
751
- box-shadow: inset 0 0 0 1px var(--border-color);
752
- }
753
- .eds-contrast .eds-form-control-wrapper[focus-within] {
754
- --border-color: #181c56;
755
- box-shadow: 0 0 0 0.125rem #aeb7e2;
756
- }
757
- .eds-contrast .eds-form-control-wrapper:focus-within {
758
- --border-color: #181c56;
759
- box-shadow: 0 0 0 0.125rem #aeb7e2;
760
- }
761
- .eds-form-control-wrapper ::-moz-placeholder {
762
- color: #656782;
763
- }
764
- .eds-form-control-wrapper ::placeholder {
765
- color: #656782;
766
- }
767
- .eds-form-control-wrapper--disabled {
768
- --border-color: transparent;
769
- background-color: #e9e9e9;
770
- pointer-events: none;
771
- color: #646464;
772
- }
773
- .eds-form-control-wrapper--disabled .eds-input-group__label {
774
- color: #646464;
775
- }
776
- .eds-contrast .eds-form-control-wrapper--disabled {
777
- background: #292b6a;
778
- color: #8285a8;
779
- }
780
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
781
- color: #8285a8;
782
- }
783
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
784
- display: none;
785
- }
786
- .eds-form-control-wrapper--readonly {
787
- --border-color: transparent;
788
- --textarea-label-background: t.$colors-greys-grey90;
789
- pointer-events: none;
790
- cursor: default;
791
- background: #f8f8f8;
792
- }
793
- .eds-contrast .eds-form-control-wrapper--readonly {
794
- --textarea-label-background: t.$colors-blues-blue10;
795
- background: #292b6a;
796
- color: #ffffff;
797
- }
798
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
799
- color: #aeb7e2;
800
- }
801
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
802
- display: none;
803
- }
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;
809
- }
810
- .eds-form-control-wrapper--size-large {
811
- min-height: 4rem;
812
- padding: 0 0.5rem;
813
- }
814
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
815
- border-width: 0.25rem;
816
- }
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;
822
- }
823
- .eds-form-control-wrapper--success {
824
- border-color: #1a8e60;
825
- --border-color: #1a8e60;
826
- }
827
- .eds-form-control-wrapper--success:hover {
828
- border-color: #5ac39a;
829
- }
830
- .eds-form-control-wrapper--success[focus-within] {
831
- border-color: #1a8e60;
832
- }
833
- .eds-form-control-wrapper--success:focus-within {
834
- border-color: #1a8e60;
835
- }
836
- .eds-contrast .eds-form-control-wrapper--success {
837
- border-color: #5ac39a;
838
- --border-color: #5ac39a;
839
- }
840
- .eds-contrast .eds-form-control-wrapper--success:hover {
841
- border-color: #1a8e60;
842
- }
843
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
844
- --border-color: #5ac39a;
845
- border-color: #181c56;
846
- }
847
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
848
- --border-color: #5ac39a;
849
- border-color: #181c56;
850
- }
851
- .eds-form-control-wrapper--error {
852
- border-color: #d31b1b;
853
- --border-color: #d31b1b;
854
- }
855
- .eds-form-control-wrapper--error:hover {
856
- border-color: #ff9494;
857
- }
858
- .eds-form-control-wrapper--error[focus-within] {
859
- border-color: #d31b1b;
860
- }
861
- .eds-form-control-wrapper--error:focus-within {
862
- border-color: #d31b1b;
863
- }
864
- .eds-contrast .eds-form-control-wrapper--error {
865
- border-color: #ff9494;
866
- --border-color: #ff9494;
867
- }
868
- .eds-contrast .eds-form-control-wrapper--error:hover {
869
- border-color: #d31b1b;
870
- }
871
- .eds-contrast .eds-form-control-wrapper--error[focus-within] {
872
- border-color: #181c56;
873
- --border-color: #ff9494;
874
- }
875
- .eds-contrast .eds-form-control-wrapper--error:focus-within {
876
- border-color: #181c56;
877
- --border-color: #ff9494;
878
- }
879
- .eds-contrast .eds-form-control-wrapper--dark {
880
- background-color: #181c56;
881
- color: #ffffff;
882
- }
883
- .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
884
- color: #aeb7e2;
885
- }
886
- .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
887
- color: #aeb7e2;
888
- }
889
- .eds-contrast .eds-form-control-wrapper--dark:hover {
890
- border-color: #aeb7e2;
891
- }
892
- .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
893
- background-color: #292b6a;
894
- border-color: #aeb7e2;
895
- }
896
- .eds-contrast .eds-form-control-wrapper--dark:focus-within {
897
- background-color: #292b6a;
898
- border-color: #aeb7e2;
899
- }
900
- .eds-contrast .eds-form-control-wrapper--dark * {
901
- background-color: transparent;
902
- color: inherit;
903
- }
904
- .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
905
- background-color: #292b6a;
906
- color: #8285a8;
907
- }
908
-
909
- .eds-form-control {
910
- -webkit-appearance: none;
911
- -moz-appearance: none;
912
- appearance: none;
913
- background-color: transparent;
914
- border: 0;
915
- color: inherit;
916
- display: block;
917
- font-family: inherit;
918
- line-height: 1rem;
919
- font-size: 1rem;
920
- padding: 20px 1rem 0.25rem;
921
- width: 100%;
922
- }
923
- .eds-form-control::-moz-placeholder {
924
- opacity: 0;
925
- -moz-transition: opacity 0.2s ease-in-out;
926
- transition: opacity 0.2s ease-in-out;
927
- }
928
- .eds-form-control::placeholder {
929
- opacity: 0;
930
- transition: opacity 0.2s ease-in-out;
931
- }
932
- .eds-form-control:focus {
933
- outline: none;
934
- }
935
- .eds-form-control:focus::-moz-placeholder {
936
- opacity: 1;
937
- }
938
- .eds-form-control:focus::placeholder {
939
- opacity: 1;
940
- }
941
- .eds-form-control__prepend, .eds-form-control__append {
942
- position: relative;
943
- margin: 0 1rem;
944
- line-height: inherit;
945
- }
946
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
947
- position: static;
948
- }
949
- .eds-form-control__prepend svg, .eds-form-control__append svg {
950
- top: 0.125rem;
951
- }
952
- .eds-form-control__prepend {
953
- margin-right: 0;
954
- }
955
- .eds-form-control__append {
956
- margin-left: 0;
957
- }
958
- .eds-fieldset {
959
- margin: 0;
960
- padding: 0;
961
- border: 0;
962
- }
963
- /* DO NOT CHANGE!*/
964
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
965
965
  textarea.eds-form-control.eds-textarea {
966
966
  min-height: 7.75rem;
967
967
  resize: vertical;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.36",
3
+ "version": "7.0.37",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -29,10 +29,10 @@
29
29
  "dependencies": {
30
30
  "@entur/icons": "^6.15.0",
31
31
  "@entur/tokens": "^3.12.0",
32
- "@entur/tooltip": "^2.6.45",
32
+ "@entur/tooltip": "^2.6.46",
33
33
  "@entur/typography": "^1.8.23",
34
34
  "@entur/utils": "^0.10.0",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "3842f90322ff4340572e6597baf4ce753a6bf355"
37
+ "gitHead": "9e39bec18ebcbc0ea7b8c07239646eb766c8e23a"
38
38
  }