@entur/form 7.1.7 → 7.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 +346 -346
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,190 +1,5 @@
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);
10
- 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;
80
- }
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;
86
- }
87
- .eds-form-control-wrapper--size-large {
88
- min-height: 4rem;
89
- padding: 0 0.5rem;
90
- }
91
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
92
- border-width: 0.25rem;
93
- }
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 {
97
- 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);
120
- }
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);
123
- }
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);
126
- }
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);
129
- }
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);
132
- }
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);
135
- }
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%;
150
- }
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;
155
- }
156
- .eds-form-control::placeholder {
157
- opacity: 0;
158
- transition: opacity 0.2s ease-in-out;
159
- }
160
- .eds-form-control:focus {
161
- outline: none;
162
- }
163
- .eds-form-control:focus::-moz-placeholder {
164
- opacity: 1;
165
- }
166
- .eds-form-control:focus::placeholder {
167
- opacity: 1;
168
- }
169
- .eds-form-control__prepend, .eds-form-control__append {
170
- position: relative;
171
- margin: 0 1rem;
172
- line-height: inherit;
173
- }
174
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
175
- position: static;
176
- }
177
- .eds-form-control__prepend svg, .eds-form-control__append svg {
178
- top: 0.125rem;
179
- }
180
- .eds-form-control__prepend {
181
- margin-right: 0;
182
- }
183
- .eds-form-control__append {
184
- margin-left: 0;
185
- }
186
- /* DO NOT CHANGE!*/
187
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
188
3
  .eds-checkbox__container {
189
4
  display: flex;
190
5
  align-items: center;
@@ -340,210 +155,317 @@
340
155
  }
341
156
  /* DO NOT CHANGE!*/
