@entur/form 7.1.1 → 7.1.3

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 +288 -288
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -1,187 +1,75 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-form-control-wrapper {
4
- align-items: center;
5
- background-color: var(--components-form-baseform-standard-fill-default);
6
- border-radius: 0.25rem;
7
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
8
- box-shadow: 0 0 0 transparent;
9
- color: var(--components-form-baseform-standard-text-content);
3
+ .eds-feedback-text {
10
4
  display: flex;
11
- position: relative;
12
- width: 100%;
13
- min-height: 3rem;
14
- transition: border-color 0.1s ease-in-out;
15
- }
16
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
17
- border-color: var(--components-form-baseform-standard-border-interactive);
18
- }
19
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
20
- border-color: var(--components-form-baseform-standard-border-interactive);
21
- }
22
- .eds-contrast .eds-form-control-wrapper:hover {
23
- border-color: var(--components-form-baseform-contrast-border-interactive);
24
- }
25
- .eds-form-control-wrapper[focus-within] {
26
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
27
- }
28
- .eds-form-control-wrapper:focus-within {
29
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
30
- }
31
- .eds-contrast .eds-form-control-wrapper[focus-within] {
32
- outline: var(--components-form-baseform-contrast-border-interactive);
33
- }
34
- .eds-contrast .eds-form-control-wrapper:focus-within {
35
- outline: var(--components-form-baseform-contrast-border-interactive);
36
- }
37
- .eds-form-control-wrapper ::-moz-placeholder {
38
- color: var(--components-form-baseform-standard-text-label);
39
- }
40
- .eds-form-control-wrapper ::placeholder {
41
- color: var(--components-form-baseform-standard-text-label);
42
- }
43
- .eds-form-control-wrapper--disabled {
44
- border-color: transparent;
45
- background-color: var(--components-form-baseform-standard-fill-disabled);
46
- pointer-events: none;
47
- color: var(--components-form-baseform-standard-text-disabled);
48
- }
49
- .eds-form-control-wrapper--disabled .eds-input-group__label {
50
- color: var(--components-form-baseform-standard-text-disabled);
51
- }
52
- .eds-contrast .eds-form-control-wrapper--disabled {
53
- border-color: transparent;
54
- background-color: var(--components-form-baseform-contrast-fill-disabled);
55
- color: var(--components-form-baseform-contrast-text-disabled);
56
- }
57
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
58
- color: var(--components-form-baseform-contrast-text-disabled);
59
- }
60
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
61
- display: none;
62
- }
63
- .eds-form-control-wrapper--readonly {
64
- border-color: transparent;
65
- pointer-events: none;
66
- cursor: default;
67
- background: var(--components-form-baseform-standard-fill-readonly);
68
- border: var(--components-form-baseform-standard-fill-readonly);
69
- }
70
- .eds-contrast .eds-form-control-wrapper--readonly {
71
- background: var(--components-form-baseform-contrast-fill-readonly);
72
- color: var(--components-form-baseform-contrast-text-description);
73
- border: var(--components-form-baseform-contrast-fill-readonly);
74
- }
75
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
76
- color: var(--components-form-baseform-contrast-text-description);
77
- }
78
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
79
- display: none;
5
+ align-items: center;
6
+ margin-top: 0.25rem;
80
7
  }
81
- .eds-form-control-wrapper--size-medium .eds-form-control,
82
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
83
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
84
- font-size: 1rem;
85
- line-height: 1rem;
8
+ .eds-feedback-text--info, .eds-feedback-text--information {
9
+ padding-left: calc(1rem + 0.125rem);
86
10
  }
