@entur/form 8.0.2 → 8.1.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/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 +356 -356
- package/package.json +5 -5
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,160 @@
|
|
|
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
|
+
/* DO NOT CHANGE!*/
|
|
157
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
158
|
.eds-form-control__field-and-feedback-text {
|
|
4
159
|
display: flex;
|
|
5
160
|
flex-direction: column;
|
|
@@ -207,11 +362,6 @@
|
|
|
207
362
|
margin-right: 0;
|
|
208
363
|
margin-left: 0.75rem;
|
|
209
364
|
}
|
|
210
|
-
.eds-fieldset {
|
|
211
|
-
margin: 0;
|
|
212
|
-
padding: 0;
|
|
213
|
-
border: 0;
|
|
214
|
-
}
|
|
215
365
|
/* DO NOT CHANGE!*/
|
|
216
366
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
217
367
|
.eds-feedback-text {
|
|
@@ -287,6 +437,93 @@
|
|
|
287
437
|
}
|
|
288
438
|
/* DO NOT CHANGE!*/
|
|
289
439
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
440
|
+
.eds-form-component--radio__container {
|
|
441
|
+
display: flex;
|
|
442
|
+
justify-content: center;
|
|
443
|
+
align-items: center;
|
|
444
|
+
position: relative;
|
|
445
|
+
cursor: pointer;
|
|
446
|
+
height: 2rem;
|
|
447
|
+
width: -moz-fit-content;
|
|
448
|
+
width: fit-content;
|
|
449
|
+
-webkit-user-select: none;
|
|
450
|
+
-moz-user-select: none;
|
|
451
|
+
user-select: none;
|
|
452
|
+
}
|
|
453
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
454
|
+
background-color: var(--components-form-radio-standard-fill-hover);
|
|
455
|
+
}
|
|
456
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
457
|
+
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
458
|
+
}
|
|
459
|
+
.eds-form-component--radio__container input {
|
|
460
|
+
position: absolute;
|
|
461
|
+
opacity: 0;
|
|
462
|
+
cursor: pointer;
|
|
463
|
+
height: 0;
|
|
464
|
+
width: 0;
|
|
465
|
+
}
|
|
466
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
467
|
+
height: 0.625rem;
|
|
468
|
+
width: 0.625rem;
|
|
469
|
+
}
|
|
470
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
471
|
+
outline: 2px solid #181c56;
|
|
472
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
473
|
+
outline-offset: 0.125rem;
|
|
474
|
+
}
|
|
475
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
476
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
477
|
+
}
|
|
478
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
479
|
+
position: relative;
|
|
480
|
+
height: 1.25rem;
|
|
481
|
+
width: 1.25rem;
|
|
482
|
+
margin-right: 1rem;
|
|
483
|
+
background-color: var(--components-form-radio-standard-fill-default);
|
|
484
|
+
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
485
|
+
border-radius: 50%;
|
|
486
|
+
display: flex;
|
|
487
|
+
align-items: center;
|
|
488
|
+
justify-content: center;
|
|
489
|
+
}
|
|
490
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
491
|
+
background-color: var(--components-form-radio-contrast-fill-default);
|
|
492
|
+
border-color: var(--components-form-radio-contrast-border);
|
|
493
|
+
}
|
|
494
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
495
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
496
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
497
|
+
cursor: not-allowed;
|
|
498
|
+
}
|
|
499
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
500
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
501
|
+
}
|
|
502
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
503
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
504
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
505
|
+
}
|
|
506
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
507
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
508
|
+
}
|
|
509
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
510
|
+
display: block;
|
|
511
|
+
width: 0;
|
|
512
|
+
height: 0;
|
|
513
|
+
border-radius: 50%;
|
|
514
|
+
background-color: var(--components-form-radio-standard-fill-selected);
|
|
515
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
516
|
+
}
|
|
517
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
518
|
+
background-color: var(--components-form-radio-contrast-icon);
|
|
519
|
+
}
|
|
520
|
+
.eds-fieldset {
|
|
521
|
+
margin: 0;
|
|
522
|
+
padding: 0;
|
|
523
|
+
border: 0;
|
|
524
|
+
}
|
|
525
|
+
/* DO NOT CHANGE!*/
|
|
526
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
290
527
|
.eds-input-group {
|
|
291
528
|
color: inherit;
|
|
292
529
|
display: block;
|
|
@@ -454,293 +691,56 @@
|
|
|
454
691
|
.eds-switch__switch svg g,
|
|
455
692
|
.eds-switch__switch path {
|
|
456
693
|
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
|
-
.eds-form-component--radio__container {
|
|
511
|
-
display: flex;
|
|
512
|
-
justify-content: center;
|
|
513
|
-
align-items: center;
|
|
514
|
-
position: relative;
|
|
515
|
-
cursor: pointer;
|
|
516
|
-
height: 2rem;
|
|
517
|
-
width: -moz-fit-content;
|
|
518
|
-
width: fit-content;
|
|
519
|
-
-webkit-user-select: none;
|
|
520
|
-
-moz-user-select: none;
|
|
521
|
-
user-select: none;
|
|
522
|
-
}
|
|
523
|
-
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
524
|
-
background-color: var(--components-form-radio-standard-fill-hover);
|
|
525
|
-
}
|
|
526
|
-
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
527
|
-
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
528
|
-
}
|
|
529
|
-
.eds-form-component--radio__container input {
|
|
530
|
-
position: absolute;
|
|
531
|
-
opacity: 0;
|
|
532
|
-
cursor: pointer;
|
|
533
|
-
height: 0;
|
|
534
|
-
width: 0;
|
|
535
|
-
}
|
|
536
|
-
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
537
|
-
height: 0.625rem;
|
|
538
|
-
width: 0.625rem;
|
|
539
|
-
}
|
|
540
|
-
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
541
|
-
outline: 2px solid #181c56;
|
|
542
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
543
|
-
outline-offset: 0.125rem;
|
|
544
|
-
}
|
|
545
|
-
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
546
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
547
|
-
}
|
|
548
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
549
|
-
position: relative;
|
|
550
|
-
height: 1.25rem;
|
|
551
|
-
width: 1.25rem;
|
|
552
|
-
margin-right: 1rem;
|
|
553
|
-
background-color: var(--components-form-radio-standard-fill-default);
|
|
554
|
-
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
555
|
-
border-radius: 50%;
|
|
556
|
-
display: flex;
|
|
557
|
-
align-items: center;
|
|
558
|
-
justify-content: center;
|
|
559
|
-
}
|
|
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);
|
|
563
|
-
}
|
|
564
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
565
|
-
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
566
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
567
|
-
cursor: not-allowed;
|
|
568
|
-
}
|
|
569
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
570
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
571
|
-
}
|
|
572
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
573
|
-
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
574
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
575
|
-
}
|
|
576
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
577
|
-
color: var(--components-form-baseform-contrast-text-disabled);
|
|
578
|
-
}
|
|
579
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
580
|
-
display: block;
|
|
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;
|
|
586
|
-
}
|
|
587
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
588
|
-
background-color: var(--components-form-radio-contrast-icon);
|
|
589
|
-
}
|
|
590
|
-
/* DO NOT CHANGE!*/
|
|
591
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
592
|
-
.eds-checkbox__container {
|
|
593
|
-
display: flex;
|
|
594
|
-
align-items: center;
|
|
595
|
-
position: relative;
|
|
596
|
-
-webkit-appearance: none;
|
|
597
|
-
-moz-appearance: none;
|
|
598
|
-
appearance: none;
|
|
599
|
-
cursor: pointer;
|
|
600
|
-
-webkit-user-select: none;
|
|
601
|
-
-moz-user-select: none;
|
|
602
|
-
user-select: none;
|
|
603
|
-
width: -moz-fit-content;
|
|
604
|
-
width: fit-content;
|
|
605
|
-
margin: 0.5rem 0;
|
|
606
|
-
}
|
|
607
|
-
.eds-checkbox__container--reduced-click-area {
|
|
608
|
-
height: -moz-fit-content;
|
|
609
|
-
height: fit-content;
|
|
610
|
-
}
|
|
611
|
-
.eds-checkbox__container input {
|
|
612
|
-
position: absolute;
|
|
613
|
-
opacity: 0;
|
|
614
|
-
height: 0;
|
|
615
|
-
width: 0;
|
|
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;
|
|
632
|
-
}
|
|
633
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
634
|
-
opacity: 0.5;
|
|
635
|
-
}
|
|
636
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
637
|
-
opacity: 0.5;
|
|
638
|
-
}
|
|
639
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
640
|
-
opacity: 0.5;
|
|
641
|
-
}
|
|
642
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
643
|
-
opacity: 0.5;
|
|
644
|
-
}
|
|
645
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
646
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
647
|
-
}
|
|
648
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
649
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
650
|
-
}
|
|
651
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
652
|
-
fill: var(--components-form-checkbox-contrast-icon);
|
|
653
|
-
}
|
|
654
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
655
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
656
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
657
|
-
}
|
|
658
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
659
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
660
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
661
|
-
}
|
|
662
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
663
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
664
|
-
border-color: transparent;
|
|
665
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
694
|
+
transition: fill ease-in-out 0.1s;
|
|
666
695
|
}
|
|
667
|
-
.eds-contrast .eds-
|
|
668
|
-
.eds-contrast .eds-
|
|
669
|
-
|
|
696
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
697
|
+
.eds-contrast .eds-switch__switch path {
|
|
698
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
670
699
|
}
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
700
|
+
:checked + .eds-switch__switch {
|
|
701
|
+
background-color: var(--eds-switch-color);
|
|
674
702
|
}
|
|
675
|
-
.eds-
|
|
676
|
-
|
|
677
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
703
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
704
|
+
left: 1.625rem;
|
|
678
705
|
}
|
|
679
|
-
|
|
680
|
-
.eds-
|
|
681
|
-
|
|
682
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
683
|
-
outline-offset: 0.125rem;
|
|
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);
|
|
684
709
|
}
|
|
685
|
-
.eds-
|
|
686
|
-
|
|
710
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
711
|
+
background-color: var(--eds-switch-contrast-color);
|
|
712
|
+
}
|
|
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. */
|
|
@@ -965,88 +965,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
965
965
|
}
|
|
966
966
|
/* DO NOT CHANGE!*/
|
|
967
967
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
968
|
-
.eds-segmented-choice {
|
|
969
|
-
display: block;
|
|
970
|
-
flex: 1 1 0px;
|
|
971
|
-
}
|
|
972
|
-
.eds-segmented-choice .eds-base-segmented {
|
|
973
|
-
--background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
|
|
974
|
-
background-color: var(--background-color);
|
|
975
|
-
border-radius: 0.25rem;
|
|
976
|
-
color: var(--components-form-segmentedcontrol-standard-text-unselected);
|
|
977
|
-
cursor: pointer;
|
|
978
|
-
font-size: 0.875rem;
|
|
979
|
-
height: 1.5rem;
|
|
980
|
-
line-height: 1.25rem;
|
|
981
|
-
margin: 0.25rem;
|
|
982
|
-
outline-color: transparent;
|
|
983
|
-
padding: calc(0.25rem/ 2) 0.75rem;
|
|
984
|
-
text-align: center;
|
|
985
|
-
-webkit-user-select: none;
|
|
986
|
-
-moz-user-select: none;
|
|
987
|
-
user-select: none;
|
|
988
|
-
}
|
|
989
|
-
.eds-segmented-choice .eds-base-segmented--large {
|
|
990
|
-
font-size: 1rem;
|
|
991
|
-
height: 2.5rem;
|
|
992
|
-
line-height: 1.5rem;
|
|
993
|
-
padding: 0.5rem 0.75rem;
|
|
994
|
-
}
|
|
995
|
-
.eds-contrast .eds-segmented-choice .eds-base-segmented {
|
|
996
|
-
--background-color: var(--components-form-segmentedcontrol-contrast-background);
|
|
997
|
-
color: var(--components-form-segmentedcontrol-contrast-text-unselected);
|
|
998
|
-
}
|
|
999
|
-
.eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1000
|
-
--background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
|
|
1001
|
-
}
|
|
1002
|
-
.eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1003
|
-
--background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
|
|
1004
|
-
}
|
|
1005
|
-
.eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1006
|
-
--background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
|
|
1007
|
-
color: var(--components-form-segmentedcontrol-standard-text-unselected);
|
|
1008
|
-
}
|
|
1009
|
-
.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1010
|
-
--background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
|
|
1011
|
-
color: var(--components-form-segmentedcontrol-contrast-text-unselected);
|
|
1012
|
-
}
|
|
1013
|
-
.eds-segmented-choice input {
|
|
1014
|
-
-webkit-appearance: none;
|
|
1015
|
-
-moz-appearance: none;
|
|
1016
|
-
appearance: none;
|
|
1017
|
-
position: absolute;
|
|
1018
|
-
opacity: 0;
|
|
1019
|
-
height: 0;
|
|
1020
|
-
width: 0;
|
|
1021
|
-
}
|
|
1022
|
-
.eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1023
|
-
--background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
|
|
1024
|
-
color: var(--components-form-segmentedcontrol-standard-text-selected);
|
|
1025
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
1026
|
-
}
|
|
1027
|
-
.eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1028
|
-
--background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
|
|
1029
|
-
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
1030
|
-
color: var(--components-form-segmentedcontrol-contrast-text-selected);
|
|
1031
|
-
}
|
|
1032
|
-
.eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1033
|
-
outline: 2px solid #181c56;
|
|
1034
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1035
|
-
outline-offset: 0.125rem;
|
|
1036
|
-
}
|
|
1037
|
-
.eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1038
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1039
|
-
}
|
|
1040
|
-
.eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1041
|
-
outline: 2px solid #181c56;
|
|
1042
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1043
|
-
outline-offset: 0.125rem;
|
|
1044
|
-
}
|
|
1045
|
-
.eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1046
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1047
|
-
}
|
|
1048
|
-
/* DO NOT CHANGE!*/
|
|
1049
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1050
968
|
/* DO NOT CHANGE!*/
|
|
1051
969
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1052
970
|
/* DO NOT CHANGE!*/
|
|
@@ -1592,3 +1510,85 @@ textarea.eds-form-control.eds-textarea {
|
|
|
1592
1510
|
:root {
|
|
1593
1511
|
--eds-form: 1;
|
|
1594
1512
|
}
|
|
1513
|
+
/* DO NOT CHANGE!*/
|
|
1514
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1515
|
+
.eds-segmented-choice {
|
|
1516
|
+
display: block;
|
|
1517
|
+
flex: 1 1 0px;
|
|
1518
|
+
}
|
|
1519
|
+
.eds-segmented-choice .eds-base-segmented {
|
|
1520
|
+
--background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
|
|
1521
|
+
background-color: var(--background-color);
|
|
1522
|
+
border-radius: 0.25rem;
|
|
1523
|
+
color: var(--components-form-segmentedcontrol-standard-text-unselected);
|
|
1524
|
+
cursor: pointer;
|
|
1525
|
+
font-size: 0.875rem;
|
|
1526
|
+
height: 1.5rem;
|
|
1527
|
+
line-height: 1.25rem;
|
|
1528
|
+
margin: 0.25rem;
|
|
1529
|
+
outline-color: transparent;
|
|
1530
|
+
padding: calc(0.25rem/ 2) 0.75rem;
|
|
1531
|
+
text-align: center;
|
|
1532
|
+
-webkit-user-select: none;
|
|
1533
|
+
-moz-user-select: none;
|
|
1534
|
+
user-select: none;
|
|
1535
|
+
}
|
|
1536
|
+
.eds-segmented-choice .eds-base-segmented--large {
|
|
1537
|
+
font-size: 1rem;
|
|
1538
|
+
height: 2.5rem;
|
|
1539
|
+
line-height: 1.5rem;
|
|
1540
|
+
padding: 0.5rem 0.75rem;
|
|
1541
|
+
}
|
|
1542
|
+
.eds-contrast .eds-segmented-choice .eds-base-segmented {
|
|
1543
|
+
--background-color: var(--components-form-segmentedcontrol-contrast-background);
|
|
1544
|
+
color: var(--components-form-segmentedcontrol-contrast-text-unselected);
|
|
1545
|
+
}
|
|
1546
|
+
.eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1547
|
+
--background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
|
|
1548
|
+
}
|
|
1549
|
+
.eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
|
|
1550
|
+
--background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
|
|
1551
|
+
}
|
|
1552
|
+
.eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1553
|
+
--background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
|
|
1554
|
+
color: var(--components-form-segmentedcontrol-standard-text-unselected);
|
|
1555
|
+
}
|
|
1556
|
+
.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
1557
|
+
--background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
|
|
1558
|
+
color: var(--components-form-segmentedcontrol-contrast-text-unselected);
|
|
1559
|
+
}
|
|
1560
|
+
.eds-segmented-choice input {
|
|
1561
|
+
-webkit-appearance: none;
|
|
1562
|
+
-moz-appearance: none;
|
|
1563
|
+
appearance: none;
|
|
1564
|
+
position: absolute;
|
|
1565
|
+
opacity: 0;
|
|
1566
|
+
height: 0;
|
|
1567
|
+
width: 0;
|
|
1568
|
+
}
|
|
1569
|
+
.eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1570
|
+
--background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
|
|
1571
|
+
color: var(--components-form-segmentedcontrol-standard-text-selected);
|
|
1572
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
1573
|
+
}
|
|
1574
|
+
.eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
|
|
1575
|
+
--background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
|
|
1576
|
+
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
1577
|
+
color: var(--components-form-segmentedcontrol-contrast-text-selected);
|
|
1578
|
+
}
|
|
1579
|
+
.eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1580
|
+
outline: 2px solid #181c56;
|
|
1581
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1582
|
+
outline-offset: 0.125rem;
|
|
1583
|
+
}
|
|
1584
|
+
.eds-contrast .eds-segmented-choice input:focus:not(:checked) + .eds-base-segmented {
|
|
1585
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1586
|
+
}
|
|
1587
|
+
.eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1588
|
+
outline: 2px solid #181c56;
|
|
1589
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
1590
|
+
outline-offset: 0.125rem;
|
|
1591
|
+
}
|
|
1592
|
+
.eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1593
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
1594
|
+
}
|