@entur/form 7.0.22 → 7.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +418 -418
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,5 +1,252 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
+ .eds-form-control-wrapper {
4
+ --border-color: #7C7F9F;
5
+ --border-color-hover: #aeb7e2;
6
+ align-items: center;
7
+ background-color: #ffffff;
8
+ border-radius: 0.25rem;
9
+ border: 0.125rem solid var(--border-color);
10
+ box-shadow: 0 0 0 transparent;
11
+ color: #181c56;
12
+ display: flex;
13
+ position: relative;
14
+ width: 100%;
15
+ min-height: 3rem;
16
+ transition: border-color 0.1s ease-in-out;
17
+ --textarea-label-background: t.$colors-brand-white;
18
+ /*
19
+ Some input controls require a darker design while inside a contrast block.
20
+ These elements require the `--dark` modifier, even on the wrapper.
21
+ */
22
+ }
23
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
24
+ --border-color: #181c56;
25
+ }
26
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
27
+ --border-color: #181c56;
28
+ }
29
+ .eds-contrast .eds-form-control-wrapper:hover {
30
+ --border-color: #aeb7e2;
31
+ }
32
+ .eds-form-control-wrapper[focus-within] {
33
+ box-shadow: inset 0 0 0 1px var(--border-color);
34
+ }
35
+ .eds-form-control-wrapper:focus-within {
36
+ box-shadow: inset 0 0 0 1px var(--border-color);
37
+ }
38
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
39
+ --border-color: #181c56;
40
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
41
+ }
42
+ .eds-contrast .eds-form-control-wrapper:focus-within {
43
+ --border-color: #181c56;
44
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
45
+ }
46
+ .eds-form-control-wrapper ::-moz-placeholder {
47
+ color: #656782;
48
+ }
49
+ .eds-form-control-wrapper ::placeholder {
50
+ color: #656782;
51
+ }
52
+ .eds-form-control-wrapper--disabled {
53
+ --border-color: transparent;
54
+ background-color: #e9e9e9;
55
+ pointer-events: none;
56
+ color: #646464;
57
+ }
58
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
59
+ color: #646464;
60
+ }
61
+ .eds-contrast .eds-form-control-wrapper--disabled {
62
+ background: #292b6a;
63
+ color: #8285a8;
64
+ }
65
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
66
+ color: #8285a8;
67
+ }
68
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
69
+ display: none;
70
+ }
71
+ .eds-form-control-wrapper--readonly {
72
+ --border-color: transparent;
73
+ --textarea-label-background: t.$colors-greys-grey90;
74
+ pointer-events: none;
75
+ cursor: default;
76
+ background: #f8f8f8;
77
+ }
78
+ .eds-contrast .eds-form-control-wrapper--readonly {
79
+ --textarea-label-background: t.$colors-blues-blue10;
80
+ background: #292b6a;
81
+ color: #ffffff;
82
+ }
83
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
84
+ color: #aeb7e2;
85
+ }
86
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
87
+ display: none;
88
+ }
89
+ .eds-form-control-wrapper--size-medium .eds-form-control,
90
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
91
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
92
+ font-size: 1rem;
93
+ line-height: 1rem;
94
+ }
95
+ .eds-form-control-wrapper--size-large {
96
+ min-height: 4rem;
97
+ padding: 0 0.5rem;
98
+ }
99
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
100
+ border-width: 0.25rem;
101
+ }
102
+ .eds-form-control-wrapper--size-large .eds-form-control,
103
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
104
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
105
+ font-size: 1.5rem;
106
+ line-height: 2.25rem;
107
+ }
108
+ .eds-form-control-wrapper--success {
109
+ border-color: #1a8e60;
110
+ --border-color: #1a8e60;
111
+ }
112
+ .eds-form-control-wrapper--success:hover {
113
+ border-color: #5ac39a;
114
+ }
115
+ .eds-form-control-wrapper--success[focus-within] {
116
+ border-color: #1a8e60;
117
+ }
118
+ .eds-form-control-wrapper--success:focus-within {
119
+ border-color: #1a8e60;
120
+ }
121
+ .eds-contrast .eds-form-control-wrapper--success {
122
+ border-color: #5ac39a;
123
+ --border-color: #5ac39a;
124
+ }
125
+ .eds-contrast .eds-form-control-wrapper--success:hover {
126
+ border-color: #1a8e60;
127
+ }
128
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
129
+ --border-color: #5ac39a;
130
+ border-color: #181c56;
131
+ }
132
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
133
+ --border-color: #5ac39a;
134
+ border-color: #181c56;
135
+ }
136
+ .eds-form-control-wrapper--error {
137
+ border-color: #d31b1b;
138
+ --border-color: #d31b1b;
139
+ }
140
+ .eds-form-control-wrapper--error:hover {
141
+ border-color: #ff9494;
142
+ }
143
+ .eds-form-control-wrapper--error[focus-within] {
144
+ border-color: #d31b1b;
145
+ }
146
+ .eds-form-control-wrapper--error:focus-within {
147
+ border-color: #d31b1b;
148
+ }
149
+ .eds-contrast .eds-form-control-wrapper--error {
150
+ border-color: #ff9494;
151
+ --border-color: #ff9494;
152
+ }
153
+ .eds-contrast .eds-form-control-wrapper--error:hover {
154
+ border-color: #d31b1b;
155
+ }
156
+ .eds-contrast .eds-form-control-wrapper--error[focus-within] {
157
+ border-color: #181c56;
158
+ --border-color: #ff9494;
159
+ }
160
+ .eds-contrast .eds-form-control-wrapper--error:focus-within {
161
+ border-color: #181c56;
162
+ --border-color: #ff9494;
163
+ }
164
+ .eds-contrast .eds-form-control-wrapper--dark {
165
+ background-color: #181c56;
166
+ color: #ffffff;
167
+ }
168
+ .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
169
+ color: #aeb7e2;
170
+ }
171
+ .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
172
+ color: #aeb7e2;
173
+ }
174
+ .eds-contrast .eds-form-control-wrapper--dark:hover {
175
+ border-color: #aeb7e2;
176
+ }
177
+ .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
178
+ background-color: #292b6a;
179
+ border-color: #aeb7e2;
180
+ }
181
+ .eds-contrast .eds-form-control-wrapper--dark:focus-within {
182
+ background-color: #292b6a;
183
+ border-color: #aeb7e2;
184
+ }
185
+ .eds-contrast .eds-form-control-wrapper--dark * {
186
+ background-color: transparent;
187
+ color: inherit;
188
+ }
189
+ .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
190
+ background-color: #292b6a;
191
+ color: #8285a8;
192
+ }
193
+
194
+ .eds-form-control {
195
+ -webkit-appearance: none;
196
+ -moz-appearance: none;
197
+ appearance: none;
198
+ background-color: transparent;
199
+ border: 0;
200
+ color: inherit;
201
+ display: block;
202
+ font-family: inherit;
203
+ line-height: 1rem;
204
+ font-size: 1rem;
205
+ padding: 20px 1rem 0.25rem;
206
+ width: 100%;
207
+ }
208
+ .eds-form-control::-moz-placeholder {
209
+ opacity: 0;
210
+ -moz-transition: opacity 0.2s ease-in-out;
211
+ transition: opacity 0.2s ease-in-out;
212
+ }
213
+ .eds-form-control::placeholder {
214
+ opacity: 0;
215
+ transition: opacity 0.2s ease-in-out;
216
+ }
217
+ .eds-form-control:focus {
218
+ outline: none;
219
+ }
220
+ .eds-form-control:focus::-moz-placeholder {
221
+ opacity: 1;
222
+ }
223
+ .eds-form-control:focus::placeholder {
224
+ opacity: 1;
225
+ }
226
+ .eds-form-control__prepend, .eds-form-control__append {
227
+ position: relative;
228
+ margin: 0 1rem;
229
+ line-height: inherit;
230
+ }
231
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
232
+ position: static;
233
+ }
234
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
235
+ top: 0.125rem;
236
+ }
237
+ .eds-form-control__prepend {
238
+ margin-right: 0;
239
+ }
240
+ .eds-form-control__append {
241
+ margin-left: 0;
242
+ }
243
+ .eds-fieldset {
244
+ margin: 0;
245
+ padding: 0;
246
+ border: 0;
247
+ }
248
+ /* DO NOT CHANGE!*/
249
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
250
  .eds-checkbox__container {
4
251
  display: flex;
5
252
  align-items: center;
@@ -160,11 +407,6 @@
160
407
  stroke-dashoffset: 0;
161
408
  }
