@entur/form 7.0.31 → 7.0.33

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 CHANGED
@@ -240,63 +240,6 @@
240
240
  .eds-form-control__append {
241
241
  margin-left: 0;
242
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. */
250
- .eds-feedback-text {
251
- display: flex;
252
- align-items: center;
253
- margin-top: 0.25rem;
254
- }
255
- .eds-feedback-text--info {
256
- padding-left: calc(1rem + 0.125rem);
257
- }
258
- .eds-feedback-text__text {
259
- color: #181c56;
260
- }
261
- .eds-contrast .eds-feedback-text__text {
262
- color: #ffffff;
263
- }
264
-
265
- .eds-feedback-text__icon {
266
- font-size: 1.5rem;
267
- min-height: 1.5rem;
268
- min-width: 1.5rem;
269
- padding-right: 0.5rem;
270
- position: relative;
271
- top: -0.1rem;
272
- }
273
- .eds-feedback-text__icon--success {
274
- color: #1a8e60;
275
- }
276
- .eds-contrast .eds-feedback-text__icon--success {
277
- color: #5ac39a;
278
- }
279
- .eds-feedback-text__icon--error {
280
- color: #d31b1b;
281
- }
282
- .eds-contrast .eds-feedback-text__icon--error {
283
- color: #ff9494;
284
- }
285
- .eds-feedback-text__icon--info {
286
- color: #0082b9;
287
- }
288
- .eds-contrast .eds-feedback-text__icon--info {
289
- color: #64b3e7;
290
- }
291
- .eds-feedback-text__icon--warning {
292
- color: #ffca28;
293
- }
294
- .eds-feedback-text__icon--warning circle {
295
- fill: #181c56;
296
- }
297
- .eds-contrast .eds-feedback-text__icon--warning {
298
- color: #ffe082;
299
- }
300
243
  /* DO NOT CHANGE!*/
301
244
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
302
245
  .eds-checkbox__container {
@@ -461,168 +404,6 @@
461
404
  }
462
405
  /* DO NOT CHANGE!*/
463
406
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
464
- .eds-input-panel[focus-within] .eds-input-panel__container {
465
- border-color: #181c56;
466
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
467
- }
468
- .eds-input-panel:focus-within .eds-input-panel__container {
469
- border-color: #181c56;
470
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
471
- }
472
- .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
473
- border-color: #ffffff;
474
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
475
- }
476
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
477
- border-color: #ffffff;
478
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
479
- }
480
- .eds-input-panel > input {
481
- position: absolute;
482
- opacity: 0;
483
- cursor: pointer;
484
- height: 0;
485
- width: 0;
486
- }
487
- .eds-input-panel > input:checked + .eds-input-panel__container {
488
- border-color: #181c56;
489
- background: #f5f5f8;
490
- }
491
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
492
- border-color: #aeb7e2;
493
- background: #393d79;
494
- }
495
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
496
- width: 0.75rem;
497
- height: 0.75rem;
498
- }
499
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
500
- background-color: #ffffff;
501
- }
502
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
503
- background-color: #ebebf1;
504
- border: 0.125rem solid #babbcf;
505
- /* The following styling is needed to sync the inner checkbox/radiobutton's
506
- hover state styling with the inputPanel container */
507
- }
508
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
509
- background: #54568c;
510
- }
511
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
512
- background-color: #d1d4e3;
513
- border-color: #292b6a;
514
- }
515
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
516
- background-color: rgba(174, 183, 226, 0.2);
517
- border-color: #b6bee5;
518
- }
519
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
520
- background-color: #292b6a;
521
- }
522
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
523
- background-color: #ffffff;
524
- }
525
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
526
- background-color: #292b6a;
527
- border-color: transparent;
528
- }
529
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
530
- background-color: #b6bee5;
531
- }
532
- .eds-input-panel__container {
533
- background: #ffffff;
534
- border: 0.125rem solid #babbcf;
535
- border-radius: 0.25rem;
536
- display: flex;
537
- flex-direction: column;
538
- justify-content: flex-start;
539
- min-width: 20rem;
540
- position: relative;
541
- padding: 1rem;
542
- -webkit-user-select: none;
543
- -moz-user-select: none;
544
- user-select: none;
545
- width: -moz-fit-content;
546
- width: fit-content;
547
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
548
- }
549
- .eds-contrast .eds-input-panel__container {
550
- background-color: transparent;
551
- border-color: #aeb7e2;
552
- }
553
- .eds-input-panel__container:hover {
554
- background-color: #ebebf1;
555
- /* The following styling is needed to sync the inner checkbox/radiobutton's
556
- hover state styling with the inputPanel container */
557
- }
558
- .eds-contrast .eds-input-panel__container:hover {
559
- background-color: #54568c;
560
- }
561
- .eds-input-panel__container:hover .eds-checkbox__icon,
562
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
563
- border-color: #292b6a;
564
- background-color: #d1d4e3;
565
- }
566
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
567
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
568
- border-color: #b6bee5;
569
- background-color: rgba(174, 183, 226, 0.2);
570
- }
571
- input:disabled + .eds-input-panel__container {
572
- background: #f3f3f3;
573
- border-color: #f3f3f3;
574
- color: #656782;
575
- pointer-events: none;
576
- }
577
- .eds-contrast input:disabled + .eds-input-panel__container {
578
- background: #181c56;
579
- border-style: dashed;
580
- border-color: #54568c;
581
- color: #babbcf;
582
- }
583
- .eds-input-panel__container .eds-checkbox__icon,
584
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
585
- .eds-input-panel__container .eds-form-component--radio__radio {
586
- width: 1.5rem;
587
- height: 1.5rem;
588
- margin-right: 0;
589
- }
590
- .eds-input-panel--medium .eds-input-panel__title {
591
- font-size: 1rem;
592
- font-weight: 500;
593
- }
594
- .eds-input-panel--medium.eds-input-panel__container {
595
- padding-bottom: 1rem;
596
- min-height: 3.75rem;
597
- }
598
- .eds-input-panel--large.eds-input-panel__container {
599
- min-height: 6rem;
600
- }
601
- .eds-input-panel--large .eds-input-panel__title {
602
- font-size: 1.25rem;
603
- font-weight: 500;
604
- line-height: 1.875rem;
605
- }
606
- .eds-input-panel__title-wrapper {
607
- display: flex;
608
- justify-content: space-between;
609
- align-items: center;
610
- }
611
- .eds-input-panel__secondary-label-and-icon-wrapper {
612
- display: flex;
613
- justify-content: center;
614
- align-items: center;
615
- gap: 0.75rem;
616
- }
617
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
618
- margin: 0;
619
- }
620
- .eds-input-panel__additional-content {
621
- margin-top: 0.25rem;
622
- word-wrap: break-word;
623
- }
624
- /* DO NOT CHANGE!*/
625
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
626
407
  .eds-input-group {
627
408
  color: inherit;
628
409
  display: block;
@@ -754,37 +535,177 @@ input:disabled + .eds-input-panel__container {
754
535
  }
755
536
  /* DO NOT CHANGE!*/
756
537
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
757
- .eds-switch {
538
+ .eds-form-component--radio__container {
539
+ display: flex;
540
+ justify-content: center;
541
+ align-items: center;
542
+ position: relative;
758
543
  cursor: pointer;
544
+ height: 2rem;
545
+ width: -moz-fit-content;
546
+ width: fit-content;
759
547
  -webkit-user-select: none;
760
548
  -moz-user-select: none;
761
549
  user-select: none;
762
- padding: 0.5rem 0;
763
- width: -moz-fit-content;
764
- width: fit-content;
765
550
  }
766
- .eds-switch input {
767
- opacity: 0;
768
- pointer-events: none;
769
- position: absolute;
551
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
552
+ border-color: #54568c;
770
553
  }
771
- .eds-switch--right {
772
- display: flex;
773
- flex-direction: row;
774
- align-items: center;
554
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
555
+ background-color: #54568c;
775
556
  }
776
- .eds-switch--bottom {
777
- display: flex;
778
- flex-direction: column;
779
- align-items: center;
557
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
558
+ border-color: #8285a8;
780
559
  }
781
- .eds-switch__circle {
782
- border-radius: 50%;
783
- height: 1.25rem;
784
- width: 1.25rem;
785
- content: "";
786
- display: flex;
787
- align-items: center;
560
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
561
+ background-color: #8285a8;
562
+ }
563
+ .eds-form-component--radio__container input {
564
+ position: absolute;
565
+ opacity: 0;
566
+ cursor: pointer;
567
+ height: 0;
568
+ width: 0;
569
+ }
570
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
571
+ height: 0.625rem;
572
+ width: 0.625rem;
573
+ }
574
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
575
+ outline: none;
576
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
577
+ outline-offset: 0.125rem;
578
+ }
579
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
580
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
581
+ }
582
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
583
+ position: relative;
584
+ height: 1.25rem;
585
+ width: 1.25rem;
586
+ margin-right: 1rem;
587
+ background-color: #ffffff;
588
+ border: 0.125rem solid #181c56;
589
+ border-radius: 50%;
590
+ display: flex;
591
+ align-items: center;
592
+ justify-content: center;
593
+ }
594
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
595
+ background-color: #181c56;
596
+ border-color: #aeb7e2;
597
+ }
598
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
599
+ background: #d1d3d3;
600
+ border-color: #d1d3d3;
601
+ cursor: not-allowed;
602
+ }
603
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
604
+ border-color: #d1d3d3;
605
+ }
606
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
607
+ background: #d1d3d3;
608
+ border-color: #d1d3d3;
609
+ }
610
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
611
+ color: #656782;
612
+ }
613
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
614
+ display: block;
615
+ width: 0;
616
+ height: 0;
617
+ border-radius: 50%;
618
+ background-color: #181c56;
619
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
620
+ }
621
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
622
+ background-color: #aeb7e2;
623
+ }
624
+ /* DO NOT CHANGE!*/
625
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
626
+ .eds-feedback-text {
627
+ display: flex;
628
+ align-items: center;
629
+ margin-top: 0.25rem;
630
+ }
631
+ .eds-feedback-text--info {
632
+ padding-left: calc(1rem + 0.125rem);
633
+ }
634
+ .eds-feedback-text__text {
635
+ color: #181c56;
636
+ }
637
+ .eds-contrast .eds-feedback-text__text {
638
+ color: #ffffff;
639
+ }
640
+
641
+ .eds-feedback-text__icon {
642
+ font-size: 1.5rem;
643
+ min-height: 1.5rem;
644
+ min-width: 1.5rem;
645
+ padding-right: 0.5rem;
646
+ position: relative;
647
+ top: -0.1rem;
648
+ }
649
+ .eds-feedback-text__icon--success {
650
+ color: #1a8e60;
651
+ }
652
+ .eds-contrast .eds-feedback-text__icon--success {
653
+ color: #5ac39a;
654
+ }
655
+ .eds-feedback-text__icon--error {
656
+ color: #d31b1b;
657
+ }
658
+ .eds-contrast .eds-feedback-text__icon--error {
659
+ color: #ff9494;
660
+ }
661
+ .eds-feedback-text__icon--info {
662
+ color: #0082b9;
663
+ }
664
+ .eds-contrast .eds-feedback-text__icon--info {
665
+ color: #64b3e7;
666
+ }
667
+ .eds-feedback-text__icon--warning {
668
+ color: #ffca28;
669
+ }
670
+ .eds-feedback-text__icon--warning circle {
671
+ fill: #181c56;
672
+ }
673
+ .eds-contrast .eds-feedback-text__icon--warning {
674
+ color: #ffe082;
675
+ }
676
+ /* DO NOT CHANGE!*/
677
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
678
+ .eds-switch {
679
+ cursor: pointer;
680
+ -webkit-user-select: none;
681
+ -moz-user-select: none;
682
+ user-select: none;
683
+ padding: 0.5rem 0;
684
+ width: -moz-fit-content;
685
+ width: fit-content;
686
+ }
687
+ .eds-switch input {
688
+ opacity: 0;
689
+ pointer-events: none;
690
+ position: absolute;
691
+ }
692
+ .eds-switch--right {
693
+ display: flex;
694
+ flex-direction: row;
695
+ align-items: center;
696
+ }
697
+ .eds-switch--bottom {
698
+ display: flex;
699
+ flex-direction: column;
700
+ align-items: center;
701
+ }
702
+ .eds-switch__circle {
703
+ border-radius: 50%;
704
+ height: 1.25rem;
705
+ width: 1.25rem;
706
+ content: "";
707
+ display: flex;
708
+ align-items: center;
788
709
  justify-content: center;
789
710
  transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
790
711
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
@@ -871,93 +792,172 @@ input:disabled + .eds-input-panel__container {
871
792
  .eds-switch__label--medium--bottom {
872
793
  font-size: 0.75rem;
873
794
  }
795
+ .eds-fieldset {
796
+ margin: 0;
797
+ padding: 0;
798
+ border: 0;
799
+ }
874
800
  /* DO NOT CHANGE!*/
875
801
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
876
- .eds-form-component--radio__container {
877
- display: flex;
878
- justify-content: center;
879
- align-items: center;
880
- position: relative;
881
- cursor: pointer;
882
- height: 2rem;
883
- width: -moz-fit-content;
884
- width: fit-content;
885
- -webkit-user-select: none;
886
- -moz-user-select: none;
887
- user-select: none;
888
- }
889
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
890
- border-color: #54568c;
802
+ .eds-input-panel[focus-within] .eds-input-panel__container {
803
+ border-color: #181c56;
804
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
891
805
  }
892
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
893
- background-color: #54568c;
806
+ .eds-input-panel:focus-within .eds-input-panel__container {
807
+ border-color: #181c56;
808
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
894
809
  }
895
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
896
- border-color: #8285a8;
810
+ .eds-contrast .eds-input-panel[focus-within] .eds-input-panel__container {
811
+ border-color: #ffffff;
812
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
897
813
  }
898
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
899
- background-color: #8285a8;
814
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
815
+ border-color: #ffffff;
816
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
900
817
  }
901
- .eds-form-component--radio__container input {
818
+ .eds-input-panel > input {
902
819
  position: absolute;
903
820
  opacity: 0;
904
821
  cursor: pointer;
905
822
  height: 0;
906
823
  width: 0;
907
824
  }
908
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
909
- height: 0.625rem;
910
- width: 0.625rem;
825
+ .eds-input-panel > input:checked + .eds-input-panel__container {
826
+ border-color: #181c56;
827
+ background: #f5f5f8;
911
828
  }
912
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
913
- outline: none;
914
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
915
- outline-offset: 0.125rem;
829
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
830
+ border-color: #aeb7e2;
831
+ background: #393d79;
916
832
  }
917
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
918
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
833
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
834
+ width: 0.75rem;
835
+ height: 0.75rem;
919
836
  }
