@entur/menu 4.1.14-alpha.0 → 4.1.14

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 +1 -1
  2. package/dist/styles.css +214 -214
  3. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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.14-alpha.0](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.13...@entur/menu@4.1.14-alpha.0) (2022-10-20)
6
+ ## [4.1.14](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.13...@entur/menu@4.1.14) (2022-10-20)
7
7
 
8
8
  **Note:** Version bump only for package @entur/menu
9
9
 
package/dist/styles.css CHANGED
@@ -3,60 +3,6 @@
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 {
13
- 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;
22
- 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%);
30
- }
31
- .eds-breadcrumb__link:hover {
32
- -webkit-animation: eds-breadcrumb-underline 0.3s ease-in;
33
- animation: eds-breadcrumb-underline 0.3s ease-in;
34
- }
35
- .eds-breadcrumb__link:focus {
36
- outline: none;
37
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
38
- outline-offset: 0.125rem;
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
- }
48
- @keyframes eds-breadcrumb-underline {
49
- from {
50
- background-size: 0% 0.125rem;
51
- }
52
- to {
53
- background-size: 100% 0.125rem;
54
- }
55
- }
56
- .eds-breadcrumb__link--current {
57
- font-weight: 600;
58
- }/* DO NOT CHANGE!*/
59
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
6
  .eds-top-navigation-item {
61
7
  --show-active-line: 0;
62
8
  display: inline-block;
@@ -106,101 +52,118 @@
106
52
  width: 2rem;
107
53
  }/* DO NOT CHANGE!*/