162
409
  }
163
- .eds-fieldset {
164
- margin: 0;
165
- padding: 0;
166
- border: 0;
167
- }
168
410
  /* DO NOT CHANGE!*/
169
411
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
170
412
  .eds-feedback-text {
@@ -219,94 +461,6 @@
219
461
  }
220
462
  /* DO NOT CHANGE!*/
221
463
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
222
- .eds-form-component--radio__container {
223
- display: flex;
224
- justify-content: center;
225
- align-items: center;
226
- position: relative;
227
- cursor: pointer;
228
- height: 2rem;
229
- width: -moz-fit-content;
230
- width: fit-content;
231
- -webkit-user-select: none;
232
- -moz-user-select: none;
233
- user-select: none;
234
- }
235
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
236
- border-color: #54568c;
237
- }
238
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
239
- background-color: #54568c;
240
- }
241
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
242
- border-color: #8285a8;
243
- }
244
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
245
- background-color: #8285a8;
246
- }
247
- .eds-form-component--radio__container input {
248
- position: absolute;
249
- opacity: 0;
250
- cursor: pointer;
251
- height: 0;
252
- width: 0;
253
- }
254
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
255
- height: 0.625rem;
256
- width: 0.625rem;
257
- }
258
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
259
- outline: none;
260
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
261
- outline-offset: 0.125rem;
262
- }
263
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
264
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
265
- }
266
- .eds-form-component--radio__container .eds-form-component--radio__radio {
267
- position: relative;
268
- height: 1.25rem;
269
- width: 1.25rem;
270
- margin-right: 1rem;
271
- background-color: #ffffff;
272
- border: 0.125rem solid #181c56;
273
- border-radius: 50%;
274
- display: flex;
275
- align-items: center;
276
- justify-content: center;
277
- }
278
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
279
- background-color: #181c56;
280
- border-color: #aeb7e2;
281
- }
282
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
283
- background: #d1d3d3;
284
- border-color: #d1d3d3;
285
- cursor: not-allowed;
286
- }
287
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
288
- border-color: #d1d3d3;
289
- }
290
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
291
- background: #d1d3d3;
292
- border-color: #d1d3d3;
293
- }
294
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
295
- color: #656782;
296
- }
297
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
298
- display: block;
299
- width: 0;
300
- height: 0;
301
- border-radius: 50%;
302
- background-color: #181c56;
303
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
304
- }
305
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
306
- background-color: #aeb7e2;
307
- }
308
- /* DO NOT CHANGE!*/
309
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
310
464
  .eds-input-group {
311
465
  color: inherit;
312
466
  display: block;
@@ -438,245 +592,210 @@
438
592
  }
