@entur/form 8.1.2 → 8.1.3
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 +290 -288
- package/package.json +7 -7
package/dist/styles.css
CHANGED
|
@@ -1,3 +1,163 @@
|
|
|
1
|
+
.eds-fieldset {
|
|
2
|
+
margin: 0;
|
|
3
|
+
padding: 0;
|
|
4
|
+
border: 0;
|
|
5
|
+
}
|
|
6
|
+
/* DO NOT CHANGE!*/
|
|
7
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
8
|
+
.eds-checkbox__container {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
position: relative;
|
|
12
|
+
-webkit-appearance: none;
|
|
13
|
+
-moz-appearance: none;
|
|
14
|
+
appearance: none;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
-webkit-user-select: none;
|
|
17
|
+
-moz-user-select: none;
|
|
18
|
+
user-select: none;
|
|
19
|
+
width: -moz-fit-content;
|
|
20
|
+
width: fit-content;
|
|
21
|
+
margin: 0.5rem 0;
|
|
22
|
+
}
|
|
23
|
+
.eds-checkbox__container--reduced-click-area {
|
|
24
|
+
height: -moz-fit-content;
|
|
25
|
+
height: fit-content;
|
|
26
|
+
}
|
|
27
|
+
.eds-checkbox__container input {
|
|
28
|
+
position: absolute;
|
|
29
|
+
opacity: 0;
|
|
30
|
+
height: 0;
|
|
31
|
+
width: 0;
|
|
32
|
+
}
|
|
33
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
34
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
35
|
+
}
|
|
36
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
37
|
+
visibility: visible;
|
|
38
|
+
}
|
|
39
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
40
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
41
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
42
|
+
}
|
|
43
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
44
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
45
|
+
}
|
|
46
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
47
|
+
opacity: 0.5;
|
|
48
|
+
}
|
|
49
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
50
|
+
opacity: 0.5;
|
|
51
|
+
}
|
|
52
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
53
|
+
opacity: 0.5;
|
|
54
|
+
}
|
|
55
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
56
|
+
opacity: 0.5;
|
|
57
|
+
}
|
|
58
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
59
|
+
opacity: 0.5;
|
|
60
|
+
}
|
|
61
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
62
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
63
|
+
}
|
|
64
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
65
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
66
|
+
}
|
|
67
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
68
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
69
|
+
}
|
|
70
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
71
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
72
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
73
|
+
}
|
|
74
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
75
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
76
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
77
|
+
}
|
|
78
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
79
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
80
|
+
border-color: transparent;
|
|
81
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
82
|
+
}
|
|
83
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
84
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
85
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
86
|
+
}
|
|
87
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
88
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
89
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
90
|
+
}
|
|
91
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
92
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
93
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
94
|
+
}
|
|
95
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
96
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
97
|
+
outline: 2px solid #181c56;
|
|
98
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
99
|
+
outline-offset: 0.125rem;
|
|
100
|
+
}
|
|
101
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
102
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
103
|
+
outline: 2px solid #181c56;
|
|
104
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
105
|
+
outline-offset: 0.125rem;
|
|
106
|
+
}
|
|
107
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
108
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
109
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
110
|
+
}
|
|
111
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
112
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
113
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
114
|
+
}
|
|
115
|
+
.eds-checkbox--disabled {
|
|
116
|
+
pointer-events: none;
|
|
117
|
+
}
|
|
118
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
119
|
+
opacity: 0.5;
|
|
120
|
+
}
|
|
121
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
122
|
+
opacity: 0.5;
|
|
123
|
+
}
|
|
124
|
+
.eds-checkbox__icon {
|
|
125
|
+
box-sizing: border-box;
|
|
126
|
+
display: inline-flex;
|
|
127
|
+
justify-content: center;
|
|
128
|
+
align-items: center;
|
|
129
|
+
position: relative;
|
|
130
|
+
margin-right: 1rem;
|
|
131
|
+
height: 1.25rem;
|
|
132
|
+
width: 1.25rem;
|
|
133
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
134
|
+
border-radius: 0.125rem;
|
|
135
|
+
background-color: transparent;
|
|
136
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
137
|
+
}
|
|
138
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
139
|
+
margin-right: 0;
|
|
140
|
+
}
|
|
141
|
+
.eds-contrast .eds-checkbox__icon {
|
|
142
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
143
|
+
}
|
|
144
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
145
|
+
height: 1rem;
|
|
146
|
+
width: 1rem;
|
|
147
|
+
visibility: hidden;
|
|
148
|
+
}
|
|
149
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
150
|
+
transform-origin: 50% 50%;
|
|
151
|
+
stroke-dasharray: 48;
|
|
152
|
+
stroke-dashoffset: 48;
|
|
153
|
+
stroke-width: 0.375rem;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@keyframes stroke {
|
|
157
|
+
100% {
|
|
158
|
+
stroke-dashoffset: 0;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
1
161
|
/* DO NOT CHANGE!*/
|
|
2
162
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
163
|
.eds-feedback-text {
|
|
@@ -270,170 +430,15 @@
|
|
|
270
430
|
right: -2rem;
|
|
271
431
|
border-radius: 100%;
|
|
272
432
|
color: var(--primary-text-color);
|
|
273
|
-
cursor: pointer;
|
|
274
|
-
}
|
|
275
|
-
.eds-form-control__prepend {
|
|
276
|
-
margin-right: 0.75rem;
|
|
277
|
-
margin-left: 0;
|
|
278
|
-
}
|
|
279
|
-
.eds-form-control__append {
|
|
280
|
-
margin-right: 0;
|
|
281
|
-
margin-left: 0.75rem;
|
|
282
|
-
}
|
|
283
|
-
/* DO NOT CHANGE!*/
|
|
284
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
285
|
-
.eds-checkbox__container {
|
|
286
|
-
display: flex;
|
|
287
|
-
align-items: center;
|
|
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;
|
|
299
|
-
}
|
|
300
|
-
.eds-checkbox__container--reduced-click-area {
|
|
301
|
-
height: -moz-fit-content;
|
|
302
|
-
height: fit-content;
|
|
303
|
-
}
|
|
304
|
-
.eds-checkbox__container input {
|
|
305
|
-
position: absolute;
|
|
306
|
-
opacity: 0;
|
|
307
|
-
height: 0;
|
|
308
|
-
width: 0;
|
|
309
|
-
}
|
|
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);
|
|
312
|
-
}
|
|
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;
|
|
315
|
-
}
|
|
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;
|
|
319
|
-
}
|
|
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);
|
|
322
|
-
}
|
|
323
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
324
|
-
opacity: 0.5;
|
|
325
|
-
}
|
|
326
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
327
|
-
opacity: 0.5;
|
|
328
|
-
}
|
|
329
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
330
|
-
opacity: 0.5;
|
|
331
|
-
}
|
|
332
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
333
|
-
opacity: 0.5;
|
|
334
|
-
}
|
|
335
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
336
|
-
opacity: 0.5;
|
|
337
|
-
}
|
|
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);
|
|
340
|
-
}
|
|
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);
|
|
343
|
-
}
|
|
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);
|
|
346
|
-
}
|
|
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);
|
|
350
|
-
}
|
|
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);
|
|
354
|
-
}
|
|
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);
|
|
359
|
-
}
|
|
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);
|
|
363
|
-
}
|
|
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);
|
|
367
|
-
}
|
|
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;
|
|
433
|
+
cursor: pointer;
|
|
431
434
|
}
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
435
|
+
.eds-form-control__prepend {
|
|
436
|
+
margin-right: 0.75rem;
|
|
437
|
+
margin-left: 0;
|
|
438
|
+
}
|
|
439
|
+
.eds-form-control__append {
|
|
440
|
+
margin-right: 0;
|
|
441
|
+
margin-left: 0.75rem;
|
|
437
442
|
}
|
|
438
443
|
/* DO NOT CHANGE!*/
|
|
439
444
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -620,130 +625,6 @@
|
|
|
620
625
|
}
|
|
621
626
|
/* DO NOT CHANGE!*/
|
|
622
627
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
623
|
-
.eds-switch {
|
|
624
|
-
cursor: pointer;
|
|
625
|
-
-webkit-user-select: none;
|
|
626
|
-
-moz-user-select: none;
|
|
627
|
-
user-select: none;
|
|
628
|
-
padding: 0.5rem 0;
|
|
629
|
-
width: -moz-fit-content;
|
|
630
|
-
width: fit-content;
|
|
631
|
-
}
|
|
632
|
-
.eds-switch input {
|
|
633
|
-
opacity: 0;
|
|
634
|
-
pointer-events: none;
|
|
635
|
-
position: absolute;
|
|
636
|
-
}
|
|
637
|
-
.eds-switch--right {
|
|
638
|
-
display: flex;
|
|
639
|
-
flex-direction: row;
|
|
640
|
-
align-items: center;
|
|
641
|
-
}
|
|
642
|
-
.eds-switch--bottom {
|
|
643
|
-
display: flex;
|
|
644
|
-
flex-direction: column;
|
|
645
|
-
align-items: center;
|
|
646
|
-
}
|
|
647
|
-
.eds-switch__circle {
|
|
648
|
-
border-radius: 50%;
|
|
649
|
-
height: 1.25rem;
|
|
650
|
-
width: 1.25rem;
|
|
651
|
-
content: "";
|
|
652
|
-
display: flex;
|
|
653
|
-
align-items: center;
|
|
654
|
-
justify-content: center;
|
|
655
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
656
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
657
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
658
|
-
top: 0.125rem;
|
|
659
|
-
left: 0.125rem;
|
|
660
|
-
position: relative;
|
|
661
|
-
}
|
|
662
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
663
|
-
height: 1.75rem;
|
|
664
|
-
width: 1.75rem;
|
|
665
|
-
}
|
|
666
|
-
.eds-contrast .eds-switch__circle {
|
|
667
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
668
|
-
}
|
|
669
|
-
.eds-switch__switch {
|
|
670
|
-
position: relative;
|
|
671
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
672
|
-
content: "";
|
|
673
|
-
display: block;
|
|
674
|
-
transition: background-color 0.1s ease-in-out;
|
|
675
|
-
height: 1.5rem;
|
|
676
|
-
width: 3rem;
|
|
677
|
-
border-radius: 1.5rem;
|
|
678
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
679
|
-
}
|
|
680
|
-
.eds-contrast .eds-switch__switch {
|
|
681
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
682
|
-
}
|
|
683
|
-
.eds-switch--right .eds-switch__switch {
|
|
684
|
-
margin-right: 0.75rem;
|
|
685
|
-
}
|
|
686
|
-
.eds-switch__switch svg g,
|
|
687
|
-
.eds-switch__switch path {
|
|
688
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
689
|
-
transition: fill ease-in-out 0.1s;
|
|
690
|
-
}
|
|
691
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
692
|
-
.eds-contrast .eds-switch__switch path {
|
|
693
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
694
|
-
}
|
|
695
|
-
:checked + .eds-switch__switch {
|
|
696
|
-
background-color: var(--eds-switch-color);
|
|
697
|
-
}
|
|
698
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
699
|
-
left: 1.625rem;
|
|
700
|
-
}
|
|
701
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
702
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
703
|
-
fill: var(--eds-switch-color);
|
|
704
|
-
}
|
|
705
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
706
|
-
background-color: var(--eds-switch-contrast-color);
|
|
707
|
-
}
|
|
708
|
-
:focus + .eds-switch__switch {
|
|
709
|
-
outline: 2px solid #181c56;
|
|
710
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
711
|
-
outline-offset: 0.125rem;
|
|
712
|
-
}
|
|
713
|
-
.eds-contrast :focus + .eds-switch__switch {
|
|
714
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
715
|
-
}
|
|
716
|
-
.eds-switch__switch--large {
|
|
717
|
-
width: 3.75rem;
|
|
718
|
-
height: 2rem;
|
|
719
|
-
border-radius: 3.75rem;
|
|
720
|
-
}
|
|
721
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
722
|
-
left: 1.875rem;
|
|
723
|
-
}
|
|
724
|
-
.eds-switch__switch--large svg {
|
|
725
|
-
position: relative;
|
|
726
|
-
right: 0.05rem;
|
|
727
|
-
}
|
|
728
|
-
.eds-switch__label--large--right {
|
|
729
|
-
font-size: 1rem;
|
|
730
|
-
}
|
|
731
|
-
.eds-switch__label--large--bottom {
|
|
732
|
-
font-size: 0.875rem;
|
|
733
|
-
}
|
|
734
|
-
.eds-switch__label--medium--right {
|
|
735
|
-
font-size: 0.875rem;
|
|
736
|
-
}
|
|
737
|
-
.eds-switch__label--medium--bottom {
|
|
738
|
-
font-size: 0.75rem;
|
|
739
|
-
}
|
|
740
|
-
.eds-fieldset {
|
|
741
|
-
margin: 0;
|
|
742
|
-
padding: 0;
|
|
743
|
-
border: 0;
|
|
744
|
-
}
|
|
745
|
-
/* DO NOT CHANGE!*/
|
|
746
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
747
628
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
748
629
|
outline: 2px solid #181c56;
|
|
749
630
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
@@ -900,6 +781,125 @@ input:disabled + .eds-input-panel__container {
|
|
|
900
781
|
}
|
|
901
782
|
/* DO NOT CHANGE!*/
|
|
902
783
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
784
|
+
.eds-switch {
|
|
785
|
+
cursor: pointer;
|
|
786
|
+
-webkit-user-select: none;
|
|
787
|
+
-moz-user-select: none;
|
|
788
|
+
user-select: none;
|
|
789
|
+
padding: 0.5rem 0;
|
|
790
|
+
width: -moz-fit-content;
|
|
791
|
+
width: fit-content;
|
|
792
|
+
}
|
|
793
|
+
.eds-switch input {
|
|
794
|
+
opacity: 0;
|
|
795
|
+
pointer-events: none;
|
|
796
|
+
position: absolute;
|
|
797
|
+
}
|
|
798
|
+
.eds-switch--right {
|
|
799
|
+
display: flex;
|
|
800
|
+
flex-direction: row;
|
|
801
|
+
align-items: center;
|
|
802
|
+
}
|
|
803
|
+
.eds-switch--bottom {
|
|
804
|
+
display: flex;
|
|
805
|
+
flex-direction: column;
|
|
806
|
+
align-items: center;
|
|
807
|
+
}
|
|
808
|
+
.eds-switch__circle {
|
|
809
|
+
border-radius: 50%;
|
|
810
|
+
height: 1.25rem;
|
|
811
|
+
width: 1.25rem;
|
|
812
|
+
content: "";
|
|
813
|
+
display: flex;
|
|
814
|
+
align-items: center;
|
|
815
|
+
justify-content: center;
|
|
816
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
817
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
818
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
819
|
+
top: 0.125rem;
|
|
820
|
+
left: 0.125rem;
|
|
821
|
+
position: relative;
|
|
822
|
+
}
|
|
823
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
824
|
+
height: 1.75rem;
|
|
825
|
+
width: 1.75rem;
|
|
826
|
+
}
|
|
827
|
+
.eds-contrast .eds-switch__circle {
|
|
828
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
829
|
+
}
|
|
830
|
+
.eds-switch__switch {
|
|
831
|
+
position: relative;
|
|
832
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
833
|
+
content: "";
|
|
834
|
+
display: block;
|
|
835
|
+
transition: background-color 0.1s ease-in-out;
|
|
836
|
+
height: 1.5rem;
|
|
837
|
+
width: 3rem;
|
|
838
|
+
border-radius: 1.5rem;
|
|
839
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
840
|
+
}
|
|
841
|
+
.eds-contrast .eds-switch__switch {
|
|
842
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
843
|
+
}
|
|
844
|
+
.eds-switch--right .eds-switch__switch {
|
|
845
|
+
margin-right: 0.75rem;
|
|
846
|
+
}
|
|
847
|
+
.eds-switch__switch svg g,
|
|
848
|
+
.eds-switch__switch path {
|
|
849
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
850
|
+
transition: fill ease-in-out 0.1s;
|
|
851
|
+
}
|
|
852
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
853
|
+
.eds-contrast .eds-switch__switch path {
|
|
854
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
855
|
+
}
|
|
856
|
+
:checked + .eds-switch__switch {
|
|
857
|
+
background-color: var(--eds-switch-color);
|
|
858
|
+
}
|
|
859
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
860
|
+
left: 1.625rem;
|
|
861
|
+
}
|
|
862
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
863
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
864
|
+
fill: var(--eds-switch-color);
|
|
865
|
+
}
|
|
866
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
867
|
+
background-color: var(--eds-switch-contrast-color);
|
|
868
|
+
}
|
|
869
|
+
:focus + .eds-switch__switch {
|
|
870
|
+
outline: 2px solid #181c56;
|
|
871
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
872
|
+
outline-offset: 0.125rem;
|
|
873
|
+
}
|
|
874
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
875
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
876
|
+
}
|
|
877
|
+
.eds-switch__switch--large {
|
|
878
|
+
width: 3.75rem;
|
|
879
|
+
height: 2rem;
|
|
880
|
+
border-radius: 3.75rem;
|
|
881
|
+
}
|
|
882
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
883
|
+
left: 1.875rem;
|
|
884
|
+
}
|
|
885
|
+
.eds-switch__switch--large svg {
|
|
886
|
+
position: relative;
|
|
887
|
+
right: 0.05rem;
|
|
888
|
+
}
|
|
889
|
+
.eds-switch__label--large--right {
|
|
890
|
+
font-size: 1rem;
|
|
891
|
+
}
|
|
892
|
+
.eds-switch__label--large--bottom {
|
|
893
|
+
font-size: 0.875rem;
|
|
894
|
+
}
|
|
895
|
+
.eds-switch__label--medium--right {
|
|
896
|
+
font-size: 0.875rem;
|
|
897
|
+
}
|
|
898
|
+
.eds-switch__label--medium--bottom {
|
|
899
|
+
font-size: 0.75rem;
|
|
900
|
+
}
|
|
901
|
+
/* DO NOT CHANGE!*/
|
|
902
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
903
903
|
/* DO NOT CHANGE!*/
|
|
904
904
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
905
905
|
/* DO NOT CHANGE!*/
|
|
@@ -1231,7 +1231,8 @@ input:disabled + .eds-input-panel__container {
|
|
|
1231
1231
|
--components-form-baseform-standard-text-disabled: #6e6f73;
|
|
1232
1232
|
--components-form-basemenu-border: #8284ab;
|
|
1233
1233
|
--components-form-basemenu-fill-default: #f2f5f7;
|
|
1234
|
-
--components-form-basemenu-fill-hover: #
|
|
1234
|
+
--components-form-basemenu-fill-hover: #d9ddf2;
|
|
1235
|
+
--components-form-basemenu-fill-selected: #aeb7e2;
|
|
1235
1236
|
--components-form-basemenu-icon: #181c56;
|
|
1236
1237
|
--components-form-basemenu-icon-disabled: #6e6f73;
|
|
1237
1238
|
--components-form-basemenu-text: #181c56;
|
|
@@ -1384,6 +1385,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
1384
1385
|
--components-form-basemenu-border: rgba(255, 255, 255, 0);
|
|
1385
1386
|
--components-form-basemenu-fill-default: #464755;
|
|
1386
1387
|
--components-form-basemenu-fill-hover: #626493;
|
|
1388
|
+
--components-form-basemenu-fill-selected: #8794d4;
|
|
1387
1389
|
--components-form-basemenu-icon: #e5e5e9;
|
|
1388
1390
|
--components-form-basemenu-icon-disabled: #949699;
|
|
1389
1391
|
--components-form-basemenu-text: #e5e5e9;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "8.1.
|
|
3
|
+
"version": "8.1.3",
|
|
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.4.
|
|
31
|
-
"@entur/tokens": "^3.17.
|
|
32
|
-
"@entur/tooltip": "^
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
34
|
-
"@entur/utils": "^0.
|
|
30
|
+
"@entur/icons": "^7.4.1",
|
|
31
|
+
"@entur/tokens": "^3.17.1",
|
|
32
|
+
"@entur/tooltip": "^5.0.0",
|
|
33
|
+
"@entur/typography": "^1.8.46",
|
|
34
|
+
"@entur/utils": "^0.12.0",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "b038c9f7061c44765606ab8b7519c205ca633635"
|
|
38
38
|
}
|