@entur/menu 4.1.4 → 4.1.5

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,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.5](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.4...@entur/menu@4.1.5) (2022-07-05)
7
+
8
+ **Note:** Version bump only for package @entur/menu
9
+
6
10
  ## [4.1.4](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.3...@entur/menu@4.1.4) (2022-06-28)
7
11
 
8
12
  **Note:** Version bump only for package @entur/menu
package/dist/styles.css CHANGED
@@ -106,6 +106,217 @@
106
106
  width: 2rem;
107
107
  }/* DO NOT CHANGE!*/
108
108
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
+ .eds-overflow-menu__item {
110
+ -webkit-appearance: none;
111
+ -moz-appearance: none;
112
+ appearance: none;
113
+ 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;
126
+ }
127
+ .eds-contrast .eds-overflow-menu__item {
128
+ color: #181c56;
129
+ }
130
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
131
+ background: #e9e9e9;
132
+ color: #949494;
133
+ }
134
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
135
+ background: #e9e9e9;
136
+ color: #949494;
137
+ }
138
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
139
+ cursor: not-allowed;
140
+ background: #e9e9e9;
141
+ color: #949494;
142
+ }
143
+ .eds-overflow-menu__item .eds-icon {
144
+ margin-right: 0.75rem;
145
+ }
146
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
147
+ background: #d1d4e3;
148
+ }
149
+ .eds-overflow-menu__item:focus {
150
+ outline: none;
151
+ }
152
+
153
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
154
+ border-top: 0.0625rem solid #e9e9e9;
155
+ }
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;
162
+ }
163
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
164
+ outline: none;
165
+ }
166
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
167
+ box-shadow: 0 0.0625rem 0.1875rem #393d79;
168
+ }
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;
174
+ }
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
+ }
185
+ }
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
+ }
196
+ }
197
+ [data-reach-menu-popover] {
198
+ position: absolute;
199
+ z-index: 30;
200
+ }
201
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
202
+ position: relative;
203
+ right: calc(100% - 2rem);
204
+ }/* DO NOT CHANGE!*/
205
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
206
+ .eds-stepper {
207
+ display: flex;
208
+ flex-direction: row;
209
+ }
210
+ .eds-stepper__item__container {
211
+ cursor: pointer;
212
+ font-family: inherit;
213
+ text-transform: none;
214
+ -webkit-appearance: none;
215
+ -moz-appearance: none;
216
+ appearance: none;
217
+ background: none;
218
+ border: none;
219
+ margin: 0;
220
+ padding: 0;
221
+ align-items: inherit;
222
+ display: flex;
223
+ flex-grow: 1;
224
+ flex-basis: 0;
225
+ flex-direction: column;
226
+ margin-left: 0.25rem;
227
+ }
228
+ .eds-stepper__item__container--non-interactive {
229
+ cursor: default;
230
+ }
231
+ .eds-stepper__item__container:focus {
232
+ outline-offset: 0.125rem;
233
+ outline: none;
234
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
235
+ }
236
+ .eds-contrast .eds-stepper__item__container:focus {
237
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
238
+ }
239
+ .eds-stepper__item__container:first-child {
240
+ margin-left: 0;
241
+ }
242
+ .eds-stepper__item__label {
243
+ cursor: inherit;
244
+ flex-grow: 1;
245
+ flex-direction: column;
246
+ text-align: center;
247
+ font-size: 0.875rem;
248
+ padding: 0.25rem 1rem;
249
+ }
250
+ .eds-stepper__item__label--active {
251
+ font-weight: 600;
252
+ }
253
+ .eds-stepper__item__label.eds-stepper__item__label--active {
254
+ color: #181c56;
255
+ }
256
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
257
+ color: #ffffff;
258
+ }
259
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
260
+ color: #181c56;
261
+ }
262
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
263
+ color: #ffffff;
264
+ }
265
+ .eds-stepper__item__square {
266
+ height: 0.5rem;
267
+ }
268
+ .eds-stepper__item__square--active {
269
+ color: inherit;
270
+ background: #e9e9e9;
271
+ position: relative;
272
+ }
273
+ .eds-stepper__item__square--active:before {
274
+ background: #181c56;
275
+ content: "";
276
+ position: absolute;
277
+ right: calc(50% - 0.2rem);
278
+ border-radius: 0.0625rem;
279
+ bottom: 0.0625rem;
280
+ width: calc( 0.5rem - 0.125rem - 0.01rem );
281
+ height: calc( 0.5rem - 0.125rem - 0.01rem );
282
+ transform: rotate(45deg);
283
+ }
284
+ .eds-contrast .eds-stepper__item__square--active:before {
285
+ border-left-color: #aeb7e2;
286
+ border-left-color: #aeb7e2;
287
+ }
288
+ .eds-stepper__item__square--active:after {
289
+ content: "";
290
+ position: absolute;
291
+ left: 0;
292
+ bottom: 0;
293
+ width: 50%;
294
+ height: 0.5rem;
295
+ background: #181c56;
296
+ }
297
+ .eds-contrast .eds-stepper__item__square--active:after {
298
+ background: #aeb7e2;
299
+ }
300
+ .eds-contrast .eds-stepper__item__square--active {
301
+ background: #aeb7e2;
302
+ background: #393d79;
303
+ }
304
+ .eds-stepper__item__square--inactive {
305
+ color: #656782;
306
+ background: #e9e9e9;
307
+ }
308
+ .eds-contrast .eds-stepper__item__square--inactive {
309
+ color: #aeb7e2;
310
+ background: #393d79;
311
+ }
312
+ .eds-stepper__item__square--has-been {
313
+ color: inherit;
314
+ background: #181c56;
315
+ }
316
+ .eds-contrast .eds-stepper__item__square--has-been {
317
+ background: #aeb7e2;
318
+ }/* DO NOT CHANGE!*/
319
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
320
  .eds-pagination {
110
321
  align-items: center;
111
322
  display: flex;
@@ -484,215 +695,4 @@
484
695
  }
