@entur/form 8.1.5 → 8.1.6
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 +299 -299
- package/package.json +8 -8
package/dist/styles.css
CHANGED
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
.eds-fieldset {
|
|
2
|
-
margin: 0;
|
|
3
|
-
padding: 0;
|
|
4
|
-
border: 0;
|
|
5
|
-
}
|
|
6
1
|
/* DO NOT CHANGE!*/
|
|
7
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
8
3
|
.eds-feedback-text {
|
|
@@ -76,160 +71,10 @@
|
|
|
76
71
|
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
77
72
|
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
78
73
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
align-items: center;
|
|
84
|
-
position: relative;
|
|
85
|
-
-webkit-appearance: none;
|
|
86
|
-
-moz-appearance: none;
|
|
87
|
-
appearance: none;
|
|
88
|
-
cursor: pointer;
|
|
89
|
-
-webkit-user-select: none;
|
|
90
|
-
-moz-user-select: none;
|
|
91
|
-
user-select: none;
|
|
92
|
-
width: -moz-fit-content;
|
|
93
|
-
width: fit-content;
|
|
94
|
-
margin: 0.5rem 0;
|
|
95
|
-
}
|
|
96
|
-
.eds-checkbox__container--reduced-click-area {
|
|
97
|
-
height: -moz-fit-content;
|
|
98
|
-
height: fit-content;
|
|
99
|
-
}
|
|
100
|
-
.eds-checkbox__container input {
|
|
101
|
-
position: absolute;
|
|
102
|
-
opacity: 0;
|
|
103
|
-
height: 0;
|
|
104
|
-
width: 0;
|
|
105
|
-
}
|
|
106
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
107
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
108
|
-
}
|
|
109
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
110
|
-
visibility: visible;
|
|
111
|
-
}
|
|
112
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
113
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
114
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
115
|
-
}
|
|
116
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
117
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
118
|
-
}
|
|
119
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
120
|
-
opacity: 0.5;
|
|
121
|
-
}
|
|
122
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
123
|
-
opacity: 0.5;
|
|
124
|
-
}
|
|
125
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
126
|
-
opacity: 0.5;
|
|
127
|
-
}
|
|
128
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
129
|
-
opacity: 0.5;
|
|
130
|
-
}
|
|
131
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
132
|
-
opacity: 0.5;
|
|
133
|
-
}
|
|
134
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
135
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
136
|
-
}
|
|
137
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
138
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
139
|
-
}
|
|
140
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
141
|
-
fill: var(--components-form-checkbox-contrast-icon);
|
|
142
|
-
}
|
|
143
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
144
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
145
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
146
|
-
}
|
|
147
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
148
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
149
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
150
|
-
}
|
|
151
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
152
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
153
|
-
border-color: transparent;
|
|
154
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
155
|
-
}
|
|
156
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
157
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
158
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
159
|
-
}
|
|
160
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
161
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
162
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
163
|
-
}
|
|
164
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
165
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
166
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
167
|
-
}
|
|
168
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
169
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
170
|
-
outline: 2px solid #181c56;
|
|
171
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
172
|
-
outline-offset: 0.125rem;
|
|
173
|
-
}
|
|
174
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
175
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
176
|
-
outline: 2px solid #181c56;
|
|
177
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
178
|
-
outline-offset: 0.125rem;
|
|
179
|
-
}
|
|
180
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
181
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
182
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
183
|
-
}
|
|
184
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
185
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
186
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
187
|
-
}
|
|
188
|
-
.eds-checkbox--disabled {
|
|
189
|
-
pointer-events: none;
|
|
190
|
-
}
|
|
191
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
192
|
-
opacity: 0.5;
|
|
193
|
-
}
|
|
194
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
195
|
-
opacity: 0.5;
|
|
196
|
-
}
|
|
197
|
-
.eds-checkbox__icon {
|
|
198
|
-
box-sizing: border-box;
|
|
199
|
-
display: inline-flex;
|
|
200
|
-
justify-content: center;
|
|
201
|
-
align-items: center;
|
|
202
|
-
position: relative;
|
|
203
|
-
margin-right: 1rem;
|
|
204
|
-
height: 1.25rem;
|
|
205
|
-
width: 1.25rem;
|
|
206
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
207
|
-
border-radius: 0.125rem;
|
|
208
|
-
background-color: transparent;
|
|
209
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
210
|
-
}
|
|
211
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
212
|
-
margin-right: 0;
|
|
213
|
-
}
|
|
214
|
-
.eds-contrast .eds-checkbox__icon {
|
|
215
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
216
|
-
}
|
|
217
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
218
|
-
height: 1rem;
|
|
219
|
-
width: 1rem;
|
|
220
|
-
visibility: hidden;
|
|
221
|
-
}
|
|
222
|
-
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
223
|
-
transform-origin: 50% 50%;
|
|
224
|
-
stroke-dasharray: 48;
|
|
225
|
-
stroke-dashoffset: 48;
|
|
226
|
-
stroke-width: 0.375rem;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
@keyframes stroke {
|
|
230
|
-
100% {
|
|
231
|
-
stroke-dashoffset: 0;
|
|
232
|
-
}
|
|
74
|
+
.eds-fieldset {
|
|
75
|
+
margin: 0;
|
|
76
|
+
padding: 0;
|
|
77
|
+
border: 0;
|
|
233
78
|
}
|
|
234
79
|
/* DO NOT CHANGE!*/
|
|
235
80
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -442,90 +287,264 @@
|
|
|
442
287
|
}
|
|
443
288
|
/* DO NOT CHANGE!*/
|
|
444
289
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
445
|
-
.eds-
|
|
290
|
+
.eds-checkbox__container {
|
|
446
291
|
display: flex;
|
|
447
|
-
justify-content: center;
|
|
448
292
|
align-items: center;
|
|
449
293
|
position: relative;
|
|
294
|
+
-webkit-appearance: none;
|
|
295
|
+
-moz-appearance: none;
|
|
296
|
+
appearance: none;
|
|
450
297
|
cursor: pointer;
|
|
451
|
-
height: 2rem;
|
|
452
|
-
width: -moz-fit-content;
|
|
453
|
-
width: fit-content;
|
|
454
298
|
-webkit-user-select: none;
|
|
455
299
|
-moz-user-select: none;
|
|
456
300
|
user-select: none;
|
|
301
|
+
width: -moz-fit-content;
|
|
302
|
+
width: fit-content;
|
|
303
|
+
margin: 0.5rem 0;
|
|
457
304
|
}
|
|
458
|
-
.eds-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
462
|
-
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
305
|
+
.eds-checkbox__container--reduced-click-area {
|
|
306
|
+
height: -moz-fit-content;
|
|
307
|
+
height: fit-content;
|
|
463
308
|
}
|
|
464
|
-
.eds-
|
|
309
|
+
.eds-checkbox__container input {
|
|
465
310
|
position: absolute;
|
|
466
311
|
opacity: 0;
|
|
467
|
-
cursor: pointer;
|
|
468
312
|
height: 0;
|
|
469
313
|
width: 0;
|
|
470
314
|
}
|
|
471
|
-
.eds-
|
|
472
|
-
|
|
473
|
-
width: 0.625rem;
|
|
315
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
316
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
474
317
|
}
|
|
475
|
-
.eds-
|
|
476
|
-
|
|
477
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
478
|
-
outline-offset: 0.125rem;
|
|
318
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
319
|
+
visibility: visible;
|
|
479
320
|
}
|
|
480
|
-
.eds-
|
|
481
|
-
|
|
321
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
322
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
323
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
482
324
|
}
|
|
483
|
-
.eds-
|
|
484
|
-
|
|
485
|
-
height: 1.25rem;
|
|
486
|
-
width: 1.25rem;
|
|
487
|
-
margin-right: 1rem;
|
|
488
|
-
background-color: var(--components-form-radio-standard-fill-default);
|
|
489
|
-
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
490
|
-
border-radius: 50%;
|
|
491
|
-
display: flex;
|
|
492
|
-
align-items: center;
|
|
493
|
-
justify-content: center;
|
|
325
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
326
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
494
327
|
}
|
|
495
|
-
.eds-
|
|
496
|
-
|
|
497
|
-
border-color: var(--components-form-radio-contrast-border);
|
|
328
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
329
|
+
opacity: 0.5;
|
|
498
330
|
}
|
|
499
|
-
.eds-
|
|
500
|
-
|
|
501
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
502
|
-
cursor: not-allowed;
|
|
331
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
332
|
+
opacity: 0.5;
|
|
503
333
|
}
|
|
504
|
-
.eds-
|
|
505
|
-
|
|
334
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
335
|
+
opacity: 0.5;
|
|
506
336
|
}
|
|
507
|
-
.eds-
|
|
508
|
-
|
|
509
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
337
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
338
|
+
opacity: 0.5;
|
|
510
339
|
}
|
|
511
|
-
.eds-
|
|
512
|
-
|
|
340
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
341
|
+
opacity: 0.5;
|
|
513
342
|
}
|
|
514
|
-
.eds-
|
|
515
|
-
|
|
516
|
-
width: 0;
|
|
517
|
-
height: 0;
|
|
518
|
-
border-radius: 50%;
|
|
519
|
-
background-color: var(--components-form-radio-standard-fill-selected);
|
|
520
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
343
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
344
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
521
345
|
}
|
|
522
|
-
.eds-contrast .eds-
|
|
523
|
-
|
|
346
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
347
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
524
348
|
}
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
349
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
350
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
351
|
+
}
|
|
352
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
353
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
354
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
355
|
+
}
|
|
356
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
357
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
358
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
359
|
+
}
|
|
360
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
361
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
362
|
+
border-color: transparent;
|
|
363
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
364
|
+
}
|
|
365
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
366
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
367
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
368
|
+
}
|
|
369
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
370
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
371
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
372
|
+
}
|
|
373
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
374
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
375
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
376
|
+
}
|
|
377
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
378
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
379
|
+
outline: 2px solid #181c56;
|
|
380
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
381
|
+
outline-offset: 0.125rem;
|
|
382
|
+
}
|
|
383
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
384
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
385
|
+
outline: 2px solid #181c56;
|
|
386
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
387
|
+
outline-offset: 0.125rem;
|
|
388
|
+
}
|
|
389
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
390
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
391
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
392
|
+
}
|
|
393
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
394
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
395
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
396
|
+
}
|
|
397
|
+
.eds-checkbox--disabled {
|
|
398
|
+
pointer-events: none;
|
|
399
|
+
}
|
|
400
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
401
|
+
opacity: 0.5;
|
|
402
|
+
}
|
|
403
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
404
|
+
opacity: 0.5;
|
|
405
|
+
}
|
|
406
|
+
.eds-checkbox__icon {
|
|
407
|
+
box-sizing: border-box;
|
|
408
|
+
display: inline-flex;
|
|
409
|
+
justify-content: center;
|
|
410
|
+
align-items: center;
|
|
411
|
+
position: relative;
|
|
412
|
+
margin-right: 1rem;
|
|
413
|
+
height: 1.25rem;
|
|
414
|
+
width: 1.25rem;
|
|
415
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
416
|
+
border-radius: 0.125rem;
|
|
417
|
+
background-color: transparent;
|
|
418
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
419
|
+
}
|
|
420
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
421
|
+
margin-right: 0;
|
|
422
|
+
}
|
|
423
|
+
.eds-contrast .eds-checkbox__icon {
|
|
424
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
425
|
+
}
|
|
426
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
427
|
+
height: 1rem;
|
|
428
|
+
width: 1rem;
|
|
429
|
+
visibility: hidden;
|
|
430
|
+
}
|
|
431
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
432
|
+
transform-origin: 50% 50%;
|
|
433
|
+
stroke-dasharray: 48;
|
|
434
|
+
stroke-dashoffset: 48;
|
|
435
|
+
stroke-width: 0.375rem;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
@keyframes stroke {
|
|
439
|
+
100% {
|
|
440
|
+
stroke-dashoffset: 0;
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
/* DO NOT CHANGE!*/
|
|
444
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
445
|
+
.eds-input-group {
|
|
446
|
+
color: inherit;
|
|
447
|
+
display: block;
|
|
448
|
+
position: relative;
|
|
449
|
+
}
|
|
450
|
+
.eds-input-group__label {
|
|
451
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
452
|
+
display: flex;
|
|
453
|
+
font-size: 1rem;
|
|
454
|
+
position: absolute;
|
|
455
|
+
line-height: 1rem;
|
|
456
|
+
height: 3rem;
|
|
457
|
+
padding-left: 0;
|
|
458
|
+
top: 1rem;
|
|
459
|
+
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;
|
|
460
|
+
-webkit-user-select: none;
|
|
461
|
+
-moz-user-select: none;
|
|
462
|
+
user-select: none;
|
|
463
|
+
pointer-events: none;
|
|
464
|
+
}
|
|
465
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
466
|
+
top: 0.375rem;
|
|
467
|
+
font-size: 0.75rem;
|
|
468
|
+
line-height: 0.75rem;
|
|
469
|
+
height: 10px;
|
|
470
|
+
padding: 0;
|
|
471
|
+
}
|
|
472
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
473
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
474
|
+
background: var(--textarea-label-background);
|
|
475
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
476
|
+
}
|
|
477
|
+
.eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
478
|
+
top: 0.5rem;
|
|
479
|
+
font-size: 0.875rem;
|
|
480
|
+
line-height: 1rem;
|
|
481
|
+
padding: 0;
|
|
482
|
+
}
|
|
483
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
484
|
+
top: 0.75rem;
|
|
485
|
+
font-size: 1.5rem;
|
|
486
|
+
line-height: 2.25rem;
|
|
487
|
+
}
|
|
488
|
+
.eds-input-group__label--filled {
|
|
489
|
+
top: 0.375rem;
|
|
490
|
+
font-size: 0.75rem;
|
|
491
|
+
line-height: 0.75rem;
|
|
492
|
+
height: 10px;
|
|
493
|
+
padding: 0;
|
|
494
|
+
}
|
|
495
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
496
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
497
|
+
background: var(--textarea-label-background);
|
|
498
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
499
|
+
}
|
|
500
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
501
|
+
top: 0.5rem;
|
|
502
|
+
font-size: 0.875rem;
|
|
503
|
+
line-height: 1rem;
|
|
504
|
+
padding: 0;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
508
|
+
top: 0.375rem;
|
|
509
|
+
font-size: 0.75rem;
|
|
510
|
+
line-height: 0.75rem;
|
|
511
|
+
height: 10px;
|
|
512
|
+
padding: 0;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
516
|
+
top: 0.375rem;
|
|
517
|
+
font-size: 0.75rem;
|
|
518
|
+
line-height: 0.75rem;
|
|
519
|
+
height: 10px;
|
|
520
|
+
padding: 0;
|
|
521
|
+
}
|
|
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(100% - 1rem - 1rem - 4px);
|
|
526
|
+
}
|
|
527
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
528
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
529
|
+
background: var(--textarea-label-background);
|
|
530
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
531
|
+
}
|
|
532
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
533
|
+
top: 0.5rem;
|
|
534
|
+
font-size: 0.875rem;
|
|
535
|
+
line-height: 1rem;
|
|
536
|
+
padding: 0;
|
|
537
|
+
}
|
|
538
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
539
|
+
top: 0.5rem;
|
|
540
|
+
font-size: 0.875rem;
|
|
541
|
+
line-height: 1rem;
|
|
542
|
+
padding: 0;
|
|
543
|
+
}
|
|
544
|
+
/* DO NOT CHANGE!*/
|
|
545
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
546
|
+
.eds-switch {
|
|
547
|
+
cursor: pointer;
|
|
529
548
|
-webkit-user-select: none;
|
|
530
549
|
-moz-user-select: none;
|
|
531
550
|
user-select: none;
|
|
@@ -643,104 +662,85 @@
|
|
|
643
662
|
}
|
|
644
663
|
/* DO NOT CHANGE!*/
|
|
645
664
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
646
|
-
.eds-
|
|
647
|
-
color: inherit;
|
|
648
|
-
display: block;
|
|
649
|
-
position: relative;
|
|
650
|
-
}
|
|
651
|
-
.eds-input-group__label {
|
|
652
|
-
color: var(--components-form-baseform-standard-text-label);
|
|
665
|
+
.eds-form-component--radio__container {
|
|
653
666
|
display: flex;
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
667
|
+
justify-content: center;
|
|
668
|
+
align-items: center;
|
|
669
|
+
position: relative;
|
|
670
|
+
cursor: pointer;
|
|
671
|
+
height: 2rem;
|
|
672
|
+
width: -moz-fit-content;
|
|
673
|
+
width: fit-content;
|
|
661
674
|
-webkit-user-select: none;
|
|
662
675
|
-moz-user-select: none;
|
|
663
676
|
user-select: none;
|
|
664
|
-
pointer-events: none;
|
|
665
677
|
}
|
|
666
|
-
.eds-form-
|
|
667
|
-
|
|
668
|
-
font-size: 0.75rem;
|
|
669
|
-
line-height: 0.75rem;
|
|
670
|
-
height: 10px;
|
|
671
|
-
padding: 0;
|
|
678
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
679
|
+
background-color: var(--components-form-radio-standard-fill-hover);
|
|
672
680
|
}
|
|
673
|
-
.eds-
|
|
674
|
-
|
|
675
|
-
background: var(--textarea-label-background);
|
|
676
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
681
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
682
|
+
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
677
683
|
}
|
|
678
|
-
.eds-form-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
684
|
+
.eds-form-component--radio__container input {
|
|
685
|
+
position: absolute;
|
|
686
|
+
opacity: 0;
|
|
687
|
+
cursor: pointer;
|
|
688
|
+
height: 0;
|
|
689
|
+
width: 0;
|
|
683
690
|
}
|
|
684
|
-
.eds-form-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
line-height: 2.25rem;
|
|
691
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
692
|
+
height: 0.625rem;
|
|
693
|
+
width: 0.625rem;
|
|
688
694
|
}
|
|
689
|
-
.eds-input-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
height: 10px;
|
|
694
|
-
padding: 0;
|
|
695
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
696
|
+
outline: 2px solid #181c56;
|
|
697
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
698
|
+
outline-offset: 0.125rem;
|
|
695
699
|
}
|
|
696
|
-
.eds-
|
|
697
|
-
|
|
698
|
-
background: var(--textarea-label-background);
|
|
699
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
700
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
701
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
700
702
|
}
|
|
701
|
-
.eds-form-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
703
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
704
|
+
position: relative;
|
|
705
|
+
height: 1.25rem;
|
|
706
|
+
width: 1.25rem;
|
|
707
|
+
margin-right: 1rem;
|
|
708
|
+
background-color: var(--components-form-radio-standard-fill-default);
|
|
709
|
+
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
710
|
+
border-radius: 50%;
|
|
711
|
+
display: flex;
|
|
712
|
+
align-items: center;
|
|
713
|
+
justify-content: center;
|
|
706
714
|
}
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
font-size: 0.75rem;
|
|
711
|
-
line-height: 0.75rem;
|
|
712
|
-
height: 10px;
|
|
713
|
-
padding: 0;
|
|
715
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
716
|
+
background-color: var(--components-form-radio-contrast-fill-default);
|
|
717
|
+
border-color: var(--components-form-radio-contrast-border);
|
|
714
718
|
}
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
line-height: 0.75rem;
|
|
720
|
-
height: 10px;
|
|
721
|
-
padding: 0;
|
|
719
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
720
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
721
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
722
|
+
cursor: not-allowed;
|
|
722
723
|
}
|
|
723
|
-
.eds-
|
|
724
|
-
|
|
725
|
-
background: var(--textarea-label-background);
|
|
726
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
724
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
725
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
727
726
|
}
|
|
728
|
-
.eds-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
727
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
728
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
729
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
732
730
|
}
|
|
733
|
-
.eds-form-
|
|
734
|
-
|
|
735
|
-
font-size: 0.875rem;
|
|
736
|
-
line-height: 1rem;
|
|
737
|
-
padding: 0;
|
|
731
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
732
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
738
733
|
}
|
|
739
|
-
.eds-form-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
734
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
735
|
+
display: block;
|
|
736
|
+
width: 0;
|
|
737
|
+
height: 0;
|
|
738
|
+
border-radius: 50%;
|
|
739
|
+
background-color: var(--components-form-radio-standard-fill-selected);
|
|
740
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
741
|
+
}
|
|
742
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
743
|
+
background-color: var(--components-form-radio-contrast-icon);
|
|
744
744
|
}
|
|
745
745
|
/* DO NOT CHANGE!*/
|
|
746
746
|
/* 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": "8.1.
|
|
3
|
+
"version": "8.1.6",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/form.esm.js",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
],
|
|
11
11
|
"repository": {
|
|
12
12
|
"type": "git",
|
|
13
|
-
"url": "https://
|
|
13
|
+
"url": "https://github.com/entur/design-system.git",
|
|
14
14
|
"directory": "packages/form"
|
|
15
15
|
},
|
|
16
16
|
"publishConfig": {
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/icons": "^7.4.
|
|
31
|
-
"@entur/tokens": "^3.17.
|
|
32
|
-
"@entur/tooltip": "^5.1.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
34
|
-
"@entur/utils": "^0.12.
|
|
30
|
+
"@entur/icons": "^7.4.3",
|
|
31
|
+
"@entur/tokens": "^3.17.3",
|
|
32
|
+
"@entur/tooltip": "^5.1.2",
|
|
33
|
+
"@entur/typography": "^1.8.48",
|
|
34
|
+
"@entur/utils": "^0.12.1",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "214480c52396a9b6f7133bdb21c81986e69c5ec4"
|
|
38
38
|
}
|