@entur/menu 4.1.29-beta.0 → 4.1.29

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 +170 -171
  2. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -3,51 +3,53 @@
3
3
  --reach-menu-button: 1;
4
4
  }/* DO NOT CHANGE!*/
5
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-breadcrumb {
7
- list-style: none;
8
- margin: 0;
9
- padding: 0;
10
- }
11
-
12
- .eds-breadcrumb__item {
6
+ .eds-top-navigation-item {
7
+ --show-active-line: 0;
13
8
  display: inline-block;
14
- }
15
-
16
- .eds-breadcrumb__separator {
17
- margin: 0 0.25rem 0 0.25rem;
18
- }
19
-
20
- .eds-breadcrumb__link {
21
- text-decoration: none;
9
+ cursor: pointer;
22
10
  color: inherit;
23
- background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
24
- background-repeat: no-repeat;
25
- background-size: 100% 0.125rem;
26
- background-position: 0 100%;
27
- }
28
- .eds-contrast .eds-breadcrumb__link {
29
- background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
11
+ text-decoration: none;
12
+ position: relative;
13
+ padding: 1rem;
14
+ min-width: 5rem;
15
+ width: -moz-fit-content;
16
+ width: fit-content;
17
+ text-align: center;
18
+ font-family: inherit;
19
+ font-size: 1rem;
20
+ font-weight: 600;
30
21
  }
31
- .eds-breadcrumb__link:hover {
32
- animation: eds-breadcrumb-underline 0.3s ease-in;
22
+ .eds-top-navigation-item::after {
23
+ content: "";
24
+ display: block;
25
+ bottom: 1rem;
26
+ height: 0.1875rem;
27
+ width: 0;
28
+ margin: 0 auto;
29
+ opacity: var(--show-active-line);
30
+ background: #ff5959;
31
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
33
32
  }
34
- .eds-breadcrumb__link:focus {
33
+ .eds-top-navigation-item:focus {
34
+ outline-offset: 0.125rem;
35
35
  outline: none;
36
36
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
37
- outline-offset: 0.125rem;
38
37
  }
39
- @keyframes eds-breadcrumb-underline {
40
- from {
41
- background-size: 0% 0.125rem;
42
- }
43
- to {
44
- background-size: 100% 0.125rem;
45
- }
38
+ .eds-contrast .eds-top-navigation-item:focus {
39
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
46
40
  }
47
- .eds-breadcrumb__link--current {
48
- font-weight: 600;
49
- }@charset "UTF-8";
50
- /* DO NOT CHANGE!*/
41
+ .eds-top-navigation-item:hover {
42
+ --show-active-line: 1;
43
+ }
44
+ .eds-top-navigation-item:hover::after {
45
+ width: 2rem;
46
+ }
47
+ .eds-top-navigation-item--active {
48
+ --show-active-line: 1;
49
+ }
50
+ .eds-top-navigation-item--active::after {
51
+ width: 2rem;
52
+ }/* DO NOT CHANGE!*/
51
53
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
52
54
  /* DO NOT CHANGE!*/
53
55
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -137,7 +139,7 @@
137
139
  .eds-side-navigation .eds-side-navigation {
138
140
  background-color: #f3f3f3;
139
141
  }
140
- .eds-contrast .eds-side-navigation .eds-side-navigation  {
142
+ .eds-contrast .eds-side-navigation .eds-side-navigation {
141
143
  background-color: #292b6a;
142
144
  }
143
145
  .eds-side-navigation--collapsed {
@@ -427,139 +429,6 @@
427
429
  margin: 0;
428
430
  }/* DO NOT CHANGE!*/
429
431
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
430
- .eds-top-navigation-item {
431
- --show-active-line: 0;
432
- display: inline-block;
433
- cursor: pointer;
434
- color: inherit;
435
- text-decoration: none;
436
- position: relative;
437
- padding: 1rem;
438
- min-width: 5rem;
439
- width: -moz-fit-content;
440
- width: fit-content;
441
- text-align: center;
442
- font-family: inherit;
443
- font-size: 1rem;
444
- font-weight: 600;
445
- }
446
- .eds-top-navigation-item::after {
447
- content: "";
448
- display: block;
449
- bottom: 1rem;
450
- height: 0.1875rem;
451
- width: 0;
452
- margin: 0 auto;
453
- opacity: var(--show-active-line);
454
- background: #ff5959;
455
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
456
- }
457
- .eds-top-navigation-item:focus {
458
- outline-offset: 0.125rem;
459
- outline: none;
460
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
461
- }
462
- .eds-contrast .eds-top-navigation-item:focus {
463
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
464
- }
465
- .eds-top-navigation-item:hover {
466
- --show-active-line: 1;
467
- }
468
- .eds-top-navigation-item:hover::after {
469
- width: 2rem;
470
- }
471
- .eds-top-navigation-item--active {
472
- --show-active-line: 1;
473
- }
474
- .eds-top-navigation-item--active::after {
475
- width: 2rem;
476
- }/* DO NOT CHANGE!*/
477
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
478
- .eds-overflow-menu__item {
479
- -webkit-appearance: none;
480
- -moz-appearance: none;
481
- appearance: none;
482
- border: none;
483
- font-size: 0.875rem;
484
- font-family: inherit;
485
- color: var(--primary-text-color);
486
- background: #f8f8f8;
487
- display: block;
488
- height: 3rem;
489
- cursor: pointer;
490
- width: 100%;
491
- line-height: 1.375rem;
492
- text-align: left;
493
- padding: 0.75rem 1rem;
494
- opacity: 1;
495
- }
496
- .eds-contrast .eds-overflow-menu__item {
497
- color: #181c56;
498
- }
499
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
500
- background: #e9e9e9;
501
- color: #949494;
502
- }
503
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
504
- background: #e9e9e9;
505
- color: #949494;
506
- }
507
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
508
- cursor: not-allowed;
509
- background: #e9e9e9;
510
- color: #949494;
511
- }
512
- .eds-overflow-menu__item .eds-icon {
513
- margin-right: 0.75rem;
514
- }
515
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
516
- background: #d1d4e3;
517
- }
518
- .eds-overflow-menu__item:focus {
519
- outline: none;
520
- }
521
-
522
- .eds-overflow-menu__item + .eds-overflow-menu__item {
523
- border-top: 0.0625rem solid #e9e9e9;
524
- }
525
-
526
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
527
- border: 0.0625rem solid #e9e9e9;
528
- border-radius: 0.25rem;
529
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
530
- overflow: hidden;
531
- }
532
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
533
- outline: none;
534
- }
535
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
536
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
537
- }
538
-
539
- .eds-overflow-menu__menu-list[data-reach-menu-list],
540
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
541
- animation: slide-in 0.2s ease-in-out;
542
- }
543
-
544
- @keyframes slide-in {
545
- 0% {
546
- opacity: 0;
547
- transform: translateY(0.5rem);
548
- }
549
- 100% {
550
- opacity: 1;
551
- transform: translateY(0);
552
- }
553
- }
554
- [data-reach-menu-popover] {
555
- position: absolute;
556
- z-index: 30;
557
- }
558
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
559
- position: relative;
560
- right: calc(100% - 2rem);
561
- }/* DO NOT CHANGE!*/
562
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
563
432
  .eds-stepper {
564
433
  display: flex;
565
434
  flex-direction: row;
@@ -676,4 +545,134 @@
676
545
  }