342
157
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
343
- .eds-feedback-text {
158
+ .eds-input-group {
159
+ color: inherit;
160
+ display: block;
161
+ position: relative;
162
+ }
163
+ .eds-input-group__label {
164
+ color: var(--components-form-baseform-standard-text-label);
344
165
  display: flex;
345
- align-items: center;
346
- margin-top: 0.25rem;
166
+ font-size: 1rem;
167
+ position: absolute;
168
+ line-height: 1rem;
169
+ height: 3rem;
170
+ padding: 1rem;
171
+ padding-left: 0;
172
+ margin-left: 1rem;
173
+ top: -0.125rem;
174
+ 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;
175
+ -webkit-user-select: none;
176
+ -moz-user-select: none;
177
+ user-select: none;
178
+ pointer-events: none;
347
179
  }
348
- .eds-feedback-text--info, .eds-feedback-text--information {
349
- padding-left: calc(1rem + 0.125rem);
180
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
181
+ top: 0.375rem;
182
+ font-size: 0.75rem;
183
+ line-height: 0.75rem;
184
+ height: 10px;
185
+ padding: 0;
186
+ margin-left: 1rem;
350
187
  }
351
- .eds-feedback-text__text {
352
- color: var(--components-form-feedbacktext-information-standard-text);
188
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
189
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
190
+ background: var(--textarea-label-background);
191
+ width: calc(100% - 1rem - 1rem - 4px);
353
192
  }
354
- .eds-contrast .eds-feedback-text__text {
355
- color: var(--components-form-feedbacktext-information-contrast-text);
193
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
194
+ top: 0.5rem;
195
+ font-size: 0.875rem;
196
+ line-height: 1rem;
197
+ padding: 0;
198
+ margin-left: 1rem;
356
199
  }
357
-
358
- .eds-feedback-text__icon {
200
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
359
201
  font-size: 1.5rem;
360
- min-height: 1.5rem;
361
- min-width: 1.5rem;
362
- padding-right: 0.5rem;
202
+ line-height: 2.25rem;
203
+ height: 4rem;
204
+ top: -0.25rem;
205
+ }
206
+ .eds-input-group__label--filled {
207
+ top: 0.375rem;
208
+ font-size: 0.75rem;
209
+ line-height: 0.75rem;
210
+ height: 10px;
211
+ padding: 0;
212
+ margin-left: 1rem;
213
+ }
214
+ .eds-textarea__label .eds-input-group__label--filled {
215
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
216
+ background: var(--textarea-label-background);
217
+ width: calc(100% - 1rem - 1rem - 4px);
218
+ }
219
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
220
+ top: 0.5rem;
221
+ font-size: 0.875rem;
222
+ line-height: 1rem;
223
+ padding: 0;
224
+ margin-left: 1rem;
225
+ }
226
+ .eds-input-group__label-tooltip-icon {
227
+ color: var(--base-colors-shape-accent);
228
+ padding-left: 0.25rem;
229
+ padding-right: 0.25rem;
230
+ display: flex;
231
+ align-items: center;
232
+ cursor: help;
233
+ font-size: 1rem;
234
+ }
235
+
236
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
237
+ top: 0.375rem;
238
+ font-size: 0.75rem;
239
+ line-height: 0.75rem;
240
+ height: 10px;
241
+ padding: 0;
242
+ margin-left: 1rem;
243
+ }
244
+
245
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
246
+ top: 0.375rem;
247
+ font-size: 0.75rem;
248
+ line-height: 0.75rem;
249
+ height: 10px;
250
+ padding: 0;
251
+ margin-left: 1rem;
252
+ }
253
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
254
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
255
+ background: var(--textarea-label-background);
256
+ width: calc(100% - 1rem - 1rem - 4px);
257
+ }
258
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
259
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
260
+ background: var(--textarea-label-background);
261
+ width: calc(100% - 1rem - 1rem - 4px);
262
+ }
263
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
264
+ top: 0.5rem;
265
+ font-size: 0.875rem;
266
+ line-height: 1rem;
267
+ padding: 0;
268
+ margin-left: 1rem;
269
+ }
270
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
271
+ top: 0.5rem;
272
+ font-size: 0.875rem;
273
+ line-height: 1rem;
274
+ padding: 0;
275
+ margin-left: 1rem;
276
+ }
277
+ .eds-contrast .eds-form-control-wrapper .eds-tooltip {
278
+ background: var(--components-tooltip-tooltip-standard-fill);
279
+ color: var(--components-tooltip-tooltip-standard-text);
280
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
281
+ }
282
+ .eds-form-control-wrapper .eds-tooltip::after {
283
+ background: var(--components-tooltip-tooltip-standard-fill);
284
+ }
285
+ /* DO NOT CHANGE!*/
286
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
287
+ .eds-form-control-wrapper {
288
+ align-items: center;
289
+ background-color: var(--components-form-baseform-standard-fill-default);
290
+ border-radius: 0.25rem;
291
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
292
+ box-shadow: 0 0 0 transparent;
293
+ color: var(--components-form-baseform-standard-text-content);
294
+ display: flex;
363
295
  position: relative;
364
- top: -0.1rem;
296
+ width: 100%;
297
+ min-height: 3rem;
298
+ transition: border-color 0.1s ease-in-out;
365
299
  }
366
- .eds-feedback-text__icon--success {
367
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
300
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
301
+ border-color: var(--components-form-baseform-standard-border-interactive);
368
302
  }
369
- .eds-feedback-text__icon--success circle {
370
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
303
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
304
+ border-color: var(--components-form-baseform-standard-border-interactive);
371
305
  }
372
- .eds-contrast .eds-feedback-text__icon--success {
373
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
306
+ .eds-contrast .eds-form-control-wrapper:hover {
307
+ border-color: var(--components-form-baseform-contrast-border-interactive);
374
308
  }
375
- .eds-contrast .eds-feedback-text__icon--success circle {
376
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
309
+ .eds-form-control-wrapper[focus-within] {
310
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
377
311
  }
378
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
379
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
312
+ .eds-form-control-wrapper:focus-within {
313
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
380
314
  }
381
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
382
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
315
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
316
+ outline: var(--components-form-baseform-contrast-border-interactive);
383
317
  }
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);
318
+ .eds-contrast .eds-form-control-wrapper:focus-within {
319
+ outline: var(--components-form-baseform-contrast-border-interactive);
386
320
  }
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);
321
+ .eds-form-control-wrapper ::-moz-placeholder {
322
+ color: var(--components-form-baseform-standard-text-label);
389
323
  }
