@entur/form 7.0.31-RC.0 → 7.0.31
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 +383 -383
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -1,219 +1,5 @@
|
|
|
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;
|
|
5
|
-
align-items: center;
|
|
6
|
-
margin-top: 0.25rem;
|
|
7
|
-
}
|
|
8
|
-
.eds-feedback-text--info {
|
|
9
|
-
padding-left: calc(1rem + 0.125rem);
|
|
10
|
-
}
|
|
11
|
-
.eds-feedback-text__text {
|
|
12
|
-
color: #181c56;
|
|
13
|
-
}
|
|
14
|
-
.eds-contrast .eds-feedback-text__text {
|
|
15
|
-
color: #ffffff;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.eds-feedback-text__icon {
|
|
19
|
-
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;
|
|
25
|
-
}
|
|
26
|
-
.eds-feedback-text__icon--success {
|
|
27
|
-
color: #1a8e60;
|
|
28
|
-
}
|
|
29
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
30
|
-
color: #5ac39a;
|
|
31
|
-
}
|
|
32
|
-
.eds-feedback-text__icon--error {
|
|
33
|
-
color: #d31b1b;
|
|
34
|
-
}
|
|
35
|
-
.eds-contrast .eds-feedback-text__icon--error {
|
|
36
|
-
color: #ff9494;
|
|
37
|
-
}
|
|
38
|
-
.eds-feedback-text__icon--info {
|
|
39
|
-
color: #0082b9;
|
|
40
|
-
}
|
|
41
|
-
.eds-contrast .eds-feedback-text__icon--info {
|
|
42
|
-
color: #64b3e7;
|
|
43
|
-
}
|
|
44
|
-
.eds-feedback-text__icon--warning {
|
|
45
|
-
color: #ffca28;
|
|
46
|
-
}
|
|
47
|
-
.eds-feedback-text__icon--warning circle {
|
|
48
|
-
fill: #181c56;
|
|
49
|
-
}
|
|
50
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
51
|
-
color: #ffe082;
|
|
52
|
-
}
|
|
53
|
-
/* DO NOT CHANGE!*/
|
|
54
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
55
|
-
.eds-checkbox__container {
|
|
56
|
-
display: flex;
|
|
57
|
-
align-items: center;
|
|
58
|
-
position: relative;
|
|
59
|
-
-webkit-appearance: none;
|
|
60
|
-
-moz-appearance: none;
|
|
61
|
-
appearance: none;
|
|
62
|
-
cursor: pointer;
|
|
63
|
-
-webkit-user-select: none;
|
|
64
|
-
-moz-user-select: none;
|
|
65
|
-
user-select: none;
|
|
66
|
-
width: -moz-fit-content;
|
|
67
|
-
width: fit-content;
|
|
68
|
-
margin: 0.5rem 0;
|
|
69
|
-
}
|
|
70
|
-
.eds-checkbox__container--reduced-click-area {
|
|
71
|
-
height: -moz-fit-content;
|
|
72
|
-
height: fit-content;
|
|
73
|
-
}
|
|
74
|
-
.eds-checkbox__container input {
|
|
75
|
-
position: absolute;
|
|
76
|
-
opacity: 0;
|
|
77
|
-
height: 0;
|
|
78
|
-
width: 0;
|
|
79
|
-
}
|
|
80
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
81
|
-
background-color: #181c56;
|
|
82
|
-
}
|
|
83
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
84
|
-
visibility: visible;
|
|
85
|
-
}
|
|
86
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
87
|
-
stroke: #ffffff;
|
|
88
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
89
|
-
}
|
|
90
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
91
|
-
fill: #ffffff;
|
|
92
|
-
}
|
|
93
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
94
|
-
opacity: 0.5;
|
|
95
|
-
}
|
|
96
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
97
|
-
opacity: 0.5;
|
|
98
|
-
}
|
|
99
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
100
|
-
opacity: 0.5;
|
|
101
|
-
}
|
|
102
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
103
|
-
opacity: 0.5;
|
|
104
|
-
}
|
|
105
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
106
|
-
opacity: 0.5;
|
|
107
|
-
}
|
|
108
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
109
|
-
background-color: #aeb7e2;
|
|
110
|
-
}
|
|
111
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
112
|
-
stroke: #181c56;
|
|
113
|
-
}
|
|
114
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
115
|
-
fill: #181c56;
|
|
116
|
-
}
|
|
117
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
118
|
-
border-color: #292b6a;
|
|
119
|
-
background-color: #d1d4e3;
|
|
120
|
-
}
|
|
121
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
122
|
-
border-color: #b6bee5;
|
|
123
|
-
background-color: rgba(174, 183, 226, 0.2);
|
|
124
|
-
}
|
|
125
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
126
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
127
|
-
border-color: transparent;
|
|
128
|
-
background-color: #54568c;
|
|
129
|
-
}
|
|
130
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
131
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
132
|
-
background-color: #b6bee5;
|
|
133
|
-
}
|
|
134
|
-
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
135
|
-
border-color: #16194d;
|
|
136
|
-
}
|
|
137
|
-
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
138
|
-
border-color: #9da5cb;
|
|
139
|
-
}
|
|
140
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
141
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
142
|
-
background-color: #16194d;
|
|
143
|
-
}
|
|
144
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
145
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
146
|
-
background-color: #9da5cb;
|
|
147
|
-
}
|
|
148
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
149
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
150
|
-
outline: none;
|
|
151
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
152
|
-
outline-offset: 0.125rem;
|
|
153
|
-
}
|
|
154
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
155
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
156
|
-
outline: none;
|
|
157
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
158
|
-
outline-offset: 0.125rem;
|
|
159
|
-
}
|
|
160
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
161
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
162
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
163
|
-
}
|
|
164
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
165
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
166
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
167
|
-
}
|
|
168
|
-
.eds-checkbox--disabled {
|
|
169
|
-
pointer-events: none;
|
|
170
|
-
}
|
|
171
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
172
|
-
opacity: 0.5;
|
|
173
|
-
}
|
|
174
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
175
|
-
opacity: 0.5;
|
|
176
|
-
}
|
|
177
|
-
.eds-checkbox__icon {
|
|
178
|
-
box-sizing: border-box;
|
|
179
|
-
display: inline-flex;
|
|
180
|
-
justify-content: center;
|
|
181
|
-
align-items: center;
|
|
182
|
-
position: relative;
|
|
183
|
-
margin-right: 1rem;
|
|
184
|
-
height: 1.25rem;
|
|
185
|
-
width: 1.25rem;
|
|
186
|
-
border: 0.125rem solid #181c56;
|
|
187
|
-
border-radius: 0.125rem;
|
|
188
|
-
background-color: transparent;
|
|
189
|
-
color: #ffffff;
|
|
190
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
191
|
-
}
|
|
192
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
193
|
-
margin-right: 0;
|
|
194
|
-
}
|
|
195
|
-
.eds-contrast .eds-checkbox__icon {
|
|
196
|
-
border-color: #aeb7e2;
|
|
197
|
-
}
|
|
198
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
199
|
-
height: 1rem;
|
|
200
|
-
width: 1rem;
|
|
201
|
-
visibility: hidden;
|
|
202
|
-
}
|
|
203
|
-
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
204
|
-
transform-origin: 50% 50%;
|
|
205
|
-
stroke-dasharray: 48;
|
|
206
|
-
stroke-dashoffset: 48;
|
|
207
|
-
stroke-width: 0.375rem;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
@keyframes stroke {
|
|
211
|
-
100% {
|
|
212
|
-
stroke-dashoffset: 0;
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
/* DO NOT CHANGE!*/
|
|
216
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
217
3
|
.eds-form-control-wrapper {
|
|
218
4
|
--border-color: #7C7F9F;
|
|
219
5
|
--border-color-hover: #aeb7e2;
|
|
@@ -454,93 +240,224 @@
|
|
|
454
240
|
.eds-form-control__append {
|
|
455
241
|
margin-left: 0;
|
|
456
242
|
}
|
|
243
|
+
.eds-fieldset {
|
|
244
|
+
margin: 0;
|
|
245
|
+
padding: 0;
|
|
246
|
+
border: 0;
|
|
247
|
+
}
|
|
457
248
|
/* DO NOT CHANGE!*/
|
|
458
249
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
459
|
-
.eds-
|
|
250
|
+
.eds-feedback-text {
|
|
460
251
|
display: flex;
|
|
461
|
-
justify-content: center;
|
|
462
252
|
align-items: center;
|
|
463
|
-
|
|
464
|
-
cursor: pointer;
|
|
465
|
-
height: 2rem;
|
|
466
|
-
width: -moz-fit-content;
|
|
467
|
-
width: fit-content;
|
|
468
|
-
-webkit-user-select: none;
|
|
469
|
-
-moz-user-select: none;
|
|
470
|
-
user-select: none;
|
|
253
|
+
margin-top: 0.25rem;
|
|
471
254
|
}
|
|
472
|
-
.eds-
|
|
473
|
-
|
|
255
|
+
.eds-feedback-text--info {
|
|
256
|
+
padding-left: calc(1rem + 0.125rem);
|
|
474
257
|
}
|
|
475
|
-
.eds-
|
|
476
|
-
|
|
258
|
+
.eds-feedback-text__text {
|
|
259
|
+
color: #181c56;
|
|
477
260
|
}
|
|
478
|
-
.eds-contrast .eds-
|
|
479
|
-
|
|
261
|
+
.eds-contrast .eds-feedback-text__text {
|
|
262
|
+
color: #ffffff;
|
|
480
263
|
}
|
|
481
|
-
|
|
482
|
-
|
|
264
|
+
|
|
265
|
+
.eds-feedback-text__icon {
|
|
266
|
+
font-size: 1.5rem;
|
|
267
|
+
min-height: 1.5rem;
|
|
268
|
+
min-width: 1.5rem;
|
|
269
|
+
padding-right: 0.5rem;
|
|
270
|
+
position: relative;
|
|
271
|
+
top: -0.1rem;
|
|
483
272
|
}
|
|
484
|
-
.eds-
|
|
485
|
-
|
|
486
|
-
|
|
273
|
+
.eds-feedback-text__icon--success {
|
|
274
|
+
color: #1a8e60;
|
|
275
|
+
}
|
|
276
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
277
|
+
color: #5ac39a;
|
|
278
|
+
}
|
|
279
|
+
.eds-feedback-text__icon--error {
|
|
280
|
+
color: #d31b1b;
|
|
281
|
+
}
|
|
282
|
+
.eds-contrast .eds-feedback-text__icon--error {
|
|
283
|
+
color: #ff9494;
|
|
284
|
+
}
|
|
285
|
+
.eds-feedback-text__icon--info {
|
|
286
|
+
color: #0082b9;
|
|
287
|
+
}
|
|
288
|
+
.eds-contrast .eds-feedback-text__icon--info {
|
|
289
|
+
color: #64b3e7;
|
|
290
|
+
}
|
|
291
|
+
.eds-feedback-text__icon--warning {
|
|
292
|
+
color: #ffca28;
|
|
293
|
+
}
|
|
294
|
+
.eds-feedback-text__icon--warning circle {
|
|
295
|
+
fill: #181c56;
|
|
296
|
+
}
|
|
297
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
298
|
+
color: #ffe082;
|
|
299
|
+
}
|
|
300
|
+
/* DO NOT CHANGE!*/
|
|
301
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
302
|
+
.eds-checkbox__container {
|
|
303
|
+
display: flex;
|
|
304
|
+
align-items: center;
|
|
305
|
+
position: relative;
|
|
306
|
+
-webkit-appearance: none;
|
|
307
|
+
-moz-appearance: none;
|
|
308
|
+
appearance: none;
|
|
487
309
|
cursor: pointer;
|
|
310
|
+
-webkit-user-select: none;
|
|
311
|
+
-moz-user-select: none;
|
|
312
|
+
user-select: none;
|
|
313
|
+
width: -moz-fit-content;
|
|
314
|
+
width: fit-content;
|
|
315
|
+
margin: 0.5rem 0;
|
|
316
|
+
}
|
|
317
|
+
.eds-checkbox__container--reduced-click-area {
|
|
318
|
+
height: -moz-fit-content;
|
|
319
|
+
height: fit-content;
|
|
320
|
+
}
|
|
321
|
+
.eds-checkbox__container input {
|
|
322
|
+
position: absolute;
|
|
323
|
+
opacity: 0;
|
|
488
324
|
height: 0;
|
|
489
325
|
width: 0;
|
|
490
326
|
}
|
|
491
|
-
.eds-
|
|
492
|
-
|
|
493
|
-
width: 0.625rem;
|
|
327
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
328
|
+
background-color: #181c56;
|
|
494
329
|
}
|
|
495
|
-
.eds-
|
|
330
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
331
|
+
visibility: visible;
|
|
332
|
+
}
|
|
333
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
334
|
+
stroke: #ffffff;
|
|
335
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
336
|
+
}
|
|
337
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
338
|
+
fill: #ffffff;
|
|
339
|
+
}
|
|
340
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
341
|
+
opacity: 0.5;
|
|
342
|
+
}
|
|
343
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
344
|
+
opacity: 0.5;
|
|
345
|
+
}
|
|
346
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
347
|
+
opacity: 0.5;
|
|
348
|
+
}
|
|
349
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
350
|
+
opacity: 0.5;
|
|
351
|
+
}
|
|
352
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
353
|
+
opacity: 0.5;
|
|
354
|
+
}
|
|
355
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
356
|
+
background-color: #aeb7e2;
|
|
357
|
+
}
|
|
358
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
359
|
+
stroke: #181c56;
|
|
360
|
+
}
|
|
361
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
362
|
+
fill: #181c56;
|
|
363
|
+
}
|
|
364
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
365
|
+
border-color: #292b6a;
|
|
366
|
+
background-color: #d1d4e3;
|
|
367
|
+
}
|
|
368
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
369
|
+
border-color: #b6bee5;
|
|
370
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
371
|
+
}
|
|
372
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
373
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
374
|
+
border-color: transparent;
|
|
375
|
+
background-color: #54568c;
|
|
376
|
+
}
|
|
377
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
378
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
379
|
+
background-color: #b6bee5;
|
|
380
|
+
}
|
|
381
|
+
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
382
|
+
border-color: #16194d;
|
|
383
|
+
}
|
|
384
|
+
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
385
|
+
border-color: #9da5cb;
|
|
386
|
+
}
|
|
387
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
388
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
389
|
+
background-color: #16194d;
|
|
390
|
+
}
|
|
391
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
392
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
393
|
+
background-color: #9da5cb;
|
|
394
|
+
}
|
|
395
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
396
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
496
397
|
outline: none;
|
|
497
398
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
498
399
|
outline-offset: 0.125rem;
|
|
499
400
|
}
|
|
500
|
-
.eds-
|
|
401
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
402
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
403
|
+
outline: none;
|
|
404
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
405
|
+
outline-offset: 0.125rem;
|
|
406
|
+
}
|
|
407
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
408
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
501
409
|
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
502
410
|
}
|
|
503
|
-
.eds-
|
|
411
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
412
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
413
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
414
|
+
}
|
|
415
|
+
.eds-checkbox--disabled {
|
|
416
|
+
pointer-events: none;
|
|
417
|
+
}
|
|
418
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
419
|
+
opacity: 0.5;
|
|
420
|
+
}
|
|
421
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
422
|
+
opacity: 0.5;
|
|
423
|
+
}
|
|
424
|
+
.eds-checkbox__icon {
|
|
425
|
+
box-sizing: border-box;
|
|
426
|
+
display: inline-flex;
|
|
427
|
+
justify-content: center;
|
|
428
|
+
align-items: center;
|
|
504
429
|
position: relative;
|
|
430
|
+
margin-right: 1rem;
|
|
505
431
|
height: 1.25rem;
|
|
506
432
|
width: 1.25rem;
|
|
507
|
-
margin-right: 1rem;
|
|
508
|
-
background-color: #ffffff;
|
|
509
433
|
border: 0.125rem solid #181c56;
|
|
510
|
-
border-radius:
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
}
|
|
515
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
516
|
-
background-color: #181c56;
|
|
517
|
-
border-color: #aeb7e2;
|
|
518
|
-
}
|
|
519
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
520
|
-
background: #d1d3d3;
|
|
521
|
-
border-color: #d1d3d3;
|
|
522
|
-
cursor: not-allowed;
|
|
434
|
+
border-radius: 0.125rem;
|
|
435
|
+
background-color: transparent;
|
|
436
|
+
color: #ffffff;
|
|
437
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
523
438
|
}
|
|
524
|
-
.eds-
|
|
525
|
-
|
|
439
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
440
|
+
margin-right: 0;
|
|
526
441
|
}
|
|
527
|
-
.eds-contrast .eds-
|
|
528
|
-
|
|
529
|
-
border-color: #d1d3d3;
|
|
442
|
+
.eds-contrast .eds-checkbox__icon {
|
|
443
|
+
border-color: #aeb7e2;
|
|
530
444
|
}
|
|
531
|
-
.eds-
|
|
532
|
-
|
|
445
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
446
|
+
height: 1rem;
|
|
447
|
+
width: 1rem;
|
|
448
|
+
visibility: hidden;
|
|
533
449
|
}
|
|
534
|
-
.eds-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
background-color: #181c56;
|
|
540
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
450
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
451
|
+
transform-origin: 50% 50%;
|
|
452
|
+
stroke-dasharray: 48;
|
|
453
|
+
stroke-dashoffset: 48;
|
|
454
|
+
stroke-width: 0.375rem;
|
|
541
455
|
}
|
|
542
|
-
|
|
543
|
-
|
|
456
|
+
|
|
457
|
+
@keyframes stroke {
|
|
458
|
+
100% {
|
|
459
|
+
stroke-dashoffset: 0;
|
|
460
|
+
}
|
|
544
461
|
}
|
|
545
462
|
/* DO NOT CHANGE!*/
|
|
546
463
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -706,6 +623,137 @@ input:disabled + .eds-input-panel__container {
|
|
|
706
623
|
}
|
|
707
624
|
/* DO NOT CHANGE!*/
|
|
708
625
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
626
|
+
.eds-input-group {
|
|
627
|
+
color: inherit;
|
|
628
|
+
display: block;
|
|
629
|
+
position: relative;
|
|
630
|
+
}
|
|
631
|
+
.eds-input-group__label {
|
|
632
|
+
color: #656782;
|
|
633
|
+
display: flex;
|
|
634
|
+
font-size: 1rem;
|
|
635
|
+
position: absolute;
|
|
636
|
+
line-height: 1rem;
|
|
637
|
+
height: 3rem;
|
|
638
|
+
padding: 1rem;
|
|
639
|
+
padding-left: 0;
|
|
640
|
+
margin-left: 1rem;
|
|
641
|
+
top: -0.125rem;
|
|
642
|
+
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;
|
|
643
|
+
-webkit-user-select: none;
|
|
644
|
+
-moz-user-select: none;
|
|
645
|
+
user-select: none;
|
|
646
|
+
pointer-events: none;
|
|
647
|
+
}
|
|
648
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
649
|
+
top: 0.375rem;
|
|
650
|
+
font-size: 0.75rem;
|
|
651
|
+
line-height: 0.75rem;
|
|
652
|
+
height: 10px;
|
|
653
|
+
padding: 0;
|
|
654
|
+
margin-left: 1rem;
|
|
655
|
+
}
|
|
656
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
657
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
658
|
+
background: var(--textarea-label-background);
|
|
659
|
+
width: calc(
|
|
660
|
+
100% - 1rem - 1rem - 4px
|
|
661
|
+
);
|
|
662
|
+
}
|
|
663
|
+
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
664
|
+
top: 0.5rem;
|
|
665
|
+
font-size: 0.875rem;
|
|
666
|
+
line-height: 1rem;
|
|
667
|
+
padding: 0;
|
|
668
|
+
margin-left: 1rem;
|
|
669
|
+
}
|
|
670
|
+
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
671
|
+
color: #aeb7e2;
|
|
672
|
+
}
|
|
673
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
674
|
+
font-size: 1.5rem;
|
|
675
|
+
line-height: 2.25rem;
|
|
676
|
+
height: 4rem;
|
|
677
|
+
}
|
|
678
|
+
.eds-input-group__label--filled {
|
|
679
|
+
top: 0.375rem;
|
|
680
|
+
font-size: 0.75rem;
|
|
681
|
+
line-height: 0.75rem;
|
|
682
|
+
height: 10px;
|
|
683
|
+
padding: 0;
|
|
684
|
+
margin-left: 1rem;
|
|
685
|
+
}
|
|
686
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
687
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
688
|
+
background: var(--textarea-label-background);
|
|
689
|
+
width: calc(
|
|
690
|
+
100% - 1rem - 1rem - 4px
|
|
691
|
+
);
|
|
692
|
+
}
|
|
693
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
694
|
+
top: 0.5rem;
|
|
695
|
+
font-size: 0.875rem;
|
|
696
|
+
line-height: 1rem;
|
|
697
|
+
padding: 0;
|
|
698
|
+
margin-left: 1rem;
|
|
699
|
+
}
|
|
700
|
+
.eds-input-group__label-tooltip-icon {
|
|
701
|
+
color: #0082b9;
|
|
702
|
+
padding-left: 0.25rem;
|
|
703
|
+
padding-right: 0.25rem;
|
|
704
|
+
display: flex;
|
|
705
|
+
align-items: center;
|
|
706
|
+
cursor: help;
|
|
707
|
+
font-size: 1rem;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
711
|
+
top: 0.375rem;
|
|
712
|
+
font-size: 0.75rem;
|
|
713
|
+
line-height: 0.75rem;
|
|
714
|
+
height: 10px;
|
|
715
|
+
padding: 0;
|
|
716
|
+
margin-left: 1rem;
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
720
|
+
top: 0.375rem;
|
|
721
|
+
font-size: 0.75rem;
|
|
722
|
+
line-height: 0.75rem;
|
|
723
|
+
height: 10px;
|
|
724
|
+
padding: 0;
|
|
725
|
+
margin-left: 1rem;
|
|
726
|
+
}
|
|
727
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
728
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
729
|
+
background: var(--textarea-label-background);
|
|
730
|
+
width: calc(
|
|
731
|
+
100% - 1rem - 1rem - 4px
|
|
732
|
+
);
|
|
733
|
+
}
|
|
734
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
735
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
736
|
+
background: var(--textarea-label-background);
|
|
737
|
+
width: calc(
|
|
738
|
+
100% - 1rem - 1rem - 4px
|
|
739
|
+
);
|
|
740
|
+
}
|
|
741
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
742
|
+
top: 0.5rem;
|
|
743
|
+
font-size: 0.875rem;
|
|
744
|
+
line-height: 1rem;
|
|
745
|
+
padding: 0;
|
|
746
|
+
margin-left: 1rem;
|
|
747
|
+
}
|
|
748
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
749
|
+
top: 0.5rem;
|
|
750
|
+
font-size: 0.875rem;
|
|
751
|
+
line-height: 1rem;
|
|
752
|
+
padding: 0;
|
|
753
|
+
margin-left: 1rem;
|
|
754
|
+
}
|
|
755
|
+
/* DO NOT CHANGE!*/
|
|
756
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
709
757
|
.eds-switch {
|
|
710
758
|
cursor: pointer;
|
|
711
759
|
-webkit-user-select: none;
|
|
@@ -825,139 +873,91 @@ input:disabled + .eds-input-panel__container {
|
|
|
825
873
|
}
|
|
826
874
|
/* DO NOT CHANGE!*/
|
|
827
875
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
828
|
-
.eds-
|
|
829
|
-
color: inherit;
|
|
830
|
-
display: block;
|
|
831
|
-
position: relative;
|
|
832
|
-
}
|
|
833
|
-
.eds-input-group__label {
|
|
834
|
-
color: #656782;
|
|
876
|
+
.eds-form-component--radio__container {
|
|
835
877
|
display: flex;
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
top: -0.125rem;
|
|
844
|
-
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;
|
|
878
|
+
justify-content: center;
|
|
879
|
+
align-items: center;
|
|
880
|
+
position: relative;
|
|
881
|
+
cursor: pointer;
|
|
882
|
+
height: 2rem;
|
|
883
|
+
width: -moz-fit-content;
|
|
884
|
+
width: fit-content;
|
|
845
885
|
-webkit-user-select: none;
|
|
846
886
|
-moz-user-select: none;
|
|
847
887
|
user-select: none;
|
|
848
|
-
pointer-events: none;
|
|
849
888
|
}
|
|
850
|
-
.eds-form-
|
|
851
|
-
|
|
852
|
-
font-size: 0.75rem;
|
|
853
|
-
line-height: 0.75rem;
|
|
854
|
-
height: 10px;
|
|
855
|
-
padding: 0;
|
|
856
|
-
margin-left: 1rem;
|
|
889
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
890
|
+
border-color: #54568c;
|
|
857
891
|
}
|
|
858
|
-
.eds-
|
|
859
|
-
|
|
860
|
-
background: var(--textarea-label-background);
|
|
861
|
-
width: calc(
|
|
862
|
-
100% - 1rem - 1rem - 4px
|
|
863
|
-
);
|
|
892
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
893
|
+
background-color: #54568c;
|
|
864
894
|
}
|
|
865
|
-
.eds-
|
|
866
|
-
|
|
867
|
-
font-size: 0.875rem;
|
|
868
|
-
line-height: 1rem;
|
|
869
|
-
padding: 0;
|
|
870
|
-
margin-left: 1rem;
|
|
895
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
896
|
+
border-color: #8285a8;
|
|
871
897
|
}
|
|
872
|
-
.eds-contrast .eds-form-
|
|
873
|
-
color: #
|
|
898
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
899
|
+
background-color: #8285a8;
|
|
874
900
|
}
|
|
875
|
-
.eds-form-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
901
|
+
.eds-form-component--radio__container input {
|
|
902
|
+
position: absolute;
|
|
903
|
+
opacity: 0;
|
|
904
|
+
cursor: pointer;
|
|
905
|
+
height: 0;
|
|
906
|
+
width: 0;
|
|
879
907
|
}
|
|
880
|
-
.eds-input-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
line-height: 0.75rem;
|
|
884
|
-
height: 10px;
|
|
885
|
-
padding: 0;
|
|
886
|
-
margin-left: 1rem;
|
|
908
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
909
|
+
height: 0.625rem;
|
|
910
|
+
width: 0.625rem;
|
|
887
911
|
}
|
|
888
|
-
.eds-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
100% - 1rem - 1rem - 4px
|
|
893
|
-
);
|
|
912
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
913
|
+
outline: none;
|
|
914
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
915
|
+
outline-offset: 0.125rem;
|
|
894
916
|
}
|
|
895
|
-
.eds-form-
|
|
896
|
-
|
|
897
|
-
font-size: 0.875rem;
|
|
898
|
-
line-height: 1rem;
|
|
899
|
-
padding: 0;
|
|
900
|
-
margin-left: 1rem;
|
|
917
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
918
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
901
919
|
}
|
|
902
|
-
.eds-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
920
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
921
|
+
position: relative;
|
|
922
|
+
height: 1.25rem;
|
|
923
|
+
width: 1.25rem;
|
|
924
|
+
margin-right: 1rem;
|
|
925
|
+
background-color: #ffffff;
|
|
926
|
+
border: 0.125rem solid #181c56;
|
|
927
|
+
border-radius: 50%;
|
|
906
928
|
display: flex;
|
|
907
929
|
align-items: center;
|
|
908
|
-
|
|
909
|
-
font-size: 1rem;
|
|
930
|
+
justify-content: center;
|
|
910
931
|
}
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
font-size: 0.75rem;
|
|
915
|
-
line-height: 0.75rem;
|
|
916
|
-
height: 10px;
|
|
917
|
-
padding: 0;
|
|
918
|
-
margin-left: 1rem;
|
|
932
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
933
|
+
background-color: #181c56;
|
|
934
|
+
border-color: #aeb7e2;
|
|
919
935
|
}
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
line-height: 0.75rem;
|
|
925
|
-
height: 10px;
|
|
926
|
-
padding: 0;
|
|
927
|
-
margin-left: 1rem;
|
|
936
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
937
|
+
background: #d1d3d3;
|
|
938
|
+
border-color: #d1d3d3;
|
|
939
|
+
cursor: not-allowed;
|
|
928
940
|
}
|
|
929
|
-
.eds-
|
|
930
|
-
|
|
931
|
-
background: var(--textarea-label-background);
|
|
932
|
-
width: calc(
|
|
933
|
-
100% - 1rem - 1rem - 4px
|
|
934
|
-
);
|
|
941
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
942
|
+
border-color: #d1d3d3;
|
|
935
943
|
}
|
|
936
|
-
.eds-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
width: calc(
|
|
940
|
-
100% - 1rem - 1rem - 4px
|
|
941
|
-
);
|
|
944
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
945
|
+
background: #d1d3d3;
|
|
946
|
+
border-color: #d1d3d3;
|
|
942
947
|
}
|
|
943
|
-
.eds-form-
|
|
944
|
-
|
|
945
|
-
font-size: 0.875rem;
|
|
946
|
-
line-height: 1rem;
|
|
947
|
-
padding: 0;
|
|
948
|
-
margin-left: 1rem;
|
|
948
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
949
|
+
color: #656782;
|
|
949
950
|
}
|
|
950
|
-
.eds-form-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
951
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
952
|
+
display: block;
|
|
953
|
+
width: 0;
|
|
954
|
+
height: 0;
|
|
955
|
+
border-radius: 50%;
|
|
956
|
+
background-color: #181c56;
|
|
957
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
956
958
|
}
|
|
957
|
-
.eds-
|
|
958
|
-
|
|
959
|
-
padding: 0;
|
|
960
|
-
border: 0;
|
|
959
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
960
|
+
background-color: #aeb7e2;
|
|
961
961
|
}
|
|
962
962
|
/* DO NOT CHANGE!*/
|
|
963
963
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.0.31
|
|
3
|
+
"version": "7.0.31",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/form.esm.js",
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/icons": "^6.13.1
|
|
31
|
-
"@entur/tokens": "^3.11.2
|
|
32
|
-
"@entur/tooltip": "^2.6.40
|
|
33
|
-
"@entur/typography": "^1.8.19
|
|
30
|
+
"@entur/icons": "^6.13.1",
|
|
31
|
+
"@entur/tokens": "^3.11.2",
|
|
32
|
+
"@entur/tooltip": "^2.6.40",
|
|
33
|
+
"@entur/typography": "^1.8.19",
|
|
34
34
|
"@entur/utils": "^0.9.5",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "c3e894aeae7247bdaf3ec8636fade3301e605c0e"
|
|
38
38
|
}
|