920
- .eds-form-component--radio__container .eds-form-component--radio__radio {
921
- position: relative;
922
- height: 1.25rem;
923
- width: 1.25rem;
924
- margin-right: 1rem;
837
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
925
838
  background-color: #ffffff;
926
- border: 0.125rem solid #181c56;
927
- border-radius: 50%;
839
+ }
840
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
841
+ background-color: #ebebf1;
842
+ border: 0.125rem solid #babbcf;
843
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
844
+ hover state styling with the inputPanel container */
845
+ }
846
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
847
+ background: #54568c;
848
+ }
849
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
850
+ background-color: #d1d4e3;
851
+ border-color: #292b6a;
852
+ }
853
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
854
+ background-color: rgba(174, 183, 226, 0.2);
855
+ border-color: #b6bee5;
856
+ }
857
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
858
+ background-color: #292b6a;
859
+ }
860
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio .eds-form-component--radio__circle {
861
+ background-color: #ffffff;
862
+ }
863
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
864
+ background-color: #292b6a;
865
+ border-color: transparent;
866
+ }
867
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
868
+ background-color: #b6bee5;
869
+ }
870
+ .eds-input-panel__container {
871
+ background: #ffffff;
872
+ border: 0.125rem solid #babbcf;
873
+ border-radius: 0.25rem;
928
874
  display: flex;
929
- align-items: center;
930
- justify-content: center;
875
+ flex-direction: column;
876
+ justify-content: flex-start;
877
+ min-width: 20rem;
878
+ position: relative;
879
+ padding: 1rem;
880
+ -webkit-user-select: none;
881
+ -moz-user-select: none;
882
+ user-select: none;
883
+ width: -moz-fit-content;
884
+ width: fit-content;
885
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
931
886
  }
