@entur/form 7.0.16 → 7.0.17
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 +48 -48
- package/dist/Checkbox.d.ts +42 -42
- package/dist/FeedbackText.d.ts +15 -15
- package/dist/Fieldset.d.ts +12 -12
- package/dist/InputGroupContext.d.ts +10 -10
- package/dist/InputGroupLabel.d.ts +10 -10
- package/dist/Radio.d.ts +18 -18
- package/dist/RadioGroup.d.ts +15 -15
- package/dist/RadioGroupContext.d.ts +9 -9
- package/dist/Switch.d.ts +66 -66
- package/dist/TextArea.d.ts +43 -43
- package/dist/TextField.d.ts +77 -77
- package/dist/VariantProvider.d.ts +7 -7
- package/dist/form.cjs.development.js +120 -125
- 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 +2 -2
- package/dist/index.d.ts +18 -18
- package/dist/inputPanel/CheckboxPanel.d.ts +30 -30
- package/dist/inputPanel/InputPanelBase.d.ts +33 -33
- package/dist/inputPanel/RadioPanel.d.ts +28 -28
- package/dist/inputPanel/index.d.ts +2 -2
- package/dist/segmented-control/MultipleSegmentedControl.d.ts +20 -20
- package/dist/segmented-control/SegmentedChoice.d.ts +13 -13
- package/dist/segmented-control/SegmentedContext.d.ts +33 -33
- package/dist/segmented-control/SegmentedControl.d.ts +21 -21
- package/dist/styles.css +427 -429
- package/dist/utils.d.ts +2 -2
- package/dist/variants.d.ts +1 -1
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -1,64 +1,164 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--eds-form: 1;
|
|
3
|
-
}
|
|
4
1
|
/* DO NOT CHANGE!*/
|
|
5
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
|
-
.eds-
|
|
3
|
+
.eds-checkbox__container {
|
|
7
4
|
display: flex;
|
|
8
5
|
align-items: center;
|
|
9
|
-
|
|
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;
|
|
10
17
|
}
|
|
11
|
-
.eds-
|
|
12
|
-
|
|
18
|
+
.eds-checkbox__container--reduced-click-area {
|
|
19
|
+
height: -moz-fit-content;
|
|
20
|
+
height: fit-content;
|
|
13
21
|
}
|
|
14
|
-
.eds-
|
|
15
|
-
|
|
22
|
+
.eds-checkbox__container input {
|
|
23
|
+
position: absolute;
|
|
24
|
+
opacity: 0;
|
|
25
|
+
height: 0;
|
|
26
|
+
width: 0;
|
|
16
27
|
}
|
|
17
|
-
.eds-
|
|
18
|
-
color: #
|
|
28
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
29
|
+
background-color: #181c56;
|
|
19
30
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
font-size: 1.5rem;
|
|
23
|
-
min-height: 1.5rem;
|
|
24
|
-
min-width: 1.5rem;
|
|
25
|
-
padding-right: 0.5rem;
|
|
26
|
-
position: relative;
|
|
27
|
-
top: -0.1rem;
|
|
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;
|
|
28
33
|
}
|
|
29
|
-
.eds-
|
|
30
|
-
|
|
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: #ffffff;
|
|
36
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
31
37
|
}
|
|
32
|
-
.eds-
|
|
33
|
-
|
|
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: #ffffff;
|
|
34
40
|
}
|
|
35
|
-
.eds-
|
|
36
|
-
|
|
41
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
42
|
+
opacity: 0.5;
|
|
37
43
|
}
|
|
38
|
-
.eds-
|
|
39
|
-
|
|
44
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
45
|
+
opacity: 0.5;
|
|
40
46
|
}
|
|
41
|
-
.eds-
|
|
42
|
-
|
|
47
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
48
|
+
opacity: 0.5;
|
|
43
49
|
}
|
|
44
|
-
.eds-
|
|
45
|
-
|
|
50
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
51
|
+
opacity: 0.5;
|
|
46
52
|
}
|
|
47
|
-
.eds-
|
|
48
|
-
|
|
53
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
54
|
+
opacity: 0.5;
|
|
49
55
|
}
|
|
50
|
-
.eds-
|
|
56
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
57
|
+
background-color: #aeb7e2;
|
|
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: #181c56;
|
|
61
|
+
}
|
|
62
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
51
63
|
fill: #181c56;
|
|
52
64
|
}
|
|
53
|
-
.eds-
|
|
54
|
-
color: #
|
|
65
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
66
|
+
border-color: #292b6a;
|
|
67
|
+
background-color: #d1d4e3;
|
|
55
68
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
69
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
70
|
+
border-color: #b6bee5;
|
|
71
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
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: #54568c;
|
|
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: #b6bee5;
|
|
81
|
+
}
|
|
82
|
+
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
83
|
+
border-color: #16194d;
|
|
84
|
+
}
|
|
85
|
+
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
86
|
+
border-color: #9da5cb;
|
|
87
|
+
}
|
|
88
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
89
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
90
|
+
background-color: #16194d;
|
|
91
|
+
}
|
|
92
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
93
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
94
|
+
background-color: #9da5cb;
|
|
95
|
+
}
|
|
96
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
97
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
98
|
+
outline: none;
|
|
99
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
100
|
+
outline-offset: 0.125rem;
|
|
101
|
+
}
|
|
102
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
103
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
104
|
+
outline: none;
|
|
105
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
106
|
+
outline-offset: 0.125rem;
|
|
107
|
+
}
|
|
108
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
109
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
110
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
111
|
+
}
|
|
112
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
113
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
114
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
115
|
+
}
|
|
116
|
+
.eds-checkbox--disabled {
|
|
117
|
+
pointer-events: none;
|
|
118
|
+
}
|
|
119
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
120
|
+
opacity: 0.5;
|
|
121
|
+
}
|
|
122
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
123
|
+
opacity: 0.5;
|
|
124
|
+
}
|
|
125
|
+
.eds-checkbox__icon {
|
|
126
|
+
box-sizing: border-box;
|
|
127
|
+
display: inline-flex;
|
|
128
|
+
justify-content: center;
|
|
129
|
+
align-items: center;
|
|
130
|
+
position: relative;
|
|
131
|
+
margin-right: 1rem;
|
|
132
|
+
height: 1.25rem;
|
|
133
|
+
width: 1.25rem;
|
|
134
|
+
border: 0.125rem solid #181c56;
|
|
135
|
+
border-radius: 0.125rem;
|
|
136
|
+
background-color: transparent;
|
|
137
|
+
color: #ffffff;
|
|
138
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
139
|
+
}
|
|
140
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
141
|
+
margin-right: 0;
|
|
142
|
+
}
|
|
143
|
+
.eds-contrast .eds-checkbox__icon {
|
|
144
|
+
border-color: #aeb7e2;
|
|
145
|
+
}
|
|
146
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
147
|
+
height: 1rem;
|
|
148
|
+
width: 1rem;
|
|
149
|
+
visibility: hidden;
|
|
150
|
+
}
|
|
151
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
152
|
+
transform-origin: 50% 50%;
|
|
153
|
+
stroke-dasharray: 48;
|
|
154
|
+
stroke-dashoffset: 48;
|
|
155
|
+
stroke-width: 0.375rem;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@keyframes stroke {
|
|
159
|
+
100% {
|
|
160
|
+
stroke-dashoffset: 0;
|
|
161
|
+
}
|
|
62
162
|
}
|
|
63
163
|
/* DO NOT CHANGE!*/
|
|
64
164
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -76,7 +176,7 @@
|
|
|
76
176
|
width: 100%;
|
|
77
177
|
min-height: 3rem;
|
|
78
178
|
transition: border-color 0.1s ease-in-out;
|
|
79
|
-
--textarea-label-background:
|
|
179
|
+
--textarea-label-background: t.$colors-brand-white;
|
|
80
180
|
/*
|
|
81
181
|
Some input controls require a darker design while inside a contrast block.
|
|
82
182
|
These elements require the `--dark` modifier, even on the wrapper.
|
|
@@ -132,13 +232,13 @@
|
|
|
132
232
|
}
|
|
133
233
|
.eds-form-control-wrapper--readonly {
|
|
134
234
|
--border-color: transparent;
|
|
135
|
-
--textarea-label-background:
|
|
235
|
+
--textarea-label-background: t.$colors-greys-grey90;
|
|
136
236
|
pointer-events: none;
|
|
137
237
|
cursor: default;
|
|
138
238
|
background: #f8f8f8;
|
|
139
239
|
}
|
|
140
240
|
.eds-contrast .eds-form-control-wrapper--readonly {
|
|
141
|
-
--textarea-label-background:
|
|
241
|
+
--textarea-label-background: t.$colors-blues-blue10;
|
|
142
242
|
background: #292b6a;
|
|
143
243
|
color: #ffffff;
|
|
144
244
|
}
|
|
@@ -304,296 +404,60 @@
|
|
|
304
404
|
}
|
|
305
405
|
/* DO NOT CHANGE!*/
|
|
306
406
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
307
|
-
.eds-
|
|
407
|
+
.eds-feedback-text {
|
|
308
408
|
display: flex;
|
|
309
409
|
align-items: center;
|
|
310
|
-
|
|
311
|
-
-webkit-appearance: none;
|
|
312
|
-
-moz-appearance: none;
|
|
313
|
-
appearance: none;
|
|
314
|
-
cursor: pointer;
|
|
315
|
-
-webkit-user-select: none;
|
|
316
|
-
-moz-user-select: none;
|
|
317
|
-
user-select: none;
|
|
318
|
-
width: -moz-fit-content;
|
|
319
|
-
width: fit-content;
|
|
320
|
-
margin: 0.5rem 0;
|
|
321
|
-
}
|
|
322
|
-
.eds-checkbox__container--reduced-click-area {
|
|
323
|
-
height: -moz-fit-content;
|
|
324
|
-
height: fit-content;
|
|
410
|
+
margin-top: 0.25rem;
|
|
325
411
|
}
|
|
326
|
-
.eds-
|
|
327
|
-
|
|
328
|
-
opacity: 0;
|
|
329
|
-
height: 0;
|
|
330
|
-
width: 0;
|
|
412
|
+
.eds-feedback-text--info {
|
|
413
|
+
padding-left: calc(1rem + 0.125rem);
|
|
331
414
|
}
|
|
332
|
-
.eds-
|
|
333
|
-
|
|
415
|
+
.eds-feedback-text__text {
|
|
416
|
+
color: #181c56;
|
|
334
417
|
}
|
|
335
|
-
.eds-
|
|
336
|
-
|
|
418
|
+
.eds-contrast .eds-feedback-text__text {
|
|
419
|
+
color: #ffffff;
|
|
337
420
|
}
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
421
|
+
|
|
422
|
+
.eds-feedback-text__icon {
|
|
423
|
+
font-size: 1.5rem;
|
|
424
|
+
min-height: 1.5rem;
|
|
425
|
+
min-width: 1.5rem;
|
|
426
|
+
padding-right: 0.5rem;
|
|
427
|
+
position: relative;
|
|
428
|
+
top: -0.1rem;
|
|
341
429
|
}
|
|
342
|
-
.eds-
|
|
343
|
-
|
|
430
|
+
.eds-feedback-text__icon--success {
|
|
431
|
+
color: #1a8e60;
|
|
344
432
|
}
|
|
345
|
-
.eds-
|
|
346
|
-
|
|
433
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
434
|
+
color: #5ac39a;
|
|
347
435
|
}
|
|
348
|
-
.eds-
|
|
349
|
-
|
|
436
|
+
.eds-feedback-text__icon--error {
|
|
437
|
+
color: #d31b1b;
|
|
350
438
|
}
|
|
351
|
-
.eds-
|
|
352
|
-
|
|
439
|
+
.eds-contrast .eds-feedback-text__icon--error {
|
|
440
|
+
color: #ff9494;
|
|
353
441
|
}
|
|
354
|
-
.eds-
|
|
355
|
-
|
|
442
|
+
.eds-feedback-text__icon--info {
|
|
443
|
+
color: #0082b9;
|
|
356
444
|
}
|
|
357
|
-
.eds-
|
|
358
|
-
|
|
445
|
+
.eds-contrast .eds-feedback-text__icon--info {
|
|
446
|
+
color: #64b3e7;
|
|
359
447
|
}
|
|
360
|
-
.eds-
|
|
361
|
-
|
|
448
|
+
.eds-feedback-text__icon--warning {
|
|
449
|
+
color: #ffca28;
|
|
362
450
|
}
|
|
363
|
-
.eds-
|
|
364
|
-
stroke: #181c56;
|
|
365
|
-
}
|
|
366
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
451
|
+
.eds-feedback-text__icon--warning circle {
|
|
367
452
|
fill: #181c56;
|
|
368
453
|
}
|
|
369
|
-
.eds-
|
|
370
|
-
|
|
371
|
-
background-color: #d1d4e3;
|
|
372
|
-
}
|
|
373
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
374
|
-
border-color: #b6bee5;
|
|
375
|
-
background-color: rgba(174, 183, 226, 0.2);
|
|
376
|
-
}
|
|
377
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
378
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
379
|
-
border-color: transparent;
|
|
380
|
-
background-color: #54568c;
|
|
381
|
-
}
|
|
382
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
383
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
384
|
-
background-color: #b6bee5;
|
|
385
|
-
}
|
|
386
|
-
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
387
|
-
border-color: #16194d;
|
|
388
|
-
}
|
|
389
|
-
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
390
|
-
border-color: #9da5cb;
|
|
391
|
-
}
|
|
392
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
393
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
394
|
-
background-color: #16194d;
|
|
395
|
-
}
|
|
396
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
397
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
398
|
-
background-color: #9da5cb;
|
|
399
|
-
}
|
|
400
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
401
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
402
|
-
outline: none;
|
|
403
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
404
|
-
outline-offset: 0.125rem;
|
|
405
|
-
}
|
|
406
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
407
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
408
|
-
outline: none;
|
|
409
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
410
|
-
outline-offset: 0.125rem;
|
|
411
|
-
}
|
|
412
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
413
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
414
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
415
|
-
}
|
|
416
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
417
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
418
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
419
|
-
}
|
|
420
|
-
.eds-checkbox--disabled {
|
|
421
|
-
pointer-events: none;
|
|
422
|
-
}
|
|
423
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
424
|
-
opacity: 0.5;
|
|
425
|
-
}
|
|
426
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
427
|
-
opacity: 0.5;
|
|
428
|
-
}
|
|
429
|
-
.eds-checkbox__icon {
|
|
430
|
-
box-sizing: border-box;
|
|
431
|
-
display: inline-flex;
|
|
432
|
-
justify-content: center;
|
|
433
|
-
align-items: center;
|
|
434
|
-
position: relative;
|
|
435
|
-
margin-right: 1rem;
|
|
436
|
-
height: 1.25rem;
|
|
437
|
-
width: 1.25rem;
|
|
438
|
-
border: 0.125rem solid #181c56;
|
|
439
|
-
border-radius: 0.125rem;
|
|
440
|
-
background-color: transparent;
|
|
441
|
-
color: #ffffff;
|
|
442
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
443
|
-
}
|
|
444
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
445
|
-
margin-right: 0;
|
|
446
|
-
}
|
|
447
|
-
.eds-contrast .eds-checkbox__icon {
|
|
448
|
-
border-color: #aeb7e2;
|
|
449
|
-
}
|
|
450
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
451
|
-
height: 1rem;
|
|
452
|
-
width: 1rem;
|
|
453
|
-
visibility: hidden;
|
|
454
|
-
}
|
|
455
|
-
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
456
|
-
transform-origin: 50% 50%;
|
|
457
|
-
stroke-dasharray: 48;
|
|
458
|
-
stroke-dashoffset: 48;
|
|
459
|
-
stroke-width: 0.375rem;
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
@keyframes stroke {
|
|
463
|
-
100% {
|
|
464
|
-
stroke-dashoffset: 0;
|
|
465
|
-
}
|
|
466
|
-
}
|
|
467
|
-
/* DO NOT CHANGE!*/
|
|
468
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
469
|
-
.eds-input-group {
|
|
470
|
-
color: inherit;
|
|
471
|
-
display: block;
|
|
472
|
-
position: relative;
|
|
473
|
-
}
|
|
474
|
-
.eds-input-group__label {
|
|
475
|
-
color: #656782;
|
|
476
|
-
display: flex;
|
|
477
|
-
font-size: 1rem;
|
|
478
|
-
position: absolute;
|
|
479
|
-
line-height: 1rem;
|
|
480
|
-
height: 3rem;
|
|
481
|
-
padding: 1rem;
|
|
482
|
-
padding-left: 0;
|
|
483
|
-
margin-left: 1rem;
|
|
484
|
-
top: -0.125rem;
|
|
485
|
-
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;
|
|
486
|
-
-webkit-user-select: none;
|
|
487
|
-
-moz-user-select: none;
|
|
488
|
-
user-select: none;
|
|
489
|
-
pointer-events: none;
|
|
490
|
-
}
|
|
491
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
492
|
-
top: 0.375rem;
|
|
493
|
-
font-size: 0.75rem;
|
|
494
|
-
line-height: 0.75rem;
|
|
495
|
-
height: 10px;
|
|
496
|
-
padding: 0;
|
|
497
|
-
margin-left: 1rem;
|
|
498
|
-
}
|
|
499
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
500
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
501
|
-
background: var(--textarea-label-background);
|
|
502
|
-
width: calc(
|
|
503
|
-
100% - 1rem - 1rem - 4px
|
|
504
|
-
);
|
|
505
|
-
}
|
|
506
|
-
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
507
|
-
top: 0.5rem;
|
|
508
|
-
font-size: 0.875rem;
|
|
509
|
-
line-height: 1rem;
|
|
510
|
-
padding: 0;
|
|
511
|
-
margin-left: 1rem;
|
|
512
|
-
}
|
|
513
|
-
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
514
|
-
color: #aeb7e2;
|
|
515
|
-
}
|
|
516
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
517
|
-
font-size: 1.5rem;
|
|
518
|
-
line-height: 2.25rem;
|
|
519
|
-
height: 4rem;
|
|
520
|
-
}
|
|
521
|
-
.eds-input-group__label--filled {
|
|
522
|
-
top: 0.375rem;
|
|
523
|
-
font-size: 0.75rem;
|
|
524
|
-
line-height: 0.75rem;
|
|
525
|
-
height: 10px;
|
|
526
|
-
padding: 0;
|
|
527
|
-
margin-left: 1rem;
|
|
528
|
-
}
|
|
529
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
530
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
531
|
-
background: var(--textarea-label-background);
|
|
532
|
-
width: calc(
|
|
533
|
-
100% - 1rem - 1rem - 4px
|
|
534
|
-
);
|
|
535
|
-
}
|
|
536
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
537
|
-
top: 0.5rem;
|
|
538
|
-
font-size: 0.875rem;
|
|
539
|
-
line-height: 1rem;
|
|
540
|
-
padding: 0;
|
|
541
|
-
margin-left: 1rem;
|
|
542
|
-
}
|
|
543
|
-
.eds-input-group__label-tooltip-icon {
|
|
544
|
-
color: #0082b9;
|
|
545
|
-
padding-left: 0.25rem;
|
|
546
|
-
padding-right: 0.25rem;
|
|
547
|
-
display: flex;
|
|
548
|
-
align-items: center;
|
|
549
|
-
cursor: help;
|
|
550
|
-
font-size: 1rem;
|
|
551
|
-
}
|
|
552
|
-
|
|
553
|
-
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
554
|
-
top: 0.375rem;
|
|
555
|
-
font-size: 0.75rem;
|
|
556
|
-
line-height: 0.75rem;
|
|
557
|
-
height: 10px;
|
|
558
|
-
padding: 0;
|
|
559
|
-
margin-left: 1rem;
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
563
|
-
top: 0.375rem;
|
|
564
|
-
font-size: 0.75rem;
|
|
565
|
-
line-height: 0.75rem;
|
|
566
|
-
height: 10px;
|
|
567
|
-
padding: 0;
|
|
568
|
-
margin-left: 1rem;
|
|
569
|
-
}
|
|
570
|
-
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
571
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
572
|
-
background: var(--textarea-label-background);
|
|
573
|
-
width: calc(
|
|
574
|
-
100% - 1rem - 1rem - 4px
|
|
575
|
-
);
|
|
576
|
-
}
|
|
577
|
-
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
578
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
579
|
-
background: var(--textarea-label-background);
|
|
580
|
-
width: calc(
|
|
581
|
-
100% - 1rem - 1rem - 4px
|
|
582
|
-
);
|
|
583
|
-
}
|
|
584
|
-
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
585
|
-
top: 0.5rem;
|
|
586
|
-
font-size: 0.875rem;
|
|
587
|
-
line-height: 1rem;
|
|
588
|
-
padding: 0;
|
|
589
|
-
margin-left: 1rem;
|
|
454
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
455
|
+
color: #ffe082;
|
|
590
456
|
}
|
|
591
|
-
.eds-
|
|
592
|
-
|
|
593
|
-
font-size: 0.875rem;
|
|
594
|
-
line-height: 1rem;
|
|
457
|
+
.eds-fieldset {
|
|
458
|
+
margin: 0;
|
|
595
459
|
padding: 0;
|
|
596
|
-
|
|
460
|
+
border: 0;
|
|
597
461
|
}
|
|
598
462
|
/* DO NOT CHANGE!*/
|
|
599
463
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -716,40 +580,134 @@
|
|
|
716
580
|
}
|
|
717
581
|
/* DO NOT CHANGE!*/
|
|
718
582
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
719
|
-
.eds-
|
|
720
|
-
background: none;
|
|
721
|
-
border: none;
|
|
722
|
-
border-radius: 50%;
|
|
583
|
+
.eds-input-group {
|
|
723
584
|
color: inherit;
|
|
724
|
-
|
|
585
|
+
display: block;
|
|
586
|
+
position: relative;
|
|
587
|
+
}
|
|
588
|
+
.eds-input-group__label {
|
|
589
|
+
color: #656782;
|
|
725
590
|
display: flex;
|
|
726
|
-
font: inherit;
|
|
727
591
|
font-size: 1rem;
|
|
592
|
+
position: absolute;
|
|
728
593
|
line-height: 1rem;
|
|
729
|
-
|
|
730
|
-
|
|
594
|
+
height: 3rem;
|
|
595
|
+
padding: 1rem;
|
|
596
|
+
padding-left: 0;
|
|
597
|
+
margin-left: 1rem;
|
|
598
|
+
top: -0.125rem;
|
|
599
|
+
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;
|
|
600
|
+
-webkit-user-select: none;
|
|
601
|
+
-moz-user-select: none;
|
|
602
|
+
user-select: none;
|
|
603
|
+
pointer-events: none;
|
|
731
604
|
}
|
|
732
|
-
.eds-
|
|
605
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
606
|
+
top: 0.375rem;
|
|
607
|
+
font-size: 0.75rem;
|
|
608
|
+
line-height: 0.75rem;
|
|
609
|
+
height: 10px;
|
|
610
|
+
padding: 0;
|
|
611
|
+
margin-left: 1rem;
|
|
612
|
+
}
|
|
613
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
614
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
615
|
+
background: var(--textarea-label-background);
|
|
616
|
+
width: calc(
|
|
617
|
+
100% - 1rem - 1rem - 4px
|
|
618
|
+
);
|
|
619
|
+
}
|
|
620
|
+
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
621
|
+
top: 0.5rem;
|
|
622
|
+
font-size: 0.875rem;
|
|
623
|
+
line-height: 1rem;
|
|
624
|
+
padding: 0;
|
|
625
|
+
margin-left: 1rem;
|
|
626
|
+
}
|
|
627
|
+
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
628
|
+
color: #aeb7e2;
|
|
629
|
+
}
|
|
630
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
631
|
+
font-size: 1.5rem;
|
|
632
|
+
line-height: 2.25rem;
|
|
633
|
+
height: 4rem;
|
|
634
|
+
}
|
|
635
|
+
.eds-input-group__label--filled {
|
|
636
|
+
top: 0.375rem;
|
|
637
|
+
font-size: 0.75rem;
|
|
638
|
+
line-height: 0.75rem;
|
|
639
|
+
height: 10px;
|
|
640
|
+
padding: 0;
|
|
641
|
+
margin-left: 1rem;
|
|
642
|
+
}
|
|
643
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
644
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
645
|
+
background: var(--textarea-label-background);
|
|
646
|
+
width: calc(
|
|
647
|
+
100% - 1rem - 1rem - 4px
|
|
648
|
+
);
|
|
649
|
+
}
|
|
650
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
651
|
+
top: 0.5rem;
|
|
652
|
+
font-size: 0.875rem;
|
|
653
|
+
line-height: 1rem;
|
|
654
|
+
padding: 0;
|
|
655
|
+
margin-left: 1rem;
|
|
656
|
+
}
|
|
657
|
+
.eds-input-group__label-tooltip-icon {
|
|
658
|
+
color: #0082b9;
|
|
659
|
+
padding-left: 0.25rem;
|
|
660
|
+
padding-right: 0.25rem;
|
|
733
661
|
display: flex;
|
|
734
662
|
align-items: center;
|
|
663
|
+
cursor: help;
|
|
664
|
+
font-size: 1rem;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
668
|
+
top: 0.375rem;
|
|
669
|
+
font-size: 0.75rem;
|
|
670
|
+
line-height: 0.75rem;
|
|
671
|
+
height: 10px;
|
|
672
|
+
padding: 0;
|
|
673
|
+
margin-left: 1rem;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
677
|
+
top: 0.375rem;
|
|
678
|
+
font-size: 0.75rem;
|
|
679
|
+
line-height: 0.75rem;
|
|
680
|
+
height: 10px;
|
|
681
|
+
padding: 0;
|
|
682
|
+
margin-left: 1rem;
|
|
735
683
|
}
|
|
736
|
-
.eds-
|
|
737
|
-
|
|
684
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
685
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
686
|
+
background: var(--textarea-label-background);
|
|
687
|
+
width: calc(
|
|
688
|
+
100% - 1rem - 1rem - 4px
|
|
689
|
+
);
|
|
738
690
|
}
|
|
739
|
-
.eds-
|
|
740
|
-
|
|
741
|
-
|
|
691
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
692
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
693
|
+
background: var(--textarea-label-background);
|
|
694
|
+
width: calc(
|
|
695
|
+
100% - 1rem - 1rem - 4px
|
|
696
|
+
);
|
|
742
697
|
}
|
|
743
|
-
|
|
744
|
-
.
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
width: 1px;
|
|
698
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
699
|
+
top: 0.5rem;
|
|
700
|
+
font-size: 0.875rem;
|
|
701
|
+
line-height: 1rem;
|
|
702
|
+
padding: 0;
|
|
703
|
+
margin-left: 1rem;
|
|
750
704
|
}
|
|
751
|
-
.eds-
|
|
752
|
-
|
|
705
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
706
|
+
top: 0.5rem;
|
|
707
|
+
font-size: 0.875rem;
|
|
708
|
+
line-height: 1rem;
|
|
709
|
+
padding: 0;
|
|
710
|
+
margin-left: 1rem;
|
|
753
711
|
}
|
|
754
712
|
/* DO NOT CHANGE!*/
|
|
755
713
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -841,95 +799,6 @@
|
|
|
841
799
|
}
|
|
842
800
|
/* DO NOT CHANGE!*/
|
|
843
801
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
844
|
-
textarea.eds-form-control.eds-textarea {
|
|
845
|
-
min-height: 7.75rem;
|
|
846
|
-
resize: vertical;
|
|
847
|
-
line-height: 1.5rem;
|
|
848
|
-
}
|
|
849
|
-
/* DO NOT CHANGE!*/
|
|
850
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
851
|
-
.eds-segmented-choice {
|
|
852
|
-
display: block;
|
|
853
|
-
flex: 1 1 0px;
|
|
854
|
-
}
|
|
855
|
-
.eds-segmented-choice .eds-base-segmented {
|
|
856
|
-
--background-color: transparent;
|
|
857
|
-
background-color: var(--background-color);
|
|
858
|
-
border-radius: 0.25rem;
|
|
859
|
-
color: inherit;
|
|
860
|
-
cursor: pointer;
|
|
861
|
-
font-size: 0.875rem;
|
|
862
|
-
height: 1.5rem;
|
|
863
|
-
line-height: 1.25rem;
|
|
864
|
-
margin: 0.25rem;
|
|
865
|
-
outline-color: transparent;
|
|
866
|
-
padding: calc(0.25rem/ 2) 0.75rem;
|
|
867
|
-
text-align: center;
|
|
868
|
-
-webkit-user-select: none;
|
|
869
|
-
-moz-user-select: none;
|
|
870
|
-
user-select: none;
|
|
871
|
-
}
|
|
872
|
-
.eds-segmented-choice .eds-base-segmented--large {
|
|
873
|
-
font-size: 1rem;
|
|
874
|
-
height: 2.5rem;
|
|
875
|
-
line-height: 1.5rem;
|
|
876
|
-
padding: 0.5rem 0.75rem;
|
|
877
|
-
}
|
|
878
|
-
.eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
879
|
-
--background-color: #ebebf1;
|
|
880
|
-
}
|
|
881
|
-
.eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
882
|
-
--background-color: #54568c;
|
|
883
|
-
}
|
|
884
|
-
.eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
885
|
-
--background-color: #ebebf1;
|
|
886
|
-
}
|
|
887
|
-
.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
888
|
-
--background-color: #d1d4e3;
|
|
889
|
-
}
|
|
890
|
-
.eds-segmented-choice input {
|
|
891
|
-
-webkit-appearance: none;
|
|
892
|
-
-moz-appearance: none;
|
|
893
|
-
appearance: none;
|
|
894
|
-
position: absolute;
|
|
895
|
-
opacity: 0;
|
|
896
|
-
height: 0;
|
|
897
|
-
width: 0;
|
|
898
|
-
}
|
|
899
|
-
.eds-segmented-choice input:checked + .eds-base-segmented {
|
|
900
|
-
--background-color: #ffffff;
|
|
901
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
902
|
-
}
|
|
903
|
-
.eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
|
|
904
|
-
--background-color: #ffffff;
|
|
905
|
-
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
906
|
-
color: #181c56;
|
|
907
|
-
}
|
|
908
|
-
.eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
909
|
-
box-shadow: inset 0 0 0 0.0625rem #d1d4e3, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
|
|
910
|
-
}
|
|
911
|
-
.eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
912
|
-
box-shadow: inset 0 0 0 0.0625rem #393d79, inset 0 0 0 calc(0.125rem + 0.0625rem) #ffffff;
|
|
913
|
-
}
|
|
914
|
-
.eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
915
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
|
|
916
|
-
}
|
|
917
|
-
.eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
918
|
-
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
|
|
919
|
-
}
|
|
920
|
-
/* DO NOT CHANGE!*/
|
|
921
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
922
|
-
.eds-segmented-control {
|
|
923
|
-
margin-top: 0.25rem;
|
|
924
|
-
display: flex;
|
|
925
|
-
background: #d1d4e3;
|
|
926
|
-
border-radius: 0.5rem;
|
|
927
|
-
}
|
|
928
|
-
.eds-contrast .eds-segmented-control {
|
|
929
|
-
background: #393d79;
|
|
930
|
-
}
|
|
931
|
-
/* DO NOT CHANGE!*/
|
|
932
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
933
802
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
934
803
|
border-color: #181c56;
|
|
935
804
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
@@ -1093,3 +962,132 @@ input:disabled + .eds-input-panel__container {
|
|
|
1093
962
|
margin-top: 0.25rem;
|
|
1094
963
|
word-wrap: break-word;
|
|
1095
964
|
}
|
|
965
|
+
/* DO NOT CHANGE!*/
|
|
966
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
967
|
+
textarea.eds-form-control.eds-textarea {
|
|
968
|
+
min-height: 7.75rem;
|
|
969
|
+
resize: vertical;
|
|
970
|
+
line-height: 1.5rem;
|
|
971
|
+
}
|
|
972
|
+
/* DO NOT CHANGE!*/
|
|
973
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
974
|
+
.eds-textfield__clear-button {
|
|
975
|
+
background: none;
|
|
976
|
+
border: none;
|
|
977
|
+
border-radius: 50%;
|
|
978
|
+
color: inherit;
|
|
979
|
+
cursor: pointer;
|
|
980
|
+
display: flex;
|
|
981
|
+
font: inherit;
|
|
982
|
+
font-size: 1rem;
|
|
983
|
+
line-height: 1rem;
|
|
984
|
+
padding: 0.5rem;
|
|
985
|
+
margin-right: -0.75rem;
|
|
986
|
+
}
|
|
987
|
+
.eds-textfield__clear-button-wrapper {
|
|
988
|
+
display: flex;
|
|
989
|
+
align-items: center;
|
|
990
|
+
}
|
|
991
|
+
.eds-textfield__clear-button:hover {
|
|
992
|
+
background: #f3f3f3;
|
|
993
|
+
}
|
|
994
|
+
.eds-textfield__clear-button:focus {
|
|
995
|
+
outline: none;
|
|
996
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
.eds-textfield__divider {
|
|
1000
|
+
content: "";
|
|
1001
|
+
display: block;
|
|
1002
|
+
background-color: #e9e9e9;
|
|
1003
|
+
height: 1.5rem;
|
|
1004
|
+
width: 1px;
|
|
1005
|
+
}
|
|
1006
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
1007
|
+
background-color: #8285a8;
|
|
1008
|
+
}
|
|
1009
|
+
/* DO NOT CHANGE!*/
|
|
1010
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1011
|
+
.eds-segmented-choice {
|
|
1012
|
+
display: block;
|
|
1013
|
+
flex: 1 1 0px;
|
|
1014
|
+
}
|
|
1015
|
+
.eds-segmented-choice .eds-base-segmented {
|
|
1016
|
+
--background-color: transparent;
|
|
1017
|
+
background-color: var(--background-color);
|
|
1018
|
+
border-radius: 0.25rem;
|
|
1019
|
+
color: inherit;
|
|
1020
|
+
cursor: pointer;
|
|
1021
|
+
font-size: 0.875rem;
|
|
1022
|
+
height: 1.5rem;
|
|
1023
|
+
line-height: 1.25rem;
|
|
1024
|
+
margin: 0.25rem;
|
|
1025
|
+
outline-color: transparent;
|
|
1026
|
+
padding: calc(0.25rem/ 2) 0.75rem;
|
|
1027
|
+
text-align: center;
|
|
1028
|
+
-webkit-user-select: none;
|
|
1029
|
+
-moz-user-select: none;
|
|
1030
|
+
user-select: none;
|
|
1031
|
+
}
|
|
1032
|
+
.eds-segmented-choice .eds-base-segmented--large {
|
|
1033
|
+
font-size: 1rem;
|
|
1034
|
+
height: 2.5rem;
|
|
1035
|
+
line-height: 1.5rem;
|
|
1036
|
+
padding: 0.5rem 0.75rem;
|
|
1037
|
+
}
|
|
1038
|
+
.eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1039
|
+
--background-color: #ebebf1;
|
|
1040
|
+
}
|
|
1041
|
+
.eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1042
|
+
--background-color: #54568c;
|
|
1043
|
+
}
|
|
1044
|
+
.eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1045
|
+
--background-color: #ebebf1;
|
|
1046
|
+
}
|
|
1047
|
+
.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1048
|
+
--background-color: #d1d4e3;
|
|
1049
|
+
}
|
|
1050
|
+
.eds-segmented-choice input {
|
|
1051
|
+
-webkit-appearance: none;
|
|
1052
|
+
-moz-appearance: none;
|
|
1053
|
+
appearance: none;
|
|
1054
|
+
position: absolute;
|
|
1055
|
+
opacity: 0;
|
|
1056
|
+
height: 0;
|
|
1057
|
+
width: 0;
|
|
1058
|
+
}
|
|
1059
|
+
.eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1060
|
+
--background-color: #ffffff;
|
|
1061
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
1062
|
+
}
|
|
1063
|
+
.eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1064
|
+
--background-color: #ffffff;
|
|
1065
|
+
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
1066
|
+
color: #181c56;
|
|
1067
|
+
}
|
|
1068
|
+
.eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1069
|
+
box-shadow: inset 0 0 0 0.0625rem #d1d4e3, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
|
|
1070
|
+
}
|
|
1071
|
+
.eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1072
|
+
box-shadow: inset 0 0 0 0.0625rem #393d79, inset 0 0 0 calc(0.125rem + 0.0625rem) #ffffff;
|
|
1073
|
+
}
|
|
1074
|
+
.eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1075
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
|
|
1076
|
+
}
|
|
1077
|
+
.eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1078
|
+
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
|
|
1079
|
+
}
|
|
1080
|
+
/* DO NOT CHANGE!*/
|
|
1081
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1082
|
+
.eds-segmented-control {
|
|
1083
|
+
margin-top: 0.25rem;
|
|
1084
|
+
display: flex;
|
|
1085
|
+
background: #d1d4e3;
|
|
1086
|
+
border-radius: 0.5rem;
|
|
1087
|
+
}
|
|
1088
|
+
.eds-contrast .eds-segmented-control {
|
|
1089
|
+
background: #393d79;
|
|
1090
|
+
}
|
|
1091
|
+
:root {
|
|
1092
|
+
--eds-form: 1;
|
|
1093
|
+
}
|