439
593
  /* DO NOT CHANGE!*/
440
594
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
441
- .eds-form-control-wrapper {
442
- --border-color: #7C7F9F;
443
- --border-color-hover: #aeb7e2;
444
- align-items: center;
445
- background-color: #ffffff;
446
- border-radius: 0.25rem;
447
- border: 0.125rem solid var(--border-color);
448
- box-shadow: 0 0 0 transparent;
449
- color: #181c56;
595
+ .eds-form-component--radio__container {
450
596
  display: flex;
597
+ justify-content: center;
598
+ align-items: center;
451
599
  position: relative;
452
- width: 100%;
453
- min-height: 3rem;
454
- transition: border-color 0.1s ease-in-out;
455
- --textarea-label-background: t.$colors-brand-white;
456
- /*
457
- Some input controls require a darker design while inside a contrast block.
458
- These elements require the `--dark` modifier, even on the wrapper.
459
- */
460
- }
461
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
462
- --border-color: #181c56;
463
- }
464
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
465
- --border-color: #181c56;
466
- }
467
- .eds-contrast .eds-form-control-wrapper:hover {
468
- --border-color: #aeb7e2;
469
- }
470
- .eds-form-control-wrapper[focus-within] {
471
- box-shadow: inset 0 0 0 1px var(--border-color);
472
- }
473
- .eds-form-control-wrapper:focus-within {
474
- box-shadow: inset 0 0 0 1px var(--border-color);
475
- }
476
- .eds-contrast .eds-form-control-wrapper[focus-within] {
477
- --border-color: #181c56;
478
- box-shadow: 0 0 0 0.125rem #aeb7e2;
479
- }
480
- .eds-contrast .eds-form-control-wrapper:focus-within {
481
- --border-color: #181c56;
482
- box-shadow: 0 0 0 0.125rem #aeb7e2;
483
- }
484
- .eds-form-control-wrapper ::-moz-placeholder {
485
- color: #656782;
486
- }
487
- .eds-form-control-wrapper ::placeholder {
488
- color: #656782;
489
- }
490
- .eds-form-control-wrapper--disabled {
491
- --border-color: transparent;
492
- background-color: #e9e9e9;
493
- pointer-events: none;
494
- color: #646464;
495
- }
496
- .eds-form-control-wrapper--disabled .eds-input-group__label {
497
- color: #646464;
498
- }
499
- .eds-contrast .eds-form-control-wrapper--disabled {
500
- background: #292b6a;
501
- color: #8285a8;
502
- }
503
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
504
- color: #8285a8;
505
- }
506
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
507
- display: none;
508
- }
509
- .eds-form-control-wrapper--readonly {
510
- --border-color: transparent;
511
- --textarea-label-background: t.$colors-greys-grey90;
512
- pointer-events: none;
513
- cursor: default;
514
- background: #f8f8f8;
515
- }
516
- .eds-contrast .eds-form-control-wrapper--readonly {
517
- --textarea-label-background: t.$colors-blues-blue10;
518
- background: #292b6a;
519
- color: #ffffff;
520
- }
521
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
522
- color: #aeb7e2;
600
+ cursor: pointer;
601
+ height: 2rem;
602
+ width: -moz-fit-content;
603
+ width: fit-content;
604
+ -webkit-user-select: none;
605
+ -moz-user-select: none;
606
+ user-select: none;
523
607
  }
