@entur/form 8.0.1 → 8.0.2
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 +400 -400
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -1,233 +1,5 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-feedback-text {
|
|
4
|
-
display: flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
margin-top: 0.25rem;
|
|
7
|
-
}
|
|
8
|
-
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
9
|
-
padding-left: calc(1rem + 0.125rem);
|
|
10
|
-
}
|
|
11
|
-
.eds-feedback-text__text {
|
|
12
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
13
|
-
}
|
|
14
|
-
.eds-contrast .eds-feedback-text__text {
|
|
15
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.eds-feedback-text__icon {
|
|
19
|
-
font-size: 1.5rem;
|
|
20
|
-
min-height: 1.5rem;
|
|
21
|
-
min-width: 1.5rem;
|
|
22
|
-
padding-right: 0.5rem;
|
|
23
|
-
position: relative;
|
|
24
|
-
top: -0.1rem;
|
|
25
|
-
}
|
|
26
|
-
.eds-feedback-text__icon--success {
|
|
27
|
-
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
28
|
-
}
|
|
29
|
-
.eds-feedback-text__icon--success circle {
|
|
30
|
-
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
31
|
-
}
|
|
32
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
33
|
-
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
34
|
-
}
|
|
35
|
-
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
36
|
-
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
37
|
-
}
|
|
38
|
-
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
39
|
-
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
40
|
-
}
|
|
41
|
-
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
42
|
-
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
43
|
-
}
|
|
44
|
-
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
45
|
-
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
46
|
-
}
|
|
47
|
-
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
48
|
-
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
49
|
-
}
|
|
50
|
-
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
51
|
-
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
52
|
-
}
|
|
53
|
-
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
54
|
-
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
55
|
-
}
|
|
56
|
-
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
57
|
-
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
58
|
-
}
|
|
59
|
-
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
60
|
-
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
61
|
-
}
|
|
62
|
-
.eds-feedback-text__icon--warning {
|
|
63
|
-
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
64
|
-
}
|
|
65
|
-
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
66
|
-
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
67
|
-
}
|
|
68
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
69
|
-
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
70
|
-
}
|
|
71
|
-
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
72
|
-
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
73
|
-
}
|
|
74
|
-
/* DO NOT CHANGE!*/
|
|
75
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
76
|
-
.eds-checkbox__container {
|
|
77
|
-
display: flex;
|
|
78
|
-
align-items: center;
|
|
79
|
-
position: relative;
|
|
80
|
-
-webkit-appearance: none;
|
|
81
|
-
-moz-appearance: none;
|
|
82
|
-
appearance: none;
|
|
83
|
-
cursor: pointer;
|
|
84
|
-
-webkit-user-select: none;
|
|
85
|
-
-moz-user-select: none;
|
|
86
|
-
user-select: none;
|
|
87
|
-
width: -moz-fit-content;
|
|
88
|
-
width: fit-content;
|
|
89
|
-
margin: 0.5rem 0;
|
|
90
|
-
}
|
|
91
|
-
.eds-checkbox__container--reduced-click-area {
|
|
92
|
-
height: -moz-fit-content;
|
|
93
|
-
height: fit-content;
|
|
94
|
-
}
|
|
95
|
-
.eds-checkbox__container input {
|
|
96
|
-
position: absolute;
|
|
97
|
-
opacity: 0;
|
|
98
|
-
height: 0;
|
|
99
|
-
width: 0;
|
|
100
|
-
}
|
|
101
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
102
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
103
|
-
}
|
|
104
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
105
|
-
visibility: visible;
|
|
106
|
-
}
|
|
107
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
108
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
109
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
110
|
-
}
|
|
111
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
112
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
113
|
-
}
|
|
114
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
115
|
-
opacity: 0.5;
|
|
116
|
-
}
|
|
117
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
118
|
-
opacity: 0.5;
|
|
119
|
-
}
|
|
120
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
121
|
-
opacity: 0.5;
|
|
122
|
-
}
|
|
123
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
124
|
-
opacity: 0.5;
|
|
125
|
-
}
|
|
126
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
127
|
-
opacity: 0.5;
|
|
128
|
-
}
|
|
129
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
130
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
131
|
-
}
|
|
132
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
133
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
134
|
-
}
|
|
135
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
136
|
-
fill: var(--components-form-checkbox-contrast-icon);
|
|
137
|
-
}
|
|
138
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
139
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
140
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
141
|
-
}
|
|
142
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
143
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
144
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
145
|
-
}
|
|
146
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
147
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
148
|
-
border-color: transparent;
|
|
149
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
150
|
-
}
|
|
151
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
152
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
153
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
154
|
-
}
|
|
155
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
156
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
157
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
158
|
-
}
|
|
159
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
160
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
161
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
162
|
-
}
|
|
163
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
164
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
165
|
-
outline: 2px solid #181c56;
|
|
166
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
167
|
-
outline-offset: 0.125rem;
|
|
168
|
-
}
|
|
169
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
170
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
171
|
-
outline: 2px solid #181c56;
|
|
172
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
173
|
-
outline-offset: 0.125rem;
|
|
174
|
-
}
|
|
175
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
176
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
177
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
178
|
-
}
|
|
179
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
180
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
181
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
182
|
-
}
|
|
183
|
-
.eds-checkbox--disabled {
|
|
184
|
-
pointer-events: none;
|
|
185
|
-
}
|
|
186
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
187
|
-
opacity: 0.5;
|
|
188
|
-
}
|
|
189
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
190
|
-
opacity: 0.5;
|
|
191
|
-
}
|
|
192
|
-
.eds-checkbox__icon {
|
|
193
|
-
box-sizing: border-box;
|
|
194
|
-
display: inline-flex;
|
|
195
|
-
justify-content: center;
|
|
196
|
-
align-items: center;
|
|
197
|
-
position: relative;
|
|
198
|
-
margin-right: 1rem;
|
|
199
|
-
height: 1.25rem;
|
|
200
|
-
width: 1.25rem;
|
|
201
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
202
|
-
border-radius: 0.125rem;
|
|
203
|
-
background-color: transparent;
|
|
204
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
205
|
-
}
|
|
206
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
207
|
-
margin-right: 0;
|
|
208
|
-
}
|
|
209
|
-
.eds-contrast .eds-checkbox__icon {
|
|
210
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
211
|
-
}
|
|
212
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
213
|
-
height: 1rem;
|
|
214
|
-
width: 1rem;
|
|
215
|
-
visibility: hidden;
|
|
216
|
-
}
|
|
217
|
-
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
218
|
-
transform-origin: 50% 50%;
|
|
219
|
-
stroke-dasharray: 48;
|
|
220
|
-
stroke-dashoffset: 48;
|
|
221
|
-
stroke-width: 0.375rem;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
@keyframes stroke {
|
|
225
|
-
100% {
|
|
226
|
-
stroke-dashoffset: 0;
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
/* DO NOT CHANGE!*/
|
|
230
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
231
3
|
.eds-form-control__field-and-feedback-text {
|
|
232
4
|
display: flex;
|
|
233
5
|
flex-direction: column;
|
|
@@ -442,85 +214,76 @@
|
|
|
442
214
|
}
|
|
443
215
|
/* DO NOT CHANGE!*/
|
|
444
216
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
445
|
-
.eds-
|
|
217
|
+
.eds-feedback-text {
|
|
446
218
|
display: flex;
|
|
447
|
-
justify-content: center;
|
|
448
219
|
align-items: center;
|
|
449
|
-
|
|
450
|
-
cursor: pointer;
|
|
451
|
-
height: 2rem;
|
|
452
|
-
width: -moz-fit-content;
|
|
453
|
-
width: fit-content;
|
|
454
|
-
-webkit-user-select: none;
|
|
455
|
-
-moz-user-select: none;
|
|
456
|
-
user-select: none;
|
|
220
|
+
margin-top: 0.25rem;
|
|
457
221
|
}
|
|
458
|
-
.eds-
|
|
459
|
-
|
|
222
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
223
|
+
padding-left: calc(1rem + 0.125rem);
|
|
460
224
|
}
|
|
461
|
-
.eds-
|
|
462
|
-
|
|
225
|
+
.eds-feedback-text__text {
|
|
226
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
463
227
|
}
|
|
464
|
-
.eds-
|
|
465
|
-
|
|
466
|
-
opacity: 0;
|
|
467
|
-
cursor: pointer;
|
|
468
|
-
height: 0;
|
|
469
|
-
width: 0;
|
|
228
|
+
.eds-contrast .eds-feedback-text__text {
|
|
229
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
470
230
|
}
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
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;
|
|
474
239
|
}
|
|
475
|
-
.eds-
|
|
476
|
-
|
|
477
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
478
|
-
outline-offset: 0.125rem;
|
|
240
|
+
.eds-feedback-text__icon--success {
|
|
241
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
479
242
|
}
|
|
480
|
-
.eds-
|
|
481
|
-
|
|
243
|
+
.eds-feedback-text__icon--success circle {
|
|
244
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
482
245
|
}
|
|
483
|
-
.eds-
|
|
484
|
-
|
|
485
|
-
height: 1.25rem;
|
|
486
|
-
width: 1.25rem;
|
|
487
|
-
margin-right: 1rem;
|
|
488
|
-
background-color: var(--components-form-radio-standard-fill-default);
|
|
489
|
-
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
490
|
-
border-radius: 50%;
|
|
491
|
-
display: flex;
|
|
492
|
-
align-items: center;
|
|
493
|
-
justify-content: center;
|
|
246
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
247
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
494
248
|
}
|
|
495
|
-
.eds-contrast .eds-
|
|
496
|
-
|
|
497
|
-
border-color: var(--components-form-radio-contrast-border);
|
|
249
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
250
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
498
251
|
}
|
|
499
|
-
.eds-
|
|
500
|
-
|
|
501
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
502
|
-
cursor: not-allowed;
|
|
252
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
253
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
503
254
|
}
|
|
504
|
-
.eds-
|
|
505
|
-
|
|
255
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
256
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
506
257
|
}
|
|
507
|
-
.eds-contrast .eds-
|
|
508
|
-
|
|
509
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
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);
|
|
510
260
|
}
|
|
511
|
-
.eds-
|
|
512
|
-
|
|
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);
|
|
513
263
|
}
|
|
514
|
-
.eds-
|
|
515
|
-
|
|
516
|
-
width: 0;
|
|
517
|
-
height: 0;
|
|
518
|
-
border-radius: 50%;
|
|
519
|
-
background-color: var(--components-form-radio-standard-fill-selected);
|
|
520
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
264
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
265
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
521
266
|
}
|
|
522
|
-
.eds-
|
|
523
|
-
|
|
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);
|
|
524
287
|
}
|
|
525
288
|
/* DO NOT CHANGE!*/
|
|
526
289
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -601,146 +364,383 @@
|
|
|
601
364
|
height: 10px;
|
|
602
365
|
padding: 0;
|
|
603
366
|
}
|
|
604
|
-
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
605
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
606
|
-
background: var(--textarea-label-background);
|
|
607
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
367
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
368
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
369
|
+
background: var(--textarea-label-background);
|
|
370
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
371
|
+
}
|
|
372
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
373
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
374
|
+
background: var(--textarea-label-background);
|
|
375
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
376
|
+
}
|
|
377
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
378
|
+
top: 0.5rem;
|
|
379
|
+
font-size: 0.875rem;
|
|
380
|
+
line-height: 1rem;
|
|
381
|
+
padding: 0;
|
|
382
|
+
}
|
|
383
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
384
|
+
top: 0.5rem;
|
|
385
|
+
font-size: 0.875rem;
|
|
386
|
+
line-height: 1rem;
|
|
387
|
+
padding: 0;
|
|
388
|
+
}
|
|
389
|
+
/* DO NOT CHANGE!*/
|
|
390
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
391
|
+
.eds-switch {
|
|
392
|
+
cursor: pointer;
|
|
393
|
+
-webkit-user-select: none;
|
|
394
|
+
-moz-user-select: none;
|
|
395
|
+
user-select: none;
|
|
396
|
+
padding: 0.5rem 0;
|
|
397
|
+
width: -moz-fit-content;
|
|
398
|
+
width: fit-content;
|
|
399
|
+
}
|
|
400
|
+
.eds-switch input {
|
|
401
|
+
opacity: 0;
|
|
402
|
+
pointer-events: none;
|
|
403
|
+
position: absolute;
|
|
404
|
+
}
|
|
405
|
+
.eds-switch--right {
|
|
406
|
+
display: flex;
|
|
407
|
+
flex-direction: row;
|
|
408
|
+
align-items: center;
|
|
409
|
+
}
|
|
410
|
+
.eds-switch--bottom {
|
|
411
|
+
display: flex;
|
|
412
|
+
flex-direction: column;
|
|
413
|
+
align-items: center;
|
|
414
|
+
}
|
|
415
|
+
.eds-switch__circle {
|
|
416
|
+
border-radius: 50%;
|
|
417
|
+
height: 1.25rem;
|
|
418
|
+
width: 1.25rem;
|
|
419
|
+
content: "";
|
|
420
|
+
display: flex;
|
|
421
|
+
align-items: center;
|
|
422
|
+
justify-content: center;
|
|
423
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
424
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
425
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
426
|
+
top: 0.125rem;
|
|
427
|
+
left: 0.125rem;
|
|
428
|
+
position: relative;
|
|
429
|
+
}
|
|
430
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
431
|
+
height: 1.75rem;
|
|
432
|
+
width: 1.75rem;
|
|
433
|
+
}
|
|
434
|
+
.eds-contrast .eds-switch__circle {
|
|
435
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
436
|
+
}
|
|
437
|
+
.eds-switch__switch {
|
|
438
|
+
position: relative;
|
|
439
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
440
|
+
content: "";
|
|
441
|
+
display: block;
|
|
442
|
+
transition: background-color 0.1s ease-in-out;
|
|
443
|
+
height: 1.5rem;
|
|
444
|
+
width: 3rem;
|
|
445
|
+
border-radius: 1.5rem;
|
|
446
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
447
|
+
}
|
|
448
|
+
.eds-contrast .eds-switch__switch {
|
|
449
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
450
|
+
}
|
|
451
|
+
.eds-switch--right .eds-switch__switch {
|
|
452
|
+
margin-right: 0.75rem;
|
|
453
|
+
}
|
|
454
|
+
.eds-switch__switch svg g,
|
|
455
|
+
.eds-switch__switch path {
|
|
456
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
457
|
+
transition: fill ease-in-out 0.1s;
|
|
458
|
+
}
|
|
459
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
460
|
+
.eds-contrast .eds-switch__switch path {
|
|
461
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
462
|
+
}
|
|
463
|
+
:checked + .eds-switch__switch {
|
|
464
|
+
background-color: var(--eds-switch-color);
|
|
465
|
+
}
|
|
466
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
467
|
+
left: 1.625rem;
|
|
468
|
+
}
|
|
469
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
470
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
471
|
+
fill: var(--eds-switch-color);
|
|
472
|
+
}
|
|
473
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
474
|
+
background-color: var(--eds-switch-contrast-color);
|
|
475
|
+
}
|
|
476
|
+
:focus + .eds-switch__switch {
|
|
477
|
+
outline: 2px solid #181c56;
|
|
478
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
479
|
+
outline-offset: 0.125rem;
|
|
480
|
+
}
|
|
481
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
482
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
483
|
+
}
|
|
484
|
+
.eds-switch__switch--large {
|
|
485
|
+
width: 3.75rem;
|
|
486
|
+
height: 2rem;
|
|
487
|
+
border-radius: 3.75rem;
|
|
488
|
+
}
|
|
489
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
490
|
+
left: 1.875rem;
|
|
491
|
+
}
|
|
492
|
+
.eds-switch__switch--large svg {
|
|
493
|
+
position: relative;
|
|
494
|
+
right: 0.05rem;
|
|
495
|
+
}
|
|
496
|
+
.eds-switch__label--large--right {
|
|
497
|
+
font-size: 1rem;
|
|
498
|
+
}
|
|
499
|
+
.eds-switch__label--large--bottom {
|
|
500
|
+
font-size: 0.875rem;
|
|
501
|
+
}
|
|
502
|
+
.eds-switch__label--medium--right {
|
|
503
|
+
font-size: 0.875rem;
|
|
504
|
+
}
|
|
505
|
+
.eds-switch__label--medium--bottom {
|
|
506
|
+
font-size: 0.75rem;
|
|
507
|
+
}
|
|
508
|
+
/* DO NOT CHANGE!*/
|
|
509
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
510
|
+
.eds-form-component--radio__container {
|
|
511
|
+
display: flex;
|
|
512
|
+
justify-content: center;
|
|
513
|
+
align-items: center;
|
|
514
|
+
position: relative;
|
|
515
|
+
cursor: pointer;
|
|
516
|
+
height: 2rem;
|
|
517
|
+
width: -moz-fit-content;
|
|
518
|
+
width: fit-content;
|
|
519
|
+
-webkit-user-select: none;
|
|
520
|
+
-moz-user-select: none;
|
|
521
|
+
user-select: none;
|
|
522
|
+
}
|
|
523
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
524
|
+
background-color: var(--components-form-radio-standard-fill-hover);
|
|
525
|
+
}
|
|
526
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
527
|
+
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
528
|
+
}
|
|
529
|
+
.eds-form-component--radio__container input {
|
|
530
|
+
position: absolute;
|
|
531
|
+
opacity: 0;
|
|
532
|
+
cursor: pointer;
|
|
533
|
+
height: 0;
|
|
534
|
+
width: 0;
|
|
535
|
+
}
|
|
536
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
537
|
+
height: 0.625rem;
|
|
538
|
+
width: 0.625rem;
|
|
539
|
+
}
|
|
540
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
541
|
+
outline: 2px solid #181c56;
|
|
542
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
543
|
+
outline-offset: 0.125rem;
|
|
544
|
+
}
|
|
545
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
546
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
547
|
+
}
|
|
548
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
549
|
+
position: relative;
|
|
550
|
+
height: 1.25rem;
|
|
551
|
+
width: 1.25rem;
|
|
552
|
+
margin-right: 1rem;
|
|
553
|
+
background-color: var(--components-form-radio-standard-fill-default);
|
|
554
|
+
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
555
|
+
border-radius: 50%;
|
|
556
|
+
display: flex;
|
|
557
|
+
align-items: center;
|
|
558
|
+
justify-content: center;
|
|
559
|
+
}
|
|
560
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
561
|
+
background-color: var(--components-form-radio-contrast-fill-default);
|
|
562
|
+
border-color: var(--components-form-radio-contrast-border);
|
|
563
|
+
}
|
|
564
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
565
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
566
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
567
|
+
cursor: not-allowed;
|
|
568
|
+
}
|
|
569
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
570
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
608
571
|
}
|
|
609
|
-
.eds-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
572
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
573
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
574
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
613
575
|
}
|
|
614
|
-
.eds-form-
|
|
615
|
-
|
|
616
|
-
font-size: 0.875rem;
|
|
617
|
-
line-height: 1rem;
|
|
618
|
-
padding: 0;
|
|
576
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
577
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
619
578
|
}
|
|
620
|
-
.eds-form-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
579
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
580
|
+
display: block;
|
|
581
|
+
width: 0;
|
|
582
|
+
height: 0;
|
|
583
|
+
border-radius: 50%;
|
|
584
|
+
background-color: var(--components-form-radio-standard-fill-selected);
|
|
585
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
586
|
+
}
|
|
587
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
588
|
+
background-color: var(--components-form-radio-contrast-icon);
|
|
625
589
|
}
|
|
626
590
|
/* DO NOT CHANGE!*/
|
|
627
591
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
628
|
-
.eds-
|
|
592
|
+
.eds-checkbox__container {
|
|
593
|
+
display: flex;
|
|
594
|
+
align-items: center;
|
|
595
|
+
position: relative;
|
|
596
|
+
-webkit-appearance: none;
|
|
597
|
+
-moz-appearance: none;
|
|
598
|
+
appearance: none;
|
|
629
599
|
cursor: pointer;
|
|
630
600
|
-webkit-user-select: none;
|
|
631
601
|
-moz-user-select: none;
|
|
632
602
|
user-select: none;
|
|
633
|
-
padding: 0.5rem 0;
|
|
634
603
|
width: -moz-fit-content;
|
|
635
604
|
width: fit-content;
|
|
605
|
+
margin: 0.5rem 0;
|
|
636
606
|
}
|
|
637
|
-
.eds-
|
|
638
|
-
|
|
639
|
-
|
|
607
|
+
.eds-checkbox__container--reduced-click-area {
|
|
608
|
+
height: -moz-fit-content;
|
|
609
|
+
height: fit-content;
|
|
610
|
+
}
|
|
611
|
+
.eds-checkbox__container input {
|
|
640
612
|
position: absolute;
|
|
613
|
+
opacity: 0;
|
|
614
|
+
height: 0;
|
|
615
|
+
width: 0;
|
|
641
616
|
}
|
|
642
|
-
.eds-
|
|
643
|
-
|
|
644
|
-
flex-direction: row;
|
|
645
|
-
align-items: center;
|
|
617
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
618
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
646
619
|
}
|
|
647
|
-
.eds-
|
|
648
|
-
|
|
649
|
-
flex-direction: column;
|
|
650
|
-
align-items: center;
|
|
620
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
621
|
+
visibility: visible;
|
|
651
622
|
}
|
|
652
|
-
.eds-
|
|
653
|
-
|
|
654
|
-
|
|
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;
|
|
623
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
624
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
625
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
666
626
|
}
|
|
667
|
-
.eds-
|
|
668
|
-
|
|
669
|
-
width: 1.75rem;
|
|
627
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
628
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
670
629
|
}
|
|
671
|
-
.eds-
|
|
672
|
-
|
|
630
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
631
|
+
opacity: 0.5;
|
|
673
632
|
}
|
|
674
|
-
.eds-
|
|
675
|
-
|
|
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);
|
|
633
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
634
|
+
opacity: 0.5;
|
|
684
635
|
}
|
|
685
|
-
.eds-
|
|
686
|
-
|
|
636
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
637
|
+
opacity: 0.5;
|
|
687
638
|
}
|
|
688
|
-
.eds-
|
|
689
|
-
|
|
639
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
640
|
+
opacity: 0.5;
|
|
690
641
|
}
|
|
691
|
-
.eds-
|
|
692
|
-
.
|
|
693
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
694
|
-
transition: fill ease-in-out 0.1s;
|
|
642
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
643
|
+
opacity: 0.5;
|
|
695
644
|
}
|
|
696
|
-
.eds-contrast .eds-
|
|
697
|
-
|
|
698
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
645
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
646
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
699
647
|
}
|
|
700
|
-
:checked + .eds-
|
|
701
|
-
|
|
648
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
649
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
702
650
|
}
|
|
703
|
-
:checked + .eds-
|
|
704
|
-
|
|
651
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
652
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
705
653
|
}
|
|
706
|
-
:
|
|
707
|
-
:
|
|
708
|
-
|
|
654
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
655
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
656
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
709
657
|
}
|
|
710
|
-
.eds-contrast :
|
|
711
|
-
|
|
658
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
659
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
660
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
712
661
|
}
|
|
713
|
-
:
|
|
662
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
663
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
664
|
+
border-color: transparent;
|
|
665
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
666
|
+
}
|
|
667
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
668
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
669
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
670
|
+
}
|
|
671
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
672
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
673
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
674
|
+
}
|
|
675
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
676
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
677
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
678
|
+
}
|
|
679
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
680
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
714
681
|
outline: 2px solid #181c56;
|
|
715
682
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
716
683
|
outline-offset: 0.125rem;
|
|
717
684
|
}
|
|
718
|
-
.eds-
|
|
685
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
686
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
687
|
+
outline: 2px solid #181c56;
|
|
688
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
689
|
+
outline-offset: 0.125rem;
|
|
690
|
+
}
|
|
691
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
692
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
719
693
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
720
694
|
}
|
|
721
|
-
.eds-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
border-radius: 3.75rem;
|
|
695
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
696
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
697
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
725
698
|
}
|
|
726
|
-
|
|
727
|
-
|
|
699
|
+
.eds-checkbox--disabled {
|
|
700
|
+
pointer-events: none;
|
|
728
701
|
}
|
|
729
|
-
.eds-
|
|
702
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
703
|
+
opacity: 0.5;
|
|
704
|
+
}
|
|
705
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
706
|
+
opacity: 0.5;
|
|
707
|
+
}
|
|
708
|
+
.eds-checkbox__icon {
|
|
709
|
+
box-sizing: border-box;
|
|
710
|
+
display: inline-flex;
|
|
711
|
+
justify-content: center;
|
|
712
|
+
align-items: center;
|
|
730
713
|
position: relative;
|
|
731
|
-
right:
|
|
714
|
+
margin-right: 1rem;
|
|
715
|
+
height: 1.25rem;
|
|
716
|
+
width: 1.25rem;
|
|
717
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
718
|
+
border-radius: 0.125rem;
|
|
719
|
+
background-color: transparent;
|
|
720
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
732
721
|
}
|
|
733
|
-
.eds-
|
|
734
|
-
|
|
722
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
723
|
+
margin-right: 0;
|
|
735
724
|
}
|
|
736
|
-
.eds-
|
|
737
|
-
|
|
725
|
+
.eds-contrast .eds-checkbox__icon {
|
|
726
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
738
727
|
}
|
|
739
|
-
.eds-
|
|
740
|
-
|
|
728
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
729
|
+
height: 1rem;
|
|
730
|
+
width: 1rem;
|
|
731
|
+
visibility: hidden;
|
|
741
732
|
}
|
|
742
|
-
.eds-
|
|
743
|
-
|
|
733
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
734
|
+
transform-origin: 50% 50%;
|
|
735
|
+
stroke-dasharray: 48;
|
|
736
|
+
stroke-dashoffset: 48;
|
|
737
|
+
stroke-width: 0.375rem;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
@keyframes stroke {
|
|
741
|
+
100% {
|
|
742
|
+
stroke-dashoffset: 0;
|
|
743
|
+
}
|
|
744
744
|
}
|
|
745
745
|
/* DO NOT CHANGE!*/
|
|
746
746
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -954,6 +954,17 @@ textarea.eds-form-control.eds-textarea {
|
|
|
954
954
|
}
|
|
955
955
|
/* DO NOT CHANGE!*/
|
|
956
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: var(--components-form-segmentedcontrol-standard-background);
|
|
961
|
+
border-radius: 0.5rem;
|
|
962
|
+
}
|
|
963
|
+
.eds-contrast .eds-segmented-control {
|
|
964
|
+
background: var(--components-form-segmentedcontrol-contrast-background);
|
|
965
|
+
}
|
|
966
|
+
/* DO NOT CHANGE!*/
|
|
967
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
957
968
|
.eds-segmented-choice {
|
|
958
969
|
display: block;
|
|
959
970
|
flex: 1 1 0px;
|
|
@@ -1036,17 +1047,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
1036
1047
|
}
|
|
1037
1048
|
/* DO NOT CHANGE!*/
|
|
1038
1049
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1039
|
-
.eds-segmented-control {
|
|
1040
|
-
margin-top: 0.25rem;
|
|
1041
|
-
display: flex;
|
|
1042
|
-
background: var(--components-form-segmentedcontrol-standard-background);
|
|
1043
|
-
border-radius: 0.5rem;
|
|
1044
|
-
}
|
|
1045
|
-
.eds-contrast .eds-segmented-control {
|
|
1046
|
-
background: var(--components-form-segmentedcontrol-contrast-background);
|
|
1047
|
-
}
|
|
1048
|
-
/* DO NOT CHANGE!*/
|
|
1049
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1050
1050
|
/* DO NOT CHANGE!*/
|
|
1051
1051
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1052
1052
|
/* DO NOT CHANGE!*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.2",
|
|
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": "^7.
|
|
31
|
-
"@entur/tokens": "^3.
|
|
32
|
-
"@entur/tooltip": "^3.0.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
30
|
+
"@entur/icons": "^7.2.0",
|
|
31
|
+
"@entur/tokens": "^3.17.0",
|
|
32
|
+
"@entur/tooltip": "^3.0.2",
|
|
33
|
+
"@entur/typography": "^1.8.43",
|
|
34
34
|
"@entur/utils": "^0.11.1",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "20838cf27b3f76a9ce3259fe808d60132ab0a653"
|
|
38
38
|
}
|