@entur/menu 4.1.7 → 4.1.8

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
@@ -57,55 +57,6 @@
57
57
  font-weight: 600;
58
58
  }/* DO NOT CHANGE!*/
59
59
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
- .eds-top-navigation-item {
61
- --show-active-line: 0;
62
- display: inline-block;
63
- cursor: pointer;
64
- color: inherit;
65
- text-decoration: none;
66
- position: relative;
67
- padding: 1rem;
68
- min-width: 5rem;
69
- width: -webkit-fit-content;
70
- width: -moz-fit-content;
71
- width: fit-content;
72
- text-align: center;
73
- font-family: inherit;
74
- font-size: 1rem;
75
- font-weight: 600;
76
- }
77
- .eds-top-navigation-item::after {
78
- content: "";
79
- display: block;
80
- bottom: 1rem;
81
- height: 0.1875rem;
82
- width: 0;
83
- margin: 0 auto;
84
- opacity: var(--show-active-line);
85
- background: #ff5959;
86
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
87
- }
88
- .eds-top-navigation-item:focus {
89
- outline-offset: 0.125rem;
90
- outline: none;
91
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
92
- }
93
- .eds-contrast .eds-top-navigation-item:focus {
94
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
95
- }
96
- .eds-top-navigation-item:hover {
97
- --show-active-line: 1;
98
- }
99
- .eds-top-navigation-item:hover::after {
100
- width: 2rem;
101
- }
102
- .eds-top-navigation-item--active {
103
- --show-active-line: 1;
104
- }
105
- .eds-top-navigation-item--active::after {
106
- width: 2rem;
107
- }/* DO NOT CHANGE!*/
108
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
60
  /* DO NOT CHANGE!*/
110
61
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
111
62
  .eds-side-navigation,
@@ -325,101 +276,53 @@
325
276
  outline: 2px solid #ffffff;
326
277
  }/* DO NOT CHANGE!*/
327
278
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
328
- .eds-overflow-menu__item {
329
- -webkit-appearance: none;
330
- -moz-appearance: none;
331
- appearance: none;
332
- border: none;
333
- font-size: 0.875rem;
334
- font-family: inherit;
335
- color: var(--primary-text-color);
336
- background: #f8f8f8;
337
- display: block;
338
- height: 3rem;
279
+ .eds-top-navigation-item {
280
+ --show-active-line: 0;
281
+ display: inline-block;
339
282
  cursor: pointer;
340
- width: 100%;
341
- line-height: 1.375rem;
342
- text-align: left;
343
- padding: 0.75rem 1rem;
344
- opacity: 1;
345
- }
346
- .eds-contrast .eds-overflow-menu__item {
347
- color: #181c56;
348
- }
349
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
350
- background: #e9e9e9;
351
- color: #949494;
352
- }
353
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
354
- background: #e9e9e9;
355
- color: #949494;
356
- }
357
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
358
- cursor: not-allowed;
359
- background: #e9e9e9;
360
- color: #949494;
361
- }
362
- .eds-overflow-menu__item .eds-icon {
363
- margin-right: 0.75rem;
364
- }
365
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
366
- background: #d1d4e3;
367
- }
368
- .eds-overflow-menu__item:focus {
369
- outline: none;
370
- }
371
-
372
- .eds-overflow-menu__item + .eds-overflow-menu__item {
373
- border-top: 0.0625rem solid #e9e9e9;
283
+ color: inherit;
284
+ text-decoration: none;
285
+ position: relative;
286
+ padding: 1rem;
287
+ min-width: 5rem;
288
+ width: -webkit-fit-content;
289
+ width: -moz-fit-content;
290
+ width: fit-content;
291
+ text-align: center;
292
+ font-family: inherit;
293
+ font-size: 1rem;
294
+ font-weight: 600;
374
295
  }
375
-
376
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
377
- border: 0.0625rem solid #e9e9e9;
378
- border-radius: 0.25rem;
379
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
380
- overflow: hidden;
296
+ .eds-top-navigation-item::after {
297
+ content: "";
298
+ display: block;
299
+ bottom: 1rem;
300
+ height: 0.1875rem;
301
+ width: 0;
302
+ margin: 0 auto;
303
+ opacity: var(--show-active-line);
304
+ background: #ff5959;
305
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
381
306
  }
382
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
307
+ .eds-top-navigation-item:focus {
308
+ outline-offset: 0.125rem;
383
309
  outline: none;
310
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
384
311
  }
385
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
386
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
387
- }
388
-
389
- .eds-overflow-menu__menu-list[data-reach-menu-list],
390
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
391
- -webkit-animation: slide-in 0.2s ease-in-out;
392
- animation: slide-in 0.2s ease-in-out;
312
+ .eds-contrast .eds-top-navigation-item:focus {
313
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
393
314
  }