524
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
525
- display: none;
608
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
609
+ border-color: #54568c;
526
610
  }
527
- .eds-form-control-wrapper--size-medium .eds-form-control,
528
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
529
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
530
- font-size: 1rem;
531
- line-height: 1rem;
611
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
612
+ background-color: #54568c;
532
613
  }
533
- .eds-form-control-wrapper--size-large {
534
- min-height: 4rem;
535
- padding: 0 0.5rem;
614
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
615
+ border-color: #8285a8;
536
616
  }
537
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
538
- border-width: 0.25rem;
617
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
618
+ background-color: #8285a8;
539
619
  }
540
- .eds-form-control-wrapper--size-large .eds-form-control,
541
- .eds-form-control-wrapper--size-large .eds-form-control__append,
542
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
543
- font-size: 1.5rem;
544
- line-height: 2.25rem;
620
+ .eds-form-component--radio__container input {
621
+ position: absolute;
622
+ opacity: 0;
623
+ cursor: pointer;
624
+ height: 0;
625
+ width: 0;
545
626
  }
546
- .eds-form-control-wrapper--success {
547
- border-color: #1a8e60;
548
- --border-color: #1a8e60;
627
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
628
+ height: 0.625rem;
629
+ width: 0.625rem;
549
630
  }
550
- .eds-form-control-wrapper--success:hover {
551
- border-color: #5ac39a;
631
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
632
+ outline: none;
633
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
634
+ outline-offset: 0.125rem;
552
635
  }
