@entur/form 5.4.18 → 5.4.20
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 +322 -311
- package/package.json +5 -5
package/dist/styles.css
CHANGED
|
@@ -1,185 +1,6 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--eds-form: 1;
|
|
3
|
-
}/* DO NOT CHANGE!*/
|
|
4
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
|
-
.eds-feedback-text {
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
margin-top: 0.25rem;
|
|
9
|
-
}
|
|
10
|
-
.eds-feedback-text--info {
|
|
11
|
-
padding-left: calc(1rem + 0.125rem);
|
|
12
|
-
}
|
|
13
|
-
.eds-feedback-text__text {
|
|
14
|
-
color: #181c56;
|
|
15
|
-
}
|
|
16
|
-
.eds-contrast .eds-feedback-text__text {
|
|
17
|
-
color: #ffffff;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.eds-feedback-text__icon {
|
|
21
|
-
font-size: 1.5rem;
|
|
22
|
-
min-height: 1.5rem;
|
|
23
|
-
min-width: 1.5rem;
|
|
24
|
-
padding-right: 0.5rem;
|
|
25
|
-
position: relative;
|
|
26
|
-
top: -0.1rem;
|
|
27
|
-
}
|
|
28
|
-
.eds-feedback-text__icon--success {
|
|
29
|
-
color: #1a8e60;
|
|
30
|
-
}
|
|
31
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
32
|
-
color: #5ac39a;
|
|
33
|
-
}
|
|
34
|
-
.eds-feedback-text__icon--error {
|
|
35
|
-
color: #d31b1b;
|
|
36
|
-
}
|
|
37
|
-
.eds-contrast .eds-feedback-text__icon--error {
|
|
38
|
-
color: #ff9494;
|
|
39
|
-
}
|
|
40
|
-
.eds-feedback-text__icon--info {
|
|
41
|
-
color: #0082b9;
|
|
42
|
-
}
|
|
43
|
-
.eds-contrast .eds-feedback-text__icon--info {
|
|
44
|
-
color: #64b3e7;
|
|
45
|
-
}
|
|
46
|
-
.eds-feedback-text__icon--warning {
|
|
47
|
-
color: #ffca28;
|
|
48
|
-
}
|
|
49
|
-
.eds-feedback-text__icon--warning circle {
|
|
50
|
-
fill: #181c56;
|
|
51
|
-
}
|
|
52
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
53
|
-
color: #ffe082;
|
|
54
|
-
}/* DO NOT CHANGE!*/
|
|
55
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
56
|
-
.eds-checkbox__container {
|
|
57
|
-
display: flex;
|
|
58
|
-
align-items: center;
|
|
59
|
-
position: relative;
|
|
60
|
-
-webkit-appearance: none;
|
|
61
|
-
-moz-appearance: none;
|
|
62
|
-
appearance: none;
|
|
63
|
-
cursor: pointer;
|
|
64
|
-
height: 2rem;
|
|
65
|
-
-webkit-user-select: none;
|
|
66
|
-
-moz-user-select: none;
|
|
67
|
-
user-select: none;
|
|
68
|
-
width: -moz-fit-content;
|
|
69
|
-
width: fit-content;
|
|
70
|
-
}
|
|
71
|
-
.eds-checkbox__container--reduced-click-area {
|
|
72
|
-
height: -moz-fit-content;
|
|
73
|
-
height: fit-content;
|
|
74
|
-
}
|
|
75
|
-
.eds-checkbox__container input {
|
|
76
|
-
position: absolute;
|
|
77
|
-
opacity: 0;
|
|
78
|
-
height: 0;
|
|
79
|
-
width: 0;
|
|
80
|
-
}
|
|
81
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
82
|
-
background-color: #181c56;
|
|
83
|
-
}
|
|
84
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
85
|
-
visibility: visible;
|
|
86
|
-
}
|
|
87
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
|
|
88
|
-
stroke: #ffffff;
|
|
89
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
90
|
-
}
|
|
91
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
92
|
-
opacity: 0.5;
|
|
93
|
-
}
|
|
94
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
|
|
95
|
-
opacity: 0.5;
|
|
96
3
|
}
|
|
97
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
98
|
-
background: #54568c;
|
|
99
|
-
}
|
|
100
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
101
|
-
border-color: #54568c;
|
|
102
|
-
background: #f3f3f3;
|
|
103
|
-
}
|
|
104
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
105
|
-
border-color: #656782;
|
|
106
|
-
background: #292b6a;
|
|
107
|
-
}
|
|
108
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
109
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
110
|
-
border-color: #54568c;
|
|
111
|
-
background-color: #54568c;
|
|
112
|
-
}
|
|
113
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
114
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
115
|
-
background: #8285a8;
|
|
116
|
-
border-color: #8285a8;
|
|
117
|
-
}
|
|
118
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
119
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
120
|
-
outline: none;
|
|
121
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
122
|
-
outline-offset: 0.125rem;
|
|
123
|
-
}
|
|
124
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
125
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
126
|
-
outline: none;
|
|
127
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
128
|
-
outline-offset: 0.125rem;
|
|
129
|
-
}
|
|
130
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
131
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
132
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
133
|
-
}
|
|
134
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
135
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
136
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
137
|
-
}
|
|
138
|
-
.eds-checkbox--disabled {
|
|
139
|
-
pointer-events: none;
|
|
140
|
-
}
|
|
141
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
142
|
-
opacity: 0.5;
|
|
143
|
-
}
|
|
144
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
145
|
-
opacity: 0.5;
|
|
146
|
-
}
|
|
147
|
-
.eds-checkbox__icon {
|
|
148
|
-
display: inline-flex;
|
|
149
|
-
justify-content: center;
|
|
150
|
-
align-items: center;
|
|
151
|
-
position: relative;
|
|
152
|
-
margin-right: 1rem;
|
|
153
|
-
height: 1.25rem;
|
|
154
|
-
width: 1.25rem;
|
|
155
|
-
border: 0.125rem solid #181c56;
|
|
156
|
-
border-radius: 0.0625rem;
|
|
157
|
-
background-color: transparent;
|
|
158
|
-
color: #ffffff;
|
|
159
|
-
}
|
|
160
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
161
|
-
margin-right: 0;
|
|
162
|
-
}
|
|
163
|
-
.eds-contrast .eds-checkbox__icon {
|
|
164
|
-
border-color: #54568c;
|
|
165
|
-
}
|
|
166
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
167
|
-
height: 1rem;
|
|
168
|
-
width: 1rem;
|
|
169
|
-
visibility: hidden;
|
|
170
|
-
}
|
|
171
|
-
.eds-checkbox__icon .eds-checkbox-icon__path {
|
|
172
|
-
transform-origin: 50% 50%;
|
|
173
|
-
stroke-dasharray: 48;
|
|
174
|
-
stroke-dashoffset: 48;
|
|
175
|
-
stroke-width: 0.375rem;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
@keyframes stroke {
|
|
179
|
-
100% {
|
|
180
|
-
stroke-dashoffset: 0;
|
|
181
|
-
}
|
|
182
|
-
}@charset "UTF-8";
|
|
183
4
|
/* DO NOT CHANGE!*/
|
|
184
5
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
185
6
|
.eds-form-control-wrapper {
|
|
@@ -260,7 +81,7 @@
|
|
|
260
81
|
background: #f8f8f8;
|
|
261
82
|
--textarea-label-background: $colors-greys-grey90;
|
|
262
83
|
}
|
|
263
|
-
.eds-contrast .eds-form-control-wrapper--readonly
|
|
84
|
+
.eds-contrast .eds-form-control-wrapper--readonly {
|
|
264
85
|
background: #292b6a;
|
|
265
86
|
--textarea-label-background: $colors-blues-blue10;
|
|
266
87
|
color: #ffffff;
|
|
@@ -422,7 +243,189 @@
|
|
|
422
243
|
}
|
|
423
244
|
.eds-form-control__append {
|
|
424
245
|
margin-left: 0;
|
|
425
|
-
}
|
|
246
|
+
}
|
|
247
|
+
/* DO NOT CHANGE!*/
|
|
248
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
249
|
+
.eds-feedback-text {
|
|
250
|
+
display: flex;
|
|
251
|
+
align-items: center;
|
|
252
|
+
margin-top: 0.25rem;
|
|
253
|
+
}
|
|
254
|
+
.eds-feedback-text--info {
|
|
255
|
+
padding-left: calc(1rem + 0.125rem);
|
|
256
|
+
}
|
|
257
|
+
.eds-feedback-text__text {
|
|
258
|
+
color: #181c56;
|
|
259
|
+
}
|
|
260
|
+
.eds-contrast .eds-feedback-text__text {
|
|
261
|
+
color: #ffffff;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.eds-feedback-text__icon {
|
|
265
|
+
font-size: 1.5rem;
|
|
266
|
+
min-height: 1.5rem;
|
|
267
|
+
min-width: 1.5rem;
|
|
268
|
+
padding-right: 0.5rem;
|
|
269
|
+
position: relative;
|
|
270
|
+
top: -0.1rem;
|
|
271
|
+
}
|
|
272
|
+
.eds-feedback-text__icon--success {
|
|
273
|
+
color: #1a8e60;
|
|
274
|
+
}
|
|
275
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
276
|
+
color: #5ac39a;
|
|
277
|
+
}
|
|
278
|
+
.eds-feedback-text__icon--error {
|
|
279
|
+
color: #d31b1b;
|
|
280
|
+
}
|
|
281
|
+
.eds-contrast .eds-feedback-text__icon--error {
|
|
282
|
+
color: #ff9494;
|
|
283
|
+
}
|
|
284
|
+
.eds-feedback-text__icon--info {
|
|
285
|
+
color: #0082b9;
|
|
286
|
+
}
|
|
287
|
+
.eds-contrast .eds-feedback-text__icon--info {
|
|
288
|
+
color: #64b3e7;
|
|
289
|
+
}
|
|
290
|
+
.eds-feedback-text__icon--warning {
|
|
291
|
+
color: #ffca28;
|
|
292
|
+
}
|
|
293
|
+
.eds-feedback-text__icon--warning circle {
|
|
294
|
+
fill: #181c56;
|
|
295
|
+
}
|
|
296
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
297
|
+
color: #ffe082;
|
|
298
|
+
}
|
|
299
|
+
/* DO NOT CHANGE!*/
|
|
300
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
301
|
+
.eds-checkbox__container {
|
|
302
|
+
display: flex;
|
|
303
|
+
align-items: center;
|
|
304
|
+
position: relative;
|
|
305
|
+
-webkit-appearance: none;
|
|
306
|
+
-moz-appearance: none;
|
|
307
|
+
appearance: none;
|
|
308
|
+
cursor: pointer;
|
|
309
|
+
height: 2rem;
|
|
310
|
+
-webkit-user-select: none;
|
|
311
|
+
-moz-user-select: none;
|
|
312
|
+
user-select: none;
|
|
313
|
+
width: -moz-fit-content;
|
|
314
|
+
width: fit-content;
|
|
315
|
+
}
|
|
316
|
+
.eds-checkbox__container--reduced-click-area {
|
|
317
|
+
height: -moz-fit-content;
|
|
318
|
+
height: fit-content;
|
|
319
|
+
}
|
|
320
|
+
.eds-checkbox__container input {
|
|
321
|
+
position: absolute;
|
|
322
|
+
opacity: 0;
|
|
323
|
+
height: 0;
|
|
324
|
+
width: 0;
|
|
325
|
+
}
|
|
326
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
327
|
+
background-color: #181c56;
|
|
328
|
+
}
|
|
329
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
330
|
+
visibility: visible;
|
|
331
|
+
}
|
|
332
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
|
|
333
|
+
stroke: #ffffff;
|
|
334
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
335
|
+
}
|
|
336
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
337
|
+
opacity: 0.5;
|
|
338
|
+
}
|
|
339
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
|
|
340
|
+
opacity: 0.5;
|
|
341
|
+
}
|
|
342
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
343
|
+
background: #54568c;
|
|
344
|
+
}
|
|
345
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
346
|
+
border-color: #54568c;
|
|
347
|
+
background: #f3f3f3;
|
|
348
|
+
}
|
|
349
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
350
|
+
border-color: #656782;
|
|
351
|
+
background: #292b6a;
|
|
352
|
+
}
|
|
353
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
354
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
355
|
+
border-color: #54568c;
|
|
356
|
+
background-color: #54568c;
|
|
357
|
+
}
|
|
358
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
359
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
360
|
+
background: #8285a8;
|
|
361
|
+
border-color: #8285a8;
|
|
362
|
+
}
|
|
363
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
364
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
365
|
+
outline: none;
|
|
366
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
367
|
+
outline-offset: 0.125rem;
|
|
368
|
+
}
|
|
369
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
370
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
371
|
+
outline: none;
|
|
372
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
373
|
+
outline-offset: 0.125rem;
|
|
374
|
+
}
|
|
375
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
376
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
377
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
378
|
+
}
|
|
379
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
380
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
381
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
382
|
+
}
|
|
383
|
+
.eds-checkbox--disabled {
|
|
384
|
+
pointer-events: none;
|
|
385
|
+
}
|
|
386
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
387
|
+
opacity: 0.5;
|
|
388
|
+
}
|
|
389
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
390
|
+
opacity: 0.5;
|
|
391
|
+
}
|
|
392
|
+
.eds-checkbox__icon {
|
|
393
|
+
display: inline-flex;
|
|
394
|
+
justify-content: center;
|
|
395
|
+
align-items: center;
|
|
396
|
+
position: relative;
|
|
397
|
+
margin-right: 1rem;
|
|
398
|
+
height: 1.25rem;
|
|
399
|
+
width: 1.25rem;
|
|
400
|
+
border: 0.125rem solid #181c56;
|
|
401
|
+
border-radius: 0.0625rem;
|
|
402
|
+
background-color: transparent;
|
|
403
|
+
color: #ffffff;
|
|
404
|
+
}
|
|
405
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
406
|
+
margin-right: 0;
|
|
407
|
+
}
|
|
408
|
+
.eds-contrast .eds-checkbox__icon {
|
|
409
|
+
border-color: #54568c;
|
|
410
|
+
}
|
|
411
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
412
|
+
height: 1rem;
|
|
413
|
+
width: 1rem;
|
|
414
|
+
visibility: hidden;
|
|
415
|
+
}
|
|
416
|
+
.eds-checkbox__icon .eds-checkbox-icon__path {
|
|
417
|
+
transform-origin: 50% 50%;
|
|
418
|
+
stroke-dasharray: 48;
|
|
419
|
+
stroke-dashoffset: 48;
|
|
420
|
+
stroke-width: 0.375rem;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
@keyframes stroke {
|
|
424
|
+
100% {
|
|
425
|
+
stroke-dashoffset: 0;
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
/* DO NOT CHANGE!*/
|
|
426
429
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
427
430
|
.eds-fieldset {
|
|
428
431
|
margin: 0;
|
|
@@ -431,7 +434,8 @@
|
|
|
431
434
|
}
|
|
432
435
|
.eds-fieldset .eds-legend {
|
|
433
436
|
margin: 0 0 0.5rem;
|
|
434
|
-
}
|
|
437
|
+
}
|
|
438
|
+
/* DO NOT CHANGE!*/
|
|
435
439
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
436
440
|
.eds-input-group {
|
|
437
441
|
color: inherit;
|
|
@@ -564,7 +568,8 @@
|
|
|
564
568
|
line-height: 1rem;
|
|
565
569
|
padding: 0;
|
|
566
570
|
margin-left: 1rem;
|
|
567
|
-
}
|
|
571
|
+
}
|
|
572
|
+
/* DO NOT CHANGE!*/
|
|
568
573
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
569
574
|
.eds-form-component--radio__container {
|
|
570
575
|
display: flex;
|
|
@@ -651,123 +656,8 @@
|
|
|
651
656
|
}
|
|
652
657
|
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
653
658
|
background-color: #aeb7e2;
|
|
654
|
-
}/* DO NOT CHANGE!*/
|
|
655
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
656
|
-
.eds-switch {
|
|
657
|
-
cursor: pointer;
|
|
658
|
-
-webkit-user-select: none;
|
|
659
|
-
-moz-user-select: none;
|
|
660
|
-
user-select: none;
|
|
661
|
-
padding: 0.5rem 0;
|
|
662
|
-
width: -moz-fit-content;
|
|
663
|
-
width: fit-content;
|
|
664
|
-
}
|
|
665
|
-
.eds-switch input {
|
|
666
|
-
opacity: 0;
|
|
667
|
-
pointer-events: none;
|
|
668
|
-
position: absolute;
|
|
669
|
-
}
|
|
670
|
-
.eds-switch--right {
|
|
671
|
-
display: flex;
|
|
672
|
-
flex-direction: row;
|
|
673
|
-
align-items: center;
|
|
674
|
-
}
|
|
675
|
-
.eds-switch--bottom {
|
|
676
|
-
display: flex;
|
|
677
|
-
flex-direction: column;
|
|
678
|
-
align-items: center;
|
|
679
|
-
}
|
|
680
|
-
.eds-switch__circle {
|
|
681
|
-
border-radius: 50%;
|
|
682
|
-
height: 1.25rem;
|
|
683
|
-
width: 1.25rem;
|
|
684
|
-
content: "";
|
|
685
|
-
display: flex;
|
|
686
|
-
align-items: center;
|
|
687
|
-
justify-content: center;
|
|
688
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
689
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
690
|
-
background-color: #ffffff;
|
|
691
|
-
top: 0.125rem;
|
|
692
|
-
left: 0.125rem;
|
|
693
|
-
position: relative;
|
|
694
|
-
}
|
|
695
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
696
|
-
height: 1.75rem;
|
|
697
|
-
width: 1.75rem;
|
|
698
|
-
}
|
|
699
|
-
.eds-switch .eds-switch__switch svg g,
|
|
700
|
-
.eds-switch .eds-switch__switch path {
|
|
701
|
-
fill: #949494;
|
|
702
|
-
transition: fill ease-in-out 0.1s;
|
|
703
|
-
}
|
|
704
|
-
.eds-switch__switch {
|
|
705
|
-
position: relative;
|
|
706
|
-
background-color: #d1d3d3;
|
|
707
|
-
content: "";
|
|
708
|
-
display: block;
|
|
709
|
-
transition: background-color 0.1s ease-in-out;
|
|
710
|
-
height: 1.5rem;
|
|
711
|
-
width: 3rem;
|
|
712
|
-
border-radius: 1.5rem;
|
|
713
|
-
}
|
|
714
|
-
.eds-switch--right .eds-switch__switch {
|
|
715
|
-
margin-right: 0.75rem;
|
|
716
|
-
}
|
|
717
|
-
:checked + .eds-switch__switch {
|
|
718
|
-
background-color: var(--eds-switch-color);
|
|
719
|
-
}
|
|
720
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
721
|
-
left: 1.625rem;
|
|
722
|
-
}
|
|
723
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
724
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
725
|
-
fill: var(--eds-switch-color);
|
|
726
|
-
}
|
|
727
|
-
.eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
728
|
-
.eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
|
|
729
|
-
fill: var(--eds-switch-color);
|
|
730
|
-
}
|
|
731
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
732
|
-
background-color: var(--eds-switch-contrast-color);
|
|
733
|
-
}
|
|
734
|
-
:focus + .eds-switch__switch {
|
|
735
|
-
outline: none;
|
|
736
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
737
|
-
outline-offset: 0.125rem;
|
|
738
|
-
}
|
|
739
|
-
.eds-contrast :focus + .eds-switch__switch {
|
|
740
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
741
|
-
}
|
|
742
|
-
.eds-contrast .eds-switch__switch {
|
|
743
|
-
background-color: #54568c;
|
|
744
|
-
}
|
|
745
|
-
.eds-switch__switch--large {
|
|
746
|
-
width: 3.75rem;
|
|
747
|
-
height: 2rem;
|
|
748
|
-
border-radius: 3.75rem;
|
|
749
|
-
}
|
|
750
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
751
|
-
left: 1.875rem;
|
|
752
|
-
}
|
|
753
|
-
.eds-switch__label--large--right {
|
|
754
|
-
font-size: 1rem;
|
|
755
|
-
}
|
|
756
|
-
.eds-switch__label--large--bottom {
|
|
757
|
-
font-size: 0.875rem;
|
|
758
659
|
}
|
|
759
|
-
|
|
760
|
-
font-size: 0.875rem;
|
|
761
|
-
}
|
|
762
|
-
.eds-switch__label--medium--bottom {
|
|
763
|
-
font-size: 0.75rem;
|
|
764
|
-
}/* DO NOT CHANGE!*/
|
|
765
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
766
|
-
textarea.eds-form-control.eds-textarea {
|
|
767
|
-
min-height: 7.75rem;
|
|
768
|
-
resize: vertical;
|
|
769
|
-
line-height: 1.5rem;
|
|
770
|
-
}/* DO NOT CHANGE!*/
|
|
660
|
+
/* DO NOT CHANGE!*/
|
|
771
661
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
772
662
|
.eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
|
|
773
663
|
border-color: #181c56;
|
|
@@ -906,7 +796,126 @@ textarea.eds-form-control.eds-textarea {
|
|
|
906
796
|
stroke-dasharray: 48;
|
|
907
797
|
stroke-dashoffset: 48;
|
|
908
798
|
stroke-width: 0.375rem;
|
|
909
|
-
}
|
|
799
|
+
}
|
|
800
|
+
/* DO NOT CHANGE!*/
|
|
801
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
802
|
+
.eds-switch {
|
|
803
|
+
cursor: pointer;
|
|
804
|
+
-webkit-user-select: none;
|
|
805
|
+
-moz-user-select: none;
|
|
806
|
+
user-select: none;
|
|
807
|
+
padding: 0.5rem 0;
|
|
808
|
+
width: -moz-fit-content;
|
|
809
|
+
width: fit-content;
|
|
810
|
+
}
|
|
811
|
+
.eds-switch input {
|
|
812
|
+
opacity: 0;
|
|
813
|
+
pointer-events: none;
|
|
814
|
+
position: absolute;
|
|
815
|
+
}
|
|
816
|
+
.eds-switch--right {
|
|
817
|
+
display: flex;
|
|
818
|
+
flex-direction: row;
|
|
819
|
+
align-items: center;
|
|
820
|
+
}
|
|
821
|
+
.eds-switch--bottom {
|
|
822
|
+
display: flex;
|
|
823
|
+
flex-direction: column;
|
|
824
|
+
align-items: center;
|
|
825
|
+
}
|
|
826
|
+
.eds-switch__circle {
|
|
827
|
+
border-radius: 50%;
|
|
828
|
+
height: 1.25rem;
|
|
829
|
+
width: 1.25rem;
|
|
830
|
+
content: "";
|
|
831
|
+
display: flex;
|
|
832
|
+
align-items: center;
|
|
833
|
+
justify-content: center;
|
|
834
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
835
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
836
|
+
background-color: #ffffff;
|
|
837
|
+
top: 0.125rem;
|
|
838
|
+
left: 0.125rem;
|
|
839
|
+
position: relative;
|
|
840
|
+
}
|
|
841
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
842
|
+
height: 1.75rem;
|
|
843
|
+
width: 1.75rem;
|
|
844
|
+
}
|
|
845
|
+
.eds-switch .eds-switch__switch svg g,
|
|
846
|
+
.eds-switch .eds-switch__switch path {
|
|
847
|
+
fill: #949494;
|
|
848
|
+
transition: fill ease-in-out 0.1s;
|
|
849
|
+
}
|
|
850
|
+
.eds-switch__switch {
|
|
851
|
+
position: relative;
|
|
852
|
+
background-color: #d1d3d3;
|
|
853
|
+
content: "";
|
|
854
|
+
display: block;
|
|
855
|
+
transition: background-color 0.1s ease-in-out;
|
|
856
|
+
height: 1.5rem;
|
|
857
|
+
width: 3rem;
|
|
858
|
+
border-radius: 1.5rem;
|
|
859
|
+
}
|
|
860
|
+
.eds-switch--right .eds-switch__switch {
|
|
861
|
+
margin-right: 0.75rem;
|
|
862
|
+
}
|
|
863
|
+
:checked + .eds-switch__switch {
|
|
864
|
+
background-color: var(--eds-switch-color);
|
|
865
|
+
}
|
|
866
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
867
|
+
left: 1.625rem;
|
|
868
|
+
}
|
|
869
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
870
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
871
|
+
fill: var(--eds-switch-color);
|
|
872
|
+
}
|
|
873
|
+
.eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
874
|
+
.eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
|
|
875
|
+
fill: var(--eds-switch-color);
|
|
876
|
+
}
|
|
877
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
878
|
+
background-color: var(--eds-switch-contrast-color);
|
|
879
|
+
}
|
|
880
|
+
:focus + .eds-switch__switch {
|
|
881
|
+
outline: none;
|
|
882
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
883
|
+
outline-offset: 0.125rem;
|
|
884
|
+
}
|
|
885
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
886
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
887
|
+
}
|
|
888
|
+
.eds-contrast .eds-switch__switch {
|
|
889
|
+
background-color: #54568c;
|
|
890
|
+
}
|
|
891
|
+
.eds-switch__switch--large {
|
|
892
|
+
width: 3.75rem;
|
|
893
|
+
height: 2rem;
|
|
894
|
+
border-radius: 3.75rem;
|
|
895
|
+
}
|
|
896
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
897
|
+
left: 1.875rem;
|
|
898
|
+
}
|
|
899
|
+
.eds-switch__label--large--right {
|
|
900
|
+
font-size: 1rem;
|
|
901
|
+
}
|
|
902
|
+
.eds-switch__label--large--bottom {
|
|
903
|
+
font-size: 0.875rem;
|
|
904
|
+
}
|
|
905
|
+
.eds-switch__label--medium--right {
|
|
906
|
+
font-size: 0.875rem;
|
|
907
|
+
}
|
|
908
|
+
.eds-switch__label--medium--bottom {
|
|
909
|
+
font-size: 0.75rem;
|
|
910
|
+
}
|
|
911
|
+
/* DO NOT CHANGE!*/
|
|
912
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
913
|
+
textarea.eds-form-control.eds-textarea {
|
|
914
|
+
min-height: 7.75rem;
|
|
915
|
+
resize: vertical;
|
|
916
|
+
line-height: 1.5rem;
|
|
917
|
+
}
|
|
918
|
+
/* DO NOT CHANGE!*/
|
|
910
919
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
911
920
|
.eds-textfield__clear-button {
|
|
912
921
|
background: none;
|
|
@@ -942,7 +951,19 @@ textarea.eds-form-control.eds-textarea {
|
|
|
942
951
|
}
|
|
943
952
|
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
944
953
|
background-color: #8285a8;
|
|
945
|
-
}
|
|
954
|
+
}
|
|
955
|
+
/* DO NOT CHANGE!*/
|
|
956
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
957
|
+
.eds-segmented-control {
|
|
958
|
+
margin-top: 0.25rem;
|
|
959
|
+
display: flex;
|
|
960
|
+
background: #d1d4e3;
|
|
961
|
+
border-radius: 0.5rem;
|
|
962
|
+
}
|
|
963
|
+
.eds-contrast .eds-segmented-control {
|
|
964
|
+
background: #393d79;
|
|
965
|
+
}
|
|
966
|
+
/* DO NOT CHANGE!*/
|
|
946
967
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
947
968
|
.eds-segmented-choice {
|
|
948
969
|
display: block;
|
|
@@ -1012,14 +1033,4 @@ textarea.eds-form-control.eds-textarea {
|
|
|
1012
1033
|
}
|
|
1013
1034
|
.eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
|
|
1014
1035
|
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
|
|
1015
|
-
}/* DO NOT CHANGE!*/
|
|
1016
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1017
|
-
.eds-segmented-control {
|
|
1018
|
-
margin-top: 0.25rem;
|
|
1019
|
-
display: flex;
|
|
1020
|
-
background: #d1d4e3;
|
|
1021
|
-
border-radius: 0.5rem;
|
|
1022
1036
|
}
|
|
1023
|
-
.eds-contrast .eds-segmented-control {
|
|
1024
|
-
background: #393d79;
|
|
1025
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "5.4.
|
|
3
|
+
"version": "5.4.20",
|
|
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": "^5.8.
|
|
30
|
+
"@entur/icons": "^5.8.1",
|
|
31
31
|
"@entur/tokens": "^3.8.0",
|
|
32
|
-
"@entur/tooltip": "^2.6.
|
|
33
|
-
"@entur/typography": "^1.7.
|
|
32
|
+
"@entur/tooltip": "^2.6.7",
|
|
33
|
+
"@entur/typography": "^1.7.11",
|
|
34
34
|
"@entur/utils": "^0.5.5",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "8019b1b3a39b30bf1052ae34ed1c06b6caf1aa34"
|
|
38
38
|
}
|