390
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
391
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
324
+ .eds-form-control-wrapper ::placeholder {
325
+ color: var(--components-form-baseform-standard-text-label);
392
326
  }
393
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
394
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
327
+ .eds-form-control-wrapper--disabled {
328
+ border-color: transparent;
329
+ background-color: var(--components-form-baseform-standard-fill-disabled);
330
+ pointer-events: none;
331
+ color: var(--components-form-baseform-standard-text-disabled);
395
332
  }
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);
333
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
334
+ color: var(--components-form-baseform-standard-text-disabled);
398
335
  }
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);
336
+ .eds-contrast .eds-form-control-wrapper--disabled {
337
+ border-color: transparent;
338
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
339
+ color: var(--components-form-baseform-contrast-text-disabled);
401
340
  }
402
- .eds-feedback-text__icon--warning {
403
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
341
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
342
+ color: var(--components-form-baseform-contrast-text-disabled);
404
343
  }
405
- .eds-feedback-text__icon--warning .svg-exclamation {
406
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
344
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
345
+ display: none;
407
346
  }
408
- .eds-contrast .eds-feedback-text__icon--warning {
409
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
347
+ .eds-form-control-wrapper--readonly {
348
+ border-color: transparent;
349
+ pointer-events: none;
350
+ cursor: default;
351
+ background: var(--components-form-baseform-standard-fill-readonly);
352
+ border: var(--components-form-baseform-standard-fill-readonly);
353
+ }
354
+ .eds-contrast .eds-form-control-wrapper--readonly {
355
+ background: var(--components-form-baseform-contrast-fill-readonly);
356
+ color: var(--components-form-baseform-contrast-text-description);
357
+ border: var(--components-form-baseform-contrast-fill-readonly);
358
+ }
359
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
360
+ color: var(--components-form-baseform-contrast-text-description);
361
+ }
362
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
363
+ display: none;
364
+ }
365
+ .eds-form-control-wrapper--size-medium .eds-form-control,
366
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
367
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
368
+ font-size: 1rem;
369
+ line-height: 1rem;
370
+ }
371
+ .eds-form-control-wrapper--size-large {
372
+ min-height: 4rem;
373
+ padding: 0 0.5rem;
374
+ }
375
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
376
+ border-width: 0.25rem;
377
+ }
378
+ .eds-form-control-wrapper--size-large .eds-form-control,
379
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
380
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
381
+ font-size: 1.5rem;
382
+ line-height: 2.25rem;
383
+ }
384
+ .eds-form-control-wrapper--success {
385
+ border-color: var(--components-form-baseform-standard-border-success);
410
386
  }
411
- .eds-contrast .eds-feedback-text__icon--warning circle {
412
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
387
+ .eds-form-control-wrapper--success[focus-within] {
388
+ border-color: var(--components-form-baseform-standard-border-success);
413
389
  }
414
- .eds-fieldset {
415
- margin: 0;
416
- padding: 0;
417
- border: 0;
390
+ .eds-form-control-wrapper--success:focus-within {
391
+ border-color: var(--components-form-baseform-standard-border-success);
418
392
  }
419
- /* DO NOT CHANGE!*/
420
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
421
- .eds-input-group {
422
- color: inherit;
423
- display: block;
424
- position: relative;
393
+ .eds-contrast .eds-form-control-wrapper--success {
394
+ border-color: var(--components-form-baseform-standard-border-success);
425
395
  }
426
- .eds-input-group__label {
427
- color: var(--components-form-baseform-standard-text-label);
428
- display: flex;
429
- font-size: 1rem;
430
- position: absolute;
431
- line-height: 1rem;
432
- height: 3rem;
433
- padding: 1rem;
434
- padding-left: 0;
435
- margin-left: 1rem;
436
- top: -0.125rem;
437
- 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;
438
- -webkit-user-select: none;
439
- -moz-user-select: none;
440
- user-select: none;
441
- pointer-events: none;
396
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
397
+ border-color: var(--components-form-baseform-contrast-border-success);
442
398
  }
443
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
444
- top: 0.375rem;
445
- font-size: 0.75rem;
446
- line-height: 0.75rem;
447
- height: 10px;
448
- padding: 0;
449
- margin-left: 1rem;
399
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
400
+ border-color: var(--components-form-baseform-contrast-border-success);
450
401
  }
451
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
452
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
453
- background: var(--textarea-label-background);
454
- width: calc(100% - 1rem - 1rem - 4px);
402
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
403
+ border-color: var(--components-form-baseform-standard-border-negative);
455
404
  }
456
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
457
- top: 0.5rem;
458
- font-size: 0.875rem;
459
- line-height: 1rem;
460
- padding: 0;
461
- margin-left: 1rem;
405
+ .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
406
+ border-color: var(--components-form-baseform-standard-border-negative);
462
407
  }
