@entur/form 8.3.2-beta.8 → 8.3.2-beta.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 +585 -585
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,5 +1,303 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ .eds-form-control__field-and-feedback-text {
4
+ display: flex;
5
+ flex-direction: column;
6
+ height: -moz-fit-content;
7
+ height: fit-content;
8
+ width: 100%;
9
+ }
10
+ .eds-form-control__field-and-feedback-text--has-tooltip {
11
+ padding-right: 2rem;
12
+ }
13
+ .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
14
+ cursor: not-allowed;
15
+ }
16
+ .eds-form-control-wrapper {
17
+ display: flex;
18
+ align-items: center;
19
+ position: relative;
20
+ flex: 1;
21
+ min-height: 3rem;
22
+ padding-left: 1rem;
23
+ padding-right: 1rem;
24
+ background-color: var(--components-form-baseform-standard-fill-default);
25
+ border-radius: 0.25rem;
26
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
27
+ box-shadow: 0 0 0 transparent;
28
+ color: var(--components-form-baseform-standard-text-content);
29
+ transition: border-color 0.1s ease-in-out;
30
+ }
31
+ .eds-form-control-wrapper:hover {
32
+ border-color: var(--components-form-baseform-standard-border-interactive);
33
+ }
34
+ .eds-contrast .eds-form-control-wrapper:hover {
35
+ border-color: var(--components-form-baseform-contrast-border-interactive);
36
+ }
37
+ .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
38
+ border-color: var(--components-form-baseform-standard-border-interactive);
39
+ outline: 2px solid var(--components-form-baseform-standard-border-interactive);
40
+ }
41
+ .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
42
+ border-color: var(--components-form-baseform-contrast-border-interactive);
43
+ outline-color: var(--components-form-baseform-contrast-border-interactive);
44
+ }
45
+ .eds-form-control-wrapper ::-moz-placeholder {
46
+ color: var(--components-form-baseform-standard-text-label);
47
+ }
48
+ .eds-form-control-wrapper ::placeholder {
49
+ color: var(--components-form-baseform-standard-text-label);
50
+ }
51
+ .eds-form-control-wrapper--disabled {
52
+ border-color: transparent;
53
+ background-color: var(--components-form-baseform-standard-fill-disabled);
54
+ pointer-events: none;
55
+ color: var(--components-form-baseform-standard-text-disabled);
56
+ }
57
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
58
+ color: var(--components-form-baseform-standard-text-disabled);
59
+ }
60
+ .eds-contrast .eds-form-control-wrapper--disabled {
61
+ border-color: transparent;
62
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
63
+ color: var(--components-form-baseform-contrast-text-disabled);
64
+ }
65
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
66
+ color: var(--components-form-baseform-contrast-text-disabled);
67
+ }
68
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
69
+ display: none;
70
+ }
71
+ .eds-form-control-wrapper--disabled:focus-within {
72
+ border-color: transparent;
73
+ outline: none;
74
+ }
75
+ .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
76
+ border-color: transparent;
77
+ outline: none;
78
+ }
79
+ .eds-form-control-wrapper--readonly {
80
+ border-color: transparent;
81
+ cursor: default;
82
+ background: var(--components-form-baseform-standard-fill-readonly);
83
+ border: var(--components-form-baseform-standard-fill-readonly);
84
+ }
85
+ .eds-form-control-wrapper--readonly:focus-visible {
86
+ outline: none;
87
+ }
88
+ .eds-contrast .eds-form-control-wrapper--readonly {
89
+ background: var(--components-form-baseform-contrast-fill-readonly);
90
+ border: var(--components-form-baseform-contrast-fill-readonly);
91
+ color: var(--components-form-baseform-contrast-text-description);
92
+ }
93
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
94
+ color: var(--components-form-baseform-contrast-text-description);
95
+ }
96
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
97
+ color: var(--components-form-baseform-contrast-text-description);
98
+ }
99
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
100
+ display: none;
101
+ }
102
+ .eds-form-control-wrapper--size-medium .eds-form-control,
103
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
104
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
105
+ font-size: 1rem;
106
+ line-height: 1rem;
107
+ }
108
+ .eds-form-control-wrapper--size-large {
109
+ min-height: 4rem;
110
+ }
111
+ .eds-form-control-wrapper--size-large .eds-form-control,
112
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
113
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
114
+ font-size: 1.5rem;
115
+ }
116
+ .eds-form-control-wrapper--success {
117
+ border-color: var(--components-form-baseform-standard-border-success);
118
+ }
119
+ .eds-form-control-wrapper--success:focus-within {
120
+ border-color: var(--components-form-baseform-standard-border-success);
121
+ outline-color: var(--components-form-baseform-standard-border-success);
122
+ }
123
+ .eds-contrast .eds-form-control-wrapper--success {
124
+ border-color: var(--components-form-baseform-standard-border-success);
125
+ }
126
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
127
+ border-color: var(--components-form-baseform-contrast-border-success);
128
+ outline-color: var(--components-form-baseform-contrast-border-success);
129
+ }
130
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
131
+ border-color: var(--components-form-baseform-standard-border-negative);
132
+ }
133
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
134
+ border-color: var(--components-form-baseform-standard-border-negative);
135
+ outline-color: var(--components-form-baseform-standard-border-negative);
136
+ }
137
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
138
+ border-color: var(--components-form-baseform-contrast-border-negative);
139
+ }
140
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
141
+ border-color: var(--components-form-baseform-contrast-border-negative);
142
+ outline-color: var(--components-form-baseform-contrast-border-negative);
143
+ }
144
+ .eds-contrast .eds-form-control .eds-tooltip {
145
+ background: var(--components-tooltip-tooltip-standard-fill);
146
+ color: var(--components-tooltip-tooltip-standard-text);
147
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
148
+ }
149
+ .eds-form-control .eds-tooltip::after {
150
+ background: var(--components-tooltip-tooltip-standard-fill);
151
+ }
152
+
153
+ .eds-form-control {
154
+ display: block;
155
+ -webkit-appearance: none;
156
+ -moz-appearance: none;
157
+ appearance: none;
158
+ width: 100%;
159
+ height: 100%;
160
+ padding: 20px 0rem 0.25rem;
161
+ font-family: inherit;
162
+ font-size: 1rem;
163
+ line-height: 1rem;
164
+ border: 0;
165
+ color: var(--components-form-baseform-standard-text-content);
166
+ background-color: transparent;
167
+ }
168
+ .eds-form-control::-moz-placeholder {
169
+ opacity: 0;
170
+ -moz-transition: opacity 0.2s ease-in-out;
171
+ transition: opacity 0.2s ease-in-out;
172
+ }
173
+ .eds-form-control::placeholder {
174
+ opacity: 0;
175
+ transition: opacity 0.2s ease-in-out;
176
+ }
177
+ .eds-form-control:focus {
178
+ outline: none;
179
+ }
180
+ .eds-form-control:focus::-moz-placeholder {
181
+ opacity: 1;
182
+ }
183
+ .eds-form-control:focus::placeholder {
184
+ opacity: 1;
185
+ }
186
+ .eds-form-control__prepend, .eds-form-control__append {
187
+ position: relative;
188
+ line-height: inherit;
189
+ }
190
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
191
+ all: unset;
192
+ position: absolute;
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ height: 1.5rem;
197
+ width: 1.5rem;
198
+ right: -2rem;
199
+ border-radius: 100%;
200
+ color: var(--primary-text-color);
201
+ cursor: pointer;
202
+ }
203
+ .eds-form-control__prepend {
204
+ margin-right: 0.75rem;
205
+ margin-left: 0;
206
+ }
207
+ .eds-form-control__append {
208
+ margin-right: 0;
209
+ margin-left: 0.75rem;
210
+ }
211
+ /* DO NOT CHANGE!*/
212
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
213
+ .eds-input-group {
214
+ color: inherit;
215
+ display: block;
216
+ position: relative;
217
+ }
218
+ .eds-input-group__label {
219
+ color: var(--components-form-baseform-standard-text-label);
220
+ display: flex;
221
+ font-size: 1rem;
222
+ position: absolute;
223
+ line-height: 1rem;
224
+ height: 3rem;
225
+ padding-left: 0;
226
+ top: 1rem;
227
+ 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;
228
+ -webkit-user-select: none;
229
+ -moz-user-select: none;
230
+ user-select: none;
231
+ pointer-events: none;
232
+ }
233
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
234
+ top: 0.375rem;
235
+ font-size: 0.75rem;
236
+ line-height: 0.75rem;
237
+ height: 10px;
238
+ padding: 0;
239
+ }
240
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
241
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
242
+ background: var(--textarea-label-background);
243
+ width: calc(100% - 1rem - 1rem - 4px);
244
+ }
245
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
246
+ top: 0.5rem;
247
+ font-size: 0.875rem;
248
+ line-height: 1rem;
249
+ padding: 0;
250
+ }
251
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
252
+ top: 0.75rem;
253
+ font-size: 1.5rem;
254
+ line-height: 2.25rem;
255
+ }
256
+ .eds-input-group__label--filled {
257
+ top: 0.375rem;
258
+ font-size: 0.75rem;
259
+ line-height: 0.75rem;
260
+ height: 10px;
261
+ padding: 0;
262
+ }
263
+ .eds-textarea__label .eds-input-group__label--filled {
264
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
265
+ background: var(--textarea-label-background);
266
+ width: calc(100% - 1rem - 1rem - 4px);
267
+ }
268
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
269
+ top: 0.5rem;
270
+ font-size: 0.875rem;
271
+ line-height: 1rem;
272
+ padding: 0;
273
+ }
274
+
275
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
276
+ top: 0.375rem;
277
+ font-size: 0.75rem;
278
+ line-height: 0.75rem;
279
+ height: 10px;
280
+ padding: 0;
281
+ }
282
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
283
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
284
+ background: var(--textarea-label-background);
285
+ width: calc(100% - 1rem - 1rem - 4px);
286
+ }
287
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
288
+ top: 0.5rem;
289
+ font-size: 0.875rem;
290
+ line-height: 1rem;
291
+ padding: 0;
292
+ }
293
+ .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
294
+ top: 1rem;
295
+ font-size: 1rem;
296
+ height: 3rem;
297
+ line-height: 1rem;
298
+ }
299
+ /* DO NOT CHANGE!*/
300
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
301
  .eds-feedback-text {
4
302
  display: flex;
5
303
  align-items: center;
@@ -59,22 +357,134 @@
59
357
  .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
60
358
  fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
61
359
  }
