@entur/form 5.2.2 → 5.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/Switch.d.ts +18 -10
- package/dist/form.cjs.development.js +10 -2
- package/dist/form.cjs.development.js.map +1 -1
- package/dist/form.cjs.production.min.js +1 -1
- package/dist/form.cjs.production.min.js.map +1 -1
- package/dist/form.esm.js +11 -3
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +364 -226
- package/package.json +4 -4
package/dist/styles.css
CHANGED
|
@@ -59,17 +59,115 @@
|
|
|
59
59
|
color: #64b3e7;
|
|
60
60
|
}/* DO NOT CHANGE!*/
|
|
61
61
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
62
|
+
.eds-form-component--radio__container {
|
|
63
|
+
display: flex;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
align-items: center;
|
|
66
|
+
position: relative;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
height: 2rem;
|
|
69
|
+
width: -webkit-fit-content;
|
|
70
|
+
width: -moz-fit-content;
|
|
71
|
+
width: fit-content;
|
|
72
|
+
-webkit-user-select: none;
|
|
73
|
+
-moz-user-select: none;
|
|
74
|
+
-ms-user-select: none;
|
|
75
|
+
user-select: none;
|
|
76
|
+
}
|
|
77
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
78
|
+
border-color: #54568c;
|
|
79
|
+
}
|
|
80
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
81
|
+
background-color: #54568c;
|
|
82
|
+
}
|
|
83
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
84
|
+
border-color: #8285a8;
|
|
85
|
+
}
|
|
86
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
87
|
+
background-color: #8285a8;
|
|
88
|
+
}
|
|
89
|
+
.eds-form-component--radio__container input {
|
|
90
|
+
position: absolute;
|
|
91
|
+
opacity: 0;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
height: 0;
|
|
94
|
+
width: 0;
|
|
95
|
+
}
|
|
96
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
97
|
+
height: 0.625rem;
|
|
98
|
+
width: 0.625rem;
|
|
99
|
+
}
|
|
100
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
101
|
+
outline: none;
|
|
102
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
103
|
+
outline-offset: 0.125rem;
|
|
104
|
+
}
|
|
105
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
106
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
107
|
+
}
|
|
108
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
109
|
+
position: relative;
|
|
110
|
+
height: 1.25rem;
|
|
111
|
+
width: 1.25rem;
|
|
112
|
+
margin-right: 1rem;
|
|
113
|
+
background-color: #ffffff;
|
|
114
|
+
border: 0.125rem solid #181c56;
|
|
115
|
+
border-radius: 50%;
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
}
|
|
120
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
121
|
+
background-color: #181c56;
|
|
122
|
+
border-color: #aeb7e2;
|
|
123
|
+
}
|
|
124
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
125
|
+
background: #d1d3d3;
|
|
126
|
+
border-color: #d1d3d3;
|
|
127
|
+
cursor: not-allowed;
|
|
128
|
+
}
|
|
129
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
130
|
+
border-color: #d1d3d3;
|
|
131
|
+
}
|
|
132
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
133
|
+
background: #d1d3d3;
|
|
134
|
+
border-color: #d1d3d3;
|
|
135
|
+
}
|
|
136
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
137
|
+
color: #656782;
|
|
138
|
+
}
|
|
139
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
140
|
+
display: block;
|
|
141
|
+
width: 0;
|
|
142
|
+
height: 0;
|
|
143
|
+
border-radius: 50%;
|
|
144
|
+
background-color: #181c56;
|
|
145
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
146
|
+
}
|
|
147
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
148
|
+
background-color: #aeb7e2;
|
|
149
|
+
}/* DO NOT CHANGE!*/
|
|
150
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
62
151
|
.eds-checkbox__container {
|
|
63
152
|
display: flex;
|
|
64
153
|
align-items: center;
|
|
65
154
|
position: relative;
|
|
66
|
-
appearance: none;
|
|
155
|
+
-webkit-appearance: none;
|
|
156
|
+
-moz-appearance: none;
|
|
157
|
+
appearance: none;
|
|
67
158
|
cursor: pointer;
|
|
68
159
|
height: 2rem;
|
|
69
|
-
user-select: none;
|
|
160
|
+
-webkit-user-select: none;
|
|
161
|
+
-moz-user-select: none;
|
|
162
|
+
-ms-user-select: none;
|
|
163
|
+
user-select: none;
|
|
164
|
+
width: -webkit-fit-content;
|
|
165
|
+
width: -moz-fit-content;
|
|
70
166
|
width: fit-content;
|
|
71
167
|
}
|
|
72
168
|
.eds-checkbox__container--reduced-click-area {
|
|
169
|
+
height: -webkit-fit-content;
|
|
170
|
+
height: -moz-fit-content;
|
|
73
171
|
height: fit-content;
|
|
74
172
|
}
|
|
75
173
|
.eds-checkbox__container input {
|
|
@@ -86,7 +184,8 @@
|
|
|
86
184
|
}
|
|
87
185
|
.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
186
|
stroke: #ffffff;
|
|
89
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
187
|
+
-webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
188
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
90
189
|
}
|
|
91
190
|
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
92
191
|
opacity: 0.5;
|
|
@@ -116,12 +215,22 @@
|
|
|
116
215
|
border-color: #8285a8;
|
|
117
216
|
}
|
|
118
217
|
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
218
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
219
|
+
outline: none;
|
|
220
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
221
|
+
outline-offset: 0.125rem;
|
|
222
|
+
}
|
|
223
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
119
224
|
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
120
225
|
outline: none;
|
|
121
226
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
122
227
|
outline-offset: 0.125rem;
|
|
123
228
|
}
|
|
124
229
|
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
230
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
231
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
232
|
+
}
|
|
233
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
125
234
|
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
126
235
|
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
127
236
|
}
|
|
@@ -165,138 +274,16 @@
|
|
|
165
274
|
stroke-width: 0.375rem;
|
|
166
275
|
}
|
|
167
276
|
|
|
168
|
-
|
|
277
|
+
@-webkit-keyframes stroke {
|
|
169
278
|
100% {
|
|
170
279
|
stroke-dashoffset: 0;
|
|
171
280
|
}
|
|
172
|
-
}/* DO NOT CHANGE!*/
|
|
173
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
174
|
-
.eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
|
|
175
|
-
border-color: #181c56;
|
|
176
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
177
|
-
}
|
|
178
|
-
.eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
|
|
179
|
-
border-color: #ffffff;
|
|
180
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
181
|
-
}
|
|
182
|
-
.eds-radio-panel__wrapper input {
|
|
183
|
-
position: absolute;
|
|
184
|
-
opacity: 0;
|
|
185
|
-
cursor: pointer;
|
|
186
|
-
height: 0;
|
|
187
|
-
width: 0;
|
|
188
|
-
}
|
|
189
|
-
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
|
|
190
|
-
border-color: #181c56;
|
|
191
|
-
background: #f5f5f8;
|
|
192
|
-
}
|
|
193
|
-
.eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
|
|
194
|
-
border-color: #aeb7e2;
|
|
195
|
-
background: #393d79;
|
|
196
|
-
}
|
|
197
|
-
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
|
|
198
|
-
background-color: #181c56;
|
|
199
|
-
border-color: #181c56;
|
|
200
|
-
}
|
|
201
|
-
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
|
|
202
|
-
visibility: visible;
|
|
203
|
-
}
|
|
204
|
-
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
|
|
205
|
-
stroke: #5ac39a;
|
|
206
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
207
|
-
}
|
|
208
|
-
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
|
|
209
|
-
opacity: 0.5;
|
|
210
|
-
}
|
|
211
|
-
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
|
|
212
|
-
opacity: 0.5;
|
|
213
|
-
}
|
|
214
|
-
.eds-radio-panel__container {
|
|
215
|
-
background: #ffffff;
|
|
216
|
-
border: 0.125rem solid #d1d3d3;
|
|
217
|
-
border-radius: 0.25rem;
|
|
218
|
-
display: flex;
|
|
219
|
-
flex-direction: column;
|
|
220
|
-
justify-content: flex-start;
|
|
221
|
-
min-width: 20rem;
|
|
222
|
-
position: relative;
|
|
223
|
-
padding: 1rem;
|
|
224
|
-
user-select: none;
|
|
225
|
-
width: fit-content;
|
|
226
|
-
}
|
|
227
|
-
.eds-contrast .eds-radio-panel__container {
|
|
228
|
-
background: #181c56;
|
|
229
|
-
border-color: #54568c;
|
|
230
|
-
}
|
|
231
|
-
.eds-radio-panel__title-wrapper {
|
|
232
|
-
display: flex;
|
|
233
|
-
justify-content: space-between;
|
|
234
|
-
align-items: center;
|
|
235
|
-
}
|
|
236
|
-
.eds-radio-panel__label {
|
|
237
|
-
display: flex;
|
|
238
|
-
justify-content: center;
|
|
239
|
-
}
|
|
240
|
-
.eds-radio-panel__check {
|
|
241
|
-
height: 2rem;
|
|
242
|
-
width: 2rem;
|
|
243
|
-
margin-left: 1rem;
|
|
244
|
-
border-radius: 50%;
|
|
245
|
-
border: 0.125rem solid #e9e9e9;
|
|
246
|
-
display: flex;
|
|
247
|
-
align-items: center;
|
|
248
|
-
justify-content: center;
|
|
249
|
-
background: #ffffff;
|
|
250
|
-
transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
|
|
251
|
-
}
|
|
252
|
-
.eds-contrast .eds-radio-panel__check {
|
|
253
|
-
background: #181c56;
|
|
254
|
-
border-color: #54568c;
|
|
255
|
-
}
|
|
256
|
-
.eds-radio-panel__additional-content {
|
|
257
|
-
margin-top: 0.25rem;
|
|
258
|
-
word-wrap: break-word;
|
|
259
|
-
}
|
|
260
|
-
.eds-radio-panel--medium .eds-radio-panel__title {
|
|
261
|
-
font-size: 1rem;
|
|
262
|
-
font-weight: 500;
|
|
263
|
-
}
|
|
264
|
-
.eds-radio-panel--medium.eds-radio-panel__container {
|
|
265
|
-
padding-bottom: 1rem;
|
|
266
|
-
min-height: 3.75rem;
|
|
267
|
-
}
|
|
268
|
-
.eds-radio-panel--large.eds-radio-panel__container {
|
|
269
|
-
min-height: 6.5rem;
|
|
270
|
-
}
|
|
271
|
-
.eds-radio-panel--large .eds-radio-panel__title-wrapper {
|
|
272
|
-
height: 2rem;
|
|
273
|
-
}
|
|
274
|
-
.eds-radio-panel--large .eds-radio-panel__title {
|
|
275
|
-
font-size: 1.25rem;
|
|
276
|
-
font-weight: 500;
|
|
277
|
-
line-height: 1.875rem;
|
|
278
|
-
}
|
|
279
|
-
.eds-radio-panel--disabled {
|
|
280
|
-
background: #f3f3f3;
|
|
281
|
-
border-color: #f3f3f3;
|
|
282
|
-
color: #656782;
|
|
283
|
-
}
|
|
284
|
-
.eds-contrast .eds-radio-panel--disabled {
|
|
285
|
-
background: #181c56;
|
|
286
|
-
border-style: dashed;
|
|
287
|
-
border-color: #54568c;
|
|
288
|
-
color: #babbcf;
|
|
289
281
|
}
|
|
290
282
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
}
|
|
295
|
-
.eds-checkbox-icon__path {
|
|
296
|
-
transform-origin: 50% 50%;
|
|
297
|
-
stroke-dasharray: 48;
|
|
298
|
-
stroke-dashoffset: 48;
|
|
299
|
-
stroke-width: 0.375rem;
|
|
283
|
+
@keyframes stroke {
|
|
284
|
+
100% {
|
|
285
|
+
stroke-dashoffset: 0;
|
|
286
|
+
}
|
|
300
287
|
}/* DO NOT CHANGE!*/
|
|
301
288
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
302
289
|
.eds-input-group {
|
|
@@ -316,7 +303,10 @@
|
|
|
316
303
|
margin-left: 1rem;
|
|
317
304
|
top: -0.125rem;
|
|
318
305
|
transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
|
|
319
|
-
user-select: none;
|
|
306
|
+
-webkit-user-select: none;
|
|
307
|
+
-moz-user-select: none;
|
|
308
|
+
-ms-user-select: none;
|
|
309
|
+
user-select: none;
|
|
320
310
|
pointer-events: none;
|
|
321
311
|
}
|
|
322
312
|
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
@@ -380,6 +370,15 @@
|
|
|
380
370
|
font-size: 1rem;
|
|
381
371
|
}
|
|
382
372
|
|
|
373
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
374
|
+
top: calc(0.5rem - 0.125rem);
|
|
375
|
+
font-size: 0.75rem;
|
|
376
|
+
line-height: 0.75rem;
|
|
377
|
+
height: 10px;
|
|
378
|
+
padding: 0;
|
|
379
|
+
margin-left: 1rem;
|
|
380
|
+
}
|
|
381
|
+
|
|
383
382
|
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
384
383
|
top: calc(0.5rem - 0.125rem);
|
|
385
384
|
font-size: 0.75rem;
|
|
@@ -388,11 +387,23 @@
|
|
|
388
387
|
padding: 0;
|
|
389
388
|
margin-left: 1rem;
|
|
390
389
|
}
|
|
390
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
391
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
392
|
+
background: var(--textarea-label-background);
|
|
393
|
+
width: calc( 100% - 1rem - 1rem - 4px );
|
|
394
|
+
}
|
|
391
395
|
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
392
396
|
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
393
397
|
background: var(--textarea-label-background);
|
|
394
398
|
width: calc( 100% - 1rem - 1rem - 4px );
|
|
395
399
|
}
|
|
400
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
401
|
+
top: 0.5rem;
|
|
402
|
+
font-size: 0.875rem;
|
|
403
|
+
line-height: 1rem;
|
|
404
|
+
padding: 0;
|
|
405
|
+
margin-left: 1rem;
|
|
406
|
+
}
|
|
396
407
|
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
397
408
|
top: 0.5rem;
|
|
398
409
|
font-size: 0.875rem;
|
|
@@ -426,6 +437,9 @@
|
|
|
426
437
|
background-color: #ffffff;
|
|
427
438
|
border-color: #54568c;
|
|
428
439
|
}
|
|
440
|
+
.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
|
|
441
|
+
border-color: #181c56;
|
|
442
|
+
}
|
|
429
443
|
.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
|
|
430
444
|
border-color: #181c56;
|
|
431
445
|
}
|
|
@@ -433,14 +447,28 @@
|
|
|
433
447
|
border-color: #aeb7e2;
|
|
434
448
|
background: #ebebf1;
|
|
435
449
|
}
|
|
450
|
+
.eds-form-control-wrapper[focus-within] {
|
|
451
|
+
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
452
|
+
}
|
|
436
453
|
.eds-form-control-wrapper:focus-within {
|
|
437
454
|
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
438
455
|
}
|
|
456
|
+
.eds-contrast .eds-form-control-wrapper[focus-within] {
|
|
457
|
+
border-color: #181c56;
|
|
458
|
+
--border-color: #aeb7e2;
|
|
459
|
+
box-shadow: 0 0 0 0.125rem var(--border-color);
|
|
460
|
+
}
|
|
439
461
|
.eds-contrast .eds-form-control-wrapper:focus-within {
|
|
440
462
|
border-color: #181c56;
|
|
441
463
|
--border-color: #aeb7e2;
|
|
442
464
|
box-shadow: 0 0 0 0.125rem var(--border-color);
|
|
443
465
|
}
|
|
466
|
+
.eds-form-control-wrapper ::-moz-placeholder {
|
|
467
|
+
color: #656782;
|
|
468
|
+
}
|
|
469
|
+
.eds-form-control-wrapper :-ms-input-placeholder {
|
|
470
|
+
color: #656782;
|
|
471
|
+
}
|
|
444
472
|
.eds-form-control-wrapper ::placeholder {
|
|
445
473
|
color: #656782;
|
|
446
474
|
}
|
|
@@ -500,6 +528,9 @@
|
|
|
500
528
|
.eds-form-control-wrapper--success:hover {
|
|
501
529
|
border-color: #5ac39a;
|
|
502
530
|
}
|
|
531
|
+
.eds-form-control-wrapper--success[focus-within] {
|
|
532
|
+
border-color: #1a8e60;
|
|
533
|
+
}
|
|
503
534
|
.eds-form-control-wrapper--success:focus-within {
|
|
504
535
|
border-color: #1a8e60;
|
|
505
536
|
}
|
|
@@ -510,6 +541,10 @@
|
|
|
510
541
|
.eds-contrast .eds-form-control-wrapper--success:hover {
|
|
511
542
|
border-color: #1a8e60;
|
|
512
543
|
}
|
|
544
|
+
.eds-contrast .eds-form-control-wrapper--success[focus-within] {
|
|
545
|
+
--border-color: #5ac39a;
|
|
546
|
+
border-color: #181c56;
|
|
547
|
+
}
|
|
513
548
|
.eds-contrast .eds-form-control-wrapper--success:focus-within {
|
|
514
549
|
--border-color: #5ac39a;
|
|
515
550
|
border-color: #181c56;
|
|
@@ -521,6 +556,9 @@
|
|
|
521
556
|
.eds-form-control-wrapper--error:hover {
|
|
522
557
|
border-color: #ff9494;
|
|
523
558
|
}
|
|
559
|
+
.eds-form-control-wrapper--error[focus-within] {
|
|
560
|
+
border-color: #d31b1b;
|
|
561
|
+
}
|
|
524
562
|
.eds-form-control-wrapper--error:focus-within {
|
|
525
563
|
border-color: #d31b1b;
|
|
526
564
|
}
|
|
@@ -531,6 +569,10 @@
|
|
|
531
569
|
.eds-contrast .eds-form-control-wrapper--error:hover {
|
|
532
570
|
border-color: #d31b1b;
|
|
533
571
|
}
|
|
572
|
+
.eds-contrast .eds-form-control-wrapper--error[focus-within] {
|
|
573
|
+
border-color: #181c56;
|
|
574
|
+
--border-color: #ff9494;
|
|
575
|
+
}
|
|
534
576
|
.eds-contrast .eds-form-control-wrapper--error:focus-within {
|
|
535
577
|
border-color: #181c56;
|
|
536
578
|
--border-color: #ff9494;
|
|
@@ -539,12 +581,22 @@
|
|
|
539
581
|
background-color: #181c56;
|
|
540
582
|
color: #ffffff;
|
|
541
583
|
}
|
|
584
|
+
.eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
|
|
585
|
+
color: #aeb7e2;
|
|
586
|
+
}
|
|
587
|
+
.eds-contrast .eds-form-control-wrapper--dark :-ms-input-placeholder {
|
|
588
|
+
color: #aeb7e2;
|
|
589
|
+
}
|
|
542
590
|
.eds-contrast .eds-form-control-wrapper--dark ::placeholder {
|
|
543
591
|
color: #aeb7e2;
|
|
544
592
|
}
|
|
545
593
|
.eds-contrast .eds-form-control-wrapper--dark:hover {
|
|
546
594
|
border-color: #aeb7e2;
|
|
547
595
|
}
|
|
596
|
+
.eds-contrast .eds-form-control-wrapper--dark[focus-within] {
|
|
597
|
+
background-color: #292b6a;
|
|
598
|
+
border-color: #aeb7e2;
|
|
599
|
+
}
|
|
548
600
|
.eds-contrast .eds-form-control-wrapper--dark:focus-within {
|
|
549
601
|
background-color: #292b6a;
|
|
550
602
|
border-color: #aeb7e2;
|
|
@@ -559,7 +611,9 @@
|
|
|
559
611
|
}
|
|
560
612
|
|
|
561
613
|
.eds-form-control {
|
|
562
|
-
appearance: none;
|
|
614
|
+
-webkit-appearance: none;
|
|
615
|
+
-moz-appearance: none;
|
|
616
|
+
appearance: none;
|
|
563
617
|
background-color: transparent;
|
|
564
618
|
border: 0;
|
|
565
619
|
color: inherit;
|
|
@@ -570,6 +624,16 @@
|
|
|
570
624
|
padding: 20px 1rem 0.25rem;
|
|
571
625
|
width: 100%;
|
|
572
626
|
}
|
|
627
|
+
.eds-form-control::-moz-placeholder {
|
|
628
|
+
opacity: 0;
|
|
629
|
+
-moz-transition: opacity 0.2s ease-in-out;
|
|
630
|
+
transition: opacity 0.2s ease-in-out;
|
|
631
|
+
}
|
|
632
|
+
.eds-form-control:-ms-input-placeholder {
|
|
633
|
+
opacity: 0;
|
|
634
|
+
-ms-transition: opacity 0.2s ease-in-out;
|
|
635
|
+
transition: opacity 0.2s ease-in-out;
|
|
636
|
+
}
|
|
573
637
|
.eds-form-control::placeholder {
|
|
574
638
|
opacity: 0;
|
|
575
639
|
transition: opacity 0.2s ease-in-out;
|
|
@@ -577,6 +641,12 @@
|
|
|
577
641
|
.eds-form-control:focus {
|
|
578
642
|
outline: none;
|
|
579
643
|
}
|
|
644
|
+
.eds-form-control:focus::-moz-placeholder {
|
|
645
|
+
opacity: 1;
|
|
646
|
+
}
|
|
647
|
+
.eds-form-control:focus:-ms-input-placeholder {
|
|
648
|
+
opacity: 1;
|
|
649
|
+
}
|
|
580
650
|
.eds-form-control:focus::placeholder {
|
|
581
651
|
opacity: 1;
|
|
582
652
|
}
|
|
@@ -604,94 +674,193 @@ textarea.eds-form-control.eds-textarea {
|
|
|
604
674
|
line-height: 1.5rem;
|
|
605
675
|
}/* DO NOT CHANGE!*/
|
|
606
676
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
607
|
-
.eds-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
align-items: center;
|
|
611
|
-
position: relative;
|
|
612
|
-
cursor: pointer;
|
|
613
|
-
height: 2rem;
|
|
614
|
-
width: fit-content;
|
|
615
|
-
user-select: none;
|
|
616
|
-
}
|
|
617
|
-
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
618
|
-
border-color: #54568c;
|
|
677
|
+
.eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
|
|
678
|
+
border-color: #181c56;
|
|
679
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
619
680
|
}
|
|
620
|
-
.eds-
|
|
621
|
-
|
|
681
|
+
.eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
|
|
682
|
+
border-color: #181c56;
|
|
683
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
622
684
|
}
|
|
623
|
-
.eds-contrast .eds-
|
|
624
|
-
border-color: #
|
|
685
|
+
.eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
|
|
686
|
+
border-color: #ffffff;
|
|
687
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
625
688
|
}
|
|
626
|
-
.eds-contrast .eds-
|
|
627
|
-
|
|
689
|
+
.eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
|
|
690
|
+
border-color: #ffffff;
|
|
691
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
628
692
|
}
|
|
629
|
-
.eds-
|
|
693
|
+
.eds-radio-panel__wrapper input {
|
|
630
694
|
position: absolute;
|
|
631
695
|
opacity: 0;
|
|
632
696
|
cursor: pointer;
|
|
633
697
|
height: 0;
|
|
634
698
|
width: 0;
|
|
635
699
|
}
|
|
636
|
-
.eds-
|
|
637
|
-
|
|
638
|
-
|
|
700
|
+
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
|
|
701
|
+
border-color: #181c56;
|
|
702
|
+
background: #f5f5f8;
|
|
639
703
|
}
|
|
640
|
-
.eds-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
outline-offset: 0.125rem;
|
|
704
|
+
.eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
|
|
705
|
+
border-color: #aeb7e2;
|
|
706
|
+
background: #393d79;
|
|
644
707
|
}
|
|
645
|
-
.eds-
|
|
646
|
-
|
|
708
|
+
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
|
|
709
|
+
background-color: #181c56;
|
|
710
|
+
border-color: #181c56;
|
|
647
711
|
}
|
|
648
|
-
.eds-
|
|
712
|
+
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
|
|
713
|
+
visibility: visible;
|
|
714
|
+
}
|
|
715
|
+
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
|
|
716
|
+
stroke: #5ac39a;
|
|
717
|
+
-webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
718
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
719
|
+
}
|
|
720
|
+
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
|
|
721
|
+
opacity: 0.5;
|
|
722
|
+
}
|
|
723
|
+
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
|
|
724
|
+
opacity: 0.5;
|
|
725
|
+
}
|
|
726
|
+
.eds-radio-panel__container {
|
|
727
|
+
background: #ffffff;
|
|
728
|
+
border: 0.125rem solid #d1d3d3;
|
|
729
|
+
border-radius: 0.25rem;
|
|
730
|
+
display: flex;
|
|
731
|
+
flex-direction: column;
|
|
732
|
+
justify-content: flex-start;
|
|
733
|
+
min-width: 20rem;
|
|
649
734
|
position: relative;
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
735
|
+
padding: 1rem;
|
|
736
|
+
-webkit-user-select: none;
|
|
737
|
+
-moz-user-select: none;
|
|
738
|
+
-ms-user-select: none;
|
|
739
|
+
user-select: none;
|
|
740
|
+
width: -webkit-fit-content;
|
|
741
|
+
width: -moz-fit-content;
|
|
742
|
+
width: fit-content;
|
|
743
|
+
}
|
|
744
|
+
.eds-contrast .eds-radio-panel__container {
|
|
745
|
+
background: #181c56;
|
|
746
|
+
border-color: #54568c;
|
|
747
|
+
}
|
|
748
|
+
.eds-radio-panel__title-wrapper {
|
|
749
|
+
display: flex;
|
|
750
|
+
justify-content: space-between;
|
|
751
|
+
align-items: center;
|
|
752
|
+
}
|
|
753
|
+
.eds-radio-panel__label {
|
|
754
|
+
display: flex;
|
|
755
|
+
justify-content: center;
|
|
756
|
+
}
|
|
757
|
+
.eds-radio-panel__check {
|
|
758
|
+
height: 2rem;
|
|
759
|
+
width: 2rem;
|
|
760
|
+
margin-left: 1rem;
|
|
655
761
|
border-radius: 50%;
|
|
762
|
+
border: 0.125rem solid #e9e9e9;
|
|
656
763
|
display: flex;
|
|
657
764
|
align-items: center;
|
|
658
765
|
justify-content: center;
|
|
766
|
+
background: #ffffff;
|
|
767
|
+
transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
|
|
659
768
|
}
|
|
660
|
-
.eds-contrast .eds-
|
|
661
|
-
background
|
|
662
|
-
border-color: #
|
|
769
|
+
.eds-contrast .eds-radio-panel__check {
|
|
770
|
+
background: #181c56;
|
|
771
|
+
border-color: #54568c;
|
|
663
772
|
}
|
|
664
|
-
.eds-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
cursor: not-allowed;
|
|
773
|
+
.eds-radio-panel__additional-content {
|
|
774
|
+
margin-top: 0.25rem;
|
|
775
|
+
word-wrap: break-word;
|
|
668
776
|
}
|
|
669
|
-
.eds-
|
|
670
|
-
|
|
777
|
+
.eds-radio-panel--medium .eds-radio-panel__title {
|
|
778
|
+
font-size: 1rem;
|
|
779
|
+
font-weight: 500;
|
|
671
780
|
}
|
|
672
|
-
.eds-
|
|
673
|
-
|
|
674
|
-
|
|
781
|
+
.eds-radio-panel--medium.eds-radio-panel__container {
|
|
782
|
+
padding-bottom: 1rem;
|
|
783
|
+
min-height: 3.75rem;
|
|
675
784
|
}
|
|
676
|
-
.eds-
|
|
785
|
+
.eds-radio-panel--large.eds-radio-panel__container {
|
|
786
|
+
min-height: 6.5rem;
|
|
787
|
+
}
|
|
788
|
+
.eds-radio-panel--large .eds-radio-panel__title-wrapper {
|
|
789
|
+
height: 2rem;
|
|
790
|
+
}
|
|
791
|
+
.eds-radio-panel--large .eds-radio-panel__title {
|
|
792
|
+
font-size: 1.25rem;
|
|
793
|
+
font-weight: 500;
|
|
794
|
+
line-height: 1.875rem;
|
|
795
|
+
}
|
|
796
|
+
.eds-radio-panel--disabled {
|
|
797
|
+
background: #f3f3f3;
|
|
798
|
+
border-color: #f3f3f3;
|
|
677
799
|
color: #656782;
|
|
678
800
|
}
|
|
679
|
-
.eds-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
801
|
+
.eds-contrast .eds-radio-panel--disabled {
|
|
802
|
+
background: #181c56;
|
|
803
|
+
border-style: dashed;
|
|
804
|
+
border-color: #54568c;
|
|
805
|
+
color: #babbcf;
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
.eds-checkbox-icon {
|
|
809
|
+
width: 1.5em;
|
|
810
|
+
height: 1.5em;
|
|
811
|
+
}
|
|
812
|
+
.eds-checkbox-icon__path {
|
|
813
|
+
transform-origin: 50% 50%;
|
|
814
|
+
stroke-dasharray: 48;
|
|
815
|
+
stroke-dashoffset: 48;
|
|
816
|
+
stroke-width: 0.375rem;
|
|
817
|
+
}/* DO NOT CHANGE!*/
|
|
818
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
819
|
+
.eds-textfield__clear-button {
|
|
820
|
+
background: none;
|
|
821
|
+
border: none;
|
|
683
822
|
border-radius: 50%;
|
|
684
|
-
|
|
685
|
-
|
|
823
|
+
color: inherit;
|
|
824
|
+
cursor: pointer;
|
|
825
|
+
display: flex;
|
|
826
|
+
font: inherit;
|
|
827
|
+
font-size: 1rem;
|
|
828
|
+
line-height: 1rem;
|
|
829
|
+
padding: 0.5rem;
|
|
830
|
+
margin-right: -0.75rem;
|
|
686
831
|
}
|
|
687
|
-
.eds-
|
|
688
|
-
|
|
832
|
+
.eds-textfield__clear-button-wrapper {
|
|
833
|
+
display: flex;
|
|
834
|
+
align-items: center;
|
|
835
|
+
}
|
|
836
|
+
.eds-textfield__clear-button:hover {
|
|
837
|
+
background: #f3f3f3;
|
|
838
|
+
}
|
|
839
|
+
.eds-textfield__clear-button:focus {
|
|
840
|
+
outline: none;
|
|
841
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
842
|
+
}
|
|
843
|
+
|
|
844
|
+
.eds-textfield__divider {
|
|
845
|
+
content: "";
|
|
846
|
+
display: block;
|
|
847
|
+
background-color: #e9e9e9;
|
|
848
|
+
height: 1.5rem;
|
|
849
|
+
width: 1px;
|
|
850
|
+
}
|
|
851
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
852
|
+
background-color: #8285a8;
|
|
689
853
|
}/* DO NOT CHANGE!*/
|
|
690
854
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
691
855
|
.eds-switch {
|
|
692
856
|
cursor: pointer;
|
|
693
|
-
user-select: none;
|
|
857
|
+
-webkit-user-select: none;
|
|
858
|
+
-moz-user-select: none;
|
|
859
|
+
-ms-user-select: none;
|
|
860
|
+
user-select: none;
|
|
694
861
|
padding: 0.5rem 0;
|
|
862
|
+
width: -webkit-fit-content;
|
|
863
|
+
width: -moz-fit-content;
|
|
695
864
|
width: fit-content;
|
|
696
865
|
}
|
|
697
866
|
.eds-switch input {
|
|
@@ -795,42 +964,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
795
964
|
font-size: 0.75rem;
|
|
796
965
|
}/* DO NOT CHANGE!*/
|
|
797
966
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
798
|
-
.eds-textfield__clear-button {
|
|
799
|
-
background: none;
|
|
800
|
-
border: none;
|
|
801
|
-
border-radius: 50%;
|
|
802
|
-
color: inherit;
|
|
803
|
-
cursor: pointer;
|
|
804
|
-
display: flex;
|
|
805
|
-
font: inherit;
|
|
806
|
-
font-size: 1rem;
|
|
807
|
-
line-height: 1rem;
|
|
808
|
-
padding: 0.5rem;
|
|
809
|
-
margin-right: -0.75rem;
|
|
810
|
-
}
|
|
811
|
-
.eds-textfield__clear-button-wrapper {
|
|
812
|
-
display: flex;
|
|
813
|
-
align-items: center;
|
|
814
|
-
}
|
|
815
|
-
.eds-textfield__clear-button:hover {
|
|
816
|
-
background: #f3f3f3;
|
|
817
|
-
}
|
|
818
|
-
.eds-textfield__clear-button:focus {
|
|
819
|
-
outline: none;
|
|
820
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
821
|
-
}
|
|
822
|
-
|
|
823
|
-
.eds-textfield__divider {
|
|
824
|
-
content: "";
|
|
825
|
-
display: block;
|
|
826
|
-
background-color: #e9e9e9;
|
|
827
|
-
height: 1.5rem;
|
|
828
|
-
width: 1px;
|
|
829
|
-
}
|
|
830
|
-
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
831
|
-
background-color: #8285a8;
|
|
832
|
-
}/* DO NOT CHANGE!*/
|
|
833
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
834
967
|
.eds-segmented-control {
|
|
835
968
|
margin-top: 0.25rem;
|
|
836
969
|
display: flex;
|
|
@@ -858,7 +991,10 @@ textarea.eds-form-control.eds-textarea {
|
|
|
858
991
|
padding: calc(0.25rem/ 2) 0.75rem;
|
|
859
992
|
height: 1.5rem;
|
|
860
993
|
text-align: center;
|
|
861
|
-
user-select: none;
|
|
994
|
+
-webkit-user-select: none;
|
|
995
|
+
-moz-user-select: none;
|
|
996
|
+
-ms-user-select: none;
|
|
997
|
+
user-select: none;
|
|
862
998
|
}
|
|
863
999
|
.eds-contrast .eds-segmented-choice .eds-base-segmented {
|
|
864
1000
|
border-color: #393d79;
|
|
@@ -876,7 +1012,9 @@ textarea.eds-form-control.eds-textarea {
|
|
|
876
1012
|
--background-color: #54568c;
|
|
877
1013
|
}
|
|
878
1014
|
.eds-segmented-choice input {
|
|
879
|
-
appearance: none;
|
|
1015
|
+
-webkit-appearance: none;
|
|
1016
|
+
-moz-appearance: none;
|
|
1017
|
+
appearance: none;
|
|
880
1018
|
position: absolute;
|
|
881
1019
|
opacity: 0;
|
|
882
1020
|
height: 0;
|