@entur/form 8.1.9-beta.0 → 8.1.9

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.
Files changed (2) hide show
  1. package/dist/styles.css +593 -649
  2. package/package.json +8 -8
package/dist/styles.css CHANGED
@@ -1,81 +1,3 @@
1
- .eds-fieldset {
2
- margin: 0;
3
- padding: 0;
4
- border: 0;
5
- }
6
- /* DO NOT CHANGE!*/
7
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
8
- .eds-feedback-text {
9
- display: flex;
10
- align-items: center;
11
- margin-top: 0.25rem;
12
- }
13
- .eds-feedback-text--info, .eds-feedback-text--information {
14
- padding-left: calc(1rem + 0.125rem);
15
- }
16
- .eds-feedback-text__text {
17
- color: var(--components-form-feedbacktext-information-standard-text);
18
- }
19
- .eds-contrast .eds-feedback-text__text {
20
- color: var(--components-form-feedbacktext-information-contrast-text);
21
- }
22
-
23
- .eds-feedback-text__icon {
24
- font-size: 1.5rem;
25
- min-height: 1.5rem;
26
- min-width: 1.5rem;
27
- padding-right: 0.5rem;
28
- position: relative;
29
- top: -0.1rem;
30
- }
31
- .eds-feedback-text__icon--success {
32
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
33
- }
34
- .eds-feedback-text__icon--success circle {
35
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
36
- }
37
- .eds-contrast .eds-feedback-text__icon--success {
38
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
39
- }
40
- .eds-contrast .eds-feedback-text__icon--success circle {
41
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
42
- }
43
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
44
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
45
- }
46
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
47
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
48
- }
49
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
50
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
51
- }
52
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
53
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
54
- }
55
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
56
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
57
- }
58
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
59
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
60
- }
61
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
62
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
63
- }
64
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
65
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
66
- }
67
- .eds-feedback-text__icon--warning {
68
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
69
- }
70
- .eds-feedback-text__icon--warning .svg-exclamation {
71
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
72
- }
73
- .eds-contrast .eds-feedback-text__icon--warning {
74
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
75
- }
76
- .eds-contrast .eds-feedback-text__icon--warning circle {
77
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
78
- }
79
1
  /* DO NOT CHANGE!*/
80
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
81
3
  .eds-checkbox__container {
@@ -166,22 +88,12 @@
166
88
  background-color: var(--components-form-checkbox-contrast-fill-selected);
167
89
  }
168
90
  .eds-checkbox__container:focus + .eds-checkbox__icon,
169
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
170
- outline: 2px solid #181c56;
171
- outline-color: var(--basecolors-stroke-focus-standard);
172
- outline-offset: 0.125rem;
173
- }
174
- .eds-checkbox__container:focus + .eds-checkbox__icon,
175
91
  .eds-checkbox__container :focus-within + .eds-checkbox__icon {
176
92
  outline: 2px solid #181c56;
177
93
  outline-color: var(--basecolors-stroke-focus-standard);
178
94
  outline-offset: 0.125rem;
179
95
  }
180
96
  .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
181
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
182
- outline-color: var(--basecolors-stroke-focus-contrast);
183
- }
184
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
185
97
  .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
186
98
  outline-color: var(--basecolors-stroke-focus-contrast);
187
99
  }
@@ -231,493 +143,374 @@
231
143
  stroke-dashoffset: 0;
232
144
  }
233
145
  }
146
+ .eds-fieldset {
147
+ margin: 0;
148
+ padding: 0;
149
+ border: 0;
150
+ }
234
151
  /* DO NOT CHANGE!*/
235
152
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
236
- .eds-form-control__field-and-feedback-text {
237
- display: flex;
238
- flex-direction: column;
239
- height: -moz-fit-content;
240
- height: fit-content;
241
- width: 100%;
242
- }
243
- .eds-form-control__field-and-feedback-text--has-tooltip {
244
- padding-right: 2rem;
153
+ .eds-input-group {
154
+ color: inherit;
155
+ display: block;
156
+ position: relative;
245
157
  }
246
- .eds-form-control-wrapper {
158
+ .eds-input-group__label {
159
+ color: var(--components-form-baseform-standard-text-label);
247
160
  display: flex;
248
- align-items: center;
249
- position: relative;
250
- flex: 1;
251
- min-height: 3rem;
252
- padding-left: 1rem;
253
- padding-right: 1rem;
254
- background-color: var(--components-form-baseform-standard-fill-default);
255
- border-radius: 0.25rem;
256
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
257
- box-shadow: 0 0 0 transparent;
258
- color: var(--components-form-baseform-standard-text-content);
259
- transition: border-color 0.1s ease-in-out;
161
+ font-size: 1rem;
162
+ position: absolute;
163
+ line-height: 1rem;
164
+ height: 3rem;
165
+ padding-left: 0;
166
+ top: 1rem;
167
+ 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;
168
+ -webkit-user-select: none;
169
+ -moz-user-select: none;
170
+ user-select: none;
171
+ pointer-events: none;
260
172
  }
261
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
262
- border-color: var(--components-form-baseform-standard-border-interactive);
173
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
174
+ top: 0.375rem;
175
+ font-size: 0.75rem;
176
+ line-height: 0.75rem;
177
+ height: 10px;
178
+ padding: 0;
263
179
  }
264
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
265
- border-color: var(--components-form-baseform-standard-border-interactive);
180
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
181
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
182
+ background: var(--textarea-label-background);
183
+ width: calc(100% - 1rem - 1rem - 4px);
266
184
  }
267
- .eds-contrast .eds-form-control-wrapper:hover {
268
- border-color: var(--components-form-baseform-contrast-border-interactive);
185
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
186
+ top: 0.5rem;
187
+ font-size: 0.875rem;
188
+ line-height: 1rem;
189
+ padding: 0;
269
190
  }
270
- .eds-form-control-wrapper[focus-within] {
271
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
191
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
192
+ top: 0.75rem;
193
+ font-size: 1.5rem;
194
+ line-height: 2.25rem;
272
195
  }
