@entur/menu 4.2.34-beta.0 → 4.2.34

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 +224 -224
  2. package/package.json +9 -9
package/dist/styles.css CHANGED
@@ -54,62 +54,6 @@
54
54
  }
55
55
  /* DO NOT CHANGE!*/
56
56
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
57
- .eds-top-navigation-item {
58
- --show-active-line: 0;
59
- display: inline-block;
60
- cursor: pointer;
61
- color: var(--components-menu-navigationbar-standard-text-unselected);
62
- text-decoration: none;
63
- position: relative;
64
- padding: 1rem;
65
- min-width: 5rem;
66
- width: -moz-fit-content;
67
- width: fit-content;
68
- text-align: center;
69
- font-family: inherit;
70
- font-size: 1rem;
71
- font-weight: 600;
72
- }
73
- .eds-top-navigation-item::after {
74
- content: "";
75
- display: block;
76
- bottom: 1rem;
77
- height: 0.1875rem;
78
- width: 0;
79
- margin: 0 auto;
80
- opacity: var(--show-active-line);
81
- background: var(--components-menu-navigationbar-standard-stroke-selected);
82
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
83
- }
84
- .eds-contrast .eds-top-navigation-item {
85
- color: var(--components-menu-navigationbar-contrast-text-unselected);
86
- }
87
- .eds-top-navigation-item:focus {
88
- outline: 2px solid #181c56;
89
- outline-color: var(--basecolors-stroke-focus-standard);
90
- outline-offset: 0.125rem;
91
- }
92
- .eds-contrast .eds-top-navigation-item:focus {
93
- outline-color: var(--basecolors-stroke-focus-contrast);
94
- }
95
- .eds-top-navigation-item:hover {
96
- --show-active-line: 1;
97
- }
98
- .eds-top-navigation-item:hover::after {
99
- width: 2rem;
100
- }
101
- .eds-top-navigation-item--active {
102
- color: var(--components-menu-navigationbar-standard-text-selected);
103
- --show-active-line: 1;
104
- }
105
- .eds-top-navigation-item--active::after {
106
- width: 2rem;
107
- }
108
- .eds-contrast .eds-top-navigation-item--active {
109
- color: var(--components-menu-navigationbar-contrast-text-selected);
110
- }
111
- /* DO NOT CHANGE!*/
112
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
113
57
  .eds-side-navigation,
114
58
  .eds-side-navigation-group {
115
59
  color: var(--components-menu-sidenavigation-standard-text);
@@ -363,81 +307,59 @@
363
307
  }
364
308
  /* DO NOT CHANGE!*/
365
309
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
366
- .eds-overflow-menu__item {
367
- -webkit-appearance: none;
368
- -moz-appearance: none;
369
- appearance: none;
370
- border: none;
371
- font-size: 1rem;
372
- font-family: inherit;
373
- color: var(--components-menu-overflowmenu-text);
374
- background: var(--components-menu-overflowmenu-fill-default);
375
- display: block;
310
+ .eds-top-navigation-item {
311
+ --show-active-line: 0;
312
+ display: inline-block;
376
313
  cursor: pointer;
377
- width: 100%;
378
- line-height: 1.375rem;
379
- text-align: left;
380
- padding: 0.75rem;
381
- opacity: 1;
382
- }
383
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
384
- background: var(--components-menu-overflowmenu-fill-default);
385
- color: var(--components-menu-overflowmenu-text-disabled);
386
- }
387
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
388
- background: var(--components-menu-overflowmenu-fill-default);
389
- color: var(--components-menu-overflowmenu-text-disabled);
390
- }
391
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
392
- cursor: not-allowed;
393
- background: var(--components-menu-overflowmenu-fill-default);
394
- color: var(--components-menu-overflowmenu-text-disabled);
395
- }
396
- .eds-overflow-menu__item .eds-icon {
397
- margin-right: 0.75rem;
314
+ color: var(--components-menu-navigationbar-standard-text-unselected);
315
+ text-decoration: none;
316
+ position: relative;
317
+ padding: 1rem;
318
+ min-width: 5rem;
319
+ width: -moz-fit-content;
320
+ width: fit-content;
321
+ text-align: center;
322
+ font-family: inherit;
323
+ font-size: 1rem;
324
+ font-weight: 600;
398
325
  }
