@entur/form 7.0.40 → 7.0.41
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 +366 -366
- package/package.json +4 -4
package/dist/styles.css
CHANGED
|
@@ -1,157 +1,80 @@
|
|
|
1
|
+
.eds-fieldset {
|
|
2
|
+
margin: 0;
|
|
3
|
+
padding: 0;
|
|
4
|
+
border: 0;
|
|
5
|
+
}
|
|
1
6
|
/* DO NOT CHANGE!*/
|
|
2
7
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-
|
|
8
|
+
.eds-feedback-text {
|
|
4
9
|
display: flex;
|
|
5
10
|
align-items: center;
|
|
6
|
-
|
|
7
|
-
-webkit-appearance: none;
|
|
8
|
-
-moz-appearance: none;
|
|
9
|
-
appearance: none;
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
-webkit-user-select: none;
|
|
12
|
-
-moz-user-select: none;
|
|
13
|
-
user-select: none;
|
|
14
|
-
width: -moz-fit-content;
|
|
15
|
-
width: fit-content;
|
|
16
|
-
margin: 0.5rem 0;
|
|
17
|
-
}
|
|
18
|
-
.eds-checkbox__container--reduced-click-area {
|
|
19
|
-
height: -moz-fit-content;
|
|
20
|
-
height: fit-content;
|
|
21
|
-
}
|
|
22
|
-
.eds-checkbox__container input {
|
|
23
|
-
position: absolute;
|
|
24
|
-
opacity: 0;
|
|
25
|
-
height: 0;
|
|
26
|
-
width: 0;
|
|
27
|
-
}
|
|
28
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
29
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
30
|
-
}
|
|
31
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
32
|
-
visibility: visible;
|
|
33
|
-
}
|
|
34
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
35
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
36
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
37
|
-
}
|
|
38
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
39
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
40
|
-
}
|
|
41
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
42
|
-
opacity: 0.5;
|
|
43
|
-
}
|
|
44
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
45
|
-
opacity: 0.5;
|
|
46
|
-
}
|
|
47
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
48
|
-
opacity: 0.5;
|
|
49
|
-
}
|
|
50
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
51
|
-
opacity: 0.5;
|
|
52
|
-
}
|
|
53
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
54
|
-
opacity: 0.5;
|
|
55
|
-
}
|
|
56
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
57
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
58
|
-
}
|
|
59
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
60
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
11
|
+
margin-top: 0.25rem;
|
|
61
12
|
}
|
|
62
|
-
.eds-
|
|
63
|
-
|
|
13
|
+
.eds-feedback-text--info {
|
|
14
|
+
padding-left: calc(1rem + 0.125rem);
|
|
64
15
|
}
|
|
65
|
-
.eds-
|
|
66
|
-
|
|
67
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
16
|
+
.eds-feedback-text__text {
|
|
17
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
68
18
|
}
|
|
69
|
-
.eds-contrast .eds-
|
|
70
|
-
|
|
71
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
19
|
+
.eds-contrast .eds-feedback-text__text {
|
|
20
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
72
21
|
}
|
|
73
|
-
|
|
74
|
-
.eds-
|
|
75
|
-
|
|
76
|
-
|
|
22
|
+
|
|
23
|
+
.eds-feedback-text__icon {
|
|
24
|
+
font-size: 1.5rem;
|
|
25
|
+
min-height: 1.5rem;
|
|
26
|
+
min-width: 1.5rem;
|
|
27
|
+
padding-right: 0.5rem;
|
|
28
|
+
position: relative;
|
|
29
|
+
top: -0.1rem;
|
|
77
30
|
}
|
|
78
|
-
.eds-
|
|
79
|
-
|
|
80
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
31
|
+
.eds-feedback-text__icon--success {
|
|
32
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
81
33
|
}
|
|
82
|
-
.eds-
|
|
83
|
-
|
|
84
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
34
|
+
.eds-feedback-text__icon--success circle {
|
|
35
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
85
36
|
}
|
|
86
|
-
.eds-contrast .eds-
|
|
87
|
-
|
|
88
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
37
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
38
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
89
39
|
}
|
|
90
|
-
.eds-
|
|
91
|
-
|
|
92
|
-
outline: 2px solid #181c56;
|
|
93
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
94
|
-
outline-offset: 0.125rem;
|
|
40
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
41
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
95
42
|
}
|
|
96
|
-
.eds-
|
|
97
|
-
|
|
98
|
-
outline: 2px solid #181c56;
|
|
99
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
100
|
-
outline-offset: 0.125rem;
|
|
43
|
+
.eds-feedback-text__icon--error {
|
|
44
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
101
45
|
}
|
|
102
|
-
.eds-
|
|
103
|
-
|
|
104
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
46
|
+
.eds-feedback-text__icon--error circle {
|
|
47
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
105
48
|
}
|
|
106
|
-
.eds-contrast .eds-
|
|
107
|
-
|
|
108
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
49
|
+
.eds-contrast .eds-feedback-text__icon--error {
|
|
50
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
109
51
|
}
|
|
110
|
-
.eds-
|
|
111
|
-
|
|
52
|
+
.eds-contrast .eds-feedback-text__icon--error circle {
|
|
53
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
112
54
|
}
|
|
113
|
-
.eds-
|
|
114
|
-
|
|
55
|
+
.eds-feedback-text__icon--info {
|
|
56
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
115
57
|
}
|
|
116
|
-
.eds-
|
|
117
|
-
|
|
58
|
+
.eds-feedback-text__icon--info circle {
|
|
59
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
118
60
|
}
|
|
119
|
-
.eds-
|
|
120
|
-
|
|
121
|
-
display: inline-flex;
|
|
122
|
-
justify-content: center;
|
|
123
|
-
align-items: center;
|
|
124
|
-
position: relative;
|
|
125
|
-
margin-right: 1rem;
|
|
126
|
-
height: 1.25rem;
|
|
127
|
-
width: 1.25rem;
|
|
128
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
129
|
-
border-radius: 0.125rem;
|
|
130
|
-
background-color: transparent;
|
|
131
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
61
|
+
.eds-contrast .eds-feedback-text__icon--info {
|
|
62
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
132
63
|
}
|
|
133
|
-
.eds-
|
|
134
|
-
|
|
64
|
+
.eds-contrast .eds-feedback-text__icon--info circle {
|
|
65
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
135
66
|
}
|
|
136
|
-
.eds-
|
|
137
|
-
|
|
67
|
+
.eds-feedback-text__icon--warning {
|
|
68
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
138
69
|
}
|
|
139
|
-
.eds-
|
|
140
|
-
|
|
141
|
-
width: 1rem;
|
|
142
|
-
visibility: hidden;
|
|
70
|
+
.eds-feedback-text__icon--warning circle {
|
|
71
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
143
72
|
}
|
|
144
|
-
.eds-
|
|
145
|
-
|
|
146
|
-
stroke-dasharray: 48;
|
|
147
|
-
stroke-dashoffset: 48;
|
|
148
|
-
stroke-width: 0.375rem;
|
|
73
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
74
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
149
75
|
}
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
100% {
|
|
153
|
-
stroke-dashoffset: 0;
|
|
154
|
-
}
|
|
76
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
77
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
155
78
|
}
|
|
156
79
|
/* DO NOT CHANGE!*/
|
|
157
80
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -340,250 +263,53 @@
|
|
|
340
263
|
}
|
|
341
264
|
/* DO NOT CHANGE!*/
|
|
342
265
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
343
|
-
.eds-
|
|
344
|
-
|
|
266
|
+
.eds-input-group {
|
|
267
|
+
color: inherit;
|
|
268
|
+
display: block;
|
|
269
|
+
position: relative;
|
|
270
|
+
}
|
|
271
|
+
.eds-input-group__label {
|
|
272
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
273
|
+
display: flex;
|
|
274
|
+
font-size: 1rem;
|
|
275
|
+
position: absolute;
|
|
276
|
+
line-height: 1rem;
|
|
277
|
+
height: 3rem;
|
|
278
|
+
padding: 1rem;
|
|
279
|
+
padding-left: 0;
|
|
280
|
+
margin-left: 1rem;
|
|
281
|
+
top: -0.125rem;
|
|
282
|
+
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;
|
|
345
283
|
-webkit-user-select: none;
|
|
346
284
|
-moz-user-select: none;
|
|
347
285
|
user-select: none;
|
|
348
|
-
padding: 0.5rem 0;
|
|
349
|
-
width: -moz-fit-content;
|
|
350
|
-
width: fit-content;
|
|
351
|
-
}
|
|
352
|
-
.eds-switch input {
|
|
353
|
-
opacity: 0;
|
|
354
286
|
pointer-events: none;
|
|
355
|
-
position: absolute;
|
|
356
287
|
}
|
|
357
|
-
.eds-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
288
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
289
|
+
top: 0.375rem;
|
|
290
|
+
font-size: 0.75rem;
|
|
291
|
+
line-height: 0.75rem;
|
|
292
|
+
height: 10px;
|
|
293
|
+
padding: 0;
|
|
294
|
+
margin-left: 1rem;
|
|
361
295
|
}
|
|
362
|
-
.eds-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
296
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
297
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
298
|
+
background: var(--textarea-label-background);
|
|
299
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
366
300
|
}
|
|
367
|
-
.eds-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
align-items: center;
|
|
374
|
-
justify-content: center;
|
|
375
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
376
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
377
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
378
|
-
top: 0.125rem;
|
|
379
|
-
left: 0.125rem;
|
|
380
|
-
position: relative;
|
|
301
|
+
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
302
|
+
top: 0.5rem;
|
|
303
|
+
font-size: 0.875rem;
|
|
304
|
+
line-height: 1rem;
|
|
305
|
+
padding: 0;
|
|
306
|
+
margin-left: 1rem;
|
|
381
307
|
}
|
|
382
|
-
.eds-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
388
|
-
}
|
|
389
|
-
.eds-switch__switch {
|
|
390
|
-
position: relative;
|
|
391
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
392
|
-
content: "";
|
|
393
|
-
display: block;
|
|
394
|
-
transition: background-color 0.1s ease-in-out;
|
|
395
|
-
height: 1.5rem;
|
|
396
|
-
width: 3rem;
|
|
397
|
-
border-radius: 1.5rem;
|
|
398
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
399
|
-
}
|
|
400
|
-
.eds-contrast .eds-switch__switch {
|
|
401
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
402
|
-
}
|
|
403
|
-
.eds-switch--right .eds-switch__switch {
|
|
404
|
-
margin-right: 0.75rem;
|
|
405
|
-
}
|
|
406
|
-
.eds-switch__switch svg g,
|
|
407
|
-
.eds-switch__switch path {
|
|
408
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
409
|
-
transition: fill ease-in-out 0.1s;
|
|
410
|
-
}
|
|
411
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
412
|
-
.eds-contrast .eds-switch__switch path {
|
|
413
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
414
|
-
}
|
|
415
|
-
:checked + .eds-switch__switch {
|
|
416
|
-
background-color: var(--eds-switch-color);
|
|
417
|
-
}
|
|
418
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
419
|
-
left: 1.625rem;
|
|
420
|
-
}
|
|
421
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
422
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
423
|
-
fill: var(--eds-switch-color);
|
|
424
|
-
}
|
|
425
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
426
|
-
background-color: var(--eds-switch-contrast-color);
|
|
427
|
-
}
|
|
428
|
-
:focus + .eds-switch__switch {
|
|
429
|
-
outline: 2px solid #181c56;
|
|
430
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
431
|
-
outline-offset: 0.125rem;
|
|
432
|
-
}
|
|
433
|
-
.eds-contrast :focus + .eds-switch__switch {
|
|
434
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
435
|
-
}
|
|
436
|
-
.eds-switch__switch--large {
|
|
437
|
-
width: 3.75rem;
|
|
438
|
-
height: 2rem;
|
|
439
|
-
border-radius: 3.75rem;
|
|
440
|
-
}
|
|
441
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
442
|
-
left: 1.875rem;
|
|
443
|
-
}
|
|
444
|
-
.eds-switch__switch--large svg {
|
|
445
|
-
position: relative;
|
|
446
|
-
right: 0.05rem;
|
|
447
|
-
}
|
|
448
|
-
.eds-switch__label--large--right {
|
|
449
|
-
font-size: 1rem;
|
|
450
|
-
}
|
|
451
|
-
.eds-switch__label--large--bottom {
|
|
452
|
-
font-size: 0.875rem;
|
|
453
|
-
}
|
|
454
|
-
.eds-switch__label--medium--right {
|
|
455
|
-
font-size: 0.875rem;
|
|
456
|
-
}
|
|
457
|
-
.eds-switch__label--medium--bottom {
|
|
458
|
-
font-size: 0.75rem;
|
|
459
|
-
}
|
|
460
|
-
/* DO NOT CHANGE!*/
|
|
461
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
462
|
-
.eds-feedback-text {
|
|
463
|
-
display: flex;
|
|
464
|
-
align-items: center;
|
|
465
|
-
margin-top: 0.25rem;
|
|
466
|
-
}
|
|
467
|
-
.eds-feedback-text--info {
|
|
468
|
-
padding-left: calc(1rem + 0.125rem);
|
|
469
|
-
}
|
|
470
|
-
.eds-feedback-text__text {
|
|
471
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
472
|
-
}
|
|
473
|
-
.eds-contrast .eds-feedback-text__text {
|
|
474
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
.eds-feedback-text__icon {
|
|
478
|
-
font-size: 1.5rem;
|
|
479
|
-
min-height: 1.5rem;
|
|
480
|
-
min-width: 1.5rem;
|
|
481
|
-
padding-right: 0.5rem;
|
|
482
|
-
position: relative;
|
|
483
|
-
top: -0.1rem;
|
|
484
|
-
}
|
|
485
|
-
.eds-feedback-text__icon--success {
|
|
486
|
-
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
487
|
-
}
|
|
488
|
-
.eds-feedback-text__icon--success circle {
|
|
489
|
-
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
490
|
-
}
|
|
491
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
492
|
-
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
493
|
-
}
|
|
494
|
-
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
495
|
-
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
496
|
-
}
|
|
497
|
-
.eds-feedback-text__icon--error {
|
|
498
|
-
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
499
|
-
}
|
|
500
|
-
.eds-feedback-text__icon--error circle {
|
|
501
|
-
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
502
|
-
}
|
|
503
|
-
.eds-contrast .eds-feedback-text__icon--error {
|
|
504
|
-
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
505
|
-
}
|
|
506
|
-
.eds-contrast .eds-feedback-text__icon--error circle {
|
|
507
|
-
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
508
|
-
}
|
|
509
|
-
.eds-feedback-text__icon--info {
|
|
510
|
-
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
511
|
-
}
|
|
512
|
-
.eds-feedback-text__icon--info circle {
|
|
513
|
-
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
514
|
-
}
|
|
515
|
-
.eds-contrast .eds-feedback-text__icon--info {
|
|
516
|
-
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
517
|
-
}
|
|
518
|
-
.eds-contrast .eds-feedback-text__icon--info circle {
|
|
519
|
-
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
520
|
-
}
|
|
521
|
-
.eds-feedback-text__icon--warning {
|
|
522
|
-
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
523
|
-
}
|
|
524
|
-
.eds-feedback-text__icon--warning circle {
|
|
525
|
-
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
526
|
-
}
|
|
527
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
528
|
-
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
529
|
-
}
|
|
530
|
-
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
531
|
-
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
532
|
-
}
|
|
533
|
-
.eds-fieldset {
|
|
534
|
-
margin: 0;
|
|
535
|
-
padding: 0;
|
|
536
|
-
border: 0;
|
|
537
|
-
}
|
|
538
|
-
/* DO NOT CHANGE!*/
|
|
539
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
540
|
-
.eds-input-group {
|
|
541
|
-
color: inherit;
|
|
542
|
-
display: block;
|
|
543
|
-
position: relative;
|
|
544
|
-
}
|
|
545
|
-
.eds-input-group__label {
|
|
546
|
-
color: var(--components-form-baseform-standard-text-label);
|
|
547
|
-
display: flex;
|
|
548
|
-
font-size: 1rem;
|
|
549
|
-
position: absolute;
|
|
550
|
-
line-height: 1rem;
|
|
551
|
-
height: 3rem;
|
|
552
|
-
padding: 1rem;
|
|
553
|
-
padding-left: 0;
|
|
554
|
-
margin-left: 1rem;
|
|
555
|
-
top: -0.125rem;
|
|
556
|
-
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;
|
|
557
|
-
-webkit-user-select: none;
|
|
558
|
-
-moz-user-select: none;
|
|
559
|
-
user-select: none;
|
|
560
|
-
pointer-events: none;
|
|
561
|
-
}
|
|
562
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
563
|
-
top: 0.375rem;
|
|
564
|
-
font-size: 0.75rem;
|
|
565
|
-
line-height: 0.75rem;
|
|
566
|
-
height: 10px;
|
|
567
|
-
padding: 0;
|
|
568
|
-
margin-left: 1rem;
|
|
569
|
-
}
|
|
570
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
571
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
572
|
-
background: var(--textarea-label-background);
|
|
573
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
574
|
-
}
|
|
575
|
-
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
576
|
-
top: 0.5rem;
|
|
577
|
-
font-size: 0.875rem;
|
|
578
|
-
line-height: 1rem;
|
|
579
|
-
padding: 0;
|
|
580
|
-
margin-left: 1rem;
|
|
581
|
-
}
|
|
582
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
583
|
-
font-size: 1.5rem;
|
|
584
|
-
line-height: 2.25rem;
|
|
585
|
-
height: 4rem;
|
|
586
|
-
top: -0.25rem;
|
|
308
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
309
|
+
font-size: 1.5rem;
|
|
310
|
+
line-height: 2.25rem;
|
|
311
|
+
height: 4rem;
|
|
312
|
+
top: -0.25rem;
|
|
587
313
|
}
|
|
588
314
|
.eds-input-group__label--filled {
|
|
589
315
|
top: 0.375rem;
|
|
@@ -666,6 +392,161 @@
|
|
|
666
392
|
}
|
|
667
393
|
/* DO NOT CHANGE!*/
|
|
668
394
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
395
|
+
.eds-checkbox__container {
|
|
396
|
+
display: flex;
|
|
397
|
+
align-items: center;
|
|
398
|
+
position: relative;
|
|
399
|
+
-webkit-appearance: none;
|
|
400
|
+
-moz-appearance: none;
|
|
401
|
+
appearance: none;
|
|
402
|
+
cursor: pointer;
|
|
403
|
+
-webkit-user-select: none;
|
|
404
|
+
-moz-user-select: none;
|
|
405
|
+
user-select: none;
|
|
406
|
+
width: -moz-fit-content;
|
|
407
|
+
width: fit-content;
|
|
408
|
+
margin: 0.5rem 0;
|
|
409
|
+
}
|
|
410
|
+
.eds-checkbox__container--reduced-click-area {
|
|
411
|
+
height: -moz-fit-content;
|
|
412
|
+
height: fit-content;
|
|
413
|
+
}
|
|
414
|
+
.eds-checkbox__container input {
|
|
415
|
+
position: absolute;
|
|
416
|
+
opacity: 0;
|
|
417
|
+
height: 0;
|
|
418
|
+
width: 0;
|
|
419
|
+
}
|
|
420
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
421
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
422
|
+
}
|
|
423
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
424
|
+
visibility: visible;
|
|
425
|
+
}
|
|
426
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
427
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
428
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
429
|
+
}
|
|
430
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
431
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
432
|
+
}
|
|
433
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
434
|
+
opacity: 0.5;
|
|
435
|
+
}
|
|
436
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
437
|
+
opacity: 0.5;
|
|
438
|
+
}
|
|
439
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
440
|
+
opacity: 0.5;
|
|
441
|
+
}
|
|
442
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
443
|
+
opacity: 0.5;
|
|
444
|
+
}
|
|
445
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
446
|
+
opacity: 0.5;
|
|
447
|
+
}
|
|
448
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
449
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
450
|
+
}
|
|
451
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
452
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
453
|
+
}
|
|
454
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
455
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
456
|
+
}
|
|
457
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
458
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
459
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
460
|
+
}
|
|
461
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
462
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
463
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
464
|
+
}
|
|
465
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
466
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
467
|
+
border-color: transparent;
|
|
468
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
469
|
+
}
|
|
470
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
471
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
472
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
473
|
+
}
|
|
474
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
475
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
476
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
477
|
+
}
|
|
478
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
479
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
480
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
481
|
+
}
|
|
482
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
483
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
484
|
+
outline: 2px solid #181c56;
|
|
485
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
486
|
+
outline-offset: 0.125rem;
|
|
487
|
+
}
|
|
488
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
489
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
490
|
+
outline: 2px solid #181c56;
|
|
491
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
492
|
+
outline-offset: 0.125rem;
|
|
493
|
+
}
|
|
494
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
495
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
496
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
497
|
+
}
|
|
498
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
499
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
500
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
501
|
+
}
|
|
502
|
+
.eds-checkbox--disabled {
|
|
503
|
+
pointer-events: none;
|
|
504
|
+
}
|
|
505
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
506
|
+
opacity: 0.5;
|
|
507
|
+
}
|
|
508
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
509
|
+
opacity: 0.5;
|
|
510
|
+
}
|
|
511
|
+
.eds-checkbox__icon {
|
|
512
|
+
box-sizing: border-box;
|
|
513
|
+
display: inline-flex;
|
|
514
|
+
justify-content: center;
|
|
515
|
+
align-items: center;
|
|
516
|
+
position: relative;
|
|
517
|
+
margin-right: 1rem;
|
|
518
|
+
height: 1.25rem;
|
|
519
|
+
width: 1.25rem;
|
|
520
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
521
|
+
border-radius: 0.125rem;
|
|
522
|
+
background-color: transparent;
|
|
523
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
524
|
+
}
|
|
525
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
526
|
+
margin-right: 0;
|
|
527
|
+
}
|
|
528
|
+
.eds-contrast .eds-checkbox__icon {
|
|
529
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
530
|
+
}
|
|
531
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
532
|
+
height: 1rem;
|
|
533
|
+
width: 1rem;
|
|
534
|
+
visibility: hidden;
|
|
535
|
+
}
|
|
536
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
537
|
+
transform-origin: 50% 50%;
|
|
538
|
+
stroke-dasharray: 48;
|
|
539
|
+
stroke-dashoffset: 48;
|
|
540
|
+
stroke-width: 0.375rem;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
@keyframes stroke {
|
|
544
|
+
100% {
|
|
545
|
+
stroke-dashoffset: 0;
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
/* DO NOT CHANGE!*/
|
|
549
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
669
550
|
.eds-form-component--radio__container {
|
|
670
551
|
display: flex;
|
|
671
552
|
justify-content: center;
|
|
@@ -748,6 +629,125 @@
|
|
|
748
629
|
}
|
|
749
630
|
/* DO NOT CHANGE!*/
|
|
750
631
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
632
|
+
.eds-switch {
|
|
633
|
+
cursor: pointer;
|
|
634
|
+
-webkit-user-select: none;
|
|
635
|
+
-moz-user-select: none;
|
|
636
|
+
user-select: none;
|
|
637
|
+
padding: 0.5rem 0;
|
|
638
|
+
width: -moz-fit-content;
|
|
639
|
+
width: fit-content;
|
|
640
|
+
}
|
|
641
|
+
.eds-switch input {
|
|
642
|
+
opacity: 0;
|
|
643
|
+
pointer-events: none;
|
|
644
|
+
position: absolute;
|
|
645
|
+
}
|
|
646
|
+
.eds-switch--right {
|
|
647
|
+
display: flex;
|
|
648
|
+
flex-direction: row;
|
|
649
|
+
align-items: center;
|
|
650
|
+
}
|
|
651
|
+
.eds-switch--bottom {
|
|
652
|
+
display: flex;
|
|
653
|
+
flex-direction: column;
|
|
654
|
+
align-items: center;
|
|
655
|
+
}
|
|
656
|
+
.eds-switch__circle {
|
|
657
|
+
border-radius: 50%;
|
|
658
|
+
height: 1.25rem;
|
|
659
|
+
width: 1.25rem;
|
|
660
|
+
content: "";
|
|
661
|
+
display: flex;
|
|
662
|
+
align-items: center;
|
|
663
|
+
justify-content: center;
|
|
664
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
665
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
666
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
667
|
+
top: 0.125rem;
|
|
668
|
+
left: 0.125rem;
|
|
669
|
+
position: relative;
|
|
670
|
+
}
|
|
671
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
672
|
+
height: 1.75rem;
|
|
673
|
+
width: 1.75rem;
|
|
674
|
+
}
|
|
675
|
+
.eds-contrast .eds-switch__circle {
|
|
676
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
677
|
+
}
|
|
678
|
+
.eds-switch__switch {
|
|
679
|
+
position: relative;
|
|
680
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
681
|
+
content: "";
|
|
682
|
+
display: block;
|
|
683
|
+
transition: background-color 0.1s ease-in-out;
|
|
684
|
+
height: 1.5rem;
|
|
685
|
+
width: 3rem;
|
|
686
|
+
border-radius: 1.5rem;
|
|
687
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
688
|
+
}
|
|
689
|
+
.eds-contrast .eds-switch__switch {
|
|
690
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
691
|
+
}
|
|
692
|
+
.eds-switch--right .eds-switch__switch {
|
|
693
|
+
margin-right: 0.75rem;
|
|
694
|
+
}
|
|
695
|
+
.eds-switch__switch svg g,
|
|
696
|
+
.eds-switch__switch path {
|
|
697
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
698
|
+
transition: fill ease-in-out 0.1s;
|
|
699
|
+
}
|
|
700
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
701
|
+
.eds-contrast .eds-switch__switch path {
|
|
702
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
703
|
+
}
|
|
704
|
+
:checked + .eds-switch__switch {
|
|
705
|
+
background-color: var(--eds-switch-color);
|
|
706
|
+
}
|
|
707
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
708
|
+
left: 1.625rem;
|
|
709
|
+
}
|
|
710
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
711
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
712
|
+
fill: var(--eds-switch-color);
|
|
713
|
+
}
|
|
714
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
715
|
+
background-color: var(--eds-switch-contrast-color);
|
|
716
|
+
}
|
|
717
|
+
:focus + .eds-switch__switch {
|
|
718
|
+
outline: 2px solid #181c56;
|
|
719
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
720
|
+
outline-offset: 0.125rem;
|
|
721
|
+
}
|
|
722
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
723
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
724
|
+
}
|
|
725
|
+
.eds-switch__switch--large {
|
|
726
|
+
width: 3.75rem;
|
|
727
|
+
height: 2rem;
|
|
728
|
+
border-radius: 3.75rem;
|
|
729
|
+
}
|
|
730
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
731
|
+
left: 1.875rem;
|
|
732
|
+
}
|
|
733
|
+
.eds-switch__switch--large svg {
|
|
734
|
+
position: relative;
|
|
735
|
+
right: 0.05rem;
|
|
736
|
+
}
|
|
737
|
+
.eds-switch__label--large--right {
|
|
738
|
+
font-size: 1rem;
|
|
739
|
+
}
|
|
740
|
+
.eds-switch__label--large--bottom {
|
|
741
|
+
font-size: 0.875rem;
|
|
742
|
+
}
|
|
743
|
+
.eds-switch__label--medium--right {
|
|
744
|
+
font-size: 0.875rem;
|
|
745
|
+
}
|
|
746
|
+
.eds-switch__label--medium--bottom {
|
|
747
|
+
font-size: 0.75rem;
|
|
748
|
+
}
|
|
749
|
+
/* DO NOT CHANGE!*/
|
|
750
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
751
751
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
752
752
|
outline: 2px solid #181c56;
|
|
753
753
|
outline-color: var(--basecolors-stroke-focus-standard);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.41",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/form.esm.js",
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@entur/icons": "^6.15.2",
|
|
31
31
|
"@entur/tokens": "^3.13.1",
|
|
32
|
-
"@entur/tooltip": "^2.6.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
32
|
+
"@entur/tooltip": "^2.6.50",
|
|
33
|
+
"@entur/typography": "^1.8.26",
|
|
34
34
|
"@entur/utils": "^0.10.0",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "c36e1121738a702fe5ed92cd3f26636d7a4ef026"
|
|
38
38
|
}
|