273
- .eds-form-control-wrapper:focus-within {
274
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
196
+ .eds-input-group__label--filled {
197
+ top: 0.375rem;
198
+ font-size: 0.75rem;
199
+ line-height: 0.75rem;
200
+ height: 10px;
201
+ padding: 0;
275
202
  }
276
- .eds-contrast .eds-form-control-wrapper[focus-within] {
277
- outline: var(--components-form-baseform-contrast-border-interactive);
203
+ .eds-textarea__label .eds-input-group__label--filled {
204
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
205
+ background: var(--textarea-label-background);
206
+ width: calc(100% - 1rem - 1rem - 4px);
278
207
  }
279
- .eds-contrast .eds-form-control-wrapper:focus-within {
280
- outline: var(--components-form-baseform-contrast-border-interactive);
208
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
209
+ top: 0.5rem;
210
+ font-size: 0.875rem;
211
+ line-height: 1rem;
212
+ padding: 0;
281
213
  }
282
- .eds-form-control-wrapper ::-moz-placeholder {
283
- color: var(--components-form-baseform-standard-text-label);
214
+
215
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
216
+ top: 0.375rem;
217
+ font-size: 0.75rem;
218
+ line-height: 0.75rem;
219
+ height: 10px;
220
+ padding: 0;
284
221
  }
285
- .eds-form-control-wrapper ::placeholder {
286
- color: var(--components-form-baseform-standard-text-label);
222
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
223
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
224
+ background: var(--textarea-label-background);
225
+ width: calc(100% - 1rem - 1rem - 4px);
287
226
  }
288
- .eds-form-control-wrapper--disabled {
289
- border-color: transparent;
290
- background-color: var(--components-form-baseform-standard-fill-disabled);
291
- pointer-events: none;
292
- color: var(--components-form-baseform-standard-text-disabled);
227
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
228
+ top: 0.5rem;
229
+ font-size: 0.875rem;
230
+ line-height: 1rem;
231
+ padding: 0;
293
232
  }
294
- .eds-form-control-wrapper--disabled .eds-input-group__label {
295
- color: var(--components-form-baseform-standard-text-disabled);
233
+ /* DO NOT CHANGE!*/
234
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
235
+ .eds-form-component--radio__container {
236
+ display: flex;
237
+ justify-content: center;
238
+ align-items: center;
239
+ position: relative;
240
+ cursor: pointer;
241
+ height: 2rem;
242
+ width: -moz-fit-content;
243
+ width: fit-content;
244
+ -webkit-user-select: none;
245
+ -moz-user-select: none;
246
+ user-select: none;
296
247
  }
297
- .eds-contrast .eds-form-control-wrapper--disabled {
298
- border-color: transparent;
299
- background-color: var(--components-form-baseform-contrast-fill-disabled);
300
- color: var(--components-form-baseform-contrast-text-disabled);
248
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
249
+ background-color: var(--components-form-radio-standard-fill-hover);
301
250
  }
302
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
303
- color: var(--components-form-baseform-contrast-text-disabled);
251
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
252
+ background-color: var(--components-form-radio-contrast-fill-hover);
304
253
  }
305
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
306
- display: none;
254
+ .eds-form-component--radio__container input {
255
+ position: absolute;
256
+ opacity: 0;
257
+ cursor: pointer;
258
+ height: 0;
259
+ width: 0;
307
260
  }
308
- .eds-form-control-wrapper--readonly {
309
- border-color: transparent;
310
- pointer-events: none;
311
- cursor: default;
312
- background: var(--components-form-baseform-standard-fill-readonly);
313
- border: var(--components-form-baseform-standard-fill-readonly);
261
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
262
+ height: 0.625rem;
263
+ width: 0.625rem;
314
264
  }
315
- .eds-contrast .eds-form-control-wrapper--readonly {
316
- background: var(--components-form-baseform-contrast-fill-readonly);
317
- color: var(--components-form-baseform-contrast-text-description);
318
- border: var(--components-form-baseform-contrast-fill-readonly);
265
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
266
+ outline: 2px solid #181c56;
267
+ outline-color: var(--basecolors-stroke-focus-standard);
268
+ outline-offset: 0.125rem;
319
269
  }
320
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
321
- color: var(--components-form-baseform-contrast-text-description);
270
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
271
+ outline-color: var(--basecolors-stroke-focus-contrast);
322
272
  }
323
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
324
- display: none;
273
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
274
+ position: relative;
275
+ height: 1.25rem;
276
+ width: 1.25rem;
277
+ margin-right: 1rem;
278
+ background-color: var(--components-form-radio-standard-fill-default);
279
+ border: 0.125rem solid var(--components-form-radio-standard-border);
280
+ border-radius: 50%;
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: center;
325
284
  }
326
- .eds-form-control-wrapper--size-medium .eds-form-control,
327
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
328
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
329
- font-size: 1rem;
330
- line-height: 1rem;
285
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
286
+ background-color: var(--components-form-radio-contrast-fill-default);
287
+ border-color: var(--components-form-radio-contrast-border);
331
288
  }
332
- .eds-form-control-wrapper--size-large {
333
- min-height: 4rem;
289
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
290
+ background: var(--components-form-baseform-contrast-fill-disabled);
291
+ border-color: var(--components-form-baseform-contrast-text-disabled);
292
+ cursor: not-allowed;
334
293
  }
335
- .eds-form-control-wrapper--size-large .eds-form-control,
336
- .eds-form-control-wrapper--size-large .eds-form-control__append,
337
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
338
- font-size: 1.5rem;
294
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
295
+ border-color: var(--components-form-baseform-contrast-text-disabled);
339
296
  }
340
- .eds-form-control-wrapper--success {
341
- border-color: var(--components-form-baseform-standard-border-success);
297
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
298
+ background: var(--components-form-baseform-contrast-fill-disabled);
299
+ border-color: var(--components-form-baseform-contrast-text-disabled);
342
300
  }
343
- .eds-form-control-wrapper--success[focus-within] {
344
- border-color: var(--components-form-baseform-standard-border-success);
301
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
302
+ color: var(--components-form-baseform-contrast-text-disabled);
345
303
  }
346
- .eds-form-control-wrapper--success:focus-within {
347
- border-color: var(--components-form-baseform-standard-border-success);
304
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
305
+ display: block;
306
+ width: 0;
307
+ height: 0;
308
+ border-radius: 50%;
309
+ background-color: var(--components-form-radio-standard-fill-selected);
310
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
348
311
  }
349
- .eds-contrast .eds-form-control-wrapper--success {
350
- border-color: var(--components-form-baseform-standard-border-success);
312
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
313
+ background-color: var(--components-form-radio-contrast-icon);
351
314
  }
352
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
353
- border-color: var(--components-form-baseform-contrast-border-success);
315
+ /* DO NOT CHANGE!*/
316
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
317
+ .eds-switch {
318
+ cursor: pointer;
319
+ -webkit-user-select: none;
320
+ -moz-user-select: none;
321
+ user-select: none;
322
+ padding: 0.5rem 0;
323
+ width: -moz-fit-content;
324
+ width: fit-content;
354
325
  }
355
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
356
- border-color: var(--components-form-baseform-contrast-border-success);
326
+ .eds-switch input {
327
+ opacity: 0;
328
+ pointer-events: none;
329
+ position: absolute;
357
330
  }
358
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
359
- border-color: var(--components-form-baseform-standard-border-negative);
331
+ .eds-switch--right {
332
+ display: flex;
333
+ flex-direction: row;
334
+ align-items: center;
360
335
  }
361
- .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
362
- border-color: var(--components-form-baseform-standard-border-negative);
336
+ .eds-switch--bottom {
337
+ display: flex;
338
+ flex-direction: column;
339
+ align-items: center;
363
340
  }
