@entur/form 8.2.3 → 8.2.5-beta.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/README.md +2 -2
- package/dist/BaseFormControl.d.ts +55 -2
- package/dist/form.cjs.development.js +7 -5
- 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 +7 -5
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +275 -271
- package/package.json +8 -8
package/dist/styles.css
CHANGED
|
@@ -1,75 +1,145 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-
|
|
3
|
+
.eds-checkbox__container {
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
|
-
|
|
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;
|
|
7
17
|
}
|
|
8
|
-
.eds-
|
|
9
|
-
|
|
18
|
+
.eds-checkbox__container--reduced-click-area {
|
|
19
|
+
height: -moz-fit-content;
|
|
20
|
+
height: fit-content;
|
|
10
21
|
}
|
|
11
|
-
.eds-
|
|
12
|
-
|
|
22
|
+
.eds-checkbox__container input {
|
|
23
|
+
position: absolute;
|
|
24
|
+
opacity: 0;
|
|
25
|
+
height: 0;
|
|
26
|
+
width: 0;
|
|
13
27
|
}
|
|
14
|
-
.eds-
|
|
15
|
-
color: var(--components-form-
|
|
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);
|
|
16
30
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
font-size: 1.5rem;
|
|
20
|
-
min-height: 1.5rem;
|
|
21
|
-
min-width: 1.5rem;
|
|
22
|
-
padding-right: 0.5rem;
|
|
23
|
-
position: relative;
|
|
24
|
-
top: -0.1rem;
|
|
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;
|
|
25
33
|
}
|
|
26
|
-
.eds-
|
|
27
|
-
|
|
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;
|
|
28
37
|
}
|
|
29
|
-
.eds-
|
|
30
|
-
fill: var(--components-form-
|
|
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);
|
|
31
40
|
}
|
|
32
|
-
.eds-
|
|
33
|
-
|
|
41
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
42
|
+
opacity: 0.5;
|
|
34
43
|
}
|
|
35
|
-
.eds-
|
|
36
|
-
|
|
44
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
45
|
+
opacity: 0.5;
|
|
37
46
|
}
|
|
38
|
-
.eds-
|
|
39
|
-
|
|
47
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
48
|
+
opacity: 0.5;
|
|
40
49
|
}
|
|
41
|
-
.eds-
|
|
42
|
-
|
|
50
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
51
|
+
opacity: 0.5;
|
|
43
52
|
}
|
|
44
|
-
.eds-
|
|
45
|
-
|
|
53
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
54
|
+
opacity: 0.5;
|
|
46
55
|
}
|
|
47
|
-
.eds-contrast .eds-
|
|
48
|
-
|
|
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);
|
|
49
58
|
}
|
|
50
|
-
.eds-
|
|
51
|
-
|
|
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);
|
|
52
61
|
}
|
|
53
|
-
.eds-
|
|
54
|
-
fill: var(--components-form-
|
|
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);
|
|
55
64
|
}
|
|
56
|
-
.eds-
|
|
57
|
-
color: var(--components-form-
|
|
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);
|
|
58
68
|
}
|
|
59
|
-
.eds-contrast .eds-
|
|
60
|
-
|
|
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);
|
|
61
72
|
}
|
|
62
|
-
.eds-
|
|
63
|
-
|
|
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);
|
|
64
77
|
}
|
|
65
|
-
.eds-
|
|
66
|
-
|
|
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);
|
|
67
81
|
}
|
|
68
|
-
.eds-
|
|
69
|
-
|
|
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);
|
|
70
85
|
}
|
|
71
|
-
.eds-contrast .eds-
|
|
72
|
-
|
|
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:has(:focus-visible) .eds-checkbox__icon {
|
|
91
|
+
outline: 2px solid #181c56;
|
|
92
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
93
|
+
outline-offset: 0.125rem;
|
|
94
|
+
}
|
|
95
|
+
.eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
|
|
96
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
97
|
+
}
|
|
98
|
+
.eds-checkbox--disabled {
|
|
99
|
+
pointer-events: none;
|
|
100
|
+
}
|
|
101
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
102
|
+
opacity: 0.5;
|
|
103
|
+
}
|
|
104
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
105
|
+
opacity: 0.5;
|
|
106
|
+
}
|
|
107
|
+
.eds-checkbox__icon {
|
|
108
|
+
box-sizing: border-box;
|
|
109
|
+
display: inline-flex;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
align-items: center;
|
|
112
|
+
position: relative;
|
|
113
|
+
margin-right: 1rem;
|
|
114
|
+
height: 1.25rem;
|
|
115
|
+
width: 1.25rem;
|
|
116
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
117
|
+
border-radius: 0.125rem;
|
|
118
|
+
background-color: transparent;
|
|
119
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
120
|
+
}
|
|
121
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
122
|
+
margin-right: 0;
|
|
123
|
+
}
|
|
124
|
+
.eds-contrast .eds-checkbox__icon {
|
|
125
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
126
|
+
}
|
|
127
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
128
|
+
height: 1rem;
|
|
129
|
+
width: 1rem;
|
|
130
|
+
visibility: hidden;
|
|
131
|
+
}
|
|
132
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
133
|
+
transform-origin: 50% 50%;
|
|
134
|
+
stroke-dasharray: 48;
|
|
135
|
+
stroke-dashoffset: 48;
|
|
136
|
+
stroke-width: 0.375rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@keyframes stroke {
|
|
140
|
+
100% {
|
|
141
|
+
stroke-dashoffset: 0;
|
|
142
|
+
}
|
|
73
143
|
}
|
|
74
144
|
.eds-fieldset {
|
|
75
145
|
margin: 0;
|
|
@@ -286,6 +356,79 @@
|
|
|
286
356
|
}
|
|
287
357
|
/* DO NOT CHANGE!*/
|
|
288
358
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
359
|
+
.eds-feedback-text {
|
|
360
|
+
display: flex;
|
|
361
|
+
align-items: center;
|
|
362
|
+
margin-top: 0.25rem;
|
|
363
|
+
}
|
|
364
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
365
|
+
padding-left: calc(1rem + 0.125rem);
|
|
366
|
+
}
|
|
367
|
+
.eds-feedback-text__text {
|
|
368
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
369
|
+
}
|
|
370
|
+
.eds-contrast .eds-feedback-text__text {
|
|
371
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.eds-feedback-text__icon {
|
|
375
|
+
font-size: 1.5rem;
|
|
376
|
+
min-height: 1.5rem;
|
|
377
|
+
min-width: 1.5rem;
|
|
378
|
+
padding-right: 0.5rem;
|
|
379
|
+
position: relative;
|
|
380
|
+
top: -0.1rem;
|
|
381
|
+
}
|
|
382
|
+
.eds-feedback-text__icon--success {
|
|
383
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
384
|
+
}
|
|
385
|
+
.eds-feedback-text__icon--success circle {
|
|
386
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
387
|
+
}
|
|
388
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
389
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
390
|
+
}
|
|
391
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
392
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
393
|
+
}
|
|
394
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
395
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
396
|
+
}
|
|
397
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
398
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
399
|
+
}
|
|
400
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
401
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
402
|
+
}
|
|
403
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
404
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
405
|
+
}
|
|
406
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
407
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
408
|
+
}
|
|
409
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
410
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
411
|
+
}
|
|
412
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
413
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
414
|
+
}
|
|
415
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
416
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
417
|
+
}
|
|
418
|
+
.eds-feedback-text__icon--warning {
|
|
419
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
420
|
+
}
|
|
421
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
422
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
423
|
+
}
|
|
424
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
425
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
426
|
+
}
|
|
427
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
428
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
429
|
+
}
|
|
430
|
+
/* DO NOT CHANGE!*/
|
|
431
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
289
432
|
.eds-form-component--radio__container {
|
|
290
433
|
display: flex;
|
|
291
434
|
justify-content: center;
|
|
@@ -368,146 +511,122 @@
|
|
|
368
511
|
}
|
|
369
512
|
/* DO NOT CHANGE!*/
|
|
370
513
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
371
|
-
.eds-
|
|
372
|
-
display: flex;
|
|
373
|
-
align-items: center;
|
|
374
|
-
position: relative;
|
|
375
|
-
-webkit-appearance: none;
|
|
376
|
-
-moz-appearance: none;
|
|
377
|
-
appearance: none;
|
|
514
|
+
.eds-switch {
|
|
378
515
|
cursor: pointer;
|
|
379
516
|
-webkit-user-select: none;
|
|
380
517
|
-moz-user-select: none;
|
|
381
518
|
user-select: none;
|
|
519
|
+
padding: 0.5rem 0;
|
|
382
520
|
width: -moz-fit-content;
|
|
383
521
|
width: fit-content;
|
|
384
|
-
margin: 0.5rem 0;
|
|
385
|
-
}
|
|
386
|
-
.eds-checkbox__container--reduced-click-area {
|
|
387
|
-
height: -moz-fit-content;
|
|
388
|
-
height: fit-content;
|
|
389
522
|
}
|
|
390
|
-
.eds-
|
|
391
|
-
position: absolute;
|
|
523
|
+
.eds-switch input {
|
|
392
524
|
opacity: 0;
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
}
|
|
396
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
397
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
398
|
-
}
|
|
399
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
400
|
-
visibility: visible;
|
|
401
|
-
}
|
|
402
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
403
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
404
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
405
|
-
}
|
|
406
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
407
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
525
|
+
pointer-events: none;
|
|
526
|
+
position: absolute;
|
|
408
527
|
}
|
|
409
|
-
.eds-
|
|
410
|
-
|
|
528
|
+
.eds-switch--right {
|
|
529
|
+
display: flex;
|
|
530
|
+
flex-direction: row;
|
|
531
|
+
align-items: center;
|
|
411
532
|
}
|
|
412
|
-
.eds-
|
|
413
|
-
|
|
533
|
+
.eds-switch--bottom {
|
|
534
|
+
display: flex;
|
|
535
|
+
flex-direction: column;
|
|
536
|
+
align-items: center;
|
|
414
537
|
}
|
|
415
|
-
.eds-
|
|
416
|
-
|
|
538
|
+
.eds-switch__circle {
|
|
539
|
+
border-radius: 50%;
|
|
540
|
+
height: 1.25rem;
|
|
541
|
+
width: 1.25rem;
|
|
542
|
+
content: "";
|
|
543
|
+
display: flex;
|
|
544
|
+
align-items: center;
|
|
545
|
+
justify-content: center;
|
|
546
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
547
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
548
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
549
|
+
top: 0.125rem;
|
|
550
|
+
left: 0.125rem;
|
|
551
|
+
position: relative;
|
|
417
552
|
}
|
|
418
|
-
.eds-
|
|
419
|
-
|
|
553
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
554
|
+
height: 1.75rem;
|
|
555
|
+
width: 1.75rem;
|
|
420
556
|
}
|
|
421
|
-
.eds-
|
|
422
|
-
|
|
557
|
+
.eds-contrast .eds-switch__circle {
|
|
558
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
423
559
|
}
|
|
424
|
-
.eds-
|
|
425
|
-
|
|
560
|
+
.eds-switch__switch {
|
|
561
|
+
position: relative;
|
|
562
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
563
|
+
content: "";
|
|
564
|
+
display: block;
|
|
565
|
+
transition: background-color 0.1s ease-in-out;
|
|
566
|
+
height: 1.5rem;
|
|
567
|
+
width: 3rem;
|
|
568
|
+
border-radius: 1.5rem;
|
|
569
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
426
570
|
}
|
|
427
|
-
.eds-contrast .eds-
|
|
428
|
-
|
|
571
|
+
.eds-contrast .eds-switch__switch {
|
|
572
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
429
573
|
}
|
|
430
|
-
.eds-
|
|
431
|
-
|
|
574
|
+
.eds-switch--right .eds-switch__switch {
|
|
575
|
+
margin-right: 0.75rem;
|
|
432
576
|
}
|
|
433
|
-
.eds-
|
|
434
|
-
|
|
435
|
-
|
|
577
|
+
.eds-switch__switch svg g,
|
|
578
|
+
.eds-switch__switch path {
|
|
579
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
580
|
+
transition: fill ease-in-out 0.1s;
|
|
436
581
|
}
|
|
437
|
-
.eds-contrast .eds-
|
|
438
|
-
|
|
439
|
-
|
|
582
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
583
|
+
.eds-contrast .eds-switch__switch path {
|
|
584
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
440
585
|
}
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
border-color: transparent;
|
|
444
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
586
|
+
:checked + .eds-switch__switch {
|
|
587
|
+
background-color: var(--eds-switch-color);
|
|
445
588
|
}
|
|
446
|
-
.eds-
|
|
447
|
-
|
|
448
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
589
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
590
|
+
left: 1.625rem;
|
|
449
591
|
}
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
592
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
593
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
594
|
+
fill: var(--eds-switch-color);
|
|
453
595
|
}
|
|
454
|
-
.eds-contrast
|
|
455
|
-
|
|
456
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
596
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
597
|
+
background-color: var(--eds-switch-contrast-color);
|
|
457
598
|
}
|
|
458
|
-
|
|
599
|
+
:focus-visible + .eds-switch__switch {
|
|
459
600
|
outline: 2px solid #181c56;
|
|
460
601
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
461
602
|
outline-offset: 0.125rem;
|
|
462
603
|
}
|
|
463
|
-
.eds-contrast
|
|
604
|
+
.eds-contrast :focus-visible + .eds-switch__switch {
|
|
464
605
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
465
606
|
}
|
|
466
|
-
.eds-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
opacity: 0.5;
|
|
607
|
+
.eds-switch__switch--large {
|
|
608
|
+
width: 3.75rem;
|
|
609
|
+
height: 2rem;
|
|
610
|
+
border-radius: 3.75rem;
|
|
471
611
|
}
|
|
472
|
-
.eds-
|
|
473
|
-
|
|
612
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
613
|
+
left: 1.875rem;
|
|
474
614
|
}
|
|
475
|
-
.eds-
|
|
476
|
-
box-sizing: border-box;
|
|
477
|
-
display: inline-flex;
|
|
478
|
-
justify-content: center;
|
|
479
|
-
align-items: center;
|
|
615
|
+
.eds-switch__switch--large svg {
|
|
480
616
|
position: relative;
|
|
481
|
-
|
|
482
|
-
height: 1.25rem;
|
|
483
|
-
width: 1.25rem;
|
|
484
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
485
|
-
border-radius: 0.125rem;
|
|
486
|
-
background-color: transparent;
|
|
487
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
488
|
-
}
|
|
489
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
490
|
-
margin-right: 0;
|
|
617
|
+
right: 0.05rem;
|
|
491
618
|
}
|
|
492
|
-
.eds-
|
|
493
|
-
|
|
619
|
+
.eds-switch__label--large--right {
|
|
620
|
+
font-size: 1rem;
|
|
494
621
|
}
|
|
495
|
-
.eds-
|
|
496
|
-
|
|
497
|
-
width: 1rem;
|
|
498
|
-
visibility: hidden;
|
|
622
|
+
.eds-switch__label--large--bottom {
|
|
623
|
+
font-size: 0.875rem;
|
|
499
624
|
}
|
|
500
|
-
.eds-
|
|
501
|
-
|
|
502
|
-
stroke-dasharray: 48;
|
|
503
|
-
stroke-dashoffset: 48;
|
|
504
|
-
stroke-width: 0.375rem;
|
|
625
|
+
.eds-switch__label--medium--right {
|
|
626
|
+
font-size: 0.875rem;
|
|
505
627
|
}
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
100% {
|
|
509
|
-
stroke-dashoffset: 0;
|
|
510
|
-
}
|
|
628
|
+
.eds-switch__label--medium--bottom {
|
|
629
|
+
font-size: 0.75rem;
|
|
511
630
|
}
|
|
512
631
|
/* DO NOT CHANGE!*/
|
|
513
632
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -747,125 +866,6 @@ input:disabled + .eds-input-panel__container {
|
|
|
747
866
|
}
|
|
748
867
|
/* DO NOT CHANGE!*/
|
|
749
868
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
750
|
-
.eds-switch {
|
|
751
|
-
cursor: pointer;
|
|
752
|
-
-webkit-user-select: none;
|
|
753
|
-
-moz-user-select: none;
|
|
754
|
-
user-select: none;
|
|
755
|
-
padding: 0.5rem 0;
|
|
756
|
-
width: -moz-fit-content;
|
|
757
|
-
width: fit-content;
|
|
758
|
-
}
|
|
759
|
-
.eds-switch input {
|
|
760
|
-
opacity: 0;
|
|
761
|
-
pointer-events: none;
|
|
762
|
-
position: absolute;
|
|
763
|
-
}
|
|
764
|
-
.eds-switch--right {
|
|
765
|
-
display: flex;
|
|
766
|
-
flex-direction: row;
|
|
767
|
-
align-items: center;
|
|
768
|
-
}
|
|
769
|
-
.eds-switch--bottom {
|
|
770
|
-
display: flex;
|
|
771
|
-
flex-direction: column;
|
|
772
|
-
align-items: center;
|
|
773
|
-
}
|
|
774
|
-
.eds-switch__circle {
|
|
775
|
-
border-radius: 50%;
|
|
776
|
-
height: 1.25rem;
|
|
777
|
-
width: 1.25rem;
|
|
778
|
-
content: "";
|
|
779
|
-
display: flex;
|
|
780
|
-
align-items: center;
|
|
781
|
-
justify-content: center;
|
|
782
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
783
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
784
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
785
|
-
top: 0.125rem;
|
|
786
|
-
left: 0.125rem;
|
|
787
|
-
position: relative;
|
|
788
|
-
}
|
|
789
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
790
|
-
height: 1.75rem;
|
|
791
|
-
width: 1.75rem;
|
|
792
|
-
}
|
|
793
|
-
.eds-contrast .eds-switch__circle {
|
|
794
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
795
|
-
}
|
|
796
|
-
.eds-switch__switch {
|
|
797
|
-
position: relative;
|
|
798
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
799
|
-
content: "";
|
|
800
|
-
display: block;
|
|
801
|
-
transition: background-color 0.1s ease-in-out;
|
|
802
|
-
height: 1.5rem;
|
|
803
|
-
width: 3rem;
|
|
804
|
-
border-radius: 1.5rem;
|
|
805
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
806
|
-
}
|
|
807
|
-
.eds-contrast .eds-switch__switch {
|
|
808
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
809
|
-
}
|
|
810
|
-
.eds-switch--right .eds-switch__switch {
|
|
811
|
-
margin-right: 0.75rem;
|
|
812
|
-
}
|
|
813
|
-
.eds-switch__switch svg g,
|
|
814
|
-
.eds-switch__switch path {
|
|
815
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
816
|
-
transition: fill ease-in-out 0.1s;
|
|
817
|
-
}
|
|
818
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
819
|
-
.eds-contrast .eds-switch__switch path {
|
|
820
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
821
|
-
}
|
|
822
|
-
:checked + .eds-switch__switch {
|
|
823
|
-
background-color: var(--eds-switch-color);
|
|
824
|
-
}
|
|
825
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
826
|
-
left: 1.625rem;
|
|
827
|
-
}
|
|
828
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
829
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
830
|
-
fill: var(--eds-switch-color);
|
|
831
|
-
}
|
|
832
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
833
|
-
background-color: var(--eds-switch-contrast-color);
|
|
834
|
-
}
|
|
835
|
-
:focus-visible + .eds-switch__switch {
|
|
836
|
-
outline: 2px solid #181c56;
|
|
837
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
838
|
-
outline-offset: 0.125rem;
|
|
839
|
-
}
|
|
840
|
-
.eds-contrast :focus-visible + .eds-switch__switch {
|
|
841
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
842
|
-
}
|
|
843
|
-
.eds-switch__switch--large {
|
|
844
|
-
width: 3.75rem;
|
|
845
|
-
height: 2rem;
|
|
846
|
-
border-radius: 3.75rem;
|
|
847
|
-
}
|
|
848
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
849
|
-
left: 1.875rem;
|
|
850
|
-
}
|
|
851
|
-
.eds-switch__switch--large svg {
|
|
852
|
-
position: relative;
|
|
853
|
-
right: 0.05rem;
|
|
854
|
-
}
|
|
855
|
-
.eds-switch__label--large--right {
|
|
856
|
-
font-size: 1rem;
|
|
857
|
-
}
|
|
858
|
-
.eds-switch__label--large--bottom {
|
|
859
|
-
font-size: 0.875rem;
|
|
860
|
-
}
|
|
861
|
-
.eds-switch__label--medium--right {
|
|
862
|
-
font-size: 0.875rem;
|
|
863
|
-
}
|
|
864
|
-
.eds-switch__label--medium--bottom {
|
|
865
|
-
font-size: 0.75rem;
|
|
866
|
-
}
|
|
867
|
-
/* DO NOT CHANGE!*/
|
|
868
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
869
869
|
/* DO NOT CHANGE!*/
|
|
870
870
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
871
871
|
/* DO NOT CHANGE!*/
|
|
@@ -878,6 +878,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
878
878
|
:root {
|
|
879
879
|
--basecolors-frame-contrast: #181c56;
|
|
880
880
|
--basecolors-frame-contrastalt: #393d79;
|
|
881
|
+
--basecolors-frame-contrastalt-2: #292b6a;
|
|
881
882
|
--basecolors-frame-default: #ffffff;
|
|
882
883
|
--basecolors-frame-elevated: #ffffff;
|
|
883
884
|
--basecolors-frame-elevatedalt: #f6f6f9;
|
|
@@ -943,6 +944,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
943
944
|
[data-color-mode=dark] {
|
|
944
945
|
--basecolors-frame-contrast: #212233;
|
|
945
946
|
--basecolors-frame-contrastalt: #141527;
|
|
947
|
+
--basecolors-frame-contrastalt-2: #08091c;
|
|
946
948
|
--basecolors-frame-default: #08091c;
|
|
947
949
|
--basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
|
|
948
950
|
--basecolors-frame-elevatedalt: #464755;
|
|
@@ -1484,6 +1486,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
1484
1486
|
:root {
|
|
1485
1487
|
--basecolors-frame-contrast: #181c56;
|
|
1486
1488
|
--basecolors-frame-contrastalt: #393d79;
|
|
1489
|
+
--basecolors-frame-contrastalt-2: #292b6a;
|
|
1487
1490
|
--basecolors-frame-default: #ffffff;
|
|
1488
1491
|
--basecolors-frame-elevated: #ffffff;
|
|
1489
1492
|
--basecolors-frame-elevatedalt: #f6f6f9;
|
|
@@ -1549,6 +1552,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
1549
1552
|
[data-color-mode=dark] {
|
|
1550
1553
|
--basecolors-frame-contrast: #212233;
|
|
1551
1554
|
--basecolors-frame-contrastalt: #141527;
|
|
1555
|
+
--basecolors-frame-contrastalt-2: #08091c;
|
|
1552
1556
|
--basecolors-frame-default: #08091c;
|
|
1553
1557
|
--basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
|
|
1554
1558
|
--basecolors-frame-elevatedalt: #464755;
|