62
- .eds-feedback-text__icon--warning {
63
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
360
+ .eds-feedback-text__icon--warning {
361
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
362
+ }
363
+ .eds-feedback-text__icon--warning .svg-exclamation {
364
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
365
+ }
366
+ .eds-contrast .eds-feedback-text__icon--warning {
367
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
368
+ }
369
+ .eds-contrast .eds-feedback-text__icon--warning circle {
370
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
371
+ }
372
+ .eds-fieldset {
373
+ margin: 0;
374
+ padding: 0;
375
+ border: 0;
376
+ }
377
+ /* DO NOT CHANGE!*/
378
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
379
+ .eds-form-component--radio__container {
380
+ display: flex;
381
+ justify-content: center;
382
+ align-items: center;
383
+ position: relative;
384
+ cursor: pointer;
385
+ height: 2rem;
386
+ width: -moz-fit-content;
387
+ width: fit-content;
388
+ -webkit-user-select: none;
389
+ -moz-user-select: none;
390
+ user-select: none;
391
+ }
392
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
393
+ background-color: var(--components-form-radio-standard-fill-hover);
394
+ }
395
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
396
+ background-color: var(--components-form-radio-contrast-fill-hover);
397
+ }
398
+ .eds-form-component--radio__container input {
399
+ position: absolute;
400
+ opacity: 0;
401
+ cursor: pointer;
402
+ height: 0;
403
+ width: 0;
404
+ }
405
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
406
+ height: 0.625rem;
407
+ width: 0.625rem;
408
+ }
409
+ .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
410
+ outline: 2px solid #181c56;
411
+ outline-color: var(--basecolors-stroke-focus-standard);
412
+ outline-offset: 0.125rem;
413
+ }
414
+ .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
415
+ outline-color: var(--basecolors-stroke-focus-contrast);
416
+ }
417
+ .eds-form-component--radio__container:has(input:disabled) {
418
+ cursor: not-allowed;
419
+ }
420
+ .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
421
+ cursor: default;
422
+ -webkit-user-select: text;
423
+ -moz-user-select: text;
424
+ user-select: text;
425
+ }
426
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
427
+ position: relative;
428
+ height: 1.25rem;
429
+ width: 1.25rem;
430
+ margin-right: 1rem;
431
+ background-color: var(--components-form-radio-standard-fill-default);
432
+ border: 0.125rem solid var(--components-form-radio-standard-border);
433
+ border-radius: 50%;
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ }
438
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
439
+ background-color: var(--components-form-radio-contrast-fill-default);
440
+ border-color: var(--components-form-radio-contrast-border);
441
+ }
442
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
443
+ background: var(--components-form-radio-contrast-fill-disabled);
444
+ border-color: var(--components-form-radio-contrast-text-disabled);
445
+ }
446
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
447
+ border-color: var(--components-form-radio-contrast-text-disabled);
448
+ }
449
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
450
+ background: var(--components-form-radio-contrast-fill-disabled);
451
+ border-color: var(--components-form-radio-contrast-text-disabled);
452
+ }
453
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
454
+ color: var(--components-form-radio-contrast-text-disabled);
455
+ }
456
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
457
+ background-color: var(--components-form-radio-standard-icon-disabled);
458
+ border-color: var(--components-form-radio-contrast-text-disabled);
459
+ }
460
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
461
+ background-color: var(--components-form-radio-standard-icon-disabled);
462
+ }
463
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
464
+ background-color: var(--components-form-radio-contrast-icon-disabled);
465
+ }
466
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
467
+ background: var(--components-form-radio-standard-fill-disabled);
468
+ border-color: var(--components-form-radio-standard-border-readonly);
64
469
  }
