@entur/form 5.3.0 → 5.3.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.
- package/CHANGELOG.md +12 -0
- package/dist/styles.css +296 -158
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
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.3](https://bitbucket.org/enturas/design-system/compare/@entur/form@5.3.2...@entur/form@5.3.3) (2022-04-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @entur/form
|
|
9
|
+
|
|
10
|
+
## [5.3.2](https://bitbucket.org/enturas/design-system/compare/@entur/form@5.3.1...@entur/form@5.3.2) (2022-04-20)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @entur/form
|
|
13
|
+
|
|
14
|
+
## [5.3.1](https://bitbucket.org/enturas/design-system/compare/@entur/form@5.3.0...@entur/form@5.3.1) (2022-04-19)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @entur/form
|
|
17
|
+
|
|
6
18
|
# [5.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/form@5.2.3...@entur/form@5.3.0) (2022-03-14)
|
|
7
19
|
|
|
8
20
|
### Features
|
package/dist/styles.css
CHANGED
|
@@ -27,6 +27,9 @@
|
|
|
27
27
|
background-color: #ffffff;
|
|
28
28
|
border-color: #54568c;
|
|
29
29
|
}
|
|
30
|
+
.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
|
|
31
|
+
border-color: #181c56;
|
|
32
|
+
}
|
|
30
33
|
.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
|
|
31
34
|
border-color: #181c56;
|
|
32
35
|
}
|
|
@@ -34,14 +37,28 @@
|
|
|
34
37
|
border-color: #aeb7e2;
|
|
35
38
|
background: #ebebf1;
|
|
36
39
|
}
|
|
40
|
+
.eds-form-control-wrapper[focus-within] {
|
|
41
|
+
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
42
|
+
}
|
|
37
43
|
.eds-form-control-wrapper:focus-within {
|
|
38
44
|
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
39
45
|
}
|
|
46
|
+
.eds-contrast .eds-form-control-wrapper[focus-within] {
|
|
47
|
+
border-color: #181c56;
|
|
48
|
+
--border-color: #aeb7e2;
|
|
49
|
+
box-shadow: 0 0 0 0.125rem var(--border-color);
|
|
50
|
+
}
|
|
40
51
|
.eds-contrast .eds-form-control-wrapper:focus-within {
|
|
41
52
|
border-color: #181c56;
|
|
42
53
|
--border-color: #aeb7e2;
|
|
43
54
|
box-shadow: 0 0 0 0.125rem var(--border-color);
|
|
44
55
|
}
|
|
56
|
+
.eds-form-control-wrapper ::-moz-placeholder {
|
|
57
|
+
color: #656782;
|
|
58
|
+
}
|
|
59
|
+
.eds-form-control-wrapper :-ms-input-placeholder {
|
|
60
|
+
color: #656782;
|
|
61
|
+
}
|
|
45
62
|
.eds-form-control-wrapper ::placeholder {
|
|
46
63
|
color: #656782;
|
|
47
64
|
}
|
|
@@ -101,6 +118,9 @@
|
|
|
101
118
|
.eds-form-control-wrapper--success:hover {
|
|
102
119
|
border-color: #5ac39a;
|
|
103
120
|
}
|
|
121
|
+
.eds-form-control-wrapper--success[focus-within] {
|
|
122
|
+
border-color: #1a8e60;
|
|
123
|
+
}
|
|
104
124
|
.eds-form-control-wrapper--success:focus-within {
|
|
105
125
|
border-color: #1a8e60;
|
|
106
126
|
}
|
|
@@ -111,6 +131,10 @@
|
|
|
111
131
|
.eds-contrast .eds-form-control-wrapper--success:hover {
|
|
112
132
|
border-color: #1a8e60;
|
|
113
133
|
}
|
|
134
|
+
.eds-contrast .eds-form-control-wrapper--success[focus-within] {
|
|
135
|
+
--border-color: #5ac39a;
|
|
136
|
+
border-color: #181c56;
|
|
137
|
+
}
|
|
114
138
|
.eds-contrast .eds-form-control-wrapper--success:focus-within {
|
|
115
139
|
--border-color: #5ac39a;
|
|
116
140
|
border-color: #181c56;
|
|
@@ -122,6 +146,9 @@
|
|
|
122
146
|
.eds-form-control-wrapper--error:hover {
|
|
123
147
|
border-color: #ff9494;
|
|
124
148
|
}
|
|
149
|
+
.eds-form-control-wrapper--error[focus-within] {
|
|
150
|
+
border-color: #d31b1b;
|
|
151
|
+
}
|
|
125
152
|
.eds-form-control-wrapper--error:focus-within {
|
|
126
153
|
border-color: #d31b1b;
|
|
127
154
|
}
|
|
@@ -132,6 +159,10 @@
|
|
|
132
159
|
.eds-contrast .eds-form-control-wrapper--error:hover {
|
|
133
160
|
border-color: #d31b1b;
|
|
134
161
|
}
|
|
162
|
+
.eds-contrast .eds-form-control-wrapper--error[focus-within] {
|
|
163
|
+
border-color: #181c56;
|
|
164
|
+
--border-color: #ff9494;
|
|
165
|
+
}
|
|
135
166
|
.eds-contrast .eds-form-control-wrapper--error:focus-within {
|
|
136
167
|
border-color: #181c56;
|
|
137
168
|
--border-color: #ff9494;
|
|
@@ -140,12 +171,22 @@
|
|
|
140
171
|
background-color: #181c56;
|
|
141
172
|
color: #ffffff;
|
|
142
173
|
}
|
|
174
|
+
.eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
|
|
175
|
+
color: #aeb7e2;
|
|
176
|
+
}
|
|
177
|
+
.eds-contrast .eds-form-control-wrapper--dark :-ms-input-placeholder {
|
|
178
|
+
color: #aeb7e2;
|
|
179
|
+
}
|
|
143
180
|
.eds-contrast .eds-form-control-wrapper--dark ::placeholder {
|
|
144
181
|
color: #aeb7e2;
|
|
145
182
|
}
|
|
146
183
|
.eds-contrast .eds-form-control-wrapper--dark:hover {
|
|
147
184
|
border-color: #aeb7e2;
|
|
148
185
|
}
|
|
186
|
+
.eds-contrast .eds-form-control-wrapper--dark[focus-within] {
|
|
187
|
+
background-color: #292b6a;
|
|
188
|
+
border-color: #aeb7e2;
|
|
189
|
+
}
|
|
149
190
|
.eds-contrast .eds-form-control-wrapper--dark:focus-within {
|
|
150
191
|
background-color: #292b6a;
|
|
151
192
|
border-color: #aeb7e2;
|
|
@@ -160,7 +201,9 @@
|
|
|
160
201
|
}
|
|
161
202
|
|
|
162
203
|
.eds-form-control {
|
|
163
|
-
appearance: none;
|
|
204
|
+
-webkit-appearance: none;
|
|
205
|
+
-moz-appearance: none;
|
|
206
|
+
appearance: none;
|
|
164
207
|
background-color: transparent;
|
|
165
208
|
border: 0;
|
|
166
209
|
color: inherit;
|
|
@@ -171,6 +214,16 @@
|
|
|
171
214
|
padding: 20px 1rem 0.25rem;
|
|
172
215
|
width: 100%;
|
|
173
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
|
+
}
|
|
174
227
|
.eds-form-control::placeholder {
|
|
175
228
|
opacity: 0;
|
|
176
229
|
transition: opacity 0.2s ease-in-out;
|
|
@@ -178,6 +231,12 @@
|
|
|
178
231
|
.eds-form-control:focus {
|
|
179
232
|
outline: none;
|
|
180
233
|
}
|
|
234
|
+
.eds-form-control:focus::-moz-placeholder {
|
|
235
|
+
opacity: 1;
|
|
236
|
+
}
|
|
237
|
+
.eds-form-control:focus:-ms-input-placeholder {
|
|
238
|
+
opacity: 1;
|
|
239
|
+
}
|
|
181
240
|
.eds-form-control:focus::placeholder {
|
|
182
241
|
opacity: 1;
|
|
183
242
|
}
|
|
@@ -260,13 +319,22 @@
|
|
|
260
319
|
display: flex;
|
|
261
320
|
align-items: center;
|
|
262
321
|
position: relative;
|
|
263
|
-
appearance: none;
|
|
322
|
+
-webkit-appearance: none;
|
|
323
|
+
-moz-appearance: none;
|
|
324
|
+
appearance: none;
|
|
264
325
|
cursor: pointer;
|
|
265
326
|
height: 2rem;
|
|
266
|
-
user-select: none;
|
|
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;
|
|
267
333
|
width: fit-content;
|
|
268
334
|
}
|
|
269
335
|
.eds-checkbox__container--reduced-click-area {
|
|
336
|
+
height: -webkit-fit-content;
|
|
337
|
+
height: -moz-fit-content;
|
|
270
338
|
height: fit-content;
|
|
271
339
|
}
|
|
272
340
|
.eds-checkbox__container input {
|
|
@@ -283,7 +351,8 @@
|
|
|
283
351
|
}
|
|
284
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 {
|
|
285
353
|
stroke: #ffffff;
|
|
286
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
354
|
+
-webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
355
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
287
356
|
}
|
|
288
357
|
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
289
358
|
opacity: 0.5;
|
|
@@ -313,12 +382,22 @@
|
|
|
313
382
|
border-color: #8285a8;
|
|
314
383
|
}
|
|
315
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,
|
|
316
391
|
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
317
392
|
outline: none;
|
|
318
393
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
319
394
|
outline-offset: 0.125rem;
|
|
320
395
|
}
|
|
321
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,
|
|
322
401
|
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
323
402
|
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
324
403
|
}
|
|
@@ -362,18 +441,186 @@
|
|
|
362
441
|
stroke-width: 0.375rem;
|
|
363
442
|
}
|
|
364
443
|
|
|
444
|
+
@-webkit-keyframes stroke {
|
|
445
|
+
100% {
|
|
446
|
+
stroke-dashoffset: 0;
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
|
|
365
450
|
@keyframes stroke {
|
|
366
451
|
100% {
|
|
367
452
|
stroke-dashoffset: 0;
|
|
368
453
|
}
|
|
369
454
|
}/* DO NOT CHANGE!*/
|
|
370
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. */
|
|
371
582
|
textarea.eds-form-control.eds-textarea {
|
|
372
583
|
min-height: 7.75rem;
|
|
373
584
|
resize: vertical;
|
|
374
585
|
line-height: 1.5rem;
|
|
375
586
|
}/* DO NOT CHANGE!*/
|
|
376
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%;
|
|
592
|
+
color: inherit;
|
|
593
|
+
cursor: pointer;
|
|
594
|
+
display: flex;
|
|
595
|
+
font: inherit;
|
|
596
|
+
font-size: 1rem;
|
|
597
|
+
line-height: 1rem;
|
|
598
|
+
padding: 0.5rem;
|
|
599
|
+
margin-right: -0.75rem;
|
|
600
|
+
}
|
|
601
|
+
.eds-textfield__clear-button-wrapper {
|
|
602
|
+
display: flex;
|
|
603
|
+
align-items: center;
|
|
604
|
+
}
|
|
605
|
+
.eds-textfield__clear-button:hover {
|
|
606
|
+
background: #f3f3f3;
|
|
607
|
+
}
|
|
608
|
+
.eds-textfield__clear-button:focus {
|
|
609
|
+
outline: none;
|
|
610
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.eds-textfield__divider {
|
|
614
|
+
content: "";
|
|
615
|
+
display: block;
|
|
616
|
+
background-color: #e9e9e9;
|
|
617
|
+
height: 1.5rem;
|
|
618
|
+
width: 1px;
|
|
619
|
+
}
|
|
620
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
621
|
+
background-color: #8285a8;
|
|
622
|
+
}/* DO NOT CHANGE!*/
|
|
623
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
377
624
|
.eds-form-component--radio__container {
|
|
378
625
|
display: flex;
|
|
379
626
|
justify-content: center;
|
|
@@ -381,8 +628,13 @@ textarea.eds-form-control.eds-textarea {
|
|
|
381
628
|
position: relative;
|
|
382
629
|
cursor: pointer;
|
|
383
630
|
height: 2rem;
|
|
631
|
+
width: -webkit-fit-content;
|
|
632
|
+
width: -moz-fit-content;
|
|
384
633
|
width: fit-content;
|
|
385
|
-
user-select: none;
|
|
634
|
+
-webkit-user-select: none;
|
|
635
|
+
-moz-user-select: none;
|
|
636
|
+
-ms-user-select: none;
|
|
637
|
+
user-select: none;
|
|
386
638
|
}
|
|
387
639
|
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
388
640
|
border-color: #54568c;
|
|
@@ -460,8 +712,13 @@ textarea.eds-form-control.eds-textarea {
|
|
|
460
712
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
461
713
|
.eds-switch {
|
|
462
714
|
cursor: pointer;
|
|
463
|
-
user-select: none;
|
|
715
|
+
-webkit-user-select: none;
|
|
716
|
+
-moz-user-select: none;
|
|
717
|
+
-ms-user-select: none;
|
|
718
|
+
user-select: none;
|
|
464
719
|
padding: 0.5rem 0;
|
|
720
|
+
width: -webkit-fit-content;
|
|
721
|
+
width: -moz-fit-content;
|
|
465
722
|
width: fit-content;
|
|
466
723
|
}
|
|
467
724
|
.eds-switch input {
|
|
@@ -565,10 +822,18 @@ textarea.eds-form-control.eds-textarea {
|
|
|
565
822
|
font-size: 0.75rem;
|
|
566
823
|
}/* DO NOT CHANGE!*/
|
|
567
824
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
825
|
+
.eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
|
|
826
|
+
border-color: #181c56;
|
|
827
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
828
|
+
}
|
|
568
829
|
.eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
|
|
569
830
|
border-color: #181c56;
|
|
570
831
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
571
832
|
}
|
|
833
|
+
.eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
|
|
834
|
+
border-color: #ffffff;
|
|
835
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
836
|
+
}
|
|
572
837
|
.eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
|
|
573
838
|
border-color: #ffffff;
|
|
574
839
|
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
@@ -597,7 +862,8 @@ textarea.eds-form-control.eds-textarea {
|
|
|
597
862
|
}
|
|
598
863
|
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
|
|
599
864
|
stroke: #5ac39a;
|
|
600
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
865
|
+
-webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
866
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
601
867
|
}
|
|
602
868
|
.eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
|
|
603
869
|
opacity: 0.5;
|
|
@@ -615,7 +881,12 @@ textarea.eds-form-control.eds-textarea {
|
|
|
615
881
|
min-width: 20rem;
|
|
616
882
|
position: relative;
|
|
617
883
|
padding: 1rem;
|
|
618
|
-
user-select: none;
|
|
884
|
+
-webkit-user-select: none;
|
|
885
|
+
-moz-user-select: none;
|
|
886
|
+
-ms-user-select: none;
|
|
887
|
+
user-select: none;
|
|
888
|
+
width: -webkit-fit-content;
|
|
889
|
+
width: -moz-fit-content;
|
|
619
890
|
width: fit-content;
|
|
620
891
|
}
|
|
621
892
|
.eds-contrast .eds-radio-panel__container {
|
|
@@ -693,154 +964,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
693
964
|
stroke-width: 0.375rem;
|
|
694
965
|
}/* DO NOT CHANGE!*/
|
|
695
966
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
696
|
-
.eds-input-group {
|
|
697
|
-
color: inherit;
|
|
698
|
-
display: block;
|
|
699
|
-
position: relative;
|
|
700
|
-
}
|
|
701
|
-
.eds-input-group__label {
|
|
702
|
-
color: #656782;
|
|
703
|
-
display: flex;
|
|
704
|
-
font-size: 1rem;
|
|
705
|
-
position: absolute;
|
|
706
|
-
line-height: 1rem;
|
|
707
|
-
height: 3rem;
|
|
708
|
-
padding: 1rem;
|
|
709
|
-
padding-left: 0;
|
|
710
|
-
margin-left: 1rem;
|
|
711
|
-
top: -0.125rem;
|
|
712
|
-
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;
|
|
713
|
-
user-select: none;
|
|
714
|
-
pointer-events: none;
|
|
715
|
-
}
|
|
716
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
717
|
-
top: calc(0.5rem - 0.125rem);
|
|
718
|
-
font-size: 0.75rem;
|
|
719
|
-
line-height: 0.75rem;
|
|
720
|
-
height: 10px;
|
|
721
|
-
padding: 0;
|
|
722
|
-
margin-left: 1rem;
|
|
723
|
-
}
|
|
724
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
725
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
726
|
-
background: var(--textarea-label-background);
|
|
727
|
-
width: calc( 100% - 1rem - 1rem - 4px );
|
|
728
|
-
}
|
|
729
|
-
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
730
|
-
top: 0.5rem;
|
|
731
|
-
font-size: 0.875rem;
|
|
732
|
-
line-height: 1rem;
|
|
733
|
-
padding: 0;
|
|
734
|
-
margin-left: 1rem;
|
|
735
|
-
}
|
|
736
|
-
.eds-contrast .eds-input-group__label {
|
|
737
|
-
color: #8285a8;
|
|
738
|
-
}
|
|
739
|
-
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
740
|
-
color: #aeb7e2;
|
|
741
|
-
}
|
|
742
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
743
|
-
font-size: 1.5rem;
|
|
744
|
-
line-height: 2.25rem;
|
|
745
|
-
height: 4rem;
|
|
746
|
-
}
|
|
747
|
-
.eds-input-group__label--filled {
|
|
748
|
-
top: calc(0.5rem - 0.125rem);
|
|
749
|
-
font-size: 0.75rem;
|
|
750
|
-
line-height: 0.75rem;
|
|
751
|
-
height: 10px;
|
|
752
|
-
padding: 0;
|
|
753
|
-
margin-left: 1rem;
|
|
754
|
-
}
|
|
755
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
756
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
757
|
-
background: var(--textarea-label-background);
|
|
758
|
-
width: calc( 100% - 1rem - 1rem - 4px );
|
|
759
|
-
}
|
|
760
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
761
|
-
top: 0.5rem;
|
|
762
|
-
font-size: 0.875rem;
|
|
763
|
-
line-height: 1rem;
|
|
764
|
-
padding: 0;
|
|
765
|
-
margin-left: 1rem;
|
|
766
|
-
}
|
|
767
|
-
.eds-input-group__label-tooltip-icon {
|
|
768
|
-
color: #0082b9;
|
|
769
|
-
padding-left: 0.25rem;
|
|
770
|
-
padding-right: 0.25rem;
|
|
771
|
-
display: flex;
|
|
772
|
-
align-items: center;
|
|
773
|
-
cursor: help;
|
|
774
|
-
font-size: 1rem;
|
|
775
|
-
}
|
|
776
|
-
|
|
777
|
-
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
778
|
-
top: calc(0.5rem - 0.125rem);
|
|
779
|
-
font-size: 0.75rem;
|
|
780
|
-
line-height: 0.75rem;
|
|
781
|
-
height: 10px;
|
|
782
|
-
padding: 0;
|
|
783
|
-
margin-left: 1rem;
|
|
784
|
-
}
|
|
785
|
-
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
786
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
787
|
-
background: var(--textarea-label-background);
|
|
788
|
-
width: calc( 100% - 1rem - 1rem - 4px );
|
|
789
|
-
}
|
|
790
|
-
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
791
|
-
top: 0.5rem;
|
|
792
|
-
font-size: 0.875rem;
|
|
793
|
-
line-height: 1rem;
|
|
794
|
-
padding: 0;
|
|
795
|
-
margin-left: 1rem;
|
|
796
|
-
}/* DO NOT CHANGE!*/
|
|
797
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
798
|
-
.eds-textfield__clear-button {
|
|
799
|
-
background: none;
|
|
800
|
-
border: none;
|
|
801
|
-
border-radius: 50%;
|
|
802
|
-
color: inherit;
|
|
803
|
-
cursor: pointer;
|
|
804
|
-
display: flex;
|
|
805
|
-
font: inherit;
|
|
806
|
-
font-size: 1rem;
|
|
807
|
-
line-height: 1rem;
|
|
808
|
-
padding: 0.5rem;
|
|
809
|
-
margin-right: -0.75rem;
|
|
810
|
-
}
|
|
811
|
-
.eds-textfield__clear-button-wrapper {
|
|
812
|
-
display: flex;
|
|
813
|
-
align-items: center;
|
|
814
|
-
}
|
|
815
|
-
.eds-textfield__clear-button:hover {
|
|
816
|
-
background: #f3f3f3;
|
|
817
|
-
}
|
|
818
|
-
.eds-textfield__clear-button:focus {
|
|
819
|
-
outline: none;
|
|
820
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
821
|
-
}
|
|
822
|
-
|
|
823
|
-
.eds-textfield__divider {
|
|
824
|
-
content: "";
|
|
825
|
-
display: block;
|
|
826
|
-
background-color: #e9e9e9;
|
|
827
|
-
height: 1.5rem;
|
|
828
|
-
width: 1px;
|
|
829
|
-
}
|
|
830
|
-
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
831
|
-
background-color: #8285a8;
|
|
832
|
-
}/* DO NOT CHANGE!*/
|
|
833
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
834
|
-
.eds-segmented-control {
|
|
835
|
-
margin-top: 0.25rem;
|
|
836
|
-
display: flex;
|
|
837
|
-
background: #d1d4e3;
|
|
838
|
-
border-radius: 0.25rem;
|
|
839
|
-
}
|
|
840
|
-
.eds-contrast .eds-segmented-control {
|
|
841
|
-
background: #393d79;
|
|
842
|
-
}/* DO NOT CHANGE!*/
|
|
843
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
844
967
|
.eds-segmented-choice {
|
|
845
968
|
display: block;
|
|
846
969
|
flex: 1 1 0px;
|
|
@@ -858,7 +981,10 @@ textarea.eds-form-control.eds-textarea {
|
|
|
858
981
|
padding: calc(0.25rem/ 2) 0.75rem;
|
|
859
982
|
height: 1.5rem;
|
|
860
983
|
text-align: center;
|
|
861
|
-
user-select: none;
|
|
984
|
+
-webkit-user-select: none;
|
|
985
|
+
-moz-user-select: none;
|
|
986
|
+
-ms-user-select: none;
|
|
987
|
+
user-select: none;
|
|
862
988
|
}
|
|
863
989
|
.eds-contrast .eds-segmented-choice .eds-base-segmented {
|
|
864
990
|
border-color: #393d79;
|
|
@@ -876,7 +1002,9 @@ textarea.eds-form-control.eds-textarea {
|
|
|
876
1002
|
--background-color: #54568c;
|
|
877
1003
|
}
|
|
878
1004
|
.eds-segmented-choice input {
|
|
879
|
-
appearance: none;
|
|
1005
|
+
-webkit-appearance: none;
|
|
1006
|
+
-moz-appearance: none;
|
|
1007
|
+
appearance: none;
|
|
880
1008
|
position: absolute;
|
|
881
1009
|
opacity: 0;
|
|
882
1010
|
height: 0;
|
|
@@ -903,4 +1031,14 @@ textarea.eds-form-control.eds-textarea {
|
|
|
903
1031
|
}
|
|
904
1032
|
.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
|
|
905
1033
|
--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;
|
|
906
1044
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.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": "^
|
|
31
|
-
"@entur/tokens": "^3.3.
|
|
32
|
-
"@entur/tooltip": "^2.5.
|
|
33
|
-
"@entur/typography": "^1.6.
|
|
30
|
+
"@entur/icons": "^4.1.1",
|
|
31
|
+
"@entur/tokens": "^3.3.2",
|
|
32
|
+
"@entur/tooltip": "^2.5.6",
|
|
33
|
+
"@entur/typography": "^1.6.12",
|
|
34
34
|
"@entur/utils": "^0.4.3",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "7b557782d62c07bdce744f9b084d57177e2202e9"
|
|
38
38
|
}
|