@entur/menu 4.1.37 → 4.1.39

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.
package/dist/styles.css CHANGED
@@ -4,92 +4,6 @@
4
4
  }
5
5
  /* DO NOT CHANGE!*/
6
6
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
- .eds-overflow-menu__item {
8
- -webkit-appearance: none;
9
- -moz-appearance: none;
10
- appearance: none;
11
- border: none;
12
- font-size: 0.875rem;
13
- font-family: inherit;
14
- color: var(--primary-text-color);
15
- background: #f8f8f8;
16
- display: block;
17
- height: 3rem;
18
- cursor: pointer;
19
- width: 100%;
20
- line-height: 1.375rem;
21
- text-align: left;
22
- padding: 0.75rem 1rem;
23
- opacity: 1;
24
- }
25
- .eds-contrast .eds-overflow-menu__item {
26
- color: #181c56;
27
- }
28
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
29
- background: #e9e9e9;
30
- color: #949494;
31
- }
32
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
33
- background: #e9e9e9;
34
- color: #949494;
35
- }
36
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
37
- cursor: not-allowed;
38
- background: #e9e9e9;
39
- color: #949494;
40
- }
41
- .eds-overflow-menu__item .eds-icon {
42
- margin-right: 0.75rem;
43
- }
44
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
45
- background: #d1d4e3;
46
- }
47
- .eds-overflow-menu__item:focus {
48
- outline: none;
49
- }
50
-
51
- .eds-overflow-menu__item + .eds-overflow-menu__item {
52
- border-top: 0.0625rem solid #e9e9e9;
53
- }
54
-
55
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
56
- border: 0.0625rem solid #e9e9e9;
57
- border-radius: 0.25rem;
58
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
59
- overflow: hidden;
60
- }
61
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
62
- outline: none;
63
- }
64
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
65
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
66
- }
67
-
68
- .eds-overflow-menu__menu-list[data-reach-menu-list],
69
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
70
- animation: slide-in 0.2s ease-in-out;
71
- }
72
-
73
- @keyframes slide-in {
74
- 0% {
75
- opacity: 0;
76
- transform: translateY(0.5rem);
77
- }
78
- 100% {
79
- opacity: 1;
80
- transform: translateY(0);
81
- }
82
- }
83
- [data-reach-menu-popover] {
84
- position: absolute;
85
- z-index: 30;
86
- }
87
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
88
- position: relative;
89
- right: calc(100% - 2rem);
90
- }
91
- /* DO NOT CHANGE!*/
92
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
93
7
  .eds-breadcrumb {
94
8
  list-style: none;
95
9
  margin: 0;
@@ -356,174 +270,6 @@
356
270
  }
357
271
  /* DO NOT CHANGE!*/
