@entur/form 5.3.9 → 5.4.1
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/CHANGELOG.md +18 -0
- package/dist/BaseFormControl.d.ts +2 -0
- package/dist/TextField.d.ts +2 -0
- package/dist/form.cjs.development.js +25 -12
- package/dist/form.cjs.development.js.map +1 -1
- package/dist/form.cjs.production.min.js +1 -1
- package/dist/form.cjs.production.min.js.map +1 -1
- package/dist/form.esm.js +25 -12
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +320 -320
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -2,193 +2,139 @@
|
|
|
2
2
|
--eds-form: 1;
|
|
3
3
|
}/* DO NOT CHANGE!*/
|
|
4
4
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
|
-
.eds-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
.eds-feedback-text--info {
|
|
11
|
-
padding-left: calc(1rem + 0.125rem);
|
|
12
|
-
}
|
|
13
|
-
.eds-feedback-text__text {
|
|
14
|
-
color: #181c56;
|
|
15
|
-
}
|
|
16
|
-
.eds-contrast .eds-feedback-text__text {
|
|
17
|
-
color: #ffffff;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.eds-feedback-text__icon {
|
|
21
|
-
font-size: 1.5rem;
|
|
22
|
-
min-height: 1.5rem;
|
|
23
|
-
min-width: 1.5rem;
|
|
24
|
-
padding-right: 0.5rem;
|
|
25
|
-
position: relative;
|
|
26
|
-
top: -0.1rem;
|
|
27
|
-
}
|
|
28
|
-
.eds-feedback-text__icon--success {
|
|
29
|
-
color: #1a8e60;
|
|
30
|
-
}
|
|
31
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
32
|
-
color: #5ac39a;
|
|
33
|
-
}
|
|
34
|
-
.eds-feedback-text__icon--error {
|
|
35
|
-
color: #d31b1b;
|
|
36
|
-
}
|
|
37
|
-
.eds-contrast .eds-feedback-text__icon--error {
|
|
38
|
-
color: #ff9494;
|
|
39
|
-
}
|
|
40
|
-
.eds-feedback-text__icon--info {
|
|
41
|
-
color: #0082b9;
|
|
42
|
-
}
|
|
43
|
-
.eds-contrast .eds-feedback-text__icon--info {
|
|
44
|
-
color: #64b3e7;
|
|
45
|
-
}
|
|
46
|
-
.eds-feedback-text__icon--warning {
|
|
47
|
-
color: #ffca28;
|
|
48
|
-
}
|
|
49
|
-
.eds-feedback-text__icon--warning circle {
|
|
50
|
-
fill: #181c56;
|
|
5
|
+
.eds-fieldset {
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
border: 0;
|
|
51
9
|
}
|
|
52
|
-
.eds-
|
|
53
|
-
|
|
10
|
+
.eds-fieldset .eds-legend {
|
|
11
|
+
margin: 0 0 0.5rem;
|
|
54
12
|
}/* DO NOT CHANGE!*/
|
|
55
13
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
56
|
-
.eds-
|
|
57
|
-
|
|
58
|
-
|
|
14
|
+
.eds-input-group {
|
|
15
|
+
color: inherit;
|
|
16
|
+
display: block;
|
|
59
17
|
position: relative;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
18
|
+
}
|
|
19
|
+
.eds-input-group__label {
|
|
20
|
+
color: #656782;
|
|
21
|
+
display: flex;
|
|
22
|
+
font-size: 1rem;
|
|
23
|
+
position: absolute;
|
|
24
|
+
line-height: 1rem;
|
|
25
|
+
height: 3rem;
|
|
26
|
+
padding: 1rem;
|
|
27
|
+
padding-left: 0;
|
|
28
|
+
margin-left: 1rem;
|
|
29
|
+
top: -0.125rem;
|
|
30
|
+
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;
|
|
65
31
|
-webkit-user-select: none;
|
|
66
32
|
-moz-user-select: none;
|
|
67
33
|
-ms-user-select: none;
|
|
68
34
|
user-select: none;
|
|
69
|
-
|
|
70
|
-
width: -moz-fit-content;
|
|
71
|
-
width: fit-content;
|
|
72
|
-
}
|
|
73
|
-
.eds-checkbox__container--reduced-click-area {
|
|
74
|
-
height: -webkit-fit-content;
|
|
75
|
-
height: -moz-fit-content;
|
|
76
|
-
height: fit-content;
|
|
77
|
-
}
|
|
78
|
-
.eds-checkbox__container input {
|
|
79
|
-
position: absolute;
|
|
80
|
-
opacity: 0;
|
|
81
|
-
height: 0;
|
|
82
|
-
width: 0;
|
|
83
|
-
}
|
|
84
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
85
|
-
background-color: #181c56;
|
|
86
|
-
}
|
|
87
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
88
|
-
visibility: visible;
|
|
89
|
-
}
|
|
90
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
|
|
91
|
-
stroke: #ffffff;
|
|
92
|
-
-webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
93
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
94
|
-
}
|
|
95
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
96
|
-
opacity: 0.5;
|
|
97
|
-
}
|
|
98
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
|
|
99
|
-
opacity: 0.5;
|
|
100
|
-
}
|
|
101
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
102
|
-
background: #54568c;
|
|
103
|
-
}
|
|
104
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
105
|
-
border-color: #54568c;
|
|
106
|
-
background: #f3f3f3;
|
|
107
|
-
}
|
|
108
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
109
|
-
border-color: #656782;
|
|
110
|
-
background: #292b6a;
|
|
35
|
+
pointer-events: none;
|
|
111
36
|
}
|
|
112
|
-
.eds-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
37
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
38
|
+
top: calc(0.5rem - 0.125rem);
|
|
39
|
+
font-size: 0.75rem;
|
|
40
|
+
line-height: 0.75rem;
|
|
41
|
+
height: 10px;
|
|
42
|
+
padding: 0;
|
|
43
|
+
margin-left: 1rem;
|
|
116
44
|
}
|
|
117
|
-
.eds-
|
|
118
|
-
|
|
119
|
-
background:
|
|
120
|
-
|
|
45
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
46
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
47
|
+
background: var(--textarea-label-background);
|
|
48
|
+
width: calc( 100% - 1rem - 1rem - 4px );
|
|
121
49
|
}
|
|
122
|
-
.eds-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
50
|
+
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
51
|
+
top: 0.5rem;
|
|
52
|
+
font-size: 0.875rem;
|
|
53
|
+
line-height: 1rem;
|
|
54
|
+
padding: 0;
|
|
55
|
+
margin-left: 1rem;
|
|
127
56
|
}
|
|
128
|
-
.eds-
|
|
129
|
-
|
|
130
|
-
outline: none;
|
|
131
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
132
|
-
outline-offset: 0.125rem;
|
|
57
|
+
.eds-contrast .eds-input-group__label {
|
|
58
|
+
color: #8285a8;
|
|
133
59
|
}
|
|
134
|
-
.eds-contrast .eds-
|
|
135
|
-
|
|
136
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
60
|
+
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
61
|
+
color: #aeb7e2;
|
|
137
62
|
}
|
|
138
|
-
.eds-
|
|
139
|
-
|
|
140
|
-
|
|
63
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
64
|
+
font-size: 1.5rem;
|
|
65
|
+
line-height: 2.25rem;
|
|
66
|
+
height: 4rem;
|
|
141
67
|
}
|
|
142
|
-
.eds-
|
|
143
|
-
|
|
68
|
+
.eds-input-group__label--filled {
|
|
69
|
+
top: calc(0.5rem - 0.125rem);
|
|
70
|
+
font-size: 0.75rem;
|
|
71
|
+
line-height: 0.75rem;
|
|
72
|
+
height: 10px;
|
|
73
|
+
padding: 0;
|
|
74
|
+
margin-left: 1rem;
|
|
144
75
|
}
|
|
145
|
-
.eds-
|
|
146
|
-
|
|
76
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
77
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
78
|
+
background: var(--textarea-label-background);
|
|
79
|
+
width: calc( 100% - 1rem - 1rem - 4px );
|
|
147
80
|
}
|
|
148
|
-
.eds-
|
|
149
|
-
|
|
81
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
82
|
+
top: 0.5rem;
|
|
83
|
+
font-size: 0.875rem;
|
|
84
|
+
line-height: 1rem;
|
|
85
|
+
padding: 0;
|
|
86
|
+
margin-left: 1rem;
|
|
150
87
|
}
|
|
151
|
-
.eds-
|
|
152
|
-
|
|
153
|
-
|
|
88
|
+
.eds-input-group__label-tooltip-icon {
|
|
89
|
+
color: #0082b9;
|
|
90
|
+
padding-left: 0.25rem;
|
|
91
|
+
padding-right: 0.25rem;
|
|
92
|
+
display: flex;
|
|
154
93
|
align-items: center;
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
height: 1.25rem;
|
|
158
|
-
width: 1.25rem;
|
|
159
|
-
border: 0.125rem solid #181c56;
|
|
160
|
-
border-radius: 0.0625rem;
|
|
161
|
-
background-color: transparent;
|
|
162
|
-
color: #ffffff;
|
|
94
|
+
cursor: help;
|
|
95
|
+
font-size: 1rem;
|
|
163
96
|
}
|
|
164
|
-
|
|
165
|
-
|
|
97
|
+
|
|
98
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
99
|
+
top: calc(0.5rem - 0.125rem);
|
|
100
|
+
font-size: 0.75rem;
|
|
101
|
+
line-height: 0.75rem;
|
|
102
|
+
height: 10px;
|
|
103
|
+
padding: 0;
|
|
104
|
+
margin-left: 1rem;
|
|
166
105
|
}
|
|
167
|
-
|
|
168
|
-
|
|
106
|
+
|
|
107
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
108
|
+
top: calc(0.5rem - 0.125rem);
|
|
109
|
+
font-size: 0.75rem;
|
|
110
|
+
line-height: 0.75rem;
|
|
111
|
+
height: 10px;
|
|
112
|
+
padding: 0;
|
|
113
|
+
margin-left: 1rem;
|
|
169
114
|
}
|
|
170
|
-
.eds-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
115
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
116
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
117
|
+
background: var(--textarea-label-background);
|
|
118
|
+
width: calc( 100% - 1rem - 1rem - 4px );
|
|
174
119
|
}
|
|
175
|
-
.eds-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
stroke-width: 0.375rem;
|
|
120
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
121
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
122
|
+
background: var(--textarea-label-background);
|
|
123
|
+
width: calc( 100% - 1rem - 1rem - 4px );
|
|
180
124
|
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
125
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
126
|
+
top: 0.5rem;
|
|
127
|
+
font-size: 0.875rem;
|
|
128
|
+
line-height: 1rem;
|
|
129
|
+
padding: 0;
|
|
130
|
+
margin-left: 1rem;
|
|
186
131
|
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
132
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
133
|
+
top: 0.5rem;
|
|
134
|
+
font-size: 0.875rem;
|
|
135
|
+
line-height: 1rem;
|
|
136
|
+
padding: 0;
|
|
137
|
+
margin-left: 1rem;
|
|
192
138
|
}/* DO NOT CHANGE!*/
|
|
193
139
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
194
140
|
.eds-form-control-wrapper {
|
|
@@ -415,171 +361,36 @@
|
|
|
415
361
|
}
|
|
416
362
|
.eds-form-control::placeholder {
|
|
417
363
|
opacity: 0;
|
|
418
|
-
transition: opacity 0.2s ease-in-out;
|
|
419
|
-
}
|
|
420
|
-
.eds-form-control:focus {
|
|
421
|
-
outline: none;
|
|
422
|
-
}
|
|
423
|
-
.eds-form-control:focus::-moz-placeholder {
|
|
424
|
-
opacity: 1;
|
|
425
|
-
}
|
|
426
|
-
.eds-form-control:focus:-ms-input-placeholder {
|
|
427
|
-
opacity: 1;
|
|
428
|
-
}
|
|
429
|
-
.eds-form-control:focus::placeholder {
|
|
430
|
-
opacity: 1;
|
|
431
|
-
}
|
|
432
|
-
.eds-form-control__prepend, .eds-form-control__append {
|
|
433
|
-
position: relative;
|
|
434
|
-
margin: 0 1rem;
|
|
435
|
-
line-height: inherit;
|
|
436
|
-
}
|
|
437
|
-
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
438
|
-
position: static;
|
|
439
|
-
}
|
|
440
|
-
.eds-form-control__prepend svg, .eds-form-control__append svg {
|
|
441
|
-
top: 0.125rem;
|
|
442
|
-
}
|
|
443
|
-
.eds-form-control__prepend {
|
|
444
|
-
margin-right: 0;
|
|
445
|
-
}
|
|
446
|
-
.eds-form-control__append {
|
|
447
|
-
margin-left: 0;
|
|
448
|
-
}/* DO NOT CHANGE!*/
|
|
449
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
450
|
-
.eds-fieldset {
|
|
451
|
-
margin: 0;
|
|
452
|
-
padding: 0;
|
|
453
|
-
border: 0;
|
|
454
|
-
}
|
|
455
|
-
.eds-fieldset .eds-legend {
|
|
456
|
-
margin: 0 0 0.5rem;
|
|
457
|
-
}/* DO NOT CHANGE!*/
|
|
458
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
459
|
-
.eds-input-group {
|
|
460
|
-
color: inherit;
|
|
461
|
-
display: block;
|
|
462
|
-
position: relative;
|
|
463
|
-
}
|
|
464
|
-
.eds-input-group__label {
|
|
465
|
-
color: #656782;
|
|
466
|
-
display: flex;
|
|
467
|
-
font-size: 1rem;
|
|
468
|
-
position: absolute;
|
|
469
|
-
line-height: 1rem;
|
|
470
|
-
height: 3rem;
|
|
471
|
-
padding: 1rem;
|
|
472
|
-
padding-left: 0;
|
|
473
|
-
margin-left: 1rem;
|
|
474
|
-
top: -0.125rem;
|
|
475
|
-
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;
|
|
476
|
-
-webkit-user-select: none;
|
|
477
|
-
-moz-user-select: none;
|
|
478
|
-
-ms-user-select: none;
|
|
479
|
-
user-select: none;
|
|
480
|
-
pointer-events: none;
|
|
481
|
-
}
|
|
482
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
483
|
-
top: calc(0.5rem - 0.125rem);
|
|
484
|
-
font-size: 0.75rem;
|
|
485
|
-
line-height: 0.75rem;
|
|
486
|
-
height: 10px;
|
|
487
|
-
padding: 0;
|
|
488
|
-
margin-left: 1rem;
|
|
489
|
-
}
|
|
490
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
491
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
492
|
-
background: var(--textarea-label-background);
|
|
493
|
-
width: calc( 100% - 1rem - 1rem - 4px );
|
|
494
|
-
}
|
|
495
|
-
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
496
|
-
top: 0.5rem;
|
|
497
|
-
font-size: 0.875rem;
|
|
498
|
-
line-height: 1rem;
|
|
499
|
-
padding: 0;
|
|
500
|
-
margin-left: 1rem;
|
|
501
|
-
}
|
|
502
|
-
.eds-contrast .eds-input-group__label {
|
|
503
|
-
color: #8285a8;
|
|
504
|
-
}
|
|
505
|
-
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
506
|
-
color: #aeb7e2;
|
|
507
|
-
}
|
|
508
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
509
|
-
font-size: 1.5rem;
|
|
510
|
-
line-height: 2.25rem;
|
|
511
|
-
height: 4rem;
|
|
512
|
-
}
|
|
513
|
-
.eds-input-group__label--filled {
|
|
514
|
-
top: calc(0.5rem - 0.125rem);
|
|
515
|
-
font-size: 0.75rem;
|
|
516
|
-
line-height: 0.75rem;
|
|
517
|
-
height: 10px;
|
|
518
|
-
padding: 0;
|
|
519
|
-
margin-left: 1rem;
|
|
520
|
-
}
|
|
521
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
522
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
523
|
-
background: var(--textarea-label-background);
|
|
524
|
-
width: calc( 100% - 1rem - 1rem - 4px );
|
|
525
|
-
}
|
|
526
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
527
|
-
top: 0.5rem;
|
|
528
|
-
font-size: 0.875rem;
|
|
529
|
-
line-height: 1rem;
|
|
530
|
-
padding: 0;
|
|
531
|
-
margin-left: 1rem;
|
|
364
|
+
transition: opacity 0.2s ease-in-out;
|
|
532
365
|
}
|
|
533
|
-
.eds-
|
|
534
|
-
|
|
535
|
-
padding-left: 0.25rem;
|
|
536
|
-
padding-right: 0.25rem;
|
|
537
|
-
display: flex;
|
|
538
|
-
align-items: center;
|
|
539
|
-
cursor: help;
|
|
540
|
-
font-size: 1rem;
|
|
366
|
+
.eds-form-control:focus {
|
|
367
|
+
outline: none;
|
|
541
368
|
}
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
top: calc(0.5rem - 0.125rem);
|
|
545
|
-
font-size: 0.75rem;
|
|
546
|
-
line-height: 0.75rem;
|
|
547
|
-
height: 10px;
|
|
548
|
-
padding: 0;
|
|
549
|
-
margin-left: 1rem;
|
|
369
|
+
.eds-form-control:focus::-moz-placeholder {
|
|
370
|
+
opacity: 1;
|
|
550
371
|
}
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
top: calc(0.5rem - 0.125rem);
|
|
554
|
-
font-size: 0.75rem;
|
|
555
|
-
line-height: 0.75rem;
|
|
556
|
-
height: 10px;
|
|
557
|
-
padding: 0;
|
|
558
|
-
margin-left: 1rem;
|
|
372
|
+
.eds-form-control:focus:-ms-input-placeholder {
|
|
373
|
+
opacity: 1;
|
|
559
374
|
}
|
|
560
|
-
.eds-
|
|
561
|
-
|
|
562
|
-
background: var(--textarea-label-background);
|
|
563
|
-
width: calc( 100% - 1rem - 1rem - 4px );
|
|
375
|
+
.eds-form-control:focus::placeholder {
|
|
376
|
+
opacity: 1;
|
|
564
377
|
}
|
|
565
|
-
.eds-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
378
|
+
.eds-form-control__prepend, .eds-form-control__append {
|
|
379
|
+
position: relative;
|
|
380
|
+
margin: 0 1rem;
|
|
381
|
+
line-height: inherit;
|
|
569
382
|
}
|
|
570
|
-
.eds-form-
|
|
571
|
-
|
|
572
|
-
font-size: 0.875rem;
|
|
573
|
-
line-height: 1rem;
|
|
574
|
-
padding: 0;
|
|
575
|
-
margin-left: 1rem;
|
|
383
|
+
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
384
|
+
position: static;
|
|
576
385
|
}
|
|
577
|
-
.eds-form-
|
|
578
|
-
top: 0.
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
386
|
+
.eds-form-control__prepend svg, .eds-form-control__append svg {
|
|
387
|
+
top: 0.125rem;
|
|
388
|
+
}
|
|
389
|
+
.eds-form-control__prepend {
|
|
390
|
+
margin-right: 0;
|
|
391
|
+
}
|
|
392
|
+
.eds-form-control__append {
|
|
393
|
+
margin-left: 0;
|
|
583
394
|
}/* DO NOT CHANGE!*/
|
|
584
395
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
585
396
|
textarea.eds-form-control.eds-textarea {
|
|
@@ -624,6 +435,57 @@ textarea.eds-form-control.eds-textarea {
|
|
|
624
435
|
background-color: #8285a8;
|
|
625
436
|
}/* DO NOT CHANGE!*/
|
|
626
437
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
438
|
+
.eds-feedback-text {
|
|
439
|
+
display: flex;
|
|
440
|
+
align-items: center;
|
|
441
|
+
margin-top: 0.25rem;
|
|
442
|
+
}
|
|
443
|
+
.eds-feedback-text--info {
|
|
444
|
+
padding-left: calc(1rem + 0.125rem);
|
|
445
|
+
}
|
|
446
|
+
.eds-feedback-text__text {
|
|
447
|
+
color: #181c56;
|
|
448
|
+
}
|
|
449
|
+
.eds-contrast .eds-feedback-text__text {
|
|
450
|
+
color: #ffffff;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.eds-feedback-text__icon {
|
|
454
|
+
font-size: 1.5rem;
|
|
455
|
+
min-height: 1.5rem;
|
|
456
|
+
min-width: 1.5rem;
|
|
457
|
+
padding-right: 0.5rem;
|
|
458
|
+
position: relative;
|
|
459
|
+
top: -0.1rem;
|
|
460
|
+
}
|
|
461
|
+
.eds-feedback-text__icon--success {
|
|
462
|
+
color: #1a8e60;
|
|
463
|
+
}
|
|
464
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
465
|
+
color: #5ac39a;
|
|
466
|
+
}
|
|
467
|
+
.eds-feedback-text__icon--error {
|
|
468
|
+
color: #d31b1b;
|
|
469
|
+
}
|
|
470
|
+
.eds-contrast .eds-feedback-text__icon--error {
|
|
471
|
+
color: #ff9494;
|
|
472
|
+
}
|
|
473
|
+
.eds-feedback-text__icon--info {
|
|
474
|
+
color: #0082b9;
|
|
475
|
+
}
|
|
476
|
+
.eds-contrast .eds-feedback-text__icon--info {
|
|
477
|
+
color: #64b3e7;
|
|
478
|
+
}
|
|
479
|
+
.eds-feedback-text__icon--warning {
|
|
480
|
+
color: #ffca28;
|
|
481
|
+
}
|
|
482
|
+
.eds-feedback-text__icon--warning circle {
|
|
483
|
+
fill: #181c56;
|
|
484
|
+
}
|
|
485
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
486
|
+
color: #ffe082;
|
|
487
|
+
}/* DO NOT CHANGE!*/
|
|
488
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
627
489
|
.eds-form-component--radio__container {
|
|
628
490
|
display: flex;
|
|
629
491
|
justify-content: center;
|
|
@@ -713,6 +575,144 @@ textarea.eds-form-control.eds-textarea {
|
|
|
713
575
|
background-color: #aeb7e2;
|
|
714
576
|
}/* DO NOT CHANGE!*/
|
|
715
577
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
578
|
+
.eds-checkbox__container {
|
|
579
|
+
display: flex;
|
|
580
|
+
align-items: center;
|
|
581
|
+
position: relative;
|
|
582
|
+
-webkit-appearance: none;
|
|
583
|
+
-moz-appearance: none;
|
|
584
|
+
appearance: none;
|
|
585
|
+
cursor: pointer;
|
|
586
|
+
height: 2rem;
|
|
587
|
+
-webkit-user-select: none;
|
|
588
|
+
-moz-user-select: none;
|
|
589
|
+
-ms-user-select: none;
|
|
590
|
+
user-select: none;
|
|
591
|
+
width: -webkit-fit-content;
|
|
592
|
+
width: -moz-fit-content;
|
|
593
|
+
width: fit-content;
|
|
594
|
+
}
|
|
595
|
+
.eds-checkbox__container--reduced-click-area {
|
|
596
|
+
height: -webkit-fit-content;
|
|
597
|
+
height: -moz-fit-content;
|
|
598
|
+
height: fit-content;
|
|
599
|
+
}
|
|
600
|
+
.eds-checkbox__container input {
|
|
601
|
+
position: absolute;
|
|
602
|
+
opacity: 0;
|
|
603
|
+
height: 0;
|
|
604
|
+
width: 0;
|
|
605
|
+
}
|
|
606
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
607
|
+
background-color: #181c56;
|
|
608
|
+
}
|
|
609
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
610
|
+
visibility: visible;
|
|
611
|
+
}
|
|
612
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
|
|
613
|
+
stroke: #ffffff;
|
|
614
|
+
-webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
615
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
616
|
+
}
|
|
617
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
618
|
+
opacity: 0.5;
|
|
619
|
+
}
|
|
620
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
|
|
621
|
+
opacity: 0.5;
|
|
622
|
+
}
|
|
623
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
624
|
+
background: #54568c;
|
|
625
|
+
}
|
|
626
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
627
|
+
border-color: #54568c;
|
|
628
|
+
background: #f3f3f3;
|
|
629
|
+
}
|
|
630
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
631
|
+
border-color: #656782;
|
|
632
|
+
background: #292b6a;
|
|
633
|
+
}
|
|
634
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
635
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
636
|
+
border-color: #54568c;
|
|
637
|
+
background-color: #54568c;
|
|
638
|
+
}
|
|
639
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
640
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
641
|
+
background: #8285a8;
|
|
642
|
+
border-color: #8285a8;
|
|
643
|
+
}
|
|
644
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
645
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
646
|
+
outline: none;
|
|
647
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
648
|
+
outline-offset: 0.125rem;
|
|
649
|
+
}
|
|
650
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
651
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
652
|
+
outline: none;
|
|
653
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
654
|
+
outline-offset: 0.125rem;
|
|
655
|
+
}
|
|
656
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
657
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
658
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
659
|
+
}
|
|
660
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
661
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
662
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
663
|
+
}
|
|
664
|
+
.eds-checkbox--disabled {
|
|
665
|
+
pointer-events: none;
|
|
666
|
+
}
|
|
667
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
668
|
+
opacity: 0.5;
|
|
669
|
+
}
|
|
670
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
671
|
+
opacity: 0.5;
|
|
672
|
+
}
|
|
673
|
+
.eds-checkbox__icon {
|
|
674
|
+
display: inline-flex;
|
|
675
|
+
justify-content: center;
|
|
676
|
+
align-items: center;
|
|
677
|
+
position: relative;
|
|
678
|
+
margin-right: 1rem;
|
|
679
|
+
height: 1.25rem;
|
|
680
|
+
width: 1.25rem;
|
|
681
|
+
border: 0.125rem solid #181c56;
|
|
682
|
+
border-radius: 0.0625rem;
|
|
683
|
+
background-color: transparent;
|
|
684
|
+
color: #ffffff;
|
|
685
|
+
}
|
|
686
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
687
|
+
margin-right: 0;
|
|
688
|
+
}
|
|
689
|
+
.eds-contrast .eds-checkbox__icon {
|
|
690
|
+
border-color: #54568c;
|
|
691
|
+
}
|
|
692
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
693
|
+
height: 1rem;
|
|
694
|
+
width: 1rem;
|
|
695
|
+
visibility: hidden;
|
|
696
|
+
}
|
|
697
|
+
.eds-checkbox__icon .eds-checkbox-icon__path {
|
|
698
|
+
transform-origin: 50% 50%;
|
|
699
|
+
stroke-dasharray: 48;
|
|
700
|
+
stroke-dashoffset: 48;
|
|
701
|
+
stroke-width: 0.375rem;
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
@-webkit-keyframes stroke {
|
|
705
|
+
100% {
|
|
706
|
+
stroke-dashoffset: 0;
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
@keyframes stroke {
|
|
711
|
+
100% {
|
|
712
|
+
stroke-dashoffset: 0;
|
|
713
|
+
}
|
|
714
|
+
}/* DO NOT CHANGE!*/
|
|
715
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
716
716
|
.eds-switch {
|
|
717
717
|
cursor: pointer;
|
|
718
718
|
-webkit-user-select: none;
|