87
- .eds-form-control-wrapper--size-large {
88
- min-height: 4rem;
89
- padding: 0 0.5rem;
11
+ .eds-feedback-text__text {
12
+ color: var(--components-form-feedbacktext-information-standard-text);
90
13
  }
91
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
92
- border-width: 0.25rem;
14
+ .eds-contrast .eds-feedback-text__text {
15
+ color: var(--components-form-feedbacktext-information-contrast-text);
93
16
  }
94
- .eds-form-control-wrapper--size-large .eds-form-control,
95
- .eds-form-control-wrapper--size-large .eds-form-control__append,
96
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
17
+
18
+ .eds-feedback-text__icon {
97
19
  font-size: 1.5rem;
98
- line-height: 2.25rem;
99
- }
100
- .eds-form-control-wrapper--success {
101
- border-color: var(--components-form-baseform-standard-border-success);
102
- }
103
- .eds-form-control-wrapper--success[focus-within] {
104
- border-color: var(--components-form-baseform-standard-border-success);
105
- }
106
- .eds-form-control-wrapper--success:focus-within {
107
- border-color: var(--components-form-baseform-standard-border-success);
108
- }
109
- .eds-contrast .eds-form-control-wrapper--success {
110
- border-color: var(--components-form-baseform-standard-border-success);
111
- }
112
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
113
- border-color: var(--components-form-baseform-contrast-border-success);
114
- }
115
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
116
- border-color: var(--components-form-baseform-contrast-border-success);
117
- }
118
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
119
- border-color: var(--components-form-baseform-standard-border-negative);
20
+ min-height: 1.5rem;
21
+ min-width: 1.5rem;
22
+ padding-right: 0.5rem;
23
+ position: relative;
24
+ top: -0.1rem;
120
25
  }
121
- .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
122
- border-color: var(--components-form-baseform-standard-border-negative);
26
+ .eds-feedback-text__icon--success {
27
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
123
28
  }
124
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
125
- border-color: var(--components-form-baseform-standard-border-negative);
29
+ .eds-feedback-text__icon--success circle {
30
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
126
31
  }
127
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
128
- border-color: var(--components-form-baseform-contrast-border-negative);
32
+ .eds-contrast .eds-feedback-text__icon--success {
33
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
129
34
  }
130
- .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
131
- border-color: var(--components-form-baseform-contrast-border-negative);
35
+ .eds-contrast .eds-feedback-text__icon--success circle {
36
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
132
37
  }
133
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
134
- border-color: var(--components-form-baseform-contrast-border-negative);
38
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
39
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
135
40
  }
136
-
137
- .eds-form-control {
138
- -webkit-appearance: none;
139
- -moz-appearance: none;
140
- appearance: none;
141
- background-color: transparent;
142
- border: 0;
143
- color: var(--components-form-baseform-standard-text-content);
144
- display: block;
145
- font-family: inherit;
146
- line-height: 1rem;
147
- font-size: 1rem;
148
- padding: 20px 1rem 0.25rem;
149
- width: 100%;
41
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
42
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
150
43
  }
151
- .eds-form-control::-moz-placeholder {
152
- opacity: 0;
153
- -moz-transition: opacity 0.2s ease-in-out;
154
- transition: opacity 0.2s ease-in-out;
44
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
45
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
155
46
  }
156
- .eds-form-control::placeholder {
157
- opacity: 0;
158
- transition: opacity 0.2s ease-in-out;
47
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
48
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
159
49
  }
160
- .eds-form-control:focus {
161
- outline: none;
50
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
51
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
162
52
  }
163
- .eds-form-control:focus::-moz-placeholder {
164
- opacity: 1;
53
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
54
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
165
55
  }
166
- .eds-form-control:focus::placeholder {
167
- opacity: 1;
56
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
57
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
168
58
  }
169
- .eds-form-control__prepend, .eds-form-control__append {
170
- position: relative;
171
- margin: 0 1rem;
172
- line-height: inherit;
59
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
60
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
173
61
  }
174
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
175
- position: static;
62
+ .eds-feedback-text__icon--warning {
63
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
176
64
  }
