@entur/form 8.1.0-beta.1 → 8.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +445 -445
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -1,157 +1,75 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-
|
|
3
|
+
.eds-feedback-text {
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
|
-
|
|
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);
|
|
6
|
+
margin-top: 0.25rem;
|
|
61
7
|
}
|
|
62
|
-
.eds-
|
|
63
|
-
|
|
8
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
9
|
+
padding-left: calc(1rem + 0.125rem);
|
|
64
10
|
}
|
|
65
|
-
.eds-
|
|
66
|
-
|
|
67
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
11
|
+
.eds-feedback-text__text {
|
|
12
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
68
13
|
}
|
|
69
|
-
.eds-contrast .eds-
|
|
70
|
-
|
|
71
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
14
|
+
.eds-contrast .eds-feedback-text__text {
|
|
15
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
72
16
|
}
|
|
73
|
-
|
|
74
|
-
.eds-
|
|
75
|
-
|
|
76
|
-
|
|
17
|
+
|
|
18
|
+
.eds-feedback-text__icon {
|
|
19
|
+
font-size: 1.5rem;
|
|
20
|
+
min-height: 1.5rem;
|
|
21
|
+
min-width: 1.5rem;
|
|
22
|
+
padding-right: 0.5rem;
|
|
23
|
+
position: relative;
|
|
24
|
+
top: -0.1rem;
|
|
77
25
|
}
|
|
78
|
-
.eds-
|
|
79
|
-
|
|
80
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
26
|
+
.eds-feedback-text__icon--success {
|
|
27
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
81
28
|
}
|
|
82
|
-
.eds-
|
|
83
|
-
|
|
84
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
29
|
+
.eds-feedback-text__icon--success circle {
|
|
30
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
85
31
|
}
|
|
86
|
-
.eds-contrast .eds-
|
|
87
|
-
|
|
88
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
32
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
33
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
89
34
|
}
|
|
90
|
-
.eds-
|
|
91
|
-
|
|
92
|
-
outline: 2px solid #181c56;
|
|
93
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
94
|
-
outline-offset: 0.125rem;
|
|
35
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
36
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
95
37
|
}
|
|
96
|
-
.eds-
|
|
97
|
-
|
|
98
|
-
outline: 2px solid #181c56;
|
|
99
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
100
|
-
outline-offset: 0.125rem;
|
|
38
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
39
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
101
40
|
}
|
|
102
|
-
.eds-
|
|
103
|
-
|
|
104
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
41
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
42
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
105
43
|
}
|
|
106
|
-
.eds-contrast .eds-
|
|
107
|
-
|
|
108
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
44
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
45
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
109
46
|
}
|
|
110
|
-
.eds-
|
|
111
|
-
|
|
47
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
48
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
112
49
|
}
|
|
113
|
-
.eds-
|
|
114
|
-
|
|
50
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
51
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
115
52
|
}
|
|
116
|
-
.eds-
|
|
117
|
-
|
|
53
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
54
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
118
55
|
}
|
|
119
|
-
.eds-
|
|
120
|
-
|
|
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;
|
|
56
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
57
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
132
58
|
}
|
|
133
|
-
.eds-
|
|
134
|
-
|
|
59
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
60
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
135
61
|
}
|
|
136
|
-
.eds-
|
|
137
|
-
|
|
62
|
+
.eds-feedback-text__icon--warning {
|
|
63
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
138
64
|
}
|
|
139
|
-
.eds-
|
|
140
|
-
|
|
141
|
-
width: 1rem;
|
|
142
|
-
visibility: hidden;
|
|
65
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
66
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
143
67
|
}
|
|
144
|
-
.eds-
|
|
145
|
-
|
|
146
|
-
stroke-dasharray: 48;
|
|
147
|
-
stroke-dashoffset: 48;
|
|
148
|
-
stroke-width: 0.375rem;
|
|
68
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
69
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
149
70
|
}
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
100% {
|
|
153
|
-
stroke-dashoffset: 0;
|
|
154
|
-
}
|
|
71
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
72
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
155
73
|
}
|
|
156
74
|
/* DO NOT CHANGE!*/
|
|
157
75
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -364,76 +282,282 @@
|
|
|
364
282
|
}
|
|
365
283
|
/* DO NOT CHANGE!*/
|
|
366
284
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
367
|
-
.eds-
|
|
285
|
+
.eds-checkbox__container {
|
|
368
286
|
display: flex;
|
|
369
287
|
align-items: center;
|
|
370
|
-
|
|
288
|
+
position: relative;
|
|
289
|
+
-webkit-appearance: none;
|
|
290
|
+
-moz-appearance: none;
|
|
291
|
+
appearance: none;
|
|
292
|
+
cursor: pointer;
|
|
293
|
+
-webkit-user-select: none;
|
|
294
|
+
-moz-user-select: none;
|
|
295
|
+
user-select: none;
|
|
296
|
+
width: -moz-fit-content;
|
|
297
|
+
width: fit-content;
|
|
298
|
+
margin: 0.5rem 0;
|
|
371
299
|
}
|
|
372
|
-
.eds-
|
|
373
|
-
|
|
300
|
+
.eds-checkbox__container--reduced-click-area {
|
|
301
|
+
height: -moz-fit-content;
|
|
302
|
+
height: fit-content;
|
|
374
303
|
}
|
|
375
|
-
.eds-
|
|
376
|
-
|
|
304
|
+
.eds-checkbox__container input {
|
|
305
|
+
position: absolute;
|
|
306
|
+
opacity: 0;
|
|
307
|
+
height: 0;
|
|
308
|
+
width: 0;
|
|
377
309
|
}
|
|
378
|
-
.eds-
|
|
379
|
-
color: var(--components-form-
|
|
310
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
311
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
380
312
|
}
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
font-size: 1.5rem;
|
|
384
|
-
min-height: 1.5rem;
|
|
385
|
-
min-width: 1.5rem;
|
|
386
|
-
padding-right: 0.5rem;
|
|
387
|
-
position: relative;
|
|
388
|
-
top: -0.1rem;
|
|
313
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
314
|
+
visibility: visible;
|
|
389
315
|
}
|
|
390
|
-
.eds-
|
|
391
|
-
|
|
316
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
317
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
318
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
392
319
|
}
|
|
393
|
-
.eds-
|
|
394
|
-
fill: var(--components-form-
|
|
320
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
321
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
395
322
|
}
|
|
396
|
-
.eds-
|
|
397
|
-
|
|
323
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
324
|
+
opacity: 0.5;
|
|
398
325
|
}
|
|
399
|
-
.eds-
|
|
400
|
-
|
|
326
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
327
|
+
opacity: 0.5;
|
|
401
328
|
}
|
|
402
|
-
.eds-
|
|
403
|
-
|
|
329
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
330
|
+
opacity: 0.5;
|
|
404
331
|
}
|
|
405
|
-
.eds-
|
|
406
|
-
|
|
332
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
333
|
+
opacity: 0.5;
|
|
407
334
|
}
|
|
408
|
-
.eds-
|
|
409
|
-
|
|
335
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
336
|
+
opacity: 0.5;
|
|
410
337
|
}
|
|
411
|
-
.eds-contrast .eds-
|
|
412
|
-
|
|
338
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
339
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
413
340
|
}
|
|
414
|
-
.eds-
|
|
415
|
-
|
|
341
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
342
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
416
343
|
}
|
|
417
|
-
.eds-
|
|
418
|
-
fill: var(--components-form-
|
|
344
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
345
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
419
346
|
}
|
|
420
|
-
.eds-
|
|
421
|
-
color: var(--components-form-
|
|
347
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
348
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
349
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
422
350
|
}
|
|
423
|
-
.eds-contrast .eds-
|
|
424
|
-
|
|
351
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
352
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
353
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
425
354
|
}
|
|
426
|
-
.eds-
|
|
427
|
-
|
|
355
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
356
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
357
|
+
border-color: transparent;
|
|
358
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
428
359
|
}
|
|
429
|
-
.eds-
|
|
430
|
-
|
|
360
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
361
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
362
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
431
363
|
}
|
|
432
|
-
.eds-
|
|
433
|
-
|
|
364
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
365
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
366
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
434
367
|
}
|
|
435
|
-
.eds-contrast .eds-
|
|
436
|
-
|
|
368
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
369
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
370
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
371
|
+
}
|
|
372
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
373
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
374
|
+
outline: 2px solid #181c56;
|
|
375
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
376
|
+
outline-offset: 0.125rem;
|
|
377
|
+
}
|
|
378
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
379
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
380
|
+
outline: 2px solid #181c56;
|
|
381
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
382
|
+
outline-offset: 0.125rem;
|
|
383
|
+
}
|
|
384
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
385
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
386
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
387
|
+
}
|
|
388
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
389
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
390
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
391
|
+
}
|
|
392
|
+
.eds-checkbox--disabled {
|
|
393
|
+
pointer-events: none;
|
|
394
|
+
}
|
|
395
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
396
|
+
opacity: 0.5;
|
|
397
|
+
}
|
|
398
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
399
|
+
opacity: 0.5;
|
|
400
|
+
}
|
|
401
|
+
.eds-checkbox__icon {
|
|
402
|
+
box-sizing: border-box;
|
|
403
|
+
display: inline-flex;
|
|
404
|
+
justify-content: center;
|
|
405
|
+
align-items: center;
|
|
406
|
+
position: relative;
|
|
407
|
+
margin-right: 1rem;
|
|
408
|
+
height: 1.25rem;
|
|
409
|
+
width: 1.25rem;
|
|
410
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
411
|
+
border-radius: 0.125rem;
|
|
412
|
+
background-color: transparent;
|
|
413
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
414
|
+
}
|
|
415
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
416
|
+
margin-right: 0;
|
|
417
|
+
}
|
|
418
|
+
.eds-contrast .eds-checkbox__icon {
|
|
419
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
420
|
+
}
|
|
421
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
422
|
+
height: 1rem;
|
|
423
|
+
width: 1rem;
|
|
424
|
+
visibility: hidden;
|
|
425
|
+
}
|
|
426
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
427
|
+
transform-origin: 50% 50%;
|
|
428
|
+
stroke-dasharray: 48;
|
|
429
|
+
stroke-dashoffset: 48;
|
|
430
|
+
stroke-width: 0.375rem;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
@keyframes stroke {
|
|
434
|
+
100% {
|
|
435
|
+
stroke-dashoffset: 0;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
.eds-fieldset {
|
|
439
|
+
margin: 0;
|
|
440
|
+
padding: 0;
|
|
441
|
+
border: 0;
|
|
442
|
+
}
|
|
443
|
+
/* DO NOT CHANGE!*/
|
|
444
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
445
|
+
.eds-switch {
|
|
446
|
+
cursor: pointer;
|
|
447
|
+
-webkit-user-select: none;
|
|
448
|
+
-moz-user-select: none;
|
|
449
|
+
user-select: none;
|
|
450
|
+
padding: 0.5rem 0;
|
|
451
|
+
width: -moz-fit-content;
|
|
452
|
+
width: fit-content;
|
|
453
|
+
}
|
|
454
|
+
.eds-switch input {
|
|
455
|
+
opacity: 0;
|
|
456
|
+
pointer-events: none;
|
|
457
|
+
position: absolute;
|
|
458
|
+
}
|
|
459
|
+
.eds-switch--right {
|
|
460
|
+
display: flex;
|
|
461
|
+
flex-direction: row;
|
|
462
|
+
align-items: center;
|
|
463
|
+
}
|
|
464
|
+
.eds-switch--bottom {
|
|
465
|
+
display: flex;
|
|
466
|
+
flex-direction: column;
|
|
467
|
+
align-items: center;
|
|
468
|
+
}
|
|
469
|
+
.eds-switch__circle {
|
|
470
|
+
border-radius: 50%;
|
|
471
|
+
height: 1.25rem;
|
|
472
|
+
width: 1.25rem;
|
|
473
|
+
content: "";
|
|
474
|
+
display: flex;
|
|
475
|
+
align-items: center;
|
|
476
|
+
justify-content: center;
|
|
477
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
478
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
479
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
480
|
+
top: 0.125rem;
|
|
481
|
+
left: 0.125rem;
|
|
482
|
+
position: relative;
|
|
483
|
+
}
|
|
484
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
485
|
+
height: 1.75rem;
|
|
486
|
+
width: 1.75rem;
|
|
487
|
+
}
|
|
488
|
+
.eds-contrast .eds-switch__circle {
|
|
489
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
490
|
+
}
|
|
491
|
+
.eds-switch__switch {
|
|
492
|
+
position: relative;
|
|
493
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
494
|
+
content: "";
|
|
495
|
+
display: block;
|
|
496
|
+
transition: background-color 0.1s ease-in-out;
|
|
497
|
+
height: 1.5rem;
|
|
498
|
+
width: 3rem;
|
|
499
|
+
border-radius: 1.5rem;
|
|
500
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
501
|
+
}
|
|
502
|
+
.eds-contrast .eds-switch__switch {
|
|
503
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
504
|
+
}
|
|
505
|
+
.eds-switch--right .eds-switch__switch {
|
|
506
|
+
margin-right: 0.75rem;
|
|
507
|
+
}
|
|
508
|
+
.eds-switch__switch svg g,
|
|
509
|
+
.eds-switch__switch path {
|
|
510
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
511
|
+
transition: fill ease-in-out 0.1s;
|
|
512
|
+
}
|
|
513
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
514
|
+
.eds-contrast .eds-switch__switch path {
|
|
515
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
516
|
+
}
|
|
517
|
+
:checked + .eds-switch__switch {
|
|
518
|
+
background-color: var(--eds-switch-color);
|
|
519
|
+
}
|
|
520
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
521
|
+
left: 1.625rem;
|
|
522
|
+
}
|
|
523
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
524
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
525
|
+
fill: var(--eds-switch-color);
|
|
526
|
+
}
|
|
527
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
528
|
+
background-color: var(--eds-switch-contrast-color);
|
|
529
|
+
}
|
|
530
|
+
:focus + .eds-switch__switch {
|
|
531
|
+
outline: 2px solid #181c56;
|
|
532
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
533
|
+
outline-offset: 0.125rem;
|
|
534
|
+
}
|
|
535
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
536
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
537
|
+
}
|
|
538
|
+
.eds-switch__switch--large {
|
|
539
|
+
width: 3.75rem;
|
|
540
|
+
height: 2rem;
|
|
541
|
+
border-radius: 3.75rem;
|
|
542
|
+
}
|
|
543
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
544
|
+
left: 1.875rem;
|
|
545
|
+
}
|
|
546
|
+
.eds-switch__switch--large svg {
|
|
547
|
+
position: relative;
|
|
548
|
+
right: 0.05rem;
|
|
549
|
+
}
|
|
550
|
+
.eds-switch__label--large--right {
|
|
551
|
+
font-size: 1rem;
|
|
552
|
+
}
|
|
553
|
+
.eds-switch__label--large--bottom {
|
|
554
|
+
font-size: 0.875rem;
|
|
555
|
+
}
|
|
556
|
+
.eds-switch__label--medium--right {
|
|
557
|
+
font-size: 0.875rem;
|
|
558
|
+
}
|
|
559
|
+
.eds-switch__label--medium--bottom {
|
|
560
|
+
font-size: 0.75rem;
|
|
437
561
|
}
|
|
438
562
|
/* DO NOT CHANGE!*/
|
|
439
563
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -517,11 +641,6 @@
|
|
|
517
641
|
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
518
642
|
background-color: var(--components-form-radio-contrast-icon);
|
|
519
643
|
}
|
|
520
|
-
.eds-fieldset {
|
|
521
|
-
margin: 0;
|
|
522
|
-
padding: 0;
|
|
523
|
-
border: 0;
|
|
524
|
-
}
|
|
525
644
|
/* DO NOT CHANGE!*/
|
|
526
645
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
527
646
|
.eds-input-group {
|
|
@@ -547,200 +666,81 @@
|
|
|
547
666
|
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
548
667
|
top: 0.375rem;
|
|
549
668
|
font-size: 0.75rem;
|
|
550
|
-
line-height: 0.75rem;
|
|
551
|
-
height: 10px;
|
|
552
|
-
padding: 0;
|
|
553
|
-
}
|
|
554
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
555
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
556
|
-
background: var(--textarea-label-background);
|
|
557
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
558
|
-
}
|
|
559
|
-
.eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
560
|
-
top: 0.5rem;
|
|
561
|
-
font-size: 0.875rem;
|
|
562
|
-
line-height: 1rem;
|
|
563
|
-
padding: 0;
|
|
564
|
-
}
|
|
565
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
566
|
-
top: 0.75rem;
|
|
567
|
-
font-size: 1.5rem;
|
|
568
|
-
line-height: 2.25rem;
|
|
569
|
-
}
|
|
570
|
-
.eds-input-group__label--filled {
|
|
571
|
-
top: 0.375rem;
|
|
572
|
-
font-size: 0.75rem;
|
|
573
|
-
line-height: 0.75rem;
|
|
574
|
-
height: 10px;
|
|
575
|
-
padding: 0;
|
|
576
|
-
}
|
|
577
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
578
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
579
|
-
background: var(--textarea-label-background);
|
|
580
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
581
|
-
}
|
|
582
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
583
|
-
top: 0.5rem;
|
|
584
|
-
font-size: 0.875rem;
|
|
585
|
-
line-height: 1rem;
|
|
586
|
-
padding: 0;
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
590
|
-
top: 0.375rem;
|
|
591
|
-
font-size: 0.75rem;
|
|
592
|
-
line-height: 0.75rem;
|
|
593
|
-
height: 10px;
|
|
594
|
-
padding: 0;
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
598
|
-
top: 0.375rem;
|
|
599
|
-
font-size: 0.75rem;
|
|
600
|
-
line-height: 0.75rem;
|
|
601
|
-
height: 10px;
|
|
602
|
-
padding: 0;
|
|
603
|
-
}
|
|
604
|
-
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
605
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
606
|
-
background: var(--textarea-label-background);
|
|
607
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
608
|
-
}
|
|
609
|
-
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
610
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
611
|
-
background: var(--textarea-label-background);
|
|
612
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
613
|
-
}
|
|
614
|
-
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
615
|
-
top: 0.5rem;
|
|
616
|
-
font-size: 0.875rem;
|
|
617
|
-
line-height: 1rem;
|
|
618
|
-
padding: 0;
|
|
619
|
-
}
|
|
620
|
-
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
621
|
-
top: 0.5rem;
|
|
622
|
-
font-size: 0.875rem;
|
|
623
|
-
line-height: 1rem;
|
|
624
|
-
padding: 0;
|
|
625
|
-
}
|
|
626
|
-
/* DO NOT CHANGE!*/
|
|
627
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
628
|
-
.eds-switch {
|
|
629
|
-
cursor: pointer;
|
|
630
|
-
-webkit-user-select: none;
|
|
631
|
-
-moz-user-select: none;
|
|
632
|
-
user-select: none;
|
|
633
|
-
padding: 0.5rem 0;
|
|
634
|
-
width: -moz-fit-content;
|
|
635
|
-
width: fit-content;
|
|
636
|
-
}
|
|
637
|
-
.eds-switch input {
|
|
638
|
-
opacity: 0;
|
|
639
|
-
pointer-events: none;
|
|
640
|
-
position: absolute;
|
|
641
|
-
}
|
|
642
|
-
.eds-switch--right {
|
|
643
|
-
display: flex;
|
|
644
|
-
flex-direction: row;
|
|
645
|
-
align-items: center;
|
|
646
|
-
}
|
|
647
|
-
.eds-switch--bottom {
|
|
648
|
-
display: flex;
|
|
649
|
-
flex-direction: column;
|
|
650
|
-
align-items: center;
|
|
651
|
-
}
|
|
652
|
-
.eds-switch__circle {
|
|
653
|
-
border-radius: 50%;
|
|
654
|
-
height: 1.25rem;
|
|
655
|
-
width: 1.25rem;
|
|
656
|
-
content: "";
|
|
657
|
-
display: flex;
|
|
658
|
-
align-items: center;
|
|
659
|
-
justify-content: center;
|
|
660
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
661
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
662
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
663
|
-
top: 0.125rem;
|
|
664
|
-
left: 0.125rem;
|
|
665
|
-
position: relative;
|
|
666
|
-
}
|
|
667
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
668
|
-
height: 1.75rem;
|
|
669
|
-
width: 1.75rem;
|
|
670
|
-
}
|
|
671
|
-
.eds-contrast .eds-switch__circle {
|
|
672
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
673
|
-
}
|
|
674
|
-
.eds-switch__switch {
|
|
675
|
-
position: relative;
|
|
676
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
677
|
-
content: "";
|
|
678
|
-
display: block;
|
|
679
|
-
transition: background-color 0.1s ease-in-out;
|
|
680
|
-
height: 1.5rem;
|
|
681
|
-
width: 3rem;
|
|
682
|
-
border-radius: 1.5rem;
|
|
683
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
684
|
-
}
|
|
685
|
-
.eds-contrast .eds-switch__switch {
|
|
686
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
687
|
-
}
|
|
688
|
-
.eds-switch--right .eds-switch__switch {
|
|
689
|
-
margin-right: 0.75rem;
|
|
690
|
-
}
|
|
691
|
-
.eds-switch__switch svg g,
|
|
692
|
-
.eds-switch__switch path {
|
|
693
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
694
|
-
transition: fill ease-in-out 0.1s;
|
|
695
|
-
}
|
|
696
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
697
|
-
.eds-contrast .eds-switch__switch path {
|
|
698
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
669
|
+
line-height: 0.75rem;
|
|
670
|
+
height: 10px;
|
|
671
|
+
padding: 0;
|
|
699
672
|
}
|
|
700
|
-
|
|
701
|
-
|
|
673
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
674
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
675
|
+
background: var(--textarea-label-background);
|
|
676
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
702
677
|
}
|
|
703
|
-
|
|
704
|
-
|
|
678
|
+
.eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
679
|
+
top: 0.5rem;
|
|
680
|
+
font-size: 0.875rem;
|
|
681
|
+
line-height: 1rem;
|
|
682
|
+
padding: 0;
|
|
705
683
|
}
|
|
706
|
-
|
|
707
|
-
:
|
|
708
|
-
|
|
684
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
685
|
+
top: 0.75rem;
|
|
686
|
+
font-size: 1.5rem;
|
|
687
|
+
line-height: 2.25rem;
|
|
709
688
|
}
|
|
710
|
-
.eds-
|
|
711
|
-
|
|
689
|
+
.eds-input-group__label--filled {
|
|
690
|
+
top: 0.375rem;
|
|
691
|
+
font-size: 0.75rem;
|
|
692
|
+
line-height: 0.75rem;
|
|
693
|
+
height: 10px;
|
|
694
|
+
padding: 0;
|
|
712
695
|
}
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
696
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
697
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
698
|
+
background: var(--textarea-label-background);
|
|
699
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
717
700
|
}
|
|
718
|
-
.eds-
|
|
719
|
-
|
|
701
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
702
|
+
top: 0.5rem;
|
|
703
|
+
font-size: 0.875rem;
|
|
704
|
+
line-height: 1rem;
|
|
705
|
+
padding: 0;
|
|
720
706
|
}
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
707
|
+
|
|
708
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
709
|
+
top: 0.375rem;
|
|
710
|
+
font-size: 0.75rem;
|
|
711
|
+
line-height: 0.75rem;
|
|
712
|
+
height: 10px;
|
|
713
|
+
padding: 0;
|
|
725
714
|
}
|
|
726
|
-
|
|
727
|
-
|
|
715
|
+
|
|
716
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
717
|
+
top: 0.375rem;
|
|
718
|
+
font-size: 0.75rem;
|
|
719
|
+
line-height: 0.75rem;
|
|
720
|
+
height: 10px;
|
|
721
|
+
padding: 0;
|
|
728
722
|
}
|
|
729
|
-
.eds-
|
|
730
|
-
|
|
731
|
-
|
|
723
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
724
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
725
|
+
background: var(--textarea-label-background);
|
|
726
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
732
727
|
}
|
|
733
|
-
.eds-
|
|
734
|
-
|
|
728
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
729
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
730
|
+
background: var(--textarea-label-background);
|
|
731
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
735
732
|
}
|
|
736
|
-
.eds-
|
|
733
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
734
|
+
top: 0.5rem;
|
|
737
735
|
font-size: 0.875rem;
|
|
736
|
+
line-height: 1rem;
|
|
737
|
+
padding: 0;
|
|
738
738
|
}
|
|
739
|
-
.eds-
|
|
739
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
740
|
+
top: 0.5rem;
|
|
740
741
|
font-size: 0.875rem;
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
font-size: 0.75rem;
|
|
742
|
+
line-height: 1rem;
|
|
743
|
+
padding: 0;
|
|
744
744
|
}
|
|
745
745
|
/* DO NOT CHANGE!*/
|
|
746
746
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -965,6 +965,88 @@ textarea.eds-form-control.eds-textarea {
|
|
|
965
965
|
}
|
|
966
966
|
/* DO NOT CHANGE!*/
|
|
967
967
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
968
|
+
.eds-segmented-choice {
|
|
969
|
+
display: block;
|
|
970
|
+
flex: 1 1 0px;
|
|
971
|
+
}
|
|
972
|
+
.eds-segmented-choice .eds-base-segmented {
|
|
973
|
+
--background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
|
|
974
|
+
background-color: var(--background-color);
|
|
975
|
+
border-radius: 0.25rem;
|
|
976
|
+
color: var(--components-form-segmentedcontrol-standard-text-unselected);
|
|
977
|
+
cursor: pointer;
|
|
978
|
+
font-size: 0.875rem;
|
|
979
|
+
height: 1.5rem;
|
|
980
|
+
line-height: 1.25rem;
|
|
981
|
+
margin: 0.25rem;
|
|
982
|
+
outline-color: transparent;
|
|
983
|
+
padding: calc(0.25rem/ 2) 0.75rem;
|
|
984
|
+
text-align: center;
|
|
985
|
+
-webkit-user-select: none;
|
|
986
|
+
-moz-user-select: none;
|
|
987
|
+
user-select: none;
|
|
988
|
+
}
|
|
989
|
+
.eds-segmented-choice .eds-base-segmented--large {
|
|
990
|
+
font-size: 1rem;
|
|
991
|
+
height: 2.5rem;
|
|
992
|
+
line-height: 1.5rem;
|
|
993
|
+
padding: 0.5rem 0.75rem;
|
|
994
|
+
}
|
|
995
|
+
.eds-contrast .eds-segmented-choice .eds-base-segmented {
|
|
996
|
+
--background-color: var(--components-form-segmentedcontrol-contrast-background);
|
|
997
|
+
color: var(--components-form-segmentedcontrol-contrast-text-unselected);
|
|
998
|
+
}
|
|
999
|
+
.eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1000
|
+
--background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
|
|
1001
|
+
}
|
|
1002
|
+
.eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1003
|
+
--background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
|
|
1004
|
+
}
|
|
1005
|
+
.eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1006
|
+
--background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
|
|
1007
|
+
color: var(--components-form-segmentedcontrol-standard-text-unselected);
|
|
1008
|
+
}
|
|
1009
|
+
.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1010
|
+
--background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
|
|
1011
|
+
color: var(--components-form-segmentedcontrol-contrast-text-unselected);
|
|
1012
|
+
}
|
|
1013
|
+
.eds-segmented-choice input {
|
|
1014
|
+
-webkit-appearance: none;
|
|
1015
|
+
-moz-appearance: none;
|
|
1016
|
+
appearance: none;
|
|
1017
|
+
position: absolute;
|
|
1018
|
+
opacity: 0;
|
|
1019
|
+
height: 0;
|
|
1020
|
+
width: 0;
|
|
1021
|
+
}
|
|
1022
|
+
.eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1023
|
+
--background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
|
|
1024
|
+
color: var(--components-form-segmentedcontrol-standard-text-selected);
|
|
1025
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
1026
|
+
}
|
|
1027
|
+
.eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1028
|
+
--background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
|
|
1029
|
+
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
1030
|
+
color: var(--components-form-segmentedcontrol-contrast-text-selected);
|
|
1031
|
+
}
|
|
1032
|
+
.eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1033
|
+
outline: 2px solid #181c56;
|
|
1034
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1035
|
+
outline-offset: 0.125rem;
|
|
1036
|
+
}
|
|
1037
|
+
.eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1038
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1039
|
+
}
|
|
1040
|
+
.eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1041
|
+
outline: 2px solid #181c56;
|
|
1042
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1043
|
+
outline-offset: 0.125rem;
|
|
1044
|
+
}
|
|
1045
|
+
.eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1046
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1047
|
+
}
|
|
1048
|
+
/* DO NOT CHANGE!*/
|
|
1049
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
968
1050
|
/* DO NOT CHANGE!*/
|
|
969
1051
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
970
1052
|
/* DO NOT CHANGE!*/
|
|
@@ -1510,85 +1592,3 @@ textarea.eds-form-control.eds-textarea {
|
|
|
1510
1592
|
:root {
|
|
1511
1593
|
--eds-form: 1;
|
|
1512
1594
|
}
|
|
1513
|
-
/* DO NOT CHANGE!*/
|
|
1514
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1515
|
-
.eds-segmented-choice {
|
|
1516
|
-
display: block;
|
|
1517
|
-
flex: 1 1 0px;
|
|
1518
|
-
}
|
|
1519
|
-
.eds-segmented-choice .eds-base-segmented {
|
|
1520
|
-
--background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
|
|
1521
|
-
background-color: var(--background-color);
|
|
1522
|
-
border-radius: 0.25rem;
|
|
1523
|
-
color: var(--components-form-segmentedcontrol-standard-text-unselected);
|
|
1524
|
-
cursor: pointer;
|
|
1525
|
-
font-size: 0.875rem;
|
|
1526
|
-
height: 1.5rem;
|
|
1527
|
-
line-height: 1.25rem;
|
|
1528
|
-
margin: 0.25rem;
|
|
1529
|
-
outline-color: transparent;
|
|
1530
|
-
padding: calc(0.25rem/ 2) 0.75rem;
|
|
1531
|
-
text-align: center;
|
|
1532
|
-
-webkit-user-select: none;
|
|
1533
|
-
-moz-user-select: none;
|
|
1534
|
-
user-select: none;
|
|
1535
|
-
}
|
|
1536
|
-
.eds-segmented-choice .eds-base-segmented--large {
|
|
1537
|
-
font-size: 1rem;
|
|
1538
|
-
height: 2.5rem;
|
|
1539
|
-
line-height: 1.5rem;
|
|
1540
|
-
padding: 0.5rem 0.75rem;
|
|
1541
|
-
}
|
|
1542
|
-
.eds-contrast .eds-segmented-choice .eds-base-segmented {
|
|
1543
|
-
--background-color: var(--components-form-segmentedcontrol-contrast-background);
|
|
1544
|
-
color: var(--components-form-segmentedcontrol-contrast-text-unselected);
|
|
1545
|
-
}
|
|
1546
|
-
.eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1547
|
-
--background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
|
|
1548
|
-
}
|
|
1549
|
-
.eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1550
|
-
--background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
|
|
1551
|
-
}
|
|
1552
|
-
.eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1553
|
-
--background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
|
|
1554
|
-
color: var(--components-form-segmentedcontrol-standard-text-unselected);
|
|
1555
|
-
}
|
|
1556
|
-
.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1557
|
-
--background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
|
|
1558
|
-
color: var(--components-form-segmentedcontrol-contrast-text-unselected);
|
|
1559
|
-
}
|
|
1560
|
-
.eds-segmented-choice input {
|
|
1561
|
-
-webkit-appearance: none;
|
|
1562
|
-
-moz-appearance: none;
|
|
1563
|
-
appearance: none;
|
|
1564
|
-
position: absolute;
|
|
1565
|
-
opacity: 0;
|
|
1566
|
-
height: 0;
|
|
1567
|
-
width: 0;
|
|
1568
|
-
}
|
|
1569
|
-
.eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1570
|
-
--background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
|
|
1571
|
-
color: var(--components-form-segmentedcontrol-standard-text-selected);
|
|
1572
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
1573
|
-
}
|
|
1574
|
-
.eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1575
|
-
--background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
|
|
1576
|
-
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
1577
|
-
color: var(--components-form-segmentedcontrol-contrast-text-selected);
|
|
1578
|
-
}
|
|
1579
|
-
.eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1580
|
-
outline: 2px solid #181c56;
|
|
1581
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1582
|
-
outline-offset: 0.125rem;
|
|
1583
|
-
}
|
|
1584
|
-
.eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1585
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1586
|
-
}
|
|
1587
|
-
.eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1588
|
-
outline: 2px solid #181c56;
|
|
1589
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1590
|
-
outline-offset: 0.125rem;
|
|
1591
|
-
}
|
|
1592
|
-
.eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1593
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1594
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "8.1.
|
|
3
|
+
"version": "8.1.1",
|
|
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": "^7.
|
|
30
|
+
"@entur/icons": "^7.4.0",
|
|
31
31
|
"@entur/tokens": "^3.17.0",
|
|
32
|
-
"@entur/tooltip": "^4.0.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
34
|
-
"@entur/utils": "^0.11.2
|
|
32
|
+
"@entur/tooltip": "^4.0.1",
|
|
33
|
+
"@entur/typography": "^1.8.45",
|
|
34
|
+
"@entur/utils": "^0.11.2",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "045cada5d95c62d8ddfc95d82b4526742ab07d0a"
|
|
38
38
|
}
|