@entur/form 5.3.3 → 5.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [5.3.4](https://bitbucket.org/enturas/design-system/compare/@entur/form@5.3.3...@entur/form@5.3.4) (2022-05-04)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **validation exclamation icon:** fix incorrect exclamation mark color for non-contrast validation ([22deff9](https://bitbucket.org/enturas/design-system/commits/22deff9cac4f867a26a14ec51197f1c3be13d403))
11
+
6
12
  ## [5.3.3](https://bitbucket.org/enturas/design-system/compare/@entur/form@5.3.2...@entur/form@5.3.3) (2022-04-27)
7
13
 
8
14
  **Note:** Version bump only for package @entur/form
package/dist/styles.css CHANGED
@@ -2,6 +2,208 @@
2
2
  --eds-form: 1;
3
3
  }/* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
+ .eds-fieldset {
6
+ margin: 0;
7
+ padding: 0;
8
+ border: 0;
9
+ }
10
+ .eds-fieldset .eds-legend {
11
+ margin: 0 0 0.5rem;
12
+ }/* DO NOT CHANGE!*/
13
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
14
+ .eds-feedback-text {
15
+ display: flex;
16
+ align-items: center;
17
+ margin-top: 0.25rem;
18
+ }
19
+ .eds-feedback-text--info {
20
+ padding-left: calc(1rem + 0.125rem);
21
+ }
22
+ .eds-feedback-text__text {
23
+ color: #181c56;
24
+ }
25
+ .eds-contrast .eds-feedback-text__text {
26
+ color: #ffffff;
27
+ }
28
+
29
+ .eds-feedback-text__icon {
30
+ font-size: 1.5rem;
31
+ min-height: 1.5rem;
32
+ min-width: 1.5rem;
33
+ padding-right: 0.5rem;
34
+ position: relative;
35
+ top: -0.1rem;
36
+ }
37
+ .eds-feedback-text__icon--success {
38
+ color: #1a8e60;
39
+ }
40
+ .eds-contrast .eds-feedback-text__icon--success {
41
+ color: #5ac39a;
42
+ }
43
+ .eds-feedback-text__icon--error {
44
+ color: #d31b1b;
45
+ }
46
+ .eds-contrast .eds-feedback-text__icon--error {
47
+ color: #ff9494;
48
+ }
49
+ .eds-feedback-text__icon--info {
50
+ color: #0082b9;
51
+ }
52
+ .eds-contrast .eds-feedback-text__icon--info {
53
+ color: #64b3e7;
54
+ }
55
+ .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon {
56
+ color: #ffca28;
57
+ }
58
+ .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon circle {
59
+ color: #181c56;
60
+ fill-opacity: 1;
61
+ }
62
+ .eds-contrast .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon {
63
+ color: #ffe082;
64
+ }
65
+ .eds-contrast .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon circle {
66
+ fill-opacity: 0;
67
+ }/* DO NOT CHANGE!*/
68
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
69
+ .eds-checkbox__container {
70
+ display: flex;
71
+ align-items: center;
72
+ position: relative;
73
+ -webkit-appearance: none;
74
+ -moz-appearance: none;
75
+ appearance: none;
76
+ cursor: pointer;
77
+ height: 2rem;
78
+ -webkit-user-select: none;
79
+ -moz-user-select: none;
80
+ -ms-user-select: none;
81
+ user-select: none;
82
+ width: -webkit-fit-content;
83
+ width: -moz-fit-content;
84
+ width: fit-content;
85
+ }
86
+ .eds-checkbox__container--reduced-click-area {
87
+ height: -webkit-fit-content;
88
+ height: -moz-fit-content;
89
+ height: fit-content;
90
+ }
91
+ .eds-checkbox__container input {
92
+ position: absolute;
93
+ opacity: 0;
94
+ height: 0;
95
+ width: 0;
96
+ }
97
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
98
+ background-color: #181c56;
99
+ }
100
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
101
+ visibility: visible;
102
+ }
103
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
104
+ stroke: #ffffff;
105
+ -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
106
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
107
+ }
108
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
109
+ opacity: 0.5;
110
+ }
111
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
112
+ opacity: 0.5;
113
+ }
114
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
115
+ background: #54568c;
116
+ }
117
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
118
+ border-color: #54568c;
119
+ background: #f3f3f3;
120
+ }
121
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
122
+ border-color: #656782;
123
+ background: #292b6a;
124
+ }
125
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
126
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
127
+ border-color: #54568c;
128
+ background-color: #54568c;
129
+ }
130
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
131
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
132
+ background: #8285a8;
133
+ border-color: #8285a8;
134
+ }
135
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
136
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
137
+ outline: none;
138
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
139
+ outline-offset: 0.125rem;
140
+ }
141
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
142
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
143
+ outline: none;
144
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
145
+ outline-offset: 0.125rem;
146
+ }
147
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
148
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
149
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
150
+ }
151
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
152
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
153
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
154
+ }
155
+ .eds-checkbox--disabled {
156
+ pointer-events: none;
157
+ }
158
+ .eds-checkbox--disabled .eds-checkbox__label {
159
+ opacity: 0.5;
160
+ }
161
+ .eds-checkbox--disabled .eds-checkbox__icon {
162
+ opacity: 0.5;
163
+ }
164
+ .eds-checkbox__icon {
165
+ display: inline-flex;
166
+ justify-content: center;
167
+ align-items: center;
168
+ position: relative;
169
+ margin-right: 1rem;
170
+ height: 1.25rem;
171
+ width: 1.25rem;
172
+ border: 0.125rem solid #181c56;
173
+ border-radius: 0.0625rem;
174
+ background-color: transparent;
175
+ color: #ffffff;
176
+ }
177
+ .eds-checkbox__icon--reduced-click-area {
178
+ margin-right: 0;
179
+ }
180
+ .eds-contrast .eds-checkbox__icon {
181
+ border-color: #54568c;
182
+ }
183
+ .eds-checkbox__icon .eds-checkbox-icon {
184
+ height: 1rem;
185
+ width: 1rem;
186
+ visibility: hidden;
187
+ }
188
+ .eds-checkbox__icon .eds-checkbox-icon__path {
189
+ transform-origin: 50% 50%;
190
+ stroke-dasharray: 48;
191
+ stroke-dashoffset: 48;
192
+ stroke-width: 0.375rem;
193
+ }
194
+
195
+ @-webkit-keyframes stroke {
196
+ 100% {
197
+ stroke-dashoffset: 0;
198
+ }
199
+ }
200
+
201
+ @keyframes stroke {
202
+ 100% {
203
+ stroke-dashoffset: 0;
204
+ }
205
+ }/* DO NOT CHANGE!*/
206
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
207
  .eds-form-control-wrapper {
6
208
  --border-color: #181c56;
7
209
  --border-color-hover: #aeb7e2;
@@ -202,423 +404,60 @@
202
404
 
203
405
  .eds-form-control {
204
406
  -webkit-appearance: none;
205
- -moz-appearance: none;
206
- appearance: none;
207
- background-color: transparent;
208
- border: 0;
209
- color: inherit;
210
- display: block;
211
- font-family: inherit;
212
- line-height: 1rem;
213
- font-size: 1rem;
214
- padding: 20px 1rem 0.25rem;
215
- width: 100%;
216
- }
217
- .eds-form-control::-moz-placeholder {
218
- opacity: 0;
219
- -moz-transition: opacity 0.2s ease-in-out;
220
- transition: opacity 0.2s ease-in-out;
221
- }
222
- .eds-form-control:-ms-input-placeholder {
223
- opacity: 0;
224
- -ms-transition: opacity 0.2s ease-in-out;
225
- transition: opacity 0.2s ease-in-out;
226
- }
227
- .eds-form-control::placeholder {
228
- opacity: 0;
229
- transition: opacity 0.2s ease-in-out;
230
- }
231
- .eds-form-control:focus {
232
- outline: none;
233
- }
234
- .eds-form-control:focus::-moz-placeholder {
235
- opacity: 1;
236
- }
237
- .eds-form-control:focus:-ms-input-placeholder {
238
- opacity: 1;
239
- }
240
- .eds-form-control:focus::placeholder {
241
- opacity: 1;
242
- }
243
- .eds-form-control__prepend, .eds-form-control__append {
244
- position: relative;
245
- margin: 0 1rem;
246
- line-height: inherit;
247
- }
248
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
249
- position: static;
250
- }
251
- .eds-form-control__prepend svg, .eds-form-control__append svg {
252
- top: 0.125rem;
253
- }
254
- .eds-form-control__prepend {
255
- margin-right: 0;
256
- }
257
- .eds-form-control__append {
258
- margin-left: 0;
259
- }/* DO NOT CHANGE!*/
260
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
261
- .eds-fieldset {
262
- margin: 0;
263
- padding: 0;
264
- border: 0;
265
- }
266
- .eds-fieldset .eds-legend {
267
- margin: 0 0 0.5rem;
268
- }/* DO NOT CHANGE!*/
269
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
270
- .eds-feedback-text {
271
- display: flex;
272
- align-items: center;
273
- margin-top: 0.25rem;
274
- }
275
- .eds-feedback-text--info {
276
- padding-left: calc(1rem + 0.125rem);
277
- }
278
- .eds-feedback-text__text {
279
- color: #181c56;
280
- }
281
- .eds-contrast .eds-feedback-text__text {
282
- color: #ffffff;
283
- }
284
-
285
- .eds-feedback-text__icon {
286
- font-size: 1.5rem;
287
- min-height: 1.5rem;
288
- min-width: 1.5rem;
289
- padding-right: 0.5rem;
290
- position: relative;
291
- top: -0.1rem;
292
- }
293
- .eds-feedback-text__icon--success {
294
- color: #1a8e60;
295
- }
296
- .eds-contrast .eds-feedback-text__icon--success {
297
- color: #5ac39a;
298
- }
299
- .eds-feedback-text__icon--error {
300
- color: #d31b1b;
301
- }
302
- .eds-contrast .eds-feedback-text__icon--error {
303
- color: #ff9494;
304
- }
305
- .eds-feedback-text__icon--info {
306
- color: #0082b9;
307
- }
308
- .eds-contrast .eds-feedback-text__icon--info {
309
- color: #64b3e7;
310
- }
311
- .eds-feedback-text__icon--warning {
312
- color: #0082b9;
313
- }
314
- .eds-contrast .eds-feedback-text__icon--warning {
315
- color: #64b3e7;
316
- }/* DO NOT CHANGE!*/
317
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
318
- .eds-checkbox__container {
319
- display: flex;
320
- align-items: center;
321
- position: relative;
322
- -webkit-appearance: none;
323
- -moz-appearance: none;
324
- appearance: none;
325
- cursor: pointer;
326
- height: 2rem;
327
- -webkit-user-select: none;
328
- -moz-user-select: none;
329
- -ms-user-select: none;
330
- user-select: none;
331
- width: -webkit-fit-content;
332
- width: -moz-fit-content;
333
- width: fit-content;
334
- }
335
- .eds-checkbox__container--reduced-click-area {
336
- height: -webkit-fit-content;
337
- height: -moz-fit-content;
338
- height: fit-content;
339
- }
340
- .eds-checkbox__container input {
341
- position: absolute;
342
- opacity: 0;
343
- height: 0;
344
- width: 0;
345
- }
346
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
347
- background-color: #181c56;
348
- }
349
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
350
- visibility: visible;
351
- }
352
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
353
- stroke: #ffffff;
354
- -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
355
- animation: stroke ease-in-out 0.2s 0.1s forwards;
356
- }
357
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
358
- opacity: 0.5;
359
- }
360
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
361
- opacity: 0.5;
362
- }
363
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
364
- background: #54568c;
365
- }
366
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
367
- border-color: #54568c;
368
- background: #f3f3f3;
369
- }
370
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
371
- border-color: #656782;
372
- background: #292b6a;
373
- }
374
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
375
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
376
- border-color: #54568c;
377
- background-color: #54568c;
378
- }
379
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
380
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
381
- background: #8285a8;
382
- border-color: #8285a8;
383
- }
384
- .eds-checkbox__container:focus + .eds-checkbox__icon,
385
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
386
- outline: none;
387
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
388
- outline-offset: 0.125rem;
389
- }
390
- .eds-checkbox__container:focus + .eds-checkbox__icon,
391
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
392
- outline: none;
393
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
394
- outline-offset: 0.125rem;
395
- }
396
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
397
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
398
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
399
- }
400
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
401
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
402
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
403
- }
404
- .eds-checkbox--disabled {
405
- pointer-events: none;
406
- }
407
- .eds-checkbox--disabled .eds-checkbox__label {
408
- opacity: 0.5;
409
- }
410
- .eds-checkbox--disabled .eds-checkbox__icon {
411
- opacity: 0.5;
412
- }
413
- .eds-checkbox__icon {
414
- display: inline-flex;
415
- justify-content: center;
416
- align-items: center;
417
- position: relative;
418
- margin-right: 1rem;
419
- height: 1.25rem;
420
- width: 1.25rem;
421
- border: 0.125rem solid #181c56;
422
- border-radius: 0.0625rem;
423
- background-color: transparent;
424
- color: #ffffff;
425
- }
426
- .eds-checkbox__icon--reduced-click-area {
427
- margin-right: 0;
428
- }
429
- .eds-contrast .eds-checkbox__icon {
430
- border-color: #54568c;
431
- }
432
- .eds-checkbox__icon .eds-checkbox-icon {
433
- height: 1rem;
434
- width: 1rem;
435
- visibility: hidden;
436
- }
437
- .eds-checkbox__icon .eds-checkbox-icon__path {
438
- transform-origin: 50% 50%;
439
- stroke-dasharray: 48;
440
- stroke-dashoffset: 48;
441
- stroke-width: 0.375rem;
442
- }
443
-
444
- @-webkit-keyframes stroke {
445
- 100% {
446
- stroke-dashoffset: 0;
447
- }
448
- }
449
-
450
- @keyframes stroke {
451
- 100% {
452
- stroke-dashoffset: 0;
453
- }
454
- }/* DO NOT CHANGE!*/
455
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
456
- .eds-input-group {
457
- color: inherit;
458
- display: block;
459
- position: relative;
460
- }
461
- .eds-input-group__label {
462
- color: #656782;
463
- display: flex;
464
- font-size: 1rem;
465
- position: absolute;
466
- line-height: 1rem;
467
- height: 3rem;
468
- padding: 1rem;
469
- padding-left: 0;
470
- margin-left: 1rem;
471
- top: -0.125rem;
472
- 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;
473
- -webkit-user-select: none;
474
- -moz-user-select: none;
475
- -ms-user-select: none;
476
- user-select: none;
477
- pointer-events: none;
478
- }
479
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
480
- top: calc(0.5rem - 0.125rem);
481
- font-size: 0.75rem;
482
- line-height: 0.75rem;
483
- height: 10px;
484
- padding: 0;
485
- margin-left: 1rem;
486
- }
487
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
488
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
489
- background: var(--textarea-label-background);
490
- width: calc( 100% - 1rem - 1rem - 4px );
491
- }
492
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
493
- top: 0.5rem;
494
- font-size: 0.875rem;
495
- line-height: 1rem;
496
- padding: 0;
497
- margin-left: 1rem;
498
- }
499
- .eds-contrast .eds-input-group__label {
500
- color: #8285a8;
501
- }
502
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
503
- color: #aeb7e2;
504
- }
505
- .eds-form-control-wrapper--size-large .eds-input-group__label {
506
- font-size: 1.5rem;
507
- line-height: 2.25rem;
508
- height: 4rem;
509
- }
510
- .eds-input-group__label--filled {
511
- top: calc(0.5rem - 0.125rem);
512
- font-size: 0.75rem;
513
- line-height: 0.75rem;
514
- height: 10px;
515
- padding: 0;
516
- margin-left: 1rem;
517
- }
518
- .eds-textarea__label .eds-input-group__label--filled {
519
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
520
- background: var(--textarea-label-background);
521
- width: calc( 100% - 1rem - 1rem - 4px );
522
- }
523
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
524
- top: 0.5rem;
525
- font-size: 0.875rem;
526
- line-height: 1rem;
527
- padding: 0;
528
- margin-left: 1rem;
529
- }
530
- .eds-input-group__label-tooltip-icon {
531
- color: #0082b9;
532
- padding-left: 0.25rem;
533
- padding-right: 0.25rem;
534
- display: flex;
535
- align-items: center;
536
- cursor: help;
537
- font-size: 1rem;
538
- }
539
-
540
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
541
- top: calc(0.5rem - 0.125rem);
542
- font-size: 0.75rem;
543
- line-height: 0.75rem;
544
- height: 10px;
545
- padding: 0;
546
- margin-left: 1rem;
547
- }
548
-
549
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
550
- top: calc(0.5rem - 0.125rem);
551
- font-size: 0.75rem;
552
- line-height: 0.75rem;
553
- height: 10px;
554
- padding: 0;
555
- margin-left: 1rem;
556
- }
557
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
558
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
559
- background: var(--textarea-label-background);
560
- width: calc( 100% - 1rem - 1rem - 4px );
561
- }
562
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
563
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
564
- background: var(--textarea-label-background);
565
- width: calc( 100% - 1rem - 1rem - 4px );
566
- }
567
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
568
- top: 0.5rem;
569
- font-size: 0.875rem;
570
- line-height: 1rem;
571
- padding: 0;
572
- margin-left: 1rem;
573
- }
574
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
575
- top: 0.5rem;
576
- font-size: 0.875rem;
577
- line-height: 1rem;
578
- padding: 0;
579
- margin-left: 1rem;
580
- }/* DO NOT CHANGE!*/
581
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
582
- textarea.eds-form-control.eds-textarea {
583
- min-height: 7.75rem;
584
- resize: vertical;
585
- line-height: 1.5rem;
586
- }/* DO NOT CHANGE!*/
587
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
588
- .eds-textfield__clear-button {
589
- background: none;
590
- border: none;
591
- border-radius: 50%;
407
+ -moz-appearance: none;
408
+ appearance: none;
409
+ background-color: transparent;
410
+ border: 0;
592
411
  color: inherit;
593
- cursor: pointer;
594
- display: flex;
595
- font: inherit;
596
- font-size: 1rem;
412
+ display: block;
413
+ font-family: inherit;
597
414
  line-height: 1rem;
598
- padding: 0.5rem;
599
- margin-right: -0.75rem;
415
+ font-size: 1rem;
416
+ padding: 20px 1rem 0.25rem;
417
+ width: 100%;
600
418
  }
