@entur/form 7.0.11 → 7.0.13
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 +330 -330
- package/package.json +6 -6
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-feedback-text {
|
|
169
7
|
display: flex;
|
|
170
8
|
align-items: center;
|
|
@@ -217,13 +55,6 @@
|
|
|
217
55
|
}
|
|
218
56
|
/* DO NOT CHANGE!*/
|
|
219
57
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
220
|
-
.eds-fieldset {
|
|
221
|
-
margin: 0;
|
|
222
|
-
padding: 0;
|
|
223
|
-
border: 0;
|
|
224
|
-
}
|
|
225
|
-
/* DO NOT CHANGE!*/
|
|
226
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
227
58
|
.eds-form-control-wrapper {
|
|
228
59
|
--border-color: #7C7F9F;
|
|
229
60
|
--border-color-hover: #aeb7e2;
|
|
@@ -466,160 +297,72 @@
|
|
|
466
297
|
}
|
|
467
298
|
/* DO NOT CHANGE!*/
|
|
468
299
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
469
|
-
.eds-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
align-items: center;
|
|
300
|
+
.eds-input-group {
|
|
301
|
+
color: inherit;
|
|
302
|
+
display: block;
|
|
473
303
|
position: relative;
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
304
|
+
}
|
|
305
|
+
.eds-input-group__label {
|
|
306
|
+
color: #656782;
|
|
307
|
+
display: flex;
|
|
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
|
-
.eds-input-group {
|
|
558
|
-
color: inherit;
|
|
559
|
-
display: block;
|
|
560
|
-
position: relative;
|
|
561
|
-
}
|
|
562
|
-
.eds-input-group__label {
|
|
563
|
-
color: #656782;
|
|
564
|
-
display: flex;
|
|
565
|
-
font-size: 1rem;
|
|
566
|
-
position: absolute;
|
|
567
|
-
line-height: 1rem;
|
|
568
|
-
height: 3rem;
|
|
569
|
-
padding: 1rem;
|
|
570
|
-
padding-left: 0;
|
|
571
|
-
margin-left: 1rem;
|
|
572
|
-
top: -0.125rem;
|
|
573
|
-
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;
|
|
574
|
-
-webkit-user-select: none;
|
|
575
|
-
-moz-user-select: none;
|
|
576
|
-
user-select: none;
|
|
577
|
-
pointer-events: none;
|
|
578
|
-
}
|
|
579
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
580
|
-
top: 0.375rem;
|
|
581
|
-
font-size: 0.75rem;
|
|
582
|
-
line-height: 0.75rem;
|
|
583
|
-
height: 10px;
|
|
584
|
-
padding: 0;
|
|
585
|
-
margin-left: 1rem;
|
|
586
|
-
}
|
|
587
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
588
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
589
|
-
background: var(--textarea-label-background);
|
|
590
|
-
width: calc(
|
|
591
|
-
100% - 1rem - 1rem - 4px
|
|
592
|
-
);
|
|
593
|
-
}
|
|
594
|
-
.eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
595
|
-
top: 0.5rem;
|
|
596
|
-
font-size: 0.875rem;
|
|
597
|
-
line-height: 1rem;
|
|
598
|
-
padding: 0;
|
|
599
|
-
margin-left: 1rem;
|
|
600
|
-
}
|
|
601
|
-
.eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
|
|
602
|
-
color: #aeb7e2;
|
|
603
|
-
}
|
|
604
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
605
|
-
font-size: 1.5rem;
|
|
606
|
-
line-height: 2.25rem;
|
|
607
|
-
height: 4rem;
|
|
608
|
-
}
|
|
609
|
-
.eds-input-group__label--filled {
|
|
610
|
-
top: 0.375rem;
|
|
611
|
-
font-size: 0.75rem;
|
|
612
|
-
line-height: 0.75rem;
|
|
613
|
-
height: 10px;
|
|
614
|
-
padding: 0;
|
|
615
|
-
margin-left: 1rem;
|
|
616
|
-
}
|
|
617
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
618
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
619
|
-
background: var(--textarea-label-background);
|
|
620
|
-
width: calc(
|
|
621
|
-
100% - 1rem - 1rem - 4px
|
|
622
|
-
);
|
|
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
|
+
);
|
|
623
366
|
}
|
|
624
367
|
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
625
368
|
top: 0.5rem;
|
|
@@ -685,6 +428,175 @@
|
|
|
685
428
|
}
|
|
686
429
|
/* DO NOT CHANGE!*/
|
|
687
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. */
|
|
688
600
|
.eds-switch {
|
|
689
601
|
cursor: pointer;
|
|
690
602
|
-webkit-user-select: none;
|
|
@@ -804,6 +716,101 @@
|
|
|
804
716
|
}
|
|
805
717
|
/* DO NOT CHANGE!*/
|
|
806
718
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
719
|
+
.eds-form-component--radio__container {
|
|
720
|
+
display: flex;
|
|
721
|
+
justify-content: center;
|
|
722
|
+
align-items: center;
|
|
723
|
+
position: relative;
|
|
724
|
+
cursor: pointer;
|
|
725
|
+
height: 2rem;
|
|
726
|
+
width: -moz-fit-content;
|
|
727
|
+
width: fit-content;
|
|
728
|
+
-webkit-user-select: none;
|
|
729
|
+
-moz-user-select: none;
|
|
730
|
+
user-select: none;
|
|
731
|
+
}
|
|
732
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
733
|
+
border-color: #54568c;
|
|
734
|
+
}
|
|
735
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
736
|
+
background-color: #54568c;
|
|
737
|
+
}
|
|
738
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
739
|
+
border-color: #8285a8;
|
|
740
|
+
}
|
|
741
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
742
|
+
background-color: #8285a8;
|
|
743
|
+
}
|
|
744
|
+
.eds-form-component--radio__container input {
|
|
745
|
+
position: absolute;
|
|
746
|
+
opacity: 0;
|
|
747
|
+
cursor: pointer;
|
|
748
|
+
height: 0;
|
|
749
|
+
width: 0;
|
|
750
|
+
}
|
|
751
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
752
|
+
height: 0.625rem;
|
|
753
|
+
width: 0.625rem;
|
|
754
|
+
}
|
|
755
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
756
|
+
outline: none;
|
|
757
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
758
|
+
outline-offset: 0.125rem;
|
|
759
|
+
}
|
|
760
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
761
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
762
|
+
}
|
|
763
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
764
|
+
position: relative;
|
|
765
|
+
height: 1.25rem;
|
|
766
|
+
width: 1.25rem;
|
|
767
|
+
margin-right: 1rem;
|
|
768
|
+
background-color: #ffffff;
|
|
769
|
+
border: 0.125rem solid #181c56;
|
|
770
|
+
border-radius: 50%;
|
|
771
|
+
display: flex;
|
|
772
|
+
align-items: center;
|
|
773
|
+
justify-content: center;
|
|
774
|
+
}
|
|
775
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
776
|
+
background-color: #181c56;
|
|
777
|
+
border-color: #aeb7e2;
|
|
778
|
+
}
|
|
779
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
780
|
+
background: #d1d3d3;
|
|
781
|
+
border-color: #d1d3d3;
|
|
782
|
+
cursor: not-allowed;
|
|
783
|
+
}
|
|
784
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
785
|
+
border-color: #d1d3d3;
|
|
786
|
+
}
|
|
787
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
788
|
+
background: #d1d3d3;
|
|
789
|
+
border-color: #d1d3d3;
|
|
790
|
+
}
|
|
791
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
792
|
+
color: #656782;
|
|
793
|
+
}
|
|
794
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
795
|
+
display: block;
|
|
796
|
+
width: 0;
|
|
797
|
+
height: 0;
|
|
798
|
+
border-radius: 50%;
|
|
799
|
+
background-color: #181c56;
|
|
800
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
801
|
+
}
|
|
802
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
803
|
+
background-color: #aeb7e2;
|
|
804
|
+
}
|
|
805
|
+
/* DO NOT CHANGE!*/
|
|
806
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
807
|
+
textarea.eds-form-control.eds-textarea {
|
|
808
|
+
min-height: 7.75rem;
|
|
809
|
+
resize: vertical;
|
|
810
|
+
line-height: 1.5rem;
|
|
811
|
+
}
|
|
812
|
+
/* DO NOT CHANGE!*/
|
|
813
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
807
814
|
.eds-textfield__clear-button {
|
|
808
815
|
background: none;
|
|
809
816
|
border: none;
|
|
@@ -841,24 +848,6 @@
|
|
|
841
848
|
}
|
|
842
849
|
/* DO NOT CHANGE!*/
|
|
843
850
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
844
|
-
textarea.eds-form-control.eds-textarea {
|
|
845
|
-
min-height: 7.75rem;
|
|
846
|
-
resize: vertical;
|
|
847
|
-
line-height: 1.5rem;
|
|
848
|
-
}
|
|
849
|
-
/* DO NOT CHANGE!*/
|
|
850
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
851
|
-
.eds-segmented-control {
|
|
852
|
-
margin-top: 0.25rem;
|
|
853
|
-
display: flex;
|
|
854
|
-
background: #d1d4e3;
|
|
855
|
-
border-radius: 0.5rem;
|
|
856
|
-
}
|
|
857
|
-
.eds-contrast .eds-segmented-control {
|
|
858
|
-
background: #393d79;
|
|
859
|
-
}
|
|
860
|
-
/* DO NOT CHANGE!*/
|
|
861
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
862
851
|
.eds-segmented-choice {
|
|
863
852
|
display: block;
|
|
864
853
|
flex: 1 1 0px;
|
|
@@ -930,6 +919,17 @@ textarea.eds-form-control.eds-textarea {
|
|
|
930
919
|
}
|
|
931
920
|
/* DO NOT CHANGE!*/
|
|
932
921
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
922
|
+
.eds-segmented-control {
|
|
923
|
+
margin-top: 0.25rem;
|
|
924
|
+
display: flex;
|
|
925
|
+
background: #d1d4e3;
|
|
926
|
+
border-radius: 0.5rem;
|
|
927
|
+
}
|
|
928
|
+
.eds-contrast .eds-segmented-control {
|
|
929
|
+
background: #393d79;
|
|
930
|
+
}
|
|
931
|
+
/* DO NOT CHANGE!*/
|
|
932
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
933
933
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
934
934
|
border-color: #181c56;
|
|
935
935
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.13",
|
|
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.4.0",
|
|
31
31
|
"@entur/tokens": "^3.10.0",
|
|
32
|
-
"@entur/tooltip": "^2.6.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
34
|
-
"@entur/utils": "^0.9.
|
|
32
|
+
"@entur/tooltip": "^2.6.23",
|
|
33
|
+
"@entur/typography": "^1.8.4",
|
|
34
|
+
"@entur/utils": "^0.9.3",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "6e84c896e30f146cfc15284218f55ab9f1766d46"
|
|
38
38
|
}
|