364
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
365
- border-color: var(--components-form-baseform-standard-border-negative);
341
+ .eds-switch__circle {
342
+ border-radius: 50%;
343
+ height: 1.25rem;
344
+ width: 1.25rem;
345
+ content: "";
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: center;
349
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
350
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
351
+ background-color: var(--components-form-switch-standard-switch);
352
+ top: 0.125rem;
353
+ left: 0.125rem;
354
+ position: relative;
366
355
  }
367
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
368
- border-color: var(--components-form-baseform-contrast-border-negative);
356
+ .eds-switch__switch--large .eds-switch__circle {
357
+ height: 1.75rem;
358
+ width: 1.75rem;
369
359
  }
370
- .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
371
- border-color: var(--components-form-baseform-contrast-border-negative);
360
+ .eds-contrast .eds-switch__circle {
361
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
372
362
  }
373
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
374
- border-color: var(--components-form-baseform-contrast-border-negative);
363
+ .eds-switch__switch {
364
+ position: relative;
365
+ background-color: var(--components-form-switch-standard-fill-false);
366
+ content: "";
367
+ display: block;
368
+ transition: background-color 0.1s ease-in-out;
369
+ height: 1.5rem;
370
+ width: 3rem;
371
+ border-radius: 1.5rem;
372
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
375
373
  }