463
- .eds-form-control-wrapper--size-large .eds-input-group__label {
464
- font-size: 1.5rem;
465
- line-height: 2.25rem;
466
- height: 4rem;
467
- top: -0.25rem;
408
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
409
+ border-color: var(--components-form-baseform-standard-border-negative);
468
410
  }
469
- .eds-input-group__label--filled {
470
- top: 0.375rem;
471
- font-size: 0.75rem;
472
- line-height: 0.75rem;
473
- height: 10px;
474
- padding: 0;
475
- margin-left: 1rem;
411
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
412
+ border-color: var(--components-form-baseform-contrast-border-negative);
476
413
  }
477
- .eds-textarea__label .eds-input-group__label--filled {
478
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
479
- background: var(--textarea-label-background);
480
- width: calc(100% - 1rem - 1rem - 4px);
414
+ .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
415
+ border-color: var(--components-form-baseform-contrast-border-negative);
481
416
  }
482
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
483
- top: 0.5rem;
484
- font-size: 0.875rem;
485
- line-height: 1rem;
486
- padding: 0;
487
- margin-left: 1rem;
417
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
418
+ border-color: var(--components-form-baseform-contrast-border-negative);
488
419
  }
489
- .eds-input-group__label-tooltip-icon {
490
- color: var(--base-colors-shape-accent);
491
- padding-left: 0.25rem;
492
- padding-right: 0.25rem;
493
- display: flex;
494
- align-items: center;
495
- cursor: help;
420
+
421
+ .eds-form-control {
422
+ -webkit-appearance: none;
423
+ -moz-appearance: none;
424
+ appearance: none;
425
+ background-color: transparent;
426
+ border: 0;
427
+ color: var(--components-form-baseform-standard-text-content);
428
+ display: block;
429
+ font-family: inherit;
430
+ line-height: 1rem;
496
431
  font-size: 1rem;
432
+ padding: 20px 1rem 0.25rem;
433
+ width: 100%;
497
434
  }
498
-
499
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
500
- top: 0.375rem;
501
- font-size: 0.75rem;
502
- line-height: 0.75rem;
503
- height: 10px;
504
- padding: 0;
505
- margin-left: 1rem;
435
+ .eds-form-control::-moz-placeholder {
436
+ opacity: 0;
437
+ -moz-transition: opacity 0.2s ease-in-out;
438
+ transition: opacity 0.2s ease-in-out;
506
439
  }
507
-
508
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
509
- top: 0.375rem;
510
- font-size: 0.75rem;
511
- line-height: 0.75rem;
512
- height: 10px;
513
- padding: 0;
514
- margin-left: 1rem;
440
+ .eds-form-control::placeholder {
441
+ opacity: 0;
442
+ transition: opacity 0.2s ease-in-out;
515
443
  }
516
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
517
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
518
- background: var(--textarea-label-background);
519
- width: calc(100% - 1rem - 1rem - 4px);
444
+ .eds-form-control:focus {
445
+ outline: none;
520
446
  }
521
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
522
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
523
- background: var(--textarea-label-background);
524
- width: calc(100% - 1rem - 1rem - 4px);
447
+ .eds-form-control:focus::-moz-placeholder {
448
+ opacity: 1;
525
449
  }
526
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
527
- top: 0.5rem;
528
- font-size: 0.875rem;
529
- line-height: 1rem;
530
- padding: 0;
531
- margin-left: 1rem;
450
+ .eds-form-control:focus::placeholder {
451
+ opacity: 1;
532
452
  }
533
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
534
- top: 0.5rem;
535
- font-size: 0.875rem;
536
- line-height: 1rem;
537
- padding: 0;
538
- margin-left: 1rem;
453
+ .eds-form-control__prepend, .eds-form-control__append {
454
+ position: relative;
455
+ margin: 0 1rem;
456
+ line-height: inherit;
539
457
  }
540
- .eds-contrast .eds-form-control-wrapper .eds-tooltip {
541
- background: var(--components-tooltip-tooltip-standard-fill);
542
- color: var(--components-tooltip-tooltip-standard-text);
543
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
458
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
459
+ position: static;
544
460
  }
545
- .eds-form-control-wrapper .eds-tooltip::after {
546
- background: var(--components-tooltip-tooltip-standard-fill);
461
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
462
+ top: 0.125rem;
463
+ }
464
+ .eds-form-control__prepend {
465
+ margin-right: 0;
466
+ }
467
+ .eds-form-control__append {
468
+ margin-left: 0;
547
469
  }
548
470
  /* DO NOT CHANGE!*/
549
471
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -911,6 +833,84 @@ input:disabled + .eds-input-panel__container {
911
833
  }
912
834
  /* DO NOT CHANGE!*/
913
835
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
836
+ .eds-feedback-text {
837
+ display: flex;
838
+ align-items: center;
839
+ margin-top: 0.25rem;
840
+ }
841
+ .eds-feedback-text--info, .eds-feedback-text--information {
842
+ padding-left: calc(1rem + 0.125rem);
843
+ }
844
+ .eds-feedback-text__text {
845
+ color: var(--components-form-feedbacktext-information-standard-text);
846
+ }
847
+ .eds-contrast .eds-feedback-text__text {
848
+ color: var(--components-form-feedbacktext-information-contrast-text);
849
+ }
850
+
851
+ .eds-feedback-text__icon {
852
+ font-size: 1.5rem;
853
+ min-height: 1.5rem;
854
+ min-width: 1.5rem;
855
+ padding-right: 0.5rem;
856
+ position: relative;
857
+ top: -0.1rem;
858
+ }
859
+ .eds-feedback-text__icon--success {
860
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
861
+ }
862
+ .eds-feedback-text__icon--success circle {
863
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
864
+ }
865
+ .eds-contrast .eds-feedback-text__icon--success {
866
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
867
+ }
868
+ .eds-contrast .eds-feedback-text__icon--success circle {
869
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
870
+ }
871
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
872
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
873
+ }
874
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
875
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
876
+ }
877
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
878
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
879
+ }
880
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
881
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
882
+ }
883
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
884
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
885
+ }
886
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
887
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
888
+ }
889
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
890
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
891
+ }
892
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
893
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
894
+ }
895
+ .eds-feedback-text__icon--warning {
896
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
897
+ }
898
+ .eds-feedback-text__icon--warning .svg-exclamation {
899
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
900
+ }
901
+ .eds-contrast .eds-feedback-text__icon--warning {
902
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
903
+ }
904
+ .eds-contrast .eds-feedback-text__icon--warning circle {
905
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
906
+ }
907
+ .eds-fieldset {
908
+ margin: 0;
909
+ padding: 0;
910
+ border: 0;
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.7",
3
+ "version": "7.1.9",
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.16.1",
30
+ "@entur/icons": "^6.17.0",
31
31
  "@entur/tokens": "^3.15.0",
32
- "@entur/tooltip": "^2.7.6",
33
- "@entur/typography": "^1.8.35",
32
+ "@entur/tooltip": "^2.7.8",
33
+ "@entur/typography": "^1.8.37",
34
34
  "@entur/utils": "^0.11.1",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "c702433653670daf832e66c5de26be359201655f"
37
+ "gitHead": "74491efb25596a135f38b50d15305803afe963ae"
38
38
  }