@entur/form 8.1.3 → 8.1.4
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 +353 -353
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -5,234 +5,6 @@
|
|
|
5
5
|
}
|
|
6
6
|
/* DO NOT CHANGE!*/
|
|
7
7
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
8
|
-
.eds-checkbox__container {
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: center;
|
|
11
|
-
position: relative;
|
|
12
|
-
-webkit-appearance: none;
|
|
13
|
-
-moz-appearance: none;
|
|
14
|
-
appearance: none;
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
-webkit-user-select: none;
|
|
17
|
-
-moz-user-select: none;
|
|
18
|
-
user-select: none;
|
|
19
|
-
width: -moz-fit-content;
|
|
20
|
-
width: fit-content;
|
|
21
|
-
margin: 0.5rem 0;
|
|
22
|
-
}
|
|
23
|
-
.eds-checkbox__container--reduced-click-area {
|
|
24
|
-
height: -moz-fit-content;
|
|
25
|
-
height: fit-content;
|
|
26
|
-
}
|
|
27
|
-
.eds-checkbox__container input {
|
|
28
|
-
position: absolute;
|
|
29
|
-
opacity: 0;
|
|
30
|
-
height: 0;
|
|
31
|
-
width: 0;
|
|
32
|
-
}
|
|
33
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
34
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
35
|
-
}
|
|
36
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
37
|
-
visibility: visible;
|
|
38
|
-
}
|
|
39
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
40
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
41
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
42
|
-
}
|
|
43
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
44
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
45
|
-
}
|
|
46
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
47
|
-
opacity: 0.5;
|
|
48
|
-
}
|
|
49
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
50
|
-
opacity: 0.5;
|
|
51
|
-
}
|
|
52
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
53
|
-
opacity: 0.5;
|
|
54
|
-
}
|
|
55
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
56
|
-
opacity: 0.5;
|
|
57
|
-
}
|
|
58
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
59
|
-
opacity: 0.5;
|
|
60
|
-
}
|
|
61
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
62
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
63
|
-
}
|
|
64
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
65
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
66
|
-
}
|
|
67
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
68
|
-
fill: var(--components-form-checkbox-contrast-icon);
|
|
69
|
-
}
|
|
70
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
71
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
72
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
73
|
-
}
|
|
74
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
75
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
76
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
77
|
-
}
|
|
78
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
79
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
80
|
-
border-color: transparent;
|
|
81
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
82
|
-
}
|
|
83
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
84
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
85
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
86
|
-
}
|
|
87
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
88
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
89
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
90
|
-
}
|
|
91
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
92
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
93
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
94
|
-
}
|
|
95
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
96
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
97
|
-
outline: 2px solid #181c56;
|
|
98
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
99
|
-
outline-offset: 0.125rem;
|
|
100
|
-
}
|
|
101
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
102
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
103
|
-
outline: 2px solid #181c56;
|
|
104
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
105
|
-
outline-offset: 0.125rem;
|
|
106
|
-
}
|
|
107
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
108
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
109
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
110
|
-
}
|
|
111
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
112
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
113
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
114
|
-
}
|
|
115
|
-
.eds-checkbox--disabled {
|
|
116
|
-
pointer-events: none;
|
|
117
|
-
}
|
|
118
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
119
|
-
opacity: 0.5;
|
|
120
|
-
}
|
|
121
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
122
|
-
opacity: 0.5;
|
|
123
|
-
}
|
|
124
|
-
.eds-checkbox__icon {
|
|
125
|
-
box-sizing: border-box;
|
|
126
|
-
display: inline-flex;
|
|
127
|
-
justify-content: center;
|
|
128
|
-
align-items: center;
|
|
129
|
-
position: relative;
|
|
130
|
-
margin-right: 1rem;
|
|
131
|
-
height: 1.25rem;
|
|
132
|
-
width: 1.25rem;
|
|
133
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
134
|
-
border-radius: 0.125rem;
|
|
135
|
-
background-color: transparent;
|
|
136
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
137
|
-
}
|
|
138
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
139
|
-
margin-right: 0;
|
|
140
|
-
}
|
|
141
|
-
.eds-contrast .eds-checkbox__icon {
|
|
142
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
143
|
-
}
|
|
144
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
145
|
-
height: 1rem;
|
|
146
|
-
width: 1rem;
|
|
147
|
-
visibility: hidden;
|
|
148
|
-
}
|
|
149
|
-
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
150
|
-
transform-origin: 50% 50%;
|
|
151
|
-
stroke-dasharray: 48;
|
|
152
|
-
stroke-dashoffset: 48;
|
|
153
|
-
stroke-width: 0.375rem;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
@keyframes stroke {
|
|
157
|
-
100% {
|
|
158
|
-
stroke-dashoffset: 0;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
/* DO NOT CHANGE!*/
|
|
162
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
163
|
-
.eds-feedback-text {
|
|
164
|
-
display: flex;
|
|
165
|
-
align-items: center;
|
|
166
|
-
margin-top: 0.25rem;
|
|
167
|
-
}
|
|
168
|
-
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
169
|
-
padding-left: calc(1rem + 0.125rem);
|
|
170
|
-
}
|
|
171
|
-
.eds-feedback-text__text {
|
|
172
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
173
|
-
}
|
|
174
|
-
.eds-contrast .eds-feedback-text__text {
|
|
175
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
.eds-feedback-text__icon {
|
|
179
|
-
font-size: 1.5rem;
|
|
180
|
-
min-height: 1.5rem;
|
|
181
|
-
min-width: 1.5rem;
|
|
182
|
-
padding-right: 0.5rem;
|
|
183
|
-
position: relative;
|
|
184
|
-
top: -0.1rem;
|
|
185
|
-
}
|
|
186
|
-
.eds-feedback-text__icon--success {
|
|
187
|
-
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
188
|
-
}
|
|
189
|
-
.eds-feedback-text__icon--success circle {
|
|
190
|
-
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
191
|
-
}
|
|
192
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
193
|
-
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
194
|
-
}
|
|
195
|
-
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
196
|
-
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
197
|
-
}
|
|
198
|
-
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
199
|
-
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
200
|
-
}
|
|
201
|
-
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
202
|
-
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
203
|
-
}
|
|
204
|
-
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
205
|
-
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
206
|
-
}
|
|
207
|
-
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
208
|
-
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
209
|
-
}
|
|
210
|
-
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
211
|
-
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
212
|
-
}
|
|
213
|
-
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
214
|
-
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
215
|
-
}
|
|
216
|
-
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
217
|
-
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
218
|
-
}
|
|
219
|
-
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
220
|
-
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
221
|
-
}
|
|
222
|
-
.eds-feedback-text__icon--warning {
|
|
223
|
-
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
224
|
-
}
|
|
225
|
-
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
226
|
-
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
227
|
-
}
|
|
228
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
229
|
-
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
230
|
-
}
|
|
231
|
-
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
232
|
-
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
233
|
-
}
|
|
234
|
-
/* DO NOT CHANGE!*/
|
|
235
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
236
8
|
.eds-form-control__field-and-feedback-text {
|
|
237
9
|
display: flex;
|
|
238
10
|
flex-direction: column;
|
|
@@ -432,13 +204,241 @@
|
|
|
432
204
|
color: var(--primary-text-color);
|
|
433
205
|
cursor: pointer;
|
|
434
206
|
}
|
|
435
|
-
.eds-form-control__prepend {
|
|
436
|
-
margin-right: 0.75rem;
|
|
437
|
-
margin-left: 0;
|
|
207
|
+
.eds-form-control__prepend {
|
|
208
|
+
margin-right: 0.75rem;
|
|
209
|
+
margin-left: 0;
|
|
210
|
+
}
|
|
211
|
+
.eds-form-control__append {
|
|
212
|
+
margin-right: 0;
|
|
213
|
+
margin-left: 0.75rem;
|
|
214
|
+
}
|
|
215
|
+
/* DO NOT CHANGE!*/
|
|
216
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
217
|
+
.eds-feedback-text {
|
|
218
|
+
display: flex;
|
|
219
|
+
align-items: center;
|
|
220
|
+
margin-top: 0.25rem;
|
|
221
|
+
}
|
|
222
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
223
|
+
padding-left: calc(1rem + 0.125rem);
|
|
224
|
+
}
|
|
225
|
+
.eds-feedback-text__text {
|
|
226
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
227
|
+
}
|
|
228
|
+
.eds-contrast .eds-feedback-text__text {
|
|
229
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.eds-feedback-text__icon {
|
|
233
|
+
font-size: 1.5rem;
|
|
234
|
+
min-height: 1.5rem;
|
|
235
|
+
min-width: 1.5rem;
|
|
236
|
+
padding-right: 0.5rem;
|
|
237
|
+
position: relative;
|
|
238
|
+
top: -0.1rem;
|
|
239
|
+
}
|
|
240
|
+
.eds-feedback-text__icon--success {
|
|
241
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
242
|
+
}
|
|
243
|
+
.eds-feedback-text__icon--success circle {
|
|
244
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
245
|
+
}
|
|
246
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
247
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
248
|
+
}
|
|
249
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
250
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
251
|
+
}
|
|
252
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
253
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
254
|
+
}
|
|
255
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
256
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
257
|
+
}
|
|
258
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
259
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
260
|
+
}
|
|
261
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
262
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
263
|
+
}
|
|
264
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
265
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
266
|
+
}
|
|
267
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
268
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
269
|
+
}
|
|
270
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
271
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
272
|
+
}
|
|
273
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
274
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
275
|
+
}
|
|
276
|
+
.eds-feedback-text__icon--warning {
|
|
277
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
278
|
+
}
|
|
279
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
280
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
281
|
+
}
|
|
282
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
283
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
284
|
+
}
|
|
285
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
286
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
287
|
+
}
|
|
288
|
+
/* DO NOT CHANGE!*/
|
|
289
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
290
|
+
.eds-checkbox__container {
|
|
291
|
+
display: flex;
|
|
292
|
+
align-items: center;
|
|
293
|
+
position: relative;
|
|
294
|
+
-webkit-appearance: none;
|
|
295
|
+
-moz-appearance: none;
|
|
296
|
+
appearance: none;
|
|
297
|
+
cursor: pointer;
|
|
298
|
+
-webkit-user-select: none;
|
|
299
|
+
-moz-user-select: none;
|
|
300
|
+
user-select: none;
|
|
301
|
+
width: -moz-fit-content;
|
|
302
|
+
width: fit-content;
|
|
303
|
+
margin: 0.5rem 0;
|
|
304
|
+
}
|
|
305
|
+
.eds-checkbox__container--reduced-click-area {
|
|
306
|
+
height: -moz-fit-content;
|
|
307
|
+
height: fit-content;
|
|
308
|
+
}
|
|
309
|
+
.eds-checkbox__container input {
|
|
310
|
+
position: absolute;
|
|
311
|
+
opacity: 0;
|
|
312
|
+
height: 0;
|
|
313
|
+
width: 0;
|
|
314
|
+
}
|
|
315
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
316
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
317
|
+
}
|
|
318
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
319
|
+
visibility: visible;
|
|
320
|
+
}
|
|
321
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
322
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
323
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
324
|
+
}
|
|
325
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
326
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
327
|
+
}
|
|
328
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
329
|
+
opacity: 0.5;
|
|
330
|
+
}
|
|
331
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
332
|
+
opacity: 0.5;
|
|
333
|
+
}
|
|
334
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
335
|
+
opacity: 0.5;
|
|
336
|
+
}
|
|
337
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
338
|
+
opacity: 0.5;
|
|
339
|
+
}
|
|
340
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
341
|
+
opacity: 0.5;
|
|
342
|
+
}
|
|
343
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
344
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
345
|
+
}
|
|
346
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
347
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
348
|
+
}
|
|
349
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
350
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
351
|
+
}
|
|
352
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
353
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
354
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
355
|
+
}
|
|
356
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
357
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
358
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
359
|
+
}
|
|
360
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
361
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
362
|
+
border-color: transparent;
|
|
363
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
364
|
+
}
|
|
365
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
366
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
367
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
368
|
+
}
|
|
369
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
370
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
371
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
372
|
+
}
|
|
373
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
374
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
375
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
376
|
+
}
|
|
377
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
378
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
379
|
+
outline: 2px solid #181c56;
|
|
380
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
381
|
+
outline-offset: 0.125rem;
|
|
382
|
+
}
|
|
383
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
384
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
385
|
+
outline: 2px solid #181c56;
|
|
386
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
387
|
+
outline-offset: 0.125rem;
|
|
388
|
+
}
|
|
389
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
390
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
391
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
392
|
+
}
|
|
393
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
394
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
395
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
396
|
+
}
|
|
397
|
+
.eds-checkbox--disabled {
|
|
398
|
+
pointer-events: none;
|
|
399
|
+
}
|
|
400
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
401
|
+
opacity: 0.5;
|
|
402
|
+
}
|
|
403
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
404
|
+
opacity: 0.5;
|
|
405
|
+
}
|
|
406
|
+
.eds-checkbox__icon {
|
|
407
|
+
box-sizing: border-box;
|
|
408
|
+
display: inline-flex;
|
|
409
|
+
justify-content: center;
|
|
410
|
+
align-items: center;
|
|
411
|
+
position: relative;
|
|
412
|
+
margin-right: 1rem;
|
|
413
|
+
height: 1.25rem;
|
|
414
|
+
width: 1.25rem;
|
|
415
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
416
|
+
border-radius: 0.125rem;
|
|
417
|
+
background-color: transparent;
|
|
418
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
419
|
+
}
|
|
420
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
421
|
+
margin-right: 0;
|
|
422
|
+
}
|
|
423
|
+
.eds-contrast .eds-checkbox__icon {
|
|
424
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
425
|
+
}
|
|
426
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
427
|
+
height: 1rem;
|
|
428
|
+
width: 1rem;
|
|
429
|
+
visibility: hidden;
|
|
430
|
+
}
|
|
431
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
432
|
+
transform-origin: 50% 50%;
|
|
433
|
+
stroke-dasharray: 48;
|
|
434
|
+
stroke-dashoffset: 48;
|
|
435
|
+
stroke-width: 0.375rem;
|
|
438
436
|
}
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
437
|
+
|
|
438
|
+
@keyframes stroke {
|
|
439
|
+
100% {
|
|
440
|
+
stroke-dashoffset: 0;
|
|
441
|
+
}
|
|
442
442
|
}
|
|
443
443
|
/* DO NOT CHANGE!*/
|
|
444
444
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -625,6 +625,125 @@
|
|
|
625
625
|
}
|
|
626
626
|
/* DO NOT CHANGE!*/
|
|
627
627
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
628
|
+
.eds-switch {
|
|
629
|
+
cursor: pointer;
|
|
630
|
+
-webkit-user-select: none;
|
|
631
|
+
-moz-user-select: none;
|
|
632
|
+
user-select: none;
|
|
633
|
+
padding: 0.5rem 0;
|
|
634
|
+
width: -moz-fit-content;
|
|
635
|
+
width: fit-content;
|
|
636
|
+
}
|
|
637
|
+
.eds-switch input {
|
|
638
|
+
opacity: 0;
|
|
639
|
+
pointer-events: none;
|
|
640
|
+
position: absolute;
|
|
641
|
+
}
|
|
642
|
+
.eds-switch--right {
|
|
643
|
+
display: flex;
|
|
644
|
+
flex-direction: row;
|
|
645
|
+
align-items: center;
|
|
646
|
+
}
|
|
647
|
+
.eds-switch--bottom {
|
|
648
|
+
display: flex;
|
|
649
|
+
flex-direction: column;
|
|
650
|
+
align-items: center;
|
|
651
|
+
}
|
|
652
|
+
.eds-switch__circle {
|
|
653
|
+
border-radius: 50%;
|
|
654
|
+
height: 1.25rem;
|
|
655
|
+
width: 1.25rem;
|
|
656
|
+
content: "";
|
|
657
|
+
display: flex;
|
|
658
|
+
align-items: center;
|
|
659
|
+
justify-content: center;
|
|
660
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
661
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
662
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
663
|
+
top: 0.125rem;
|
|
664
|
+
left: 0.125rem;
|
|
665
|
+
position: relative;
|
|
666
|
+
}
|
|
667
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
668
|
+
height: 1.75rem;
|
|
669
|
+
width: 1.75rem;
|
|
670
|
+
}
|
|
671
|
+
.eds-contrast .eds-switch__circle {
|
|
672
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
673
|
+
}
|
|
674
|
+
.eds-switch__switch {
|
|
675
|
+
position: relative;
|
|
676
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
677
|
+
content: "";
|
|
678
|
+
display: block;
|
|
679
|
+
transition: background-color 0.1s ease-in-out;
|
|
680
|
+
height: 1.5rem;
|
|
681
|
+
width: 3rem;
|
|
682
|
+
border-radius: 1.5rem;
|
|
683
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
684
|
+
}
|
|
685
|
+
.eds-contrast .eds-switch__switch {
|
|
686
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
687
|
+
}
|
|
688
|
+
.eds-switch--right .eds-switch__switch {
|
|
689
|
+
margin-right: 0.75rem;
|
|
690
|
+
}
|
|
691
|
+
.eds-switch__switch svg g,
|
|
692
|
+
.eds-switch__switch path {
|
|
693
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
694
|
+
transition: fill ease-in-out 0.1s;
|
|
695
|
+
}
|
|
696
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
697
|
+
.eds-contrast .eds-switch__switch path {
|
|
698
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
699
|
+
}
|
|
700
|
+
:checked + .eds-switch__switch {
|
|
701
|
+
background-color: var(--eds-switch-color);
|
|
702
|
+
}
|
|
703
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
704
|
+
left: 1.625rem;
|
|
705
|
+
}
|
|
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);
|
|
709
|
+
}
|
|
710
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
711
|
+
background-color: var(--eds-switch-contrast-color);
|
|
712
|
+
}
|
|
713
|
+
:focus + .eds-switch__switch {
|
|
714
|
+
outline: 2px solid #181c56;
|
|
715
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
716
|
+
outline-offset: 0.125rem;
|
|
717
|
+
}
|
|
718
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
719
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
720
|
+
}
|
|
721
|
+
.eds-switch__switch--large {
|
|
722
|
+
width: 3.75rem;
|
|
723
|
+
height: 2rem;
|
|
724
|
+
border-radius: 3.75rem;
|
|
725
|
+
}
|
|
726
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
727
|
+
left: 1.875rem;
|
|
728
|
+
}
|
|
729
|
+
.eds-switch__switch--large svg {
|
|
730
|
+
position: relative;
|
|
731
|
+
right: 0.05rem;
|
|
732
|
+
}
|
|
733
|
+
.eds-switch__label--large--right {
|
|
734
|
+
font-size: 1rem;
|
|
735
|
+
}
|
|
736
|
+
.eds-switch__label--large--bottom {
|
|
737
|
+
font-size: 0.875rem;
|
|
738
|
+
}
|
|
739
|
+
.eds-switch__label--medium--right {
|
|
740
|
+
font-size: 0.875rem;
|
|
741
|
+
}
|
|
742
|
+
.eds-switch__label--medium--bottom {
|
|
743
|
+
font-size: 0.75rem;
|
|
744
|
+
}
|
|
745
|
+
/* DO NOT CHANGE!*/
|
|
746
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
628
747
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
629
748
|
outline: 2px solid #181c56;
|
|
630
749
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
@@ -781,125 +900,6 @@ input:disabled + .eds-input-panel__container {
|
|
|
781
900
|
}
|
|
782
901
|
/* DO NOT CHANGE!*/
|
|
783
902
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
784
|
-
.eds-switch {
|
|
785
|
-
cursor: pointer;
|
|
786
|
-
-webkit-user-select: none;
|
|
787
|
-
-moz-user-select: none;
|
|
788
|
-
user-select: none;
|
|
789
|
-
padding: 0.5rem 0;
|
|
790
|
-
width: -moz-fit-content;
|
|
791
|
-
width: fit-content;
|
|
792
|
-
}
|
|
793
|
-
.eds-switch input {
|
|
794
|
-
opacity: 0;
|
|
795
|
-
pointer-events: none;
|
|
796
|
-
position: absolute;
|
|
797
|
-
}
|
|
798
|
-
.eds-switch--right {
|
|
799
|
-
display: flex;
|
|
800
|
-
flex-direction: row;
|
|
801
|
-
align-items: center;
|
|
802
|
-
}
|
|
803
|
-
.eds-switch--bottom {
|
|
804
|
-
display: flex;
|
|
805
|
-
flex-direction: column;
|
|
806
|
-
align-items: center;
|
|
807
|
-
}
|
|
808
|
-
.eds-switch__circle {
|
|
809
|
-
border-radius: 50%;
|
|
810
|
-
height: 1.25rem;
|
|
811
|
-
width: 1.25rem;
|
|
812
|
-
content: "";
|
|
813
|
-
display: flex;
|
|
814
|
-
align-items: center;
|
|
815
|
-
justify-content: center;
|
|
816
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
817
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
818
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
819
|
-
top: 0.125rem;
|
|
820
|
-
left: 0.125rem;
|
|
821
|
-
position: relative;
|
|
822
|
-
}
|
|
823
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
824
|
-
height: 1.75rem;
|
|
825
|
-
width: 1.75rem;
|
|
826
|
-
}
|
|
827
|
-
.eds-contrast .eds-switch__circle {
|
|
828
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
829
|
-
}
|
|
830
|
-
.eds-switch__switch {
|
|
831
|
-
position: relative;
|
|
832
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
833
|
-
content: "";
|
|
834
|
-
display: block;
|
|
835
|
-
transition: background-color 0.1s ease-in-out;
|
|
836
|
-
height: 1.5rem;
|
|
837
|
-
width: 3rem;
|
|
838
|
-
border-radius: 1.5rem;
|
|
839
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
840
|
-
}
|
|
841
|
-
.eds-contrast .eds-switch__switch {
|
|
842
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
843
|
-
}
|
|
844
|
-
.eds-switch--right .eds-switch__switch {
|
|
845
|
-
margin-right: 0.75rem;
|
|
846
|
-
}
|
|
847
|
-
.eds-switch__switch svg g,
|
|
848
|
-
.eds-switch__switch path {
|
|
849
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
850
|
-
transition: fill ease-in-out 0.1s;
|
|
851
|
-
}
|
|
852
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
853
|
-
.eds-contrast .eds-switch__switch path {
|
|
854
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
855
|
-
}
|
|
856
|
-
:checked + .eds-switch__switch {
|
|
857
|
-
background-color: var(--eds-switch-color);
|
|
858
|
-
}
|
|
859
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
860
|
-
left: 1.625rem;
|
|
861
|
-
}
|
|
862
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
863
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
864
|
-
fill: var(--eds-switch-color);
|
|
865
|
-
}
|
|
866
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
867
|
-
background-color: var(--eds-switch-contrast-color);
|
|
868
|
-
}
|
|
869
|
-
:focus + .eds-switch__switch {
|
|
870
|
-
outline: 2px solid #181c56;
|
|
871
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
872
|
-
outline-offset: 0.125rem;
|
|
873
|
-
}
|
|
874
|
-
.eds-contrast :focus + .eds-switch__switch {
|
|
875
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
876
|
-
}
|
|
877
|
-
.eds-switch__switch--large {
|
|
878
|
-
width: 3.75rem;
|
|
879
|
-
height: 2rem;
|
|
880
|
-
border-radius: 3.75rem;
|
|
881
|
-
}
|
|
882
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
883
|
-
left: 1.875rem;
|
|
884
|
-
}
|
|
885
|
-
.eds-switch__switch--large svg {
|
|
886
|
-
position: relative;
|
|
887
|
-
right: 0.05rem;
|
|
888
|
-
}
|
|
889
|
-
.eds-switch__label--large--right {
|
|
890
|
-
font-size: 1rem;
|
|
891
|
-
}
|
|
892
|
-
.eds-switch__label--large--bottom {
|
|
893
|
-
font-size: 0.875rem;
|
|
894
|
-
}
|
|
895
|
-
.eds-switch__label--medium--right {
|
|
896
|
-
font-size: 0.875rem;
|
|
897
|
-
}
|
|
898
|
-
.eds-switch__label--medium--bottom {
|
|
899
|
-
font-size: 0.75rem;
|
|
900
|
-
}
|
|
901
|
-
/* DO NOT CHANGE!*/
|
|
902
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
903
903
|
/* DO NOT CHANGE!*/
|
|
904
904
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
905
905
|
/* DO NOT CHANGE!*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "8.1.
|
|
3
|
+
"version": "8.1.4",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/form.esm.js",
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@entur/icons": "^7.4.1",
|
|
31
31
|
"@entur/tokens": "^3.17.1",
|
|
32
|
-
"@entur/tooltip": "^5.
|
|
32
|
+
"@entur/tooltip": "^5.1.0",
|
|
33
33
|
"@entur/typography": "^1.8.46",
|
|
34
34
|
"@entur/utils": "^0.12.0",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "7df4cea445e3dac77f80619ea0c298dc0b5c31e0"
|
|
38
38
|
}
|