358
272
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
359
- .eds-stepper {
360
- display: flex;
361
- flex-direction: row;
362
- }
363
- .eds-stepper__item__container {
364
- cursor: pointer;
365
- font-family: inherit;
366
- text-transform: none;
367
- -webkit-appearance: none;
368
- -moz-appearance: none;
369
- appearance: none;
370
- background: none;
371
- border: none;
372
- margin: 0;
373
- padding: 0;
374
- align-items: inherit;
375
- display: flex;
376
- flex-grow: 1;
377
- flex-basis: 0;
378
- flex-direction: column;
379
- margin-left: 0.25rem;
380
- }
381
- .eds-stepper__item__container--non-interactive {
382
- cursor: default;
383
- }
384
- .eds-stepper__item__container:focus {
385
- outline-offset: 0.125rem;
386
- outline: none;
387
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
388
- }
389
- .eds-contrast .eds-stepper__item__container:focus {
390
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
391
- }
392
- .eds-stepper__item__container:first-child {
393
- margin-left: 0;
394
- }
395
- .eds-stepper__item__label {
396
- cursor: inherit;
397
- flex-grow: 1;
398
- flex-direction: column;
399
- text-align: center;
400
- font-size: 0.875rem;
401
- padding: 0.25rem 1rem;
402
- }
403
- .eds-stepper__item__label--active {
404
- font-weight: 600;
405
- }
406
- .eds-stepper__item__label.eds-stepper__item__label--active {
407
- color: #181c56;
408
- }
409
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
410
- color: #ffffff;
411
- }
412
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
413
- color: #181c56;
414
- }
415
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
416
- color: #ffffff;
417
- }
418
- .eds-stepper__item__square {
419
- height: 0.5rem;
420
- }
421
- .eds-stepper__item__square--active {
422
- color: inherit;
423
- background: #e9e9e9;
424
- position: relative;
425
- }
426
- .eds-stepper__item__square--active:before {
427
- background: #181c56;
428
- content: "";
429
- position: absolute;
430
- right: calc(50% - 0.2rem);
431
- border-radius: 0.0625rem;
432
- bottom: 0.0625rem;
433
- width: calc(
434
- 0.5rem - 0.125rem - 0.01rem
435
- );
436
- height: calc(
437
- 0.5rem - 0.125rem - 0.01rem
438
- );
439
- transform: rotate(45deg);
440
- }
441
- .eds-contrast .eds-stepper__item__square--active:before {
442
- border-left-color: #aeb7e2;
443
- border-left-color: #aeb7e2;
444
- }
445
- .eds-stepper__item__square--active:after {
446
- content: "";
447
- position: absolute;
448
- left: 0;
449
- bottom: 0;
450
- width: 50%;
451
- height: 0.5rem;
452
- background: #181c56;
453
- }
454
- .eds-contrast .eds-stepper__item__square--active:after {
455
- background: #aeb7e2;
456
- }
457
- .eds-contrast .eds-stepper__item__square--active {
458
- background: #aeb7e2;
459
- background: #393d79;
460
- }
461
- .eds-stepper__item__square--inactive {
462
- color: #656782;
463
- background: #e9e9e9;
464
- }
465
- .eds-contrast .eds-stepper__item__square--inactive {
466
- color: #aeb7e2;
467
- background: #393d79;
468
- }
469
- .eds-stepper__item__square--has-been {
470
- color: inherit;
471
- background: #181c56;
472
- }
473
- .eds-contrast .eds-stepper__item__square--has-been {
474
- background: #aeb7e2;
475
- }
476
- /* DO NOT CHANGE!*/
477
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
478
- .eds-top-navigation-item {
479
- --show-active-line: 0;
480
- display: inline-block;
481
- cursor: pointer;
482
- color: inherit;
483
- text-decoration: none;
484
- position: relative;
485
- padding: 1rem;
486
- min-width: 5rem;
487
- width: -moz-fit-content;
488
- width: fit-content;
489
- text-align: center;
490
- font-family: inherit;
491
- font-size: 1rem;
492
- font-weight: 600;
493
- }
494
- .eds-top-navigation-item::after {
495
- content: "";
496
- display: block;
497
- bottom: 1rem;
498
- height: 0.1875rem;
499
- width: 0;
500
- margin: 0 auto;
501
- opacity: var(--show-active-line);
502
- background: #ff5959;
503
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
504
- }
505
- .eds-top-navigation-item:focus {
506
- outline-offset: 0.125rem;
507
- outline: none;
508
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
509
- }
510
- .eds-contrast .eds-top-navigation-item:focus {
511
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
512
- }
513
- .eds-top-navigation-item:hover {
514
- --show-active-line: 1;
515
- }
516
- .eds-top-navigation-item:hover::after {
517
- width: 2rem;
518
- }
519
- .eds-top-navigation-item--active {
520
- --show-active-line: 1;
521
- }
522
- .eds-top-navigation-item--active::after {
523
- width: 2rem;
524
- }
525
- /* DO NOT CHANGE!*/
526
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
527
273
  .eds-pagination {
528
274
  align-items: center;
529
275
  display: flex;
@@ -682,3 +428,257 @@
682
428
  appearance: none;
683
429
  margin: 0;
684
430
  }