65
- .eds-feedback-text__icon--warning .svg-exclamation {
66
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
470
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
471
+ background: var(--components-form-radio-contrast-fill-disabled);
472
+ border-color: var(--components-form-radio-contrast-border-readonly);
67
473
  }
68
- .eds-contrast .eds-feedback-text__icon--warning {
69
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
474
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
475
+ background-color: var(--components-form-radio-standard-icon);
476
+ border-color: var(--components-form-radio-standard-border-readonly);
70
477
  }
71
- .eds-contrast .eds-feedback-text__icon--warning circle {
72
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
478
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
479
+ display: block;
480
+ width: 0;
481
+ height: 0;
482
+ border-radius: 50%;
483
+ background-color: var(--components-form-radio-standard-fill-selected);
484
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
73
485
  }
74
- .eds-fieldset {
75
- margin: 0;
76
- padding: 0;
77
- border: 0;
486
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
487
+ background-color: var(--components-form-radio-contrast-icon);
78
488
  }
79
489
  /* DO NOT CHANGE!*/
80
490
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -245,238 +655,28 @@
245
655
  .eds-checkbox__icon .eds-checkbox-icon {
246
656
  height: 1rem;
247
657
  width: 1rem;
248
- visibility: hidden;
249
- }
250
- .eds-checkbox__icon .eds-checkbox-icon path {
251
- transform-origin: 50% 50%;
252
- stroke-dasharray: 48;
253
- stroke-dashoffset: 48;
254
- stroke-width: 0.375rem;
255
- }
256
- .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
257
- animation: none !important;
258
- transition: none !important;
259
- stroke-dasharray: 48;
260
- stroke-dashoffset: 0;
261
- }
262
- .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
263
- transition: none !important;
264
- }
265
-
266
- @keyframes stroke {
267
- 100% {
268
- stroke-dashoffset: 0;
269
- }
270
- }
271
- /* DO NOT CHANGE!*/
272
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
273
- .eds-form-control__field-and-feedback-text {
274
- display: flex;
275
- flex-direction: column;
276
- height: -moz-fit-content;
277
- height: fit-content;
278
- width: 100%;
279
- }
280
- .eds-form-control__field-and-feedback-text--has-tooltip {
281
- padding-right: 2rem;
282
- }
283
- .eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled):not(:has(.eds-form-control-wrapper--readonly)) {
284
- cursor: not-allowed;
285
- }
286
- .eds-form-control-wrapper {
287
- display: flex;
288
- align-items: center;
289
- position: relative;
290
- flex: 1;
291
- min-height: 3rem;
292
- padding-left: 1rem;
293
- padding-right: 1rem;
294
- background-color: var(--components-form-baseform-standard-fill-default);
295
- border-radius: 0.25rem;
296
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
297
- box-shadow: 0 0 0 transparent;
298
- color: var(--components-form-baseform-standard-text-content);
299
- transition: border-color 0.1s ease-in-out;
300
- }
301
- .eds-form-control-wrapper:hover {
302
- border-color: var(--components-form-baseform-standard-border-interactive);
303
- }
304
- .eds-contrast .eds-form-control-wrapper:hover {
305
- border-color: var(--components-form-baseform-contrast-border-interactive);
306
- }
307
- .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
308
- border-color: var(--components-form-baseform-standard-border-interactive);
309
- outline: 2px solid var(--components-form-baseform-standard-border-interactive);
310
- }
311
- .eds-contrast .eds-form-control-wrapper:focus-within:not(.eds-form-control-wrapper--readonly) {
312
- border-color: var(--components-form-baseform-contrast-border-interactive);
313
- outline-color: var(--components-form-baseform-contrast-border-interactive);
314
- }
315
- .eds-form-control-wrapper ::-moz-placeholder {
316
- color: var(--components-form-baseform-standard-text-label);
317
- }
318
- .eds-form-control-wrapper ::placeholder {
319
- color: var(--components-form-baseform-standard-text-label);
320
- }
321
- .eds-form-control-wrapper--disabled {
322
- border-color: transparent;
323
- background-color: var(--components-form-baseform-standard-fill-disabled);
324
- pointer-events: none;
325
- color: var(--components-form-baseform-standard-text-disabled);
326
- }
327
- .eds-form-control-wrapper--disabled .eds-input-group__label {
328
- color: var(--components-form-baseform-standard-text-disabled);
329
- }
330
- .eds-contrast .eds-form-control-wrapper--disabled {
331
- border-color: transparent;
332
- background-color: var(--components-form-baseform-contrast-fill-disabled);
333
- color: var(--components-form-baseform-contrast-text-disabled);
334
- }
335
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
336
- color: var(--components-form-baseform-contrast-text-disabled);
337
- }
338
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
339
- display: none;
340
- }
341
- .eds-form-control-wrapper--disabled:focus-within {
342
- border-color: transparent;
343
- outline: none;
344
- }
345
- .eds-contrast .eds-form-control-wrapper--disabled:focus-within {
346
- border-color: transparent;
347
- outline: none;
348
- }
349
- .eds-form-control-wrapper--readonly {
350
- border-color: transparent;
351
- cursor: default;
352
- background: var(--components-form-baseform-standard-fill-readonly);
353
- border: var(--components-form-baseform-standard-fill-readonly);
354
- }
355
- .eds-form-control-wrapper--readonly:focus-visible {
356
- outline: none;
357
- }
358
- .eds-contrast .eds-form-control-wrapper--readonly {
359
- background: var(--components-form-baseform-contrast-fill-readonly);
360
- border: var(--components-form-baseform-contrast-fill-readonly);
361
- color: var(--components-form-baseform-contrast-text-description);
362
- }
363
- .eds-contrast .eds-form-control-wrapper--readonly .eds-form-control {
364
- color: var(--components-form-baseform-contrast-text-description);
365
- }
366
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
367
- color: var(--components-form-baseform-contrast-text-description);
368
- }
369
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
370
- display: none;
371
- }
372
- .eds-form-control-wrapper--size-medium .eds-form-control,
373
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
374
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
375
- font-size: 1rem;
376
- line-height: 1rem;
377
- }
378
- .eds-form-control-wrapper--size-large {
379
- min-height: 4rem;
380
- }
381
- .eds-form-control-wrapper--size-large .eds-form-control,
382
- .eds-form-control-wrapper--size-large .eds-form-control__append,
383
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
384
- font-size: 1.5rem;
385
- }
386
- .eds-form-control-wrapper--success {
387
- border-color: var(--components-form-baseform-standard-border-success);
388
- }
389
- .eds-form-control-wrapper--success:focus-within {
390
- border-color: var(--components-form-baseform-standard-border-success);
391
- outline-color: var(--components-form-baseform-standard-border-success);
392
- }
393
- .eds-contrast .eds-form-control-wrapper--success {
394
- border-color: var(--components-form-baseform-standard-border-success);
395
- }
396
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
397
- border-color: var(--components-form-baseform-contrast-border-success);
398
- outline-color: var(--components-form-baseform-contrast-border-success);
399
- }
400
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
401
- border-color: var(--components-form-baseform-standard-border-negative);
402
- }
403
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
404
- border-color: var(--components-form-baseform-standard-border-negative);
405
- outline-color: var(--components-form-baseform-standard-border-negative);
406
- }
407
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
408
- border-color: var(--components-form-baseform-contrast-border-negative);
409
- }
410
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
411
- border-color: var(--components-form-baseform-contrast-border-negative);
412
- outline-color: var(--components-form-baseform-contrast-border-negative);
413
- }
414
- .eds-contrast .eds-form-control .eds-tooltip {
415
- background: var(--components-tooltip-tooltip-standard-fill);
416
- color: var(--components-tooltip-tooltip-standard-text);
417
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
418
- }
419
- .eds-form-control .eds-tooltip::after {
420
- background: var(--components-tooltip-tooltip-standard-fill);
421
- }
422
-
423
- .eds-form-control {
424
- display: block;
425
- -webkit-appearance: none;
426
- -moz-appearance: none;
427
- appearance: none;
428
- width: 100%;
429
- height: 100%;
430
- padding: 20px 0rem 0.25rem;
431
- font-family: inherit;
432
- font-size: 1rem;
433
- line-height: 1rem;
434
- border: 0;
435
- color: var(--components-form-baseform-standard-text-content);
436
- background-color: transparent;
437
- }
438
- .eds-form-control::-moz-placeholder {
439
- opacity: 0;
440
- -moz-transition: opacity 0.2s ease-in-out;
441
- transition: opacity 0.2s ease-in-out;
442
- }
443
- .eds-form-control::placeholder {
444
- opacity: 0;
445
- transition: opacity 0.2s ease-in-out;
446
- }
447
- .eds-form-control:focus {
448
- outline: none;
449
- }
450
- .eds-form-control:focus::-moz-placeholder {
451
- opacity: 1;
452
- }
453
- .eds-form-control:focus::placeholder {
454
- opacity: 1;
455
- }
456
- .eds-form-control__prepend, .eds-form-control__append {
457
- position: relative;
458
- line-height: inherit;
459
- }
460
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
461
- all: unset;
462
- position: absolute;
463
- display: flex;
464
- align-items: center;
465
- justify-content: center;
466
- height: 1.5rem;
467
- width: 1.5rem;
468
- right: -2rem;
469
- border-radius: 100%;
470
- color: var(--primary-text-color);
471
- cursor: pointer;
658
+ visibility: hidden;
472
659
  }