553
- .eds-form-control-wrapper--success[focus-within] {
554
- border-color: #1a8e60;
636
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
637
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
555
638
  }
556
- .eds-form-control-wrapper--success:focus-within {
557
- border-color: #1a8e60;
639
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
640
+ position: relative;
641
+ height: 1.25rem;
642
+ width: 1.25rem;
643
+ margin-right: 1rem;
644
+ background-color: #ffffff;
645
+ border: 0.125rem solid #181c56;
646
+ border-radius: 50%;
647
+ display: flex;
648
+ align-items: center;
649
+ justify-content: center;
558
650
  }
559
- .eds-contrast .eds-form-control-wrapper--success {
560
- border-color: #5ac39a;
561
- --border-color: #5ac39a;
651
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
652
+ background-color: #181c56;
653
+ border-color: #aeb7e2;
562
654
  }
563
- .eds-contrast .eds-form-control-wrapper--success:hover {
564
- border-color: #1a8e60;
655
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
656
+ background: #d1d3d3;
657
+ border-color: #d1d3d3;
658
+ cursor: not-allowed;
565
659
  }
566
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
567
- --border-color: #5ac39a;
568
- border-color: #181c56;
660
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
661
+ border-color: #d1d3d3;
569
662
  }
570
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
571
- --border-color: #5ac39a;
572
- border-color: #181c56;
663
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
664
+ background: #d1d3d3;
665
+ border-color: #d1d3d3;
573
666
  }
574
- .eds-form-control-wrapper--error {
575
- border-color: #d31b1b;
576
- --border-color: #d31b1b;
667
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
668
+ color: #656782;
577
669
  }
578
- .eds-form-control-wrapper--error:hover {
579
- border-color: #ff9494;
670
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
671
+ display: block;
672
+ width: 0;
673
+ height: 0;
674
+ border-radius: 50%;
675
+ background-color: #181c56;
676
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
580
677
  }
581
- .eds-form-control-wrapper--error[focus-within] {
582
- border-color: #d31b1b;
678
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
679
+ background-color: #aeb7e2;
583
680
  }
