@entur/form 7.0.12 → 7.0.14
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 +5 -5
package/dist/styles.css
CHANGED
|
@@ -3,217 +3,245 @@
|
|
|
3
3
|
}
|
|
4
4
|
/* DO NOT CHANGE!*/
|
|
5
5
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
|
-
.eds-
|
|
7
|
-
|
|
6
|
+
.eds-form-control-wrapper {
|
|
7
|
+
--border-color: #7C7F9F;
|
|
8
|
+
--border-color-hover: #aeb7e2;
|
|
8
9
|
align-items: center;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
.
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
.eds-feedback-text__text {
|
|
10
|
+
background-color: #ffffff;
|
|
11
|
+
border-radius: 0.25rem;
|
|
12
|
+
border: 0.125rem solid var(--border-color);
|
|
13
|
+
box-shadow: 0 0 0 transparent;
|
|
15
14
|
color: #181c56;
|
|
15
|
+
display: flex;
|
|
16
|
+
position: relative;
|
|
17
|
+
width: 100%;
|
|
18
|
+
min-height: 3rem;
|
|
19
|
+
transition: border-color 0.1s ease-in-out;
|
|
20
|
+
--textarea-label-background: $colors-brand-white;
|
|
21
|
+
/*
|
|
22
|
+
Some input controls require a darker design while inside a contrast block.
|
|
23
|
+
These elements require the `--dark` modifier, even on the wrapper.
|
|
24
|
+
*/
|
|
16
25
|
}
|
|
17
|
-
.eds-
|
|
18
|
-
color: #
|
|
26
|
+
.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
|
|
27
|
+
--border-color: #181c56;
|
|
19
28
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
font-size: 1.5rem;
|
|
23
|
-
min-height: 1.5rem;
|
|
24
|
-
min-width: 1.5rem;
|
|
25
|
-
padding-right: 0.5rem;
|
|
26
|
-
position: relative;
|
|
27
|
-
top: -0.1rem;
|
|
29
|
+
.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
|
|
30
|
+
--border-color: #181c56;
|
|
28
31
|
}
|
|
29
|
-
.eds-
|
|
30
|
-
color: #
|
|
32
|
+
.eds-contrast .eds-form-control-wrapper:hover {
|
|
33
|
+
--border-color: #aeb7e2;
|
|
31
34
|
}
|
|
32
|
-
.eds-
|
|
33
|
-
|
|
35
|
+
.eds-form-control-wrapper[focus-within] {
|
|
36
|
+
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
34
37
|
}
|
|
35
|
-
.eds-
|
|
36
|
-
|
|
38
|
+
.eds-form-control-wrapper:focus-within {
|
|
39
|
+
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
37
40
|
}
|
|
38
|
-
.eds-contrast .eds-
|
|
39
|
-
color: #
|
|
41
|
+
.eds-contrast .eds-form-control-wrapper[focus-within] {
|
|
42
|
+
--border-color: #181c56;
|
|
43
|
+
box-shadow: 0 0 0 0.125rem #aeb7e2;
|
|
40
44
|
}
|
|
41
|
-
.eds-
|
|
42
|
-
color: #
|
|
45
|
+
.eds-contrast .eds-form-control-wrapper:focus-within {
|
|
46
|
+
--border-color: #181c56;
|
|
47
|
+
box-shadow: 0 0 0 0.125rem #aeb7e2;
|
|
43
48
|
}
|
|
44
|
-
.eds-
|
|
45
|
-
color: #
|
|
49
|
+
.eds-form-control-wrapper ::-moz-placeholder {
|
|
50
|
+
color: #656782;
|
|
46
51
|
}
|
|
47
|
-
.eds-
|
|
48
|
-
color: #
|
|
52
|
+
.eds-form-control-wrapper ::placeholder {
|
|
53
|
+
color: #656782;
|
|
49
54
|
}
|
|
50
|
-
.eds-
|
|
51
|
-
|
|
55
|
+
.eds-form-control-wrapper--disabled {
|
|
56
|
+
--border-color: transparent;
|
|
57
|
+
background-color: #e9e9e9;
|
|
58
|
+
pointer-events: none;
|
|
59
|
+
color: #646464;
|
|
52
60
|
}
|
|
53
|
-
.eds-
|
|
54
|
-
color: #
|
|
61
|
+
.eds-form-control-wrapper--disabled .eds-input-group__label {
|
|
62
|
+
color: #646464;
|
|
55
63
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
display: flex;
|
|
60
|
-
align-items: center;
|
|
61
|
-
position: relative;
|
|
62
|
-
-webkit-appearance: none;
|
|
63
|
-
-moz-appearance: none;
|
|
64
|
-
appearance: none;
|
|
65
|
-
cursor: pointer;
|
|
66
|
-
-webkit-user-select: none;
|
|
67
|
-
-moz-user-select: none;
|
|
68
|
-
user-select: none;
|
|
69
|
-
width: -moz-fit-content;
|
|
70
|
-
width: fit-content;
|
|
71
|
-
margin: 0.5rem 0;
|
|
64
|
+
.eds-contrast .eds-form-control-wrapper--disabled {
|
|
65
|
+
background: #292b6a;
|
|
66
|
+
color: #8285a8;
|
|
72
67
|
}
|
|
73
|
-
.eds-
|
|
74
|
-
|
|
75
|
-
height: fit-content;
|
|
68
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
|
|
69
|
+
color: #8285a8;
|
|
76
70
|
}
|
|
77
|
-
.eds-
|
|
78
|
-
|
|
79
|
-
opacity: 0;
|
|
80
|
-
height: 0;
|
|
81
|
-
width: 0;
|
|
71
|
+
.eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
|
|
72
|
+
display: none;
|
|
82
73
|
}
|
|
83
|
-
.eds-
|
|
84
|
-
|
|
74
|
+
.eds-form-control-wrapper--readonly {
|
|
75
|
+
--border-color: transparent;
|
|
76
|
+
--textarea-label-background: $colors-greys-grey90;
|
|
77
|
+
pointer-events: none;
|
|
78
|
+
cursor: default;
|
|
79
|
+
background: #f8f8f8;
|
|
85
80
|
}
|
|
86
|
-
.eds-
|
|
87
|
-
|
|
81
|
+
.eds-contrast .eds-form-control-wrapper--readonly {
|
|
82
|
+
--textarea-label-background: $colors-blues-blue10;
|
|
83
|
+
background: #292b6a;
|
|
84
|
+
color: #ffffff;
|
|
88
85
|
}
|
|
89
|
-
.eds-
|
|
90
|
-
|
|
91
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
86
|
+
.eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
|
|
87
|
+
color: #aeb7e2;
|
|
92
88
|
}
|
|
93
|
-
.eds-
|
|
94
|
-
|
|
89
|
+
.eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
|
|
90
|
+
display: none;
|
|
95
91
|
}
|
|
96
|
-
.eds-
|
|
97
|
-
|
|
92
|
+
.eds-form-control-wrapper--size-medium .eds-form-control,
|
|
93
|
+
.eds-form-control-wrapper--size-medium .eds-form-control__append,
|
|
94
|
+
.eds-form-control-wrapper--size-medium .eds-form-control__prepend {
|
|
95
|
+
font-size: 1rem;
|
|
96
|
+
line-height: 1rem;
|
|
98
97
|
}
|
|
99
|
-
.eds-
|
|
100
|
-
|
|
98
|
+
.eds-form-control-wrapper--size-large {
|
|
99
|
+
min-height: 4rem;
|
|
100
|
+
padding: 0 0.5rem;
|
|
101
101
|
}
|
|
102
|
-
.eds-
|
|
103
|
-
|
|
102
|
+
.eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
|
|
103
|
+
border-width: 0.25rem;
|
|
104
104
|
}
|
|
105
|
-
.eds-
|
|
106
|
-
|
|
105
|
+
.eds-form-control-wrapper--size-large .eds-form-control,
|
|
106
|
+
.eds-form-control-wrapper--size-large .eds-form-control__append,
|
|
107
|
+
.eds-form-control-wrapper--size-large .eds-form-control__prepend {
|
|
108
|
+
font-size: 1.5rem;
|
|
109
|
+
line-height: 2.25rem;
|
|
107
110
|
}
|
|
108
|
-
.eds-
|
|
109
|
-
|
|
111
|
+
.eds-form-control-wrapper--success {
|
|
112
|
+
border-color: #1a8e60;
|
|
113
|
+
--border-color: #1a8e60;
|
|
110
114
|
}
|
|
111
|
-
.eds-
|
|
112
|
-
|
|
115
|
+
.eds-form-control-wrapper--success:hover {
|
|
116
|
+
border-color: #5ac39a;
|
|
113
117
|
}
|
|
114
|
-
.eds-
|
|
115
|
-
|
|
118
|
+
.eds-form-control-wrapper--success[focus-within] {
|
|
119
|
+
border-color: #1a8e60;
|
|
116
120
|
}
|
|
117
|
-
.eds-
|
|
118
|
-
|
|
121
|
+
.eds-form-control-wrapper--success:focus-within {
|
|
122
|
+
border-color: #1a8e60;
|
|
119
123
|
}
|
|
120
|
-
.eds-
|
|
121
|
-
border-color: #
|
|
122
|
-
|
|
124
|
+
.eds-contrast .eds-form-control-wrapper--success {
|
|
125
|
+
border-color: #5ac39a;
|
|
126
|
+
--border-color: #5ac39a;
|
|
123
127
|
}
|
|
124
|
-
.eds-contrast .eds-
|
|
125
|
-
border-color: #
|
|
126
|
-
background-color: rgba(174, 183, 226, 0.2);
|
|
128
|
+
.eds-contrast .eds-form-control-wrapper--success:hover {
|
|
129
|
+
border-color: #1a8e60;
|
|
127
130
|
}
|
|
128
|
-
.eds-
|
|
129
|
-
|
|
130
|
-
border-color:
|
|
131
|
-
background-color: #54568c;
|
|
131
|
+
.eds-contrast .eds-form-control-wrapper--success[focus-within] {
|
|
132
|
+
--border-color: #5ac39a;
|
|
133
|
+
border-color: #181c56;
|
|
132
134
|
}
|
|
133
|
-
.eds-contrast .eds-
|
|
134
|
-
|
|
135
|
-
|
|
135
|
+
.eds-contrast .eds-form-control-wrapper--success:focus-within {
|
|
136
|
+
--border-color: #5ac39a;
|
|
137
|
+
border-color: #181c56;
|
|
136
138
|
}
|
|
137
|
-
.eds-
|
|
138
|
-
border-color: #
|
|
139
|
+
.eds-form-control-wrapper--error {
|
|
140
|
+
border-color: #d31b1b;
|
|
141
|
+
--border-color: #d31b1b;
|
|
139
142
|
}
|
|
140
|
-
.eds-
|
|
141
|
-
border-color: #
|
|
143
|
+
.eds-form-control-wrapper--error:hover {
|
|
144
|
+
border-color: #ff9494;
|
|
142
145
|
}
|
|
143
|
-
.eds-
|
|
144
|
-
|
|
145
|
-
background-color: #16194d;
|
|
146
|
+
.eds-form-control-wrapper--error[focus-within] {
|
|
147
|
+
border-color: #d31b1b;
|
|
146
148
|
}
|
|
147
|
-
.eds-
|
|
148
|
-
|
|
149
|
-
background-color: #9da5cb;
|
|
149
|
+
.eds-form-control-wrapper--error:focus-within {
|
|
150
|
+
border-color: #d31b1b;
|
|
150
151
|
}
|
|
151
|
-
.eds-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
155
|
-
outline-offset: 0.125rem;
|
|
152
|
+
.eds-contrast .eds-form-control-wrapper--error {
|
|
153
|
+
border-color: #ff9494;
|
|
154
|
+
--border-color: #ff9494;
|
|
156
155
|
}
|
|
157
|
-
.eds-
|
|
158
|
-
|
|
159
|
-
outline: none;
|
|
160
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
161
|
-
outline-offset: 0.125rem;
|
|
156
|
+
.eds-contrast .eds-form-control-wrapper--error:hover {
|
|
157
|
+
border-color: #d31b1b;
|
|
162
158
|
}
|
|
163
|
-
.eds-contrast .eds-
|
|
164
|
-
|
|
165
|
-
|
|
159
|
+
.eds-contrast .eds-form-control-wrapper--error[focus-within] {
|
|
160
|
+
border-color: #181c56;
|
|
161
|
+
--border-color: #ff9494;
|
|
166
162
|
}
|
|
167
|
-
.eds-contrast .eds-
|
|
168
|
-
|
|
169
|
-
|
|
163
|
+
.eds-contrast .eds-form-control-wrapper--error:focus-within {
|
|
164
|
+
border-color: #181c56;
|
|
165
|
+
--border-color: #ff9494;
|
|
170
166
|
}
|
|
171
|
-
.eds-
|
|
172
|
-
|
|
167
|
+
.eds-contrast .eds-form-control-wrapper--dark {
|
|
168
|
+
background-color: #181c56;
|
|
169
|
+
color: #ffffff;
|
|
173
170
|
}
|
|
174
|
-
.eds-
|
|
175
|
-
|
|
171
|
+
.eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
|
|
172
|
+
color: #aeb7e2;
|
|
176
173
|
}
|
|
177
|
-
.eds-
|
|
178
|
-
|
|
174
|
+
.eds-contrast .eds-form-control-wrapper--dark ::placeholder {
|
|
175
|
+
color: #aeb7e2;
|
|
179
176
|
}
|
|
180
|
-
.eds-
|
|
181
|
-
|
|
182
|
-
display: inline-flex;
|
|
183
|
-
justify-content: center;
|
|
184
|
-
align-items: center;
|
|
185
|
-
position: relative;
|
|
186
|
-
margin-right: 1rem;
|
|
187
|
-
height: 1.25rem;
|
|
188
|
-
width: 1.25rem;
|
|
189
|
-
border: 0.125rem solid #181c56;
|
|
190
|
-
border-radius: 0.125rem;
|
|
191
|
-
background-color: transparent;
|
|
192
|
-
color: #ffffff;
|
|
193
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
177
|
+
.eds-contrast .eds-form-control-wrapper--dark:hover {
|
|
178
|
+
border-color: #aeb7e2;
|
|
194
179
|
}
|
|
195
|
-
.eds-
|
|
196
|
-
|
|
180
|
+
.eds-contrast .eds-form-control-wrapper--dark[focus-within] {
|
|
181
|
+
background-color: #292b6a;
|
|
182
|
+
border-color: #aeb7e2;
|
|
197
183
|
}
|
|
198
|
-
.eds-contrast .eds-
|
|
184
|
+
.eds-contrast .eds-form-control-wrapper--dark:focus-within {
|
|
185
|
+
background-color: #292b6a;
|
|
199
186
|
border-color: #aeb7e2;
|
|
200
187
|
}
|
|
201
|
-
.eds-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
visibility: hidden;
|
|
188
|
+
.eds-contrast .eds-form-control-wrapper--dark * {
|
|
189
|
+
background-color: transparent;
|
|
190
|
+
color: inherit;
|
|
205
191
|
}
|
|
206
|
-
.eds-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
stroke-dashoffset: 48;
|
|
210
|
-
stroke-width: 0.375rem;
|
|
192
|
+
.eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
|
|
193
|
+
background-color: #292b6a;
|
|
194
|
+
color: #8285a8;
|
|
211
195
|
}
|
|
212
196
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
197
|
+
.eds-form-control {
|
|
198
|
+
-webkit-appearance: none;
|
|
199
|
+
-moz-appearance: none;
|
|
200
|
+
appearance: none;
|
|
201
|
+
background-color: transparent;
|
|
202
|
+
border: 0;
|
|
203
|
+
color: inherit;
|
|
204
|
+
display: block;
|
|
205
|
+
font-family: inherit;
|
|
206
|
+
line-height: 1rem;
|
|
207
|
+
font-size: 1rem;
|
|
208
|
+
padding: 20px 1rem 0.25rem;
|
|
209
|
+
width: 100%;
|
|
210
|
+
}
|
|
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;
|
|
217
245
|
}
|
|
218
246
|
/* DO NOT CHANGE!*/
|
|
219
247
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -348,252 +376,224 @@
|
|
|
348
376
|
}
|
|
349
377
|
/* DO NOT CHANGE!*/
|
|
350
378
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
351
|
-
.eds-
|
|
352
|
-
--border-color: #7C7F9F;
|
|
353
|
-
--border-color-hover: #aeb7e2;
|
|
354
|
-
align-items: center;
|
|
355
|
-
background-color: #ffffff;
|
|
356
|
-
border-radius: 0.25rem;
|
|
357
|
-
border: 0.125rem solid var(--border-color);
|
|
358
|
-
box-shadow: 0 0 0 transparent;
|
|
359
|
-
color: #181c56;
|
|
379
|
+
.eds-checkbox__container {
|
|
360
380
|
display: flex;
|
|
381
|
+
align-items: center;
|
|
361
382
|
position: relative;
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
--border-color: #181c56;
|
|
373
|
-
}
|
|
374
|
-
.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
|
|
375
|
-
--border-color: #181c56;
|
|
376
|
-
}
|
|
377
|
-
.eds-contrast .eds-form-control-wrapper:hover {
|
|
378
|
-
--border-color: #aeb7e2;
|
|
379
|
-
}
|
|
380
|
-
.eds-form-control-wrapper[focus-within] {
|
|
381
|
-
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
382
|
-
}
|
|
383
|
-
.eds-form-control-wrapper:focus-within {
|
|
384
|
-
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
385
|
-
}
|
|
386
|
-
.eds-contrast .eds-form-control-wrapper[focus-within] {
|
|
387
|
-
--border-color: #181c56;
|
|
388
|
-
box-shadow: 0 0 0 0.125rem #aeb7e2;
|
|
389
|
-
}
|
|
390
|
-
.eds-contrast .eds-form-control-wrapper:focus-within {
|
|
391
|
-
--border-color: #181c56;
|
|
392
|
-
box-shadow: 0 0 0 0.125rem #aeb7e2;
|
|
393
|
-
}
|
|
394
|
-
.eds-form-control-wrapper ::-moz-placeholder {
|
|
395
|
-
color: #656782;
|
|
396
|
-
}
|
|
397
|
-
.eds-form-control-wrapper ::placeholder {
|
|
398
|
-
color: #656782;
|
|
399
|
-
}
|
|
400
|
-
.eds-form-control-wrapper--disabled {
|
|
401
|
-
--border-color: transparent;
|
|
402
|
-
background-color: #e9e9e9;
|
|
403
|
-
pointer-events: none;
|
|
404
|
-
color: #646464;
|
|
405
|
-
}
|
|
406
|
-
.eds-form-control-wrapper--disabled .eds-input-group__label {
|
|
407
|
-
color: #646464;
|
|
408
|
-
}
|
|
409
|
-
.eds-contrast .eds-form-control-wrapper--disabled {
|
|
410
|
-
background: #292b6a;
|
|
411
|
-
color: #8285a8;
|
|
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;
|
|
412
393
|
}
|
|
413
|
-
.eds-
|
|
414
|
-
|
|
394
|
+
.eds-checkbox__container--reduced-click-area {
|
|
395
|
+
height: -moz-fit-content;
|
|
396
|
+
height: fit-content;
|
|
415
397
|
}
|
|
416
|
-
.eds-
|
|
417
|
-
|
|
398
|
+
.eds-checkbox__container input {
|
|
399
|
+
position: absolute;
|
|
400
|
+
opacity: 0;
|
|
401
|
+
height: 0;
|
|
402
|
+
width: 0;
|
|
418
403
|
}
|
|
419
|
-
.eds-
|
|
420
|
-
|
|
421
|
-
--textarea-label-background: $colors-greys-grey90;
|
|
422
|
-
pointer-events: none;
|
|
423
|
-
cursor: default;
|
|
424
|
-
background: #f8f8f8;
|
|
404
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
405
|
+
background-color: #181c56;
|
|
425
406
|
}
|
|
426
|
-
.eds-
|
|
427
|
-
|
|
428
|
-
background: #292b6a;
|
|
429
|
-
color: #ffffff;
|
|
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;
|
|
430
409
|
}
|
|
431
|
-
.eds-
|
|
432
|
-
|
|
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;
|
|
433
413
|
}
|
|
434
|
-
.eds-
|
|
435
|
-
|
|
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;
|
|
436
416
|
}
|
|
437
|
-
.eds-
|
|
438
|
-
|
|
439
|
-
.eds-form-control-wrapper--size-medium .eds-form-control__prepend {
|
|
440
|
-
font-size: 1rem;
|
|
441
|
-
line-height: 1rem;
|
|
417
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
418
|
+
opacity: 0.5;
|
|
442
419
|
}
|
|
443
|
-
.eds-
|
|
444
|
-
|
|
445
|
-
padding: 0 0.5rem;
|
|
420
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
421
|
+
opacity: 0.5;
|
|
446
422
|
}
|
|
447
|
-
.eds-
|
|
448
|
-
|
|
423
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
424
|
+
opacity: 0.5;
|
|
449
425
|
}
|
|
450
|
-
.eds-
|
|
451
|
-
|
|
452
|
-
.eds-form-control-wrapper--size-large .eds-form-control__prepend {
|
|
453
|
-
font-size: 1.5rem;
|
|
454
|
-
line-height: 2.25rem;
|
|
426
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
427
|
+
opacity: 0.5;
|
|
455
428
|
}
|
|
456
|
-
.eds-
|
|
457
|
-
|
|
458
|
-
--border-color: #1a8e60;
|
|
429
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
430
|
+
opacity: 0.5;
|
|
459
431
|
}
|
|
460
|
-
.eds-
|
|
461
|
-
|
|
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;
|
|
462
434
|
}
|
|
463
|
-
.eds-
|
|
464
|
-
|
|
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;
|
|
465
437
|
}
|
|
466
|
-
.eds-
|
|
467
|
-
|
|
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;
|
|
468
440
|
}
|
|
469
|
-
.eds-
|
|
470
|
-
border-color: #
|
|
471
|
-
|
|
441
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
442
|
+
border-color: #292b6a;
|
|
443
|
+
background-color: #d1d4e3;
|
|
472
444
|
}
|
|
473
|
-
.eds-contrast .eds-
|
|
474
|
-
border-color: #
|
|
445
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
446
|
+
border-color: #b6bee5;
|
|
447
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
475
448
|
}
|
|
476
|
-
.eds-
|
|
477
|
-
|
|
478
|
-
border-color:
|
|
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;
|
|
479
453
|
}
|
|
480
|
-
.eds-contrast .eds-
|
|
481
|
-
|
|
482
|
-
|
|
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;
|
|
483
457
|
}
|
|
484
|
-
.eds-
|
|
485
|
-
border-color: #
|
|
486
|
-
--border-color: #d31b1b;
|
|
458
|
+
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
459
|
+
border-color: #16194d;
|
|
487
460
|
}
|
|
488
|
-
.eds-
|
|
489
|
-
border-color: #
|
|
461
|
+
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
462
|
+
border-color: #9da5cb;
|
|
490
463
|
}
|
|
491
|
-
.eds-
|
|
492
|
-
|
|
464
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
465
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
466
|
+
background-color: #16194d;
|
|
493
467
|
}
|
|
494
|
-
.eds-
|
|
495
|
-
|
|
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;
|
|
496
471
|
}
|
|
497
|
-
.eds-
|
|
498
|
-
|
|
499
|
-
|
|
472
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
473
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
474
|
+
outline: none;
|
|
475
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
476
|
+
outline-offset: 0.125rem;
|
|
500
477
|
}
|
|
501
|
-
.eds-
|
|
502
|
-
|
|
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;
|
|
503
483
|
}
|
|
504
|
-
.eds-contrast .eds-
|
|
505
|
-
|
|
506
|
-
|
|
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;
|
|
507
487
|
}
|
|
508
|
-
.eds-contrast .eds-
|
|
509
|
-
|
|
510
|
-
|
|
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;
|
|
511
491
|
}
|
|
512
|
-
.eds-
|
|
513
|
-
|
|
514
|
-
color: #ffffff;
|
|
492
|
+
.eds-checkbox--disabled {
|
|
493
|
+
pointer-events: none;
|
|
515
494
|
}
|
|
516
|
-
.eds-
|
|
517
|
-
|
|
495
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
496
|
+
opacity: 0.5;
|
|
518
497
|
}
|
|
519
|
-
.eds-
|
|
520
|
-
|
|
498
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
499
|
+
opacity: 0.5;
|
|
521
500
|
}
|
|
522
|
-
.eds-
|
|
523
|
-
|
|
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;
|
|
524
515
|
}
|
|
525
|
-
.eds-
|
|
526
|
-
|
|
527
|
-
border-color: #aeb7e2;
|
|
516
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
517
|
+
margin-right: 0;
|
|
528
518
|
}
|
|
529
|
-
.eds-contrast .eds-
|
|
530
|
-
background-color: #292b6a;
|
|
519
|
+
.eds-contrast .eds-checkbox__icon {
|
|
531
520
|
border-color: #aeb7e2;
|
|
532
521
|
}
|
|
533
|
-
.eds-
|
|
534
|
-
|
|
535
|
-
|
|
522
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
523
|
+
height: 1rem;
|
|
524
|
+
width: 1rem;
|
|
525
|
+
visibility: hidden;
|
|
536
526
|
}
|
|
537
|
-
.eds-
|
|
538
|
-
|
|
539
|
-
|
|
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;
|
|
540
532
|
}
|
|
541
533
|
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
background-color: transparent;
|
|
547
|
-
border: 0;
|
|
548
|
-
color: inherit;
|
|
549
|
-
display: block;
|
|
550
|
-
font-family: inherit;
|
|
551
|
-
line-height: 1rem;
|
|
552
|
-
font-size: 1rem;
|
|
553
|
-
padding: 20px 1rem 0.25rem;
|
|
554
|
-
width: 100%;
|
|
534
|
+
@keyframes stroke {
|
|
535
|
+
100% {
|
|
536
|
+
stroke-dashoffset: 0;
|
|
537
|
+
}
|
|
555
538
|
}
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
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;
|
|
560
545
|
}
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
546
|
+
/* DO NOT CHANGE!*/
|
|
547
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
548
|
+
.eds-feedback-text {
|
|
549
|
+
display: flex;
|
|
550
|
+
align-items: center;
|
|
551
|
+
margin-top: 0.25rem;
|
|
564
552
|
}
|
|
565
|
-
.eds-
|
|
566
|
-
|
|
553
|
+
.eds-feedback-text--info {
|
|
554
|
+
padding-left: calc(1rem + 0.125rem);
|
|
567
555
|
}
|
|
568
|
-
.eds-
|
|
569
|
-
|
|
556
|
+
.eds-feedback-text__text {
|
|
557
|
+
color: #181c56;
|
|
570
558
|
}
|
|
571
|
-
.eds-
|
|
572
|
-
|
|
559
|
+
.eds-contrast .eds-feedback-text__text {
|
|
560
|
+
color: #ffffff;
|
|
573
561
|
}
|
|
574
|
-
|
|
562
|
+
|
|
563
|
+
.eds-feedback-text__icon {
|
|
564
|
+
font-size: 1.5rem;
|
|
565
|
+
min-height: 1.5rem;
|
|
566
|
+
min-width: 1.5rem;
|
|
567
|
+
padding-right: 0.5rem;
|
|
575
568
|
position: relative;
|
|
576
|
-
|
|
577
|
-
line-height: inherit;
|
|
569
|
+
top: -0.1rem;
|
|
578
570
|
}
|
|
579
|
-
.eds-
|
|
580
|
-
|
|
571
|
+
.eds-feedback-text__icon--success {
|
|
572
|
+
color: #1a8e60;
|
|
581
573
|
}
|
|
582
|
-
.eds-
|
|
583
|
-
|
|
574
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
575
|
+
color: #5ac39a;
|
|
584
576
|
}
|
|
585
|
-
.eds-
|
|
586
|
-
|
|
577
|
+
.eds-feedback-text__icon--error {
|
|
578
|
+
color: #d31b1b;
|
|
587
579
|
}
|
|
588
|
-
.eds-
|
|
589
|
-
|
|
580
|
+
.eds-contrast .eds-feedback-text__icon--error {
|
|
581
|
+
color: #ff9494;
|
|
590
582
|
}
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
583
|
+
.eds-feedback-text__icon--info {
|
|
584
|
+
color: #0082b9;
|
|
585
|
+
}
|
|
586
|
+
.eds-contrast .eds-feedback-text__icon--info {
|
|
587
|
+
color: #64b3e7;
|
|
588
|
+
}
|
|
589
|
+
.eds-feedback-text__icon--warning {
|
|
590
|
+
color: #ffca28;
|
|
591
|
+
}
|
|
592
|
+
.eds-feedback-text__icon--warning circle {
|
|
593
|
+
fill: #181c56;
|
|
594
|
+
}
|
|
595
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
596
|
+
color: #ffe082;
|
|
597
597
|
}
|
|
598
598
|
/* DO NOT CHANGE!*/
|
|
599
599
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -848,6 +848,17 @@ 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. */
|
|
851
862
|
.eds-segmented-choice {
|
|
852
863
|
display: block;
|
|
853
864
|
flex: 1 1 0px;
|
|
@@ -919,17 +930,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
919
930
|
}
|
|
920
931
|
/* DO NOT CHANGE!*/
|
|
921
932
|
/* 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.14",
|
|
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.4.1",
|
|
31
31
|
"@entur/tokens": "^3.10.0",
|
|
32
|
-
"@entur/tooltip": "^2.6.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
32
|
+
"@entur/tooltip": "^2.6.24",
|
|
33
|
+
"@entur/typography": "^1.8.5",
|
|
34
34
|
"@entur/utils": "^0.9.3",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "113113f32a331fcd5f01d20e2c47ae2f2b73b93e"
|
|
38
38
|
}
|