@entur/menu 4.0.6 → 4.0.9

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/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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.0.9](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.0.8...@entur/menu@4.0.9) (2022-04-20)
7
+
8
+ **Note:** Version bump only for package @entur/menu
9
+
10
+ ## [4.0.8](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.0.7...@entur/menu@4.0.8) (2022-04-19)
11
+
12
+ **Note:** Version bump only for package @entur/menu
13
+
14
+ ## [4.0.7](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.0.6...@entur/menu@4.0.7) (2022-03-01)
15
+
16
+ **Note:** Version bump only for package @entur/menu
17
+
6
18
  ## [4.0.6](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.0.5...@entur/menu@4.0.6) (2022-02-09)
7
19
 
8
20
  **Note:** Version bump only for package @entur/menu
package/dist/styles.css CHANGED
@@ -29,13 +29,22 @@
29
29
  background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
30
30
  }
31
31
  .eds-breadcrumb__link:hover {
32
- animation: eds-breadcrumb-underline 0.3s ease-in;
32
+ -webkit-animation: eds-breadcrumb-underline 0.3s ease-in;
33
+ animation: eds-breadcrumb-underline 0.3s ease-in;
33
34
  }
34
35
  .eds-breadcrumb__link:focus {
35
36
  outline: none;
36
37
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
37
38
  outline-offset: 0.125rem;
38
39
  }
40
+ @-webkit-keyframes eds-breadcrumb-underline {
41
+ from {
42
+ background-size: 0% 0.125rem;
43
+ }
44
+ to {
45
+ background-size: 100% 0.125rem;
46
+ }
47
+ }
39
48
  @keyframes eds-breadcrumb-underline {
40
49
  from {
41
50
  background-size: 0% 0.125rem;
@@ -48,118 +57,6 @@
48
57
  font-weight: 600;
49
58
  }/* DO NOT CHANGE!*/
50
59
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
51
- .eds-stepper {
52
- display: flex;
53
- flex-direction: row;
54
- }
55
- .eds-stepper__item__container {
56
- cursor: pointer;
57
- font-family: inherit;
58
- text-transform: none;
59
- appearance: none;
60
- background: none;
61
- border: none;
62
- margin: 0;
63
- padding: 0;
64
- align-items: inherit;
65
- display: flex;
66
- flex-grow: 1;
67
- flex-basis: 0;
68
- flex-direction: column;
69
- margin-left: 0.25rem;
70
- }
71
- .eds-stepper__item__container--non-interactive {
72
- cursor: default;
73
- }
74
- .eds-stepper__item__container:focus {
75
- outline-offset: 0.125rem;
76
- outline: none;
77
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
78
- }
79
- .eds-contrast .eds-stepper__item__container:focus {
80
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
81
- }
82
- .eds-stepper__item__container:first-child {
83
- margin-left: 0;
84
- }
85
- .eds-stepper__item__label {
86
- cursor: inherit;
87
- flex-grow: 1;
88
- flex-direction: column;
89
- text-align: center;
90
- font-size: 0.875rem;
91
- padding: 0.25rem 1rem;
92
- }
93
- .eds-stepper__item__label--active {
94
- font-weight: 600;
95
- }
96
- .eds-stepper__item__label.eds-stepper__item__label--active {
97
- color: #181c56;
98
- }
99
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
100
- color: #ffffff;
101
- }
102
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
103
- color: #181c56;
104
- }
105
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
106
- color: #ffffff;
107
- }
108
- .eds-stepper__item__square {
109
- height: 0.5rem;
110
- }
111
- .eds-stepper__item__square--active {
112
- color: inherit;
113
- background: #e9e9e9;
114
- position: relative;
115
- }
116
- .eds-stepper__item__square--active:before {
117
- background: #181c56;
118
- content: "";
119
- position: absolute;
120
- right: calc(50% - 0.2rem);
121
- border-radius: 0.0625rem;
122
- bottom: 0.0625rem;
123
- width: calc( 0.5rem - 0.125rem - 0.01rem );
124
- height: calc( 0.5rem - 0.125rem - 0.01rem );
125
- transform: rotate(45deg);
126
- }
127
- .eds-contrast .eds-stepper__item__square--active:before {
128
- border-left-color: #aeb7e2;
129
- border-left-color: #aeb7e2;
130
- }
131
- .eds-stepper__item__square--active:after {
132
- content: "";
133
- position: absolute;
134
- left: 0;
135
- bottom: 0;
136
- width: 50%;
137
- height: 0.5rem;
138
- background: #181c56;
139
- }
140
- .eds-contrast .eds-stepper__item__square--active:after {
141
- background: #aeb7e2;
142
- }
143
- .eds-contrast .eds-stepper__item__square--active {
144
- background: #aeb7e2;
145
- background: #393d79;
146
- }
147
- .eds-stepper__item__square--inactive {
148
- color: #656782;
149
- background: #e9e9e9;
150
- }
151
- .eds-contrast .eds-stepper__item__square--inactive {
152
- color: #aeb7e2;
153
- background: #393d79;
154
- }
155
- .eds-stepper__item__square--has-been {
156
- color: inherit;
157
- background: #181c56;
158
- }
159
- .eds-contrast .eds-stepper__item__square--has-been {
160
- background: #aeb7e2;
161
- }/* DO NOT CHANGE!*/
162
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
163
60
  /* DO NOT CHANGE!*/
