@entur/menu 4.1.1 → 4.1.2

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 (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/styles.css +207 -207
  3. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.1.2](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.1...@entur/menu@4.1.2) (2022-06-02)
7
+
8
+ **Note:** Version bump only for package @entur/menu
9
+
6
10
  ## [4.1.1](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.0...@entur/menu@4.1.1) (2022-05-13)
7
11
 
8
12
  ### Bug Fixes
package/dist/styles.css CHANGED
@@ -57,6 +57,55 @@
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. */
60
109
  /* DO NOT CHANGE!*/
61
110
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
62
111
  .eds-side-navigation,
@@ -276,150 +325,118 @@
276
325
  outline: 2px solid #ffffff;
277
326
  }/* DO NOT CHANGE!*/
278
327
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
279
- .eds-top-navigation-item {
280
- --show-active-line: 0;
281
- display: inline-block;
328
+ .eds-stepper {
329
+ display: flex;
330
+ flex-direction: row;
331
+ }
332
+ .eds-stepper__item__container {
282
333
  cursor: pointer;
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
334
  font-family: inherit;
293
- font-size: 1rem;
294
- font-weight: 600;
335
+ text-transform: none;
336
+ -webkit-appearance: none;
337
+ -moz-appearance: none;
338
+ appearance: none;
339
+ background: none;
340
+ border: none;
341
+ margin: 0;
342
+ padding: 0;
343
+ align-items: inherit;
344
+ display: flex;
345
+ flex-grow: 1;
346
+ flex-basis: 0;
347
+ flex-direction: column;
348
+ margin-left: 0.25rem;
295
349
  }
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;
350
+ .eds-stepper__item__container--non-interactive {
351
+ cursor: default;
306
352
  }
307
- .eds-top-navigation-item:focus {
353
+ .eds-stepper__item__container:focus {
308
354
  outline-offset: 0.125rem;
309
355
  outline: none;
310
356
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
311
357
  }
312
- .eds-contrast .eds-top-navigation-item:focus {
358
+ .eds-contrast .eds-stepper__item__container:focus {
313
359
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
314
360
  }
315
- .eds-top-navigation-item:hover {
316
- --show-active-line: 1;
317
- }
318
- .eds-top-navigation-item:hover::after {
319
- width: 2rem;
320
- }
321
- .eds-top-navigation-item--active {
322
- --show-active-line: 1;
361
+ .eds-stepper__item__container:first-child {
362
+ margin-left: 0;
323
363
  }
324
- .eds-top-navigation-item--active::after {
325
- width: 2rem;
326
- }/* DO NOT CHANGE!*/
327
- /* 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;
364
+ .eds-stepper__item__label {
365
+ cursor: inherit;
366
+ flex-grow: 1;
367
+ flex-direction: column;
368
+ text-align: center;
333
369
  font-size: 0.875rem;
334
- font-family: inherit;
335
- color: var(--primary-text-color);
336
- background: #f8f8f8;
337
- display: block;
338
- height: 3rem;
339
- cursor: pointer;
340
- width: 100%;
341
- line-height: 1.375rem;
342
- text-align: left;
343
- padding: 0.75rem 1rem;
344
- opacity: 1;
370
+ padding: 0.25rem 1rem;
345
371
  }
346
- .eds-contrast .eds-overflow-menu__item {
347
- color: #181c56;
372
+ .eds-stepper__item__label--active {
373
+ font-weight: 600;
348
374
  }
349
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
350
- background: #e9e9e9;
351
- color: #949494;
375
+ .eds-stepper__item__label.eds-stepper__item__label--active {
376
+ color: #181c56;
352
377
  }
353
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
354
- background: #e9e9e9;
355
- color: #949494;
378
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
379
+ color: #ffffff;
356
380
  }
357
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
358
- cursor: not-allowed;
359
- background: #e9e9e9;
360
- color: #949494;
381
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
382
+ color: #181c56;
361
383
  }
362
- .eds-overflow-menu__item .eds-icon {
363
- margin-right: 0.75rem;
384
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
385
+ color: #ffffff;
364
386
  }
365
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
366
- background: #d1d4e3;
387
+ .eds-stepper__item__square {
388
+ height: 0.5rem;
367
389
  }
368
- .eds-overflow-menu__item:focus {
369
- outline: none;
390
+ .eds-stepper__item__square--active {
391
+ color: inherit;
392
+ background: #e9e9e9;
393
+ position: relative;
370
394
  }
371
-
372
- .eds-overflow-menu__item + .eds-overflow-menu__item {
373
- border-top: 0.0625rem solid #e9e9e9;
395
+ .eds-stepper__item__square--active:before {
396
+ background: #181c56;
397
+ content: "";
398
+ position: absolute;
399
+ right: calc(50% - 0.2rem);
400
+ border-radius: 0.0625rem;
401
+ bottom: 0.0625rem;
402
+ width: calc( 0.5rem - 0.125rem - 0.01rem );
403
+ height: calc( 0.5rem - 0.125rem - 0.01rem );
404
+ transform: rotate(45deg);
374
405
  }
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;
406
+ .eds-contrast .eds-stepper__item__square--active:before {
407
+ border-left-color: #aeb7e2;
408
+ border-left-color: #aeb7e2;
381
409
  }
382
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
383
- outline: none;
410
+ .eds-stepper__item__square--active:after {
411
+ content: "";
412
+ position: absolute;
413
+ left: 0;
414
+ bottom: 0;
415
+ width: 50%;
416
+ height: 0.5rem;
417
+ background: #181c56;
384
418
  }
385
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
386
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
419
+ .eds-contrast .eds-stepper__item__square--active:after {
420
+ background: #aeb7e2;
387
421
  }
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;
422
+ .eds-contrast .eds-stepper__item__square--active {
423
+ background: #aeb7e2;
424
+ background: #393d79;
393
425
  }
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
- }
426
+ .eds-stepper__item__square--inactive {
427
+ color: #656782;
428
+ background: #e9e9e9;
404
429
  }
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
- }
430
+ .eds-contrast .eds-stepper__item__square--inactive {
431
+ color: #aeb7e2;
432
+ background: #393d79;
415
433
  }
416
- [data-reach-menu-popover] {
417
- position: absolute;
418
- z-index: 30;
434
+ .eds-stepper__item__square--has-been {
435
+ color: inherit;
436
+ background: #181c56;
419
437
  }
420
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
421
- position: relative;
422
- right: calc(100% - 2rem);
438
+ .eds-contrast .eds-stepper__item__square--has-been {
439
+ background: #aeb7e2;
423
440
  }/* DO NOT CHANGE!*/
424
441
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
425
442
  .eds-pagination {
@@ -583,116 +600,99 @@
583
600
  margin: 0;
584
601
  }/* DO NOT CHANGE!*/
585
602
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
586
- .eds-stepper {
587
- display: flex;
588
- flex-direction: row;
589
- }
590
- .eds-stepper__item__container {
591
- cursor: pointer;
592
- font-family: inherit;
593
- text-transform: none;
603
+ .eds-overflow-menu__item {
594
604
  -webkit-appearance: none;
595
605
  -moz-appearance: none;
596
606
  appearance: none;
597
- background: none;
598
607
  border: none;
599
- margin: 0;
600
- padding: 0;
601
- align-items: inherit;
602
- display: flex;
603
- flex-grow: 1;
604
- flex-basis: 0;
605
- flex-direction: column;
606
- margin-left: 0.25rem;
607
- }
608
- .eds-stepper__item__container--non-interactive {
609
- cursor: default;
610
- }
611
- .eds-stepper__item__container:focus {
612
- outline-offset: 0.125rem;
613
- outline: none;
614
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
615
- }
616
- .eds-contrast .eds-stepper__item__container:focus {
617
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
618
- }
619
- .eds-stepper__item__container:first-child {
620
- margin-left: 0;
621
- }
622
- .eds-stepper__item__label {
623
- cursor: inherit;
624
- flex-grow: 1;
625
- flex-direction: column;
626
- text-align: center;
627
608
  font-size: 0.875rem;
628
- padding: 0.25rem 1rem;
629
- }
630
- .eds-stepper__item__label--active {
631
- font-weight: 600;
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;
632
620
  }
633
- .eds-stepper__item__label.eds-stepper__item__label--active {
621
+ .eds-contrast .eds-overflow-menu__item {
634
622
  color: #181c56;
635
623
  }
636
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
637
- color: #ffffff;
624
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
625
+ background: #e9e9e9;
626
+ color: #949494;
638
627
  }
639
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
640
- color: #181c56;
628
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
629
+ background: #e9e9e9;
630
+ color: #949494;
641
631
  }
642
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
643
- color: #ffffff;
632
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
633
+ cursor: not-allowed;
634
+ background: #e9e9e9;
635
+ color: #949494;
644
636
  }
645
- .eds-stepper__item__square {
646
- height: 0.5rem;
637
+ .eds-overflow-menu__item .eds-icon {
638
+ margin-right: 0.75rem;
647
639
  }
648
- .eds-stepper__item__square--active {
649
- color: inherit;
650
- background: #e9e9e9;
651
- position: relative;
640
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
641
+ background: #d1d4e3;
652
642
  }
653
- .eds-stepper__item__square--active:before {
654
- background: #181c56;
655
- content: "";
656
- position: absolute;
657
- right: calc(50% - 0.2rem);
658
- border-radius: 0.0625rem;
659
- bottom: 0.0625rem;
660
- width: calc( 0.5rem - 0.125rem - 0.01rem );
661
- height: calc( 0.5rem - 0.125rem - 0.01rem );
662
- transform: rotate(45deg);
643
+ .eds-overflow-menu__item:focus {
644
+ outline: none;
663
645
  }
664
- .eds-contrast .eds-stepper__item__square--active:before {
665
- border-left-color: #aeb7e2;
666
- border-left-color: #aeb7e2;
646
+
647
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
648
+ border-top: 0.0625rem solid #e9e9e9;
667
649
  }
668
- .eds-stepper__item__square--active:after {
669
- content: "";
670
- position: absolute;
671
- left: 0;
672
- bottom: 0;
673
- width: 50%;
674
- height: 0.5rem;
675
- background: #181c56;
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;
676
656
  }
677
- .eds-contrast .eds-stepper__item__square--active:after {
678
- background: #aeb7e2;
657
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
658
+ outline: none;
679
659
  }
680
- .eds-contrast .eds-stepper__item__square--active {
681
- background: #aeb7e2;
682
- background: #393d79;
660
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
661
+ box-shadow: 0 0.0625rem 0.1875rem #393d79;
683
662
  }
684
- .eds-stepper__item__square--inactive {
685
- color: #656782;
686
- background: #e9e9e9;
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;
687
668
  }
688
- .eds-contrast .eds-stepper__item__square--inactive {
689
- color: #aeb7e2;
690
- background: #393d79;
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
+ }
691
679
  }
692
- .eds-stepper__item__square--has-been {
693
- color: inherit;
694
- background: #181c56;
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
+ }
695
690
  }
696
- .eds-contrast .eds-stepper__item__square--has-been {
697
- background: #aeb7e2;
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.1",
3
+ "version": "4.1.2",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -23,12 +23,12 @@
23
23
  "lint": "dts lint"
24
24
  },
25
25
  "dependencies": {
26
- "@entur/button": "^2.8.2",
27
- "@entur/expand": "^3.3.13",
26
+ "@entur/button": "^2.8.3",
27
+ "@entur/expand": "^3.3.14",
28
28
  "@entur/icons": "^4.1.2",
29
- "@entur/layout": "^2.1.6",
29
+ "@entur/layout": "^2.1.7",
30
30
  "@entur/tokens": "^3.3.2",
31
- "@entur/typography": "^1.6.13",
31
+ "@entur/typography": "^1.6.14",
32
32
  "@entur/utils": "^0.4.3",
33
33
  "@reach/menu-button": "^0.16.1",
34
34
  "classnames": "^2.3.1"
@@ -37,5 +37,5 @@
37
37
  "react": ">=16.8.0",
38
38
  "react-dom": ">=16.8.0"
39
39
  },
40
- "gitHead": "9e25b2a4a4ab659dc368f51ad0e0b74bee26e1d0"
40
+ "gitHead": "02c1bc4caad8480d21d8560188ba21b972e3370e"
41
41
  }