177
- .eds-form-control__prepend svg, .eds-form-control__append svg {
178
- top: 0.125rem;
65
+ .eds-feedback-text__icon--warning .svg-exclamation {
66
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
179
67
  }
180
- .eds-form-control__prepend {
181
- margin-right: 0;
68
+ .eds-contrast .eds-feedback-text__icon--warning {
69
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
182
70
  }
183
- .eds-form-control__append {
184
- margin-left: 0;
71
+ .eds-contrast .eds-feedback-text__icon--warning circle {
72
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
185
73
  }
186
74
  /* DO NOT CHANGE!*/
187
75
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -340,163 +228,188 @@
340
228
  }
341
229
  /* DO NOT CHANGE!*/
342
230
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
343
- .eds-feedback-text {
344
- display: flex;
231
+ .eds-form-control-wrapper {
345
232
  align-items: center;
346
- margin-top: 0.25rem;
233
+ background-color: var(--components-form-baseform-standard-fill-default);
234
+ border-radius: 0.25rem;
235
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
236
+ box-shadow: 0 0 0 transparent;
237
+ color: var(--components-form-baseform-standard-text-content);
238
+ display: flex;
239
+ position: relative;
240
+ width: 100%;
241
+ min-height: 3rem;
242
+ transition: border-color 0.1s ease-in-out;
347
243
  }
348
- .eds-feedback-text--info, .eds-feedback-text--information {
349
- padding-left: calc(1rem + 0.125rem);
244
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
245
+ border-color: var(--components-form-baseform-standard-border-interactive);
350
246
  }
351
- .eds-feedback-text__text {
352
- color: var(--components-form-feedbacktext-information-standard-text);
247
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
248
+ border-color: var(--components-form-baseform-standard-border-interactive);
353
249
  }
354
- .eds-contrast .eds-feedback-text__text {
355
- color: var(--components-form-feedbacktext-information-contrast-text);
250
+ .eds-contrast .eds-form-control-wrapper:hover {
251
+ border-color: var(--components-form-baseform-contrast-border-interactive);
356
252
  }
357
-
358
- .eds-feedback-text__icon {
359
- font-size: 1.5rem;
360
- min-height: 1.5rem;
361
- min-width: 1.5rem;
362
- padding-right: 0.5rem;
363
- position: relative;
364
- top: -0.1rem;
253
+ .eds-form-control-wrapper[focus-within] {
254
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
365
255
  }
366
- .eds-feedback-text__icon--success {
367
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
256
+ .eds-form-control-wrapper:focus-within {
257
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
368
258
  }
369
- .eds-feedback-text__icon--success circle {
370
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
259
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
260
+ outline: var(--components-form-baseform-contrast-border-interactive);
371
261
  }
372
- .eds-contrast .eds-feedback-text__icon--success {
373
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
262
+ .eds-contrast .eds-form-control-wrapper:focus-within {
263
+ outline: var(--components-form-baseform-contrast-border-interactive);
374
264
  }
375
- .eds-contrast .eds-feedback-text__icon--success circle {
376
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
265
+ .eds-form-control-wrapper ::-moz-placeholder {
266
+ color: var(--components-form-baseform-standard-text-label);
377
267
  }
378
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
379
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
268
+ .eds-form-control-wrapper ::placeholder {
269
+ color: var(--components-form-baseform-standard-text-label);
380
270
  }
381
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
382
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
271
+ .eds-form-control-wrapper--disabled {
272
+ border-color: transparent;
273
+ background-color: var(--components-form-baseform-standard-fill-disabled);
274
+ pointer-events: none;
275
+ color: var(--components-form-baseform-standard-text-disabled);
276
+ }
277
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
278
+ color: var(--components-form-baseform-standard-text-disabled);
279
+ }
280
+ .eds-contrast .eds-form-control-wrapper--disabled {
281
+ border-color: transparent;
282
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
283
+ color: var(--components-form-baseform-contrast-text-disabled);
284
+ }
285
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
286
+ color: var(--components-form-baseform-contrast-text-disabled);
287
+ }
288
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
289
+ display: none;
290
+ }
291
+ .eds-form-control-wrapper--readonly {
292
+ border-color: transparent;
293
+ pointer-events: none;
294
+ cursor: default;
295
+ background: var(--components-form-baseform-standard-fill-readonly);
296
+ border: var(--components-form-baseform-standard-fill-readonly);
297
+ }
298
+ .eds-contrast .eds-form-control-wrapper--readonly {
299
+ background: var(--components-form-baseform-contrast-fill-readonly);
300
+ color: var(--components-form-baseform-contrast-text-description);
301
+ border: var(--components-form-baseform-contrast-fill-readonly);
302
+ }
303
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
304
+ color: var(--components-form-baseform-contrast-text-description);
305
+ }
306
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
307
+ display: none;
308
+ }
309
+ .eds-form-control-wrapper--size-medium .eds-form-control,
310
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
311
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
312
+ font-size: 1rem;
313
+ line-height: 1rem;
314
+ }
315
+ .eds-form-control-wrapper--size-large {
316
+ min-height: 4rem;
317
+ padding: 0 0.5rem;
318
+ }
319
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
320
+ border-width: 0.25rem;
321
+ }
322
+ .eds-form-control-wrapper--size-large .eds-form-control,
323
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
324
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
325
+ font-size: 1.5rem;
326
+ line-height: 2.25rem;
383
327
  }