394
-
395
- @-webkit-keyframes slide-in {
396
- 0% {
397
- opacity: 0;
398
- transform: translateY(0.5rem);
399
- }
400
- 100% {
401
- opacity: 1;
402
- transform: translateY(0);
403
- }
315
+ .eds-top-navigation-item:hover {
316
+ --show-active-line: 1;
404
317
  }
405
-
406
- @keyframes slide-in {
407
- 0% {
408
- opacity: 0;
409
- transform: translateY(0.5rem);
410
- }
411
- 100% {
412
- opacity: 1;
413
- transform: translateY(0);
414
- }
318
+ .eds-top-navigation-item:hover::after {
319
+ width: 2rem;
415
320
  }
416
- [data-reach-menu-popover] {
417
- position: absolute;
418
- z-index: 30;
321
+ .eds-top-navigation-item--active {
322
+ --show-active-line: 1;
419
323
  }
420
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
421
- position: relative;
422
- right: calc(100% - 2rem);
324
+ .eds-top-navigation-item--active::after {
325
+ width: 2rem;
423
326
  }/* DO NOT CHANGE!*/
424
327
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
425
328
  .eds-stepper {
@@ -695,4 +598,101 @@
695
598
  -webkit-appearance: none;
696
599
  appearance: none;
697
600
  margin: 0;
601
+ }/* DO NOT CHANGE!*/
602
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
603
+ .eds-overflow-menu__item {
604
+ -webkit-appearance: none;
605
+ -moz-appearance: none;
606
+ appearance: none;
607
+ border: none;
608
+ font-size: 0.875rem;
609
+ font-family: inherit;
610
+ color: var(--primary-text-color);
611
+ background: #f8f8f8;
612
+ display: block;
613
+ height: 3rem;
614
+ cursor: pointer;
615
+ width: 100%;
616
+ line-height: 1.375rem;
617
+ text-align: left;
618
+ padding: 0.75rem 1rem;
619
+ opacity: 1;
620
+ }
621
+ .eds-contrast .eds-overflow-menu__item {
622
+ color: #181c56;
623
+ }
624
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
625
+ background: #e9e9e9;
626
+ color: #949494;
627
+ }
628
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
629
+ background: #e9e9e9;
630
+ color: #949494;
631
+ }
632
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
633
+ cursor: not-allowed;
634
+ background: #e9e9e9;
635
+ color: #949494;
636
+ }
637
+ .eds-overflow-menu__item .eds-icon {
638
+ margin-right: 0.75rem;
639
+ }
640
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
641
+ background: #d1d4e3;
642
+ }
643
+ .eds-overflow-menu__item:focus {
644
+ outline: none;
645
+ }
646
+
647
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
648
+ border-top: 0.0625rem solid #e9e9e9;
649
+ }
650
+
651
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
652
+ border: 0.0625rem solid #e9e9e9;
653
+ border-radius: 0.25rem;
654
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
655
+ overflow: hidden;
656
+ }
657
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
658
+ outline: none;
659
+ }
660
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
661
+ box-shadow: 0 0.0625rem 0.1875rem #393d79;
662
+ }
663
+
664
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
665
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
666
+ -webkit-animation: slide-in 0.2s ease-in-out;
667
+ animation: slide-in 0.2s ease-in-out;
668
+ }
669
+
670
+ @-webkit-keyframes slide-in {
671
+ 0% {
672
+ opacity: 0;
673
+ transform: translateY(0.5rem);
674
+ }
675
+ 100% {
676
+ opacity: 1;
677
+ transform: translateY(0);
678
+ }
679
+ }
680
+
681
+ @keyframes slide-in {
682
+ 0% {
683
+ opacity: 0;
684
+ transform: translateY(0.5rem);
685
+ }
686
+ 100% {
687
+ opacity: 1;
688
+ transform: translateY(0);
689
+ }
690
+ }
691
+ [data-reach-menu-popover] {
692
+ position: absolute;
693
+ z-index: 30;
694
+ }
695
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
696
+ position: relative;
697
+ right: calc(100% - 2rem);
698
698
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.7",
3
+ "version": "4.1.8",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -23,6 +23,7 @@
23
23
  "lint": "dts lint"
24
24
  },
25
25
  "dependencies": {
26
+ "@entur/a11y": "0.2.47",
26
27
  "@entur/button": "^2.10.2",
27
28
  "@entur/expand": "^3.3.18",
28
29
  "@entur/icons": "^4.3.2",
@@ -37,5 +38,5 @@
37
38
  "react": ">=16.8.0",
38
39
  "react-dom": ">=16.8.0"
39
40
  },
40
- "gitHead": "1dabe0c64e98a7de3a47a29fc24fd46e74dc0d7c"
41
+ "gitHead": "f3bffb3de2412430d4d5d37dbd397f4dd995522b"
41
42
  }