485
696
  .eds-contrast .eds-side-navigation-group__trigger:focus {
486
697
  outline: 2px solid #ffffff;
487
- }/* DO NOT CHANGE!*/
488
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
489
- .eds-overflow-menu__item {
490
- -webkit-appearance: none;
491
- -moz-appearance: none;
492
- appearance: none;
493
- border: none;
494
- font-size: 0.875rem;
495
- font-family: inherit;
496
- color: var(--primary-text-color);
497
- background: #f8f8f8;
498
- display: block;
499
- height: 3rem;
500
- cursor: pointer;
501
- width: 100%;
502
- line-height: 1.375rem;
503
- text-align: left;
504
- padding: 0.75rem 1rem;
505
- opacity: 1;
506
- }
507
- .eds-contrast .eds-overflow-menu__item {
508
- color: #181c56;
509
- }
510
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
511
- background: #e9e9e9;
512
- color: #949494;
513
- }
514
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
515
- background: #e9e9e9;
516
- color: #949494;
517
- }
518
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
519
- cursor: not-allowed;
520
- background: #e9e9e9;
521
- color: #949494;
522
- }
523
- .eds-overflow-menu__item .eds-icon {
524
- margin-right: 0.75rem;
525
- }
526
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
527
- background: #d1d4e3;
528
- }
529
- .eds-overflow-menu__item:focus {
530
- outline: none;
531
- }
532
-
533
- .eds-overflow-menu__item + .eds-overflow-menu__item {
534
- border-top: 0.0625rem solid #e9e9e9;
535
- }
536
-
537
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
538
- border: 0.0625rem solid #e9e9e9;
539
- border-radius: 0.25rem;
540
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
541
- overflow: hidden;
542
- }
543
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
544
- outline: none;
545
- }
546
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
547
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
548
- }
549
-
550
- .eds-overflow-menu__menu-list[data-reach-menu-list],
551
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
552
- -webkit-animation: slide-in 0.2s ease-in-out;
553
- animation: slide-in 0.2s ease-in-out;
554
- }
555
-
556
- @-webkit-keyframes slide-in {
557
- 0% {
558
- opacity: 0;
559
- transform: translateY(0.5rem);
560
- }
561
- 100% {
562
- opacity: 1;
563
- transform: translateY(0);
564
- }
565
- }
566
-
567
- @keyframes slide-in {
568
- 0% {
569
- opacity: 0;
570
- transform: translateY(0.5rem);
571
- }
572
- 100% {
573
- opacity: 1;
574
- transform: translateY(0);
575
- }
576
- }
577
- [data-reach-menu-popover] {
578
- position: absolute;
579
- z-index: 30;
580
- }
581
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
582
- position: relative;
583
- right: calc(100% - 2rem);
584
- }/* DO NOT CHANGE!*/
585
- /* 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;
594
- -webkit-appearance: none;
595
- -moz-appearance: none;
596
- appearance: none;
597
- background: none;
598
- 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
- font-size: 0.875rem;
628
- padding: 0.25rem 1rem;
629
- }
630
- .eds-stepper__item__label--active {
631
- font-weight: 600;
632
- }
633
- .eds-stepper__item__label.eds-stepper__item__label--active {
634
- color: #181c56;
635
- }
636
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
637
- color: #ffffff;
638
- }
639
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
640
- color: #181c56;
641
- }
642
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
643
- color: #ffffff;
644
- }
645
- .eds-stepper__item__square {
646
- height: 0.5rem;
647
- }
648
- .eds-stepper__item__square--active {
649
- color: inherit;
650
- background: #e9e9e9;
651
- position: relative;
652
- }
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);
663
- }
664
- .eds-contrast .eds-stepper__item__square--active:before {
665
- border-left-color: #aeb7e2;
666
- border-left-color: #aeb7e2;
667
- }
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;
676
- }
677
- .eds-contrast .eds-stepper__item__square--active:after {
678
- background: #aeb7e2;
679
- }
680
- .eds-contrast .eds-stepper__item__square--active {
681
- background: #aeb7e2;
682
- background: #393d79;
683
- }
684
- .eds-stepper__item__square--inactive {
685
- color: #656782;
686
- background: #e9e9e9;
687
- }
688
- .eds-contrast .eds-stepper__item__square--inactive {
689
- color: #aeb7e2;
690
- background: #393d79;
691
- }
692
- .eds-stepper__item__square--has-been {
693
- color: inherit;
694
- background: #181c56;
695
- }
696
- .eds-contrast .eds-stepper__item__square--has-been {
697
- background: #aeb7e2;
698
698
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.4",
3
+ "version": "4.1.5",
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.10.0",
27
- "@entur/expand": "^3.3.15",
28
- "@entur/icons": "^4.2.0",
27
+ "@entur/expand": "^3.3.16",
28
+ "@entur/icons": "^4.3.0",
29
29
  "@entur/layout": "^2.1.7",
30
30
  "@entur/tokens": "^3.3.2",
31
31
  "@entur/typography": "^1.6.14",
@@ -37,5 +37,5 @@
37
37
  "react": ">=16.8.0",
38
38
  "react-dom": ">=16.8.0"
39
39
  },
40
- "gitHead": "b8c747624dc3cb71b5710305c958ece5ba460e23"
40
+ "gitHead": "c58969a2ac3a5429137f84f9fe91888f4c4bcc4b"
41
41
  }