384
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
385
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
328
+ .eds-form-control-wrapper--success {
329
+ border-color: var(--components-form-baseform-standard-border-success);
386
330
  }
387
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
388
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
331
+ .eds-form-control-wrapper--success[focus-within] {
332
+ border-color: var(--components-form-baseform-standard-border-success);
389
333
  }
390
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
391
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
334
+ .eds-form-control-wrapper--success:focus-within {
335
+ border-color: var(--components-form-baseform-standard-border-success);
392
336
  }
393
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
394
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
337
+ .eds-contrast .eds-form-control-wrapper--success {
338
+ border-color: var(--components-form-baseform-standard-border-success);
395
339
  }
396
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
397
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
340
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
341
+ border-color: var(--components-form-baseform-contrast-border-success);
398
342
  }
399
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
400
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
343
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
344
+ border-color: var(--components-form-baseform-contrast-border-success);
401
345
  }
402
- .eds-feedback-text__icon--warning {
403
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
346
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
347
+ border-color: var(--components-form-baseform-standard-border-negative);
404
348
  }
405
- .eds-feedback-text__icon--warning .svg-exclamation {
406
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
349
+ .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
350
+ border-color: var(--components-form-baseform-standard-border-negative);
407
351
  }
408
- .eds-contrast .eds-feedback-text__icon--warning {
409
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
352
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
353
+ border-color: var(--components-form-baseform-standard-border-negative);
410
354
  }
411
- .eds-contrast .eds-feedback-text__icon--warning circle {
412
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
355
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
356
+ border-color: var(--components-form-baseform-contrast-border-negative);
413
357
  }
414
- .eds-fieldset {
415
- margin: 0;
416
- padding: 0;
417
- border: 0;
358
+ .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
359
+ border-color: var(--components-form-baseform-contrast-border-negative);
418
360
  }
419
- /* DO NOT CHANGE!*/
420
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
421
- .eds-form-component--radio__container {
422
- display: flex;
423
- justify-content: center;
424
- align-items: center;
425
- position: relative;
426
- cursor: pointer;
427
- height: 2rem;
428
- width: -moz-fit-content;
429
- width: fit-content;
430
- -webkit-user-select: none;
431
- -moz-user-select: none;
432
- user-select: none;
361
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
362
+ border-color: var(--components-form-baseform-contrast-border-negative);
433
363
  }
434
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
435
- background-color: var(--components-form-radio-standard-fill-hover);
364
+
365
+ .eds-form-control {
366
+ -webkit-appearance: none;
367
+ -moz-appearance: none;
368
+ appearance: none;
369
+ background-color: transparent;
370
+ border: 0;
371
+ color: var(--components-form-baseform-standard-text-content);
372
+ display: block;
373
+ font-family: inherit;
374
+ line-height: 1rem;
375
+ font-size: 1rem;
376
+ padding: 20px 1rem 0.25rem;
377
+ width: 100%;
436
378
  }
