@entur/menu 4.1.26 → 4.1.28

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 +157 -157
  2. package/package.json +10 -10
package/dist/styles.css CHANGED
@@ -3,49 +3,52 @@
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;
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;
49
52
  }@charset "UTF-8";
50
53
  /* DO NOT CHANGE!*/
51
54
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -268,6 +271,51 @@
268
271
  outline: 2px solid #ffffff;
269
272
  }/* DO NOT CHANGE!*/
270
273
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
274
+ .eds-breadcrumb {
275
+ list-style: none;
276
+ margin: 0;
277
+ padding: 0;
278
+ }
279
+
280
+ .eds-breadcrumb__item {
281
+ display: inline-block;
282
+ }
283
+
284
+ .eds-breadcrumb__separator {
285
+ margin: 0 0.25rem 0 0.25rem;
286
+ }
287
+
288
+ .eds-breadcrumb__link {
289
+ text-decoration: none;
290
+ color: inherit;
291
+ background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
292
+ background-repeat: no-repeat;
293
+ background-size: 100% 0.125rem;
294
+ background-position: 0 100%;
295
+ }
296
+ .eds-contrast .eds-breadcrumb__link {
297
+ background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
298
+ }
299
+ .eds-breadcrumb__link:hover {
300
+ animation: eds-breadcrumb-underline 0.3s ease-in;
301
+ }
302
+ .eds-breadcrumb__link:focus {
303
+ outline: none;
304
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
305
+ outline-offset: 0.125rem;
306
+ }
307
+ @keyframes eds-breadcrumb-underline {
308
+ from {
309
+ background-size: 0% 0.125rem;
310
+ }
311
+ to {
312
+ background-size: 100% 0.125rem;
313
+ }
314
+ }
315
+ .eds-breadcrumb__link--current {
316
+ font-weight: 600;
317
+ }/* DO NOT CHANGE!*/
318
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
271
319
  .eds-pagination {
272
320
  align-items: center;
273
321
  display: flex;
@@ -427,52 +475,89 @@
427
475
  margin: 0;
428
476
  }/* DO NOT CHANGE!*/
429
477
  /* 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;
478
+ .eds-overflow-menu__item {
479
+ -webkit-appearance: none;
480
+ -moz-appearance: none;
481
+ appearance: none;
482
+ border: none;
483
+ font-size: 0.875rem;
442
484
  font-family: inherit;
443
- font-size: 1rem;
444
- font-weight: 600;
445
- }
446
- .eds-top-navigation-item::after {
447
- content: "";
485
+ color: var(--primary-text-color);
486
+ background: #f8f8f8;
448
487
  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;
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;
456
495
  }
457
- .eds-top-navigation-item:focus {
458
- outline-offset: 0.125rem;
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 {
459
519
  outline: none;
460
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
461
520
  }
462
- .eds-contrast .eds-top-navigation-item:focus {
463
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
521
+
522
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
523
+ border-top: 0.0625rem solid #e9e9e9;
464
524
  }
465
- .eds-top-navigation-item:hover {
466
- --show-active-line: 1;
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;
467
531
  }
468
- .eds-top-navigation-item:hover::after {
469
- width: 2rem;
532
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
533
+ outline: none;
470
534
  }
471
- .eds-top-navigation-item--active {
472
- --show-active-line: 1;
535
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
536
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
473
537
  }
474
- .eds-top-navigation-item--active::after {
475
- width: 2rem;
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);
476
561
  }/* DO NOT CHANGE!*/
477
562
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
478
563
  .eds-stepper {
@@ -591,89 +676,4 @@
591
676
  }
592
677
  .eds-contrast .eds-stepper__item__square--has-been {
593
678
  background: #aeb7e2;
594
- }/* DO NOT CHANGE!*/
595
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
596
- .eds-overflow-menu__item {
597
- -webkit-appearance: none;
598
- -moz-appearance: none;
599
- appearance: none;
600
- border: none;
601
- font-size: 0.875rem;
602
- font-family: inherit;
603
- color: var(--primary-text-color);
604
- background: #f8f8f8;
605
- display: block;
606
- height: 3rem;
607
- cursor: pointer;
608
- width: 100%;
609
- line-height: 1.375rem;
610
- text-align: left;
611
- padding: 0.75rem 1rem;
612
- opacity: 1;
613
- }
614
- .eds-contrast .eds-overflow-menu__item {
615
- color: #181c56;
616
- }
617
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
618
- background: #e9e9e9;
619
- color: #949494;
620
- }
621
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
622
- background: #e9e9e9;
623
- color: #949494;
624
- }
625
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
626
- cursor: not-allowed;
627
- background: #e9e9e9;
628
- color: #949494;
629
- }
630
- .eds-overflow-menu__item .eds-icon {
631
- margin-right: 0.75rem;
632
- }
633
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
634
- background: #d1d4e3;
635
- }
636
- .eds-overflow-menu__item:focus {
637
- outline: none;
638
- }
639
-
640
- .eds-overflow-menu__item + .eds-overflow-menu__item {
641
- border-top: 0.0625rem solid #e9e9e9;
642
- }
643
-
644
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
645
- border: 0.0625rem solid #e9e9e9;
646
- border-radius: 0.25rem;
647
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
648
- overflow: hidden;
649
- }
650
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
651
- outline: none;
652
- }
653
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
654
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
655
- }
656
-
657
- .eds-overflow-menu__menu-list[data-reach-menu-list],
658
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
659
- animation: slide-in 0.2s ease-in-out;
660
- }
661
-
662
- @keyframes slide-in {
663
- 0% {
664
- opacity: 0;
665
- transform: translateY(0.5rem);
666
- }
667
- 100% {
668
- opacity: 1;
669
- transform: translateY(0);
670
- }
671
- }
672
- [data-reach-menu-popover] {
673
- position: absolute;
674
- z-index: 30;
675
- }
676
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
677
- position: relative;
678
- right: calc(100% - 2rem);
679
679
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.26",
3
+ "version": "4.1.28",
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.57",
31
- "@entur/button": "^2.10.12",
32
- "@entur/expand": "^3.3.33",
33
- "@entur/icons": "^5.6.0",
34
- "@entur/layout": "^2.1.19",
35
- "@entur/tokens": "^3.6.0",
36
- "@entur/typography": "^1.7.8",
37
- "@entur/utils": "^0.5.3",
30
+ "@entur/a11y": "^0.2.59",
31
+ "@entur/button": "^2.10.14",
32
+ "@entur/expand": "^3.3.35",
33
+ "@entur/icons": "^5.8.0",
34
+ "@entur/layout": "^2.1.21",
35
+ "@entur/tokens": "^3.8.0",
36
+ "@entur/typography": "^1.7.10",
37
+ "@entur/utils": "^0.5.5",
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": "be56a9cea51aa1cf026d38174750f2a52e67a463"
42
+ "gitHead": "bc067536ed769de8072f19002ef4877a1e974443"
43
43
  }