@entur/form 7.0.3 → 7.0.4
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/form.cjs.development.js +2 -1
- package/dist/form.cjs.development.js.map +1 -1
- package/dist/form.cjs.production.min.js +1 -1
- package/dist/form.cjs.production.min.js.map +1 -1
- package/dist/form.esm.js +2 -1
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +298 -298
- package/package.json +5 -5
package/dist/styles.css
CHANGED
|
@@ -3,196 +3,165 @@
|
|
|
3
3
|
}
|
|
4
4
|
/* DO NOT CHANGE!*/
|
|
5
5
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
|
-
.eds-
|
|
6
|
+
.eds-checkbox__container {
|
|
7
7
|
display: flex;
|
|
8
8
|
align-items: center;
|
|
9
|
-
|
|
9
|
+
position: relative;
|
|
10
|
+
-webkit-appearance: none;
|
|
11
|
+
-moz-appearance: none;
|
|
12
|
+
appearance: none;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
-webkit-user-select: none;
|
|
15
|
+
-moz-user-select: none;
|
|
16
|
+
user-select: none;
|
|
17
|
+
width: -moz-fit-content;
|
|
18
|
+
width: fit-content;
|
|
19
|
+
margin: 0.5rem 0;
|
|
10
20
|
}
|
|
11
|
-
.eds-
|
|
12
|
-
|
|
21
|
+
.eds-checkbox__container--reduced-click-area {
|
|
22
|
+
height: -moz-fit-content;
|
|
23
|
+
height: fit-content;
|
|
13
24
|
}
|
|
14
|
-
.eds-
|
|
15
|
-
|
|
25
|
+
.eds-checkbox__container input {
|
|
26
|
+
position: absolute;
|
|
27
|
+
opacity: 0;
|
|
28
|
+
height: 0;
|
|
29
|
+
width: 0;
|
|
16
30
|
}
|
|
17
|
-
.eds-
|
|
18
|
-
color: #
|
|
31
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
32
|
+
background-color: #181c56;
|
|
19
33
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
font-size: 1.5rem;
|
|
23
|
-
min-height: 1.5rem;
|
|
24
|
-
min-width: 1.5rem;
|
|
25
|
-
padding-right: 0.5rem;
|
|
26
|
-
position: relative;
|
|
27
|
-
top: -0.1rem;
|
|
34
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
35
|
+
visibility: visible;
|
|
28
36
|
}
|
|
29
|
-
.eds-
|
|
30
|
-
|
|
37
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
38
|
+
stroke: #ffffff;
|
|
39
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
31
40
|
}
|
|
32
|
-
.eds-
|
|
33
|
-
|
|
41
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
42
|
+
fill: #ffffff;
|
|
34
43
|
}
|
|
35
|
-
.eds-
|
|
36
|
-
|
|
44
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
45
|
+
opacity: 0.5;
|
|
37
46
|
}
|
|
38
|
-
.eds-
|
|
39
|
-
|
|
47
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
48
|
+
opacity: 0.5;
|
|
40
49
|
}
|
|
41
|
-
.eds-
|
|
42
|
-
|
|
50
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
51
|
+
opacity: 0.5;
|
|
43
52
|
}
|
|
44
|
-
.eds-
|
|
45
|
-
|
|
53
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
54
|
+
opacity: 0.5;
|
|
46
55
|
}
|
|
47
|
-
.eds-
|
|
48
|
-
|
|
56
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
57
|
+
opacity: 0.5;
|
|
49
58
|
}
|
|
50
|
-
.eds-
|
|
59
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
60
|
+
background-color: #aeb7e2;
|
|
61
|
+
}
|
|
62
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
63
|
+
stroke: #181c56;
|
|
64
|
+
}
|
|
65
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
51
66
|
fill: #181c56;
|
|
52
67
|
}
|
|
53
|
-
.eds-
|
|
54
|
-
color: #
|
|
68
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
69
|
+
border-color: #292b6a;
|
|
70
|
+
background-color: #d1d4e3;
|
|
55
71
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
margin: 0;
|
|
60
|
-
padding: 0;
|
|
61
|
-
border: 0;
|
|
72
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
73
|
+
border-color: #b6bee5;
|
|
74
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
62
75
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
color:
|
|
67
|
-
display: block;
|
|
68
|
-
position: relative;
|
|
76
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
77
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
78
|
+
border-color: transparent;
|
|
79
|
+
background-color: #54568c;
|
|
69
80
|
}
|
|
70
|
-
.eds-input-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
font-size: 1rem;
|
|
74
|
-
position: absolute;
|
|
75
|
-
line-height: 1rem;
|
|
76
|
-
height: 3rem;
|
|
77
|
-
padding: 1rem;
|
|
78
|
-
padding-left: 0;
|
|
79
|
-
margin-left: 1rem;
|
|
80
|
-
top: -0.125rem;
|
|
81
|
-
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;
|
|
82
|
-
-webkit-user-select: none;
|
|
83
|
-
-moz-user-select: none;
|
|
84
|
-
user-select: none;
|
|
85
|
-
pointer-events: none;
|
|
81
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
82
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
83
|
+
background-color: #b6bee5;
|
|
86
84
|
}
|
|
87
|
-
.eds-
|
|
88
|
-
|
|
89
|
-
font-size: 0.75rem;
|
|
90
|
-
line-height: 0.75rem;
|
|
91
|
-
height: 10px;
|
|
92
|
-
padding: 0;
|
|
93
|
-
margin-left: 1rem;
|
|
85
|
+
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
86
|
+
border-color: #16194d;
|
|
94
87
|
}
|
|
95
|
-
.eds-
|
|
96
|
-
|
|
97
|
-
background: var(--textarea-label-background);
|
|
98
|
-
width: calc(
|
|
99
|
-
100% - 1rem - 1rem - 4px
|
|
100
|
-
);
|
|
88
|
+
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
89
|
+
border-color: #9da5cb;
|
|
101
90
|
}
|
|
102
|
-
.eds-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
line-height: 1rem;
|
|
106
|
-
padding: 0;
|
|
107
|
-
margin-left: 1rem;
|
|
91
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
92
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
93
|
+
background-color: #16194d;
|
|
108
94
|
}
|
|
109
|
-
.eds-contrast .eds-input-
|
|
110
|
-
|
|
95
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
96
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
97
|
+
background-color: #9da5cb;
|
|
111
98
|
}
|
|
112
|
-
.eds-
|
|
113
|
-
|
|
99
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
100
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
101
|
+
outline: none;
|
|
102
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
103
|
+
outline-offset: 0.125rem;
|
|
114
104
|
}
|
|
115
|
-
.eds-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
105
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
106
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
107
|
+
outline: none;
|
|
108
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
109
|
+
outline-offset: 0.125rem;
|
|
119
110
|
}
|
|
120
|
-
.eds-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
line-height: 0.75rem;
|
|
124
|
-
height: 10px;
|
|
125
|
-
padding: 0;
|
|
126
|
-
margin-left: 1rem;
|
|
111
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
112
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
113
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
127
114
|
}
|
|
128
|
-
.eds-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
width: calc(
|
|
132
|
-
100% - 1rem - 1rem - 4px
|
|
133
|
-
);
|
|
115
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
116
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
117
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
134
118
|
}
|
|
135
|
-
.eds-
|
|
136
|
-
|
|
137
|
-
font-size: 0.875rem;
|
|
138
|
-
line-height: 1rem;
|
|
139
|
-
padding: 0;
|
|
140
|
-
margin-left: 1rem;
|
|
119
|
+
.eds-checkbox--disabled {
|
|
120
|
+
pointer-events: none;
|
|
141
121
|
}
|
|
142
|
-
.eds-
|
|
143
|
-
|
|
144
|
-
padding-left: 0.25rem;
|
|
145
|
-
padding-right: 0.25rem;
|
|
146
|
-
display: flex;
|
|
147
|
-
align-items: center;
|
|
148
|
-
cursor: help;
|
|
149
|
-
font-size: 1rem;
|
|
122
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
123
|
+
opacity: 0.5;
|
|
150
124
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
top: 0.375rem;
|
|
154
|
-
font-size: 0.75rem;
|
|
155
|
-
line-height: 0.75rem;
|
|
156
|
-
height: 10px;
|
|
157
|
-
padding: 0;
|
|
158
|
-
margin-left: 1rem;
|
|
125
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
126
|
+
opacity: 0.5;
|
|
159
127
|
}
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
128
|
+
.eds-checkbox__icon {
|
|
129
|
+
box-sizing: border-box;
|
|
130
|
+
display: inline-flex;
|
|
131
|
+
justify-content: center;
|
|
132
|
+
align-items: center;
|
|
133
|
+
position: relative;
|
|
134
|
+
margin-right: 1rem;
|
|
135
|
+
height: 1.25rem;
|
|
136
|
+
width: 1.25rem;
|
|
137
|
+
border: 0.125rem solid #181c56;
|
|
138
|
+
border-radius: 0.125rem;
|
|
139
|
+
background-color: transparent;
|
|
140
|
+
color: #ffffff;
|
|
141
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
168
142
|
}
|
|
169
|
-
.eds-
|
|
170
|
-
|
|
171
|
-
background: var(--textarea-label-background);
|
|
172
|
-
width: calc(
|
|
173
|
-
100% - 1rem - 1rem - 4px
|
|
174
|
-
);
|
|
143
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
144
|
+
margin-right: 0;
|
|
175
145
|
}
|
|
176
|
-
.eds-
|
|
177
|
-
|
|
178
|
-
background: var(--textarea-label-background);
|
|
179
|
-
width: calc(
|
|
180
|
-
100% - 1rem - 1rem - 4px
|
|
181
|
-
);
|
|
146
|
+
.eds-contrast .eds-checkbox__icon {
|
|
147
|
+
border-color: #aeb7e2;
|
|
182
148
|
}
|
|
183
|
-
.eds-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
padding: 0;
|
|
188
|
-
margin-left: 1rem;
|
|
149
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
150
|
+
height: 1rem;
|
|
151
|
+
width: 1rem;
|
|
152
|
+
visibility: hidden;
|
|
189
153
|
}
|
|
190
|
-
.eds-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
154
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
155
|
+
transform-origin: 50% 50%;
|
|
156
|
+
stroke-dasharray: 48;
|
|
157
|
+
stroke-dashoffset: 48;
|
|
158
|
+
stroke-width: 0.375rem;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@keyframes stroke {
|
|
162
|
+
100% {
|
|
163
|
+
stroke-dashoffset: 0;
|
|
164
|
+
}
|
|
196
165
|
}
|
|
197
166
|
/* DO NOT CHANGE!*/
|
|
198
167
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -439,165 +408,196 @@
|
|
|
439
408
|
}
|
|
440
409
|
/* DO NOT CHANGE!*/
|
|
441
410
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
442
|
-
.eds-
|
|
443
|
-
|
|
444
|
-
|
|
411
|
+
.eds-fieldset {
|
|
412
|
+
margin: 0;
|
|
413
|
+
padding: 0;
|
|
414
|
+
border: 0;
|
|
415
|
+
}
|
|
416
|
+
/* DO NOT CHANGE!*/
|
|
417
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
418
|
+
.eds-input-group {
|
|
419
|
+
color: inherit;
|
|
420
|
+
display: block;
|
|
445
421
|
position: relative;
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
422
|
+
}
|
|
423
|
+
.eds-input-group__label {
|
|
424
|
+
color: #656782;
|
|
425
|
+
display: flex;
|
|
426
|
+
font-size: 1rem;
|
|
427
|
+
position: absolute;
|
|
428
|
+
line-height: 1rem;
|
|
429
|
+
height: 3rem;
|
|
430
|
+
padding: 1rem;
|
|
431
|
+
padding-left: 0;
|
|
432
|
+
margin-left: 1rem;
|
|
433
|
+
top: -0.125rem;
|
|
434
|
+
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;
|
|
450
435
|
-webkit-user-select: none;
|
|
451
436
|
-moz-user-select: none;
|
|
452
437
|
user-select: none;
|
|
453
|
-
|
|
454
|
-
width: fit-content;
|
|
455
|
-
margin: 0.5rem 0;
|
|
456
|
-
}
|
|
457
|
-
.eds-checkbox__container--reduced-click-area {
|
|
458
|
-
height: -moz-fit-content;
|
|
459
|
-
height: fit-content;
|
|
460
|
-
}
|
|
461
|
-
.eds-checkbox__container input {
|
|
462
|
-
position: absolute;
|
|
463
|
-
opacity: 0;
|
|
464
|
-
height: 0;
|
|
465
|
-
width: 0;
|
|
466
|
-
}
|
|
467
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
468
|
-
background-color: #181c56;
|
|
469
|
-
}
|
|
470
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
471
|
-
visibility: visible;
|
|
472
|
-
}
|
|
473
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
474
|
-
stroke: #ffffff;
|
|
475
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
438
|
+
pointer-events: none;
|
|
476
439
|
}
|
|
477
|
-
.eds-
|
|
478
|
-
|
|
440
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
441
|
+
top: 0.375rem;
|
|
442
|
+
font-size: 0.75rem;
|
|
443
|
+
line-height: 0.75rem;
|
|
444
|
+
height: 10px;
|
|
445
|
+
padding: 0;
|
|
446
|
+
margin-left: 1rem;
|
|
479
447
|
}
|
|
480
|
-
.eds-
|
|
481
|
-
|
|
448
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
449
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
450
|
+
background: var(--textarea-label-background);
|
|
451
|
+
width: calc(
|
|
452
|
+
100% - 1rem - 1rem - 4px
|
|
453
|
+
);
|
|
482
454
|
}
|
|
483
|
-
.eds-
|
|
484
|
-
|
|
455
|
+
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
456
|
+
top: 0.5rem;
|
|
457
|
+
font-size: 0.875rem;
|
|
458
|
+
line-height: 1rem;
|
|
459
|
+
padding: 0;
|
|
460
|
+
margin-left: 1rem;
|
|
485
461
|
}
|
|
486
|
-
.eds-
|
|
487
|
-
|
|
462
|
+
.eds-contrast .eds-input-group__label {
|
|
463
|
+
color: #8285a8;
|
|
488
464
|
}
|
|
489
|
-
.eds-
|
|
490
|
-
|
|
465
|
+
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
466
|
+
color: #aeb7e2;
|
|
491
467
|
}
|
|
492
|
-
.eds-
|
|
493
|
-
|
|
468
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
469
|
+
font-size: 1.5rem;
|
|
470
|
+
line-height: 2.25rem;
|
|
471
|
+
height: 4rem;
|
|
494
472
|
}
|
|
495
|
-
.eds-
|
|
496
|
-
|
|
473
|
+
.eds-input-group__label--filled {
|
|
474
|
+
top: 0.375rem;
|
|
475
|
+
font-size: 0.75rem;
|
|
476
|
+
line-height: 0.75rem;
|
|
477
|
+
height: 10px;
|
|
478
|
+
padding: 0;
|
|
479
|
+
margin-left: 1rem;
|
|
497
480
|
}
|
|
498
|
-
.eds-
|
|
499
|
-
|
|
481
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
482
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
483
|
+
background: var(--textarea-label-background);
|
|
484
|
+
width: calc(
|
|
485
|
+
100% - 1rem - 1rem - 4px
|
|
486
|
+
);
|
|
500
487
|
}
|
|
501
|
-
.eds-
|
|
502
|
-
|
|
488
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
489
|
+
top: 0.5rem;
|
|
490
|
+
font-size: 0.875rem;
|
|
491
|
+
line-height: 1rem;
|
|
492
|
+
padding: 0;
|
|
493
|
+
margin-left: 1rem;
|
|
503
494
|
}
|
|
504
|
-
.eds-
|
|
505
|
-
|
|
506
|
-
|
|
495
|
+
.eds-input-group__label-tooltip-icon {
|
|
496
|
+
color: #0082b9;
|
|
497
|
+
padding-left: 0.25rem;
|
|
498
|
+
padding-right: 0.25rem;
|
|
499
|
+
display: flex;
|
|
500
|
+
align-items: center;
|
|
501
|
+
cursor: help;
|
|
502
|
+
font-size: 1rem;
|
|
507
503
|
}
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
504
|
+
|
|
505
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
506
|
+
top: 0.375rem;
|
|
507
|
+
font-size: 0.75rem;
|
|
508
|
+
line-height: 0.75rem;
|
|
509
|
+
height: 10px;
|
|
510
|
+
padding: 0;
|
|
511
|
+
margin-left: 1rem;
|
|
511
512
|
}
|
|
512
|
-
|
|
513
|
-
.eds-
|
|
514
|
-
|
|
515
|
-
|
|
513
|
+
|
|
514
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
515
|
+
top: 0.375rem;
|
|
516
|
+
font-size: 0.75rem;
|
|
517
|
+
line-height: 0.75rem;
|
|
518
|
+
height: 10px;
|
|
519
|
+
padding: 0;
|
|
520
|
+
margin-left: 1rem;
|
|
516
521
|
}
|
|
517
|
-
.eds-
|
|
518
|
-
|
|
519
|
-
background
|
|
522
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
523
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
524
|
+
background: var(--textarea-label-background);
|
|
525
|
+
width: calc(
|
|
526
|
+
100% - 1rem - 1rem - 4px
|
|
527
|
+
);
|
|
520
528
|
}
|
|
521
|
-
.eds-
|
|
522
|
-
|
|
529
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
530
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
531
|
+
background: var(--textarea-label-background);
|
|
532
|
+
width: calc(
|
|
533
|
+
100% - 1rem - 1rem - 4px
|
|
534
|
+
);
|
|
523
535
|
}
|
|
524
|
-
.eds-
|
|
525
|
-
|
|
536
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
537
|
+
top: 0.5rem;
|
|
538
|
+
font-size: 0.875rem;
|
|
539
|
+
line-height: 1rem;
|
|
540
|
+
padding: 0;
|
|
541
|
+
margin-left: 1rem;
|
|
526
542
|
}
|
|
527
|
-
.eds-
|
|
528
|
-
|
|
529
|
-
|
|
543
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
544
|
+
top: 0.5rem;
|
|
545
|
+
font-size: 0.875rem;
|
|
546
|
+
line-height: 1rem;
|
|
547
|
+
padding: 0;
|
|
548
|
+
margin-left: 1rem;
|
|
530
549
|
}
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
550
|
+
/* DO NOT CHANGE!*/
|
|
551
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
552
|
+
.eds-feedback-text {
|
|
553
|
+
display: flex;
|
|
554
|
+
align-items: center;
|
|
555
|
+
margin-top: 0.25rem;
|
|
534
556
|
}
|
|
535
|
-
.eds-
|
|
536
|
-
|
|
537
|
-
outline: none;
|
|
538
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
539
|
-
outline-offset: 0.125rem;
|
|
557
|
+
.eds-feedback-text--info {
|
|
558
|
+
padding-left: calc(1rem + 0.125rem);
|
|
540
559
|
}
|
|
541
|
-
.eds-
|
|
542
|
-
|
|
543
|
-
outline: none;
|
|
544
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
545
|
-
outline-offset: 0.125rem;
|
|
560
|
+
.eds-feedback-text__text {
|
|
561
|
+
color: #181c56;
|
|
546
562
|
}
|
|
547
|
-
.eds-contrast .eds-
|
|
548
|
-
|
|
549
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
563
|
+
.eds-contrast .eds-feedback-text__text {
|
|
564
|
+
color: #ffffff;
|
|
550
565
|
}
|
|
551
|
-
|
|
552
|
-
.eds-
|
|
553
|
-
|
|
566
|
+
|
|
567
|
+
.eds-feedback-text__icon {
|
|
568
|
+
font-size: 1.5rem;
|
|
569
|
+
min-height: 1.5rem;
|
|
570
|
+
min-width: 1.5rem;
|
|
571
|
+
padding-right: 0.5rem;
|
|
572
|
+
position: relative;
|
|
573
|
+
top: -0.1rem;
|
|
554
574
|
}
|
|
555
|
-
.eds-
|
|
556
|
-
|
|
575
|
+
.eds-feedback-text__icon--success {
|
|
576
|
+
color: #1a8e60;
|
|
557
577
|
}
|
|
558
|
-
.eds-
|
|
559
|
-
|
|
578
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
579
|
+
color: #5ac39a;
|
|
560
580
|
}
|
|
561
|
-
.eds-
|
|
562
|
-
|
|
581
|
+
.eds-feedback-text__icon--error {
|
|
582
|
+
color: #d31b1b;
|
|
563
583
|
}
|
|
564
|
-
.eds-
|
|
565
|
-
|
|
566
|
-
display: inline-flex;
|
|
567
|
-
justify-content: center;
|
|
568
|
-
align-items: center;
|
|
569
|
-
position: relative;
|
|
570
|
-
margin-right: 1rem;
|
|
571
|
-
height: 1.25rem;
|
|
572
|
-
width: 1.25rem;
|
|
573
|
-
border: 0.125rem solid #181c56;
|
|
574
|
-
border-radius: 0.125rem;
|
|
575
|
-
background-color: transparent;
|
|
576
|
-
color: #ffffff;
|
|
577
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
584
|
+
.eds-contrast .eds-feedback-text__icon--error {
|
|
585
|
+
color: #ff9494;
|
|
578
586
|
}
|
|
579
|
-
.eds-
|
|
580
|
-
|
|
587
|
+
.eds-feedback-text__icon--info {
|
|
588
|
+
color: #0082b9;
|
|
581
589
|
}
|
|
582
|
-
.eds-contrast .eds-
|
|
583
|
-
|
|
590
|
+
.eds-contrast .eds-feedback-text__icon--info {
|
|
591
|
+
color: #64b3e7;
|
|
584
592
|
}
|
|
585
|
-
.eds-
|
|
586
|
-
|
|
587
|
-
width: 1rem;
|
|
588
|
-
visibility: hidden;
|
|
593
|
+
.eds-feedback-text__icon--warning {
|
|
594
|
+
color: #ffca28;
|
|
589
595
|
}
|
|
590
|
-
.eds-
|
|
591
|
-
|
|
592
|
-
stroke-dasharray: 48;
|
|
593
|
-
stroke-dashoffset: 48;
|
|
594
|
-
stroke-width: 0.375rem;
|
|
596
|
+
.eds-feedback-text__icon--warning circle {
|
|
597
|
+
fill: #181c56;
|
|
595
598
|
}
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
100% {
|
|
599
|
-
stroke-dashoffset: 0;
|
|
600
|
-
}
|
|
599
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
600
|
+
color: #ffe082;
|
|
601
601
|
}
|
|
602
602
|
/* DO NOT CHANGE!*/
|
|
603
603
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -689,13 +689,6 @@
|
|
|
689
689
|
}
|
|
690
690
|
/* DO NOT CHANGE!*/
|
|
691
691
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
692
|
-
textarea.eds-form-control.eds-textarea {
|
|
693
|
-
min-height: 7.75rem;
|
|
694
|
-
resize: vertical;
|
|
695
|
-
line-height: 1.5rem;
|
|
696
|
-
}
|
|
697
|
-
/* DO NOT CHANGE!*/
|
|
698
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
699
692
|
.eds-switch {
|
|
700
693
|
cursor: pointer;
|
|
701
694
|
-webkit-user-select: none;
|
|
@@ -815,6 +808,13 @@ textarea.eds-form-control.eds-textarea {
|
|
|
815
808
|
}
|
|
816
809
|
/* DO NOT CHANGE!*/
|
|
817
810
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
811
|
+
textarea.eds-form-control.eds-textarea {
|
|
812
|
+
min-height: 7.75rem;
|
|
813
|
+
resize: vertical;
|
|
814
|
+
line-height: 1.5rem;
|
|
815
|
+
}
|
|
816
|
+
/* DO NOT CHANGE!*/
|
|
817
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
818
818
|
.eds-textfield__clear-button {
|
|
819
819
|
background: none;
|
|
820
820
|
border: none;
|
|
@@ -852,6 +852,17 @@ textarea.eds-form-control.eds-textarea {
|
|
|
852
852
|
}
|
|
853
853
|
/* DO NOT CHANGE!*/
|
|
854
854
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
855
|
+
.eds-segmented-control {
|
|
856
|
+
margin-top: 0.25rem;
|
|
857
|
+
display: flex;
|
|
858
|
+
background: #d1d4e3;
|
|
859
|
+
border-radius: 0.5rem;
|
|
860
|
+
}
|
|
861
|
+
.eds-contrast .eds-segmented-control {
|
|
862
|
+
background: #393d79;
|
|
863
|
+
}
|
|
864
|
+
/* DO NOT CHANGE!*/
|
|
865
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
855
866
|
.eds-segmented-choice {
|
|
856
867
|
display: block;
|
|
857
868
|
flex: 1 1 0px;
|
|
@@ -923,17 +934,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
923
934
|
}
|
|
924
935
|
/* DO NOT CHANGE!*/
|
|
925
936
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
926
|
-
.eds-segmented-control {
|
|
927
|
-
margin-top: 0.25rem;
|
|
928
|
-
display: flex;
|
|
929
|
-
background: #d1d4e3;
|
|
930
|
-
border-radius: 0.5rem;
|
|
931
|
-
}
|
|
932
|
-
.eds-contrast .eds-segmented-control {
|
|
933
|
-
background: #393d79;
|
|
934
|
-
}
|
|
935
|
-
/* DO NOT CHANGE!*/
|
|
936
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
937
937
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
938
938
|
border-color: #181c56;
|
|
939
939
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|