164
61
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
165
62
  .eds-side-navigation,
@@ -267,7 +164,9 @@
267
164
  }
268
165
 
269
166
  .eds-side-navigation__click-target {
270
- appearance: none;
167
+ -webkit-appearance: none;
168
+ -moz-appearance: none;
169
+ appearance: none;
271
170
  background: none;
272
171
  border: 0;
273
172
  border-bottom: 0.125rem solid #e9e9e9;
@@ -334,7 +233,9 @@
334
233
 
335
234
  .eds-side-navigation-group__trigger {
336
235
  align-items: center;
337
- appearance: none;
236
+ -webkit-appearance: none;
237
+ -moz-appearance: none;
238
+ appearance: none;
338
239
  background: none;
339
240
  border: none;
340
241
  border-radius: 0;
@@ -375,55 +276,10 @@
375
276
  outline: 2px solid #ffffff;
376
277
  }/* DO NOT CHANGE!*/
377
278
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
378
- .eds-top-navigation-item {
379
- --show-active-line: 0;
380
- display: inline-block;
381
- cursor: pointer;
382
- color: inherit;
383
- text-decoration: none;
384
- position: relative;
385
- padding: 1rem;
386
- min-width: 5rem;
387
- width: fit-content;
388
- text-align: center;
389
- font-family: inherit;
390
- font-size: 1rem;
391
- font-weight: 600;
392
- }
393
- .eds-top-navigation-item::after {
394
- content: "";
395
- display: block;
396
- bottom: 1rem;
397
- height: 0.1875rem;
398
- width: 0;
399
- margin: 0 auto;
400
- opacity: var(--show-active-line);
401
- background: #ff5959;
402
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
403
- }
404
- .eds-top-navigation-item:focus {
405
- outline-offset: 0.125rem;
406
- outline: none;
407
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
408
- }
409
- .eds-contrast .eds-top-navigation-item:focus {
410
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
411
- }
412
- .eds-top-navigation-item:hover {
413
- --show-active-line: 1;
414
- }
415
- .eds-top-navigation-item:hover::after {
416
- width: 2rem;
417
- }
418
- .eds-top-navigation-item--active {
419
- --show-active-line: 1;
420
- }
421
- .eds-top-navigation-item--active::after {
422
- width: 2rem;
423
- }/* DO NOT CHANGE!*/
424
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
425
279
  .eds-overflow-menu__item {
426
- appearance: none;
280
+ -webkit-appearance: none;
281
+ -moz-appearance: none;
282
+ appearance: none;
427
283
  border: none;
428
284
  font-size: 0.875rem;
429
285
  font-family: inherit;
@@ -483,7 +339,19 @@
483
339
 
484
340
  .eds-overflow-menu__menu-list[data-reach-menu-list],
485
341
  .eds-overflow-menu__menu-list[data-reach-menu-items] {
486
- animation: slide-in 0.2s ease-in-out;
342
+ -webkit-animation: slide-in 0.2s ease-in-out;
343
+ animation: slide-in 0.2s ease-in-out;
344
+ }
345
+
346
+ @-webkit-keyframes slide-in {
347
+ 0% {
348
+ opacity: 0;
349
+ transform: translateY(0.5rem);
350
+ }
351
+ 100% {
352
+ opacity: 1;
353
+ transform: translateY(0);
354
+ }
487
355
  }
488
356
 
489
357
  @keyframes slide-in {
@@ -505,6 +373,120 @@
505
373
  right: calc(100% - 2rem);
506
374
  }/* DO NOT CHANGE!*/
507
375
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
376
+ .eds-stepper {
377
+ display: flex;
378
+ flex-direction: row;
379
+ }
380
+ .eds-stepper__item__container {
381
+ cursor: pointer;
382
+ font-family: inherit;
383
+ text-transform: none;
384
+ -webkit-appearance: none;
385
+ -moz-appearance: none;
386
+ appearance: none;
387
+ background: none;
388
+ border: none;
389
+ margin: 0;
390
+ padding: 0;
391
+ align-items: inherit;
392
+ display: flex;
393
+ flex-grow: 1;
394
+ flex-basis: 0;
395
+ flex-direction: column;
396
+ margin-left: 0.25rem;
397
+ }
398
+ .eds-stepper__item__container--non-interactive {
399
+ cursor: default;
400
+ }
401
+ .eds-stepper__item__container:focus {
402
+ outline-offset: 0.125rem;
403
+ outline: none;
404
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
405
+ }
406
+ .eds-contrast .eds-stepper__item__container:focus {
407
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
408
+ }
409
+ .eds-stepper__item__container:first-child {
410
+ margin-left: 0;
411
+ }
412
+ .eds-stepper__item__label {
413
+ cursor: inherit;
414
+ flex-grow: 1;
415
+ flex-direction: column;
416
+ text-align: center;
417
+ font-size: 0.875rem;
418
+ padding: 0.25rem 1rem;
419
+ }
420
+ .eds-stepper__item__label--active {
421
+ font-weight: 600;
422
+ }
423
+ .eds-stepper__item__label.eds-stepper__item__label--active {
424
+ color: #181c56;
425
+ }
426
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
427
+ color: #ffffff;
428
+ }
429
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
430
+ color: #181c56;
431
+ }
432
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
433
+ color: #ffffff;
434
+ }
435
+ .eds-stepper__item__square {
436
+ height: 0.5rem;
437
+ }
438
+ .eds-stepper__item__square--active {
439
+ color: inherit;
440
+ background: #e9e9e9;
441
+ position: relative;
442
+ }
443
+ .eds-stepper__item__square--active:before {
444
+ background: #181c56;
445
+ content: "";
446
+ position: absolute;
447
+ right: calc(50% - 0.2rem);
448
+ border-radius: 0.0625rem;
449
+ bottom: 0.0625rem;
450
+ width: calc( 0.5rem - 0.125rem - 0.01rem );
451
+ height: calc( 0.5rem - 0.125rem - 0.01rem );
452
+ transform: rotate(45deg);
453
+ }
454
+ .eds-contrast .eds-stepper__item__square--active:before {
455
+ border-left-color: #aeb7e2;
456
+ border-left-color: #aeb7e2;
457
+ }
458
+ .eds-stepper__item__square--active:after {
459
+ content: "";
460
+ position: absolute;
461
+ left: 0;
462
+ bottom: 0;
463
+ width: 50%;
464
+ height: 0.5rem;
465
+ background: #181c56;
466
+ }
467
+ .eds-contrast .eds-stepper__item__square--active:after {
468
+ background: #aeb7e2;
469
+ }
470
+ .eds-contrast .eds-stepper__item__square--active {
471
+ background: #aeb7e2;
472
+ background: #393d79;
473
+ }
474
+ .eds-stepper__item__square--inactive {
475
+ color: #656782;
476
+ background: #e9e9e9;
477
+ }
478
+ .eds-contrast .eds-stepper__item__square--inactive {
479
+ color: #aeb7e2;
480
+ background: #393d79;
481
+ }
482
+ .eds-stepper__item__square--has-been {
483
+ color: inherit;
484
+ background: #181c56;
485
+ }
486
+ .eds-contrast .eds-stepper__item__square--has-been {
487
+ background: #aeb7e2;
488
+ }/* DO NOT CHANGE!*/
489
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
508
490
  .eds-pagination {
509
491
  align-items: center;
510
492
  display: flex;
@@ -528,7 +510,9 @@
528
510
  }
