@entur/form 8.1.3 → 8.1.5-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 +135 -135
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,8 +1,3 @@
1
- .eds-fieldset {
2
- margin: 0;
3
- padding: 0;
4
- border: 0;
5
- }
6
1
  /* DO NOT CHANGE!*/
7
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
8
3
  .eds-checkbox__container {
@@ -440,6 +435,11 @@
440
435
  margin-right: 0;
441
436
  margin-left: 0.75rem;
442
437
  }
438
+ .eds-fieldset {
439
+ margin: 0;
440
+ padding: 0;
441
+ border: 0;
442
+ }
443
443
  /* DO NOT CHANGE!*/
444
444
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
445
445
  .eds-input-group {
@@ -543,6 +543,125 @@
543
543
  }
544
544
  /* DO NOT CHANGE!*/
545
545
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
546
+ .eds-switch {
547
+ cursor: pointer;
548
+ -webkit-user-select: none;
549
+ -moz-user-select: none;
550
+ user-select: none;
551
+ padding: 0.5rem 0;
552
+ width: -moz-fit-content;
553
+ width: fit-content;
554
+ }
555
+ .eds-switch input {
556
+ opacity: 0;
557
+ pointer-events: none;
558
+ position: absolute;
559
+ }
560
+ .eds-switch--right {
561
+ display: flex;
562
+ flex-direction: row;
563
+ align-items: center;
564
+ }
565
+ .eds-switch--bottom {
566
+ display: flex;
567
+ flex-direction: column;
568
+ align-items: center;
569
+ }
570
+ .eds-switch__circle {
571
+ border-radius: 50%;
572
+ height: 1.25rem;
573
+ width: 1.25rem;
574
+ content: "";
575
+ display: flex;
576
+ align-items: center;
577
+ justify-content: center;
578
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
579
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
580
+ background-color: var(--components-form-switch-standard-switch);
581
+ top: 0.125rem;
582
+ left: 0.125rem;
583
+ position: relative;
584
+ }
585
+ .eds-switch__switch--large .eds-switch__circle {
586
+ height: 1.75rem;
587
+ width: 1.75rem;
588
+ }
589
+ .eds-contrast .eds-switch__circle {
590
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
591
+ }
592
+ .eds-switch__switch {
593
+ position: relative;
594
+ background-color: var(--components-form-switch-standard-fill-false);
595
+ content: "";
596
+ display: block;
597
+ transition: background-color 0.1s ease-in-out;
598
+ height: 1.5rem;
599
+ width: 3rem;
600
+ border-radius: 1.5rem;
601
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
602
+ }
603
+ .eds-contrast .eds-switch__switch {
604
+ background-color: var(--components-form-switch-contrast-fill-false);
605
+ }
606
+ .eds-switch--right .eds-switch__switch {
607
+ margin-right: 0.75rem;
608
+ }
609
+ .eds-switch__switch svg g,
610
+ .eds-switch__switch path {
611
+ fill: var(--components-form-switch-standard-icon-false);
612
+ transition: fill ease-in-out 0.1s;
613
+ }
614
+ .eds-contrast .eds-switch__switch svg g,
615
+ .eds-contrast .eds-switch__switch path {
616
+ fill: var(--components-form-switch-contrast-icon-false);
617
+ }
618
+ :checked + .eds-switch__switch {
619
+ background-color: var(--eds-switch-color);
620
+ }
621
+ :checked + .eds-switch__switch .eds-switch__circle {
622
+ left: 1.625rem;
623
+ }
624
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
625
+ :checked + .eds-switch__switch .eds-switch__circle path {
626
+ fill: var(--eds-switch-color);
627
+ }
628
+ .eds-contrast :checked + .eds-switch__switch {
629
+ background-color: var(--eds-switch-contrast-color);
630
+ }
631
+ :focus + .eds-switch__switch {
632
+ outline: 2px solid #181c56;
633
+ outline-color: var(--basecolors-stroke-focus-standard);
634
+ outline-offset: 0.125rem;
635
+ }
636
+ .eds-contrast :focus + .eds-switch__switch {
637
+ outline-color: var(--basecolors-stroke-focus-contrast);
638
+ }
639
+ .eds-switch__switch--large {
640
+ width: 3.75rem;
641
+ height: 2rem;
642
+ border-radius: 3.75rem;
643
+ }
644
+ :checked + .eds-switch__switch--large .eds-switch__circle {
645
+ left: 1.875rem;
646
+ }
647
+ .eds-switch__switch--large svg {
648
+ position: relative;
649
+ right: 0.05rem;
650
+ }
651
+ .eds-switch__label--large--right {
652
+ font-size: 1rem;
653
+ }
654
+ .eds-switch__label--large--bottom {
655
+ font-size: 0.875rem;
656
+ }
657
+ .eds-switch__label--medium--right {
658
+ font-size: 0.875rem;
659
+ }
660
+ .eds-switch__label--medium--bottom {
661
+ font-size: 0.75rem;
662
+ }
663
+ /* DO NOT CHANGE!*/
664
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
546
665
  .eds-form-component--radio__container {
547
666
  display: flex;
548
667
  justify-content: center;
@@ -781,125 +900,6 @@ input:disabled + .eds-input-panel__container {
781
900
  }
782
901
  /* DO NOT CHANGE!*/
783
902
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
784
- .eds-switch {
785
- cursor: pointer;
786
- -webkit-user-select: none;
787
- -moz-user-select: none;
788
- user-select: none;
789
- padding: 0.5rem 0;
790
- width: -moz-fit-content;
791
- width: fit-content;
792
- }
793
- .eds-switch input {
794
- opacity: 0;
795
- pointer-events: none;
796
- position: absolute;
797
- }
798
- .eds-switch--right {
799
- display: flex;
800
- flex-direction: row;
801
- align-items: center;
802
- }
803
- .eds-switch--bottom {
804
- display: flex;
805
- flex-direction: column;
806
- align-items: center;
807
- }
808
- .eds-switch__circle {
809
- border-radius: 50%;
810
- height: 1.25rem;
811
- width: 1.25rem;
812
- content: "";
813
- display: flex;
814
- align-items: center;
815
- justify-content: center;
816
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
817
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
818
- background-color: var(--components-form-switch-standard-switch);
819
- top: 0.125rem;
820
- left: 0.125rem;
821
- position: relative;
822
- }
823
- .eds-switch__switch--large .eds-switch__circle {
824
- height: 1.75rem;
825
- width: 1.75rem;
826
- }
827
- .eds-contrast .eds-switch__circle {
828
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
829
- }
830
- .eds-switch__switch {
831
- position: relative;
832
- background-color: var(--components-form-switch-standard-fill-false);
833
- content: "";
834
- display: block;
835
- transition: background-color 0.1s ease-in-out;
836
- height: 1.5rem;
837
- width: 3rem;
838
- border-radius: 1.5rem;
839
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
840
- }
841
- .eds-contrast .eds-switch__switch {
842
- background-color: var(--components-form-switch-contrast-fill-false);
843
- }
844
- .eds-switch--right .eds-switch__switch {
845
- margin-right: 0.75rem;
846
- }
847
- .eds-switch__switch svg g,
848
- .eds-switch__switch path {
849
- fill: var(--components-form-switch-standard-icon-false);
850
- transition: fill ease-in-out 0.1s;
851
- }
852
- .eds-contrast .eds-switch__switch svg g,
853
- .eds-contrast .eds-switch__switch path {
854
- fill: var(--components-form-switch-contrast-icon-false);
855
- }
856
- :checked + .eds-switch__switch {
857
- background-color: var(--eds-switch-color);
858
- }
859
- :checked + .eds-switch__switch .eds-switch__circle {
860
- left: 1.625rem;
861
- }
862
- :checked + .eds-switch__switch .eds-switch__circle svg g,
863
- :checked + .eds-switch__switch .eds-switch__circle path {
864
- fill: var(--eds-switch-color);
865
- }
866
- .eds-contrast :checked + .eds-switch__switch {
867
- background-color: var(--eds-switch-contrast-color);
868
- }
869
- :focus + .eds-switch__switch {
870
- outline: 2px solid #181c56;
871
- outline-color: var(--basecolors-stroke-focus-standard);
872
- outline-offset: 0.125rem;
873
- }
874
- .eds-contrast :focus + .eds-switch__switch {
875
- outline-color: var(--basecolors-stroke-focus-contrast);
876
- }
877
- .eds-switch__switch--large {
878
- width: 3.75rem;
879
- height: 2rem;
880
- border-radius: 3.75rem;
881
- }
882
- :checked + .eds-switch__switch--large .eds-switch__circle {
883
- left: 1.875rem;
884
- }
885
- .eds-switch__switch--large svg {
886
- position: relative;
887
- right: 0.05rem;
888
- }
889
- .eds-switch__label--large--right {
890
- font-size: 1rem;
891
- }
892
- .eds-switch__label--large--bottom {
893
- font-size: 0.875rem;
894
- }
895
- .eds-switch__label--medium--right {
896
- font-size: 0.875rem;
897
- }
898
- .eds-switch__label--medium--bottom {
899
- font-size: 0.75rem;
900
- }
901
- /* DO NOT CHANGE!*/
902
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
903
903
  /* DO NOT CHANGE!*/
904
904
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
905
905
  /* DO NOT CHANGE!*/
@@ -1104,17 +1104,6 @@ input:disabled + .eds-input-panel__container {
1104
1104
  }
1105
1105
  /* DO NOT CHANGE!*/
1106
1106
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1107
- .eds-segmented-control {
1108
- margin-top: 0.25rem;
1109
- display: flex;
1110
- background: var(--components-form-segmentedcontrol-standard-background);
1111
- border-radius: 0.5rem;
1112
- }
1113
- .eds-contrast .eds-segmented-control {
1114
- background: var(--components-form-segmentedcontrol-contrast-background);
1115
- }
1116
- /* DO NOT CHANGE!*/
1117
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1118
1107
  .eds-segmented-choice {
1119
1108
  display: block;
1120
1109
  flex: 1 1 0px;
@@ -1197,6 +1186,17 @@ input:disabled + .eds-input-panel__container {
1197
1186
  }
1198
1187
  /* DO NOT CHANGE!*/
1199
1188
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1189
+ .eds-segmented-control {
1190
+ margin-top: 0.25rem;
1191
+ display: flex;
1192
+ background: var(--components-form-segmentedcontrol-standard-background);
1193
+ border-radius: 0.5rem;
1194
+ }
1195
+ .eds-contrast .eds-segmented-control {
1196
+ background: var(--components-form-segmentedcontrol-contrast-background);
1197
+ }
1198
+ /* DO NOT CHANGE!*/
1199
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1200
1200
  /* DO NOT CHANGE!*/
1201
1201
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1202
1202
  /* DO NOT CHANGE!*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.1.3",
3
+ "version": "8.1.5-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": "^7.4.1",
31
- "@entur/tokens": "^3.17.1",
32
- "@entur/tooltip": "^5.0.0",
33
- "@entur/typography": "^1.8.46",
30
+ "@entur/icons": "^7.4.2-beta.0",
31
+ "@entur/tokens": "^3.17.2-beta.0",
32
+ "@entur/tooltip": "^5.1.1-beta.0",
33
+ "@entur/typography": "^1.8.47-beta.0",
34
34
  "@entur/utils": "^0.12.0",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "b038c9f7061c44765606ab8b7519c205ca633635"
37
+ "gitHead": "f6ea45ed1980eeed83c71cbb049cf726815dbb3d"
38
38
  }