437
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
438
- background-color: var(--components-form-radio-contrast-fill-hover);
379
+ .eds-form-control::-moz-placeholder {
380
+ opacity: 0;
381
+ -moz-transition: opacity 0.2s ease-in-out;
382
+ transition: opacity 0.2s ease-in-out;
439
383
  }
440
- .eds-form-component--radio__container input {
441
- position: absolute;
384
+ .eds-form-control::placeholder {
442
385
  opacity: 0;
443
- cursor: pointer;
444
- height: 0;
445
- width: 0;
386
+ transition: opacity 0.2s ease-in-out;
446
387
  }
447
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
448
- height: 0.625rem;
449
- width: 0.625rem;
388
+ .eds-form-control:focus {
389
+ outline: none;
450
390
  }
451
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
452
- outline: 2px solid #181c56;
453
- outline-color: var(--basecolors-stroke-focus-standard);
454
- outline-offset: 0.125rem;
391
+ .eds-form-control:focus::-moz-placeholder {
392
+ opacity: 1;
455
393
  }
456
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
457
- outline-color: var(--basecolors-stroke-focus-contrast);
394
+ .eds-form-control:focus::placeholder {
395
+ opacity: 1;
458
396
  }
459
- .eds-form-component--radio__container .eds-form-component--radio__radio {
397
+ .eds-form-control__prepend, .eds-form-control__append {
460
398
  position: relative;
461
- height: 1.25rem;
462
- width: 1.25rem;
463
- margin-right: 1rem;
464
- background-color: var(--components-form-radio-standard-fill-default);
465
- border: 0.125rem solid var(--components-form-radio-standard-border);
466
- border-radius: 50%;
467
- display: flex;
468
- align-items: center;
469
- justify-content: center;
470
- }
471
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
472
- background-color: var(--components-form-radio-contrast-fill-default);
473
- border-color: var(--components-form-radio-contrast-border);
474
- }
475
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
476
- background: var(--components-form-baseform-contrast-fill-disabled);
477
- border-color: var(--components-form-baseform-contrast-text-disabled);
478
- cursor: not-allowed;
479
- }
480
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
481
- border-color: var(--components-form-baseform-contrast-text-disabled);
399
+ margin: 0 1rem;
400
+ line-height: inherit;
482
401
  }
483
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
484
- background: var(--components-form-baseform-contrast-fill-disabled);
485
- border-color: var(--components-form-baseform-contrast-text-disabled);
402
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
403
+ position: static;
486
404
  }
487
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
488
- color: var(--components-form-baseform-contrast-text-disabled);
405
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
406
+ top: 0.125rem;
489
407
  }
490
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
491
- display: block;
492
- width: 0;
493
- height: 0;
494
- border-radius: 50%;
495
- background-color: var(--components-form-radio-standard-fill-selected);
496
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
408
+ .eds-form-control__prepend {
409
+ margin-right: 0;
497
410
  }
498
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
499
- background-color: var(--components-form-radio-contrast-icon);
411
+ .eds-form-control__append {
412
+ margin-left: 0;
500
413
  }
501
414
  /* DO NOT CHANGE!*/
502
415
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -629,6 +542,88 @@
629
542
  }
630
543
  /* DO NOT CHANGE!*/