529
511
 
530
512
  .eds-pagination-menu__menu-button {
531
- appearance: none;
513
+ -webkit-appearance: none;
514
+ -moz-appearance: none;
515
+ appearance: none;
532
516
  background: transparent;
533
517
  border: 0.0625rem solid #d1d3d3;
534
518
  border-radius: 0.25rem;
@@ -555,7 +539,9 @@
555
539
 
556
540
  .eds-pagination__page {
557
541
  align-items: center;
558
- appearance: none;
542
+ -webkit-appearance: none;
543
+ -moz-appearance: none;
544
+ appearance: none;
559
545
  background: transparent;
560
546
  border: 0.0625rem solid #d1d3d3;
561
547
  border-color: #d1d3d3;
@@ -570,7 +556,10 @@
570
556
  margin: 0 0.125rem;
571
557
  padding: 0 0.25rem;
572
558
  transition: background 0.1s ease-out, border-color 0.1s ease-out;
573
- user-select: none;
559
+ -webkit-user-select: none;
560
+ -moz-user-select: none;
561
+ -ms-user-select: none;
562
+ user-select: none;
574
563
  min-width: 2rem;
575
564
  }
576
565
  .eds-contrast .eds-pagination__page {
@@ -610,7 +599,10 @@
610
599
  font-size: 1.5rem;
611
600
  height: 2rem;
612
601
  justify-content: center;
613
- user-select: none;
602
+ -webkit-user-select: none;
603
+ -moz-user-select: none;
604
+ -ms-user-select: none;
605
+ user-select: none;
614
606
  width: 2rem;
615
607
  }
616
608
 
@@ -627,7 +619,9 @@
627
619
  }
