@entur/form 7.0.7 → 7.0.8
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/dist/styles.css +355 -355
- package/package.json +4 -4
package/dist/styles.css
CHANGED
|
@@ -3,168 +3,6 @@
|
|
|
3
3
|
}
|
|
4
4
|
/* DO NOT CHANGE!*/
|
|
5
5
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
|
-
.eds-checkbox__container {
|
|
7
|
-
display: flex;
|
|
8
|
-
align-items: center;
|
|
9
|
-
position: relative;
|
|
10
|
-
-webkit-appearance: none;
|
|
11
|
-
-moz-appearance: none;
|
|
12
|
-
appearance: none;
|
|
13
|
-
cursor: pointer;
|
|
14
|
-
-webkit-user-select: none;
|
|
15
|
-
-moz-user-select: none;
|
|
16
|
-
user-select: none;
|
|
17
|
-
width: -moz-fit-content;
|
|
18
|
-
width: fit-content;
|
|
19
|
-
margin: 0.5rem 0;
|
|
20
|
-
}
|
|
21
|
-
.eds-checkbox__container--reduced-click-area {
|
|
22
|
-
height: -moz-fit-content;
|
|
23
|
-
height: fit-content;
|
|
24
|
-
}
|
|
25
|
-
.eds-checkbox__container input {
|
|
26
|
-
position: absolute;
|
|
27
|
-
opacity: 0;
|
|
28
|
-
height: 0;
|
|
29
|
-
width: 0;
|
|
30
|
-
}
|
|
31
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
32
|
-
background-color: #181c56;
|
|
33
|
-
}
|
|
34
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
35
|
-
visibility: visible;
|
|
36
|
-
}
|
|
37
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
38
|
-
stroke: #ffffff;
|
|
39
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
40
|
-
}
|
|
41
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
42
|
-
fill: #ffffff;
|
|
43
|
-
}
|
|
44
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
45
|
-
opacity: 0.5;
|
|
46
|
-
}
|
|
47
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
48
|
-
opacity: 0.5;
|
|
49
|
-
}
|
|
50
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
51
|
-
opacity: 0.5;
|
|
52
|
-
}
|
|
53
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
54
|
-
opacity: 0.5;
|
|
55
|
-
}
|
|
56
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
57
|
-
opacity: 0.5;
|
|
58
|
-
}
|
|
59
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
60
|
-
background-color: #aeb7e2;
|
|
61
|
-
}
|
|
62
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
63
|
-
stroke: #181c56;
|
|
64
|
-
}
|
|
65
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
66
|
-
fill: #181c56;
|
|
67
|
-
}
|
|
68
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
69
|
-
border-color: #292b6a;
|
|
70
|
-
background-color: #d1d4e3;
|
|
71
|
-
}
|
|
72
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
73
|
-
border-color: #b6bee5;
|
|
74
|
-
background-color: rgba(174, 183, 226, 0.2);
|
|
75
|
-
}
|
|
76
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
77
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
78
|
-
border-color: transparent;
|
|
79
|
-
background-color: #54568c;
|
|
80
|
-
}
|
|
81
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
82
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
83
|
-
background-color: #b6bee5;
|
|
84
|
-
}
|
|
85
|
-
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
86
|
-
border-color: #16194d;
|
|
87
|
-
}
|
|
88
|
-
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
89
|
-
border-color: #9da5cb;
|
|
90
|
-
}
|
|
91
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
92
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
93
|
-
background-color: #16194d;
|
|
94
|
-
}
|
|
95
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
96
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
97
|
-
background-color: #9da5cb;
|
|
98
|
-
}
|
|
99
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
100
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
101
|
-
outline: none;
|
|
102
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
103
|
-
outline-offset: 0.125rem;
|
|
104
|
-
}
|
|
105
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
106
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
107
|
-
outline: none;
|
|
108
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
109
|
-
outline-offset: 0.125rem;
|
|
110
|
-
}
|
|
111
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
112
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
113
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
114
|
-
}
|
|
115
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
116
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
117
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
118
|
-
}
|
|
119
|
-
.eds-checkbox--disabled {
|
|
120
|
-
pointer-events: none;
|
|
121
|
-
}
|
|
122
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
123
|
-
opacity: 0.5;
|
|
124
|
-
}
|
|
125
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
126
|
-
opacity: 0.5;
|
|
127
|
-
}
|
|
128
|
-
.eds-checkbox__icon {
|
|
129
|
-
box-sizing: border-box;
|
|
130
|
-
display: inline-flex;
|
|
131
|
-
justify-content: center;
|
|
132
|
-
align-items: center;
|
|
133
|
-
position: relative;
|
|
134
|
-
margin-right: 1rem;
|
|
135
|
-
height: 1.25rem;
|
|
136
|
-
width: 1.25rem;
|
|
137
|
-
border: 0.125rem solid #181c56;
|
|
138
|
-
border-radius: 0.125rem;
|
|
139
|
-
background-color: transparent;
|
|
140
|
-
color: #ffffff;
|
|
141
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
142
|
-
}
|
|
143
|
-
.eds-checkbox__icon--reduced-click-area {
|
|
144
|
-
margin-right: 0;
|
|
145
|
-
}
|
|
146
|
-
.eds-contrast .eds-checkbox__icon {
|
|
147
|
-
border-color: #aeb7e2;
|
|
148
|
-
}
|
|
149
|
-
.eds-checkbox__icon .eds-checkbox-icon {
|
|
150
|
-
height: 1rem;
|
|
151
|
-
width: 1rem;
|
|
152
|
-
visibility: hidden;
|
|
153
|
-
}
|
|
154
|
-
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
155
|
-
transform-origin: 50% 50%;
|
|
156
|
-
stroke-dasharray: 48;
|
|
157
|
-
stroke-dashoffset: 48;
|
|
158
|
-
stroke-width: 0.375rem;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
@keyframes stroke {
|
|
162
|
-
100% {
|
|
163
|
-
stroke-dashoffset: 0;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
/* DO NOT CHANGE!*/
|
|
167
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
168
6
|
.eds-form-control-wrapper {
|
|
169
7
|
--border-color: #7C7F9F;
|
|
170
8
|
--border-color-hover: #aeb7e2;
|
|
@@ -459,174 +297,72 @@
|
|
|
459
297
|
}
|
|
460
298
|
/* DO NOT CHANGE!*/
|
|
461
299
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
462
|
-
.eds-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
300
|
+
.eds-input-group {
|
|
301
|
+
color: inherit;
|
|
302
|
+
display: block;
|
|
303
|
+
position: relative;
|
|
466
304
|
}
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
.eds-form-component--radio__container {
|
|
305
|
+
.eds-input-group__label {
|
|
306
|
+
color: #656782;
|
|
470
307
|
display: flex;
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
308
|
+
font-size: 1rem;
|
|
309
|
+
position: absolute;
|
|
310
|
+
line-height: 1rem;
|
|
311
|
+
height: 3rem;
|
|
312
|
+
padding: 1rem;
|
|
313
|
+
padding-left: 0;
|
|
314
|
+
margin-left: 1rem;
|
|
315
|
+
top: -0.125rem;
|
|
316
|
+
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;
|
|
478
317
|
-webkit-user-select: none;
|
|
479
318
|
-moz-user-select: none;
|
|
480
319
|
user-select: none;
|
|
320
|
+
pointer-events: none;
|
|
481
321
|
}
|
|
482
|
-
.eds-form-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
322
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
323
|
+
top: 0.375rem;
|
|
324
|
+
font-size: 0.75rem;
|
|
325
|
+
line-height: 0.75rem;
|
|
326
|
+
height: 10px;
|
|
327
|
+
padding: 0;
|
|
328
|
+
margin-left: 1rem;
|
|
487
329
|
}
|
|
488
|
-
.eds-
|
|
489
|
-
|
|
330
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
331
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
332
|
+
background: var(--textarea-label-background);
|
|
333
|
+
width: calc(
|
|
334
|
+
100% - 1rem - 1rem - 4px
|
|
335
|
+
);
|
|
490
336
|
}
|
|
491
|
-
.eds-
|
|
492
|
-
|
|
337
|
+
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
338
|
+
top: 0.5rem;
|
|
339
|
+
font-size: 0.875rem;
|
|
340
|
+
line-height: 1rem;
|
|
341
|
+
padding: 0;
|
|
342
|
+
margin-left: 1rem;
|
|
493
343
|
}
|
|
494
|
-
.eds-form-
|
|
495
|
-
|
|
496
|
-
opacity: 0;
|
|
497
|
-
cursor: pointer;
|
|
498
|
-
height: 0;
|
|
499
|
-
width: 0;
|
|
344
|
+
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
345
|
+
color: #aeb7e2;
|
|
500
346
|
}
|
|
501
|
-
.eds-form-
|
|
502
|
-
|
|
503
|
-
|
|
347
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
348
|
+
font-size: 1.5rem;
|
|
349
|
+
line-height: 2.25rem;
|
|
350
|
+
height: 4rem;
|
|
504
351
|
}
|
|
505
|
-
.eds-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
352
|
+
.eds-input-group__label--filled {
|
|
353
|
+
top: 0.375rem;
|
|
354
|
+
font-size: 0.75rem;
|
|
355
|
+
line-height: 0.75rem;
|
|
356
|
+
height: 10px;
|
|
357
|
+
padding: 0;
|
|
358
|
+
margin-left: 1rem;
|
|
509
359
|
}
|
|
510
|
-
.eds-
|
|
511
|
-
box-shadow:
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
width: 1.25rem;
|
|
517
|
-
margin-right: 1rem;
|
|
518
|
-
background-color: #ffffff;
|
|
519
|
-
border: 0.125rem solid #181c56;
|
|
520
|
-
border-radius: 50%;
|
|
521
|
-
display: flex;
|
|
522
|
-
align-items: center;
|
|
523
|
-
justify-content: center;
|
|
524
|
-
}
|
|
525
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
526
|
-
background-color: #181c56;
|
|
527
|
-
border-color: #aeb7e2;
|
|
528
|
-
}
|
|
529
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
530
|
-
background: #d1d3d3;
|
|
531
|
-
border-color: #d1d3d3;
|
|
532
|
-
cursor: not-allowed;
|
|
533
|
-
}
|
|
534
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
535
|
-
border-color: #d1d3d3;
|
|
536
|
-
}
|
|
537
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
538
|
-
background: #d1d3d3;
|
|
539
|
-
border-color: #d1d3d3;
|
|
540
|
-
}
|
|
541
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
542
|
-
color: #656782;
|
|
543
|
-
}
|
|
544
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
545
|
-
display: block;
|
|
546
|
-
width: 0;
|
|
547
|
-
height: 0;
|
|
548
|
-
border-radius: 50%;
|
|
549
|
-
background-color: #181c56;
|
|
550
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
551
|
-
}
|
|
552
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
553
|
-
background-color: #aeb7e2;
|
|
554
|
-
}
|
|
555
|
-
/* DO NOT CHANGE!*/
|
|
556
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
557
|
-
textarea.eds-form-control.eds-textarea {
|
|
558
|
-
min-height: 7.75rem;
|
|
559
|
-
resize: vertical;
|
|
560
|
-
line-height: 1.5rem;
|
|
561
|
-
}
|
|
562
|
-
/* DO NOT CHANGE!*/
|
|
563
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
564
|
-
.eds-input-group {
|
|
565
|
-
color: inherit;
|
|
566
|
-
display: block;
|
|
567
|
-
position: relative;
|
|
568
|
-
}
|
|
569
|
-
.eds-input-group__label {
|
|
570
|
-
color: #656782;
|
|
571
|
-
display: flex;
|
|
572
|
-
font-size: 1rem;
|
|
573
|
-
position: absolute;
|
|
574
|
-
line-height: 1rem;
|
|
575
|
-
height: 3rem;
|
|
576
|
-
padding: 1rem;
|
|
577
|
-
padding-left: 0;
|
|
578
|
-
margin-left: 1rem;
|
|
579
|
-
top: -0.125rem;
|
|
580
|
-
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;
|
|
581
|
-
-webkit-user-select: none;
|
|
582
|
-
-moz-user-select: none;
|
|
583
|
-
user-select: none;
|
|
584
|
-
pointer-events: none;
|
|
585
|
-
}
|
|
586
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
587
|
-
top: 0.375rem;
|
|
588
|
-
font-size: 0.75rem;
|
|
589
|
-
line-height: 0.75rem;
|
|
590
|
-
height: 10px;
|
|
591
|
-
padding: 0;
|
|
592
|
-
margin-left: 1rem;
|
|
593
|
-
}
|
|
594
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
595
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
596
|
-
background: var(--textarea-label-background);
|
|
597
|
-
width: calc(
|
|
598
|
-
100% - 1rem - 1rem - 4px
|
|
599
|
-
);
|
|
600
|
-
}
|
|
601
|
-
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
602
|
-
top: 0.5rem;
|
|
603
|
-
font-size: 0.875rem;
|
|
604
|
-
line-height: 1rem;
|
|
605
|
-
padding: 0;
|
|
606
|
-
margin-left: 1rem;
|
|
607
|
-
}
|
|
608
|
-
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
609
|
-
color: #aeb7e2;
|
|
610
|
-
}
|
|
611
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
612
|
-
font-size: 1.5rem;
|
|
613
|
-
line-height: 2.25rem;
|
|
614
|
-
height: 4rem;
|
|
615
|
-
}
|
|
616
|
-
.eds-input-group__label--filled {
|
|
617
|
-
top: 0.375rem;
|
|
618
|
-
font-size: 0.75rem;
|
|
619
|
-
line-height: 0.75rem;
|
|
620
|
-
height: 10px;
|
|
621
|
-
padding: 0;
|
|
622
|
-
margin-left: 1rem;
|
|
623
|
-
}
|
|
624
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
625
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
626
|
-
background: var(--textarea-label-background);
|
|
627
|
-
width: calc(
|
|
628
|
-
100% - 1rem - 1rem - 4px
|
|
629
|
-
);
|
|
360
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
361
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
362
|
+
background: var(--textarea-label-background);
|
|
363
|
+
width: calc(
|
|
364
|
+
100% - 1rem - 1rem - 4px
|
|
365
|
+
);
|
|
630
366
|
}
|
|
631
367
|
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
632
368
|
top: 0.5rem;
|
|
@@ -692,6 +428,307 @@ textarea.eds-form-control.eds-textarea {
|
|
|
692
428
|
}
|
|
693
429
|
/* DO NOT CHANGE!*/
|
|
694
430
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
431
|
+
.eds-checkbox__container {
|
|
432
|
+
display: flex;
|
|
433
|
+
align-items: center;
|
|
434
|
+
position: relative;
|
|
435
|
+
-webkit-appearance: none;
|
|
436
|
+
-moz-appearance: none;
|
|
437
|
+
appearance: none;
|
|
438
|
+
cursor: pointer;
|
|
439
|
+
-webkit-user-select: none;
|
|
440
|
+
-moz-user-select: none;
|
|
441
|
+
user-select: none;
|
|
442
|
+
width: -moz-fit-content;
|
|
443
|
+
width: fit-content;
|
|
444
|
+
margin: 0.5rem 0;
|
|
445
|
+
}
|
|
446
|
+
.eds-checkbox__container--reduced-click-area {
|
|
447
|
+
height: -moz-fit-content;
|
|
448
|
+
height: fit-content;
|
|
449
|
+
}
|
|
450
|
+
.eds-checkbox__container input {
|
|
451
|
+
position: absolute;
|
|
452
|
+
opacity: 0;
|
|
453
|
+
height: 0;
|
|
454
|
+
width: 0;
|
|
455
|
+
}
|
|
456
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
457
|
+
background-color: #181c56;
|
|
458
|
+
}
|
|
459
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
460
|
+
visibility: visible;
|
|
461
|
+
}
|
|
462
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
463
|
+
stroke: #ffffff;
|
|
464
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
465
|
+
}
|
|
466
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
467
|
+
fill: #ffffff;
|
|
468
|
+
}
|
|
469
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
470
|
+
opacity: 0.5;
|
|
471
|
+
}
|
|
472
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
473
|
+
opacity: 0.5;
|
|
474
|
+
}
|
|
475
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
476
|
+
opacity: 0.5;
|
|
477
|
+
}
|
|
478
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
479
|
+
opacity: 0.5;
|
|
480
|
+
}
|
|
481
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
482
|
+
opacity: 0.5;
|
|
483
|
+
}
|
|
484
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
485
|
+
background-color: #aeb7e2;
|
|
486
|
+
}
|
|
487
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
488
|
+
stroke: #181c56;
|
|
489
|
+
}
|
|
490
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
491
|
+
fill: #181c56;
|
|
492
|
+
}
|
|
493
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
494
|
+
border-color: #292b6a;
|
|
495
|
+
background-color: #d1d4e3;
|
|
496
|
+
}
|
|
497
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
498
|
+
border-color: #b6bee5;
|
|
499
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
500
|
+
}
|
|
501
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
502
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
503
|
+
border-color: transparent;
|
|
504
|
+
background-color: #54568c;
|
|
505
|
+
}
|
|
506
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
507
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
508
|
+
background-color: #b6bee5;
|
|
509
|
+
}
|
|
510
|
+
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
511
|
+
border-color: #16194d;
|
|
512
|
+
}
|
|
513
|
+
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
514
|
+
border-color: #9da5cb;
|
|
515
|
+
}
|
|
516
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
517
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
518
|
+
background-color: #16194d;
|
|
519
|
+
}
|
|
520
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
521
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
522
|
+
background-color: #9da5cb;
|
|
523
|
+
}
|
|
524
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
525
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
526
|
+
outline: none;
|
|
527
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
528
|
+
outline-offset: 0.125rem;
|
|
529
|
+
}
|
|
530
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
531
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
532
|
+
outline: none;
|
|
533
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
534
|
+
outline-offset: 0.125rem;
|
|
535
|
+
}
|
|
536
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
537
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
538
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
539
|
+
}
|
|
540
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
541
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
542
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
543
|
+
}
|
|
544
|
+
.eds-checkbox--disabled {
|
|
545
|
+
pointer-events: none;
|
|
546
|
+
}
|
|
547
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
548
|
+
opacity: 0.5;
|
|
549
|
+
}
|
|
550
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
551
|
+
opacity: 0.5;
|
|
552
|
+
}
|
|
553
|
+
.eds-checkbox__icon {
|
|
554
|
+
box-sizing: border-box;
|
|
555
|
+
display: inline-flex;
|
|
556
|
+
justify-content: center;
|
|
557
|
+
align-items: center;
|
|
558
|
+
position: relative;
|
|
559
|
+
margin-right: 1rem;
|
|
560
|
+
height: 1.25rem;
|
|
561
|
+
width: 1.25rem;
|
|
562
|
+
border: 0.125rem solid #181c56;
|
|
563
|
+
border-radius: 0.125rem;
|
|
564
|
+
background-color: transparent;
|
|
565
|
+
color: #ffffff;
|
|
566
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
567
|
+
}
|
|
568
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
569
|
+
margin-right: 0;
|
|
570
|
+
}
|
|
571
|
+
.eds-contrast .eds-checkbox__icon {
|
|
572
|
+
border-color: #aeb7e2;
|
|
573
|
+
}
|
|
574
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
575
|
+
height: 1rem;
|
|
576
|
+
width: 1rem;
|
|
577
|
+
visibility: hidden;
|
|
578
|
+
}
|
|
579
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
580
|
+
transform-origin: 50% 50%;
|
|
581
|
+
stroke-dasharray: 48;
|
|
582
|
+
stroke-dashoffset: 48;
|
|
583
|
+
stroke-width: 0.375rem;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
@keyframes stroke {
|
|
587
|
+
100% {
|
|
588
|
+
stroke-dashoffset: 0;
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
/* DO NOT CHANGE!*/
|
|
592
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
593
|
+
.eds-fieldset {
|
|
594
|
+
margin: 0;
|
|
595
|
+
padding: 0;
|
|
596
|
+
border: 0;
|
|
597
|
+
}
|
|
598
|
+
/* DO NOT CHANGE!*/
|
|
599
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
600
|
+
.eds-form-component--radio__container {
|
|
601
|
+
display: flex;
|
|
602
|
+
justify-content: center;
|
|
603
|
+
align-items: center;
|
|
604
|
+
position: relative;
|
|
605
|
+
cursor: pointer;
|
|
606
|
+
height: 2rem;
|
|
607
|
+
width: -moz-fit-content;
|
|
608
|
+
width: fit-content;
|
|
609
|
+
-webkit-user-select: none;
|
|
610
|
+
-moz-user-select: none;
|
|
611
|
+
user-select: none;
|
|
612
|
+
}
|
|
613
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
614
|
+
border-color: #54568c;
|
|
615
|
+
}
|
|
616
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
617
|
+
background-color: #54568c;
|
|
618
|
+
}
|
|
619
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
620
|
+
border-color: #8285a8;
|
|
621
|
+
}
|
|
622
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
623
|
+
background-color: #8285a8;
|
|
624
|
+
}
|
|
625
|
+
.eds-form-component--radio__container input {
|
|
626
|
+
position: absolute;
|
|
627
|
+
opacity: 0;
|
|
628
|
+
cursor: pointer;
|
|
629
|
+
height: 0;
|
|
630
|
+
width: 0;
|
|
631
|
+
}
|
|
632
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
633
|
+
height: 0.625rem;
|
|
634
|
+
width: 0.625rem;
|
|
635
|
+
}
|
|
636
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
637
|
+
outline: none;
|
|
638
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
639
|
+
outline-offset: 0.125rem;
|
|
640
|
+
}
|
|
641
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
642
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
643
|
+
}
|
|
644
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
645
|
+
position: relative;
|
|
646
|
+
height: 1.25rem;
|
|
647
|
+
width: 1.25rem;
|
|
648
|
+
margin-right: 1rem;
|
|
649
|
+
background-color: #ffffff;
|
|
650
|
+
border: 0.125rem solid #181c56;
|
|
651
|
+
border-radius: 50%;
|
|
652
|
+
display: flex;
|
|
653
|
+
align-items: center;
|
|
654
|
+
justify-content: center;
|
|
655
|
+
}
|
|
656
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
657
|
+
background-color: #181c56;
|
|
658
|
+
border-color: #aeb7e2;
|
|
659
|
+
}
|
|
660
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
661
|
+
background: #d1d3d3;
|
|
662
|
+
border-color: #d1d3d3;
|
|
663
|
+
cursor: not-allowed;
|
|
664
|
+
}
|
|
665
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
666
|
+
border-color: #d1d3d3;
|
|
667
|
+
}
|
|
668
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
669
|
+
background: #d1d3d3;
|
|
670
|
+
border-color: #d1d3d3;
|
|
671
|
+
}
|
|
672
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
673
|
+
color: #656782;
|
|
674
|
+
}
|
|
675
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
676
|
+
display: block;
|
|
677
|
+
width: 0;
|
|
678
|
+
height: 0;
|
|
679
|
+
border-radius: 50%;
|
|
680
|
+
background-color: #181c56;
|
|
681
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
682
|
+
}
|
|
683
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
684
|
+
background-color: #aeb7e2;
|
|
685
|
+
}
|
|
686
|
+
/* DO NOT CHANGE!*/
|
|
687
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
688
|
+
textarea.eds-form-control.eds-textarea {
|
|
689
|
+
min-height: 7.75rem;
|
|
690
|
+
resize: vertical;
|
|
691
|
+
line-height: 1.5rem;
|
|
692
|
+
}
|
|
693
|
+
/* DO NOT CHANGE!*/
|
|
694
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
695
|
+
.eds-textfield__clear-button {
|
|
696
|
+
background: none;
|
|
697
|
+
border: none;
|
|
698
|
+
border-radius: 50%;
|
|
699
|
+
color: inherit;
|
|
700
|
+
cursor: pointer;
|
|
701
|
+
display: flex;
|
|
702
|
+
font: inherit;
|
|
703
|
+
font-size: 1rem;
|
|
704
|
+
line-height: 1rem;
|
|
705
|
+
padding: 0.5rem;
|
|
706
|
+
margin-right: -0.75rem;
|
|
707
|
+
}
|
|
708
|
+
.eds-textfield__clear-button-wrapper {
|
|
709
|
+
display: flex;
|
|
710
|
+
align-items: center;
|
|
711
|
+
}
|
|
712
|
+
.eds-textfield__clear-button:hover {
|
|
713
|
+
background: #f3f3f3;
|
|
714
|
+
}
|
|
715
|
+
.eds-textfield__clear-button:focus {
|
|
716
|
+
outline: none;
|
|
717
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.eds-textfield__divider {
|
|
721
|
+
content: "";
|
|
722
|
+
display: block;
|
|
723
|
+
background-color: #e9e9e9;
|
|
724
|
+
height: 1.5rem;
|
|
725
|
+
width: 1px;
|
|
726
|
+
}
|
|
727
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
728
|
+
background-color: #8285a8;
|
|
729
|
+
}
|
|
730
|
+
/* DO NOT CHANGE!*/
|
|
731
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
695
732
|
.eds-switch {
|
|
696
733
|
cursor: pointer;
|
|
697
734
|
-webkit-user-select: none;
|
|
@@ -811,43 +848,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
811
848
|
}
|
|
812
849
|
/* DO NOT CHANGE!*/
|
|
813
850
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
814
|
-
.eds-textfield__clear-button {
|
|
815
|
-
background: none;
|
|
816
|
-
border: none;
|
|
817
|
-
border-radius: 50%;
|
|
818
|
-
color: inherit;
|
|
819
|
-
cursor: pointer;
|
|
820
|
-
display: flex;
|
|
821
|
-
font: inherit;
|
|
822
|
-
font-size: 1rem;
|
|
823
|
-
line-height: 1rem;
|
|
824
|
-
padding: 0.5rem;
|
|
825
|
-
margin-right: -0.75rem;
|
|
826
|
-
}
|
|
827
|
-
.eds-textfield__clear-button-wrapper {
|
|
828
|
-
display: flex;
|
|
829
|
-
align-items: center;
|
|
830
|
-
}
|
|
831
|
-
.eds-textfield__clear-button:hover {
|
|
832
|
-
background: #f3f3f3;
|
|
833
|
-
}
|
|
834
|
-
.eds-textfield__clear-button:focus {
|
|
835
|
-
outline: none;
|
|
836
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
837
|
-
}
|
|
838
|
-
|
|
839
|
-
.eds-textfield__divider {
|
|
840
|
-
content: "";
|
|
841
|
-
display: block;
|
|
842
|
-
background-color: #e9e9e9;
|
|
843
|
-
height: 1.5rem;
|
|
844
|
-
width: 1px;
|
|
845
|
-
}
|
|
846
|
-
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
847
|
-
background-color: #8285a8;
|
|
848
|
-
}
|
|
849
|
-
/* DO NOT CHANGE!*/
|
|
850
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
851
851
|
.eds-segmented-control {
|
|
852
852
|
margin-top: 0.25rem;
|
|
853
853
|
display: flex;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.8",
|
|
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.
|
|
30
|
+
"@entur/icons": "^6.3.0",
|
|
31
31
|
"@entur/tokens": "^3.9.0",
|
|
32
|
-
"@entur/tooltip": "^2.6.
|
|
32
|
+
"@entur/tooltip": "^2.6.18",
|
|
33
33
|
"@entur/typography": "^1.7.17",
|
|
34
34
|
"@entur/utils": "^0.9.0",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "a4e1d50fdac6ac767d5a90e92360c8d07e7c5e9c"
|
|
38
38
|
}
|