631
544
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
545
+ .eds-form-component--radio__container {
546
+ display: flex;
547
+ justify-content: center;
548
+ align-items: center;
549
+ position: relative;
550
+ cursor: pointer;
551
+ height: 2rem;
552
+ width: -moz-fit-content;
553
+ width: fit-content;
554
+ -webkit-user-select: none;
555
+ -moz-user-select: none;
556
+ user-select: none;
557
+ }
558
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
559
+ background-color: var(--components-form-radio-standard-fill-hover);
560
+ }
561
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
562
+ background-color: var(--components-form-radio-contrast-fill-hover);
563
+ }
564
+ .eds-form-component--radio__container input {
565
+ position: absolute;
566
+ opacity: 0;
567
+ cursor: pointer;
568
+ height: 0;
569
+ width: 0;
570
+ }
571
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
572
+ height: 0.625rem;
573
+ width: 0.625rem;
574
+ }
575
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
576
+ outline: 2px solid #181c56;
577
+ outline-color: var(--basecolors-stroke-focus-standard);
578
+ outline-offset: 0.125rem;
579
+ }
580
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
581
+ outline-color: var(--basecolors-stroke-focus-contrast);
582
+ }
583
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
584
+ position: relative;
585
+ height: 1.25rem;
586
+ width: 1.25rem;
587
+ margin-right: 1rem;
588
+ background-color: var(--components-form-radio-standard-fill-default);
589
+ border: 0.125rem solid var(--components-form-radio-standard-border);
590
+ border-radius: 50%;
591
+ display: flex;
592
+ align-items: center;
593
+ justify-content: center;
594
+ }
595
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
596
+ background-color: var(--components-form-radio-contrast-fill-default);
597
+ border-color: var(--components-form-radio-contrast-border);
598
+ }
599
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
600
+ background: var(--components-form-baseform-contrast-fill-disabled);
601
+ border-color: var(--components-form-baseform-contrast-text-disabled);
602
+ cursor: not-allowed;
603
+ }
604
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
605
+ border-color: var(--components-form-baseform-contrast-text-disabled);
606
+ }
607
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
608
+ background: var(--components-form-baseform-contrast-fill-disabled);
609
+ border-color: var(--components-form-baseform-contrast-text-disabled);
610
+ }
611
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
612
+ color: var(--components-form-baseform-contrast-text-disabled);
613
+ }
614
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
615
+ display: block;
616
+ width: 0;
617
+ height: 0;
618
+ border-radius: 50%;
619
+ background-color: var(--components-form-radio-standard-fill-selected);
620
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
621
+ }
622
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
623
+ background-color: var(--components-form-radio-contrast-icon);
624
+ }
625
+ /* DO NOT CHANGE!*/
626
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
632
627
  .eds-switch {
633
628
  cursor: pointer;
634
629
  -webkit-user-select: none;
@@ -748,6 +743,18 @@
748
743
  }
749
744
  /* DO NOT CHANGE!*/
750
745
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
746
+ textarea.eds-form-control.eds-textarea {
747
+ min-height: 7.75rem;
748
+ resize: vertical;
749
+ line-height: 1.5rem;
750
+ }
751
+ .eds-fieldset {
752
+ margin: 0;
753
+ padding: 0;
754
+ border: 0;
755
+ }
756
+ /* DO NOT CHANGE!*/
757
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
751
758
  .eds-input-panel[focus-within] .eds-input-panel__container {
752
759
  outline: 2px solid #181c56;
753
760
  outline-color: var(--basecolors-stroke-focus-standard);
@@ -904,13 +911,6 @@ input:disabled + .eds-input-panel__container {
904
911
  }
905
912
  /* DO NOT CHANGE!*/
906
913
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
907
- textarea.eds-form-control.eds-textarea {
908
- min-height: 7.75rem;
909
- resize: vertical;
910
- line-height: 1.5rem;
911
- }
912
- /* DO NOT CHANGE!*/
913
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
914
914
  .eds-textfield__clear-button {
915
915
  background: none;
916
916
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.1.1",
3
+ "version": "7.1.3",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,12 +27,12 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^6.15.6",
31
- "@entur/tokens": "^3.13.4",
32
- "@entur/tooltip": "^2.7.1",
33
- "@entur/typography": "^1.8.30",
34
- "@entur/utils": "^0.11.0",
30
+ "@entur/icons": "^6.15.7",
31
+ "@entur/tokens": "^3.13.5",
32
+ "@entur/tooltip": "^2.7.3",
33
+ "@entur/typography": "^1.8.32",
34
+ "@entur/utils": "^0.11.1",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "af2884729bb414d54d6cf9e9a28b2b6f7c74af74"
37
+ "gitHead": "4a9415af2b2c72292bbb4c6aeeb0f79b7dbdb0bd"
38
38
  }