399
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
400
- background: var(--components-menu-overflowmenu-fill-hover);
326
+ .eds-top-navigation-item::after {
327
+ content: "";
328
+ display: block;
329
+ bottom: 1rem;
330
+ height: 0.1875rem;
331
+ width: 0;
332
+ margin: 0 auto;
333
+ opacity: var(--show-active-line);
334
+ background: var(--components-menu-navigationbar-standard-stroke-selected);
335
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
401
336
  }
402
- .eds-overflow-menu__item:focus {
403
- outline: none;
337
+ .eds-contrast .eds-top-navigation-item {
338
+ color: var(--components-menu-navigationbar-contrast-text-unselected);
404
339
  }
405
-
406
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
407
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
408
- overflow: hidden;
409
- border-radius: 0.25rem;
410
- border: 1px solid var(--components-menu-overflowmenu-border);
340
+ .eds-top-navigation-item:focus {
341
+ outline: 2px solid #181c56;
342
+ outline-color: var(--basecolors-stroke-focus-standard);
343
+ outline-offset: 0.125rem;
411
344
  }
412
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
413
- outline: none;
345
+ .eds-contrast .eds-top-navigation-item:focus {
346
+ outline-color: var(--basecolors-stroke-focus-contrast);
414
347
  }
415
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
416
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
348
+ .eds-top-navigation-item:hover {
349
+ --show-active-line: 1;
417
350
  }
418
-
419
- .eds-overflow-menu__menu-list[data-reach-menu-list],
420
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
421
- animation: slide-in 0.2s ease-in-out;
351
+ .eds-top-navigation-item:hover::after {
352
+ width: 2rem;
422
353
  }
423
-
424
- @keyframes slide-in {
425
- 0% {
426
- opacity: 0;
427
- transform: translateY(0.5rem);
428
- }
429
- 100% {
430
- opacity: 1;
431
- transform: translateY(0);
432
- }
354
+ .eds-top-navigation-item--active {
355
+ color: var(--components-menu-navigationbar-standard-text-selected);
356
+ --show-active-line: 1;
433
357
  }
434
- [data-reach-menu-popover] {
435
- position: absolute;
436
- z-index: 30;
358
+ .eds-top-navigation-item--active::after {
359
+ width: 2rem;
437
360
  }
438
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
439
- position: relative;
440
- right: calc(100% - 2rem);
361
+ .eds-contrast .eds-top-navigation-item--active {
362
+ color: var(--components-menu-navigationbar-contrast-text-selected);
441
363
  }
442
364
  /* DO NOT CHANGE!*/
443
365
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -647,128 +569,81 @@
647
569
  }
648
570
  /* DO NOT CHANGE!*/
649
571
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
650
- .eds-stepper {
651
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
652
- --line-color: var(--components-menu-stepper-standard-background);
653
- --label-font-weight: 500;
654
- --display-active-line: none;
655
- display: flex;
656
- flex-direction: row;
657
- width: 100%;
658
- list-style-type: none;
659
- }
660
- .eds-stepper__step {
661
- display: flex;
662
- flex-grow: 1;
663
- flex-basis: 0;
664
- flex-direction: column;
665
- align-items: inherit;
572
+ .eds-overflow-menu__item {
666
573
  -webkit-appearance: none;
667
574
  -moz-appearance: none;
668
575
  appearance: none;
669
- background: none;
670
576
  border: none;
577
+ font-size: 1rem;
671
578
  font-family: inherit;
672
- text-transform: none;
673
- }
674
- .eds-stepper__step__wrapper {
675
- flex-grow: 1;
676
- }
677
- .eds-stepper__step.focus-visible .eds-stepper__step__label {
678
- outline-offset: 0.125rem;
679
- outline: 2px solid #181c56;
680
- }
681
- .eds-stepper__step:focus-visible .eds-stepper__step__label {
682
- outline-offset: 0.125rem;
683
- outline: 2px solid #181c56;
684
- }
685
- .eds-contrast .eds-stepper__step.focus-visible .eds-stepper__step__label {
686
- outline: 2px solid #ffffff;
687
- }
688
- .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
689
- outline: 2px solid #ffffff;
690
- }
691
- .eds-contrast .eds-stepper__step {
692
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
693
- --line-color: var(--components-menu-stepper-contrast-background);
694
- }
695
- .eds-stepper__step--interactive {
696
- all: unset;
697
- display: flex;
698
- flex-direction: column;
699
- width: 100%;
579
+ color: var(--components-menu-overflowmenu-text);
580
+ background: var(--components-menu-overflowmenu-fill-default);
581
+ display: block;
700
582
  cursor: pointer;
583
+ width: 100%;
584
+ line-height: 1.375rem;
585
+ text-align: left;
586
+ padding: 0.75rem;
587
+ opacity: 1;
701
588
  }
702
- .eds-stepper__step--active {
703
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
704
- --label-font-weight: 600;
705
- --display-active-line: block;
589
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
590
+ background: var(--components-menu-overflowmenu-fill-default);
591
+ color: var(--components-menu-overflowmenu-text-disabled);
706
592
  }
707
- .eds-contrast .eds-stepper__step--active {
708
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
593
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
594
+ background: var(--components-menu-overflowmenu-fill-default);
595
+ color: var(--components-menu-overflowmenu-text-disabled);
709
596
  }
710
- .eds-stepper__step--completed {
711
- --text-color: var(--components-menu-stepper-standard-text-completed);
712
- --line-color: var(--components-menu-stepper-standard-progressbar);
597
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
598
+ cursor: not-allowed;
599
+ background: var(--components-menu-overflowmenu-fill-default);
600
+ color: var(--components-menu-overflowmenu-text-disabled);
713
601
  }
714
- .eds-contrast .eds-stepper__step--completed {
715
- --text-color: var(--components-menu-stepper-contrast-text-completed);
716
- --line-color: var(--components-menu-stepper-contrast-progressbar);
602
+ .eds-overflow-menu__item .eds-icon {
603
+ margin-right: 0.75rem;
717
604
  }
718
- .eds-stepper__step__label {
719
- flex-grow: 1;
720
- flex-direction: column;
721
- align-self: center;
722
- text-align: center;
723
- font-size: 0.875rem;
724
- margin: 0.5rem 0 0;
725
- padding: 0 0.5rem;
726
- width: -moz-fit-content;
727
- width: fit-content;
728
- border-radius: 0.0625rem;
729
- color: var(--text-color);
730
- font-weight: var(--label-font-weight);
605
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
606
+ background: var(--components-menu-overflowmenu-fill-hover);
731
607
  }
732
- .eds-stepper__step--interactive:hover .eds-stepper__step__label {
733
- background-color: var(--components-menu-stepper-standard-background);
734
- color: var(--components-menu-stepper-standard-text-completed);
608
+ .eds-overflow-menu__item:focus {
609
+ outline: none;
735
610
  }
736
- .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
737
- background-color: var(--components-menu-stepper-contrast-background);
738
- color: var(--components-menu-stepper-contrast-text-completed);
611
+
612
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
613
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
614
+ overflow: hidden;
615
+ border-radius: 0.25rem;
616
+ border: 1px solid var(--components-menu-overflowmenu-border);
739
617
  }
740
- .eds-stepper__step__line {
741
- height: 0.5rem;
742
- background: var(--line-color);
743
- position: relative;
618
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
619
+ outline: none;
744
620
  }
745
- .eds-stepper__step__line:before {
746
- display: var(--display-active-line);
747
- content: "";
748
- position: absolute;
749
- right: calc(50% - 0.2rem);
750
- bottom: 0.0625rem;
751
- border-radius: 0.0625rem;
752
- background: var(--components-menu-stepper-standard-progressbar);
753
- width: calc(0.5rem - 0.125rem - 0.01rem);
754
- height: calc(0.5rem - 0.125rem - 0.01rem);
755
- transform: rotate(45deg);
621
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
622
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
756
623
  }
757
- .eds-contrast .eds-stepper__step__line:before {
758
- background: var(--components-menu-stepper-contrast-progressbar);
624
+
625
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
626
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
627
+ animation: slide-in 0.2s ease-in-out;
759
628
  }
760
- .eds-stepper__step__line:after {
761
- display: var(--display-active-line);
762
- content: "";
629
+
630
+ @keyframes slide-in {
631
+ 0% {
632
+ opacity: 0;
633
+ transform: translateY(0.5rem);
634
+ }
635
+ 100% {
636
+ opacity: 1;
637
+ transform: translateY(0);
638
+ }
639
+ }
640
+ [data-reach-menu-popover] {
763
641
  position: absolute;
764
- left: 0;
765
- bottom: 0;
766
- width: 50%;
767
- height: 0.5rem;
768
- background: var(--components-menu-stepper-standard-progressbar);
642
+ z-index: 30;
769
643
  }
770
- .eds-contrast .eds-stepper__step__line:after {
771
- background: var(--components-menu-stepper-contrast-progressbar);
644
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
645
+ position: relative;
646
+ right: calc(100% - 2rem);
772
647
  }
773
648
  /* DO NOT CHANGE!*/
774
649
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1108,3 +983,128 @@
1108
983
  --eds-menu: 1;
1109
984
  --reach-menu-button: 1;
1110
985
  }
986
+ /* DO NOT CHANGE!*/
987
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
988
+ .eds-stepper {
989
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
990
+ --line-color: var(--components-menu-stepper-standard-background);
991
+ --label-font-weight: 500;
992
+ --display-active-line: none;
993
+ display: flex;
994
+ flex-direction: row;
995
+ width: 100%;
996
+ list-style-type: none;
997
+ }
998
+ .eds-stepper__step {
999
+ display: flex;
1000
+ flex-grow: 1;
1001
+ flex-basis: 0;
1002
+ flex-direction: column;
1003
+ align-items: inherit;
1004
+ -webkit-appearance: none;
1005
+ -moz-appearance: none;
1006
+ appearance: none;
1007
+ background: none;
1008
+ border: none;
1009
+ font-family: inherit;
1010
+ text-transform: none;
1011
+ }
1012
+ .eds-stepper__step__wrapper {
1013
+ flex-grow: 1;
1014
+ }
1015
+ .eds-stepper__step.focus-visible .eds-stepper__step__label {
1016
+ outline-offset: 0.125rem;
1017
+ outline: 2px solid #181c56;
1018
+ }
1019
+ .eds-stepper__step:focus-visible .eds-stepper__step__label {
1020
+ outline-offset: 0.125rem;
1021
+ outline: 2px solid #181c56;
1022
+ }
1023
+ .eds-contrast .eds-stepper__step.focus-visible .eds-stepper__step__label {
1024
+ outline: 2px solid #ffffff;
1025
+ }
1026
+ .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
1027
+ outline: 2px solid #ffffff;
1028
+ }
1029
+ .eds-contrast .eds-stepper__step {
1030
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
1031
+ --line-color: var(--components-menu-stepper-contrast-background);
1032
+ }
1033
+ .eds-stepper__step--interactive {
1034
+ all: unset;
1035
+ display: flex;
1036
+ flex-direction: column;
1037
+ width: 100%;
1038
+ cursor: pointer;
1039
+ }
1040
+ .eds-stepper__step--active {
1041
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
1042
+ --label-font-weight: 600;
1043
+ --display-active-line: block;
1044
+ }
1045
+ .eds-contrast .eds-stepper__step--active {
1046
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
1047
+ }
1048
+ .eds-stepper__step--completed {
1049
+ --text-color: var(--components-menu-stepper-standard-text-completed);
1050
+ --line-color: var(--components-menu-stepper-standard-progressbar);
1051
+ }
1052
+ .eds-contrast .eds-stepper__step--completed {
1053
+ --text-color: var(--components-menu-stepper-contrast-text-completed);
1054
+ --line-color: var(--components-menu-stepper-contrast-progressbar);
1055
+ }
1056
+ .eds-stepper__step__label {
1057
+ flex-grow: 1;
1058
+ flex-direction: column;
1059
+ align-self: center;
1060
+ text-align: center;
1061
+ font-size: 0.875rem;
1062
+ margin: 0.5rem 0 0;
1063
+ padding: 0 0.5rem;
1064
+ width: -moz-fit-content;
1065
+ width: fit-content;
1066
+ border-radius: 0.0625rem;
1067
+ color: var(--text-color);
1068
+ font-weight: var(--label-font-weight);
1069
+ }
1070
+ .eds-stepper__step--interactive:hover .eds-stepper__step__label {
1071
+ background-color: var(--components-menu-stepper-standard-background);
1072
+ color: var(--components-menu-stepper-standard-text-completed);
1073
+ }
1074
+ .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
1075
+ background-color: var(--components-menu-stepper-contrast-background);
1076
+ color: var(--components-menu-stepper-contrast-text-completed);
1077
+ }
1078
+ .eds-stepper__step__line {
1079
+ height: 0.5rem;
1080
+ background: var(--line-color);
1081
+ position: relative;
1082
+ }
1083
+ .eds-stepper__step__line:before {
1084
+ display: var(--display-active-line);
1085
+ content: "";
1086
+ position: absolute;
1087
+ right: calc(50% - 0.2rem);
1088
+ bottom: 0.0625rem;
1089
+ border-radius: 0.0625rem;
1090
+ background: var(--components-menu-stepper-standard-progressbar);
1091
+ width: calc(0.5rem - 0.125rem - 0.01rem);
1092
+ height: calc(0.5rem - 0.125rem - 0.01rem);
1093
+ transform: rotate(45deg);
1094
+ }
1095
+ .eds-contrast .eds-stepper__step__line:before {
1096
+ background: var(--components-menu-stepper-contrast-progressbar);
1097
+ }
1098
+ .eds-stepper__step__line:after {
1099
+ display: var(--display-active-line);
1100
+ content: "";
1101
+ position: absolute;
1102
+ left: 0;
1103
+ bottom: 0;
1104
+ width: 50%;
1105
+ height: 0.5rem;
1106
+ background: var(--components-menu-stepper-standard-progressbar);
1107
+ }
1108
+ .eds-contrast .eds-stepper__step__line:after {
1109
+ background: var(--components-menu-stepper-contrast-progressbar);
1110
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.2.34-beta.0",
3
+ "version": "4.2.34",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -27,17 +27,17 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.86-beta.0",
31
- "@entur/button": "^3.2.26-beta.0",
32
- "@entur/expand": "^3.5.15-beta.0",
33
- "@entur/icons": "^6.17.2-beta.0",
34
- "@entur/layout": "^2.3.10-beta.0",
35
- "@entur/tokens": "^3.15.1-beta.0",
36
- "@entur/typography": "^1.8.39-beta.0",
30
+ "@entur/a11y": "^0.2.86",
31
+ "@entur/button": "^3.2.26",
32
+ "@entur/expand": "^3.5.15",
33
+ "@entur/icons": "^6.18.0",
34
+ "@entur/layout": "^2.3.10",
35
+ "@entur/tokens": "^3.15.1",
36
+ "@entur/typography": "^1.8.39",
37
37
  "@entur/utils": "^0.11.1",
38
38
  "@reach/menu-button": "^0.16.1",
39
39
  "@reach/polymorphic": "0.18.0",
40
40
  "classnames": "^2.3.1"
41
41
  },
42
- "gitHead": "ea1ac384e3dcc4ad6a5949dbb85c5eb271d5e8a1"
42
+ "gitHead": "59263b656c7de882e8ecf50bdb49f7ddfd283026"
43
43
  }