932
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
933
- background-color: #181c56;
887
+ .eds-contrast .eds-input-panel__container {
888
+ background-color: transparent;
934
889
  border-color: #aeb7e2;
935
890
  }
936
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
937
- background: #d1d3d3;
938
- border-color: #d1d3d3;
939
- cursor: not-allowed;
891
+ .eds-input-panel__container:hover {
892
+ background-color: #ebebf1;
893
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
894
+ hover state styling with the inputPanel container */
940
895
  }
941
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
942
- border-color: #d1d3d3;
896
+ .eds-contrast .eds-input-panel__container:hover {
897
+ background-color: #54568c;
943
898
  }
944
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
945
- background: #d1d3d3;
946
- border-color: #d1d3d3;
899
+ .eds-input-panel__container:hover .eds-checkbox__icon,
900
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
901
+ border-color: #292b6a;
902
+ background-color: #d1d4e3;
947
903
  }
948
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
904
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
905
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
906
+ border-color: #b6bee5;
907
+ background-color: rgba(174, 183, 226, 0.2);
908
+ }
909
+ input:disabled + .eds-input-panel__container {
910
+ background: #f3f3f3;
911
+ border-color: #f3f3f3;
949
912
  color: #656782;
913
+ pointer-events: none;
950
914
  }
951
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
952
- display: block;
953
- width: 0;
954
- height: 0;
955
- border-radius: 50%;
956
- background-color: #181c56;
957
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
915
+ .eds-contrast input:disabled + .eds-input-panel__container {
916
+ background: #181c56;
917
+ border-style: dashed;
918
+ border-color: #54568c;
919
+ color: #babbcf;
958
920
  }