376
- .eds-contrast .eds-form-control .eds-tooltip {
377
- background: var(--components-tooltip-tooltip-standard-fill);
378
- color: var(--components-tooltip-tooltip-standard-text);
379
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
374
+ .eds-contrast .eds-switch__switch {
375
+ background-color: var(--components-form-switch-contrast-fill-false);
380
376
  }
381
- .eds-form-control .eds-tooltip::after {
382
- background: var(--components-tooltip-tooltip-standard-fill);
377
+ .eds-switch--right .eds-switch__switch {
378
+ margin-right: 0.75rem;
383
379
  }
384
-
385
- .eds-form-control {
386
- display: block;
387
- -webkit-appearance: none;
388
- -moz-appearance: none;
389
- appearance: none;
390
- width: 100%;
391
- height: 100%;
392
- padding: 20px 0rem 0.25rem;
393
- font-family: inherit;
394
- font-size: 1rem;
395
- line-height: 1rem;
396
- border: 0;
397
- color: var(--components-form-baseform-standard-text-content);
398
- background-color: transparent;
380
+ .eds-switch__switch svg g,
381
+ .eds-switch__switch path {
382
+ fill: var(--components-form-switch-standard-icon-false);
383
+ transition: fill ease-in-out 0.1s;
399
384
  }
400
- .eds-form-control::-moz-placeholder {
401
- opacity: 0;
402
- -moz-transition: opacity 0.2s ease-in-out;
403
- transition: opacity 0.2s ease-in-out;
385
+ .eds-contrast .eds-switch__switch svg g,
386
+ .eds-contrast .eds-switch__switch path {
387
+ fill: var(--components-form-switch-contrast-icon-false);
404
388
  }
405
- .eds-form-control::placeholder {
406
- opacity: 0;
407
- transition: opacity 0.2s ease-in-out;
389
+ :checked + .eds-switch__switch {
390
+ background-color: var(--eds-switch-color);
408
391
  }
409
- .eds-form-control:focus {
410
- outline: none;
392
+ :checked + .eds-switch__switch .eds-switch__circle {
393
+ left: 1.625rem;
411
394
  }
412
- .eds-form-control:focus::-moz-placeholder {
413
- opacity: 1;
395
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
396
+ :checked + .eds-switch__switch .eds-switch__circle path {
397
+ fill: var(--eds-switch-color);
414
398
  }
415
- .eds-form-control:focus::placeholder {
416
- opacity: 1;
399
+ .eds-contrast :checked + .eds-switch__switch {
400
+ background-color: var(--eds-switch-contrast-color);
417
401
  }
418
- .eds-form-control__prepend, .eds-form-control__append {
419
- position: relative;
420
- line-height: inherit;
402
+ :focus + .eds-switch__switch {
403
+ outline: 2px solid #181c56;
404
+ outline-color: var(--basecolors-stroke-focus-standard);
405
+ outline-offset: 0.125rem;
421
406
  }
422
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
423
- all: unset;
424
- position: absolute;
425
- display: flex;
426
- align-items: center;
427
- justify-content: center;
428
- height: 1.5rem;
429
- width: 1.5rem;
430
- right: -2rem;
431
- border-radius: 100%;
432
- color: var(--primary-text-color);
433
- cursor: pointer;
407
+ .eds-contrast :focus + .eds-switch__switch {
408
+ outline-color: var(--basecolors-stroke-focus-contrast);
434
409
  }
435
- .eds-form-control__prepend {
436
- margin-right: 0.75rem;
437
- margin-left: 0;
410
+ .eds-switch__switch--large {
411
+ width: 3.75rem;
412
+ height: 2rem;
413
+ border-radius: 3.75rem;
438
414
  }
439
- .eds-form-control__append {
440
- margin-right: 0;
441
- margin-left: 0.75rem;
415
+ :checked + .eds-switch__switch--large .eds-switch__circle {
416
+ left: 1.875rem;
442
417
  }
443
- /* DO NOT CHANGE!*/
444
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
445
- .eds-input-group {
446
- color: inherit;
447
- display: block;
418
+ .eds-switch__switch--large svg {
448
419
  position: relative;
420
+ right: 0.05rem;
449
421
  }
450
- .eds-input-group__label {
451
- color: var(--components-form-baseform-standard-text-label);
452
- display: flex;
422
+ .eds-switch__label--large--right {
453
423
  font-size: 1rem;
454
- position: absolute;
455
- line-height: 1rem;
456
- height: 3rem;
457
- padding-left: 0;
458
- top: 1rem;
459
- 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;
460
- -webkit-user-select: none;
461
- -moz-user-select: none;
462
- user-select: none;
463
- pointer-events: none;
464
- }
465
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
466
- top: 0.375rem;
467
- font-size: 0.75rem;
468
- line-height: 0.75rem;
469
- height: 10px;
470
- padding: 0;
471
424
  }
472
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
473
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
474
- background: var(--textarea-label-background);
475
- width: calc(100% - 1rem - 1rem - 4px);
476
- }
477
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
478
- top: 0.5rem;
425
+ .eds-switch__label--large--bottom {
479
426
  font-size: 0.875rem;
480
- line-height: 1rem;
481
- padding: 0;
482
427
  }
483
- .eds-form-control-wrapper--size-large .eds-input-group__label {
484
- top: 0.75rem;
485
- font-size: 1.5rem;
486
- line-height: 2.25rem;
428
+ .eds-switch__label--medium--right {
429
+ font-size: 0.875rem;
487
430
  }
488
- .eds-input-group__label--filled {
489
- top: 0.375rem;
431
+ .eds-switch__label--medium--bottom {
490
432
  font-size: 0.75rem;
491
- line-height: 0.75rem;
492
- height: 10px;
493
- padding: 0;
494
433
  }
495
- .eds-textarea__label .eds-input-group__label--filled {
496
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
497
- background: var(--textarea-label-background);
498
- width: calc(100% - 1rem - 1rem - 4px);
434
+ /* DO NOT CHANGE!*/
435
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
436
+ .eds-feedback-text {
437
+ display: flex;
438
+ align-items: center;
439
+ margin-top: 0.25rem;
499
440
  }
500
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
501
- top: 0.5rem;
502
- font-size: 0.875rem;
503
- line-height: 1rem;
504
- padding: 0;
441
+ .eds-feedback-text--info, .eds-feedback-text--information {
442
+ padding-left: calc(1rem + 0.125rem);
505
443
  }
506
-
507
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
508
- top: 0.375rem;
509
- font-size: 0.75rem;
510
- line-height: 0.75rem;
511
- height: 10px;
512
- padding: 0;
444
+ .eds-feedback-text__text {
445
+ color: var(--components-form-feedbacktext-information-standard-text);
446
+ }
447
+ .eds-contrast .eds-feedback-text__text {
448
+ color: var(--components-form-feedbacktext-information-contrast-text);
513
449
  }
514
450
 
515
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
516
- top: 0.375rem;
517
- font-size: 0.75rem;
518
- line-height: 0.75rem;
519
- height: 10px;
520
- padding: 0;
451
+ .eds-feedback-text__icon {
452
+ font-size: 1.5rem;
453
+ min-height: 1.5rem;
454
+ min-width: 1.5rem;
455
+ padding-right: 0.5rem;
456
+ position: relative;
457
+ top: -0.1rem;
521
458
  }
522
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
523
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
524
- background: var(--textarea-label-background);
525
- width: calc(100% - 1rem - 1rem - 4px);
459
+ .eds-feedback-text__icon--success {
460
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
526
461
  }
527
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
528
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
529
- background: var(--textarea-label-background);
530
- width: calc(100% - 1rem - 1rem - 4px);
462
+ .eds-feedback-text__icon--success circle {
463
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
531
464
  }
532
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
533
- top: 0.5rem;
534
- font-size: 0.875rem;
535
- line-height: 1rem;
536
- padding: 0;
465
+ .eds-contrast .eds-feedback-text__icon--success {
466
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
537
467
  }
538
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
539
- top: 0.5rem;
540
- font-size: 0.875rem;
541
- line-height: 1rem;
542
- padding: 0;
468
+ .eds-contrast .eds-feedback-text__icon--success circle {
469
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
543
470
  }
544
- /* DO NOT CHANGE!*/
545
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
546
- /* DO NOT CHANGE!*/
547
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
548
- /* DO NOT CHANGE!*/
549
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
550
- /* DO NOT CHANGE!*/
551
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
552
- /* DO NOT CHANGE!*/
553
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
554
- [data-color-mode=light],
555
- :root {
556
- --basecolors-frame-contrast: #181c56;
557
- --basecolors-frame-contrastalt: #393d79;
558
- --basecolors-frame-default: #ffffff;
559
- --basecolors-frame-elevated: #ffffff;
560
- --basecolors-frame-elevatedalt: #f6f6f9;
561
- --basecolors-frame-subdued: #d9dae8;
562
- --basecolors-frame-tint: #f6f6f9;
563
- --basecolors-shape-accent: #181c56;
564
- --basecolors-shape-bicycle-contrast: #00db9b;
565
- --basecolors-shape-bicycle-default: #388f76;
566
- --basecolors-shape-bus-contrast: #ff6392;
567
- --basecolors-shape-bus-default: #c5044e;
568
- --basecolors-shape-cableway-contrast: #b482fb;
569
- --basecolors-shape-cableway-default: #78469a;
570
- --basecolors-shape-disabled: #6e6f73;
571
- --basecolors-shape-disabledalt: #b6b8ba;
572
- --basecolors-shape-ferry-contrast: #6fdfff;
573
- --basecolors-shape-ferry-default: #0c6693;
574
- --basecolors-shape-funicular-contrast: #b482fb;
575
- --basecolors-shape-funicular-default: #78469a;
576
- --basecolors-shape-helicopter-contrast: #fbafea;
577
- --basecolors-shape-helicopter-default: #800664;
578
- --basecolors-shape-highlight: #ff5959;
579
- --basecolors-shape-light: #ffffff;
580
- --basecolors-shape-mask: #ffffff;
581
- --basecolors-shape-maskalt: #ffffff;
582
- --basecolors-shape-metro-contrast: #f08901;
583
- --basecolors-shape-metro-default: #bf5826;
584
- --basecolors-shape-mobility-contrast: #00db9b;
585
- --basecolors-shape-mobility-default: #388f76;
586
- --basecolors-shape-plane-contrast: #fbafea;
587
- --basecolors-shape-plane-default: #800664;
588
- --basecolors-shape-subdued: #626493;
589
- --basecolors-shape-subduedalt: #d9dae8;
590
- --basecolors-shape-taxi-contrast: #ffe082;
591
- --basecolors-shape-taxi-default: #3d3e40;
592
- --basecolors-shape-train-contrast: #42a5f5;
593
- --basecolors-shape-train-default: #00367f;
594
- --basecolors-shape-tram-contrast: #b482fb;
595
- --basecolors-shape-tram-default: #78469a;
596
- --basecolors-shape-walk-contrast: #8284ab;
597
- --basecolors-shape-walk-default: #8d8e9c;
598
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
599
- --basecolors-shape-airportlinkbus-default: #800664;
600
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
601
- --basecolors-shape-airportlinkrail-default: #800664;
602
- --basecolors-stroke-contrast: #aeb7e2;
603
- --basecolors-stroke-default: #181c56;
604
- --basecolors-stroke-disabled: #949699;
605
- --basecolors-stroke-focus-contrast: #aeb7e2;
606
- --basecolors-stroke-focus-standard: #181c56;
607
- --basecolors-stroke-highlight: #ff5959;
608
- --basecolors-stroke-light: #ffffff;
609
- --basecolors-stroke-subdued: #8284ab;
610
- --basecolors-stroke-subduedalt: #e3e6e8;
611
- --basecolors-text-accent: #181c56;
612
- --basecolors-text-disabled: #6e6f73;
613
- --basecolors-text-disabledalt: #b6b8ba;
614
- --basecolors-text-highlight: #ff5959;
615
- --basecolors-text-light: #ffffff;
616
- --basecolors-text-subdued: #626493;
617
- --basecolors-text-subduedalt: #d9dae8;
471
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
472
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
618
473
  }
619
-
620
- [data-color-mode=dark] {
621
- --basecolors-frame-contrast: #212233;
622
- --basecolors-frame-contrastalt: #141527;
623
- --basecolors-frame-default: #08091c;
624
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
625
- --basecolors-frame-elevatedalt: #464755;
626
- --basecolors-frame-subdued: #2d2e3e;
627
- --basecolors-frame-tint: #141527;
628
- --basecolors-shape-accent: #e5e5e9;
629
- --basecolors-shape-bicycle-contrast: #4db295;
630
- --basecolors-shape-bicycle-default: #4db295;
631
- --basecolors-shape-bus-contrast: #ef7398;
632
- --basecolors-shape-bus-default: #ef7398;
633
- --basecolors-shape-cableway-contrast: #b898e5;
634
- --basecolors-shape-cableway-default: #b898e5;
635
- --basecolors-shape-disabled: #b6b8ba;
636
- --basecolors-shape-disabledalt: #b3b4bd;
637
- --basecolors-shape-ferry-contrast: #8ccfe2;
638
- --basecolors-shape-ferry-default: #8ccfe2;
639
- --basecolors-shape-funicular-contrast: #b898e5;
640
- --basecolors-shape-funicular-default: #b898e5;
641
- --basecolors-shape-helicopter-contrast: #f2b8e5;
642
- --basecolors-shape-helicopter-default: #f2b8e5;
643
- --basecolors-shape-highlight: #ff9494;
644
- --basecolors-shape-light: #e5e5e9;
645
- --basecolors-shape-mask: #2d2e3e;
646
- --basecolors-shape-maskalt: #393a49;
647
- --basecolors-shape-metro-contrast: #dd973c;
648
- --basecolors-shape-metro-default: #dd973c;
649
- --basecolors-shape-mobility-contrast: #4db295;
650
- --basecolors-shape-mobility-default: #4db295;
651
- --basecolors-shape-plane-contrast: #f2b8e5;
652
- --basecolors-shape-plane-default: #f2b8e5;
653
- --basecolors-shape-subdued: #b3b4bd;
654
- --basecolors-shape-subduedalt: #b3b4bd;
655
- --basecolors-shape-taxi-contrast: #ffe082;
656
- --basecolors-shape-taxi-default: #ffe082;
657
- --basecolors-shape-train-contrast: #60a2d7;
658
- --basecolors-shape-train-default: #60a2d7;
659
- --basecolors-shape-tram-contrast: #b898e5;
660
- --basecolors-shape-tram-default: #b898e5;
661
- --basecolors-shape-walk-contrast: #8d8e9c;
662
- --basecolors-shape-walk-default: #8d8e9c;
663
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
664
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
665
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
666
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
667
- --basecolors-stroke-contrast: #aeb7e2;
668
- --basecolors-stroke-default: #b3b4bd;
669
- --basecolors-stroke-disabled: #e3e6e8;
670
- --basecolors-stroke-focus-contrast: #aeb7e2;
671
- --basecolors-stroke-focus-standard: #aeb7e2;
672
- --basecolors-stroke-highlight: #ff9494;
673
- --basecolors-stroke-light: #b3b4bd;
674
- --basecolors-stroke-subdued: #81828f;
675
- --basecolors-stroke-subduedalt: #949699;
676
- --basecolors-text-accent: #e5e5e9;
677
- --basecolors-text-disabled: #b6b8ba;
678
- --basecolors-text-disabledalt: #b6b8ba;
679
- --basecolors-text-highlight: #ff9494;
680
- --basecolors-text-light: #e5e5e9;
681
- --basecolors-text-subdued: #b3b4bd;
682
- --basecolors-text-subduedalt: #b3b4bd;
474
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
475
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
683
476
  }
684
-
685
- .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
686
- background: var(--basecolors-frame-default);
687
- width: -moz-fit-content;
688
- width: fit-content;
689
- height: -moz-fit-content;
690
- height: fit-content;
691
- padding: 0.15rem;
692
- margin: -0.15rem;
477
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
478
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
693
479
  }
694
- *[data-color-mode=dark] .eds-contrast .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
695
- background-color: var(--basecolors-frame-contrast);
480
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
481
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
696
482
  }
697
- .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
698
- min-height: 7.75rem;
699
- resize: vertical;
700
- line-height: 1.5rem;
483
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
484
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
701
485
  }
702
- .eds-textarea__wrapper .eds-form-control-wrapper {
703
- padding-right: 0;
704
- cursor: text;
486
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
487
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
488
+ }
489
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
490
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
491
+ }
492
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
493
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
494
+ }
495
+ .eds-feedback-text__icon--warning {
496
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
497
+ }
498
+ .eds-feedback-text__icon--warning .svg-exclamation {
499
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
500
+ }
501
+ .eds-contrast .eds-feedback-text__icon--warning {
502
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
503
+ }
504
+ .eds-contrast .eds-feedback-text__icon--warning circle {
505
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
705
506
  }
706
507
  /* DO NOT CHANGE!*/
707
508
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
708
- .eds-input-panel[focus-within] .eds-input-panel__container {
709
- outline: 2px solid #181c56;
710
- outline-color: var(--basecolors-stroke-focus-standard);
711
- outline-offset: 0.125rem;
712
- }
713
509
  .eds-input-panel:focus-within .eds-input-panel__container {
714
510
  outline: 2px solid #181c56;
715
511
  outline-color: var(--basecolors-stroke-focus-standard);
716
512
  outline-offset: 0.125rem;
717
513
  }
718
- .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
719
- outline-color: var(--basecolors-stroke-focus-contrast);
720
- }
721
514
  .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
722
515
  outline-color: var(--basecolors-stroke-focus-contrast);
723
516
  }
@@ -861,204 +654,355 @@ input:disabled + .eds-input-panel__container {
861
654
  }
862
655
  /* DO NOT CHANGE!*/
863
656
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
864
- .eds-form-component--radio__container {
657
+ .eds-form-control__field-and-feedback-text {
658
+ display: flex;
659
+ flex-direction: column;
660
+ height: -moz-fit-content;
661
+ height: fit-content;
662
+ width: 100%;
663
+ }
664
+ .eds-form-control__field-and-feedback-text--has-tooltip {
665
+ padding-right: 2rem;
666
+ }
667
+ .eds-form-control-wrapper {
865
668
  display: flex;
866
- justify-content: center;
867
669
  align-items: center;
868
670
  position: relative;
869
- cursor: pointer;
870
- height: 2rem;
871
- width: -moz-fit-content;
872
- width: fit-content;
873
- -webkit-user-select: none;
874
- -moz-user-select: none;
875
- user-select: none;
671
+ flex: 1;
672
+ min-height: 3rem;
673
+ padding-left: 1rem;
674
+ padding-right: 1rem;
675
+ background-color: var(--components-form-baseform-standard-fill-default);
676
+ border-radius: 0.25rem;
677
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
678
+ box-shadow: 0 0 0 transparent;
679
+ color: var(--components-form-baseform-standard-text-content);
680
+ transition: border-color 0.1s ease-in-out;
876
681
  }
877
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
878
- background-color: var(--components-form-radio-standard-fill-hover);
682
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
683
+ border-color: var(--components-form-baseform-standard-border-interactive);
879
684
  }
880
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
881
- background-color: var(--components-form-radio-contrast-fill-hover);
685
+ .eds-contrast .eds-form-control-wrapper:hover {
686
+ border-color: var(--components-form-baseform-contrast-border-interactive);
882
687
  }
883
- .eds-form-component--radio__container input {
884
- position: absolute;
885
- opacity: 0;
886
- cursor: pointer;
887
- height: 0;
888
- width: 0;
688
+ .eds-form-control-wrapper:focus-within {
689
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
889
690
  }
890
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
891
- height: 0.625rem;
892
- width: 0.625rem;
691
+ .eds-contrast .eds-form-control-wrapper:focus-within {
692
+ outline: var(--components-form-baseform-contrast-border-interactive);
893
693
  }
894
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
895
- outline: 2px solid #181c56;
896
- outline-color: var(--basecolors-stroke-focus-standard);
897
- outline-offset: 0.125rem;
694
+ .eds-form-control-wrapper ::-moz-placeholder {
695
+ color: var(--components-form-baseform-standard-text-label);
898
696
  }
899
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
900
- outline-color: var(--basecolors-stroke-focus-contrast);
697
+ .eds-form-control-wrapper ::placeholder {
698
+ color: var(--components-form-baseform-standard-text-label);
901
699
  }
902
- .eds-form-component--radio__container .eds-form-component--radio__radio {
903
- position: relative;
904
- height: 1.25rem;
905
- width: 1.25rem;
906
- margin-right: 1rem;
907
- background-color: var(--components-form-radio-standard-fill-default);
908
- border: 0.125rem solid var(--components-form-radio-standard-border);
909
- border-radius: 50%;
910
- display: flex;
911
- align-items: center;
912
- justify-content: center;
700
+ .eds-form-control-wrapper--disabled {
701
+ border-color: transparent;
702
+ background-color: var(--components-form-baseform-standard-fill-disabled);
703
+ pointer-events: none;
704
+ color: var(--components-form-baseform-standard-text-disabled);
913
705
  }
914
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
915
- background-color: var(--components-form-radio-contrast-fill-default);
916
- border-color: var(--components-form-radio-contrast-border);
706
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
707
+ color: var(--components-form-baseform-standard-text-disabled);
917
708
  }
918
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
919
- background: var(--components-form-baseform-contrast-fill-disabled);
920
- border-color: var(--components-form-baseform-contrast-text-disabled);
921
- cursor: not-allowed;
709
+ .eds-contrast .eds-form-control-wrapper--disabled {
710
+ border-color: transparent;
711
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
712
+ color: var(--components-form-baseform-contrast-text-disabled);
922
713
  }
923
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
924
- border-color: var(--components-form-baseform-contrast-text-disabled);
714
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
715
+ color: var(--components-form-baseform-contrast-text-disabled);
925
716
  }
926
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
927
- background: var(--components-form-baseform-contrast-fill-disabled);
928
- border-color: var(--components-form-baseform-contrast-text-disabled);
717
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
718
+ display: none;
929
719
  }
930
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
931
- color: var(--components-form-baseform-contrast-text-disabled);
720
+ .eds-form-control-wrapper--readonly {
721
+ border-color: transparent;
722
+ pointer-events: none;
723
+ cursor: default;
724
+ background: var(--components-form-baseform-standard-fill-readonly);
725
+ border: var(--components-form-baseform-standard-fill-readonly);
932
726
  }
933
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
934
- display: block;
935
- width: 0;
936
- height: 0;
937
- border-radius: 50%;
938
- background-color: var(--components-form-radio-standard-fill-selected);
939
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
727
+ .eds-contrast .eds-form-control-wrapper--readonly {
728
+ background: var(--components-form-baseform-contrast-fill-readonly);
729
+ color: var(--components-form-baseform-contrast-text-description);
730
+ border: var(--components-form-baseform-contrast-fill-readonly);
940
731
  }
941
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
942
- background-color: var(--components-form-radio-contrast-icon);
732
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
733
+ color: var(--components-form-baseform-contrast-text-description);
943
734
  }
944
- /* DO NOT CHANGE!*/
945
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
946
- .eds-switch {
947
- cursor: pointer;
948
- -webkit-user-select: none;
949
- -moz-user-select: none;
950
- user-select: none;
951
- padding: 0.5rem 0;
952
- width: -moz-fit-content;
953
- width: fit-content;
735
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
736
+ display: none;
954
737
  }
955
- .eds-switch input {
956
- opacity: 0;
957
- pointer-events: none;
958
- position: absolute;
738
+ .eds-form-control-wrapper--size-medium .eds-form-control,
739
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
740
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
741
+ font-size: 1rem;
742
+ line-height: 1rem;
959
743
  }
960
- .eds-switch--right {
961
- display: flex;
962
- flex-direction: row;
963
- align-items: center;
744
+ .eds-form-control-wrapper--size-large {
745
+ min-height: 4rem;
964
746
  }
965
- .eds-switch--bottom {
966
- display: flex;
967
- flex-direction: column;
968
- align-items: center;
747
+ .eds-form-control-wrapper--size-large .eds-form-control,
748
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
749
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
750
+ font-size: 1.5rem;
969
751
  }
970
- .eds-switch__circle {
971
- border-radius: 50%;
972
- height: 1.25rem;
973
- width: 1.25rem;
974
- content: "";
975
- display: flex;
976
- align-items: center;
977
- justify-content: center;
978
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
979
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
980
- background-color: var(--components-form-switch-standard-switch);
981
- top: 0.125rem;
982
- left: 0.125rem;
983
- position: relative;
752
+ .eds-form-control-wrapper--success {
753
+ border-color: var(--components-form-baseform-standard-border-success);
984
754
  }
985
- .eds-switch__switch--large .eds-switch__circle {
986
- height: 1.75rem;
987
- width: 1.75rem;
755
+ .eds-form-control-wrapper--success:focus-within {
756
+ border-color: var(--components-form-baseform-standard-border-success);
988
757
  }
989
- .eds-contrast .eds-switch__circle {
990
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
758
+ .eds-contrast .eds-form-control-wrapper--success {
759
+ border-color: var(--components-form-baseform-standard-border-success);
991
760
  }
992
- .eds-switch__switch {
993
- position: relative;
994
- background-color: var(--components-form-switch-standard-fill-false);
995
- content: "";
996
- display: block;
997
- transition: background-color 0.1s ease-in-out;
998
- height: 1.5rem;
999
- width: 3rem;
1000
- border-radius: 1.5rem;
1001
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
761
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
762
+ border-color: var(--components-form-baseform-contrast-border-success);
1002
763
  }
1003
- .eds-contrast .eds-switch__switch {
1004
- background-color: var(--components-form-switch-contrast-fill-false);
764
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
765
+ border-color: var(--components-form-baseform-standard-border-negative);
1005
766
  }
1006
- .eds-switch--right .eds-switch__switch {
1007
- margin-right: 0.75rem;
767
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
768
+ border-color: var(--components-form-baseform-standard-border-negative);
1008
769
  }
1009
- .eds-switch__switch svg g,
1010
- .eds-switch__switch path {
1011
- fill: var(--components-form-switch-standard-icon-false);
1012
- transition: fill ease-in-out 0.1s;
770
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
771
+ border-color: var(--components-form-baseform-contrast-border-negative);
1013
772
  }
1014
- .eds-contrast .eds-switch__switch svg g,
1015
- .eds-contrast .eds-switch__switch path {
1016
- fill: var(--components-form-switch-contrast-icon-false);
773
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
774
+ border-color: var(--components-form-baseform-contrast-border-negative);
1017
775
  }
1018
- :checked + .eds-switch__switch {
1019
- background-color: var(--eds-switch-color);
776
+ .eds-contrast .eds-form-control .eds-tooltip {
777
+ background: var(--components-tooltip-tooltip-standard-fill);
778
+ color: var(--components-tooltip-tooltip-standard-text);
779
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1020
780
  }
1021
- :checked + .eds-switch__switch .eds-switch__circle {
1022
- left: 1.625rem;
781
+ .eds-form-control .eds-tooltip::after {
782
+ background: var(--components-tooltip-tooltip-standard-fill);
1023
783
  }
1024
- :checked + .eds-switch__switch .eds-switch__circle svg g,
1025
- :checked + .eds-switch__switch .eds-switch__circle path {
1026
- fill: var(--eds-switch-color);
784
+
785
+ .eds-form-control {
786
+ display: block;
787
+ -webkit-appearance: none;
788
+ -moz-appearance: none;
789
+ appearance: none;
790
+ width: 100%;
791
+ height: 100%;
792
+ padding: 20px 0rem 0.25rem;
793
+ font-family: inherit;
794
+ font-size: 1rem;
795
+ line-height: 1rem;
796
+ border: 0;
797
+ color: var(--components-form-baseform-standard-text-content);
798
+ background-color: transparent;
1027
799
  }
1028
- .eds-contrast :checked + .eds-switch__switch {
1029
- background-color: var(--eds-switch-contrast-color);
800
+ .eds-form-control::-moz-placeholder {
801
+ opacity: 0;
802
+ -moz-transition: opacity 0.2s ease-in-out;
803
+ transition: opacity 0.2s ease-in-out;
1030
804
  }
1031
- :focus + .eds-switch__switch {
1032
- outline: 2px solid #181c56;
1033
- outline-color: var(--basecolors-stroke-focus-standard);
1034
- outline-offset: 0.125rem;
805
+ .eds-form-control::placeholder {
806
+ opacity: 0;
807
+ transition: opacity 0.2s ease-in-out;
1035
808
  }
1036
- .eds-contrast :focus + .eds-switch__switch {
1037
- outline-color: var(--basecolors-stroke-focus-contrast);
809
+ .eds-form-control:focus {
810
+ outline: none;
1038
811
  }
1039
- .eds-switch__switch--large {
1040
- width: 3.75rem;
1041
- height: 2rem;
1042
- border-radius: 3.75rem;
812
+ .eds-form-control:focus::-moz-placeholder {
813
+ opacity: 1;
1043
814
  }
1044
- :checked + .eds-switch__switch--large .eds-switch__circle {
1045
- left: 1.875rem;
815
+ .eds-form-control:focus::placeholder {
816
+ opacity: 1;
1046
817
  }
1047
- .eds-switch__switch--large svg {
818
+ .eds-form-control__prepend, .eds-form-control__append {
1048
819
  position: relative;
1049
- right: 0.05rem;
820
+ line-height: inherit;
1050
821
  }
1051
- .eds-switch__label--large--right {
1052
- font-size: 1rem;
822
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
823
+ all: unset;
824
+ position: absolute;
825
+ display: flex;
826
+ align-items: center;
827
+ justify-content: center;
828
+ height: 1.5rem;
829
+ width: 1.5rem;
830
+ right: -2rem;
831
+ border-radius: 100%;
832
+ color: var(--primary-text-color);
833
+ cursor: pointer;
1053
834
  }
1054
- .eds-switch__label--large--bottom {
1055
- font-size: 0.875rem;
835
+ .eds-form-control__prepend {
836
+ margin-right: 0.75rem;
837
+ margin-left: 0;
1056
838
  }
1057
- .eds-switch__label--medium--right {
1058
- font-size: 0.875rem;
839
+ .eds-form-control__append {
840
+ margin-right: 0;
841
+ margin-left: 0.75rem;
1059
842
  }
1060
- .eds-switch__label--medium--bottom {
1061
- font-size: 0.75rem;
843
+ /* DO NOT CHANGE!*/
844
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
845
+ /* DO NOT CHANGE!*/
846
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
847
+ /* DO NOT CHANGE!*/
848
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
849
+ /* DO NOT CHANGE!*/
850
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
851
+ /* DO NOT CHANGE!*/
852
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
853
+ [data-color-mode=light],
854
+ :root {
855
+ --basecolors-frame-contrast: #181c56;
856
+ --basecolors-frame-contrastalt: #393d79;
857
+ --basecolors-frame-default: #ffffff;
858
+ --basecolors-frame-elevated: #ffffff;
859
+ --basecolors-frame-elevatedalt: #f6f6f9;
860
+ --basecolors-frame-subdued: #d9dae8;
861
+ --basecolors-frame-tint: #f6f6f9;
862
+ --basecolors-shape-accent: #181c56;
863
+ --basecolors-shape-bicycle-contrast: #00db9b;
864
+ --basecolors-shape-bicycle-default: #388f76;
865
+ --basecolors-shape-bus-contrast: #ff6392;
866
+ --basecolors-shape-bus-default: #c5044e;
867
+ --basecolors-shape-cableway-contrast: #b482fb;
868
+ --basecolors-shape-cableway-default: #78469a;
869
+ --basecolors-shape-disabled: #6e6f73;
870
+ --basecolors-shape-disabledalt: #b6b8ba;
871
+ --basecolors-shape-ferry-contrast: #6fdfff;
872
+ --basecolors-shape-ferry-default: #0c6693;
873
+ --basecolors-shape-funicular-contrast: #b482fb;
874
+ --basecolors-shape-funicular-default: #78469a;
875
+ --basecolors-shape-helicopter-contrast: #fbafea;
876
+ --basecolors-shape-helicopter-default: #800664;
877
+ --basecolors-shape-highlight: #ff5959;
878
+ --basecolors-shape-light: #ffffff;
879
+ --basecolors-shape-mask: #ffffff;
880
+ --basecolors-shape-maskalt: #ffffff;
881
+ --basecolors-shape-metro-contrast: #f08901;
882
+ --basecolors-shape-metro-default: #bf5826;
883
+ --basecolors-shape-mobility-contrast: #00db9b;
884
+ --basecolors-shape-mobility-default: #388f76;
885
+ --basecolors-shape-plane-contrast: #fbafea;
886
+ --basecolors-shape-plane-default: #800664;
887
+ --basecolors-shape-subdued: #626493;
888
+ --basecolors-shape-subduedalt: #d9dae8;
889
+ --basecolors-shape-taxi-contrast: #ffe082;
890
+ --basecolors-shape-taxi-default: #3d3e40;
891
+ --basecolors-shape-train-contrast: #42a5f5;
892
+ --basecolors-shape-train-default: #00367f;
893
+ --basecolors-shape-tram-contrast: #b482fb;
894
+ --basecolors-shape-tram-default: #78469a;
895
+ --basecolors-shape-walk-contrast: #8284ab;
896
+ --basecolors-shape-walk-default: #8d8e9c;
897
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
898
+ --basecolors-shape-airportlinkbus-default: #800664;
899
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
900
+ --basecolors-shape-airportlinkrail-default: #800664;
901
+ --basecolors-stroke-contrast: #aeb7e2;
902
+ --basecolors-stroke-default: #181c56;
903
+ --basecolors-stroke-disabled: #949699;
904
+ --basecolors-stroke-focus-contrast: #aeb7e2;
905
+ --basecolors-stroke-focus-standard: #181c56;
906
+ --basecolors-stroke-highlight: #ff5959;
907
+ --basecolors-stroke-light: #ffffff;
908
+ --basecolors-stroke-subdued: #8284ab;
909
+ --basecolors-stroke-subduedalt: #e3e6e8;
910
+ --basecolors-text-accent: #181c56;
911
+ --basecolors-text-disabled: #6e6f73;
912
+ --basecolors-text-disabledalt: #b6b8ba;
913
+ --basecolors-text-highlight: #ff5959;
914
+ --basecolors-text-light: #ffffff;
915
+ --basecolors-text-subdued: #626493;
916
+ --basecolors-text-subduedalt: #d9dae8;
917
+ }
918
+
919
+ [data-color-mode=dark] {
920
+ --basecolors-frame-contrast: #212233;
921
+ --basecolors-frame-contrastalt: #141527;
922
+ --basecolors-frame-default: #08091c;
923
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
924
+ --basecolors-frame-elevatedalt: #464755;
925
+ --basecolors-frame-subdued: #2d2e3e;
926
+ --basecolors-frame-tint: #141527;
927
+ --basecolors-shape-accent: #e5e5e9;
928
+ --basecolors-shape-bicycle-contrast: #4db295;
929
+ --basecolors-shape-bicycle-default: #4db295;
930
+ --basecolors-shape-bus-contrast: #ef7398;
931
+ --basecolors-shape-bus-default: #ef7398;
932
+ --basecolors-shape-cableway-contrast: #b898e5;
933
+ --basecolors-shape-cableway-default: #b898e5;
934
+ --basecolors-shape-disabled: #b6b8ba;
935
+ --basecolors-shape-disabledalt: #b3b4bd;
936
+ --basecolors-shape-ferry-contrast: #8ccfe2;
937
+ --basecolors-shape-ferry-default: #8ccfe2;
938
+ --basecolors-shape-funicular-contrast: #b898e5;
939
+ --basecolors-shape-funicular-default: #b898e5;
940
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
941
+ --basecolors-shape-helicopter-default: #f2b8e5;
942
+ --basecolors-shape-highlight: #ff9494;
943
+ --basecolors-shape-light: #e5e5e9;
944
+ --basecolors-shape-mask: #2d2e3e;
945
+ --basecolors-shape-maskalt: #393a49;
946
+ --basecolors-shape-metro-contrast: #dd973c;
947
+ --basecolors-shape-metro-default: #dd973c;
948
+ --basecolors-shape-mobility-contrast: #4db295;
949
+ --basecolors-shape-mobility-default: #4db295;
950
+ --basecolors-shape-plane-contrast: #f2b8e5;
951
+ --basecolors-shape-plane-default: #f2b8e5;
952
+ --basecolors-shape-subdued: #b3b4bd;
953
+ --basecolors-shape-subduedalt: #b3b4bd;
954
+ --basecolors-shape-taxi-contrast: #ffe082;
955
+ --basecolors-shape-taxi-default: #ffe082;
956
+ --basecolors-shape-train-contrast: #60a2d7;
957
+ --basecolors-shape-train-default: #60a2d7;
958
+ --basecolors-shape-tram-contrast: #b898e5;
959
+ --basecolors-shape-tram-default: #b898e5;
960
+ --basecolors-shape-walk-contrast: #8d8e9c;
961
+ --basecolors-shape-walk-default: #8d8e9c;
962
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
963
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
964
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
965
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
966
+ --basecolors-stroke-contrast: #aeb7e2;
967
+ --basecolors-stroke-default: #b3b4bd;
968
+ --basecolors-stroke-disabled: #e3e6e8;
969
+ --basecolors-stroke-focus-contrast: #aeb7e2;
970
+ --basecolors-stroke-focus-standard: #aeb7e2;
971
+ --basecolors-stroke-highlight: #ff9494;
972
+ --basecolors-stroke-light: #b3b4bd;
973
+ --basecolors-stroke-subdued: #81828f;
974
+ --basecolors-stroke-subduedalt: #949699;
975
+ --basecolors-text-accent: #e5e5e9;
976
+ --basecolors-text-disabled: #b6b8ba;
977
+ --basecolors-text-disabledalt: #b6b8ba;
978
+ --basecolors-text-highlight: #ff9494;
979
+ --basecolors-text-light: #e5e5e9;
980
+ --basecolors-text-subdued: #b3b4bd;
981
+ --basecolors-text-subduedalt: #b3b4bd;
982
+ }
983
+
984
+ .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
985
+ background: #ffffff;
986
+ background: var(--basecolors-frame-default);
987
+ width: -moz-fit-content;
988
+ width: fit-content;
989
+ height: -moz-fit-content;
990
+ height: fit-content;
991
+ padding: 0.15rem;
992
+ margin: -0.15rem;
993
+ }
994
+ *[data-color-mode=dark] .eds-contrast .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
995
+ background-color: #181c56;
996
+ background-color: var(--basecolors-frame-contrast);
997
+ }
998
+ .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
999
+ min-height: 7.75rem;
1000
+ resize: vertical;
1001
+ line-height: 1.5rem;
1002
+ }
1003
+ .eds-textarea__wrapper .eds-form-control-wrapper {
1004
+ padding-right: 0;
1005
+ cursor: text;
1062
1006
  }
1063
1007
  /* DO NOT CHANGE!*/
1064
1008
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */