@entur/form 7.1.10-beta.0 → 7.1.11-beta.0

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 +205 -205
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -226,6 +226,11 @@
226
226
  .eds-contrast .eds-feedback-text__icon--warning circle {
227
227
  fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
228
228
  }
229
+ .eds-fieldset {
230
+ margin: 0;
231
+ padding: 0;
232
+ border: 0;
233
+ }
229
234
  /* DO NOT CHANGE!*/
230
235
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
231
236
  .eds-form-control-wrapper {
@@ -413,207 +418,6 @@
413
418
  }
414
419
  /* DO NOT CHANGE!*/
415
420
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
416
- .eds-switch {
417
- cursor: pointer;
418
- -webkit-user-select: none;
419
- -moz-user-select: none;
420
- user-select: none;
421
- padding: 0.5rem 0;
422
- width: -moz-fit-content;
423
- width: fit-content;
424
- }
425
- .eds-switch input {
426
- opacity: 0;
427
- pointer-events: none;
428
- position: absolute;
429
- }
430
- .eds-switch--right {
431
- display: flex;
432
- flex-direction: row;
433
- align-items: center;
434
- }
435
- .eds-switch--bottom {
436
- display: flex;
437
- flex-direction: column;
438
- align-items: center;
439
- }
440
- .eds-switch__circle {
441
- border-radius: 50%;
442
- height: 1.25rem;
443
- width: 1.25rem;
444
- content: "";
445
- display: flex;
446
- align-items: center;
447
- justify-content: center;
448
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
449
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
450
- background-color: var(--components-form-switch-standard-switch);
451
- top: 0.125rem;
452
- left: 0.125rem;
453
- position: relative;
454
- }
455
- .eds-switch__switch--large .eds-switch__circle {
456
- height: 1.75rem;
457
- width: 1.75rem;
458
- }
459
- .eds-contrast .eds-switch__circle {
460
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
461
- }
462
- .eds-switch__switch {
463
- position: relative;
464
- background-color: var(--components-form-switch-standard-fill-false);
465
- content: "";
466
- display: block;
467
- transition: background-color 0.1s ease-in-out;
468
- height: 1.5rem;
469
- width: 3rem;
470
- border-radius: 1.5rem;
471
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
472
- }
473
- .eds-contrast .eds-switch__switch {
474
- background-color: var(--components-form-switch-contrast-fill-false);
475
- }
476
- .eds-switch--right .eds-switch__switch {
477
- margin-right: 0.75rem;
478
- }
479
- .eds-switch__switch svg g,
480
- .eds-switch__switch path {
481
- fill: var(--components-form-switch-standard-icon-false);
482
- transition: fill ease-in-out 0.1s;
483
- }
484
- .eds-contrast .eds-switch__switch svg g,
485
- .eds-contrast .eds-switch__switch path {
486
- fill: var(--components-form-switch-contrast-icon-false);
487
- }
488
- :checked + .eds-switch__switch {
489
- background-color: var(--eds-switch-color);
490
- }
491
- :checked + .eds-switch__switch .eds-switch__circle {
492
- left: 1.625rem;
493
- }
494
- :checked + .eds-switch__switch .eds-switch__circle svg g,
495
- :checked + .eds-switch__switch .eds-switch__circle path {
496
- fill: var(--eds-switch-color);
497
- }
498
- .eds-contrast :checked + .eds-switch__switch {
499
- background-color: var(--eds-switch-contrast-color);
500
- }
501
- :focus + .eds-switch__switch {
502
- outline: 2px solid #181c56;
503
- outline-color: var(--basecolors-stroke-focus-standard);
504
- outline-offset: 0.125rem;
505
- }
506
- .eds-contrast :focus + .eds-switch__switch {
507
- outline-color: var(--basecolors-stroke-focus-contrast);
508
- }
509
- .eds-switch__switch--large {
510
- width: 3.75rem;
511
- height: 2rem;
512
- border-radius: 3.75rem;
513
- }
514
- :checked + .eds-switch__switch--large .eds-switch__circle {
515
- left: 1.875rem;
516
- }
517
- .eds-switch__switch--large svg {
518
- position: relative;
519
- right: 0.05rem;
520
- }
521
- .eds-switch__label--large--right {
522
- font-size: 1rem;
523
- }
524
- .eds-switch__label--large--bottom {
525
- font-size: 0.875rem;
526
- }
527
- .eds-switch__label--medium--right {
528
- font-size: 0.875rem;
529
- }
530
- .eds-switch__label--medium--bottom {
531
- font-size: 0.75rem;
532
- }
533
- /* DO NOT CHANGE!*/
534
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
535
- .eds-form-component--radio__container {
536
- display: flex;
537
- justify-content: center;
538
- align-items: center;
539
- position: relative;
540
- cursor: pointer;
541
- height: 2rem;
542
- width: -moz-fit-content;
543
- width: fit-content;
544
- -webkit-user-select: none;
545
- -moz-user-select: none;
546
- user-select: none;
547
- }
548
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
549
- background-color: var(--components-form-radio-standard-fill-hover);
550
- }
551
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
552
- background-color: var(--components-form-radio-contrast-fill-hover);
553
- }
554
- .eds-form-component--radio__container input {
555
- position: absolute;
556
- opacity: 0;
557
- cursor: pointer;
558
- height: 0;
559
- width: 0;
560
- }
561
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
562
- height: 0.625rem;
563
- width: 0.625rem;
564
- }
565
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
566
- outline: 2px solid #181c56;
567
- outline-color: var(--basecolors-stroke-focus-standard);
568
- outline-offset: 0.125rem;
569
- }
570
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
571
- outline-color: var(--basecolors-stroke-focus-contrast);
572
- }
573
- .eds-form-component--radio__container .eds-form-component--radio__radio {
574
- position: relative;
575
- height: 1.25rem;
576
- width: 1.25rem;
577
- margin-right: 1rem;
578
- background-color: var(--components-form-radio-standard-fill-default);
579
- border: 0.125rem solid var(--components-form-radio-standard-border);
580
- border-radius: 50%;
581
- display: flex;
582
- align-items: center;
583
- justify-content: center;
584
- }
585
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
586
- background-color: var(--components-form-radio-contrast-fill-default);
587
- border-color: var(--components-form-radio-contrast-border);
588
- }
589
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
590
- background: var(--components-form-baseform-contrast-fill-disabled);
591
- border-color: var(--components-form-baseform-contrast-text-disabled);
592
- cursor: not-allowed;
593
- }
594
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
595
- border-color: var(--components-form-baseform-contrast-text-disabled);
596
- }
597
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
598
- background: var(--components-form-baseform-contrast-fill-disabled);
599
- border-color: var(--components-form-baseform-contrast-text-disabled);
600
- }
601
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
602
- color: var(--components-form-baseform-contrast-text-disabled);
603
- }
604
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
605
- display: block;
606
- width: 0;
607
- height: 0;
608
- border-radius: 50%;
609
- background-color: var(--components-form-radio-standard-fill-selected);
610
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
611
- }
612
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
613
- background-color: var(--components-form-radio-contrast-icon);
614
- }
615
- /* DO NOT CHANGE!*/
616
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
617
421
  .eds-input-group {
618
422
  color: inherit;
619
423
  display: block;
@@ -743,15 +547,211 @@
743
547
  }
