@entur/form 8.2.2 → 8.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/styles.css +217 -196
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
This package contains all the common form-components
|
|
4
4
|
|
|
5
|
-
> 💡 Looking for the [documentation](https://
|
|
5
|
+
> 💡 Looking for the [documentation](https://linje.entur.no/komponenter/skjemaelementer/textfield)?
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
@@ -14,4 +14,4 @@ yarn add @entur/form
|
|
|
14
14
|
|
|
15
15
|
## Usage
|
|
16
16
|
|
|
17
|
-
Please refer to the [documentation](https://
|
|
17
|
+
Please refer to the [documentation](https://linje.entur.no/komponenter/skjemaelementer/textfield) for further usage information.
|
package/dist/styles.css
CHANGED
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
.eds-form-control__field-and-feedback-text--has-tooltip {
|
|
11
11
|
padding-right: 2rem;
|
|
12
12
|
}
|
|
13
|
+
.eds-form-control__field-and-feedback-text:has(.eds-form-control-wrapper--disabled) {
|
|
14
|
+
cursor: not-allowed;
|
|
15
|
+
}
|
|
13
16
|
.eds-form-control-wrapper {
|
|
14
17
|
display: flex;
|
|
15
18
|
align-items: center;
|
|
@@ -65,6 +68,14 @@
|
|
|
65
68
|
.eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
|
|
66
69
|
display: none;
|
|
67
70
|
}
|
|
71
|
+
.eds-form-control-wrapper--disabled:focus-within {
|
|
72
|
+
border-color: transparent;
|
|
73
|
+
outline: none;
|
|
74
|
+
}
|
|
75
|
+
.eds-contrast .eds-form-control-wrapper--disabled:focus-within {
|
|
76
|
+
border-color: transparent;
|
|
77
|
+
outline: none;
|
|
78
|
+
}
|
|
68
79
|
.eds-form-control-wrapper--readonly {
|
|
69
80
|
border-color: transparent;
|
|
70
81
|
pointer-events: none;
|
|
@@ -197,6 +208,84 @@
|
|
|
197
208
|
}
|
|
198
209
|
/* DO NOT CHANGE!*/
|
|
199
210
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
211
|
+
.eds-feedback-text {
|
|
212
|
+
display: flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
margin-top: 0.25rem;
|
|
215
|
+
}
|
|
216
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
217
|
+
padding-left: calc(1rem + 0.125rem);
|
|
218
|
+
}
|
|
219
|
+
.eds-feedback-text__text {
|
|
220
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
221
|
+
}
|
|
222
|
+
.eds-contrast .eds-feedback-text__text {
|
|
223
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.eds-feedback-text__icon {
|
|
227
|
+
font-size: 1.5rem;
|
|
228
|
+
min-height: 1.5rem;
|
|
229
|
+
min-width: 1.5rem;
|
|
230
|
+
padding-right: 0.5rem;
|
|
231
|
+
position: relative;
|
|
232
|
+
top: -0.1rem;
|
|
233
|
+
}
|
|
234
|
+
.eds-feedback-text__icon--success {
|
|
235
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
236
|
+
}
|
|
237
|
+
.eds-feedback-text__icon--success circle {
|
|
238
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
239
|
+
}
|
|
240
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
241
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
242
|
+
}
|
|
243
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
244
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
245
|
+
}
|
|
246
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
247
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
248
|
+
}
|
|
249
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
250
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
251
|
+
}
|
|
252
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
253
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
254
|
+
}
|
|
255
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
256
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
257
|
+
}
|
|
258
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
259
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
260
|
+
}
|
|
261
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
262
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
263
|
+
}
|
|
264
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
265
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
266
|
+
}
|
|
267
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
268
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
269
|
+
}
|
|
270
|
+
.eds-feedback-text__icon--warning {
|
|
271
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
272
|
+
}
|
|
273
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
274
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
275
|
+
}
|
|
276
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
277
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
278
|
+
}
|
|
279
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
280
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
281
|
+
}
|
|
282
|
+
.eds-fieldset {
|
|
283
|
+
margin: 0;
|
|
284
|
+
padding: 0;
|
|
285
|
+
border: 0;
|
|
286
|
+
}
|
|
287
|
+
/* DO NOT CHANGE!*/
|
|
288
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
200
289
|
.eds-checkbox__container {
|
|
201
290
|
display: flex;
|
|
202
291
|
align-items: center;
|
|
@@ -338,11 +427,6 @@
|
|
|
338
427
|
stroke-dashoffset: 0;
|
|
339
428
|
}
|
|
340
429
|
}
|
|
341
|
-
.eds-fieldset {
|
|
342
|
-
margin: 0;
|
|
343
|
-
padding: 0;
|
|
344
|
-
border: 0;
|
|
345
|
-
}
|
|
346
430
|
/* DO NOT CHANGE!*/
|
|
347
431
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
348
432
|
.eds-input-group {
|
|
@@ -425,78 +509,11 @@
|
|
|
425
509
|
line-height: 1rem;
|
|
426
510
|
padding: 0;
|
|
427
511
|
}
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
margin-top: 0.25rem;
|
|
434
|
-
}
|
|
435
|
-
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
436
|
-
padding-left: calc(1rem + 0.125rem);
|
|
437
|
-
}
|
|
438
|
-
.eds-feedback-text__text {
|
|
439
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
440
|
-
}
|
|
441
|
-
.eds-contrast .eds-feedback-text__text {
|
|
442
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
.eds-feedback-text__icon {
|
|
446
|
-
font-size: 1.5rem;
|
|
447
|
-
min-height: 1.5rem;
|
|
448
|
-
min-width: 1.5rem;
|
|
449
|
-
padding-right: 0.5rem;
|
|
450
|
-
position: relative;
|
|
451
|
-
top: -0.1rem;
|
|
452
|
-
}
|
|
453
|
-
.eds-feedback-text__icon--success {
|
|
454
|
-
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
455
|
-
}
|
|
456
|
-
.eds-feedback-text__icon--success circle {
|
|
457
|
-
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
458
|
-
}
|
|
459
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
460
|
-
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
461
|
-
}
|
|
462
|
-
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
463
|
-
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
464
|
-
}
|
|
465
|
-
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
466
|
-
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
467
|
-
}
|
|
468
|
-
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
469
|
-
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
470
|
-
}
|
|
471
|
-
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
472
|
-
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
473
|
-
}
|
|
474
|
-
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
475
|
-
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
476
|
-
}
|
|
477
|
-
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
478
|
-
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
479
|
-
}
|
|
480
|
-
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
481
|
-
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
482
|
-
}
|
|
483
|
-
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
484
|
-
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
485
|
-
}
|
|
486
|
-
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
487
|
-
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
488
|
-
}
|
|
489
|
-
.eds-feedback-text__icon--warning {
|
|
490
|
-
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
491
|
-
}
|
|
492
|
-
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
493
|
-
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
494
|
-
}
|
|
495
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
496
|
-
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
497
|
-
}
|
|
498
|
-
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
499
|
-
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
512
|
+
.eds-form-control-wrapper--disabled:focus-within .eds-input-group__label {
|
|
513
|
+
top: 1rem;
|
|
514
|
+
font-size: 1rem;
|
|
515
|
+
height: 3rem;
|
|
516
|
+
line-height: 1rem;
|
|
500
517
|
}
|
|
501
518
|
/* DO NOT CHANGE!*/
|
|
502
519
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -582,6 +599,125 @@
|
|
|
582
599
|
}
|
|
583
600
|
/* DO NOT CHANGE!*/
|
|
584
601
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
602
|
+
.eds-switch {
|
|
603
|
+
cursor: pointer;
|
|
604
|
+
-webkit-user-select: none;
|
|
605
|
+
-moz-user-select: none;
|
|
606
|
+
user-select: none;
|
|
607
|
+
padding: 0.5rem 0;
|
|
608
|
+
width: -moz-fit-content;
|
|
609
|
+
width: fit-content;
|
|
610
|
+
}
|
|
611
|
+
.eds-switch input {
|
|
612
|
+
opacity: 0;
|
|
613
|
+
pointer-events: none;
|
|
614
|
+
position: absolute;
|
|
615
|
+
}
|
|
616
|
+
.eds-switch--right {
|
|
617
|
+
display: flex;
|
|
618
|
+
flex-direction: row;
|
|
619
|
+
align-items: center;
|
|
620
|
+
}
|
|
621
|
+
.eds-switch--bottom {
|
|
622
|
+
display: flex;
|
|
623
|
+
flex-direction: column;
|
|
624
|
+
align-items: center;
|
|
625
|
+
}
|
|
626
|
+
.eds-switch__circle {
|
|
627
|
+
border-radius: 50%;
|
|
628
|
+
height: 1.25rem;
|
|
629
|
+
width: 1.25rem;
|
|
630
|
+
content: "";
|
|
631
|
+
display: flex;
|
|
632
|
+
align-items: center;
|
|
633
|
+
justify-content: center;
|
|
634
|
+
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
635
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
636
|
+
background-color: var(--components-form-switch-standard-switch);
|
|
637
|
+
top: 0.125rem;
|
|
638
|
+
left: 0.125rem;
|
|
639
|
+
position: relative;
|
|
640
|
+
}
|
|
641
|
+
.eds-switch__switch--large .eds-switch__circle {
|
|
642
|
+
height: 1.75rem;
|
|
643
|
+
width: 1.75rem;
|
|
644
|
+
}
|
|
645
|
+
.eds-contrast .eds-switch__circle {
|
|
646
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
647
|
+
}
|
|
648
|
+
.eds-switch__switch {
|
|
649
|
+
position: relative;
|
|
650
|
+
background-color: var(--components-form-switch-standard-fill-false);
|
|
651
|
+
content: "";
|
|
652
|
+
display: block;
|
|
653
|
+
transition: background-color 0.1s ease-in-out;
|
|
654
|
+
height: 1.5rem;
|
|
655
|
+
width: 3rem;
|
|
656
|
+
border-radius: 1.5rem;
|
|
657
|
+
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
658
|
+
}
|
|
659
|
+
.eds-contrast .eds-switch__switch {
|
|
660
|
+
background-color: var(--components-form-switch-contrast-fill-false);
|
|
661
|
+
}
|
|
662
|
+
.eds-switch--right .eds-switch__switch {
|
|
663
|
+
margin-right: 0.75rem;
|
|
664
|
+
}
|
|
665
|
+
.eds-switch__switch svg g,
|
|
666
|
+
.eds-switch__switch path {
|
|
667
|
+
fill: var(--components-form-switch-standard-icon-false);
|
|
668
|
+
transition: fill ease-in-out 0.1s;
|
|
669
|
+
}
|
|
670
|
+
.eds-contrast .eds-switch__switch svg g,
|
|
671
|
+
.eds-contrast .eds-switch__switch path {
|
|
672
|
+
fill: var(--components-form-switch-contrast-icon-false);
|
|
673
|
+
}
|
|
674
|
+
:checked + .eds-switch__switch {
|
|
675
|
+
background-color: var(--eds-switch-color);
|
|
676
|
+
}
|
|
677
|
+
:checked + .eds-switch__switch .eds-switch__circle {
|
|
678
|
+
left: 1.625rem;
|
|
679
|
+
}
|
|
680
|
+
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
681
|
+
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
682
|
+
fill: var(--eds-switch-color);
|
|
683
|
+
}
|
|
684
|
+
.eds-contrast :checked + .eds-switch__switch {
|
|
685
|
+
background-color: var(--eds-switch-contrast-color);
|
|
686
|
+
}
|
|
687
|
+
:focus-visible + .eds-switch__switch {
|
|
688
|
+
outline: 2px solid #181c56;
|
|
689
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
690
|
+
outline-offset: 0.125rem;
|
|
691
|
+
}
|
|
692
|
+
.eds-contrast :focus-visible + .eds-switch__switch {
|
|
693
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
694
|
+
}
|
|
695
|
+
.eds-switch__switch--large {
|
|
696
|
+
width: 3.75rem;
|
|
697
|
+
height: 2rem;
|
|
698
|
+
border-radius: 3.75rem;
|
|
699
|
+
}
|
|
700
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
701
|
+
left: 1.875rem;
|
|
702
|
+
}
|
|
703
|
+
.eds-switch__switch--large svg {
|
|
704
|
+
position: relative;
|
|
705
|
+
right: 0.05rem;
|
|
706
|
+
}
|
|
707
|
+
.eds-switch__label--large--right {
|
|
708
|
+
font-size: 1rem;
|
|
709
|
+
}
|
|
710
|
+
.eds-switch__label--large--bottom {
|
|
711
|
+
font-size: 0.875rem;
|
|
712
|
+
}
|
|
713
|
+
.eds-switch__label--medium--right {
|
|
714
|
+
font-size: 0.875rem;
|
|
715
|
+
}
|
|
716
|
+
.eds-switch__label--medium--bottom {
|
|
717
|
+
font-size: 0.75rem;
|
|
718
|
+
}
|
|
719
|
+
/* DO NOT CHANGE!*/
|
|
720
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
585
721
|
.eds-input-panel:has(:focus-visible) .eds-input-panel__container {
|
|
586
722
|
outline: 2px solid #181c56;
|
|
587
723
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
@@ -730,125 +866,6 @@ input:disabled + .eds-input-panel__container {
|
|
|
730
866
|
}
|
|
731
867
|
/* DO NOT CHANGE!*/
|
|
732
868
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
733
|
-
.eds-switch {
|
|
734
|
-
cursor: pointer;
|
|
735
|
-
-webkit-user-select: none;
|
|
736
|
-
-moz-user-select: none;
|
|
737
|
-
user-select: none;
|
|
738
|
-
padding: 0.5rem 0;
|
|
739
|
-
width: -moz-fit-content;
|
|
740
|
-
width: fit-content;
|
|
741
|
-
}
|
|
742
|
-
.eds-switch input {
|
|
743
|
-
opacity: 0;
|
|
744
|
-
pointer-events: none;
|
|
745
|
-
position: absolute;
|
|
746
|
-
}
|
|
747
|
-
.eds-switch--right {
|
|
748
|
-
display: flex;
|
|
749
|
-
flex-direction: row;
|
|
750
|
-
align-items: center;
|
|
751
|
-
}
|
|
752
|
-
.eds-switch--bottom {
|
|
753
|
-
display: flex;
|
|
754
|
-
flex-direction: column;
|
|
755
|
-
align-items: center;
|
|
756
|
-
}
|
|
757
|
-
.eds-switch__circle {
|
|
758
|
-
border-radius: 50%;
|
|
759
|
-
height: 1.25rem;
|
|
760
|
-
width: 1.25rem;
|
|
761
|
-
content: "";
|
|
762
|
-
display: flex;
|
|
763
|
-
align-items: center;
|
|
764
|
-
justify-content: center;
|
|
765
|
-
transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
766
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
767
|
-
background-color: var(--components-form-switch-standard-switch);
|
|
768
|
-
top: 0.125rem;
|
|
769
|
-
left: 0.125rem;
|
|
770
|
-
position: relative;
|
|
771
|
-
}
|
|
772
|
-
.eds-switch__switch--large .eds-switch__circle {
|
|
773
|
-
height: 1.75rem;
|
|
774
|
-
width: 1.75rem;
|
|
775
|
-
}
|
|
776
|
-
.eds-contrast .eds-switch__circle {
|
|
777
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
|
|
778
|
-
}
|
|
779
|
-
.eds-switch__switch {
|
|
780
|
-
position: relative;
|
|
781
|
-
background-color: var(--components-form-switch-standard-fill-false);
|
|
782
|
-
content: "";
|
|
783
|
-
display: block;
|
|
784
|
-
transition: background-color 0.1s ease-in-out;
|
|
785
|
-
height: 1.5rem;
|
|
786
|
-
width: 3rem;
|
|
787
|
-
border-radius: 1.5rem;
|
|
788
|
-
box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
789
|
-
}
|
|
790
|
-
.eds-contrast .eds-switch__switch {
|
|
791
|
-
background-color: var(--components-form-switch-contrast-fill-false);
|
|
792
|
-
}
|
|
793
|
-
.eds-switch--right .eds-switch__switch {
|
|
794
|
-
margin-right: 0.75rem;
|
|
795
|
-
}
|
|
796
|
-
.eds-switch__switch svg g,
|
|
797
|
-
.eds-switch__switch path {
|
|
798
|
-
fill: var(--components-form-switch-standard-icon-false);
|
|
799
|
-
transition: fill ease-in-out 0.1s;
|
|
800
|
-
}
|
|
801
|
-
.eds-contrast .eds-switch__switch svg g,
|
|
802
|
-
.eds-contrast .eds-switch__switch path {
|
|
803
|
-
fill: var(--components-form-switch-contrast-icon-false);
|
|
804
|
-
}
|
|
805
|
-
:checked + .eds-switch__switch {
|
|
806
|
-
background-color: var(--eds-switch-color);
|
|
807
|
-
}
|
|
808
|
-
:checked + .eds-switch__switch .eds-switch__circle {
|
|
809
|
-
left: 1.625rem;
|
|
810
|
-
}
|
|
811
|
-
:checked + .eds-switch__switch .eds-switch__circle svg g,
|
|
812
|
-
:checked + .eds-switch__switch .eds-switch__circle path {
|
|
813
|
-
fill: var(--eds-switch-color);
|
|
814
|
-
}
|
|
815
|
-
.eds-contrast :checked + .eds-switch__switch {
|
|
816
|
-
background-color: var(--eds-switch-contrast-color);
|
|
817
|
-
}
|
|
818
|
-
:focus-visible + .eds-switch__switch {
|
|
819
|
-
outline: 2px solid #181c56;
|
|
820
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
821
|
-
outline-offset: 0.125rem;
|
|
822
|
-
}
|
|
823
|
-
.eds-contrast :focus-visible + .eds-switch__switch {
|
|
824
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
825
|
-
}
|
|
826
|
-
.eds-switch__switch--large {
|
|
827
|
-
width: 3.75rem;
|
|
828
|
-
height: 2rem;
|
|
829
|
-
border-radius: 3.75rem;
|
|
830
|
-
}
|
|
831
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
832
|
-
left: 1.875rem;
|
|
833
|
-
}
|
|
834
|
-
.eds-switch__switch--large svg {
|
|
835
|
-
position: relative;
|
|
836
|
-
right: 0.05rem;
|
|
837
|
-
}
|
|
838
|
-
.eds-switch__label--large--right {
|
|
839
|
-
font-size: 1rem;
|
|
840
|
-
}
|
|
841
|
-
.eds-switch__label--large--bottom {
|
|
842
|
-
font-size: 0.875rem;
|
|
843
|
-
}
|
|
844
|
-
.eds-switch__label--medium--right {
|
|
845
|
-
font-size: 0.875rem;
|
|
846
|
-
}
|
|
847
|
-
.eds-switch__label--medium--bottom {
|
|
848
|
-
font-size: 0.75rem;
|
|
849
|
-
}
|
|
850
|
-
/* DO NOT CHANGE!*/
|
|
851
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
852
869
|
/* DO NOT CHANGE!*/
|
|
853
870
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
854
871
|
/* DO NOT CHANGE!*/
|
|
@@ -861,6 +878,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
861
878
|
:root {
|
|
862
879
|
--basecolors-frame-contrast: #181c56;
|
|
863
880
|
--basecolors-frame-contrastalt: #393d79;
|
|
881
|
+
--basecolors-frame-contrastalt-2: #292b6a;
|
|
864
882
|
--basecolors-frame-default: #ffffff;
|
|
865
883
|
--basecolors-frame-elevated: #ffffff;
|
|
866
884
|
--basecolors-frame-elevatedalt: #f6f6f9;
|
|
@@ -926,6 +944,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
926
944
|
[data-color-mode=dark] {
|
|
927
945
|
--basecolors-frame-contrast: #212233;
|
|
928
946
|
--basecolors-frame-contrastalt: #141527;
|
|
947
|
+
--basecolors-frame-contrastalt-2: #08091c;
|
|
929
948
|
--basecolors-frame-default: #08091c;
|
|
930
949
|
--basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
|
|
931
950
|
--basecolors-frame-elevatedalt: #464755;
|
|
@@ -1467,6 +1486,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
1467
1486
|
:root {
|
|
1468
1487
|
--basecolors-frame-contrast: #181c56;
|
|
1469
1488
|
--basecolors-frame-contrastalt: #393d79;
|
|
1489
|
+
--basecolors-frame-contrastalt-2: #292b6a;
|
|
1470
1490
|
--basecolors-frame-default: #ffffff;
|
|
1471
1491
|
--basecolors-frame-elevated: #ffffff;
|
|
1472
1492
|
--basecolors-frame-elevatedalt: #f6f6f9;
|
|
@@ -1532,6 +1552,7 @@ input:disabled + .eds-input-panel__container {
|
|
|
1532
1552
|
[data-color-mode=dark] {
|
|
1533
1553
|
--basecolors-frame-contrast: #212233;
|
|
1534
1554
|
--basecolors-frame-contrastalt: #141527;
|
|
1555
|
+
--basecolors-frame-contrastalt-2: #08091c;
|
|
1535
1556
|
--basecolors-frame-default: #08091c;
|
|
1536
1557
|
--basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
|
|
1537
1558
|
--basecolors-frame-elevatedalt: #464755;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.4",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/form.esm.js",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/button": "^3.3.
|
|
31
|
-
"@entur/icons": "^7.
|
|
32
|
-
"@entur/tokens": "^3.
|
|
33
|
-
"@entur/tooltip": "^5.2.
|
|
34
|
-
"@entur/typography": "^1.9.
|
|
35
|
-
"@entur/utils": "^0.12.
|
|
30
|
+
"@entur/button": "^3.3.4",
|
|
31
|
+
"@entur/icons": "^7.8.0",
|
|
32
|
+
"@entur/tokens": "^3.19.0",
|
|
33
|
+
"@entur/tooltip": "^5.2.4",
|
|
34
|
+
"@entur/typography": "^1.9.4",
|
|
35
|
+
"@entur/utils": "^0.12.3",
|
|
36
36
|
"classnames": "^2.3.1"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"dts-cli": "2.0.5"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "bfd8f62e4735cc13d55e50bc8747535d72aaf679"
|
|
42
42
|
}
|