@entur/form 7.1.5 → 7.1.7
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/Checkbox.d.ts +2 -2
- package/dist/form.cjs.development.js.map +1 -1
- package/dist/form.cjs.production.min.js.map +1 -1
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +455 -455
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -1,160 +1,5 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-checkbox__container {
|
|
4
|
-
display: flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
position: relative;
|
|
7
|
-
-webkit-appearance: none;
|
|
8
|
-
-moz-appearance: none;
|
|
9
|
-
appearance: none;
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
-webkit-user-select: none;
|
|
12
|
-
-moz-user-select: none;
|
|
13
|
-
user-select: none;
|
|
14
|
-
width: -moz-fit-content;
|
|
15
|
-
width: fit-content;
|
|
16
|
-
margin: 0.5rem 0;
|
|
17
|
-
}
|
|
18
|
-
.eds-checkbox__container--reduced-click-area {
|
|
19
|
-
height: -moz-fit-content;
|
|
20
|
-
height: fit-content;
|
|
21
|
-
}
|
|
22
|
-
.eds-checkbox__container input {
|
|
23
|
-
position: absolute;
|
|
24
|
-
opacity: 0;
|
|
25
|
-
height: 0;
|
|
26
|
-
width: 0;
|
|
27
|
-
}
|
|
28
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
29
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
30
|
-
}
|
|
31
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
32
|
-
visibility: visible;
|
|
33
|
-
}
|
|
34
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
35
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
36
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
37
|
-
}
|
|
38
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
39
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
40
|
-
}
|
|
41
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
42
|
-
opacity: 0.5;
|
|
43
|
-
}
|
|
44
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
45
|
-
opacity: 0.5;
|
|
46
|
-
}
|
|
47
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
48
|
-
opacity: 0.5;
|
|
49
|
-
}
|
|
50
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
51
|
-
opacity: 0.5;
|
|
52
|
-
}
|
|
53
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
54
|
-
opacity: 0.5;
|
|
55
|
-
}
|
|
56
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
57
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
58
|
-
}
|
|
59
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
60
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
61
|
-
}
|
|
62
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
63
|
-
fill: var(--components-form-checkbox-contrast-icon);
|
|
64
|
-
}
|
|
65
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
66
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
67
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
68
|
-
}
|
|
69
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
70
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
71
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
72
|
-
}
|
|
73
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
74
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
75
|
-
border-color: transparent;
|
|
76
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
77
|
-
}
|
|
78
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
79
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
80
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
81
|
-
}
|
|
82
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
83
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
84
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
85
|
-
}
|
|
86
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
87
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
88
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
89
|
-
}
|
|
90
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
91
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
92
|
-
outline: 2px solid #181c56;
|
|
93
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
94
|
-
outline-offset: 0.125rem;
|
|
95
|
-
}
|
|
96
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
97
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
98
|
-
outline: 2px solid #181c56;
|
|
99
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
100
|
-
outline-offset: 0.125rem;
|
|
101
|
-
}
|
|
102
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
103
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
104
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
105
|
-
}
|
|
106
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
107
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
108
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
109
|
-
}
|
|
110
|
-
.eds-checkbox--disabled {
|
|
111
|
-
pointer-events: none;
|
|
112
|
-
}
|
|
113
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
114
|
-
opacity: 0.5;
|
|
115
|
-
}
|
|
116
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
117
|
-
opacity: 0.5;
|
|
118
|
-
}
|
|
119
|
-
.eds-checkbox__icon {
|
|
120
|
-
box-sizing: border-box;
|
|
121
|
-
display: inline-flex;
|
|
122
|
-
justify-content: center;
|
|
123
|
-
align-items: center;
|
|
124
|
-
position: relative;
|
|
125
|
-
margin-right: 1rem;
|
|
126
|
-
height: 1.25rem;
|
|
127
|
-
width: 1.25rem;
|
|
128
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
129
|
-
border-radius: 0.125rem;
|
|
130
|
-
background-color: transparent;
|
|
131
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
132
|
-
}
|
|
133
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
134
|
-
margin-right: 0;
|
|
135
|
-
}
|
|
136
|
-
.eds-contrast .eds-checkbox__icon {
|
|
137
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
138
|
-
}
|
|
139
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
140
|
-
height: 1rem;
|
|
141
|
-
width: 1rem;
|
|
142
|
-
visibility: hidden;
|
|
143
|
-
}
|
|
144
|
-
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
145
|
-
transform-origin: 50% 50%;
|
|
146
|
-
stroke-dasharray: 48;
|
|
147
|
-
stroke-dashoffset: 48;
|
|
148
|
-
stroke-width: 0.375rem;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
@keyframes stroke {
|
|
152
|
-
100% {
|
|
153
|
-
stroke-dashoffset: 0;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
/* DO NOT CHANGE!*/
|
|
157
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
158
3
|
.eds-form-control-wrapper {
|
|
159
4
|
align-items: center;
|
|
160
5
|
background-color: var(--components-form-baseform-standard-fill-default);
|
|
@@ -338,99 +183,245 @@
|
|
|
338
183
|
.eds-form-control__append {
|
|
339
184
|
margin-left: 0;
|
|
340
185
|
}
|
|
341
|
-
.eds-fieldset {
|
|
342
|
-
margin: 0;
|
|
343
|
-
padding: 0;
|
|
344
|
-
border: 0;
|
|
345
|
-
}
|
|
346
186
|
/* DO NOT CHANGE!*/
|
|
347
187
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
348
|
-
.eds-
|
|
188
|
+
.eds-checkbox__container {
|
|
349
189
|
display: flex;
|
|
350
|
-
justify-content: center;
|
|
351
190
|
align-items: center;
|
|
352
191
|
position: relative;
|
|
192
|
+
-webkit-appearance: none;
|
|
193
|
+
-moz-appearance: none;
|
|
194
|
+
appearance: none;
|
|
353
195
|
cursor: pointer;
|
|
354
|
-
height: 2rem;
|
|
355
|
-
width: -moz-fit-content;
|
|
356
|
-
width: fit-content;
|
|
357
196
|
-webkit-user-select: none;
|
|
358
197
|
-moz-user-select: none;
|
|
359
198
|
user-select: none;
|
|
199
|
+
width: -moz-fit-content;
|
|
200
|
+
width: fit-content;
|
|
201
|
+
margin: 0.5rem 0;
|
|
360
202
|
}
|
|
361
|
-
.eds-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
365
|
-
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
203
|
+
.eds-checkbox__container--reduced-click-area {
|
|
204
|
+
height: -moz-fit-content;
|
|
205
|
+
height: fit-content;
|
|
366
206
|
}
|
|
367
|
-
.eds-
|
|
207
|
+
.eds-checkbox__container input {
|
|
368
208
|
position: absolute;
|
|
369
209
|
opacity: 0;
|
|
370
|
-
cursor: pointer;
|
|
371
210
|
height: 0;
|
|
372
211
|
width: 0;
|
|
373
212
|
}
|
|
374
|
-
.eds-
|
|
375
|
-
|
|
376
|
-
width: 0.625rem;
|
|
377
|
-
}
|
|
378
|
-
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
379
|
-
outline: 2px solid #181c56;
|
|
380
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
381
|
-
outline-offset: 0.125rem;
|
|
213
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
214
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
382
215
|
}
|
|
383
|
-
.eds-
|
|
384
|
-
|
|
216
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
217
|
+
visibility: visible;
|
|
385
218
|
}
|
|
386
|
-
.eds-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
width: 1.25rem;
|
|
390
|
-
margin-right: 1rem;
|
|
391
|
-
background-color: var(--components-form-radio-standard-fill-default);
|
|
392
|
-
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
393
|
-
border-radius: 50%;
|
|
394
|
-
display: flex;
|
|
395
|
-
align-items: center;
|
|
396
|
-
justify-content: center;
|
|
219
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
220
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
221
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
397
222
|
}
|
|
398
|
-
.eds-
|
|
399
|
-
|
|
400
|
-
border-color: var(--components-form-radio-contrast-border);
|
|
223
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
224
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
401
225
|
}
|
|
402
|
-
.eds-
|
|
403
|
-
|
|
404
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
405
|
-
cursor: not-allowed;
|
|
226
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
227
|
+
opacity: 0.5;
|
|
406
228
|
}
|
|
407
|
-
.eds-
|
|
408
|
-
|
|
229
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
230
|
+
opacity: 0.5;
|
|
409
231
|
}
|
|
410
|
-
.eds-
|
|
411
|
-
|
|
412
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
232
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
233
|
+
opacity: 0.5;
|
|
413
234
|
}
|
|
414
|
-
.eds-
|
|
415
|
-
|
|
235
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
236
|
+
opacity: 0.5;
|
|
416
237
|
}
|
|
417
|
-
.eds-
|
|
418
|
-
|
|
419
|
-
width: 0;
|
|
420
|
-
height: 0;
|
|
421
|
-
border-radius: 50%;
|
|
422
|
-
background-color: var(--components-form-radio-standard-fill-selected);
|
|
423
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
238
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
239
|
+
opacity: 0.5;
|
|
424
240
|
}
|
|
425
|
-
.eds-contrast .eds-
|
|
426
|
-
background-color: var(--components-form-
|
|
241
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
242
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
427
243
|
}
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
244
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
245
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
246
|
+
}
|
|
247
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
248
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
249
|
+
}
|
|
250
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
251
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
252
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
253
|
+
}
|
|
254
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
255
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
256
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
257
|
+
}
|
|
258
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
259
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
260
|
+
border-color: transparent;
|
|
261
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
262
|
+
}
|
|
263
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
264
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
265
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
266
|
+
}
|
|
267
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
268
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
269
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
270
|
+
}
|
|
271
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
272
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
273
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
274
|
+
}
|
|
275
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
276
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
277
|
+
outline: 2px solid #181c56;
|
|
278
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
279
|
+
outline-offset: 0.125rem;
|
|
280
|
+
}
|
|
281
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
282
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
283
|
+
outline: 2px solid #181c56;
|
|
284
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
285
|
+
outline-offset: 0.125rem;
|
|
286
|
+
}
|
|
287
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
288
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
289
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
290
|
+
}
|
|
291
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
292
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
293
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
294
|
+
}
|
|
295
|
+
.eds-checkbox--disabled {
|
|
296
|
+
pointer-events: none;
|
|
297
|
+
}
|
|
298
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
299
|
+
opacity: 0.5;
|
|
300
|
+
}
|
|
301
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
302
|
+
opacity: 0.5;
|
|
303
|
+
}
|
|
304
|
+
.eds-checkbox__icon {
|
|
305
|
+
box-sizing: border-box;
|
|
306
|
+
display: inline-flex;
|
|
307
|
+
justify-content: center;
|
|
308
|
+
align-items: center;
|
|
309
|
+
position: relative;
|
|
310
|
+
margin-right: 1rem;
|
|
311
|
+
height: 1.25rem;
|
|
312
|
+
width: 1.25rem;
|
|
313
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
314
|
+
border-radius: 0.125rem;
|
|
315
|
+
background-color: transparent;
|
|
316
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
317
|
+
}
|
|
318
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
319
|
+
margin-right: 0;
|
|
320
|
+
}
|
|
321
|
+
.eds-contrast .eds-checkbox__icon {
|
|
322
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
323
|
+
}
|
|
324
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
325
|
+
height: 1rem;
|
|
326
|
+
width: 1rem;
|
|
327
|
+
visibility: hidden;
|
|
328
|
+
}
|
|
329
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
330
|
+
transform-origin: 50% 50%;
|
|
331
|
+
stroke-dasharray: 48;
|
|
332
|
+
stroke-dashoffset: 48;
|
|
333
|
+
stroke-width: 0.375rem;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
@keyframes stroke {
|
|
337
|
+
100% {
|
|
338
|
+
stroke-dashoffset: 0;
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
/* DO NOT CHANGE!*/
|
|
342
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
343
|
+
.eds-feedback-text {
|
|
344
|
+
display: flex;
|
|
345
|
+
align-items: center;
|
|
346
|
+
margin-top: 0.25rem;
|
|
347
|
+
}
|
|
348
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
349
|
+
padding-left: calc(1rem + 0.125rem);
|
|
350
|
+
}
|
|
351
|
+
.eds-feedback-text__text {
|
|
352
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
353
|
+
}
|
|
354
|
+
.eds-contrast .eds-feedback-text__text {
|
|
355
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.eds-feedback-text__icon {
|
|
359
|
+
font-size: 1.5rem;
|
|
360
|
+
min-height: 1.5rem;
|
|
361
|
+
min-width: 1.5rem;
|
|
362
|
+
padding-right: 0.5rem;
|
|
363
|
+
position: relative;
|
|
364
|
+
top: -0.1rem;
|
|
365
|
+
}
|
|
366
|
+
.eds-feedback-text__icon--success {
|
|
367
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
368
|
+
}
|
|
369
|
+
.eds-feedback-text__icon--success circle {
|
|
370
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
371
|
+
}
|
|
372
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
373
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
374
|
+
}
|
|
375
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
376
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
377
|
+
}
|
|
378
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
379
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
380
|
+
}
|
|
381
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
382
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
383
|
+
}
|
|
384
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
385
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
386
|
+
}
|
|
387
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
388
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
389
|
+
}
|
|
390
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
391
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
392
|
+
}
|
|
393
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
394
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
395
|
+
}
|
|
396
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
397
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
398
|
+
}
|
|
399
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
400
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
401
|
+
}
|
|
402
|
+
.eds-feedback-text__icon--warning {
|
|
403
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
404
|
+
}
|
|
405
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
406
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
407
|
+
}
|
|
408
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
409
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
410
|
+
}
|
|
411
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
412
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
413
|
+
}
|
|
414
|
+
.eds-fieldset {
|
|
415
|
+
margin: 0;
|
|
416
|
+
padding: 0;
|
|
417
|
+
border: 0;
|
|
418
|
+
}
|
|
419
|
+
/* DO NOT CHANGE!*/
|
|
420
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
421
|
+
.eds-input-group {
|
|
422
|
+
color: inherit;
|
|
423
|
+
display: block;
|
|
424
|
+
position: relative;
|
|
434
425
|
}
|
|
435
426
|
.eds-input-group__label {
|
|
436
427
|
color: var(--components-form-baseform-standard-text-label);
|
|
@@ -504,55 +495,256 @@
|
|
|
504
495
|
cursor: help;
|
|
505
496
|
font-size: 1rem;
|
|
506
497
|
}
|
|
507
|
-
|
|
508
|
-
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
509
|
-
top: 0.375rem;
|
|
510
|
-
font-size: 0.75rem;
|
|
511
|
-
line-height: 0.75rem;
|
|
512
|
-
height: 10px;
|
|
513
|
-
padding: 0;
|
|
514
|
-
margin-left: 1rem;
|
|
498
|
+
|
|
499
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
500
|
+
top: 0.375rem;
|
|
501
|
+
font-size: 0.75rem;
|
|
502
|
+
line-height: 0.75rem;
|
|
503
|
+
height: 10px;
|
|
504
|
+
padding: 0;
|
|
505
|
+
margin-left: 1rem;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
509
|
+
top: 0.375rem;
|
|
510
|
+
font-size: 0.75rem;
|
|
511
|
+
line-height: 0.75rem;
|
|
512
|
+
height: 10px;
|
|
513
|
+
padding: 0;
|
|
514
|
+
margin-left: 1rem;
|
|
515
|
+
}
|
|
516
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
517
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
518
|
+
background: var(--textarea-label-background);
|
|
519
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
520
|
+
}
|
|
521
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
522
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
523
|
+
background: var(--textarea-label-background);
|
|
524
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
525
|
+
}
|
|
526
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
527
|
+
top: 0.5rem;
|
|
528
|
+
font-size: 0.875rem;
|
|
529
|
+
line-height: 1rem;
|
|
530
|
+
padding: 0;
|
|
531
|
+
margin-left: 1rem;
|
|
532
|
+
}
|
|
533
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
534
|
+
top: 0.5rem;
|
|
535
|
+
font-size: 0.875rem;
|
|
536
|
+
line-height: 1rem;
|
|
537
|
+
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
|
+
}
|
|
630
|
+
/* DO NOT CHANGE!*/
|
|
631
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
632
|
+
.eds-switch {
|
|
633
|
+
cursor: pointer;
|
|
634
|
+
-webkit-user-select: none;
|
|
635
|
+
-moz-user-select: none;
|
|
636
|
+
user-select: none;
|
|
637
|
+
padding: 0.5rem 0;
|
|
638
|
+
width: -moz-fit-content;
|
|
639
|
+
width: fit-content;
|
|
640
|
+
}
|
|
641
|
+
.eds-switch input {
|
|
642
|
+
opacity: 0;
|
|
643
|
+
pointer-events: none;
|
|
644
|
+
position: absolute;
|
|
645
|
+
}
|
|
646
|
+
.eds-switch--right {
|
|
647
|
+
display: flex;
|
|
648
|
+
flex-direction: row;
|
|
649
|
+
align-items: center;
|
|
650
|
+
}
|
|
651
|
+
.eds-switch--bottom {
|
|
652
|
+
display: flex;
|
|
653
|
+
flex-direction: column;
|
|
654
|
+
align-items: center;
|
|
655
|
+
}
|
|
656
|
+
.eds-switch__circle {
|
|
657
|
+
border-radius: 50%;
|
|
658
|
+
height: 1.25rem;
|
|
659
|
+
width: 1.25rem;
|
|
660
|
+
content: "";
|
|
661
|
+
display: flex;
|
|
662
|
+
align-items: center;
|
|
663
|
+
justify-content: center;
|
|
664
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
665
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
666
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
667
|
+
top: 0.125rem;
|
|
668
|
+
left: 0.125rem;
|
|
669
|
+
position: relative;
|
|
670
|
+
}
|
|
671
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
672
|
+
height: 1.75rem;
|
|
673
|
+
width: 1.75rem;
|
|
674
|
+
}
|
|
675
|
+
.eds-contrast .eds-switch__circle {
|
|
676
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
677
|
+
}
|
|
678
|
+
.eds-switch__switch {
|
|
679
|
+
position: relative;
|
|
680
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
681
|
+
content: "";
|
|
682
|
+
display: block;
|
|
683
|
+
transition: background-color 0.1s ease-in-out;
|
|
684
|
+
height: 1.5rem;
|
|
685
|
+
width: 3rem;
|
|
686
|
+
border-radius: 1.5rem;
|
|
687
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
688
|
+
}
|
|
689
|
+
.eds-contrast .eds-switch__switch {
|
|
690
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
691
|
+
}
|
|
692
|
+
.eds-switch--right .eds-switch__switch {
|
|
693
|
+
margin-right: 0.75rem;
|
|
694
|
+
}
|
|
695
|
+
.eds-switch__switch svg g,
|
|
696
|
+
.eds-switch__switch path {
|
|
697
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
698
|
+
transition: fill ease-in-out 0.1s;
|
|
699
|
+
}
|
|
700
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
701
|
+
.eds-contrast .eds-switch__switch path {
|
|
702
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
703
|
+
}
|
|
704
|
+
:checked + .eds-switch__switch {
|
|
705
|
+
background-color: var(--eds-switch-color);
|
|
706
|
+
}
|
|
707
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
708
|
+
left: 1.625rem;
|
|
709
|
+
}
|
|
710
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
711
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
712
|
+
fill: var(--eds-switch-color);
|
|
713
|
+
}
|
|
714
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
715
|
+
background-color: var(--eds-switch-contrast-color);
|
|
716
|
+
}
|
|
717
|
+
:focus + .eds-switch__switch {
|
|
718
|
+
outline: 2px solid #181c56;
|
|
719
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
720
|
+
outline-offset: 0.125rem;
|
|
515
721
|
}
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
top: 0.375rem;
|
|
519
|
-
font-size: 0.75rem;
|
|
520
|
-
line-height: 0.75rem;
|
|
521
|
-
height: 10px;
|
|
522
|
-
padding: 0;
|
|
523
|
-
margin-left: 1rem;
|
|
722
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
723
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
524
724
|
}
|
|
525
|
-
.eds-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
725
|
+
.eds-switch__switch--large {
|
|
726
|
+
width: 3.75rem;
|
|
727
|
+
height: 2rem;
|
|
728
|
+
border-radius: 3.75rem;
|
|
529
729
|
}
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
background: var(--textarea-label-background);
|
|
533
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
730
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
731
|
+
left: 1.875rem;
|
|
534
732
|
}
|
|
535
|
-
.eds-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
line-height: 1rem;
|
|
539
|
-
padding: 0;
|
|
540
|
-
margin-left: 1rem;
|
|
733
|
+
.eds-switch__switch--large svg {
|
|
734
|
+
position: relative;
|
|
735
|
+
right: 0.05rem;
|
|
541
736
|
}
|
|
542
|
-
.eds-
|
|
543
|
-
|
|
737
|
+
.eds-switch__label--large--right {
|
|
738
|
+
font-size: 1rem;
|
|
739
|
+
}
|
|
740
|
+
.eds-switch__label--large--bottom {
|
|
544
741
|
font-size: 0.875rem;
|
|
545
|
-
line-height: 1rem;
|
|
546
|
-
padding: 0;
|
|
547
|
-
margin-left: 1rem;
|
|
548
742
|
}
|
|
549
|
-
.eds-
|
|
550
|
-
|
|
551
|
-
color: var(--components-tooltip-tooltip-standard-text);
|
|
552
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
743
|
+
.eds-switch__label--medium--right {
|
|
744
|
+
font-size: 0.875rem;
|
|
553
745
|
}
|
|
554
|
-
.eds-
|
|
555
|
-
|
|
746
|
+
.eds-switch__label--medium--bottom {
|
|
747
|
+
font-size: 0.75rem;
|
|
556
748
|
}
|
|
557
749
|
/* DO NOT CHANGE!*/
|
|
558
750
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -719,198 +911,6 @@ input:disabled + .eds-input-panel__container {
|
|
|
719
911
|
}
|
|
720
912
|
/* DO NOT CHANGE!*/
|
|
721
913
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
722
|
-
.eds-switch {
|
|
723
|
-
cursor: pointer;
|
|
724
|
-
-webkit-user-select: none;
|
|
725
|
-
-moz-user-select: none;
|
|
726
|
-
user-select: none;
|
|
727
|
-
padding: 0.5rem 0;
|
|
728
|
-
width: -moz-fit-content;
|
|
729
|
-
width: fit-content;
|
|
730
|
-
}
|
|
731
|
-
.eds-switch input {
|
|
732
|
-
opacity: 0;
|
|
733
|
-
pointer-events: none;
|
|
734
|
-
position: absolute;
|
|
735
|
-
}
|
|
736
|
-
.eds-switch--right {
|
|
737
|
-
display: flex;
|
|
738
|
-
flex-direction: row;
|
|
739
|
-
align-items: center;
|
|
740
|
-
}
|
|
741
|
-
.eds-switch--bottom {
|
|
742
|
-
display: flex;
|
|
743
|
-
flex-direction: column;
|
|
744
|
-
align-items: center;
|
|
745
|
-
}
|
|
746
|
-
.eds-switch__circle {
|
|
747
|
-
border-radius: 50%;
|
|
748
|
-
height: 1.25rem;
|
|
749
|
-
width: 1.25rem;
|
|
750
|
-
content: "";
|
|
751
|
-
display: flex;
|
|
752
|
-
align-items: center;
|
|
753
|
-
justify-content: center;
|
|
754
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
755
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
756
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
757
|
-
top: 0.125rem;
|
|
758
|
-
left: 0.125rem;
|
|
759
|
-
position: relative;
|
|
760
|
-
}
|
|
761
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
762
|
-
height: 1.75rem;
|
|
763
|
-
width: 1.75rem;
|
|
764
|
-
}
|
|
765
|
-
.eds-contrast .eds-switch__circle {
|
|
766
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
767
|
-
}
|
|
768
|
-
.eds-switch__switch {
|
|
769
|
-
position: relative;
|
|
770
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
771
|
-
content: "";
|
|
772
|
-
display: block;
|
|
773
|
-
transition: background-color 0.1s ease-in-out;
|
|
774
|
-
height: 1.5rem;
|
|
775
|
-
width: 3rem;
|
|
776
|
-
border-radius: 1.5rem;
|
|
777
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
778
|
-
}
|
|
779
|
-
.eds-contrast .eds-switch__switch {
|
|
780
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
781
|
-
}
|
|
782
|
-
.eds-switch--right .eds-switch__switch {
|
|
783
|
-
margin-right: 0.75rem;
|
|
784
|
-
}
|
|
785
|
-
.eds-switch__switch svg g,
|
|
786
|
-
.eds-switch__switch path {
|
|
787
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
788
|
-
transition: fill ease-in-out 0.1s;
|
|
789
|
-
}
|
|
790
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
791
|
-
.eds-contrast .eds-switch__switch path {
|
|
792
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
793
|
-
}
|
|
794
|
-
:checked + .eds-switch__switch {
|
|
795
|
-
background-color: var(--eds-switch-color);
|
|
796
|
-
}
|
|
797
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
798
|
-
left: 1.625rem;
|
|
799
|
-
}
|
|
800
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
801
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
802
|
-
fill: var(--eds-switch-color);
|
|
803
|
-
}
|
|
804
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
805
|
-
background-color: var(--eds-switch-contrast-color);
|
|
806
|
-
}
|
|
807
|
-
:focus + .eds-switch__switch {
|
|
808
|
-
outline: 2px solid #181c56;
|
|
809
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
810
|
-
outline-offset: 0.125rem;
|
|
811
|
-
}
|
|
812
|
-
.eds-contrast :focus + .eds-switch__switch {
|
|
813
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
814
|
-
}
|
|
815
|
-
.eds-switch__switch--large {
|
|
816
|
-
width: 3.75rem;
|
|
817
|
-
height: 2rem;
|
|
818
|
-
border-radius: 3.75rem;
|
|
819
|
-
}
|
|
820
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
821
|
-
left: 1.875rem;
|
|
822
|
-
}
|
|
823
|
-
.eds-switch__switch--large svg {
|
|
824
|
-
position: relative;
|
|
825
|
-
right: 0.05rem;
|
|
826
|
-
}
|
|
827
|
-
.eds-switch__label--large--right {
|
|
828
|
-
font-size: 1rem;
|
|
829
|
-
}
|
|
830
|
-
.eds-switch__label--large--bottom {
|
|
831
|
-
font-size: 0.875rem;
|
|
832
|
-
}
|
|
833
|
-
.eds-switch__label--medium--right {
|
|
834
|
-
font-size: 0.875rem;
|
|
835
|
-
}
|
|
836
|
-
.eds-switch__label--medium--bottom {
|
|
837
|
-
font-size: 0.75rem;
|
|
838
|
-
}
|
|
839
|
-
/* DO NOT CHANGE!*/
|
|
840
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
841
|
-
.eds-feedback-text {
|
|
842
|
-
display: flex;
|
|
843
|
-
align-items: center;
|
|
844
|
-
margin-top: 0.25rem;
|
|
845
|
-
}
|
|
846
|
-
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
847
|
-
padding-left: calc(1rem + 0.125rem);
|
|
848
|
-
}
|
|
849
|
-
.eds-feedback-text__text {
|
|
850
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
851
|
-
}
|
|
852
|
-
.eds-contrast .eds-feedback-text__text {
|
|
853
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
854
|
-
}
|
|
855
|
-
|
|
856
|
-
.eds-feedback-text__icon {
|
|
857
|
-
font-size: 1.5rem;
|
|
858
|
-
min-height: 1.5rem;
|
|
859
|
-
min-width: 1.5rem;
|
|
860
|
-
padding-right: 0.5rem;
|
|
861
|
-
position: relative;
|
|
862
|
-
top: -0.1rem;
|
|
863
|
-
}
|
|
864
|
-
.eds-feedback-text__icon--success {
|
|
865
|
-
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
866
|
-
}
|
|
867
|
-
.eds-feedback-text__icon--success circle {
|
|
868
|
-
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
869
|
-
}
|
|
870
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
871
|
-
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
872
|
-
}
|
|
873
|
-
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
874
|
-
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
875
|
-
}
|
|
876
|
-
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
877
|
-
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
878
|
-
}
|
|
879
|
-
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
880
|
-
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
881
|
-
}
|
|
882
|
-
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
883
|
-
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
884
|
-
}
|
|
885
|
-
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
886
|
-
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
887
|
-
}
|
|
888
|
-
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
889
|
-
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
890
|
-
}
|
|
891
|
-
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
892
|
-
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
893
|
-
}
|
|
894
|
-
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
895
|
-
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
896
|
-
}
|
|
897
|
-
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
898
|
-
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
899
|
-
}
|
|
900
|
-
.eds-feedback-text__icon--warning {
|
|
901
|
-
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
902
|
-
}
|
|
903
|
-
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
904
|
-
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
905
|
-
}
|
|
906
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
907
|
-
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
908
|
-
}
|
|
909
|
-
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
910
|
-
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
911
|
-
}
|
|
912
|
-
/* DO NOT CHANGE!*/
|
|
913
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
914
914
|
.eds-textfield__clear-button {
|
|
915
915
|
background: none;
|
|
916
916
|
border: none;
|