744
548
  /* DO NOT CHANGE!*/
745
549
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
550
+ .eds-form-component--radio__container {
551
+ display: flex;
552
+ justify-content: center;
553
+ align-items: center;
554
+ position: relative;
555
+ cursor: pointer;
556
+ height: 2rem;
557
+ width: -moz-fit-content;
558
+ width: fit-content;
559
+ -webkit-user-select: none;
560
+ -moz-user-select: none;
561
+ user-select: none;
562
+ }
563
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
564
+ background-color: var(--components-form-radio-standard-fill-hover);
565
+ }
566
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
567
+ background-color: var(--components-form-radio-contrast-fill-hover);
568
+ }
569
+ .eds-form-component--radio__container input {
570
+ position: absolute;
571
+ opacity: 0;
572
+ cursor: pointer;
573
+ height: 0;
574
+ width: 0;
575
+ }
576
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
577
+ height: 0.625rem;
578
+ width: 0.625rem;
579
+ }
580
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
581
+ outline: 2px solid #181c56;
582
+ outline-color: var(--basecolors-stroke-focus-standard);
583
+ outline-offset: 0.125rem;
584
+ }
585
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
586
+ outline-color: var(--basecolors-stroke-focus-contrast);
587
+ }
588
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
589
+ position: relative;
590
+ height: 1.25rem;
591
+ width: 1.25rem;
592
+ margin-right: 1rem;
593
+ background-color: var(--components-form-radio-standard-fill-default);
594
+ border: 0.125rem solid var(--components-form-radio-standard-border);
595
+ border-radius: 50%;
596
+ display: flex;
597
+ align-items: center;
598
+ justify-content: center;
599
+ }
600
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
601
+ background-color: var(--components-form-radio-contrast-fill-default);
602
+ border-color: var(--components-form-radio-contrast-border);
603
+ }
604
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
605
+ background: var(--components-form-baseform-contrast-fill-disabled);
606
+ border-color: var(--components-form-baseform-contrast-text-disabled);
607
+ cursor: not-allowed;
608
+ }
609
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
610
+ border-color: var(--components-form-baseform-contrast-text-disabled);
611
+ }
612
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
613
+ background: var(--components-form-baseform-contrast-fill-disabled);
614
+ border-color: var(--components-form-baseform-contrast-text-disabled);
615
+ }
616
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
617
+ color: var(--components-form-baseform-contrast-text-disabled);
618
+ }
619
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
620
+ display: block;
621
+ width: 0;
622
+ height: 0;
623
+ border-radius: 50%;
624
+ background-color: var(--components-form-radio-standard-fill-selected);
625
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
626
+ }
627
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
628
+ background-color: var(--components-form-radio-contrast-icon);
629
+ }
630
+ /* DO NOT CHANGE!*/
631
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
746
632
  textarea.eds-form-control.eds-textarea {
747
633
  min-height: 7.75rem;
748
634
  resize: vertical;
749
635
  line-height: 1.5rem;
750
636
  }