677
546
  .eds-contrast .eds-stepper__item__square--has-been {
678
547
  background: #aeb7e2;
548
+ }/* DO NOT CHANGE!*/
549
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
550
+ .eds-overflow-menu__item {
551
+ -webkit-appearance: none;
552
+ -moz-appearance: none;
553
+ appearance: none;
554
+ border: none;
555
+ font-size: 0.875rem;
556
+ font-family: inherit;
557
+ color: var(--primary-text-color);
558
+ background: #f8f8f8;
559
+ display: block;
560
+ height: 3rem;
561
+ cursor: pointer;
562
+ width: 100%;
563
+ line-height: 1.375rem;
564
+ text-align: left;
565
+ padding: 0.75rem 1rem;
566
+ opacity: 1;
567
+ }
568
+ .eds-contrast .eds-overflow-menu__item {
569
+ color: #181c56;
570
+ }
571
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
572
+ background: #e9e9e9;
573
+ color: #949494;
574
+ }
575
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
576
+ background: #e9e9e9;
577
+ color: #949494;
578
+ }
579
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
580
+ cursor: not-allowed;
581
+ background: #e9e9e9;
582
+ color: #949494;
583
+ }
584
+ .eds-overflow-menu__item .eds-icon {
585
+ margin-right: 0.75rem;
586
+ }
587
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
588
+ background: #d1d4e3;
589
+ }
590
+ .eds-overflow-menu__item:focus {
591
+ outline: none;
592
+ }
593
+
594
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
595
+ border-top: 0.0625rem solid #e9e9e9;
596
+ }
597
+
598
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
599
+ border: 0.0625rem solid #e9e9e9;
600
+ border-radius: 0.25rem;
601
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
602
+ overflow: hidden;
603
+ }
604
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
605
+ outline: none;
606
+ }
607
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
608
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
609
+ }
610
+
611
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
612
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
613
+ animation: slide-in 0.2s ease-in-out;
614
+ }
615
+
616
+ @keyframes slide-in {
617
+ 0% {
618
+ opacity: 0;
619
+ transform: translateY(0.5rem);
620
+ }
621
+ 100% {
622
+ opacity: 1;
623
+ transform: translateY(0);
624
+ }
625
+ }
626
+ [data-reach-menu-popover] {
627
+ position: absolute;
628
+ z-index: 30;
629
+ }
630
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
631
+ position: relative;
632
+ right: calc(100% - 2rem);
633
+ }/* DO NOT CHANGE!*/
634
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
635
+ .eds-breadcrumb {
636
+ list-style: none;
637
+ margin: 0;
638
+ padding: 0;
639
+ }
640
+
641
+ .eds-breadcrumb__item {
642
+ display: inline-block;
643
+ }
644
+
645
+ .eds-breadcrumb__separator {
646
+ margin: 0 0.25rem 0 0.25rem;
647
+ }
648
+
649
+ .eds-breadcrumb__link {
650
+ text-decoration: none;
651
+ color: inherit;
652
+ background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
653
+ background-repeat: no-repeat;
654
+ background-size: 100% 0.125rem;
655
+ background-position: 0 100%;
656
+ }
657
+ .eds-contrast .eds-breadcrumb__link {
658
+ background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
659
+ }
660
+ .eds-breadcrumb__link:hover {
661
+ animation: eds-breadcrumb-underline 0.3s ease-in;
662
+ }
663
+ .eds-breadcrumb__link:focus {
664
+ outline: none;
665
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
666
+ outline-offset: 0.125rem;
667
+ }
668
+ @keyframes eds-breadcrumb-underline {
669
+ from {
670
+ background-size: 0% 0.125rem;
671
+ }
672
+ to {
673
+ background-size: 100% 0.125rem;
674
+ }
675
+ }
676
+ .eds-breadcrumb__link--current {
677
+ font-weight: 600;
679
678
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.29-beta.0",
3
+ "version": "4.1.29",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -39,5 +39,5 @@
39
39
  "@reach/polymorphic": "0.18.0",
40
40
  "classnames": "^2.3.1"
41
41
  },
42
- "gitHead": "79c7df983dede6ac2b3188c22a944a99f472f6b0"
42
+ "gitHead": "d66e9c3a3708ce61a6a72671e974eb1ce4a13a45"
43
43
  }