628
620
 
629
621
  .eds-pagination__input-field {
630
- appearance: none;
622
+ -webkit-appearance: none;
623
+ -moz-appearance: none;
624
+ appearance: none;
631
625
  background: transparent;
632
626
  border: 0.0625rem solid #d1d3d3;
633
627
  border-radius: 0.25rem;
@@ -639,6 +633,56 @@
639
633
  width: 2rem;
640
634
  }
641
635
  .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
642
- appearance: none;
636
+ -webkit-appearance: none;
637
+ appearance: none;
643
638
  margin: 0;
639
+ }/* DO NOT CHANGE!*/
640
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
641
+ .eds-top-navigation-item {
642
+ --show-active-line: 0;
643
+ display: inline-block;
644
+ cursor: pointer;
645
+ color: inherit;
646
+ text-decoration: none;
647
+ position: relative;
648
+ padding: 1rem;
649
+ min-width: 5rem;
650
+ width: -webkit-fit-content;
651
+ width: -moz-fit-content;
652
+ width: fit-content;
653
+ text-align: center;
654
+ font-family: inherit;
655
+ font-size: 1rem;
656
+ font-weight: 600;
657
+ }
658
+ .eds-top-navigation-item::after {
659
+ content: "";
660
+ display: block;
661
+ bottom: 1rem;
662
+ height: 0.1875rem;
663
+ width: 0;
664
+ margin: 0 auto;
665
+ opacity: var(--show-active-line);
666
+ background: #ff5959;
667
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
668
+ }
669
+ .eds-top-navigation-item:focus {
670
+ outline-offset: 0.125rem;
671
+ outline: none;
672
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
673
+ }
674
+ .eds-contrast .eds-top-navigation-item:focus {
675
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
676
+ }
677
+ .eds-top-navigation-item:hover {
678
+ --show-active-line: 1;
679
+ }
680
+ .eds-top-navigation-item:hover::after {
681
+ width: 2rem;
682
+ }
683
+ .eds-top-navigation-item--active {
684
+ --show-active-line: 1;
685
+ }
686
+ .eds-top-navigation-item--active::after {
687
+ width: 2rem;
644
688
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.0.6",
3
+ "version": "4.0.9",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -24,8 +24,8 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@entur/button": "^2.8.0",
27
- "@entur/expand": "^3.3.7",
28
- "@entur/icons": "^3.4.1",
27
+ "@entur/expand": "^3.3.10",
28
+ "@entur/icons": "^4.1.0",
29
29
  "@entur/layout": "^2.1.4",
30
30
  "@entur/tokens": "^3.3.1",
31
31
  "@entur/typography": "^1.6.11",
@@ -37,5 +37,5 @@
37
37
  "react": ">=16.8.0",
38
38
  "react-dom": ">=16.8.0"
39
39
  },
40
- "gitHead": "61e643371cfc5653c93160b7c220152e5b2bafeb"
40
+ "gitHead": "c10b4f0f9ecda0126bc916b80ca694cf8d58e399"
41
41
  }