751
- .eds-fieldset {
752
- margin: 0;
753
- padding: 0;
754
- border: 0;
637
+ /* DO NOT CHANGE!*/
638
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
639
+ .eds-switch {
640
+ cursor: pointer;
641
+ -webkit-user-select: none;
642
+ -moz-user-select: none;
643
+ user-select: none;
644
+ padding: 0.5rem 0;
645
+ width: -moz-fit-content;
646
+ width: fit-content;
647
+ }
648
+ .eds-switch input {
649
+ opacity: 0;
650
+ pointer-events: none;
651
+ position: absolute;
652
+ }
653
+ .eds-switch--right {
654
+ display: flex;
655
+ flex-direction: row;
656
+ align-items: center;
657
+ }
658
+ .eds-switch--bottom {
659
+ display: flex;
660
+ flex-direction: column;
661
+ align-items: center;
662
+ }
663
+ .eds-switch__circle {
664
+ border-radius: 50%;
665
+ height: 1.25rem;
666
+ width: 1.25rem;
667
+ content: "";
668
+ display: flex;
669
+ align-items: center;
670
+ justify-content: center;
671
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
672
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
673
+ background-color: var(--components-form-switch-standard-switch);
674
+ top: 0.125rem;
675
+ left: 0.125rem;
676
+ position: relative;
677
+ }
678
+ .eds-switch__switch--large .eds-switch__circle {
679
+ height: 1.75rem;
680
+ width: 1.75rem;
681
+ }
682
+ .eds-contrast .eds-switch__circle {
683
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
684
+ }
685
+ .eds-switch__switch {
686
+ position: relative;
687
+ background-color: var(--components-form-switch-standard-fill-false);
688
+ content: "";
689
+ display: block;
690
+ transition: background-color 0.1s ease-in-out;
691
+ height: 1.5rem;
692
+ width: 3rem;
693
+ border-radius: 1.5rem;
694
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
695
+ }
696
+ .eds-contrast .eds-switch__switch {
697
+ background-color: var(--components-form-switch-contrast-fill-false);
698
+ }
699
+ .eds-switch--right .eds-switch__switch {
700
+ margin-right: 0.75rem;
701
+ }
702
+ .eds-switch__switch svg g,
703
+ .eds-switch__switch path {
704
+ fill: var(--components-form-switch-standard-icon-false);
705
+ transition: fill ease-in-out 0.1s;
706
+ }
707
+ .eds-contrast .eds-switch__switch svg g,
708
+ .eds-contrast .eds-switch__switch path {
709
+ fill: var(--components-form-switch-contrast-icon-false);
710
+ }
711
+ :checked + .eds-switch__switch {
712
+ background-color: var(--eds-switch-color);
713
+ }
714
+ :checked + .eds-switch__switch .eds-switch__circle {
715
+ left: 1.625rem;
716
+ }
717
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
718
+ :checked + .eds-switch__switch .eds-switch__circle path {
719
+ fill: var(--eds-switch-color);
720
+ }
721
+ .eds-contrast :checked + .eds-switch__switch {
722
+ background-color: var(--eds-switch-contrast-color);
723
+ }
724
+ :focus + .eds-switch__switch {
725
+ outline: 2px solid #181c56;
726
+ outline-color: var(--basecolors-stroke-focus-standard);
727
+ outline-offset: 0.125rem;
728
+ }
729
+ .eds-contrast :focus + .eds-switch__switch {
730
+ outline-color: var(--basecolors-stroke-focus-contrast);
731
+ }
732
+ .eds-switch__switch--large {
733
+ width: 3.75rem;
734
+ height: 2rem;
735
+ border-radius: 3.75rem;
736
+ }
737
+ :checked + .eds-switch__switch--large .eds-switch__circle {
738
+ left: 1.875rem;
739
+ }
740
+ .eds-switch__switch--large svg {
741
+ position: relative;
742
+ right: 0.05rem;
743
+ }
744
+ .eds-switch__label--large--right {
745
+ font-size: 1rem;
746
+ }
747
+ .eds-switch__label--large--bottom {
748
+ font-size: 0.875rem;
749
+ }
750
+ .eds-switch__label--medium--right {
751
+ font-size: 0.875rem;
752
+ }
753
+ .eds-switch__label--medium--bottom {
754
+ font-size: 0.75rem;
755
755
  }
756
756
  /* DO NOT CHANGE!*/
757
757
  /* 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.1.10-beta.0",
3
+ "version": "7.1.11-beta.0",
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.17.1-beta.0",
31
- "@entur/tokens": "^3.15.0",
32
- "@entur/tooltip": "^2.7.9-beta.0",
33
- "@entur/typography": "^1.8.38-beta.0",
30
+ "@entur/icons": "^6.17.2-beta.0",
31
+ "@entur/tokens": "^3.15.1-beta.0",
32
+ "@entur/tooltip": "^2.7.10-beta.0",
33
+ "@entur/typography": "^1.8.39-beta.0",
34
34
  "@entur/utils": "^0.11.1",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "09c8ecf6671f83dbfae93ab10f77537888222f70"
37
+ "gitHead": "ea1ac384e3dcc4ad6a5949dbb85c5eb271d5e8a1"
38
38
  }