108
54
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
- .eds-overflow-menu__item {
55
+ .eds-stepper {
56
+ display: flex;
57
+ flex-direction: row;
58
+ }
59
+ .eds-stepper__item__container {
60
+ cursor: pointer;
61
+ font-family: inherit;
62
+ text-transform: none;
110
63
  -webkit-appearance: none;
111
64
  -moz-appearance: none;
112
65
  appearance: none;
66
+ background: none;
113
67
  border: none;
114
- font-size: 0.875rem;
115
- font-family: inherit;
116
- color: var(--primary-text-color);
117
- background: #f8f8f8;
118
- display: block;
119
- height: 3rem;
120
- cursor: pointer;
121
- width: 100%;
122
- line-height: 1.375rem;
123
- text-align: left;
124
- padding: 0.75rem 1rem;
125
- opacity: 1;
68
+ margin: 0;
69
+ padding: 0;
70
+ align-items: inherit;
71
+ display: flex;
72
+ flex-grow: 1;
73
+ flex-basis: 0;
74
+ flex-direction: column;
75
+ margin-left: 0.25rem;
126
76
  }
127
- .eds-contrast .eds-overflow-menu__item {
128
- color: #181c56;
77
+ .eds-stepper__item__container--non-interactive {
78
+ cursor: default;
129
79
  }
130
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
131
- background: #e9e9e9;
132
- color: #949494;
80
+ .eds-stepper__item__container:focus {
81
+ outline-offset: 0.125rem;
82
+ outline: none;
83
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
133
84
  }
134
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
135
- background: #e9e9e9;
136
- color: #949494;
85
+ .eds-contrast .eds-stepper__item__container:focus {
86
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
137
87
  }
138
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
139
- cursor: not-allowed;
140
- background: #e9e9e9;
141
- color: #949494;
88
+ .eds-stepper__item__container:first-child {
89
+ margin-left: 0;
142
90
  }
143
- .eds-overflow-menu__item .eds-icon {
144
- margin-right: 0.75rem;
91
+ .eds-stepper__item__label {
92
+ cursor: inherit;
93
+ flex-grow: 1;
94
+ flex-direction: column;
95
+ text-align: center;
96
+ font-size: 0.875rem;
97
+ padding: 0.25rem 1rem;
145
98
  }
146
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
147
- background: #d1d4e3;
99
+ .eds-stepper__item__label--active {
100
+ font-weight: 600;
148
101
  }
149
- .eds-overflow-menu__item:focus {
150
- outline: none;
102
+ .eds-stepper__item__label.eds-stepper__item__label--active {
103
+ color: #181c56;
151
104
  }
152
-
153
- .eds-overflow-menu__item + .eds-overflow-menu__item {
154
- border-top: 0.0625rem solid #e9e9e9;
105
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
106
+ color: #ffffff;
155
107
  }
156
-
157
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
158
- border: 0.0625rem solid #e9e9e9;
159
- border-radius: 0.25rem;
160
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
161
- overflow: hidden;
108
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
109
+ color: #181c56;
162
110
  }
163
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
164
- outline: none;
111
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
112
+ color: #ffffff;
165
113
  }
166
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
167
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
114
+ .eds-stepper__item__square {
115
+ height: 0.5rem;
168
116
  }
169
-
170
- .eds-overflow-menu__menu-list[data-reach-menu-list],
171
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
172
- -webkit-animation: slide-in 0.2s ease-in-out;
173
- animation: slide-in 0.2s ease-in-out;
117
+ .eds-stepper__item__square--active {
118
+ color: inherit;
119
+ background: #e9e9e9;
120
+ position: relative;
174
121
  }
175
-
176
- @-webkit-keyframes slide-in {
177
- 0% {
178
- opacity: 0;
179
- transform: translateY(0.5rem);
180
- }
181
- 100% {
182
- opacity: 1;
183
- transform: translateY(0);
184
- }
122
+ .eds-stepper__item__square--active:before {
123
+ background: #181c56;
124
+ content: "";
125
+ position: absolute;
126
+ right: calc(50% - 0.2rem);
127
+ border-radius: 0.0625rem;
128
+ bottom: 0.0625rem;
129
+ width: calc( 0.5rem - 0.125rem - 0.01rem );
130
+ height: calc( 0.5rem - 0.125rem - 0.01rem );
131
+ transform: rotate(45deg);
185
132
  }
186
-
187
- @keyframes slide-in {
188
- 0% {
189
- opacity: 0;
190
- transform: translateY(0.5rem);
191
- }
192
- 100% {
193
- opacity: 1;
194
- transform: translateY(0);
195
- }
133
+ .eds-contrast .eds-stepper__item__square--active:before {
134
+ border-left-color: #aeb7e2;
135
+ border-left-color: #aeb7e2;
196
136
  }
197
- [data-reach-menu-popover] {
137
+ .eds-stepper__item__square--active:after {
138
+ content: "";
198
139
  position: absolute;
199
- z-index: 30;
140
+ left: 0;
141
+ bottom: 0;
142
+ width: 50%;
143
+ height: 0.5rem;
144
+ background: #181c56;
200
145
  }
201
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
202
- position: relative;
203
- right: calc(100% - 2rem);
146
+ .eds-contrast .eds-stepper__item__square--active:after {
147
+ background: #aeb7e2;
148
+ }
149
+ .eds-contrast .eds-stepper__item__square--active {
150
+ background: #aeb7e2;
151
+ background: #393d79;
152
+ }
153
+ .eds-stepper__item__square--inactive {
154
+ color: #656782;
155
+ background: #e9e9e9;
156
+ }
157
+ .eds-contrast .eds-stepper__item__square--inactive {
158
+ color: #aeb7e2;
159
+ background: #393d79;
160
+ }
161
+ .eds-stepper__item__square--has-been {
162
+ color: inherit;
163
+ background: #181c56;
164
+ }
165
+ .eds-contrast .eds-stepper__item__square--has-been {
166
+ background: #aeb7e2;
204
167
  }/* DO NOT CHANGE!*/
205
168
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
206
169
  /* DO NOT CHANGE!*/
@@ -422,118 +385,155 @@
422
385
  outline: 2px solid #ffffff;
423
386
  }/* DO NOT CHANGE!*/
424
387
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
425
- .eds-stepper {
426
- display: flex;
427
- flex-direction: row;
428
- }
429
- .eds-stepper__item__container {
430
- cursor: pointer;
431
- font-family: inherit;
432
- text-transform: none;
433
- -webkit-appearance: none;
434
- -moz-appearance: none;
435
- appearance: none;
436
- background: none;
437
- border: none;
388
+ .eds-breadcrumb {
389
+ list-style: none;
438
390
  margin: 0;
439
391
  padding: 0;
440
- align-items: inherit;
441
- display: flex;
442
- flex-grow: 1;
443
- flex-basis: 0;
444
- flex-direction: column;
445
- margin-left: 0.25rem;
446
392
  }
447
- .eds-stepper__item__container--non-interactive {
448
- cursor: default;
393
+
394
+ .eds-breadcrumb__item {
395
+ display: inline-block;
449
396
  }
450
- .eds-stepper__item__container:focus {
451
- outline-offset: 0.125rem;
397
+
398
+ .eds-breadcrumb__separator {
399
+ margin: 0 0.25rem 0 0.25rem;
400
+ }
401
+
402
+ .eds-breadcrumb__link {
403
+ text-decoration: none;
404
+ color: inherit;
405
+ background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
406
+ background-repeat: no-repeat;
407
+ background-size: 100% 0.125rem;
408
+ background-position: 0 100%;
409
+ }
410
+ .eds-contrast .eds-breadcrumb__link {
411
+ background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
412
+ }
413
+ .eds-breadcrumb__link:hover {
414
+ -webkit-animation: eds-breadcrumb-underline 0.3s ease-in;
415
+ animation: eds-breadcrumb-underline 0.3s ease-in;
416
+ }
417
+ .eds-breadcrumb__link:focus {
452
418
  outline: none;
453
419
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
420
+ outline-offset: 0.125rem;
454
421
  }
455
- .eds-contrast .eds-stepper__item__container:focus {
456
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
457
- }
458
- .eds-stepper__item__container:first-child {
459
- margin-left: 0;
422
+ @-webkit-keyframes eds-breadcrumb-underline {
423
+ from {
424
+ background-size: 0% 0.125rem;
425
+ }
426
+ to {
427
+ background-size: 100% 0.125rem;
428
+ }
460
429
  }
461
- .eds-stepper__item__label {
462
- cursor: inherit;
463
- flex-grow: 1;
464
- flex-direction: column;
465
- text-align: center;
466
- font-size: 0.875rem;
467
- padding: 0.25rem 1rem;
430
+ @keyframes eds-breadcrumb-underline {
431
+ from {
432
+ background-size: 0% 0.125rem;
433
+ }
434
+ to {
435
+ background-size: 100% 0.125rem;
436
+ }
468
437
  }
469
- .eds-stepper__item__label--active {
438
+ .eds-breadcrumb__link--current {
470
439
  font-weight: 600;
440
+ }/* DO NOT CHANGE!*/
441
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
442
+ .eds-overflow-menu__item {
443
+ -webkit-appearance: none;
444
+ -moz-appearance: none;
445
+ appearance: none;
446
+ border: none;
447
+ font-size: 0.875rem;
448
+ font-family: inherit;
449
+ color: var(--primary-text-color);
450
+ background: #f8f8f8;
451
+ display: block;
452
+ height: 3rem;
453
+ cursor: pointer;
454
+ width: 100%;
455
+ line-height: 1.375rem;
456
+ text-align: left;
457
+ padding: 0.75rem 1rem;
458
+ opacity: 1;
471
459
  }
472
- .eds-stepper__item__label.eds-stepper__item__label--active {
460
+ .eds-contrast .eds-overflow-menu__item {
473
461
  color: #181c56;
474
462
  }
475
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
476
- color: #ffffff;
463
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
464
+ background: #e9e9e9;
465
+ color: #949494;
477
466
  }
478
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
479
- color: #181c56;
467
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
468
+ background: #e9e9e9;
469
+ color: #949494;
480
470
  }
481
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
482
- color: #ffffff;
471
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
472
+ cursor: not-allowed;
473
+ background: #e9e9e9;
474
+ color: #949494;
483
475
  }
484
- .eds-stepper__item__square {
485
- height: 0.5rem;
476
+ .eds-overflow-menu__item .eds-icon {
477
+ margin-right: 0.75rem;
486
478
  }
487
- .eds-stepper__item__square--active {
488
- color: inherit;
489
- background: #e9e9e9;
490
- position: relative;
479
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
480
+ background: #d1d4e3;
491
481
  }
492
- .eds-stepper__item__square--active:before {
493
- background: #181c56;
494
- content: "";
495
- position: absolute;
496
- right: calc(50% - 0.2rem);
497
- border-radius: 0.0625rem;
498
- bottom: 0.0625rem;
499
- width: calc( 0.5rem - 0.125rem - 0.01rem );
500
- height: calc( 0.5rem - 0.125rem - 0.01rem );
501
- transform: rotate(45deg);
482
+ .eds-overflow-menu__item:focus {
483
+ outline: none;
502
484
  }
503
- .eds-contrast .eds-stepper__item__square--active:before {
504
- border-left-color: #aeb7e2;
505
- border-left-color: #aeb7e2;
485
+
486
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
487
+ border-top: 0.0625rem solid #e9e9e9;
506
488
  }
507
- .eds-stepper__item__square--active:after {
508
- content: "";
509
- position: absolute;
510
- left: 0;
511
- bottom: 0;
512
- width: 50%;
513
- height: 0.5rem;
514
- background: #181c56;
489
+
490
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
491
+ border: 0.0625rem solid #e9e9e9;
492
+ border-radius: 0.25rem;
493
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
494
+ overflow: hidden;
515
495
  }
516
- .eds-contrast .eds-stepper__item__square--active:after {
517
- background: #aeb7e2;
496
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
497
+ outline: none;
518
498
  }
519
- .eds-contrast .eds-stepper__item__square--active {
520
- background: #aeb7e2;
521
- background: #393d79;
499
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
500
+ box-shadow: 0 0.0625rem 0.1875rem #393d79;
522
501
  }
523
- .eds-stepper__item__square--inactive {
524
- color: #656782;
525
- background: #e9e9e9;
502
+
503
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
504
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
505
+ -webkit-animation: slide-in 0.2s ease-in-out;
506
+ animation: slide-in 0.2s ease-in-out;
526
507
  }
527
- .eds-contrast .eds-stepper__item__square--inactive {
528
- color: #aeb7e2;
529
- background: #393d79;
508
+
509
+ @-webkit-keyframes slide-in {
510
+ 0% {
511
+ opacity: 0;
512
+ transform: translateY(0.5rem);
513
+ }
514
+ 100% {
515
+ opacity: 1;
516
+ transform: translateY(0);
517
+ }
530
518
  }
531
- .eds-stepper__item__square--has-been {
532
- color: inherit;
533
- background: #181c56;
519
+
520
+ @keyframes slide-in {
521
+ 0% {
522
+ opacity: 0;
523
+ transform: translateY(0.5rem);
524
+ }
525
+ 100% {
526
+ opacity: 1;
527
+ transform: translateY(0);
528
+ }
534
529
  }
535
- .eds-contrast .eds-stepper__item__square--has-been {
536
- background: #aeb7e2;
530
+ [data-reach-menu-popover] {
531
+ position: absolute;
532
+ z-index: 30;
533
+ }
534
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
535
+ position: relative;
536
+ right: calc(100% - 2rem);
537
537
  }/* DO NOT CHANGE!*/
538
538
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
539
539
  .eds-pagination {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.14-alpha.0",
3
+ "version": "4.1.14",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -23,14 +23,14 @@
23
23
  "lint": "dts lint"
24
24
  },
25
25
  "dependencies": {
26
- "@entur/a11y": "^0.2.50-alpha.0",
27
- "@entur/button": "^2.10.5-alpha.0",
28
- "@entur/expand": "^3.3.22-alpha.0",
29
- "@entur/icons": "^5.0.1-alpha.0",
30
- "@entur/layout": "^2.1.12-alpha.0",
26
+ "@entur/a11y": "^0.2.49",
27
+ "@entur/button": "^2.10.4",
28
+ "@entur/expand": "^3.3.22",
29
+ "@entur/icons": "^5.1.0",
30
+ "@entur/layout": "^2.1.11",
31
31
  "@entur/tokens": "^3.4.1",
32
- "@entur/typography": "^1.7.1-alpha.0",
33
- "@entur/utils": "^0.4.6-alpha.0",
32
+ "@entur/typography": "^1.7.0",
33
+ "@entur/utils": "^0.4.5",
34
34
  "@reach/menu-button": "^0.16.1",
35
35
  "classnames": "^2.3.1"
36
36
  },
@@ -38,5 +38,5 @@
38
38
  "react": ">=16.8.0",
39
39
  "react-dom": ">=16.8.0"
40
40
  },
41
- "gitHead": "497df350c3af082f714f461c7089a1fec1b4f8c9"
41
+ "gitHead": "9d0450ea38d34dffbd45ab0b65eb9f02f499392b"
42
42
  }