584
- .eds-form-control-wrapper--error:focus-within {
585
- border-color: #d31b1b;
681
+ /* DO NOT CHANGE!*/
682
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
683
+ .eds-switch {
684
+ cursor: pointer;
685
+ -webkit-user-select: none;
686
+ -moz-user-select: none;
687
+ user-select: none;
688
+ padding: 0.5rem 0;
689
+ width: -moz-fit-content;
690
+ width: fit-content;
586
691
  }
587
- .eds-contrast .eds-form-control-wrapper--error {
588
- border-color: #ff9494;
589
- --border-color: #ff9494;
692
+ .eds-switch input {
693
+ opacity: 0;
694
+ pointer-events: none;
695
+ position: absolute;
590
696
  }
591
- .eds-contrast .eds-form-control-wrapper--error:hover {
592
- border-color: #d31b1b;
697
+ .eds-switch--right {
698
+ display: flex;
699
+ flex-direction: row;
700
+ align-items: center;
593
701
  }
594
- .eds-contrast .eds-form-control-wrapper--error[focus-within] {
595
- border-color: #181c56;
596
- --border-color: #ff9494;
702
+ .eds-switch--bottom {
703
+ display: flex;
704
+ flex-direction: column;
705
+ align-items: center;
597
706
  }
598
- .eds-contrast .eds-form-control-wrapper--error:focus-within {
599
- border-color: #181c56;
600
- --border-color: #ff9494;
707
+ .eds-switch__circle {
708
+ border-radius: 50%;
709
+ height: 1.25rem;
710
+ width: 1.25rem;
711
+ content: "";
712
+ display: flex;
713
+ align-items: center;
714
+ justify-content: center;
715
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
716
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
717
+ background-color: #ffffff;
718
+ top: 0.125rem;
719
+ left: 0.125rem;
720
+ position: relative;
601
721
  }
602
- .eds-contrast .eds-form-control-wrapper--dark {
603
- background-color: #181c56;
604
- color: #ffffff;
722
+ .eds-switch__switch--large .eds-switch__circle {
723
+ height: 1.75rem;
724
+ width: 1.75rem;
605
725
  }
606
- .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
607
- color: #aeb7e2;
726
+ .eds-contrast .eds-switch__circle {
727
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
608
728
  }
609
- .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
610
- color: #aeb7e2;
729
+ .eds-switch__switch {
730
+ position: relative;
731
+ background-color: #949494;
732
+ content: "";
733
+ display: block;
734
+ transition: background-color 0.1s ease-in-out;
735
+ height: 1.5rem;
736
+ width: 3rem;
737
+ border-radius: 1.5rem;
738
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
611
739
  }
612
- .eds-contrast .eds-form-control-wrapper--dark:hover {
613
- border-color: #aeb7e2;
740
+ .eds-contrast .eds-switch__switch {
741
+ background-color: #8285a8;
614
742
  }
615
- .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
616
- background-color: #292b6a;
617
- border-color: #aeb7e2;
743
+ .eds-switch--right .eds-switch__switch {
744
+ margin-right: 0.75rem;
618
745
  }
619
- .eds-contrast .eds-form-control-wrapper--dark:focus-within {
620
- background-color: #292b6a;
621
- border-color: #aeb7e2;
746
+ .eds-switch__switch svg g,
747
+ .eds-switch__switch path {
748
+ fill: #646464;
749
+ transition: fill ease-in-out 0.1s;
622
750
  }
623
- .eds-contrast .eds-form-control-wrapper--dark * {
624
- background-color: transparent;
625
- color: inherit;
751
+ .eds-contrast .eds-switch__switch svg g,
752
+ .eds-contrast .eds-switch__switch path {
753
+ fill: #181c56;
626
754
  }
627
- .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
628
- background-color: #292b6a;
629
- color: #8285a8;
755
+ :checked + .eds-switch__switch {
756
+ background-color: var(--eds-switch-color);
630
757
  }
631
-
632
- .eds-form-control {
633
- -webkit-appearance: none;
634
- -moz-appearance: none;
635
- appearance: none;
636
- background-color: transparent;
637
- border: 0;
638
- color: inherit;
639
- display: block;
640
- font-family: inherit;
641
- line-height: 1rem;
642
- font-size: 1rem;
643
- padding: 20px 1rem 0.25rem;
644
- width: 100%;
758
+ :checked + .eds-switch__switch .eds-switch__circle {
759
+ left: 1.625rem;
645
760
  }
646
- .eds-form-control::-moz-placeholder {
647
- opacity: 0;
648
- -moz-transition: opacity 0.2s ease-in-out;
649
- transition: opacity 0.2s ease-in-out;
761
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
762
+ :checked + .eds-switch__switch .eds-switch__circle path {
763
+ fill: var(--eds-switch-color);
650
764
  }
651
- .eds-form-control::placeholder {
652
- opacity: 0;
653
- transition: opacity 0.2s ease-in-out;
765
+ .eds-contrast :checked + .eds-switch__switch {
766
+ background-color: var(--eds-switch-contrast-color);
654
767
  }
655
- .eds-form-control:focus {
768
+ :focus + .eds-switch__switch {
656
769
  outline: none;
770
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
771
+ outline-offset: 0.125rem;
657
772
  }
658
- .eds-form-control:focus::-moz-placeholder {
659
- opacity: 1;
773
+ .eds-contrast :focus + .eds-switch__switch {
774
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
660
775
  }
661
- .eds-form-control:focus::placeholder {
662
- opacity: 1;
776
+ .eds-switch__switch--large {
777
+ width: 3.75rem;
778
+ height: 2rem;
779
+ border-radius: 3.75rem;
663
780
  }
664
- .eds-form-control__prepend, .eds-form-control__append {
781
+ :checked + .eds-switch__switch--large .eds-switch__circle {
782
+ left: 1.875rem;
783
+ }
784
+ .eds-switch__switch--large svg {
665
785
  position: relative;
666
- margin: 0 1rem;
667
- line-height: inherit;
786
+ right: 0.05rem;
668
787
  }
669
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
670
- position: static;
788
+ .eds-switch__label--large--right {
789
+ font-size: 1rem;
671
790
  }
672
- .eds-form-control__prepend svg, .eds-form-control__append svg {
673
- top: 0.125rem;
791
+ .eds-switch__label--large--bottom {
792
+ font-size: 0.875rem;
674
793
  }
675
- .eds-form-control__prepend {
676
- margin-right: 0;
794
+ .eds-switch__label--medium--right {
795
+ font-size: 0.875rem;
677
796
  }
678
- .eds-form-control__append {
679
- margin-left: 0;
797
+ .eds-switch__label--medium--bottom {
798
+ font-size: 0.75rem;
680
799
  }
681
800
  /* DO NOT CHANGE!*/
682
801
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -845,125 +964,6 @@ input:disabled + .eds-input-panel__container {
845
964
  }
846
965
  /* DO NOT CHANGE!*/
847
966
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
848
- .eds-switch {
849
- cursor: pointer;
850
- -webkit-user-select: none;
851
- -moz-user-select: none;
852
- user-select: none;
853
- padding: 0.5rem 0;
854
- width: -moz-fit-content;
855
- width: fit-content;
856
- }
857
- .eds-switch input {
858
- opacity: 0;
859
- pointer-events: none;
860
- position: absolute;
861
- }
862
- .eds-switch--right {
863
- display: flex;
864
- flex-direction: row;
865
- align-items: center;
866
- }
867
- .eds-switch--bottom {
868
- display: flex;
869
- flex-direction: column;
870
- align-items: center;
871
- }
872
- .eds-switch__circle {
873
- border-radius: 50%;
874
- height: 1.25rem;
875
- width: 1.25rem;
876
- content: "";
877
- display: flex;
878
- align-items: center;
879
- justify-content: center;
880
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
881
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
882
- background-color: #ffffff;
883
- top: 0.125rem;
884
- left: 0.125rem;
885
- position: relative;
886
- }
887
- .eds-switch__switch--large .eds-switch__circle {
888
- height: 1.75rem;
889
- width: 1.75rem;
890
- }
891
- .eds-contrast .eds-switch__circle {
892
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
893
- }
894
- .eds-switch__switch {
895
- position: relative;
896
- background-color: #949494;
897
- content: "";
898
- display: block;
899
- transition: background-color 0.1s ease-in-out;
900
- height: 1.5rem;
901
- width: 3rem;
902
- border-radius: 1.5rem;
903
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
904
- }
905
- .eds-contrast .eds-switch__switch {
906
- background-color: #8285a8;
907
- }
908
- .eds-switch--right .eds-switch__switch {
909
- margin-right: 0.75rem;
910
- }
911
- .eds-switch__switch svg g,
912
- .eds-switch__switch path {
913
- fill: #646464;
914
- transition: fill ease-in-out 0.1s;
915
- }
916
- .eds-contrast .eds-switch__switch svg g,
917
- .eds-contrast .eds-switch__switch path {
918
- fill: #181c56;
919
- }
920
- :checked + .eds-switch__switch {
921
- background-color: var(--eds-switch-color);
922
- }
923
- :checked + .eds-switch__switch .eds-switch__circle {
924
- left: 1.625rem;
925
- }
926
- :checked + .eds-switch__switch .eds-switch__circle svg g,
927
- :checked + .eds-switch__switch .eds-switch__circle path {
928
- fill: var(--eds-switch-color);
929
- }
930
- .eds-contrast :checked + .eds-switch__switch {
931
- background-color: var(--eds-switch-contrast-color);
932
- }
933
- :focus + .eds-switch__switch {
934
- outline: none;
935
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
936
- outline-offset: 0.125rem;
937
- }
938
- .eds-contrast :focus + .eds-switch__switch {
939
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
940
- }
941
- .eds-switch__switch--large {
942
- width: 3.75rem;
943
- height: 2rem;
944
- border-radius: 3.75rem;
945
- }
946
- :checked + .eds-switch__switch--large .eds-switch__circle {
947
- left: 1.875rem;
948
- }
949
- .eds-switch__switch--large svg {
950
- position: relative;
951
- right: 0.05rem;
952
- }
953
- .eds-switch__label--large--right {
954
- font-size: 1rem;
955
- }
956
- .eds-switch__label--large--bottom {
957
- font-size: 0.875rem;
958
- }
959
- .eds-switch__label--medium--right {
960
- font-size: 0.875rem;
961
- }
962
- .eds-switch__label--medium--bottom {
963
- font-size: 0.75rem;
964
- }
965
- /* DO NOT CHANGE!*/
966
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
967
967
  textarea.eds-form-control.eds-textarea {
968
968
  min-height: 7.75rem;
969
969
  resize: vertical;
@@ -1008,6 +1008,17 @@ textarea.eds-form-control.eds-textarea {
1008
1008
  }
1009
1009
  /* DO NOT CHANGE!*/
1010
1010
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1011
+ .eds-segmented-control {
1012
+ margin-top: 0.25rem;
1013
+ display: flex;
1014
+ background: #d1d4e3;
1015
+ border-radius: 0.5rem;
1016
+ }
1017
+ .eds-contrast .eds-segmented-control {
1018
+ background: #393d79;
1019
+ }
1020
+ /* DO NOT CHANGE!*/
1021
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1011
1022
  .eds-segmented-choice {
1012
1023
  display: block;
1013
1024
  flex: 1 1 0px;
@@ -1077,17 +1088,6 @@ textarea.eds-form-control.eds-textarea {
1077
1088
  .eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1078
1089
  box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
1079
1090
  }
1080
- /* DO NOT CHANGE!*/
1081
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1082
- .eds-segmented-control {
1083
- margin-top: 0.25rem;
1084
- display: flex;
1085
- background: #d1d4e3;
1086
- border-radius: 0.5rem;
1087
- }
1088
- .eds-contrast .eds-segmented-control {
1089
- background: #393d79;
1090
- }
1091
1091
  :root {
1092
1092
  --eds-form: 1;
1093
1093
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.22",
3
+ "version": "7.0.23",
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.10.0",
30
+ "@entur/icons": "^6.11.0",
31
31
  "@entur/tokens": "^3.10.0",
32
- "@entur/tooltip": "^2.6.31",
33
- "@entur/typography": "^1.8.12",
32
+ "@entur/tooltip": "^2.6.32",
33
+ "@entur/typography": "^1.8.13",
34
34
  "@entur/utils": "^0.9.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "9e97f6db17e2ad5096603ba20d568601059ca53e"
37
+ "gitHead": "d1d2a7c625523120a8b4a7fca83794fd827104a4"
38
38
  }