959
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
960
- background-color: #aeb7e2;
921
+ .eds-input-panel__container .eds-checkbox__icon,
922
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
923
+ .eds-input-panel__container .eds-form-component--radio__radio {
924
+ width: 1.5rem;
925
+ height: 1.5rem;
926
+ margin-right: 0;
927
+ }
928
+ .eds-input-panel--medium .eds-input-panel__title {
929
+ font-size: 1rem;
930
+ font-weight: 500;
931
+ }
932
+ .eds-input-panel--medium.eds-input-panel__container {
933
+ padding-bottom: 1rem;
934
+ min-height: 3.75rem;
935
+ }
936
+ .eds-input-panel--large.eds-input-panel__container {
937
+ min-height: 6rem;
938
+ }
939
+ .eds-input-panel--large .eds-input-panel__title {
940
+ font-size: 1.25rem;
941
+ font-weight: 500;
942
+ line-height: 1.875rem;
943
+ }
944
+ .eds-input-panel__title-wrapper {
945
+ display: flex;
946
+ justify-content: space-between;
947
+ align-items: center;
948
+ }
949
+ .eds-input-panel__secondary-label-and-icon-wrapper {
950
+ display: flex;
951
+ justify-content: center;
952
+ align-items: center;
953
+ gap: 0.75rem;
954
+ }
955
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
956
+ margin: 0;
957
+ }
958
+ .eds-input-panel__additional-content {
959
+ margin-top: 0.25rem;
960
+ word-wrap: break-word;
961
961
  }
962
962
  /* DO NOT CHANGE!*/
963
963
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.31",
3
+ "version": "7.0.33",
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.13.1",
31
- "@entur/tokens": "^3.11.2",
32
- "@entur/tooltip": "^2.6.40",
33
- "@entur/typography": "^1.8.19",
30
+ "@entur/icons": "^6.13.2",
31
+ "@entur/tokens": "^3.12.0",
32
+ "@entur/tooltip": "^2.6.42",
33
+ "@entur/typography": "^1.8.20",
34
34
  "@entur/utils": "^0.9.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "c3e894aeae7247bdaf3ec8636fade3301e605c0e"
37
+ "gitHead": "05cb986bc4373b1fe20d51c298c4395dd2500843"
38
38
  }