@entur/form 7.1.8 → 7.1.10-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/dist/styles.css +316 -316
- package/package.json +5 -5
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,233 @@
|
|
|
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. */
|
|
158
|
+
.eds-feedback-text {
|
|
159
|
+
display: flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
margin-top: 0.25rem;
|
|
162
|
+
}
|
|
163
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
164
|
+
padding-left: calc(1rem + 0.125rem);
|
|
165
|
+
}
|
|
166
|
+
.eds-feedback-text__text {
|
|
167
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
168
|
+
}
|
|
169
|
+
.eds-contrast .eds-feedback-text__text {
|
|
170
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.eds-feedback-text__icon {
|
|
174
|
+
font-size: 1.5rem;
|
|
175
|
+
min-height: 1.5rem;
|
|
176
|
+
min-width: 1.5rem;
|
|
177
|
+
padding-right: 0.5rem;
|
|
178
|
+
position: relative;
|
|
179
|
+
top: -0.1rem;
|
|
180
|
+
}
|
|
181
|
+
.eds-feedback-text__icon--success {
|
|
182
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
183
|
+
}
|
|
184
|
+
.eds-feedback-text__icon--success circle {
|
|
185
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
186
|
+
}
|
|
187
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
188
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
189
|
+
}
|
|
190
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
191
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
192
|
+
}
|
|
193
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
194
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
195
|
+
}
|
|
196
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
197
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
198
|
+
}
|
|
199
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
200
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
201
|
+
}
|
|
202
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
203
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
204
|
+
}
|
|
205
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
206
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
207
|
+
}
|
|
208
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
209
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
210
|
+
}
|
|
211
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
212
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
213
|
+
}
|
|
214
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
215
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
216
|
+
}
|
|
217
|
+
.eds-feedback-text__icon--warning {
|
|
218
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
219
|
+
}
|
|
220
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
221
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
222
|
+
}
|
|
223
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
224
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
225
|
+
}
|
|
226
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
227
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
228
|
+
}
|
|
229
|
+
/* DO NOT CHANGE!*/
|
|
230
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
231
|
.eds-form-control-wrapper {
|
|
4
232
|
align-items: center;
|
|
5
233
|
background-color: var(--components-form-baseform-standard-fill-default);
|
|
@@ -185,158 +413,122 @@
|
|
|
185
413
|
}
|
|
186
414
|
/* DO NOT CHANGE!*/
|
|
187
415
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
188
|
-
.eds-
|
|
189
|
-
display: flex;
|
|
190
|
-
align-items: center;
|
|
191
|
-
position: relative;
|
|
192
|
-
-webkit-appearance: none;
|
|
193
|
-
-moz-appearance: none;
|
|
194
|
-
appearance: none;
|
|
416
|
+
.eds-switch {
|
|
195
417
|
cursor: pointer;
|
|
196
418
|
-webkit-user-select: none;
|
|
197
419
|
-moz-user-select: none;
|
|
198
420
|
user-select: none;
|
|
421
|
+
padding: 0.5rem 0;
|
|
199
422
|
width: -moz-fit-content;
|
|
200
423
|
width: fit-content;
|
|
201
|
-
margin: 0.5rem 0;
|
|
202
|
-
}
|
|
203
|
-
.eds-checkbox__container--reduced-click-area {
|
|
204
|
-
height: -moz-fit-content;
|
|
205
|
-
height: fit-content;
|
|
206
424
|
}
|
|
207
|
-
.eds-
|
|
208
|
-
position: absolute;
|
|
425
|
+
.eds-switch input {
|
|
209
426
|
opacity: 0;
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
}
|
|
213
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
214
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
215
|
-
}
|
|
216
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
217
|
-
visibility: visible;
|
|
218
|
-
}
|
|
219
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
220
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
221
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
222
|
-
}
|
|
223
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
224
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
225
|
-
}
|
|
226
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
227
|
-
opacity: 0.5;
|
|
427
|
+
pointer-events: none;
|
|
428
|
+
position: absolute;
|
|
228
429
|
}
|
|
229
|
-
.eds-
|
|
230
|
-
|
|
430
|
+
.eds-switch--right {
|
|
431
|
+
display: flex;
|
|
432
|
+
flex-direction: row;
|
|
433
|
+
align-items: center;
|
|
231
434
|
}
|
|
232
|
-
.eds-
|
|
233
|
-
|
|
435
|
+
.eds-switch--bottom {
|
|
436
|
+
display: flex;
|
|
437
|
+
flex-direction: column;
|
|
438
|
+
align-items: center;
|
|
234
439
|
}
|
|
235
|
-
.eds-
|
|
236
|
-
|
|
440
|
+
.eds-switch__circle {
|
|
441
|
+
border-radius: 50%;
|
|
442
|
+
height: 1.25rem;
|
|
443
|
+
width: 1.25rem;
|
|
444
|
+
content: "";
|
|
445
|
+
display: flex;
|
|
446
|
+
align-items: center;
|
|
447
|
+
justify-content: center;
|
|
448
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
449
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
450
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
451
|
+
top: 0.125rem;
|
|
452
|
+
left: 0.125rem;
|
|
453
|
+
position: relative;
|
|
237
454
|
}
|
|
238
|
-
.eds-
|
|
239
|
-
|
|
455
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
456
|
+
height: 1.75rem;
|
|
457
|
+
width: 1.75rem;
|
|
240
458
|
}
|
|
241
|
-
.eds-contrast .eds-
|
|
242
|
-
|
|
459
|
+
.eds-contrast .eds-switch__circle {
|
|
460
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
243
461
|
}
|
|
244
|
-
.eds-
|
|
245
|
-
|
|
462
|
+
.eds-switch__switch {
|
|
463
|
+
position: relative;
|
|
464
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
465
|
+
content: "";
|
|
466
|
+
display: block;
|
|
467
|
+
transition: background-color 0.1s ease-in-out;
|
|
468
|
+
height: 1.5rem;
|
|
469
|
+
width: 3rem;
|
|
470
|
+
border-radius: 1.5rem;
|
|
471
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
246
472
|
}
|
|
247
|
-
.eds-contrast .eds-
|
|
248
|
-
|
|
473
|
+
.eds-contrast .eds-switch__switch {
|
|
474
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
249
475
|
}
|
|
250
|
-
.eds-
|
|
251
|
-
|
|
252
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
476
|
+
.eds-switch--right .eds-switch__switch {
|
|
477
|
+
margin-right: 0.75rem;
|
|
253
478
|
}
|
|
254
|
-
.eds-
|
|
255
|
-
|
|
256
|
-
|
|
479
|
+
.eds-switch__switch svg g,
|
|
480
|
+
.eds-switch__switch path {
|
|
481
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
482
|
+
transition: fill ease-in-out 0.1s;
|
|
257
483
|
}
|
|
258
|
-
.eds-
|
|
259
|
-
.eds-
|
|
260
|
-
|
|
261
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
484
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
485
|
+
.eds-contrast .eds-switch__switch path {
|
|
486
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
262
487
|
}
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
488
|
+
:checked + .eds-switch__switch {
|
|
489
|
+
background-color: var(--eds-switch-color);
|
|
266
490
|
}
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
491
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
492
|
+
left: 1.625rem;
|
|
270
493
|
}
|
|
271
|
-
.eds-
|
|
272
|
-
.eds-
|
|
273
|
-
|
|
494
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
495
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
496
|
+
fill: var(--eds-switch-color);
|
|
274
497
|
}
|
|
275
|
-
.eds-
|
|
276
|
-
|
|
277
|
-
outline: 2px solid #181c56;
|
|
278
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
279
|
-
outline-offset: 0.125rem;
|
|
498
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
499
|
+
background-color: var(--eds-switch-contrast-color);
|
|
280
500
|
}
|
|
281
|
-
|
|
282
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
501
|
+
:focus + .eds-switch__switch {
|
|
283
502
|
outline: 2px solid #181c56;
|
|
284
503
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
285
504
|
outline-offset: 0.125rem;
|
|
286
505
|
}
|
|
287
|
-
.eds-contrast
|
|
288
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
289
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
290
|
-
}
|
|
291
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
292
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
506
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
293
507
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
294
508
|
}
|
|
295
|
-
.eds-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
opacity: 0.5;
|
|
509
|
+
.eds-switch__switch--large {
|
|
510
|
+
width: 3.75rem;
|
|
511
|
+
height: 2rem;
|
|
512
|
+
border-radius: 3.75rem;
|
|
300
513
|
}
|
|
301
|
-
.eds-
|
|
302
|
-
|
|
514
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
515
|
+
left: 1.875rem;
|
|
303
516
|
}
|
|
304
|
-
.eds-
|
|
305
|
-
box-sizing: border-box;
|
|
306
|
-
display: inline-flex;
|
|
307
|
-
justify-content: center;
|
|
308
|
-
align-items: center;
|
|
517
|
+
.eds-switch__switch--large svg {
|
|
309
518
|
position: relative;
|
|
310
|
-
|
|
311
|
-
height: 1.25rem;
|
|
312
|
-
width: 1.25rem;
|
|
313
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
314
|
-
border-radius: 0.125rem;
|
|
315
|
-
background-color: transparent;
|
|
316
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
317
|
-
}
|
|
318
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
319
|
-
margin-right: 0;
|
|
519
|
+
right: 0.05rem;
|
|
320
520
|
}
|
|
321
|
-
.eds-
|
|
322
|
-
|
|
521
|
+
.eds-switch__label--large--right {
|
|
522
|
+
font-size: 1rem;
|
|
323
523
|
}
|
|
324
|
-
.eds-
|
|
325
|
-
|
|
326
|
-
width: 1rem;
|
|
327
|
-
visibility: hidden;
|
|
524
|
+
.eds-switch__label--large--bottom {
|
|
525
|
+
font-size: 0.875rem;
|
|
328
526
|
}
|
|
329
|
-
.eds-
|
|
330
|
-
|
|
331
|
-
stroke-dasharray: 48;
|
|
332
|
-
stroke-dashoffset: 48;
|
|
333
|
-
stroke-width: 0.375rem;
|
|
527
|
+
.eds-switch__label--medium--right {
|
|
528
|
+
font-size: 0.875rem;
|
|
334
529
|
}
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
100% {
|
|
338
|
-
stroke-dashoffset: 0;
|
|
339
|
-
}
|
|
530
|
+
.eds-switch__label--medium--bottom {
|
|
531
|
+
font-size: 0.75rem;
|
|
340
532
|
}
|
|
341
533
|
/* DO NOT CHANGE!*/
|
|
342
534
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -420,11 +612,6 @@
|
|
|
420
612
|
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
421
613
|
background-color: var(--components-form-radio-contrast-icon);
|
|
422
614
|
}
|
|
423
|
-
.eds-fieldset {
|
|
424
|
-
margin: 0;
|
|
425
|
-
padding: 0;
|
|
426
|
-
border: 0;
|
|
427
|
-
}
|
|
428
615
|
/* DO NOT CHANGE!*/
|
|
429
616
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
430
617
|
.eds-input-group {
|
|
@@ -556,195 +743,15 @@
|
|
|
556
743
|
}
|
|
557
744
|
/* DO NOT CHANGE!*/
|
|
558
745
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
559
|
-
.eds-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
}
|
|
564
|
-
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
565
|
-
padding-left: calc(1rem + 0.125rem);
|
|
566
|
-
}
|
|
567
|
-
.eds-feedback-text__text {
|
|
568
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
569
|
-
}
|
|
570
|
-
.eds-contrast .eds-feedback-text__text {
|
|
571
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
.eds-feedback-text__icon {
|
|
575
|
-
font-size: 1.5rem;
|
|
576
|
-
min-height: 1.5rem;
|
|
577
|
-
min-width: 1.5rem;
|
|
578
|
-
padding-right: 0.5rem;
|
|
579
|
-
position: relative;
|
|
580
|
-
top: -0.1rem;
|
|
581
|
-
}
|
|
582
|
-
.eds-feedback-text__icon--success {
|
|
583
|
-
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
584
|
-
}
|
|
585
|
-
.eds-feedback-text__icon--success circle {
|
|
586
|
-
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
587
|
-
}
|
|
588
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
589
|
-
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
590
|
-
}
|
|
591
|
-
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
592
|
-
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
593
|
-
}
|
|
594
|
-
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
595
|
-
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
596
|
-
}
|
|
597
|
-
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
598
|
-
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
599
|
-
}
|
|
600
|
-
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
601
|
-
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
602
|
-
}
|
|
603
|
-
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
604
|
-
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
605
|
-
}
|
|
606
|
-
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
607
|
-
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
608
|
-
}
|
|
609
|
-
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
610
|
-
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
611
|
-
}
|
|
612
|
-
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
613
|
-
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
614
|
-
}
|
|
615
|
-
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
616
|
-
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
617
|
-
}
|
|
618
|
-
.eds-feedback-text__icon--warning {
|
|
619
|
-
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
620
|
-
}
|
|
621
|
-
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
622
|
-
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
623
|
-
}
|
|
624
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
625
|
-
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
626
|
-
}
|
|
627
|
-
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
628
|
-
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
629
|
-
}
|
|
630
|
-
/* DO NOT CHANGE!*/
|
|
631
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
632
|
-
.eds-switch {
|
|
633
|
-
cursor: pointer;
|
|
634
|
-
-webkit-user-select: none;
|
|
635
|
-
-moz-user-select: none;
|
|
636
|
-
user-select: none;
|
|
637
|
-
padding: 0.5rem 0;
|
|
638
|
-
width: -moz-fit-content;
|
|
639
|
-
width: fit-content;
|
|
640
|
-
}
|
|
641
|
-
.eds-switch input {
|
|
642
|
-
opacity: 0;
|
|
643
|
-
pointer-events: none;
|
|
644
|
-
position: absolute;
|
|
645
|
-
}
|
|
646
|
-
.eds-switch--right {
|
|
647
|
-
display: flex;
|
|
648
|
-
flex-direction: row;
|
|
649
|
-
align-items: center;
|
|
650
|
-
}
|
|
651
|
-
.eds-switch--bottom {
|
|
652
|
-
display: flex;
|
|
653
|
-
flex-direction: column;
|
|
654
|
-
align-items: center;
|
|
655
|
-
}
|
|
656
|
-
.eds-switch__circle {
|
|
657
|
-
border-radius: 50%;
|
|
658
|
-
height: 1.25rem;
|
|
659
|
-
width: 1.25rem;
|
|
660
|
-
content: "";
|
|
661
|
-
display: flex;
|
|
662
|
-
align-items: center;
|
|
663
|
-
justify-content: center;
|
|
664
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
665
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
666
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
667
|
-
top: 0.125rem;
|
|
668
|
-
left: 0.125rem;
|
|
669
|
-
position: relative;
|
|
670
|
-
}
|
|
671
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
672
|
-
height: 1.75rem;
|
|
673
|
-
width: 1.75rem;
|
|
674
|
-
}
|
|
675
|
-
.eds-contrast .eds-switch__circle {
|
|
676
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
677
|
-
}
|
|
678
|
-
.eds-switch__switch {
|
|
679
|
-
position: relative;
|
|
680
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
681
|
-
content: "";
|
|
682
|
-
display: block;
|
|
683
|
-
transition: background-color 0.1s ease-in-out;
|
|
684
|
-
height: 1.5rem;
|
|
685
|
-
width: 3rem;
|
|
686
|
-
border-radius: 1.5rem;
|
|
687
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
688
|
-
}
|
|
689
|
-
.eds-contrast .eds-switch__switch {
|
|
690
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
691
|
-
}
|
|
692
|
-
.eds-switch--right .eds-switch__switch {
|
|
693
|
-
margin-right: 0.75rem;
|
|
694
|
-
}
|
|
695
|
-
.eds-switch__switch svg g,
|
|
696
|
-
.eds-switch__switch path {
|
|
697
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
698
|
-
transition: fill ease-in-out 0.1s;
|
|
699
|
-
}
|
|
700
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
701
|
-
.eds-contrast .eds-switch__switch path {
|
|
702
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
703
|
-
}
|
|
704
|
-
:checked + .eds-switch__switch {
|
|
705
|
-
background-color: var(--eds-switch-color);
|
|
706
|
-
}
|
|
707
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
708
|
-
left: 1.625rem;
|
|
709
|
-
}
|
|
710
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
711
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
712
|
-
fill: var(--eds-switch-color);
|
|
713
|
-
}
|
|
714
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
715
|
-
background-color: var(--eds-switch-contrast-color);
|
|
716
|
-
}
|
|
717
|
-
:focus + .eds-switch__switch {
|
|
718
|
-
outline: 2px solid #181c56;
|
|
719
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
720
|
-
outline-offset: 0.125rem;
|
|
721
|
-
}
|
|
722
|
-
.eds-contrast :focus + .eds-switch__switch {
|
|
723
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
724
|
-
}
|
|
725
|
-
.eds-switch__switch--large {
|
|
726
|
-
width: 3.75rem;
|
|
727
|
-
height: 2rem;
|
|
728
|
-
border-radius: 3.75rem;
|
|
729
|
-
}
|
|
730
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
731
|
-
left: 1.875rem;
|
|
732
|
-
}
|
|
733
|
-
.eds-switch__switch--large svg {
|
|
734
|
-
position: relative;
|
|
735
|
-
right: 0.05rem;
|
|
736
|
-
}
|
|
737
|
-
.eds-switch__label--large--right {
|
|
738
|
-
font-size: 1rem;
|
|
739
|
-
}
|
|
740
|
-
.eds-switch__label--large--bottom {
|
|
741
|
-
font-size: 0.875rem;
|
|
742
|
-
}
|
|
743
|
-
.eds-switch__label--medium--right {
|
|
744
|
-
font-size: 0.875rem;
|
|
746
|
+
textarea.eds-form-control.eds-textarea {
|
|
747
|
+
min-height: 7.75rem;
|
|
748
|
+
resize: vertical;
|
|
749
|
+
line-height: 1.5rem;
|
|
745
750
|
}
|
|
746
|
-
.eds-
|
|
747
|
-
|
|
751
|
+
.eds-fieldset {
|
|
752
|
+
margin: 0;
|
|
753
|
+
padding: 0;
|
|
754
|
+
border: 0;
|
|
748
755
|
}
|
|
749
756
|
/* DO NOT CHANGE!*/
|
|
750
757
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -904,13 +911,6 @@ input:disabled + .eds-input-panel__container {
|
|
|
904
911
|
}
|
|
905
912
|
/* DO NOT CHANGE!*/
|
|
906
913
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
907
|
-
textarea.eds-form-control.eds-textarea {
|
|
908
|
-
min-height: 7.75rem;
|
|
909
|
-
resize: vertical;
|
|
910
|
-
line-height: 1.5rem;
|
|
911
|
-
}
|
|
912
|
-
/* DO NOT CHANGE!*/
|
|
913
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
914
914
|
.eds-textfield__clear-button {
|
|
915
915
|
background: none;
|
|
916
916
|
border: none;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.10-beta.0",
|
|
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": "^6.
|
|
30
|
+
"@entur/icons": "^6.17.1-beta.0",
|
|
31
31
|
"@entur/tokens": "^3.15.0",
|
|
32
|
-
"@entur/tooltip": "^2.7.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
32
|
+
"@entur/tooltip": "^2.7.9-beta.0",
|
|
33
|
+
"@entur/typography": "^1.8.38-beta.0",
|
|
34
34
|
"@entur/utils": "^0.11.1",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "09c8ecf6671f83dbfae93ab10f77537888222f70"
|
|
38
38
|
}
|