473
- .eds-form-control__prepend {
474
- margin-right: 0.75rem;
475
- margin-left: 0;
660
+ .eds-checkbox__icon .eds-checkbox-icon path {
661
+ transform-origin: 50% 50%;
662
+ stroke-dasharray: 48;
663
+ stroke-dashoffset: 48;
664
+ stroke-width: 0.375rem;
476
665
  }
477
- .eds-form-control__append {
478
- margin-right: 0;
479
- margin-left: 0.75rem;
666
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon path {
667
+ animation: none !important;
668
+ transition: none !important;
669
+ stroke-dasharray: 48;
670
+ stroke-dashoffset: 0;
671
+ }
672
+ .eds-checkbox__icon--no-animation .eds-checkbox-icon rect {
673
+ transition: none !important;
674
+ }
675
+
676
+ @keyframes stroke {
677
+ 100% {
678
+ stroke-dashoffset: 0;
679
+ }
480
680
  }
481
681
  /* DO NOT CHANGE!*/
482
682
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -613,355 +813,36 @@
613
813
  --basecolors-stroke-subdued: #81828f;
614
814
  --basecolors-stroke-subduedalt: #949699;
615
815
  --basecolors-text-accent: #e5e5e9;
616
- --basecolors-text-disabled: #b6b8ba;
617
- --basecolors-text-disabledalt: #b6b8ba;
618
- --basecolors-text-highlight: #ff9494;
619
- --basecolors-text-light: #e5e5e9;
620
- --basecolors-text-subdued: #b3b4bd;
621
- --basecolors-text-subduedalt: #b3b4bd;
622
- }
623
-
624
- .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
625
- background: #ffffff;
626
- background: var(--basecolors-frame-default);
627
- width: -moz-fit-content;
628
- width: fit-content;
629
- height: -moz-fit-content;
630
- height: fit-content;
631
- padding: 0.15rem;
632
- margin: -0.15rem;
633
- }
634
- *[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 {
635
- background-color: #181c56;
636
- background-color: var(--basecolors-frame-contrast);
637
- }
638
- .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
639
- min-height: 7.75rem;
640
- resize: vertical;
641
- line-height: 1.5rem;
642
- }
643
- .eds-textarea__wrapper .eds-form-control-wrapper {
644
- padding-right: 0;
645
- cursor: text;
646
- }
647
- /* DO NOT CHANGE!*/
648
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
649
- .eds-input-group {
650
- color: inherit;
651
- display: block;
652
- position: relative;
653
- }
654
- .eds-input-group__label {
655
- color: var(--components-form-baseform-standard-text-label);
656
- display: flex;
657
- font-size: 1rem;
658
- position: absolute;
659
- line-height: 1rem;
660
- height: 3rem;
661
- padding-left: 0;
662
- top: 1rem;
663
- 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;
664
- -webkit-user-select: none;
665
- -moz-user-select: none;
666
- user-select: none;
667
- pointer-events: none;
668
- }
669
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
670
- top: 0.375rem;
671
- font-size: 0.75rem;
672
- line-height: 0.75rem;
673
- height: 10px;
674
- padding: 0;
675
- }
676
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
677
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
678
- background: var(--textarea-label-background);
679
- width: calc(100% - 1rem - 1rem - 4px);
680
- }
681
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
682
- top: 0.5rem;
683
- font-size: 0.875rem;
684
- line-height: 1rem;
685
- padding: 0;
686
- }
687
- .eds-form-control-wrapper--size-large .eds-input-group__label {
688
- top: 0.75rem;
689
- font-size: 1.5rem;
690
- line-height: 2.25rem;
691
- }
692
- .eds-input-group__label--filled {
693
- top: 0.375rem;
694
- font-size: 0.75rem;
695
- line-height: 0.75rem;
696
- height: 10px;
697
- padding: 0;
698
- }
699
- .eds-textarea__label .eds-input-group__label--filled {
700
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
701
- background: var(--textarea-label-background);
702
- width: calc(100% - 1rem - 1rem - 4px);
703
- }
704
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
705
- top: 0.5rem;
706
- font-size: 0.875rem;
707
- line-height: 1rem;
708
- padding: 0;
709
- }
710
-
711
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
712
- top: 0.375rem;
713
- font-size: 0.75rem;
714
- line-height: 0.75rem;
715
- height: 10px;
716
- padding: 0;
717
- }
718
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
719
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
720
- background: var(--textarea-label-background);
721
- width: calc(100% - 1rem - 1rem - 4px);
722
- }
723
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
724
- top: 0.5rem;
725
- font-size: 0.875rem;
726
- line-height: 1rem;
727
- padding: 0;
728
- }
729
- .eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
730
- top: 1rem;
731
- font-size: 1rem;
732
- height: 3rem;
733
- line-height: 1rem;
734
- }
735
- /* DO NOT CHANGE!*/
736
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
737
- .eds-form-component--radio__container {
738
- display: flex;
739
- justify-content: center;
740
- align-items: center;
741
- position: relative;
742
- cursor: pointer;
743
- height: 2rem;
744
- width: -moz-fit-content;
745
- width: fit-content;
746
- -webkit-user-select: none;
747
- -moz-user-select: none;
748
- user-select: none;
749
- }
750
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
751
- background-color: var(--components-form-radio-standard-fill-hover);
752
- }
753
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
754
- background-color: var(--components-form-radio-contrast-fill-hover);
755
- }
756
- .eds-form-component--radio__container input {
757
- position: absolute;
758
- opacity: 0;
759
- cursor: pointer;
760
- height: 0;
761
- width: 0;
762
- }
763
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
764
- height: 0.625rem;
765
- width: 0.625rem;
766
- }
767
- .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
768
- outline: 2px solid #181c56;
769
- outline-color: var(--basecolors-stroke-focus-standard);
770
- outline-offset: 0.125rem;
771
- }
772
- .eds-contrast .eds-form-component--radio__container input:focus-visible ~ .eds-form-component--radio__radio {
773
- outline-color: var(--basecolors-stroke-focus-contrast);
774
- }
775
- .eds-form-component--radio__container:has(input:disabled) {
776
- cursor: not-allowed;
777
- }
778
- .eds-form-component--radio__container:has(.eds-form-component--radio__radio--readonly) {
779
- cursor: default;
780
- -webkit-user-select: text;
781
- -moz-user-select: text;
782
- user-select: text;
783
- }
784
- .eds-form-component--radio__container .eds-form-component--radio__radio {
785
- position: relative;
786
- height: 1.25rem;
787
- width: 1.25rem;
788
- margin-right: 1rem;
789
- background-color: var(--components-form-radio-standard-fill-default);
790
- border: 0.125rem solid var(--components-form-radio-standard-border);
791
- border-radius: 50%;
792
- display: flex;
793
- align-items: center;
794
- justify-content: center;
795
- }
796
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
797
- background-color: var(--components-form-radio-contrast-fill-default);
798
- border-color: var(--components-form-radio-contrast-border);
799
- }
800
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
801
- background: var(--components-form-radio-contrast-fill-disabled);
802
- border-color: var(--components-form-radio-contrast-text-disabled);
803
- }
804
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
805
- border-color: var(--components-form-radio-contrast-text-disabled);
806
- }
807
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
808
- background: var(--components-form-radio-contrast-fill-disabled);
809
- border-color: var(--components-form-radio-contrast-text-disabled);
810
- }
811
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
812
- color: var(--components-form-radio-contrast-text-disabled);
813
- }
814
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
815
- background-color: var(--components-form-radio-standard-icon-disabled);
816
- border-color: var(--components-form-radio-contrast-text-disabled);
817
- }
818
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
819
- background-color: var(--components-form-radio-standard-icon-disabled);
820
- }
821
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled .eds-form-component--radio__circle {
822
- background-color: var(--components-form-radio-contrast-icon-disabled);
823
- }
824
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
825
- background: var(--components-form-radio-standard-fill-disabled);
826
- border-color: var(--components-form-radio-standard-border-readonly);
827
- }
828
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly {
829
- background: var(--components-form-radio-contrast-fill-disabled);
830
- border-color: var(--components-form-radio-contrast-border-readonly);
831
- }
832
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--readonly:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
833
- background-color: var(--components-form-radio-standard-icon);
834
- border-color: var(--components-form-radio-standard-border-readonly);
835
- }
836
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
837
- display: block;
838
- width: 0;
839
- height: 0;
840
- border-radius: 50%;
841
- background-color: var(--components-form-radio-standard-fill-selected);
842
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
843
- }
844
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
845
- background-color: var(--components-form-radio-contrast-icon);
816
+ --basecolors-text-disabled: #b6b8ba;
817
+ --basecolors-text-disabledalt: #b6b8ba;
818
+ --basecolors-text-highlight: #ff9494;
819
+ --basecolors-text-light: #e5e5e9;
820
+ --basecolors-text-subdued: #b3b4bd;
821
+ --basecolors-text-subduedalt: #b3b4bd;
846
822
  }