431
+ /* DO NOT CHANGE!*/
432
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
433
+ .eds-top-navigation-item {
434
+ --show-active-line: 0;
435
+ display: inline-block;
436
+ cursor: pointer;
437
+ color: inherit;
438
+ text-decoration: none;
439
+ position: relative;
440
+ padding: 1rem;
441
+ min-width: 5rem;
442
+ width: -moz-fit-content;
443
+ width: fit-content;
444
+ text-align: center;
445
+ font-family: inherit;
446
+ font-size: 1rem;
447
+ font-weight: 600;
448
+ }
449
+ .eds-top-navigation-item::after {
450
+ content: "";
451
+ display: block;
452
+ bottom: 1rem;
453
+ height: 0.1875rem;
454
+ width: 0;
455
+ margin: 0 auto;
456
+ opacity: var(--show-active-line);
457
+ background: #ff5959;
458
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
459
+ }
460
+ .eds-top-navigation-item:focus {
461
+ outline-offset: 0.125rem;
462
+ outline: none;
463
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
464
+ }
465
+ .eds-contrast .eds-top-navigation-item:focus {
466
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
467
+ }
468
+ .eds-top-navigation-item:hover {
469
+ --show-active-line: 1;
470
+ }
471
+ .eds-top-navigation-item:hover::after {
472
+ width: 2rem;
473
+ }
474
+ .eds-top-navigation-item--active {
475
+ --show-active-line: 1;
476
+ }
477
+ .eds-top-navigation-item--active::after {
478
+ width: 2rem;
479
+ }
480
+ /* DO NOT CHANGE!*/
481
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
482
+ .eds-stepper {
483
+ display: flex;
484
+ flex-direction: row;
485
+ }
486
+ .eds-stepper__item__container {
487
+ cursor: pointer;
488
+ font-family: inherit;
489
+ text-transform: none;
490
+ -webkit-appearance: none;
491
+ -moz-appearance: none;
492
+ appearance: none;
493
+ background: none;
494
+ border: none;
495
+ margin: 0;
496
+ padding: 0;
497
+ align-items: inherit;
498
+ display: flex;
499
+ flex-grow: 1;
500
+ flex-basis: 0;
501
+ flex-direction: column;
502
+ margin-left: 0.25rem;
503
+ }
504
+ .eds-stepper__item__container--non-interactive {
505
+ cursor: default;
506
+ }
507
+ .eds-stepper__item__container:focus {
508
+ outline-offset: 0.125rem;
509
+ outline: none;
510
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
511
+ }
512
+ .eds-contrast .eds-stepper__item__container:focus {
513
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
514
+ }
515
+ .eds-stepper__item__container:first-child {
516
+ margin-left: 0;
517
+ }
518
+ .eds-stepper__item__label {
519
+ cursor: inherit;
520
+ flex-grow: 1;
521
+ flex-direction: column;
522
+ text-align: center;
523
+ font-size: 0.875rem;
524
+ padding: 0.25rem 1rem;
525
+ }
526
+ .eds-stepper__item__label--active {
527
+ font-weight: 600;
528
+ }
529
+ .eds-stepper__item__label.eds-stepper__item__label--active {
530
+ color: #181c56;
531
+ }
532
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
533
+ color: #ffffff;
534
+ }
535
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
536
+ color: #181c56;
537
+ }
538
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
539
+ color: #ffffff;
540
+ }
541
+ .eds-stepper__item__square {
542
+ height: 0.5rem;
543
+ }
544
+ .eds-stepper__item__square--active {
545
+ color: inherit;
546
+ background: #e9e9e9;
547
+ position: relative;
548
+ }
549
+ .eds-stepper__item__square--active:before {
550
+ background: #181c56;
551
+ content: "";
552
+ position: absolute;
553
+ right: calc(50% - 0.2rem);
554
+ border-radius: 0.0625rem;
555
+ bottom: 0.0625rem;
556
+ width: calc(
557
+ 0.5rem - 0.125rem - 0.01rem
558
+ );
559
+ height: calc(
560
+ 0.5rem - 0.125rem - 0.01rem
561
+ );
562
+ transform: rotate(45deg);
563
+ }
564
+ .eds-contrast .eds-stepper__item__square--active:before {
565
+ border-left-color: #aeb7e2;
566
+ border-left-color: #aeb7e2;
567
+ }
568
+ .eds-stepper__item__square--active:after {
569
+ content: "";
570
+ position: absolute;
571
+ left: 0;
572
+ bottom: 0;
573
+ width: 50%;
574
+ height: 0.5rem;
575
+ background: #181c56;
576
+ }
577
+ .eds-contrast .eds-stepper__item__square--active:after {
578
+ background: #aeb7e2;
579
+ }
580
+ .eds-contrast .eds-stepper__item__square--active {
581
+ background: #aeb7e2;
582
+ background: #393d79;
583
+ }
584
+ .eds-stepper__item__square--inactive {
585
+ color: #656782;
586
+ background: #e9e9e9;
587
+ }
588
+ .eds-contrast .eds-stepper__item__square--inactive {
589
+ color: #aeb7e2;
590
+ background: #393d79;
591
+ }
592
+ .eds-stepper__item__square--has-been {
593
+ color: inherit;
594
+ background: #181c56;
595
+ }
596
+ .eds-contrast .eds-stepper__item__square--has-been {
597
+ background: #aeb7e2;
598
+ }
599
+ /* DO NOT CHANGE!*/
600
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
601
+ .eds-overflow-menu__item {
602
+ -webkit-appearance: none;
603
+ -moz-appearance: none;
604
+ appearance: none;
605
+ border: none;
606
+ font-size: 0.875rem;
607
+ font-family: inherit;
608
+ color: var(--primary-text-color);
609
+ background: #f8f8f8;
610
+ display: block;
611
+ height: 3rem;
612
+ cursor: pointer;
613
+ width: 100%;
614
+ line-height: 1.375rem;
615
+ text-align: left;
616
+ padding: 0.75rem 1rem;
617
+ opacity: 1;
618
+ }
619
+ .eds-contrast .eds-overflow-menu__item {
620
+ color: #181c56;
621
+ }
622
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
623
+ background: #e9e9e9;
624
+ color: #949494;
625
+ }
626
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
627
+ background: #e9e9e9;
628
+ color: #949494;
629
+ }
630
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
631
+ cursor: not-allowed;
632
+ background: #e9e9e9;
633
+ color: #949494;
634
+ }
635
+ .eds-overflow-menu__item .eds-icon {
636
+ margin-right: 0.75rem;
637
+ }
638
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
639
+ background: #d1d4e3;
640
+ }
641
+ .eds-overflow-menu__item:focus {
642
+ outline: none;
643
+ }
644
+
645
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
646
+ border-top: 0.0625rem solid #e9e9e9;
647
+ }
648
+
649
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
650
+ border: 0.0625rem solid #e9e9e9;
651
+ border-radius: 0.25rem;
652
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
653
+ overflow: hidden;
654
+ }
655
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
656
+ outline: none;
657
+ }
658
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
659
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
660
+ }
661
+
662
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
663
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
664
+ animation: slide-in 0.2s ease-in-out;
665
+ }
666
+
667
+ @keyframes slide-in {
668
+ 0% {
669
+ opacity: 0;
670
+ transform: translateY(0.5rem);
671
+ }
672
+ 100% {
673
+ opacity: 1;
674
+ transform: translateY(0);
675
+ }
676
+ }
677
+ [data-reach-menu-popover] {
678
+ position: absolute;
679
+ z-index: 30;
680
+ }
681
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
682
+ position: relative;
683
+ right: calc(100% - 2rem);
684
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.37",
3
+ "version": "4.1.39",
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.63",
31
- "@entur/button": "^3.0.4",
32
- "@entur/expand": "^3.3.43",
30
+ "@entur/a11y": "^0.2.64",
31
+ "@entur/button": "^3.0.6",
32
+ "@entur/expand": "^3.3.44",
33
33
  "@entur/icons": "^6.2.0",
34
- "@entur/layout": "^2.1.29",
34
+ "@entur/layout": "^2.1.30",
35
35
  "@entur/tokens": "^3.8.1",
36
- "@entur/typography": "^1.7.15",
37
- "@entur/utils": "^0.8.0",
36
+ "@entur/typography": "^1.7.16",
37
+ "@entur/utils": "^0.9.0",
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": "c80112ae71ce3654107c8983a1a9fd91204aa667"
42
+ "gitHead": "02c9d76ac36b3357b91ee60ac3e0f66eb111c9c2"
43
43
  }