@entur/form 7.0.7 → 7.0.9
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 +334 -334
- package/package.json +5 -5
package/dist/styles.css
CHANGED
|
@@ -3,168 +3,6 @@
|
|
|
3
3
|
}
|
|
4
4
|
/* DO NOT CHANGE!*/
|
|
5
5
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
|
-
.eds-checkbox__container {
|
|
7
|
-
display: flex;
|
|
8
|
-
align-items: center;
|
|
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;
|
|
20
|
-
}
|
|
21
|
-
.eds-checkbox__container--reduced-click-area {
|
|
22
|
-
height: -moz-fit-content;
|
|
23
|
-
height: fit-content;
|
|
24
|
-
}
|
|
25
|
-
.eds-checkbox__container input {
|
|
26
|
-
position: absolute;
|
|
27
|
-
opacity: 0;
|
|
28
|
-
height: 0;
|
|
29
|
-
width: 0;
|
|
30
|
-
}
|
|
31
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
32
|
-
background-color: #181c56;
|
|
33
|
-
}
|
|
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;
|
|
36
|
-
}
|
|
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;
|
|
40
|
-
}
|
|
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;
|
|
43
|
-
}
|
|
44
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
45
|
-
opacity: 0.5;
|
|
46
|
-
}
|
|
47
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
48
|
-
opacity: 0.5;
|
|
49
|
-
}
|
|
50
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
51
|
-
opacity: 0.5;
|
|
52
|
-
}
|
|
53
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
54
|
-
opacity: 0.5;
|
|
55
|
-
}
|
|
56
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
57
|
-
opacity: 0.5;
|
|
58
|
-
}
|
|
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 {
|
|
66
|
-
fill: #181c56;
|
|
67
|
-
}
|
|
68
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
69
|
-
border-color: #292b6a;
|
|
70
|
-
background-color: #d1d4e3;
|
|
71
|
-
}
|
|
72
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
73
|
-
border-color: #b6bee5;
|
|
74
|
-
background-color: rgba(174, 183, 226, 0.2);
|
|
75
|
-
}
|
|
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;
|
|
80
|
-
}
|
|
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;
|
|
84
|
-
}
|
|
85
|
-
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
86
|
-
border-color: #16194d;
|
|
87
|
-
}
|
|
88
|
-
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
89
|
-
border-color: #9da5cb;
|
|
90
|
-
}
|
|
91
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
92
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
93
|
-
background-color: #16194d;
|
|
94
|
-
}
|
|
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;
|
|
98
|
-
}
|
|
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;
|
|
104
|
-
}
|
|
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;
|
|
110
|
-
}
|
|
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;
|
|
114
|
-
}
|
|
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;
|
|
118
|
-
}
|
|
119
|
-
.eds-checkbox--disabled {
|
|
120
|
-
pointer-events: none;
|
|
121
|
-
}
|
|
122
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
123
|
-
opacity: 0.5;
|
|
124
|
-
}
|
|
125
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
126
|
-
opacity: 0.5;
|
|
127
|
-
}
|
|
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;
|
|
142
|
-
}
|
|
143
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
144
|
-
margin-right: 0;
|
|
145
|
-
}
|
|
146
|
-
.eds-contrast .eds-checkbox__icon {
|
|
147
|
-
border-color: #aeb7e2;
|
|
148
|
-
}
|
|
149
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
150
|
-
height: 1rem;
|
|
151
|
-
width: 1rem;
|
|
152
|
-
visibility: hidden;
|
|
153
|
-
}
|
|
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
|
-
}
|
|
165
|
-
}
|
|
166
|
-
/* DO NOT CHANGE!*/
|
|
167
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
168
6
|
.eds-form-control-wrapper {
|
|
169
7
|
--border-color: #7C7F9F;
|
|
170
8
|
--border-color-hover: #aeb7e2;
|
|
@@ -370,40 +208,340 @@
|
|
|
370
208
|
padding: 20px 1rem 0.25rem;
|
|
371
209
|
width: 100%;
|
|
372
210
|
}
|
|
373
|
-
.eds-form-control::-moz-placeholder {
|
|
374
|
-
opacity: 0;
|
|
375
|
-
-moz-transition: opacity 0.2s ease-in-out;
|
|
376
|
-
transition: opacity 0.2s ease-in-out;
|
|
211
|
+
.eds-form-control::-moz-placeholder {
|
|
212
|
+
opacity: 0;
|
|
213
|
+
-moz-transition: opacity 0.2s ease-in-out;
|
|
214
|
+
transition: opacity 0.2s ease-in-out;
|
|
215
|
+
}
|
|
216
|
+
.eds-form-control::placeholder {
|
|
217
|
+
opacity: 0;
|
|
218
|
+
transition: opacity 0.2s ease-in-out;
|
|
219
|
+
}
|
|
220
|
+
.eds-form-control:focus {
|
|
221
|
+
outline: none;
|
|
222
|
+
}
|
|
223
|
+
.eds-form-control:focus::-moz-placeholder {
|
|
224
|
+
opacity: 1;
|
|
225
|
+
}
|
|
226
|
+
.eds-form-control:focus::placeholder {
|
|
227
|
+
opacity: 1;
|
|
228
|
+
}
|
|
229
|
+
.eds-form-control__prepend, .eds-form-control__append {
|
|
230
|
+
position: relative;
|
|
231
|
+
margin: 0 1rem;
|
|
232
|
+
line-height: inherit;
|
|
233
|
+
}
|
|
234
|
+
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
235
|
+
position: static;
|
|
236
|
+
}
|
|
237
|
+
.eds-form-control__prepend svg, .eds-form-control__append svg {
|
|
238
|
+
top: 0.125rem;
|
|
239
|
+
}
|
|
240
|
+
.eds-form-control__prepend {
|
|
241
|
+
margin-right: 0;
|
|
242
|
+
}
|
|
243
|
+
.eds-form-control__append {
|
|
244
|
+
margin-left: 0;
|
|
245
|
+
}
|
|
246
|
+
/* DO NOT CHANGE!*/
|
|
247
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
248
|
+
.eds-input-group {
|
|
249
|
+
color: inherit;
|
|
250
|
+
display: block;
|
|
251
|
+
position: relative;
|
|
252
|
+
}
|
|
253
|
+
.eds-input-group__label {
|
|
254
|
+
color: #656782;
|
|
255
|
+
display: flex;
|
|
256
|
+
font-size: 1rem;
|
|
257
|
+
position: absolute;
|
|
258
|
+
line-height: 1rem;
|
|
259
|
+
height: 3rem;
|
|
260
|
+
padding: 1rem;
|
|
261
|
+
padding-left: 0;
|
|
262
|
+
margin-left: 1rem;
|
|
263
|
+
top: -0.125rem;
|
|
264
|
+
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;
|
|
265
|
+
-webkit-user-select: none;
|
|
266
|
+
-moz-user-select: none;
|
|
267
|
+
user-select: none;
|
|
268
|
+
pointer-events: none;
|
|
269
|
+
}
|
|
270
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
271
|
+
top: 0.375rem;
|
|
272
|
+
font-size: 0.75rem;
|
|
273
|
+
line-height: 0.75rem;
|
|
274
|
+
height: 10px;
|
|
275
|
+
padding: 0;
|
|
276
|
+
margin-left: 1rem;
|
|
277
|
+
}
|
|
278
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
279
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
280
|
+
background: var(--textarea-label-background);
|
|
281
|
+
width: calc(
|
|
282
|
+
100% - 1rem - 1rem - 4px
|
|
283
|
+
);
|
|
284
|
+
}
|
|
285
|
+
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
286
|
+
top: 0.5rem;
|
|
287
|
+
font-size: 0.875rem;
|
|
288
|
+
line-height: 1rem;
|
|
289
|
+
padding: 0;
|
|
290
|
+
margin-left: 1rem;
|
|
291
|
+
}
|
|
292
|
+
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
293
|
+
color: #aeb7e2;
|
|
294
|
+
}
|
|
295
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
296
|
+
font-size: 1.5rem;
|
|
297
|
+
line-height: 2.25rem;
|
|
298
|
+
height: 4rem;
|
|
299
|
+
}
|
|
300
|
+
.eds-input-group__label--filled {
|
|
301
|
+
top: 0.375rem;
|
|
302
|
+
font-size: 0.75rem;
|
|
303
|
+
line-height: 0.75rem;
|
|
304
|
+
height: 10px;
|
|
305
|
+
padding: 0;
|
|
306
|
+
margin-left: 1rem;
|
|
307
|
+
}
|
|
308
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
309
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
310
|
+
background: var(--textarea-label-background);
|
|
311
|
+
width: calc(
|
|
312
|
+
100% - 1rem - 1rem - 4px
|
|
313
|
+
);
|
|
314
|
+
}
|
|
315
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
316
|
+
top: 0.5rem;
|
|
317
|
+
font-size: 0.875rem;
|
|
318
|
+
line-height: 1rem;
|
|
319
|
+
padding: 0;
|
|
320
|
+
margin-left: 1rem;
|
|
321
|
+
}
|
|
322
|
+
.eds-input-group__label-tooltip-icon {
|
|
323
|
+
color: #0082b9;
|
|
324
|
+
padding-left: 0.25rem;
|
|
325
|
+
padding-right: 0.25rem;
|
|
326
|
+
display: flex;
|
|
327
|
+
align-items: center;
|
|
328
|
+
cursor: help;
|
|
329
|
+
font-size: 1rem;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
333
|
+
top: 0.375rem;
|
|
334
|
+
font-size: 0.75rem;
|
|
335
|
+
line-height: 0.75rem;
|
|
336
|
+
height: 10px;
|
|
337
|
+
padding: 0;
|
|
338
|
+
margin-left: 1rem;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
342
|
+
top: 0.375rem;
|
|
343
|
+
font-size: 0.75rem;
|
|
344
|
+
line-height: 0.75rem;
|
|
345
|
+
height: 10px;
|
|
346
|
+
padding: 0;
|
|
347
|
+
margin-left: 1rem;
|
|
348
|
+
}
|
|
349
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
350
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
351
|
+
background: var(--textarea-label-background);
|
|
352
|
+
width: calc(
|
|
353
|
+
100% - 1rem - 1rem - 4px
|
|
354
|
+
);
|
|
355
|
+
}
|
|
356
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
357
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
358
|
+
background: var(--textarea-label-background);
|
|
359
|
+
width: calc(
|
|
360
|
+
100% - 1rem - 1rem - 4px
|
|
361
|
+
);
|
|
362
|
+
}
|
|
363
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
364
|
+
top: 0.5rem;
|
|
365
|
+
font-size: 0.875rem;
|
|
366
|
+
line-height: 1rem;
|
|
367
|
+
padding: 0;
|
|
368
|
+
margin-left: 1rem;
|
|
369
|
+
}
|
|
370
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
371
|
+
top: 0.5rem;
|
|
372
|
+
font-size: 0.875rem;
|
|
373
|
+
line-height: 1rem;
|
|
374
|
+
padding: 0;
|
|
375
|
+
margin-left: 1rem;
|
|
376
|
+
}
|
|
377
|
+
/* DO NOT CHANGE!*/
|
|
378
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
379
|
+
.eds-checkbox__container {
|
|
380
|
+
display: flex;
|
|
381
|
+
align-items: center;
|
|
382
|
+
position: relative;
|
|
383
|
+
-webkit-appearance: none;
|
|
384
|
+
-moz-appearance: none;
|
|
385
|
+
appearance: none;
|
|
386
|
+
cursor: pointer;
|
|
387
|
+
-webkit-user-select: none;
|
|
388
|
+
-moz-user-select: none;
|
|
389
|
+
user-select: none;
|
|
390
|
+
width: -moz-fit-content;
|
|
391
|
+
width: fit-content;
|
|
392
|
+
margin: 0.5rem 0;
|
|
393
|
+
}
|
|
394
|
+
.eds-checkbox__container--reduced-click-area {
|
|
395
|
+
height: -moz-fit-content;
|
|
396
|
+
height: fit-content;
|
|
397
|
+
}
|
|
398
|
+
.eds-checkbox__container input {
|
|
399
|
+
position: absolute;
|
|
400
|
+
opacity: 0;
|
|
401
|
+
height: 0;
|
|
402
|
+
width: 0;
|
|
403
|
+
}
|
|
404
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
405
|
+
background-color: #181c56;
|
|
406
|
+
}
|
|
407
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
408
|
+
visibility: visible;
|
|
409
|
+
}
|
|
410
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
411
|
+
stroke: #ffffff;
|
|
412
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
413
|
+
}
|
|
414
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
415
|
+
fill: #ffffff;
|
|
416
|
+
}
|
|
417
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
418
|
+
opacity: 0.5;
|
|
419
|
+
}
|
|
420
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
421
|
+
opacity: 0.5;
|
|
422
|
+
}
|
|
423
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
424
|
+
opacity: 0.5;
|
|
425
|
+
}
|
|
426
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
427
|
+
opacity: 0.5;
|
|
428
|
+
}
|
|
429
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
430
|
+
opacity: 0.5;
|
|
431
|
+
}
|
|
432
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
433
|
+
background-color: #aeb7e2;
|
|
434
|
+
}
|
|
435
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
436
|
+
stroke: #181c56;
|
|
437
|
+
}
|
|
438
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
439
|
+
fill: #181c56;
|
|
440
|
+
}
|
|
441
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
442
|
+
border-color: #292b6a;
|
|
443
|
+
background-color: #d1d4e3;
|
|
444
|
+
}
|
|
445
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
446
|
+
border-color: #b6bee5;
|
|
447
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
448
|
+
}
|
|
449
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
450
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
451
|
+
border-color: transparent;
|
|
452
|
+
background-color: #54568c;
|
|
453
|
+
}
|
|
454
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
455
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
456
|
+
background-color: #b6bee5;
|
|
457
|
+
}
|
|
458
|
+
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
459
|
+
border-color: #16194d;
|
|
460
|
+
}
|
|
461
|
+
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
462
|
+
border-color: #9da5cb;
|
|
377
463
|
}
|
|
378
|
-
.eds-
|
|
379
|
-
|
|
380
|
-
|
|
464
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
465
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
466
|
+
background-color: #16194d;
|
|
381
467
|
}
|
|
382
|
-
.eds-
|
|
468
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
469
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
470
|
+
background-color: #9da5cb;
|
|
471
|
+
}
|
|
472
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
473
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
383
474
|
outline: none;
|
|
475
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
476
|
+
outline-offset: 0.125rem;
|
|
384
477
|
}
|
|
385
|
-
.eds-
|
|
386
|
-
|
|
478
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
479
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
480
|
+
outline: none;
|
|
481
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
482
|
+
outline-offset: 0.125rem;
|
|
387
483
|
}
|
|
388
|
-
.eds-
|
|
389
|
-
|
|
484
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
485
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
486
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
390
487
|
}
|
|
391
|
-
.eds-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
line-height: inherit;
|
|
488
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
489
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
490
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
395
491
|
}
|
|
396
|
-
.eds-
|
|
397
|
-
|
|
492
|
+
.eds-checkbox--disabled {
|
|
493
|
+
pointer-events: none;
|
|
398
494
|
}
|
|
399
|
-
.eds-
|
|
400
|
-
|
|
495
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
496
|
+
opacity: 0.5;
|
|
401
497
|
}
|
|
402
|
-
.eds-
|
|
498
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
499
|
+
opacity: 0.5;
|
|
500
|
+
}
|
|
501
|
+
.eds-checkbox__icon {
|
|
502
|
+
box-sizing: border-box;
|
|
503
|
+
display: inline-flex;
|
|
504
|
+
justify-content: center;
|
|
505
|
+
align-items: center;
|
|
506
|
+
position: relative;
|
|
507
|
+
margin-right: 1rem;
|
|
508
|
+
height: 1.25rem;
|
|
509
|
+
width: 1.25rem;
|
|
510
|
+
border: 0.125rem solid #181c56;
|
|
511
|
+
border-radius: 0.125rem;
|
|
512
|
+
background-color: transparent;
|
|
513
|
+
color: #ffffff;
|
|
514
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
515
|
+
}
|
|
516
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
403
517
|
margin-right: 0;
|
|
404
518
|
}
|
|
405
|
-
.eds-
|
|
406
|
-
|
|
519
|
+
.eds-contrast .eds-checkbox__icon {
|
|
520
|
+
border-color: #aeb7e2;
|
|
521
|
+
}
|
|
522
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
523
|
+
height: 1rem;
|
|
524
|
+
width: 1rem;
|
|
525
|
+
visibility: hidden;
|
|
526
|
+
}
|
|
527
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
528
|
+
transform-origin: 50% 50%;
|
|
529
|
+
stroke-dasharray: 48;
|
|
530
|
+
stroke-dashoffset: 48;
|
|
531
|
+
stroke-width: 0.375rem;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
@keyframes stroke {
|
|
535
|
+
100% {
|
|
536
|
+
stroke-dashoffset: 0;
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
/* DO NOT CHANGE!*/
|
|
540
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
541
|
+
.eds-fieldset {
|
|
542
|
+
margin: 0;
|
|
543
|
+
padding: 0;
|
|
544
|
+
border: 0;
|
|
407
545
|
}
|
|
408
546
|
/* DO NOT CHANGE!*/
|
|
409
547
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -459,13 +597,6 @@
|
|
|
459
597
|
}
|
|
460
598
|
/* DO NOT CHANGE!*/
|
|
461
599
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
462
|
-
.eds-fieldset {
|
|
463
|
-
margin: 0;
|
|
464
|
-
padding: 0;
|
|
465
|
-
border: 0;
|
|
466
|
-
}
|
|
467
|
-
/* DO NOT CHANGE!*/
|
|
468
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
469
600
|
.eds-form-component--radio__container {
|
|
470
601
|
display: flex;
|
|
471
602
|
justify-content: center;
|
|
@@ -561,137 +692,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
561
692
|
}
|
|
562
693
|
/* DO NOT CHANGE!*/
|
|
563
694
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
564
|
-
.eds-input-group {
|
|
565
|
-
color: inherit;
|
|
566
|
-
display: block;
|
|
567
|
-
position: relative;
|
|
568
|
-
}
|
|
569
|
-
.eds-input-group__label {
|
|
570
|
-
color: #656782;
|
|
571
|
-
display: flex;
|
|
572
|
-
font-size: 1rem;
|
|
573
|
-
position: absolute;
|
|
574
|
-
line-height: 1rem;
|
|
575
|
-
height: 3rem;
|
|
576
|
-
padding: 1rem;
|
|
577
|
-
padding-left: 0;
|
|
578
|
-
margin-left: 1rem;
|
|
579
|
-
top: -0.125rem;
|
|
580
|
-
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;
|
|
581
|
-
-webkit-user-select: none;
|
|
582
|
-
-moz-user-select: none;
|
|
583
|
-
user-select: none;
|
|
584
|
-
pointer-events: none;
|
|
585
|
-
}
|
|
586
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
587
|
-
top: 0.375rem;
|
|
588
|
-
font-size: 0.75rem;
|
|
589
|
-
line-height: 0.75rem;
|
|
590
|
-
height: 10px;
|
|
591
|
-
padding: 0;
|
|
592
|
-
margin-left: 1rem;
|
|
593
|
-
}
|
|
594
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
595
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
596
|
-
background: var(--textarea-label-background);
|
|
597
|
-
width: calc(
|
|
598
|
-
100% - 1rem - 1rem - 4px
|
|
599
|
-
);
|
|
600
|
-
}
|
|
601
|
-
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
602
|
-
top: 0.5rem;
|
|
603
|
-
font-size: 0.875rem;
|
|
604
|
-
line-height: 1rem;
|
|
605
|
-
padding: 0;
|
|
606
|
-
margin-left: 1rem;
|
|
607
|
-
}
|
|
608
|
-
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
609
|
-
color: #aeb7e2;
|
|
610
|
-
}
|
|
611
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
612
|
-
font-size: 1.5rem;
|
|
613
|
-
line-height: 2.25rem;
|
|
614
|
-
height: 4rem;
|
|
615
|
-
}
|
|
616
|
-
.eds-input-group__label--filled {
|
|
617
|
-
top: 0.375rem;
|
|
618
|
-
font-size: 0.75rem;
|
|
619
|
-
line-height: 0.75rem;
|
|
620
|
-
height: 10px;
|
|
621
|
-
padding: 0;
|
|
622
|
-
margin-left: 1rem;
|
|
623
|
-
}
|
|
624
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
625
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
626
|
-
background: var(--textarea-label-background);
|
|
627
|
-
width: calc(
|
|
628
|
-
100% - 1rem - 1rem - 4px
|
|
629
|
-
);
|
|
630
|
-
}
|
|
631
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
632
|
-
top: 0.5rem;
|
|
633
|
-
font-size: 0.875rem;
|
|
634
|
-
line-height: 1rem;
|
|
635
|
-
padding: 0;
|
|
636
|
-
margin-left: 1rem;
|
|
637
|
-
}
|
|
638
|
-
.eds-input-group__label-tooltip-icon {
|
|
639
|
-
color: #0082b9;
|
|
640
|
-
padding-left: 0.25rem;
|
|
641
|
-
padding-right: 0.25rem;
|
|
642
|
-
display: flex;
|
|
643
|
-
align-items: center;
|
|
644
|
-
cursor: help;
|
|
645
|
-
font-size: 1rem;
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
.eds-form-control-wrapper[focus-within] .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
|
-
|
|
657
|
-
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
658
|
-
top: 0.375rem;
|
|
659
|
-
font-size: 0.75rem;
|
|
660
|
-
line-height: 0.75rem;
|
|
661
|
-
height: 10px;
|
|
662
|
-
padding: 0;
|
|
663
|
-
margin-left: 1rem;
|
|
664
|
-
}
|
|
665
|
-
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
666
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
667
|
-
background: var(--textarea-label-background);
|
|
668
|
-
width: calc(
|
|
669
|
-
100% - 1rem - 1rem - 4px
|
|
670
|
-
);
|
|
671
|
-
}
|
|
672
|
-
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
673
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
674
|
-
background: var(--textarea-label-background);
|
|
675
|
-
width: calc(
|
|
676
|
-
100% - 1rem - 1rem - 4px
|
|
677
|
-
);
|
|
678
|
-
}
|
|
679
|
-
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
680
|
-
top: 0.5rem;
|
|
681
|
-
font-size: 0.875rem;
|
|
682
|
-
line-height: 1rem;
|
|
683
|
-
padding: 0;
|
|
684
|
-
margin-left: 1rem;
|
|
685
|
-
}
|
|
686
|
-
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
687
|
-
top: 0.5rem;
|
|
688
|
-
font-size: 0.875rem;
|
|
689
|
-
line-height: 1rem;
|
|
690
|
-
padding: 0;
|
|
691
|
-
margin-left: 1rem;
|
|
692
|
-
}
|
|
693
|
-
/* DO NOT CHANGE!*/
|
|
694
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
695
695
|
.eds-switch {
|
|
696
696
|
cursor: pointer;
|
|
697
697
|
-webkit-user-select: none;
|
|
@@ -848,17 +848,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
848
848
|
}
|
|
849
849
|
/* DO NOT CHANGE!*/
|
|
850
850
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
851
|
-
.eds-segmented-control {
|
|
852
|
-
margin-top: 0.25rem;
|
|
853
|
-
display: flex;
|
|
854
|
-
background: #d1d4e3;
|
|
855
|
-
border-radius: 0.5rem;
|
|
856
|
-
}
|
|
857
|
-
.eds-contrast .eds-segmented-control {
|
|
858
|
-
background: #393d79;
|
|
859
|
-
}
|
|
860
|
-
/* DO NOT CHANGE!*/
|
|
861
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
862
851
|
.eds-segmented-choice {
|
|
863
852
|
display: block;
|
|
864
853
|
flex: 1 1 0px;
|
|
@@ -930,6 +919,17 @@ textarea.eds-form-control.eds-textarea {
|
|
|
930
919
|
}
|
|
931
920
|
/* DO NOT CHANGE!*/
|
|
932
921
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
922
|
+
.eds-segmented-control {
|
|
923
|
+
margin-top: 0.25rem;
|
|
924
|
+
display: flex;
|
|
925
|
+
background: #d1d4e3;
|
|
926
|
+
border-radius: 0.5rem;
|
|
927
|
+
}
|
|
928
|
+
.eds-contrast .eds-segmented-control {
|
|
929
|
+
background: #393d79;
|
|
930
|
+
}
|
|
931
|
+
/* DO NOT CHANGE!*/
|
|
932
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
933
933
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
934
934
|
border-color: #181c56;
|
|
935
935
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.9",
|
|
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.
|
|
30
|
+
"@entur/icons": "^6.3.0",
|
|
31
31
|
"@entur/tokens": "^3.9.0",
|
|
32
|
-
"@entur/tooltip": "^2.6.
|
|
33
|
-
"@entur/typography": "^1.
|
|
32
|
+
"@entur/tooltip": "^2.6.19",
|
|
33
|
+
"@entur/typography": "^1.8.0",
|
|
34
34
|
"@entur/utils": "^0.9.0",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "8f124a94b17be084024892eca96ab800f18ceca2"
|
|
38
38
|
}
|