@entur/form 7.2.1 → 8.0.0
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/BaseFormControl.d.ts +3 -1
- package/dist/TextArea.d.ts +1 -1
- package/dist/form.cjs.development.js +49 -22
- 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 +49 -22
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +275 -270
- package/package.json +5 -5
package/dist/styles.css
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
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
8
|
.eds-feedback-text {
|
|
@@ -73,17 +78,184 @@
|
|
|
73
78
|
}
|
|
74
79
|
/* DO NOT CHANGE!*/
|
|
75
80
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
81
|
+
.eds-checkbox__container {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
position: relative;
|
|
85
|
+
-webkit-appearance: none;
|
|
86
|
+
-moz-appearance: none;
|
|
87
|
+
appearance: none;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
-webkit-user-select: none;
|
|
90
|
+
-moz-user-select: none;
|
|
91
|
+
user-select: none;
|
|
92
|
+
width: -moz-fit-content;
|
|
93
|
+
width: fit-content;
|
|
94
|
+
margin: 0.5rem 0;
|
|
95
|
+
}
|
|
96
|
+
.eds-checkbox__container--reduced-click-area {
|
|
97
|
+
height: -moz-fit-content;
|
|
98
|
+
height: fit-content;
|
|
99
|
+
}
|
|
100
|
+
.eds-checkbox__container input {
|
|
101
|
+
position: absolute;
|
|
102
|
+
opacity: 0;
|
|
103
|
+
height: 0;
|
|
104
|
+
width: 0;
|
|
105
|
+
}
|
|
106
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
107
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
108
|
+
}
|
|
109
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
110
|
+
visibility: visible;
|
|
111
|
+
}
|
|
112
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
113
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
114
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
115
|
+
}
|
|
116
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
117
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
118
|
+
}
|
|
119
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
120
|
+
opacity: 0.5;
|
|
121
|
+
}
|
|
122
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
123
|
+
opacity: 0.5;
|
|
124
|
+
}
|
|
125
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
126
|
+
opacity: 0.5;
|
|
127
|
+
}
|
|
128
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
129
|
+
opacity: 0.5;
|
|
130
|
+
}
|
|
131
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
132
|
+
opacity: 0.5;
|
|
133
|
+
}
|
|
134
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
135
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
136
|
+
}
|
|
137
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
138
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
139
|
+
}
|
|
140
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
141
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
142
|
+
}
|
|
143
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
144
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
145
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
146
|
+
}
|
|
147
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
148
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
149
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
150
|
+
}
|
|
151
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
152
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
153
|
+
border-color: transparent;
|
|
154
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
155
|
+
}
|
|
156
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
157
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
158
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
159
|
+
}
|
|
160
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
161
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
162
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
163
|
+
}
|
|
164
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
165
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
166
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
167
|
+
}
|
|
168
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
169
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
170
|
+
outline: 2px solid #181c56;
|
|
171
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
172
|
+
outline-offset: 0.125rem;
|
|
173
|
+
}
|
|
174
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
175
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
176
|
+
outline: 2px solid #181c56;
|
|
177
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
178
|
+
outline-offset: 0.125rem;
|
|
179
|
+
}
|
|
180
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
181
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
182
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
183
|
+
}
|
|
184
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
185
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
186
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
187
|
+
}
|
|
188
|
+
.eds-checkbox--disabled {
|
|
189
|
+
pointer-events: none;
|
|
190
|
+
}
|
|
191
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
192
|
+
opacity: 0.5;
|
|
193
|
+
}
|
|
194
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
195
|
+
opacity: 0.5;
|
|
196
|
+
}
|
|
197
|
+
.eds-checkbox__icon {
|
|
198
|
+
box-sizing: border-box;
|
|
199
|
+
display: inline-flex;
|
|
200
|
+
justify-content: center;
|
|
201
|
+
align-items: center;
|
|
202
|
+
position: relative;
|
|
203
|
+
margin-right: 1rem;
|
|
204
|
+
height: 1.25rem;
|
|
205
|
+
width: 1.25rem;
|
|
206
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
207
|
+
border-radius: 0.125rem;
|
|
208
|
+
background-color: transparent;
|
|
209
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
210
|
+
}
|
|
211
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
212
|
+
margin-right: 0;
|
|
213
|
+
}
|
|
214
|
+
.eds-contrast .eds-checkbox__icon {
|
|
215
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
216
|
+
}
|
|
217
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
218
|
+
height: 1rem;
|
|
219
|
+
width: 1rem;
|
|
220
|
+
visibility: hidden;
|
|
221
|
+
}
|
|
222
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
223
|
+
transform-origin: 50% 50%;
|
|
224
|
+
stroke-dasharray: 48;
|
|
225
|
+
stroke-dashoffset: 48;
|
|
226
|
+
stroke-width: 0.375rem;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@keyframes stroke {
|
|
230
|
+
100% {
|
|
231
|
+
stroke-dashoffset: 0;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
/* DO NOT CHANGE!*/
|
|
235
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
236
|
+
.eds-form-control__field-and-feedback-text {
|
|
237
|
+
display: flex;
|
|
238
|
+
flex-direction: column;
|
|
239
|
+
height: -moz-fit-content;
|
|
240
|
+
height: fit-content;
|
|
241
|
+
width: 100%;
|
|
242
|
+
}
|
|
243
|
+
.eds-form-control__field-and-feedback-text--has-tooltip {
|
|
244
|
+
padding-right: 2rem;
|
|
245
|
+
}
|
|
76
246
|
.eds-form-control-wrapper {
|
|
247
|
+
display: flex;
|
|
77
248
|
align-items: center;
|
|
249
|
+
position: relative;
|
|
250
|
+
flex: 1;
|
|
251
|
+
min-height: 3rem;
|
|
252
|
+
padding-left: 1rem;
|
|
253
|
+
padding-right: 1rem;
|
|
78
254
|
background-color: var(--components-form-baseform-standard-fill-default);
|
|
79
255
|
border-radius: 0.25rem;
|
|
80
256
|
border: 0.125rem solid var(--components-form-baseform-standard-border-default);
|
|
81
257
|
box-shadow: 0 0 0 transparent;
|
|
82
258
|
color: var(--components-form-baseform-standard-text-content);
|
|
83
|
-
display: flex;
|
|
84
|
-
position: relative;
|
|
85
|
-
width: 100%;
|
|
86
|
-
min-height: 3rem;
|
|
87
259
|
transition: border-color 0.1s ease-in-out;
|
|
88
260
|
}
|
|
89
261
|
.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
|
|
@@ -159,16 +331,11 @@
|
|
|
159
331
|
}
|
|
160
332
|
.eds-form-control-wrapper--size-large {
|
|
161
333
|
min-height: 4rem;
|
|
162
|
-
padding: 0 0.5rem;
|
|
163
|
-
}
|
|
164
|
-
.eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
|
|
165
|
-
border-width: 0.25rem;
|
|
166
334
|
}
|
|
167
335
|
.eds-form-control-wrapper--size-large .eds-form-control,
|
|
168
336
|
.eds-form-control-wrapper--size-large .eds-form-control__append,
|
|
169
337
|
.eds-form-control-wrapper--size-large .eds-form-control__prepend {
|
|
170
338
|
font-size: 1.5rem;
|
|
171
|
-
line-height: 2.25rem;
|
|
172
339
|
}
|
|
173
340
|
.eds-form-control-wrapper--success {
|
|
174
341
|
border-color: var(--components-form-baseform-standard-border-success);
|
|
@@ -206,20 +373,29 @@
|
|
|
206
373
|
.eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
|
|
207
374
|
border-color: var(--components-form-baseform-contrast-border-negative);
|
|
208
375
|
}
|
|
376
|
+
.eds-contrast .eds-form-control .eds-tooltip {
|
|
377
|
+
background: var(--components-tooltip-tooltip-standard-fill);
|
|
378
|
+
color: var(--components-tooltip-tooltip-standard-text);
|
|
379
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
380
|
+
}
|
|
381
|
+
.eds-form-control .eds-tooltip::after {
|
|
382
|
+
background: var(--components-tooltip-tooltip-standard-fill);
|
|
383
|
+
}
|
|
209
384
|
|
|
210
385
|
.eds-form-control {
|
|
386
|
+
display: block;
|
|
211
387
|
-webkit-appearance: none;
|
|
212
388
|
-moz-appearance: none;
|
|
213
389
|
appearance: none;
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
display: block;
|
|
390
|
+
width: 100%;
|
|
391
|
+
height: 100%;
|
|
392
|
+
padding: 20px 0rem 0.25rem;
|
|
218
393
|
font-family: inherit;
|
|
219
|
-
line-height: 1rem;
|
|
220
394
|
font-size: 1rem;
|
|
221
|
-
|
|
222
|
-
|
|
395
|
+
line-height: 1rem;
|
|
396
|
+
border: 0;
|
|
397
|
+
color: var(--components-form-baseform-standard-text-content);
|
|
398
|
+
background-color: transparent;
|
|
223
399
|
}
|
|
224
400
|
.eds-form-control::-moz-placeholder {
|
|
225
401
|
opacity: 0;
|
|
@@ -241,180 +417,110 @@
|
|
|
241
417
|
}
|
|
242
418
|
.eds-form-control__prepend, .eds-form-control__append {
|
|
243
419
|
position: relative;
|
|
244
|
-
margin: 0 1rem;
|
|
245
420
|
line-height: inherit;
|
|
246
421
|
}
|
|
247
422
|
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
423
|
+
all: unset;
|
|
424
|
+
position: absolute;
|
|
425
|
+
display: flex;
|
|
426
|
+
align-items: center;
|
|
427
|
+
justify-content: center;
|
|
428
|
+
height: 1.5rem;
|
|
429
|
+
width: 1.5rem;
|
|
430
|
+
right: -2rem;
|
|
431
|
+
border-radius: 100%;
|
|
432
|
+
color: var(--primary-text-color);
|
|
433
|
+
cursor: pointer;
|
|
252
434
|
}
|
|
253
435
|
.eds-form-control__prepend {
|
|
254
|
-
margin-right: 0;
|
|
436
|
+
margin-right: 0.75rem;
|
|
437
|
+
margin-left: 0;
|
|
255
438
|
}
|
|
256
439
|
.eds-form-control__append {
|
|
257
|
-
margin-
|
|
440
|
+
margin-right: 0;
|
|
441
|
+
margin-left: 0.75rem;
|
|
258
442
|
}
|
|
259
443
|
/* DO NOT CHANGE!*/
|
|
260
444
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
261
|
-
.eds-
|
|
445
|
+
.eds-form-component--radio__container {
|
|
262
446
|
display: flex;
|
|
447
|
+
justify-content: center;
|
|
263
448
|
align-items: center;
|
|
264
449
|
position: relative;
|
|
265
|
-
-webkit-appearance: none;
|
|
266
|
-
-moz-appearance: none;
|
|
267
|
-
appearance: none;
|
|
268
450
|
cursor: pointer;
|
|
451
|
+
height: 2rem;
|
|
452
|
+
width: -moz-fit-content;
|
|
453
|
+
width: fit-content;
|
|
269
454
|
-webkit-user-select: none;
|
|
270
455
|
-moz-user-select: none;
|
|
271
456
|
user-select: none;
|
|
272
|
-
width: -moz-fit-content;
|
|
273
|
-
width: fit-content;
|
|
274
|
-
margin: 0.5rem 0;
|
|
275
457
|
}
|
|
276
|
-
.eds-
|
|
277
|
-
|
|
278
|
-
height: fit-content;
|
|
458
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
459
|
+
background-color: var(--components-form-radio-standard-fill-hover);
|
|
279
460
|
}
|
|
280
|
-
.eds-
|
|
461
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
462
|
+
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
463
|
+
}
|
|
464
|
+
.eds-form-component--radio__container input {
|
|
281
465
|
position: absolute;
|
|
282
466
|
opacity: 0;
|
|
467
|
+
cursor: pointer;
|
|
283
468
|
height: 0;
|
|
284
469
|
width: 0;
|
|
285
470
|
}
|
|
286
|
-
.eds-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
290
|
-
visibility: visible;
|
|
291
|
-
}
|
|
292
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
293
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
294
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
295
|
-
}
|
|
296
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
297
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
298
|
-
}
|
|
299
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
300
|
-
opacity: 0.5;
|
|
301
|
-
}
|
|
302
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
303
|
-
opacity: 0.5;
|
|
304
|
-
}
|
|
305
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
306
|
-
opacity: 0.5;
|
|
307
|
-
}
|
|
308
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
309
|
-
opacity: 0.5;
|
|
310
|
-
}
|
|
311
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
312
|
-
opacity: 0.5;
|
|
313
|
-
}
|
|
314
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
315
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
316
|
-
}
|
|
317
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
318
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
319
|
-
}
|
|
320
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
321
|
-
fill: var(--components-form-checkbox-contrast-icon);
|
|
322
|
-
}
|
|
323
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
324
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
325
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
326
|
-
}
|
|
327
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
328
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
329
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
330
|
-
}
|
|
331
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
332
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
333
|
-
border-color: transparent;
|
|
334
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
335
|
-
}
|
|
336
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
337
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
338
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
339
|
-
}
|
|
340
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
341
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
342
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
343
|
-
}
|
|
344
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
345
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
346
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
347
|
-
}
|
|
348
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
349
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
350
|
-
outline: 2px solid #181c56;
|
|
351
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
352
|
-
outline-offset: 0.125rem;
|
|
471
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
472
|
+
height: 0.625rem;
|
|
473
|
+
width: 0.625rem;
|
|
353
474
|
}
|
|
354
|
-
.eds-
|
|
355
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
475
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
356
476
|
outline: 2px solid #181c56;
|
|
357
477
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
358
478
|
outline-offset: 0.125rem;
|
|
359
479
|
}
|
|
360
|
-
.eds-contrast .eds-
|
|
361
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
362
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
363
|
-
}
|
|
364
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
365
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
480
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
366
481
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
367
482
|
}
|
|
368
|
-
.eds-
|
|
369
|
-
pointer-events: none;
|
|
370
|
-
}
|
|
371
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
372
|
-
opacity: 0.5;
|
|
373
|
-
}
|
|
374
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
375
|
-
opacity: 0.5;
|
|
376
|
-
}
|
|
377
|
-
.eds-checkbox__icon {
|
|
378
|
-
box-sizing: border-box;
|
|
379
|
-
display: inline-flex;
|
|
380
|
-
justify-content: center;
|
|
381
|
-
align-items: center;
|
|
483
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
382
484
|
position: relative;
|
|
383
|
-
margin-right: 1rem;
|
|
384
485
|
height: 1.25rem;
|
|
385
486
|
width: 1.25rem;
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
487
|
+
margin-right: 1rem;
|
|
488
|
+
background-color: var(--components-form-radio-standard-fill-default);
|
|
489
|
+
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
490
|
+
border-radius: 50%;
|
|
491
|
+
display: flex;
|
|
492
|
+
align-items: center;
|
|
493
|
+
justify-content: center;
|
|
390
494
|
}
|
|
391
|
-
.eds-
|
|
392
|
-
|
|
495
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
496
|
+
background-color: var(--components-form-radio-contrast-fill-default);
|
|
497
|
+
border-color: var(--components-form-radio-contrast-border);
|
|
393
498
|
}
|
|
394
|
-
.eds-
|
|
395
|
-
|
|
499
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
500
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
501
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
502
|
+
cursor: not-allowed;
|
|
396
503
|
}
|
|
397
|
-
.eds-
|
|
398
|
-
|
|
399
|
-
width: 1rem;
|
|
400
|
-
visibility: hidden;
|
|
504
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
505
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
401
506
|
}
|
|
402
|
-
.eds-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
stroke-dashoffset: 48;
|
|
406
|
-
stroke-width: 0.375rem;
|
|
507
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
508
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
509
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
407
510
|
}
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
100% {
|
|
411
|
-
stroke-dashoffset: 0;
|
|
412
|
-
}
|
|
511
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
512
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
413
513
|
}
|
|
414
|
-
.eds-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
514
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
515
|
+
display: block;
|
|
516
|
+
width: 0;
|
|
517
|
+
height: 0;
|
|
518
|
+
border-radius: 50%;
|
|
519
|
+
background-color: var(--components-form-radio-standard-fill-selected);
|
|
520
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
521
|
+
}
|
|
522
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
523
|
+
background-color: var(--components-form-radio-contrast-icon);
|
|
418
524
|
}
|
|
419
525
|
/* DO NOT CHANGE!*/
|
|
420
526
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -430,10 +536,8 @@
|
|
|
430
536
|
position: absolute;
|
|
431
537
|
line-height: 1rem;
|
|
432
538
|
height: 3rem;
|
|
433
|
-
padding: 1rem;
|
|
434
539
|
padding-left: 0;
|
|
435
|
-
|
|
436
|
-
top: -0.125rem;
|
|
540
|
+
top: 1rem;
|
|
437
541
|
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;
|
|
438
542
|
-webkit-user-select: none;
|
|
439
543
|
-moz-user-select: none;
|
|
@@ -446,25 +550,22 @@
|
|
|
446
550
|
line-height: 0.75rem;
|
|
447
551
|
height: 10px;
|
|
448
552
|
padding: 0;
|
|
449
|
-
margin-left: 1rem;
|
|
450
553
|
}
|
|
451
554
|
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
452
555
|
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
453
556
|
background: var(--textarea-label-background);
|
|
454
557
|
width: calc(100% - 1rem - 1rem - 4px);
|
|
455
558
|
}
|
|
456
|
-
.eds-form-control-wrapper--
|
|
559
|
+
.eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
457
560
|
top: 0.5rem;
|
|
458
561
|
font-size: 0.875rem;
|
|
459
562
|
line-height: 1rem;
|
|
460
563
|
padding: 0;
|
|
461
|
-
margin-left: 1rem;
|
|
462
564
|
}
|
|
463
565
|
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
566
|
+
top: 0.75rem;
|
|
464
567
|
font-size: 1.5rem;
|
|
465
568
|
line-height: 2.25rem;
|
|
466
|
-
height: 4rem;
|
|
467
|
-
top: -0.25rem;
|
|
468
569
|
}
|
|
469
570
|
.eds-input-group__label--filled {
|
|
470
571
|
top: 0.375rem;
|
|
@@ -472,7 +573,6 @@
|
|
|
472
573
|
line-height: 0.75rem;
|
|
473
574
|
height: 10px;
|
|
474
575
|
padding: 0;
|
|
475
|
-
margin-left: 1rem;
|
|
476
576
|
}
|
|
477
577
|
.eds-textarea__label .eds-input-group__label--filled {
|
|
478
578
|
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
@@ -484,16 +584,6 @@
|
|
|
484
584
|
font-size: 0.875rem;
|
|
485
585
|
line-height: 1rem;
|
|
486
586
|
padding: 0;
|
|
487
|
-
margin-left: 1rem;
|
|
488
|
-
}
|
|
489
|
-
.eds-input-group__label-tooltip-icon {
|
|
490
|
-
color: var(--base-colors-shape-accent);
|
|
491
|
-
padding-left: 0.25rem;
|
|
492
|
-
padding-right: 0.25rem;
|
|
493
|
-
display: flex;
|
|
494
|
-
align-items: center;
|
|
495
|
-
cursor: help;
|
|
496
|
-
font-size: 1rem;
|
|
497
587
|
}
|
|
498
588
|
|
|
499
589
|
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
@@ -502,7 +592,6 @@
|
|
|
502
592
|
line-height: 0.75rem;
|
|
503
593
|
height: 10px;
|
|
504
594
|
padding: 0;
|
|
505
|
-
margin-left: 1rem;
|
|
506
595
|
}
|
|
507
596
|
|
|
508
597
|
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
@@ -511,7 +600,6 @@
|
|
|
511
600
|
line-height: 0.75rem;
|
|
512
601
|
height: 10px;
|
|
513
602
|
padding: 0;
|
|
514
|
-
margin-left: 1rem;
|
|
515
603
|
}
|
|
516
604
|
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
517
605
|
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
@@ -528,104 +616,12 @@
|
|
|
528
616
|
font-size: 0.875rem;
|
|
529
617
|
line-height: 1rem;
|
|
530
618
|
padding: 0;
|
|
531
|
-
margin-left: 1rem;
|
|
532
619
|
}
|
|
533
620
|
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
534
621
|
top: 0.5rem;
|
|
535
622
|
font-size: 0.875rem;
|
|
536
623
|
line-height: 1rem;
|
|
537
624
|
padding: 0;
|
|
538
|
-
margin-left: 1rem;
|
|
539
|
-
}
|
|
540
|
-
.eds-contrast .eds-form-control-wrapper .eds-tooltip {
|
|
541
|
-
background: var(--components-tooltip-tooltip-standard-fill);
|
|
542
|
-
color: var(--components-tooltip-tooltip-standard-text);
|
|
543
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
544
|
-
}
|
|
545
|
-
.eds-form-control-wrapper .eds-tooltip::after {
|
|
546
|
-
background: var(--components-tooltip-tooltip-standard-fill);
|
|
547
|
-
}
|
|
548
|
-
/* DO NOT CHANGE!*/
|
|
549
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
550
|
-
.eds-form-component--radio__container {
|
|
551
|
-
display: flex;
|
|
552
|
-
justify-content: center;
|
|
553
|
-
align-items: center;
|
|
554
|
-
position: relative;
|
|
555
|
-
cursor: pointer;
|
|
556
|
-
height: 2rem;
|
|
557
|
-
width: -moz-fit-content;
|
|
558
|
-
width: fit-content;
|
|
559
|
-
-webkit-user-select: none;
|
|
560
|
-
-moz-user-select: none;
|
|
561
|
-
user-select: none;
|
|
562
|
-
}
|
|
563
|
-
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
564
|
-
background-color: var(--components-form-radio-standard-fill-hover);
|
|
565
|
-
}
|
|
566
|
-
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
567
|
-
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
568
|
-
}
|
|
569
|
-
.eds-form-component--radio__container input {
|
|
570
|
-
position: absolute;
|
|
571
|
-
opacity: 0;
|
|
572
|
-
cursor: pointer;
|
|
573
|
-
height: 0;
|
|
574
|
-
width: 0;
|
|
575
|
-
}
|
|
576
|
-
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
577
|
-
height: 0.625rem;
|
|
578
|
-
width: 0.625rem;
|
|
579
|
-
}
|
|
580
|
-
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
581
|
-
outline: 2px solid #181c56;
|
|
582
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
583
|
-
outline-offset: 0.125rem;
|
|
584
|
-
}
|
|
585
|
-
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
586
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
587
|
-
}
|
|
588
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
589
|
-
position: relative;
|
|
590
|
-
height: 1.25rem;
|
|
591
|
-
width: 1.25rem;
|
|
592
|
-
margin-right: 1rem;
|
|
593
|
-
background-color: var(--components-form-radio-standard-fill-default);
|
|
594
|
-
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
595
|
-
border-radius: 50%;
|
|
596
|
-
display: flex;
|
|
597
|
-
align-items: center;
|
|
598
|
-
justify-content: center;
|
|
599
|
-
}
|
|
600
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
601
|
-
background-color: var(--components-form-radio-contrast-fill-default);
|
|
602
|
-
border-color: var(--components-form-radio-contrast-border);
|
|
603
|
-
}
|
|
604
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
605
|
-
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
606
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
607
|
-
cursor: not-allowed;
|
|
608
|
-
}
|
|
609
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
610
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
611
|
-
}
|
|
612
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
613
|
-
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
614
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
615
|
-
}
|
|
616
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
617
|
-
color: var(--components-form-baseform-contrast-text-disabled);
|
|
618
|
-
}
|
|
619
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
620
|
-
display: block;
|
|
621
|
-
width: 0;
|
|
622
|
-
height: 0;
|
|
623
|
-
border-radius: 50%;
|
|
624
|
-
background-color: var(--components-form-radio-standard-fill-selected);
|
|
625
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
626
|
-
}
|
|
627
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
628
|
-
background-color: var(--components-form-radio-contrast-icon);
|
|
629
625
|
}
|
|
630
626
|
/* DO NOT CHANGE!*/
|
|
631
627
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -748,13 +744,6 @@
|
|
|
748
744
|
}
|
|
749
745
|
/* DO NOT CHANGE!*/
|
|
750
746
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
751
|
-
textarea.eds-form-control.eds-textarea {
|
|
752
|
-
min-height: 7.75rem;
|
|
753
|
-
resize: vertical;
|
|
754
|
-
line-height: 1.5rem;
|
|
755
|
-
}
|
|
756
|
-
/* DO NOT CHANGE!*/
|
|
757
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
758
747
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
759
748
|
outline: 2px solid #181c56;
|
|
760
749
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
@@ -911,6 +900,18 @@ input:disabled + .eds-input-panel__container {
|
|
|
911
900
|
}
|
|
912
901
|
/* DO NOT CHANGE!*/
|
|
913
902
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
903
|
+
textarea.eds-form-control.eds-textarea {
|
|
904
|
+
min-height: 7.75rem;
|
|
905
|
+
resize: vertical;
|
|
906
|
+
line-height: 1.5rem;
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
.eds-textarea__wrapper .eds-form-control-wrapper {
|
|
910
|
+
padding-right: 0;
|
|
911
|
+
cursor: text;
|
|
912
|
+
}
|
|
913
|
+
/* DO NOT CHANGE!*/
|
|
914
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
914
915
|
.eds-textfield__clear-button {
|
|
915
916
|
background: none;
|
|
916
917
|
border: none;
|
|
@@ -947,6 +948,10 @@ input:disabled + .eds-input-panel__container {
|
|
|
947
948
|
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
948
949
|
background-color: var(--components-form-baseform-contrast-icon);
|
|
949
950
|
}
|
|
951
|
+
|
|
952
|
+
.eds-textfield__wrapper {
|
|
953
|
+
cursor: text;
|
|
954
|
+
}
|
|
950
955
|
/* DO NOT CHANGE!*/
|
|
951
956
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
952
957
|
.eds-segmented-choice {
|