@entur/form 7.0.12 → 7.0.13
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 +370 -370
- package/package.json +5 -5
package/dist/styles.css
CHANGED
|
@@ -55,299 +55,6 @@
|
|
|
55
55
|
}
|
|
56
56
|
/* DO NOT CHANGE!*/
|
|
57
57
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
58
|
-
.eds-checkbox__container {
|
|
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;
|
|
72
|
-
}
|
|
73
|
-
.eds-checkbox__container--reduced-click-area {
|
|
74
|
-
height: -moz-fit-content;
|
|
75
|
-
height: fit-content;
|
|
76
|
-
}
|
|
77
|
-
.eds-checkbox__container input {
|
|
78
|
-
position: absolute;
|
|
79
|
-
opacity: 0;
|
|
80
|
-
height: 0;
|
|
81
|
-
width: 0;
|
|
82
|
-
}
|
|
83
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
84
|
-
background-color: #181c56;
|
|
85
|
-
}
|
|
86
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
87
|
-
visibility: visible;
|
|
88
|
-
}
|
|
89
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
90
|
-
stroke: #ffffff;
|
|
91
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
92
|
-
}
|
|
93
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
94
|
-
fill: #ffffff;
|
|
95
|
-
}
|
|
96
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
97
|
-
opacity: 0.5;
|
|
98
|
-
}
|
|
99
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
100
|
-
opacity: 0.5;
|
|
101
|
-
}
|
|
102
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
103
|
-
opacity: 0.5;
|
|
104
|
-
}
|
|
105
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
106
|
-
opacity: 0.5;
|
|
107
|
-
}
|
|
108
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
109
|
-
opacity: 0.5;
|
|
110
|
-
}
|
|
111
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
112
|
-
background-color: #aeb7e2;
|
|
113
|
-
}
|
|
114
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
115
|
-
stroke: #181c56;
|
|
116
|
-
}
|
|
117
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
118
|
-
fill: #181c56;
|
|
119
|
-
}
|
|
120
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
121
|
-
border-color: #292b6a;
|
|
122
|
-
background-color: #d1d4e3;
|
|
123
|
-
}
|
|
124
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
125
|
-
border-color: #b6bee5;
|
|
126
|
-
background-color: rgba(174, 183, 226, 0.2);
|
|
127
|
-
}
|
|
128
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
129
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
130
|
-
border-color: transparent;
|
|
131
|
-
background-color: #54568c;
|
|
132
|
-
}
|
|
133
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
134
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
135
|
-
background-color: #b6bee5;
|
|
136
|
-
}
|
|
137
|
-
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
138
|
-
border-color: #16194d;
|
|
139
|
-
}
|
|
140
|
-
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
141
|
-
border-color: #9da5cb;
|
|
142
|
-
}
|
|
143
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
144
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
145
|
-
background-color: #16194d;
|
|
146
|
-
}
|
|
147
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
148
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
149
|
-
background-color: #9da5cb;
|
|
150
|
-
}
|
|
151
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
152
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
153
|
-
outline: none;
|
|
154
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
155
|
-
outline-offset: 0.125rem;
|
|
156
|
-
}
|
|
157
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
158
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
159
|
-
outline: none;
|
|
160
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
161
|
-
outline-offset: 0.125rem;
|
|
162
|
-
}
|
|
163
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
164
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
165
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
166
|
-
}
|
|
167
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
168
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
169
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
170
|
-
}
|
|
171
|
-
.eds-checkbox--disabled {
|
|
172
|
-
pointer-events: none;
|
|
173
|
-
}
|
|
174
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
175
|
-
opacity: 0.5;
|
|
176
|
-
}
|
|
177
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
178
|
-
opacity: 0.5;
|
|
179
|
-
}
|
|
180
|
-
.eds-checkbox__icon {
|
|
181
|
-
box-sizing: border-box;
|
|
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;
|
|
194
|
-
}
|
|
195
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
196
|
-
margin-right: 0;
|
|
197
|
-
}
|
|
198
|
-
.eds-contrast .eds-checkbox__icon {
|
|
199
|
-
border-color: #aeb7e2;
|
|
200
|
-
}
|
|
201
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
202
|
-
height: 1rem;
|
|
203
|
-
width: 1rem;
|
|
204
|
-
visibility: hidden;
|
|
205
|
-
}
|
|
206
|
-
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
207
|
-
transform-origin: 50% 50%;
|
|
208
|
-
stroke-dasharray: 48;
|
|
209
|
-
stroke-dashoffset: 48;
|
|
210
|
-
stroke-width: 0.375rem;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
@keyframes stroke {
|
|
214
|
-
100% {
|
|
215
|
-
stroke-dashoffset: 0;
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
/* DO NOT CHANGE!*/
|
|
219
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
220
|
-
.eds-input-group {
|
|
221
|
-
color: inherit;
|
|
222
|
-
display: block;
|
|
223
|
-
position: relative;
|
|
224
|
-
}
|
|
225
|
-
.eds-input-group__label {
|
|
226
|
-
color: #656782;
|
|
227
|
-
display: flex;
|
|
228
|
-
font-size: 1rem;
|
|
229
|
-
position: absolute;
|
|
230
|
-
line-height: 1rem;
|
|
231
|
-
height: 3rem;
|
|
232
|
-
padding: 1rem;
|
|
233
|
-
padding-left: 0;
|
|
234
|
-
margin-left: 1rem;
|
|
235
|
-
top: -0.125rem;
|
|
236
|
-
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;
|
|
237
|
-
-webkit-user-select: none;
|
|
238
|
-
-moz-user-select: none;
|
|
239
|
-
user-select: none;
|
|
240
|
-
pointer-events: none;
|
|
241
|
-
}
|
|
242
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
243
|
-
top: 0.375rem;
|
|
244
|
-
font-size: 0.75rem;
|
|
245
|
-
line-height: 0.75rem;
|
|
246
|
-
height: 10px;
|
|
247
|
-
padding: 0;
|
|
248
|
-
margin-left: 1rem;
|
|
249
|
-
}
|
|
250
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
251
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
252
|
-
background: var(--textarea-label-background);
|
|
253
|
-
width: calc(
|
|
254
|
-
100% - 1rem - 1rem - 4px
|
|
255
|
-
);
|
|
256
|
-
}
|
|
257
|
-
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
258
|
-
top: 0.5rem;
|
|
259
|
-
font-size: 0.875rem;
|
|
260
|
-
line-height: 1rem;
|
|
261
|
-
padding: 0;
|
|
262
|
-
margin-left: 1rem;
|
|
263
|
-
}
|
|
264
|
-
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
265
|
-
color: #aeb7e2;
|
|
266
|
-
}
|
|
267
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
268
|
-
font-size: 1.5rem;
|
|
269
|
-
line-height: 2.25rem;
|
|
270
|
-
height: 4rem;
|
|
271
|
-
}
|
|
272
|
-
.eds-input-group__label--filled {
|
|
273
|
-
top: 0.375rem;
|
|
274
|
-
font-size: 0.75rem;
|
|
275
|
-
line-height: 0.75rem;
|
|
276
|
-
height: 10px;
|
|
277
|
-
padding: 0;
|
|
278
|
-
margin-left: 1rem;
|
|
279
|
-
}
|
|
280
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
281
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
282
|
-
background: var(--textarea-label-background);
|
|
283
|
-
width: calc(
|
|
284
|
-
100% - 1rem - 1rem - 4px
|
|
285
|
-
);
|
|
286
|
-
}
|
|
287
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
288
|
-
top: 0.5rem;
|
|
289
|
-
font-size: 0.875rem;
|
|
290
|
-
line-height: 1rem;
|
|
291
|
-
padding: 0;
|
|
292
|
-
margin-left: 1rem;
|
|
293
|
-
}
|
|
294
|
-
.eds-input-group__label-tooltip-icon {
|
|
295
|
-
color: #0082b9;
|
|
296
|
-
padding-left: 0.25rem;
|
|
297
|
-
padding-right: 0.25rem;
|
|
298
|
-
display: flex;
|
|
299
|
-
align-items: center;
|
|
300
|
-
cursor: help;
|
|
301
|
-
font-size: 1rem;
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
305
|
-
top: 0.375rem;
|
|
306
|
-
font-size: 0.75rem;
|
|
307
|
-
line-height: 0.75rem;
|
|
308
|
-
height: 10px;
|
|
309
|
-
padding: 0;
|
|
310
|
-
margin-left: 1rem;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
314
|
-
top: 0.375rem;
|
|
315
|
-
font-size: 0.75rem;
|
|
316
|
-
line-height: 0.75rem;
|
|
317
|
-
height: 10px;
|
|
318
|
-
padding: 0;
|
|
319
|
-
margin-left: 1rem;
|
|
320
|
-
}
|
|
321
|
-
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
322
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
323
|
-
background: var(--textarea-label-background);
|
|
324
|
-
width: calc(
|
|
325
|
-
100% - 1rem - 1rem - 4px
|
|
326
|
-
);
|
|
327
|
-
}
|
|
328
|
-
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
329
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
330
|
-
background: var(--textarea-label-background);
|
|
331
|
-
width: calc(
|
|
332
|
-
100% - 1rem - 1rem - 4px
|
|
333
|
-
);
|
|
334
|
-
}
|
|
335
|
-
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
336
|
-
top: 0.5rem;
|
|
337
|
-
font-size: 0.875rem;
|
|
338
|
-
line-height: 1rem;
|
|
339
|
-
padding: 0;
|
|
340
|
-
margin-left: 1rem;
|
|
341
|
-
}
|
|
342
|
-
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
343
|
-
top: 0.5rem;
|
|
344
|
-
font-size: 0.875rem;
|
|
345
|
-
line-height: 1rem;
|
|
346
|
-
padding: 0;
|
|
347
|
-
margin-left: 1rem;
|
|
348
|
-
}
|
|
349
|
-
/* DO NOT CHANGE!*/
|
|
350
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
351
58
|
.eds-form-control-wrapper {
|
|
352
59
|
--border-color: #7C7F9F;
|
|
353
60
|
--border-color-hover: #aeb7e2;
|
|
@@ -576,112 +283,317 @@
|
|
|
576
283
|
margin: 0 1rem;
|
|
577
284
|
line-height: inherit;
|
|
578
285
|
}
|
|
579
|
-
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
580
|
-
position: static;
|
|
286
|
+
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
287
|
+
position: static;
|
|
288
|
+
}
|
|
289
|
+
.eds-form-control__prepend svg, .eds-form-control__append svg {
|
|
290
|
+
top: 0.125rem;
|
|
291
|
+
}
|
|
292
|
+
.eds-form-control__prepend {
|
|
293
|
+
margin-right: 0;
|
|
294
|
+
}
|
|
295
|
+
.eds-form-control__append {
|
|
296
|
+
margin-left: 0;
|
|
297
|
+
}
|
|
298
|
+
/* DO NOT CHANGE!*/
|
|
299
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
300
|
+
.eds-input-group {
|
|
301
|
+
color: inherit;
|
|
302
|
+
display: block;
|
|
303
|
+
position: relative;
|
|
304
|
+
}
|
|
305
|
+
.eds-input-group__label {
|
|
306
|
+
color: #656782;
|
|
307
|
+
display: flex;
|
|
308
|
+
font-size: 1rem;
|
|
309
|
+
position: absolute;
|
|
310
|
+
line-height: 1rem;
|
|
311
|
+
height: 3rem;
|
|
312
|
+
padding: 1rem;
|
|
313
|
+
padding-left: 0;
|
|
314
|
+
margin-left: 1rem;
|
|
315
|
+
top: -0.125rem;
|
|
316
|
+
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;
|
|
317
|
+
-webkit-user-select: none;
|
|
318
|
+
-moz-user-select: none;
|
|
319
|
+
user-select: none;
|
|
320
|
+
pointer-events: none;
|
|
321
|
+
}
|
|
322
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
323
|
+
top: 0.375rem;
|
|
324
|
+
font-size: 0.75rem;
|
|
325
|
+
line-height: 0.75rem;
|
|
326
|
+
height: 10px;
|
|
327
|
+
padding: 0;
|
|
328
|
+
margin-left: 1rem;
|
|
329
|
+
}
|
|
330
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
331
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
332
|
+
background: var(--textarea-label-background);
|
|
333
|
+
width: calc(
|
|
334
|
+
100% - 1rem - 1rem - 4px
|
|
335
|
+
);
|
|
336
|
+
}
|
|
337
|
+
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
338
|
+
top: 0.5rem;
|
|
339
|
+
font-size: 0.875rem;
|
|
340
|
+
line-height: 1rem;
|
|
341
|
+
padding: 0;
|
|
342
|
+
margin-left: 1rem;
|
|
343
|
+
}
|
|
344
|
+
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
345
|
+
color: #aeb7e2;
|
|
346
|
+
}
|
|
347
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
348
|
+
font-size: 1.5rem;
|
|
349
|
+
line-height: 2.25rem;
|
|
350
|
+
height: 4rem;
|
|
351
|
+
}
|
|
352
|
+
.eds-input-group__label--filled {
|
|
353
|
+
top: 0.375rem;
|
|
354
|
+
font-size: 0.75rem;
|
|
355
|
+
line-height: 0.75rem;
|
|
356
|
+
height: 10px;
|
|
357
|
+
padding: 0;
|
|
358
|
+
margin-left: 1rem;
|
|
359
|
+
}
|
|
360
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
361
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
362
|
+
background: var(--textarea-label-background);
|
|
363
|
+
width: calc(
|
|
364
|
+
100% - 1rem - 1rem - 4px
|
|
365
|
+
);
|
|
366
|
+
}
|
|
367
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
368
|
+
top: 0.5rem;
|
|
369
|
+
font-size: 0.875rem;
|
|
370
|
+
line-height: 1rem;
|
|
371
|
+
padding: 0;
|
|
372
|
+
margin-left: 1rem;
|
|
373
|
+
}
|
|
374
|
+
.eds-input-group__label-tooltip-icon {
|
|
375
|
+
color: #0082b9;
|
|
376
|
+
padding-left: 0.25rem;
|
|
377
|
+
padding-right: 0.25rem;
|
|
378
|
+
display: flex;
|
|
379
|
+
align-items: center;
|
|
380
|
+
cursor: help;
|
|
381
|
+
font-size: 1rem;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
385
|
+
top: 0.375rem;
|
|
386
|
+
font-size: 0.75rem;
|
|
387
|
+
line-height: 0.75rem;
|
|
388
|
+
height: 10px;
|
|
389
|
+
padding: 0;
|
|
390
|
+
margin-left: 1rem;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
394
|
+
top: 0.375rem;
|
|
395
|
+
font-size: 0.75rem;
|
|
396
|
+
line-height: 0.75rem;
|
|
397
|
+
height: 10px;
|
|
398
|
+
padding: 0;
|
|
399
|
+
margin-left: 1rem;
|
|
400
|
+
}
|
|
401
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
402
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
403
|
+
background: var(--textarea-label-background);
|
|
404
|
+
width: calc(
|
|
405
|
+
100% - 1rem - 1rem - 4px
|
|
406
|
+
);
|
|
407
|
+
}
|
|
408
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
409
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
410
|
+
background: var(--textarea-label-background);
|
|
411
|
+
width: calc(
|
|
412
|
+
100% - 1rem - 1rem - 4px
|
|
413
|
+
);
|
|
414
|
+
}
|
|
415
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
416
|
+
top: 0.5rem;
|
|
417
|
+
font-size: 0.875rem;
|
|
418
|
+
line-height: 1rem;
|
|
419
|
+
padding: 0;
|
|
420
|
+
margin-left: 1rem;
|
|
421
|
+
}
|
|
422
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
423
|
+
top: 0.5rem;
|
|
424
|
+
font-size: 0.875rem;
|
|
425
|
+
line-height: 1rem;
|
|
426
|
+
padding: 0;
|
|
427
|
+
margin-left: 1rem;
|
|
428
|
+
}
|
|
429
|
+
/* DO NOT CHANGE!*/
|
|
430
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
431
|
+
.eds-checkbox__container {
|
|
432
|
+
display: flex;
|
|
433
|
+
align-items: center;
|
|
434
|
+
position: relative;
|
|
435
|
+
-webkit-appearance: none;
|
|
436
|
+
-moz-appearance: none;
|
|
437
|
+
appearance: none;
|
|
438
|
+
cursor: pointer;
|
|
439
|
+
-webkit-user-select: none;
|
|
440
|
+
-moz-user-select: none;
|
|
441
|
+
user-select: none;
|
|
442
|
+
width: -moz-fit-content;
|
|
443
|
+
width: fit-content;
|
|
444
|
+
margin: 0.5rem 0;
|
|
445
|
+
}
|
|
446
|
+
.eds-checkbox__container--reduced-click-area {
|
|
447
|
+
height: -moz-fit-content;
|
|
448
|
+
height: fit-content;
|
|
449
|
+
}
|
|
450
|
+
.eds-checkbox__container input {
|
|
451
|
+
position: absolute;
|
|
452
|
+
opacity: 0;
|
|
453
|
+
height: 0;
|
|
454
|
+
width: 0;
|
|
455
|
+
}
|
|
456
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
457
|
+
background-color: #181c56;
|
|
458
|
+
}
|
|
459
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
460
|
+
visibility: visible;
|
|
461
|
+
}
|
|
462
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
463
|
+
stroke: #ffffff;
|
|
464
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
465
|
+
}
|
|
466
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
467
|
+
fill: #ffffff;
|
|
468
|
+
}
|
|
469
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
470
|
+
opacity: 0.5;
|
|
471
|
+
}
|
|
472
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
473
|
+
opacity: 0.5;
|
|
474
|
+
}
|
|
475
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
476
|
+
opacity: 0.5;
|
|
477
|
+
}
|
|
478
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
479
|
+
opacity: 0.5;
|
|
581
480
|
}
|
|
582
|
-
.eds-
|
|
583
|
-
|
|
481
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
482
|
+
opacity: 0.5;
|
|
584
483
|
}
|
|
585
|
-
.eds-
|
|
586
|
-
|
|
484
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
485
|
+
background-color: #aeb7e2;
|
|
587
486
|
}
|
|
588
|
-
.eds-
|
|
589
|
-
|
|
487
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
488
|
+
stroke: #181c56;
|
|
590
489
|
}
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
.eds-fieldset {
|
|
594
|
-
margin: 0;
|
|
595
|
-
padding: 0;
|
|
596
|
-
border: 0;
|
|
490
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
491
|
+
fill: #181c56;
|
|
597
492
|
}
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
display: flex;
|
|
602
|
-
justify-content: center;
|
|
603
|
-
align-items: center;
|
|
604
|
-
position: relative;
|
|
605
|
-
cursor: pointer;
|
|
606
|
-
height: 2rem;
|
|
607
|
-
width: -moz-fit-content;
|
|
608
|
-
width: fit-content;
|
|
609
|
-
-webkit-user-select: none;
|
|
610
|
-
-moz-user-select: none;
|
|
611
|
-
user-select: none;
|
|
493
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
494
|
+
border-color: #292b6a;
|
|
495
|
+
background-color: #d1d4e3;
|
|
612
496
|
}
|
|
613
|
-
.eds-
|
|
614
|
-
border-color: #
|
|
497
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
498
|
+
border-color: #b6bee5;
|
|
499
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
615
500
|
}
|
|
616
|
-
.eds-
|
|
501
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
502
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
503
|
+
border-color: transparent;
|
|
617
504
|
background-color: #54568c;
|
|
618
505
|
}
|
|
619
|
-
.eds-contrast .eds-
|
|
620
|
-
|
|
506
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
507
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
508
|
+
background-color: #b6bee5;
|
|
621
509
|
}
|
|
622
|
-
.eds-
|
|
623
|
-
|
|
510
|
+
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
511
|
+
border-color: #16194d;
|
|
624
512
|
}
|
|
625
|
-
.eds-
|
|
626
|
-
|
|
627
|
-
opacity: 0;
|
|
628
|
-
cursor: pointer;
|
|
629
|
-
height: 0;
|
|
630
|
-
width: 0;
|
|
513
|
+
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
514
|
+
border-color: #9da5cb;
|
|
631
515
|
}
|
|
632
|
-
.eds-
|
|
633
|
-
|
|
634
|
-
|
|
516
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
517
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
518
|
+
background-color: #16194d;
|
|
635
519
|
}
|
|
636
|
-
.eds-
|
|
520
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
521
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
522
|
+
background-color: #9da5cb;
|
|
523
|
+
}
|
|
524
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
525
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
637
526
|
outline: none;
|
|
638
527
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
639
528
|
outline-offset: 0.125rem;
|
|
640
529
|
}
|
|
641
|
-
.eds-
|
|
530
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
531
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
532
|
+
outline: none;
|
|
533
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
534
|
+
outline-offset: 0.125rem;
|
|
535
|
+
}
|
|
536
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
537
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
642
538
|
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
643
539
|
}
|
|
644
|
-
.eds-
|
|
540
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
541
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
542
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
543
|
+
}
|
|
544
|
+
.eds-checkbox--disabled {
|
|
545
|
+
pointer-events: none;
|
|
546
|
+
}
|
|
547
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
548
|
+
opacity: 0.5;
|
|
549
|
+
}
|
|
550
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
551
|
+
opacity: 0.5;
|
|
552
|
+
}
|
|
553
|
+
.eds-checkbox__icon {
|
|
554
|
+
box-sizing: border-box;
|
|
555
|
+
display: inline-flex;
|
|
556
|
+
justify-content: center;
|
|
557
|
+
align-items: center;
|
|
645
558
|
position: relative;
|
|
559
|
+
margin-right: 1rem;
|
|
646
560
|
height: 1.25rem;
|
|
647
561
|
width: 1.25rem;
|
|
648
|
-
margin-right: 1rem;
|
|
649
|
-
background-color: #ffffff;
|
|
650
562
|
border: 0.125rem solid #181c56;
|
|
651
|
-
border-radius:
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
}
|
|
656
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
657
|
-
background-color: #181c56;
|
|
658
|
-
border-color: #aeb7e2;
|
|
563
|
+
border-radius: 0.125rem;
|
|
564
|
+
background-color: transparent;
|
|
565
|
+
color: #ffffff;
|
|
566
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
659
567
|
}
|
|
660
|
-
.eds-
|
|
661
|
-
|
|
662
|
-
border-color: #d1d3d3;
|
|
663
|
-
cursor: not-allowed;
|
|
568
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
569
|
+
margin-right: 0;
|
|
664
570
|
}
|
|
665
|
-
.eds-
|
|
666
|
-
border-color: #
|
|
571
|
+
.eds-contrast .eds-checkbox__icon {
|
|
572
|
+
border-color: #aeb7e2;
|
|
667
573
|
}
|
|
668
|
-
.eds-
|
|
669
|
-
|
|
670
|
-
|
|
574
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
575
|
+
height: 1rem;
|
|
576
|
+
width: 1rem;
|
|
577
|
+
visibility: hidden;
|
|
671
578
|
}
|
|
672
|
-
.eds-
|
|
673
|
-
|
|
579
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
580
|
+
transform-origin: 50% 50%;
|
|
581
|
+
stroke-dasharray: 48;
|
|
582
|
+
stroke-dashoffset: 48;
|
|
583
|
+
stroke-width: 0.375rem;
|
|
674
584
|
}
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
background-color: #181c56;
|
|
681
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
585
|
+
|
|
586
|
+
@keyframes stroke {
|
|
587
|
+
100% {
|
|
588
|
+
stroke-dashoffset: 0;
|
|
589
|
+
}
|
|
682
590
|
}
|
|
683
|
-
|
|
684
|
-
|
|
591
|
+
/* DO NOT CHANGE!*/
|
|
592
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
593
|
+
.eds-fieldset {
|
|
594
|
+
margin: 0;
|
|
595
|
+
padding: 0;
|
|
596
|
+
border: 0;
|
|
685
597
|
}
|
|
686
598
|
/* DO NOT CHANGE!*/
|
|
687
599
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -804,6 +716,94 @@
|
|
|
804
716
|
}
|
|
805
717
|
/* DO NOT CHANGE!*/
|
|
806
718
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
719
|
+
.eds-form-component--radio__container {
|
|
720
|
+
display: flex;
|
|
721
|
+
justify-content: center;
|
|
722
|
+
align-items: center;
|
|
723
|
+
position: relative;
|
|
724
|
+
cursor: pointer;
|
|
725
|
+
height: 2rem;
|
|
726
|
+
width: -moz-fit-content;
|
|
727
|
+
width: fit-content;
|
|
728
|
+
-webkit-user-select: none;
|
|
729
|
+
-moz-user-select: none;
|
|
730
|
+
user-select: none;
|
|
731
|
+
}
|
|
732
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
733
|
+
border-color: #54568c;
|
|
734
|
+
}
|
|
735
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
736
|
+
background-color: #54568c;
|
|
737
|
+
}
|
|
738
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
739
|
+
border-color: #8285a8;
|
|
740
|
+
}
|
|
741
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
742
|
+
background-color: #8285a8;
|
|
743
|
+
}
|
|
744
|
+
.eds-form-component--radio__container input {
|
|
745
|
+
position: absolute;
|
|
746
|
+
opacity: 0;
|
|
747
|
+
cursor: pointer;
|
|
748
|
+
height: 0;
|
|
749
|
+
width: 0;
|
|
750
|
+
}
|
|
751
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
752
|
+
height: 0.625rem;
|
|
753
|
+
width: 0.625rem;
|
|
754
|
+
}
|
|
755
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
756
|
+
outline: none;
|
|
757
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
758
|
+
outline-offset: 0.125rem;
|
|
759
|
+
}
|
|
760
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
761
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
762
|
+
}
|
|
763
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
764
|
+
position: relative;
|
|
765
|
+
height: 1.25rem;
|
|
766
|
+
width: 1.25rem;
|
|
767
|
+
margin-right: 1rem;
|
|
768
|
+
background-color: #ffffff;
|
|
769
|
+
border: 0.125rem solid #181c56;
|
|
770
|
+
border-radius: 50%;
|
|
771
|
+
display: flex;
|
|
772
|
+
align-items: center;
|
|
773
|
+
justify-content: center;
|
|
774
|
+
}
|
|
775
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
776
|
+
background-color: #181c56;
|
|
777
|
+
border-color: #aeb7e2;
|
|
778
|
+
}
|
|
779
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
780
|
+
background: #d1d3d3;
|
|
781
|
+
border-color: #d1d3d3;
|
|
782
|
+
cursor: not-allowed;
|
|
783
|
+
}
|
|
784
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
785
|
+
border-color: #d1d3d3;
|
|
786
|
+
}
|
|
787
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
788
|
+
background: #d1d3d3;
|
|
789
|
+
border-color: #d1d3d3;
|
|
790
|
+
}
|
|
791
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
792
|
+
color: #656782;
|
|
793
|
+
}
|
|
794
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
795
|
+
display: block;
|
|
796
|
+
width: 0;
|
|
797
|
+
height: 0;
|
|
798
|
+
border-radius: 50%;
|
|
799
|
+
background-color: #181c56;
|
|
800
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
801
|
+
}
|
|
802
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
803
|
+
background-color: #aeb7e2;
|
|
804
|
+
}
|
|
805
|
+
/* DO NOT CHANGE!*/
|
|
806
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
807
807
|
textarea.eds-form-control.eds-textarea {
|
|
808
808
|
min-height: 7.75rem;
|
|
809
809
|
resize: vertical;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.13",
|
|
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.0",
|
|
31
31
|
"@entur/tokens": "^3.10.0",
|
|
32
|
-
"@entur/tooltip": "^2.6.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
32
|
+
"@entur/tooltip": "^2.6.23",
|
|
33
|
+
"@entur/typography": "^1.8.4",
|
|
34
34
|
"@entur/utils": "^0.9.3",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "6e84c896e30f146cfc15284218f55ab9f1766d46"
|
|
38
38
|
}
|