@entur/form 8.0.2 → 8.1.0-RC.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BaseFormControl.d.ts +2 -0
- package/dist/TextArea.d.ts +9 -0
- package/dist/TextField.d.ts +9 -0
- package/dist/form.cjs.development.js +14 -4
- 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 +14 -4
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +347 -347
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,165 @@
|
|
|
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
|
+
.eds-fieldset {
|
|
157
|
+
margin: 0;
|
|
158
|
+
padding: 0;
|
|
159
|
+
border: 0;
|
|
160
|
+
}
|
|
161
|
+
/* DO NOT CHANGE!*/
|
|
162
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
163
|
.eds-form-control__field-and-feedback-text {
|
|
4
164
|
display: flex;
|
|
5
165
|
flex-direction: column;
|
|
@@ -207,84 +367,6 @@
|
|
|
207
367
|
margin-right: 0;
|
|
208
368
|
margin-left: 0.75rem;
|
|
209
369
|
}
|
|
210
|
-
.eds-fieldset {
|
|
211
|
-
margin: 0;
|
|
212
|
-
padding: 0;
|
|
213
|
-
border: 0;
|
|
214
|
-
}
|
|
215
|
-
/* DO NOT CHANGE!*/
|
|
216
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
217
|
-
.eds-feedback-text {
|
|
218
|
-
display: flex;
|
|
219
|
-
align-items: center;
|
|
220
|
-
margin-top: 0.25rem;
|
|
221
|
-
}
|
|
222
|
-
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
223
|
-
padding-left: calc(1rem + 0.125rem);
|
|
224
|
-
}
|
|
225
|
-
.eds-feedback-text__text {
|
|
226
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
227
|
-
}
|
|
228
|
-
.eds-contrast .eds-feedback-text__text {
|
|
229
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.eds-feedback-text__icon {
|
|
233
|
-
font-size: 1.5rem;
|
|
234
|
-
min-height: 1.5rem;
|
|
235
|
-
min-width: 1.5rem;
|
|
236
|
-
padding-right: 0.5rem;
|
|
237
|
-
position: relative;
|
|
238
|
-
top: -0.1rem;
|
|
239
|
-
}
|
|
240
|
-
.eds-feedback-text__icon--success {
|
|
241
|
-
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
242
|
-
}
|
|
243
|
-
.eds-feedback-text__icon--success circle {
|
|
244
|
-
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
245
|
-
}
|
|
246
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
247
|
-
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
248
|
-
}
|
|
249
|
-
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
250
|
-
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
251
|
-
}
|
|
252
|
-
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
253
|
-
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
254
|
-
}
|
|
255
|
-
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
256
|
-
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
257
|
-
}
|
|
258
|
-
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
259
|
-
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
260
|
-
}
|
|
261
|
-
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
262
|
-
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
263
|
-
}
|
|
264
|
-
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
265
|
-
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
266
|
-
}
|
|
267
|
-
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
268
|
-
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
269
|
-
}
|
|
270
|
-
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
271
|
-
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
272
|
-
}
|
|
273
|
-
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
274
|
-
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
275
|
-
}
|
|
276
|
-
.eds-feedback-text__icon--warning {
|
|
277
|
-
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
278
|
-
}
|
|
279
|
-
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
280
|
-
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
281
|
-
}
|
|
282
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
283
|
-
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
284
|
-
}
|
|
285
|
-
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
286
|
-
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
287
|
-
}
|
|
288
370
|
/* DO NOT CHANGE!*/
|
|
289
371
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
290
372
|
.eds-input-group {
|
|
@@ -388,125 +470,6 @@
|
|
|
388
470
|
}
|
|
389
471
|
/* DO NOT CHANGE!*/
|
|
390
472
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
391
|
-
.eds-switch {
|
|
392
|
-
cursor: pointer;
|
|
393
|
-
-webkit-user-select: none;
|
|
394
|
-
-moz-user-select: none;
|
|
395
|
-
user-select: none;
|
|
396
|
-
padding: 0.5rem 0;
|
|
397
|
-
width: -moz-fit-content;
|
|
398
|
-
width: fit-content;
|
|
399
|
-
}
|
|
400
|
-
.eds-switch input {
|
|
401
|
-
opacity: 0;
|
|
402
|
-
pointer-events: none;
|
|
403
|
-
position: absolute;
|
|
404
|
-
}
|
|
405
|
-
.eds-switch--right {
|
|
406
|
-
display: flex;
|
|
407
|
-
flex-direction: row;
|
|
408
|
-
align-items: center;
|
|
409
|
-
}
|
|
410
|
-
.eds-switch--bottom {
|
|
411
|
-
display: flex;
|
|
412
|
-
flex-direction: column;
|
|
413
|
-
align-items: center;
|
|
414
|
-
}
|
|
415
|
-
.eds-switch__circle {
|
|
416
|
-
border-radius: 50%;
|
|
417
|
-
height: 1.25rem;
|
|
418
|
-
width: 1.25rem;
|
|
419
|
-
content: "";
|
|
420
|
-
display: flex;
|
|
421
|
-
align-items: center;
|
|
422
|
-
justify-content: center;
|
|
423
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
424
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
425
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
426
|
-
top: 0.125rem;
|
|
427
|
-
left: 0.125rem;
|
|
428
|
-
position: relative;
|
|
429
|
-
}
|
|
430
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
431
|
-
height: 1.75rem;
|
|
432
|
-
width: 1.75rem;
|
|
433
|
-
}
|
|
434
|
-
.eds-contrast .eds-switch__circle {
|
|
435
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
436
|
-
}
|
|
437
|
-
.eds-switch__switch {
|
|
438
|
-
position: relative;
|
|
439
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
440
|
-
content: "";
|
|
441
|
-
display: block;
|
|
442
|
-
transition: background-color 0.1s ease-in-out;
|
|
443
|
-
height: 1.5rem;
|
|
444
|
-
width: 3rem;
|
|
445
|
-
border-radius: 1.5rem;
|
|
446
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
447
|
-
}
|
|
448
|
-
.eds-contrast .eds-switch__switch {
|
|
449
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
450
|
-
}
|
|
451
|
-
.eds-switch--right .eds-switch__switch {
|
|
452
|
-
margin-right: 0.75rem;
|
|
453
|
-
}
|
|
454
|
-
.eds-switch__switch svg g,
|
|
455
|
-
.eds-switch__switch path {
|
|
456
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
457
|
-
transition: fill ease-in-out 0.1s;
|
|
458
|
-
}
|
|
459
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
460
|
-
.eds-contrast .eds-switch__switch path {
|
|
461
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
462
|
-
}
|
|
463
|
-
:checked + .eds-switch__switch {
|
|
464
|
-
background-color: var(--eds-switch-color);
|
|
465
|
-
}
|
|
466
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
467
|
-
left: 1.625rem;
|
|
468
|
-
}
|
|
469
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
470
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
471
|
-
fill: var(--eds-switch-color);
|
|
472
|
-
}
|
|
473
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
474
|
-
background-color: var(--eds-switch-contrast-color);
|
|
475
|
-
}
|
|
476
|
-
:focus + .eds-switch__switch {
|
|
477
|
-
outline: 2px solid #181c56;
|
|
478
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
479
|
-
outline-offset: 0.125rem;
|
|
480
|
-
}
|
|
481
|
-
.eds-contrast :focus + .eds-switch__switch {
|
|
482
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
483
|
-
}
|
|
484
|
-
.eds-switch__switch--large {
|
|
485
|
-
width: 3.75rem;
|
|
486
|
-
height: 2rem;
|
|
487
|
-
border-radius: 3.75rem;
|
|
488
|
-
}
|
|
489
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
490
|
-
left: 1.875rem;
|
|
491
|
-
}
|
|
492
|
-
.eds-switch__switch--large svg {
|
|
493
|
-
position: relative;
|
|
494
|
-
right: 0.05rem;
|
|
495
|
-
}
|
|
496
|
-
.eds-switch__label--large--right {
|
|
497
|
-
font-size: 1rem;
|
|
498
|
-
}
|
|
499
|
-
.eds-switch__label--large--bottom {
|
|
500
|
-
font-size: 0.875rem;
|
|
501
|
-
}
|
|
502
|
-
.eds-switch__label--medium--right {
|
|
503
|
-
font-size: 0.875rem;
|
|
504
|
-
}
|
|
505
|
-
.eds-switch__label--medium--bottom {
|
|
506
|
-
font-size: 0.75rem;
|
|
507
|
-
}
|
|
508
|
-
/* DO NOT CHANGE!*/
|
|
509
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
510
473
|
.eds-form-component--radio__container {
|
|
511
474
|
display: flex;
|
|
512
475
|
justify-content: center;
|
|
@@ -557,190 +520,227 @@
|
|
|
557
520
|
align-items: center;
|
|
558
521
|
justify-content: center;
|
|
559
522
|
}
|
|
560
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
561
|
-
background-color: var(--components-form-radio-contrast-fill-default);
|
|
562
|
-
border-color: var(--components-form-radio-contrast-border);
|
|
523
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
524
|
+
background-color: var(--components-form-radio-contrast-fill-default);
|
|
525
|
+
border-color: var(--components-form-radio-contrast-border);
|
|
526
|
+
}
|
|
527
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
528
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
529
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
530
|
+
cursor: not-allowed;
|
|
531
|
+
}
|
|
532
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
533
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
534
|
+
}
|
|
535
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
536
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
537
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
538
|
+
}
|
|
539
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
540
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
541
|
+
}
|
|
542
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
543
|
+
display: block;
|
|
544
|
+
width: 0;
|
|
545
|
+
height: 0;
|
|
546
|
+
border-radius: 50%;
|
|
547
|
+
background-color: var(--components-form-radio-standard-fill-selected);
|
|
548
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
549
|
+
}
|
|
550
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
551
|
+
background-color: var(--components-form-radio-contrast-icon);
|
|
552
|
+
}
|
|
553
|
+
/* DO NOT CHANGE!*/
|
|
554
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
555
|
+
.eds-feedback-text {
|
|
556
|
+
display: flex;
|
|
557
|
+
align-items: center;
|
|
558
|
+
margin-top: 0.25rem;
|
|
559
|
+
}
|
|
560
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
561
|
+
padding-left: calc(1rem + 0.125rem);
|
|
562
|
+
}
|
|
563
|
+
.eds-feedback-text__text {
|
|
564
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
565
|
+
}
|
|
566
|
+
.eds-contrast .eds-feedback-text__text {
|
|
567
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
.eds-feedback-text__icon {
|
|
571
|
+
font-size: 1.5rem;
|
|
572
|
+
min-height: 1.5rem;
|
|
573
|
+
min-width: 1.5rem;
|
|
574
|
+
padding-right: 0.5rem;
|
|
575
|
+
position: relative;
|
|
576
|
+
top: -0.1rem;
|
|
577
|
+
}
|
|
578
|
+
.eds-feedback-text__icon--success {
|
|
579
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
580
|
+
}
|
|
581
|
+
.eds-feedback-text__icon--success circle {
|
|
582
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
583
|
+
}
|
|
584
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
585
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
586
|
+
}
|
|
587
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
588
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
589
|
+
}
|
|
590
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
591
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
592
|
+
}
|
|
593
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
594
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
595
|
+
}
|
|
596
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
597
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
598
|
+
}
|
|
599
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
600
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
601
|
+
}
|
|
602
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
603
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
604
|
+
}
|
|
605
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
606
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
563
607
|
}
|
|
564
|
-
.eds-
|
|
565
|
-
|
|
566
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
567
|
-
cursor: not-allowed;
|
|
608
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
609
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
568
610
|
}
|
|
569
|
-
.eds-
|
|
570
|
-
|
|
611
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
612
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
571
613
|
}
|
|
572
|
-
.eds-
|
|
573
|
-
|
|
574
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
614
|
+
.eds-feedback-text__icon--warning {
|
|
615
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
575
616
|
}
|
|
576
|
-
.eds-
|
|
577
|
-
|
|
617
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
618
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
578
619
|
}
|
|
579
|
-
.eds-
|
|
580
|
-
|
|
581
|
-
width: 0;
|
|
582
|
-
height: 0;
|
|
583
|
-
border-radius: 50%;
|
|
584
|
-
background-color: var(--components-form-radio-standard-fill-selected);
|
|
585
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
620
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
621
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
586
622
|
}
|
|
587
|
-
.eds-contrast .eds-
|
|
588
|
-
|
|
623
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
624
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
589
625
|
}
|
|
590
626
|
/* DO NOT CHANGE!*/
|
|
591
627
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
592
|
-
.eds-
|
|
593
|
-
display: flex;
|
|
594
|
-
align-items: center;
|
|
595
|
-
position: relative;
|
|
596
|
-
-webkit-appearance: none;
|
|
597
|
-
-moz-appearance: none;
|
|
598
|
-
appearance: none;
|
|
628
|
+
.eds-switch {
|
|
599
629
|
cursor: pointer;
|
|
600
630
|
-webkit-user-select: none;
|
|
601
631
|
-moz-user-select: none;
|
|
602
632
|
user-select: none;
|
|
633
|
+
padding: 0.5rem 0;
|
|
603
634
|
width: -moz-fit-content;
|
|
604
635
|
width: fit-content;
|
|
605
|
-
margin: 0.5rem 0;
|
|
606
636
|
}
|
|
607
|
-
.eds-
|
|
608
|
-
height: -moz-fit-content;
|
|
609
|
-
height: fit-content;
|
|
610
|
-
}
|
|
611
|
-
.eds-checkbox__container input {
|
|
612
|
-
position: absolute;
|
|
637
|
+
.eds-switch input {
|
|
613
638
|
opacity: 0;
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
}
|
|
617
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
618
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
619
|
-
}
|
|
620
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
621
|
-
visibility: visible;
|
|
622
|
-
}
|
|
623
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
624
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
625
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
626
|
-
}
|
|
627
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
628
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
629
|
-
}
|
|
630
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
631
|
-
opacity: 0.5;
|
|
639
|
+
pointer-events: none;
|
|
640
|
+
position: absolute;
|
|
632
641
|
}
|
|
633
|
-
.eds-
|
|
634
|
-
|
|
642
|
+
.eds-switch--right {
|
|
643
|
+
display: flex;
|
|
644
|
+
flex-direction: row;
|
|
645
|
+
align-items: center;
|
|
635
646
|
}
|
|
636
|
-
.eds-
|
|
637
|
-
|
|
647
|
+
.eds-switch--bottom {
|
|
648
|
+
display: flex;
|
|
649
|
+
flex-direction: column;
|
|
650
|
+
align-items: center;
|
|
638
651
|
}
|
|
639
|
-
.eds-
|
|
640
|
-
|
|
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;
|
|
641
666
|
}
|
|
642
|
-
.eds-
|
|
643
|
-
|
|
667
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
668
|
+
height: 1.75rem;
|
|
669
|
+
width: 1.75rem;
|
|
644
670
|
}
|
|
645
|
-
.eds-contrast .eds-
|
|
646
|
-
|
|
671
|
+
.eds-contrast .eds-switch__circle {
|
|
672
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
647
673
|
}
|
|
648
|
-
.eds-
|
|
649
|
-
|
|
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);
|
|
650
684
|
}
|
|
651
|
-
.eds-contrast .eds-
|
|
652
|
-
|
|
685
|
+
.eds-contrast .eds-switch__switch {
|
|
686
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
653
687
|
}
|
|
654
|
-
.eds-
|
|
655
|
-
|
|
656
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
688
|
+
.eds-switch--right .eds-switch__switch {
|
|
689
|
+
margin-right: 0.75rem;
|
|
657
690
|
}
|
|
658
|
-
.eds-
|
|
659
|
-
|
|
660
|
-
|
|
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;
|
|
661
695
|
}
|
|
662
|
-
.eds-
|
|
663
|
-
.eds-
|
|
664
|
-
|
|
665
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
696
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
697
|
+
.eds-contrast .eds-switch__switch path {
|
|
698
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
666
699
|
}
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
700
|
+
:checked + .eds-switch__switch {
|
|
701
|
+
background-color: var(--eds-switch-color);
|
|
670
702
|
}
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
703
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
704
|
+
left: 1.625rem;
|
|
674
705
|
}
|
|
675
|
-
.eds-
|
|
676
|
-
.eds-
|
|
677
|
-
|
|
706
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
707
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
708
|
+
fill: var(--eds-switch-color);
|
|
678
709
|
}
|
|
679
|
-
.eds-
|
|
680
|
-
|
|
681
|
-
outline: 2px solid #181c56;
|
|
682
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
683
|
-
outline-offset: 0.125rem;
|
|
710
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
711
|
+
background-color: var(--eds-switch-contrast-color);
|
|
684
712
|
}
|
|
685
|
-
|
|
686
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
713
|
+
:focus + .eds-switch__switch {
|
|
687
714
|
outline: 2px solid #181c56;
|
|
688
715
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
689
716
|
outline-offset: 0.125rem;
|
|
690
717
|
}
|
|
691
|
-
.eds-contrast
|
|
692
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
693
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
694
|
-
}
|
|
695
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
696
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
718
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
697
719
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
698
720
|
}
|
|
699
|
-
.eds-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
opacity: 0.5;
|
|
721
|
+
.eds-switch__switch--large {
|
|
722
|
+
width: 3.75rem;
|
|
723
|
+
height: 2rem;
|
|
724
|
+
border-radius: 3.75rem;
|
|
704
725
|
}
|
|
705
|
-
.eds-
|
|
706
|
-
|
|
726
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
727
|
+
left: 1.875rem;
|
|
707
728
|
}
|
|
708
|
-
.eds-
|
|
709
|
-
box-sizing: border-box;
|
|
710
|
-
display: inline-flex;
|
|
711
|
-
justify-content: center;
|
|
712
|
-
align-items: center;
|
|
729
|
+
.eds-switch__switch--large svg {
|
|
713
730
|
position: relative;
|
|
714
|
-
|
|
715
|
-
height: 1.25rem;
|
|
716
|
-
width: 1.25rem;
|
|
717
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
718
|
-
border-radius: 0.125rem;
|
|
719
|
-
background-color: transparent;
|
|
720
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
721
|
-
}
|
|
722
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
723
|
-
margin-right: 0;
|
|
731
|
+
right: 0.05rem;
|
|
724
732
|
}
|
|
725
|
-
.eds-
|
|
726
|
-
|
|
733
|
+
.eds-switch__label--large--right {
|
|
734
|
+
font-size: 1rem;
|
|
727
735
|
}
|
|
728
|
-
.eds-
|
|
729
|
-
|
|
730
|
-
width: 1rem;
|
|
731
|
-
visibility: hidden;
|
|
736
|
+
.eds-switch__label--large--bottom {
|
|
737
|
+
font-size: 0.875rem;
|
|
732
738
|
}
|
|
733
|
-
.eds-
|
|
734
|
-
|
|
735
|
-
stroke-dasharray: 48;
|
|
736
|
-
stroke-dashoffset: 48;
|
|
737
|
-
stroke-width: 0.375rem;
|
|
739
|
+
.eds-switch__label--medium--right {
|
|
740
|
+
font-size: 0.875rem;
|
|
738
741
|
}
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
100% {
|
|
742
|
-
stroke-dashoffset: 0;
|
|
743
|
-
}
|
|
742
|
+
.eds-switch__label--medium--bottom {
|
|
743
|
+
font-size: 0.75rem;
|
|
744
744
|
}
|
|
745
745
|
/* DO NOT CHANGE!*/
|
|
746
746
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -954,17 +954,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
954
954
|
}
|
|
955
955
|
/* DO NOT CHANGE!*/
|
|
956
956
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
957
|
-
.eds-segmented-control {
|
|
958
|
-
margin-top: 0.25rem;
|
|
959
|
-
display: flex;
|
|
960
|
-
background: var(--components-form-segmentedcontrol-standard-background);
|
|
961
|
-
border-radius: 0.5rem;
|
|
962
|
-
}
|
|
963
|
-
.eds-contrast .eds-segmented-control {
|
|
964
|
-
background: var(--components-form-segmentedcontrol-contrast-background);
|
|
965
|
-
}
|
|
966
|
-
/* DO NOT CHANGE!*/
|
|
967
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
968
957
|
.eds-segmented-choice {
|
|
969
958
|
display: block;
|
|
970
959
|
flex: 1 1 0px;
|
|
@@ -1047,6 +1036,17 @@ textarea.eds-form-control.eds-textarea {
|
|
|
1047
1036
|
}
|
|
1048
1037
|
/* DO NOT CHANGE!*/
|
|
1049
1038
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1039
|
+
.eds-segmented-control {
|
|
1040
|
+
margin-top: 0.25rem;
|
|
1041
|
+
display: flex;
|
|
1042
|
+
background: var(--components-form-segmentedcontrol-standard-background);
|
|
1043
|
+
border-radius: 0.5rem;
|
|
1044
|
+
}
|
|
1045
|
+
.eds-contrast .eds-segmented-control {
|
|
1046
|
+
background: var(--components-form-segmentedcontrol-contrast-background);
|
|
1047
|
+
}
|
|
1048
|
+
/* DO NOT CHANGE!*/
|
|
1049
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1050
1050
|
/* DO NOT CHANGE!*/
|
|
1051
1051
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1052
1052
|
/* DO NOT CHANGE!*/
|