601
- .eds-textfield__clear-button-wrapper {
602
- display: flex;
603
- align-items: center;
419
+ .eds-form-control::-moz-placeholder {
420
+ opacity: 0;
421
+ -moz-transition: opacity 0.2s ease-in-out;
422
+ transition: opacity 0.2s ease-in-out;
604
423
  }
605
- .eds-textfield__clear-button:hover {
606
- background: #f3f3f3;
424
+ .eds-form-control:-ms-input-placeholder {
425
+ opacity: 0;
426
+ -ms-transition: opacity 0.2s ease-in-out;
427
+ transition: opacity 0.2s ease-in-out;
607
428
  }
608
- .eds-textfield__clear-button:focus {
429
+ .eds-form-control::placeholder {
430
+ opacity: 0;
431
+ transition: opacity 0.2s ease-in-out;
432
+ }
433
+ .eds-form-control:focus {
609
434
  outline: none;
610
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
611
435
  }
612
-
613
- .eds-textfield__divider {
614
- content: "";
615
- display: block;
616
- background-color: #e9e9e9;
617
- height: 1.5rem;
618
- width: 1px;
436
+ .eds-form-control:focus::-moz-placeholder {
437
+ opacity: 1;
619
438
  }
620
- .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
621
- background-color: #8285a8;
439
+ .eds-form-control:focus:-ms-input-placeholder {
440
+ opacity: 1;
441
+ }
442
+ .eds-form-control:focus::placeholder {
443
+ opacity: 1;
444
+ }
445
+ .eds-form-control__prepend, .eds-form-control__append {
446
+ position: relative;
447
+ margin: 0 1rem;
448
+ line-height: inherit;
449
+ }
450
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
451
+ position: static;
452
+ }
453
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
454
+ top: 0.125rem;
455
+ }
456
+ .eds-form-control__prepend {
457
+ margin-right: 0;
458
+ }
459
+ .eds-form-control__append {
460
+ margin-left: 0;
622
461
  }/* DO NOT CHANGE!*/
623
462
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
624
463
  .eds-form-component--radio__container {
@@ -822,6 +661,48 @@ textarea.eds-form-control.eds-textarea {
822
661
  font-size: 0.75rem;
823
662
  }/* DO NOT CHANGE!*/
824
663
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
664
+ textarea.eds-form-control.eds-textarea {
665
+ min-height: 7.75rem;
666
+ resize: vertical;
667
+ line-height: 1.5rem;
668
+ }/* DO NOT CHANGE!*/
669
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
670
+ .eds-textfield__clear-button {
671
+ background: none;
672
+ border: none;
673
+ border-radius: 50%;
674
+ color: inherit;
675
+ cursor: pointer;
676
+ display: flex;
677
+ font: inherit;
678
+ font-size: 1rem;
679
+ line-height: 1rem;
680
+ padding: 0.5rem;
681
+ margin-right: -0.75rem;
682
+ }
683
+ .eds-textfield__clear-button-wrapper {
684
+ display: flex;
685
+ align-items: center;
686
+ }
687
+ .eds-textfield__clear-button:hover {
688
+ background: #f3f3f3;
689
+ }
690
+ .eds-textfield__clear-button:focus {
691
+ outline: none;
692
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
693
+ }
694
+
695
+ .eds-textfield__divider {
696
+ content: "";
697
+ display: block;
698
+ background-color: #e9e9e9;
699
+ height: 1.5rem;
700
+ width: 1px;
701
+ }
702
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
703
+ background-color: #8285a8;
704
+ }/* DO NOT CHANGE!*/
705
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
825
706
  .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
826
707
  border-color: #181c56;
827
708
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
@@ -964,6 +845,142 @@ textarea.eds-form-control.eds-textarea {
964
845
  stroke-width: 0.375rem;
965
846
  }/* DO NOT CHANGE!*/
966
847
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
848
+ .eds-input-group {
849
+ color: inherit;
850
+ display: block;
851
+ position: relative;
852
+ }
853
+ .eds-input-group__label {
854
+ color: #656782;
855
+ display: flex;
856
+ font-size: 1rem;
857
+ position: absolute;
858
+ line-height: 1rem;
859
+ height: 3rem;
860
+ padding: 1rem;
861
+ padding-left: 0;
862
+ margin-left: 1rem;
863
+ top: -0.125rem;
864
+ 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;
865
+ -webkit-user-select: none;
866
+ -moz-user-select: none;
867
+ -ms-user-select: none;
868
+ user-select: none;
869
+ pointer-events: none;
870
+ }
871
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
872
+ top: calc(0.5rem - 0.125rem);
873
+ font-size: 0.75rem;
874
+ line-height: 0.75rem;
875
+ height: 10px;
876
+ padding: 0;
877
+ margin-left: 1rem;
878
+ }
879
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
880
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
881
+ background: var(--textarea-label-background);
882
+ width: calc( 100% - 1rem - 1rem - 4px );
883
+ }
884
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
885
+ top: 0.5rem;
886
+ font-size: 0.875rem;
887
+ line-height: 1rem;
888
+ padding: 0;
889
+ margin-left: 1rem;
890
+ }
891
+ .eds-contrast .eds-input-group__label {
892
+ color: #8285a8;
893
+ }
894
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
895
+ color: #aeb7e2;
896
+ }
897
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
898
+ font-size: 1.5rem;
899
+ line-height: 2.25rem;
900
+ height: 4rem;
901
+ }
902
+ .eds-input-group__label--filled {
903
+ top: calc(0.5rem - 0.125rem);
904
+ font-size: 0.75rem;
905
+ line-height: 0.75rem;
906
+ height: 10px;
907
+ padding: 0;
908
+ margin-left: 1rem;
909
+ }
910
+ .eds-textarea__label .eds-input-group__label--filled {
911
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
912
+ background: var(--textarea-label-background);
913
+ width: calc( 100% - 1rem - 1rem - 4px );
914
+ }
915
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
916
+ top: 0.5rem;
917
+ font-size: 0.875rem;
918
+ line-height: 1rem;
919
+ padding: 0;
920
+ margin-left: 1rem;
921
+ }
922
+ .eds-input-group__label-tooltip-icon {
923
+ color: #0082b9;
924
+ padding-left: 0.25rem;
925
+ padding-right: 0.25rem;
926
+ display: flex;
927
+ align-items: center;
928
+ cursor: help;
929
+ font-size: 1rem;
930
+ }
931
+
932
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
933
+ top: calc(0.5rem - 0.125rem);
934
+ font-size: 0.75rem;
935
+ line-height: 0.75rem;
936
+ height: 10px;
937
+ padding: 0;
938
+ margin-left: 1rem;
939
+ }
940
+
941
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
942
+ top: calc(0.5rem - 0.125rem);
943
+ font-size: 0.75rem;
944
+ line-height: 0.75rem;
945
+ height: 10px;
946
+ padding: 0;
947
+ margin-left: 1rem;
948
+ }
949
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
950
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
951
+ background: var(--textarea-label-background);
952
+ width: calc( 100% - 1rem - 1rem - 4px );
953
+ }
954
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
955
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
956
+ background: var(--textarea-label-background);
957
+ width: calc( 100% - 1rem - 1rem - 4px );
958
+ }
959
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
960
+ top: 0.5rem;
961
+ font-size: 0.875rem;
962
+ line-height: 1rem;
963
+ padding: 0;
964
+ margin-left: 1rem;
965
+ }
966
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
967
+ top: 0.5rem;
968
+ font-size: 0.875rem;
969
+ line-height: 1rem;
970
+ padding: 0;
971
+ margin-left: 1rem;
972
+ }/* DO NOT CHANGE!*/
973
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
974
+ .eds-segmented-control {
975
+ margin-top: 0.25rem;
976
+ display: flex;
977
+ background: #d1d4e3;
978
+ border-radius: 0.25rem;
979
+ }
980
+ .eds-contrast .eds-segmented-control {
981
+ background: #393d79;
982
+ }/* DO NOT CHANGE!*/
983
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
967
984
  .eds-segmented-choice {
968
985
  display: block;
969
986
  flex: 1 1 0px;
@@ -1031,14 +1048,4 @@ textarea.eds-form-control.eds-textarea {
1031
1048
  }
1032
1049
  .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1033
1050
  --background-color: #d1d4e3;
1034
- }/* DO NOT CHANGE!*/
1035
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1036
- .eds-segmented-control {
1037
- margin-top: 0.25rem;
1038
- display: flex;
1039
- background: #d1d4e3;
1040
- border-radius: 0.25rem;
1041
- }
1042
- .eds-contrast .eds-segmented-control {
1043
- background: #393d79;
1044
1051
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.3.3",
3
+ "version": "5.3.4",
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": "^4.1.1",
30
+ "@entur/icons": "^4.1.2",
31
31
  "@entur/tokens": "^3.3.2",
32
- "@entur/tooltip": "^2.5.6",
32
+ "@entur/tooltip": "^2.5.7",
33
33
  "@entur/typography": "^1.6.12",
34
34
  "@entur/utils": "^0.4.3",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "7b557782d62c07bdce744f9b084d57177e2202e9"
37
+ "gitHead": "0fba0071ad9dc75cc68b72b846f5bab78be12449"
38
38
  }