847
- /* DO NOT CHANGE!*/
848
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
849
- .eds-switch {
850
- cursor: pointer;
851
- -webkit-user-select: none;
852
- -moz-user-select: none;
853
- user-select: none;
854
- padding: 0.5rem 0;
823
+
824
+ .eds-textarea__wrapper :not(.eds-form-control-wrapper--disabled):not(.eds-form-control-wrapper--readonly) .eds-textarea__label .eds-input-group__label {
825
+ background: #ffffff;
826
+ background: var(--basecolors-frame-default);
855
827
  width: -moz-fit-content;
856
828
  width: fit-content;
829
+ height: -moz-fit-content;
830
+ height: fit-content;
831
+ padding: 0.15rem;
832
+ margin: -0.15rem;
857
833
  }
858
- .eds-switch input {
859
- opacity: 0;
860
- pointer-events: none;
861
- position: absolute;
862
- }
863
- .eds-switch--right {
864
- display: flex;
865
- flex-direction: row;
866
- align-items: center;
867
- }
868
- .eds-switch--bottom {
869
- display: flex;
870
- flex-direction: column;
871
- align-items: center;
872
- }
873
- .eds-switch__circle {
874
- border-radius: 50%;
875
- height: 1.25rem;
876
- width: 1.25rem;
877
- content: "";
878
- display: flex;
879
- align-items: center;
880
- justify-content: center;
881
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
882
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
883
- background-color: var(--components-form-switch-standard-switch);
884
- top: 0.125rem;
885
- left: 0.125rem;
886
- position: relative;
887
- }
888
- .eds-switch__switch--large .eds-switch__circle {
889
- height: 1.75rem;
890
- width: 1.75rem;
891
- }
892
- .eds-contrast .eds-switch__circle {
893
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
894
- }
895
- .eds-switch__switch {
896
- position: relative;
897
- background-color: var(--components-form-switch-standard-fill-false);
898
- content: "";
899
- display: block;
900
- transition: background-color 0.1s ease-in-out;
901
- height: 1.5rem;
902
- width: 3rem;
903
- border-radius: 1.5rem;
904
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
905
- }
906
- .eds-contrast .eds-switch__switch {
907
- background-color: var(--components-form-switch-contrast-fill-false);
908
- }
909
- .eds-switch--right .eds-switch__switch {
910
- margin-right: 0.75rem;
911
- }
912
- .eds-switch__switch svg g,
913
- .eds-switch__switch path {
914
- fill: var(--components-form-switch-standard-icon-false);
915
- transition: fill ease-in-out 0.1s;
916
- }
917
- .eds-contrast .eds-switch__switch svg g,
918
- .eds-contrast .eds-switch__switch path {
919
- fill: var(--components-form-switch-contrast-icon-false);
920
- }
921
- :checked + .eds-switch__switch {
922
- background-color: var(--eds-switch-color);
923
- }
924
- :checked + .eds-switch__switch .eds-switch__circle {
925
- left: 1.625rem;
926
- }
927
- :checked + .eds-switch__switch .eds-switch__circle svg g,
928
- :checked + .eds-switch__switch .eds-switch__circle path {
929
- fill: var(--eds-switch-color);
930
- }
931
- .eds-contrast :checked + .eds-switch__switch {
932
- background-color: var(--eds-switch-contrast-color);
933
- }
934
- :focus-visible + .eds-switch__switch {
935
- outline: 2px solid #181c56;
936
- outline-color: var(--basecolors-stroke-focus-standard);
937
- outline-offset: 0.125rem;
938
- }
939
- .eds-contrast :focus-visible + .eds-switch__switch {
940
- outline-color: var(--basecolors-stroke-focus-contrast);
941
- }
942
- .eds-switch__switch--large {
943
- width: 3.75rem;
944
- height: 2rem;
945
- border-radius: 3.75rem;
946
- }
947
- :checked + .eds-switch__switch--large .eds-switch__circle {
948
- left: 1.875rem;
949
- }
950
- .eds-switch__switch--large svg {
951
- position: relative;
952
- right: 0.05rem;
953
- }
954
- .eds-switch__label--large--right {
955
- font-size: 1rem;
956
- }
957
- .eds-switch__label--large--bottom {
958
- font-size: 0.875rem;
834
+ *[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 {
835
+ background-color: #181c56;
836
+ background-color: var(--basecolors-frame-contrast);
959
837
  }
960
- .eds-switch__label--medium--right {
961
- font-size: 0.875rem;
838
+ .eds-textarea__wrapper textarea.eds-form-control.eds-textarea {
839
+ min-height: 7.75rem;
840
+ resize: vertical;
841
+ line-height: 1.5rem;
962
842
  }
963
- .eds-switch__label--medium--bottom {
964
- font-size: 0.75rem;
843
+ .eds-textarea__wrapper .eds-form-control-wrapper {
844
+ padding-right: 0;
845
+ cursor: text;
965
846
  }
966
847
  /* DO NOT CHANGE!*/
967
848
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1113,6 +994,125 @@ input:disabled + .eds-input-panel__container {
1113
994
  }
1114
995
  /* DO NOT CHANGE!*/
1115
996
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
997
+ .eds-switch {
998
+ cursor: pointer;
999
+ -webkit-user-select: none;
1000
+ -moz-user-select: none;
1001
+ user-select: none;
1002
+ padding: 0.5rem 0;
1003
+ width: -moz-fit-content;
1004
+ width: fit-content;
1005
+ }
1006
+ .eds-switch input {
1007
+ opacity: 0;
1008
+ pointer-events: none;
1009
+ position: absolute;
1010
+ }
1011
+ .eds-switch--right {
1012
+ display: flex;
1013
+ flex-direction: row;
1014
+ align-items: center;
1015
+ }
1016
+ .eds-switch--bottom {
1017
+ display: flex;
1018
+ flex-direction: column;
1019
+ align-items: center;
1020
+ }
1021
+ .eds-switch__circle {
1022
+ border-radius: 50%;
1023
+ height: 1.25rem;
1024
+ width: 1.25rem;
1025
+ content: "";
1026
+ display: flex;
1027
+ align-items: center;
1028
+ justify-content: center;
1029
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
1030
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1031
+ background-color: var(--components-form-switch-standard-switch);
1032
+ top: 0.125rem;
1033
+ left: 0.125rem;
1034
+ position: relative;
1035
+ }
1036
+ .eds-switch__switch--large .eds-switch__circle {
1037
+ height: 1.75rem;
1038
+ width: 1.75rem;
1039
+ }
1040
+ .eds-contrast .eds-switch__circle {
1041
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
1042
+ }
1043
+ .eds-switch__switch {
1044
+ position: relative;
1045
+ background-color: var(--components-form-switch-standard-fill-false);
1046
+ content: "";
1047
+ display: block;
1048
+ transition: background-color 0.1s ease-in-out;
1049
+ height: 1.5rem;
1050
+ width: 3rem;
1051
+ border-radius: 1.5rem;
1052
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
1053
+ }
1054
+ .eds-contrast .eds-switch__switch {
1055
+ background-color: var(--components-form-switch-contrast-fill-false);
1056
+ }
1057
+ .eds-switch--right .eds-switch__switch {
1058
+ margin-right: 0.75rem;
1059
+ }
1060
+ .eds-switch__switch svg g,
1061
+ .eds-switch__switch path {
1062
+ fill: var(--components-form-switch-standard-icon-false);
1063
+ transition: fill ease-in-out 0.1s;
1064
+ }
1065
+ .eds-contrast .eds-switch__switch svg g,
1066
+ .eds-contrast .eds-switch__switch path {
1067
+ fill: var(--components-form-switch-contrast-icon-false);
1068
+ }
1069
+ :checked + .eds-switch__switch {
1070
+ background-color: var(--eds-switch-color);
1071
+ }
1072
+ :checked + .eds-switch__switch .eds-switch__circle {
1073
+ left: 1.625rem;
1074
+ }
1075
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
1076
+ :checked + .eds-switch__switch .eds-switch__circle path {
1077
+ fill: var(--eds-switch-color);
1078
+ }
1079
+ .eds-contrast :checked + .eds-switch__switch {
1080
+ background-color: var(--eds-switch-contrast-color);
1081
+ }
1082
+ :focus-visible + .eds-switch__switch {
1083
+ outline: 2px solid #181c56;
1084
+ outline-color: var(--basecolors-stroke-focus-standard);
1085
+ outline-offset: 0.125rem;
1086
+ }
1087
+ .eds-contrast :focus-visible + .eds-switch__switch {
1088
+ outline-color: var(--basecolors-stroke-focus-contrast);
1089
+ }
1090
+ .eds-switch__switch--large {
1091
+ width: 3.75rem;
1092
+ height: 2rem;
1093
+ border-radius: 3.75rem;
1094
+ }
1095
+ :checked + .eds-switch__switch--large .eds-switch__circle {
1096
+ left: 1.875rem;
1097
+ }
1098
+ .eds-switch__switch--large svg {
1099
+ position: relative;
1100
+ right: 0.05rem;
1101
+ }
1102
+ .eds-switch__label--large--right {
1103
+ font-size: 1rem;
1104
+ }
1105
+ .eds-switch__label--large--bottom {
1106
+ font-size: 0.875rem;
1107
+ }
1108
+ .eds-switch__label--medium--right {
1109
+ font-size: 0.875rem;
1110
+ }
1111
+ .eds-switch__label--medium--bottom {
1112
+ font-size: 0.75rem;
1113
+ }
1114
+ /* DO NOT CHANGE!*/
1115
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1116
1116
  .eds-textfield__clear-button {
1117
1117
  background: none;
1118
1118
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.3.2-beta.8",
3
+ "version": "8.3.2-beta.9",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,16 +27,16 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.13-beta.8",
30
+ "@entur/button": "^3.3.13-beta.9",
31
31
  "@entur/icons": "^8.0.0",
32
32
  "@entur/tokens": "^3.19.1",
33
- "@entur/tooltip": "^5.2.13-beta.8",
34
- "@entur/typography": "^1.10.0-beta.8",
33
+ "@entur/tooltip": "^5.2.13-beta.9",
34
+ "@entur/typography": "^1.10.0-beta.9",
35
35
  "@entur/utils": "^0.12.3",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "75f853e86839313d80d1ea5aa89fb133f42102de"
41
+ "gitHead": "6f685d2e4ac13bdaf9c6480f9e7922c9d8f4619c"
42
42
  }