@entur/menu 4.1.29 → 4.1.30

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 (2) hide show
  1. package/dist/styles.css +224 -218
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -1,55 +1,54 @@
1
1
  :root {
2
2
  --eds-menu: 1;
3
3
  --reach-menu-button: 1;
4
- }/* DO NOT CHANGE!*/
4
+ }
5
+ /* DO NOT CHANGE!*/
5
6
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-top-navigation-item {
7
- --show-active-line: 0;
7
+ .eds-breadcrumb {
8
+ list-style: none;
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+
13
+ .eds-breadcrumb__item {
8
14
  display: inline-block;
9
- cursor: pointer;
10
- color: inherit;
15
+ }
16
+
17
+ .eds-breadcrumb__separator {
18
+ margin: 0 0.25rem 0 0.25rem;
19
+ }
20
+
21
+ .eds-breadcrumb__link {
11
22
  text-decoration: none;
12
- position: relative;
13
- padding: 1rem;
14
- min-width: 5rem;
15
- width: -moz-fit-content;
16
- width: fit-content;
17
- text-align: center;
18
- font-family: inherit;
19
- font-size: 1rem;
20
- font-weight: 600;
23
+ color: inherit;
24
+ background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
25
+ background-repeat: no-repeat;
26
+ background-size: 100% 0.125rem;
27
+ background-position: 0 100%;
21
28
  }
22
- .eds-top-navigation-item::after {
23
- content: "";
24
- display: block;
25
- bottom: 1rem;
26
- height: 0.1875rem;
27
- width: 0;
28
- margin: 0 auto;
29
- opacity: var(--show-active-line);
30
- background: #ff5959;
31
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
29
+ .eds-contrast .eds-breadcrumb__link {
30
+ background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
32
31
  }
33
- .eds-top-navigation-item:focus {
34
- outline-offset: 0.125rem;
32
+ .eds-breadcrumb__link:hover {
33
+ animation: eds-breadcrumb-underline 0.3s ease-in;
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;
38
+ outline-offset: 0.125rem;
37
39
  }
38
- .eds-contrast .eds-top-navigation-item:focus {
39
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
40
- }
41
- .eds-top-navigation-item:hover {
42
- --show-active-line: 1;
43
- }
44
- .eds-top-navigation-item:hover::after {
45
- width: 2rem;
40
+ @keyframes eds-breadcrumb-underline {
41
+ from {
42
+ background-size: 0% 0.125rem;
43
+ }
44
+ to {
45
+ background-size: 100% 0.125rem;
46
+ }
46
47
  }
47
- .eds-top-navigation-item--active {
48
- --show-active-line: 1;
48
+ .eds-breadcrumb__link--current {
49
+ font-weight: 600;
49
50
  }
50
- .eds-top-navigation-item--active::after {
51
- width: 2rem;
52
- }/* DO NOT CHANGE!*/
51
+ /* DO NOT CHANGE!*/
53
52
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
54
53
  /* DO NOT CHANGE!*/
55
54
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -268,166 +267,57 @@
268
267
  }
269
268
  .eds-contrast .eds-side-navigation-group__trigger:focus {
270
269
  outline: 2px solid #ffffff;
271
- }/* DO NOT CHANGE!*/
272
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
273
- .eds-pagination {
274
- align-items: center;
275
- display: flex;
276
- flex-wrap: wrap;
277
- row-gap: 0.75rem;
278
- justify-content: space-between;
279
270
  }
280
- .eds-pagination__results {
281
- align-items: center;
282
- display: flex;
283
- flex: 1;
284
- justify-content: flex-start;
285
- }
286
- .eds-pagination__results-label {
287
- margin-right: 0.5rem;
288
- }
289
- .eds-pagination__controls {
290
- align-items: center;
291
- display: flex;
292
- justify-content: center;
293
- }
294
- .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
295
- margin: 0 auto;
296
- }
297
-
298
- .eds-pagination-menu__menu-button {
299
- -webkit-appearance: none;
300
- -moz-appearance: none;
301
- appearance: none;
302
- background: transparent;
303
- border: 0.0625rem solid #d1d3d3;
304
- border-radius: 0.25rem;
271
+ /* DO NOT CHANGE!*/
272
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
273
+ .eds-top-navigation-item {
274
+ --show-active-line: 0;
275
+ display: inline-block;
276
+ cursor: pointer;
305
277
  color: inherit;
278
+ text-decoration: none;
279
+ position: relative;
280
+ padding: 1rem;
281
+ min-width: 5rem;
282
+ width: -moz-fit-content;
283
+ width: fit-content;
284
+ text-align: center;
306
285
  font-family: inherit;
307
- display: flex;
308
- align-items: center;
309
- justify-content: space-around;
310
- height: 2rem;
311
- margin-left: 0.25rem;
312
- margin-right: 1rem;
313
- width: 3.5rem;
286
+ font-size: 1rem;
287
+ font-weight: 600;
314
288
  }
315
- .eds-pagination-menu__menu-button--open {
316
- border-color: currentColor;
289
+ .eds-top-navigation-item::after {
290
+ content: "";
291
+ display: block;
292
+ bottom: 1rem;
293
+ height: 0.1875rem;
294
+ width: 0;
295
+ margin: 0 auto;
296
+ opacity: var(--show-active-line);
297
+ background: #ff5959;
298
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
317
299
  }
318
- .eds-pagination-menu__menu-button:focus {
300
+ .eds-top-navigation-item:focus {
301
+ outline-offset: 0.125rem;
319
302
  outline: none;
320
303
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
321
304
  }
322
- .eds-pagination-menu__menu-list {
323
- width: 3.5rem;
324
- }
325
-
326
- .eds-pagination__page {
327
- align-items: center;
328
- -webkit-appearance: none;
329
- -moz-appearance: none;
330
- appearance: none;
331
- background: transparent;
332
- border: 0.0625rem solid #d1d3d3;
333
- border-color: #d1d3d3;
334
- border-radius: 0.25rem;
335
- color: inherit;
336
- cursor: pointer;
337
- display: flex;
338
- font-family: inherit;
339
- font-size: 0.875rem;
340
- height: 2rem;
341
- justify-content: center;
342
- margin: 0 0.125rem;
343
- padding: 0 0.25rem;
344
- transition: background 0.1s ease-out, border-color 0.1s ease-out;
345
- -webkit-user-select: none;
346
- -moz-user-select: none;
347
- user-select: none;
348
- min-width: 2rem;
349
- }
350
- .eds-contrast .eds-pagination__page {
351
- border-color: #54568c;
352
- }
353
- .eds-pagination__page--selected {
354
- background: #d1d4e3;
355
- border-color: #181c56;
356
- color: inherit;
357
- opacity: 1;
358
- pointer-events: none;
359
- }
360
- .eds-contrast .eds-pagination__page--selected {
361
- border-color: #ffffff;
362
- background: #393d79;
363
- }
364
- .eds-pagination__page--disabled {
365
- opacity: 0.5;
366
- pointer-events: none;
367
- }
368
- .eds-pagination__page:hover {
369
- background-color: #d1d4e3;
370
- border-color: #d1d4e3;
371
- }
372
- .eds-contrast .eds-pagination__page:hover {
373
- background-color: #393d79;
374
- border-color: #393d79;
375
- }
376
- .eds-pagination__page:focus {
377
- outline: none;
378
- border-color: #181c56;
305
+ .eds-contrast .eds-top-navigation-item:focus {
306
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
379
307
  }
380
- .eds-contrast .eds-pagination__page:focus {
381
- border-color: #ffffff;
308
+ .eds-top-navigation-item:hover {
309
+ --show-active-line: 1;
382
310
  }
383
-
384
- .eds-pagination__ellipsis {
385
- align-items: baseline;
386
- cursor: default;
387
- display: flex;
388
- font-size: 1.5rem;
389
- height: 2rem;
390
- justify-content: center;
391
- -webkit-user-select: none;
392
- -moz-user-select: none;
393
- user-select: none;
311
+ .eds-top-navigation-item:hover::after {
394
312
  width: 2rem;
395
- margin: 0 2px;
396
- }
397
-
398
- .eds-pagination__input-wrapper {
399
- white-space: nowrap;
400
- }
401
- .eds-pagination__input-label {
402
- border-left: 0.0625rem solid #d1d3d3;
403
- color: #656782;
404
- font-size: 0.875rem;
405
- margin-left: 0.5rem;
406
- padding: 0 1rem;
407
313
  }
408
- .eds-contrast .eds-pagination__input-label {
409
- border-color: #393d79;
410
- color: #aeb7e2;
314
+ .eds-top-navigation-item--active {
315
+ --show-active-line: 1;
411
316
  }
412
- .eds-pagination__input-field {
413
- -webkit-appearance: none;
414
- -moz-appearance: none;
415
- appearance: none;
416
- background: transparent;
417
- border: 0.0625rem solid #d1d3d3;
418
- border-radius: 0.25rem;
419
- color: inherit;
420
- font-family: inherit;
421
- font-size: 0.875rem;
422
- height: 2rem;
423
- text-align: center;
317
+ .eds-top-navigation-item--active::after {
424
318
  width: 2rem;
425
319
  }
426
- .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
427
- -webkit-appearance: none;
428
- appearance: none;
429
- margin: 0;
430
- }/* DO NOT CHANGE!*/
320
+ /* DO NOT CHANGE!*/
431
321
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
432
322
  .eds-stepper {
433
323
  display: flex;
@@ -545,7 +435,8 @@
545
435
  }
546
436
  .eds-contrast .eds-stepper__item__square--has-been {
547
437
  background: #aeb7e2;
548
- }/* DO NOT CHANGE!*/
438
+ }
439
+ /* DO NOT CHANGE!*/
549
440
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
550
441
  .eds-overflow-menu__item {
551
442
  -webkit-appearance: none;
@@ -630,49 +521,164 @@
630
521
  [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
631
522
  position: relative;
632
523
  right: calc(100% - 2rem);
633
- }/* DO NOT CHANGE!*/
524
+ }
525
+ /* DO NOT CHANGE!*/
634
526
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
635
- .eds-breadcrumb {
636
- list-style: none;
637
- margin: 0;
638
- padding: 0;
527
+ .eds-pagination {
528
+ align-items: center;
529
+ display: flex;
530
+ flex-wrap: wrap;
531
+ row-gap: 0.75rem;
532
+ justify-content: space-between;
639
533
  }
640
-
641
- .eds-breadcrumb__item {
642
- display: inline-block;
534
+ .eds-pagination__results {
535
+ align-items: center;
536
+ display: flex;
537
+ flex: 1;
538
+ justify-content: flex-start;
539
+ }
540
+ .eds-pagination__results-label {
541
+ margin-right: 0.5rem;
542
+ }
543
+ .eds-pagination__controls {
544
+ align-items: center;
545
+ display: flex;
546
+ justify-content: center;
547
+ }
548
+ .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
549
+ margin: 0 auto;
643
550
  }
644
551
 
645
- .eds-breadcrumb__separator {
646
- margin: 0 0.25rem 0 0.25rem;
552
+ .eds-pagination-menu__menu-button {
553
+ -webkit-appearance: none;
554
+ -moz-appearance: none;
555
+ appearance: none;
556
+ background: transparent;
557
+ border: 0.0625rem solid #d1d3d3;
558
+ border-radius: 0.25rem;
559
+ color: inherit;
560
+ font-family: inherit;
561
+ display: flex;
562
+ align-items: center;
563
+ justify-content: space-around;
564
+ height: 2rem;
565
+ margin-left: 0.25rem;
566
+ margin-right: 1rem;
567
+ width: 3.5rem;
568
+ }
569
+ .eds-pagination-menu__menu-button--open {
570
+ border-color: currentColor;
571
+ }
572
+ .eds-pagination-menu__menu-button:focus {
573
+ outline: none;
574
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
575
+ }
576
+ .eds-pagination-menu__menu-list {
577
+ width: 3.5rem;
647
578
  }
648
579
 
649
- .eds-breadcrumb__link {
650
- text-decoration: none;
580
+ .eds-pagination__page {
581
+ align-items: center;
582
+ -webkit-appearance: none;
583
+ -moz-appearance: none;
584
+ appearance: none;
585
+ background: transparent;
586
+ border: 0.0625rem solid #d1d3d3;
587
+ border-color: #d1d3d3;
588
+ border-radius: 0.25rem;
651
589
  color: inherit;
652
- background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
653
- background-repeat: no-repeat;
654
- background-size: 100% 0.125rem;
655
- background-position: 0 100%;
590
+ cursor: pointer;
591
+ display: flex;
592
+ font-family: inherit;
593
+ font-size: 0.875rem;
594
+ height: 2rem;
595
+ justify-content: center;
596
+ margin: 0 0.125rem;
597
+ padding: 0 0.25rem;
598
+ transition: background 0.1s ease-out, border-color 0.1s ease-out;
599
+ -webkit-user-select: none;
600
+ -moz-user-select: none;
601
+ user-select: none;
602
+ min-width: 2rem;
656
603
  }
657
- .eds-contrast .eds-breadcrumb__link {
658
- background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
604
+ .eds-contrast .eds-pagination__page {
605
+ border-color: #54568c;
659
606
  }
660
- .eds-breadcrumb__link:hover {
661
- animation: eds-breadcrumb-underline 0.3s ease-in;
607
+ .eds-pagination__page--selected {
608
+ background: #d1d4e3;
609
+ border-color: #181c56;
610
+ color: inherit;
611
+ opacity: 1;
612
+ pointer-events: none;
662
613
  }
663
- .eds-breadcrumb__link:focus {
614
+ .eds-contrast .eds-pagination__page--selected {
615
+ border-color: #ffffff;
616
+ background: #393d79;
617
+ }
618
+ .eds-pagination__page--disabled {
619
+ opacity: 0.5;
620
+ pointer-events: none;
621
+ }
622
+ .eds-pagination__page:hover {
623
+ background-color: #d1d4e3;
624
+ border-color: #d1d4e3;
625
+ }
626
+ .eds-contrast .eds-pagination__page:hover {
627
+ background-color: #393d79;
628
+ border-color: #393d79;
629
+ }
630
+ .eds-pagination__page:focus {
664
631
  outline: none;
665
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
666
- outline-offset: 0.125rem;
632
+ border-color: #181c56;
667
633
  }
668
- @keyframes eds-breadcrumb-underline {
669
- from {
670
- background-size: 0% 0.125rem;
671
- }
672
- to {
673
- background-size: 100% 0.125rem;
674
- }
634
+ .eds-contrast .eds-pagination__page:focus {
635
+ border-color: #ffffff;
636
+ }
637
+
638
+ .eds-pagination__ellipsis {
639
+ align-items: baseline;
640
+ cursor: default;
641
+ display: flex;
642
+ font-size: 1.5rem;
643
+ height: 2rem;
644
+ justify-content: center;
645
+ -webkit-user-select: none;
646
+ -moz-user-select: none;
647
+ user-select: none;
648
+ width: 2rem;
649
+ margin: 0 2px;
650
+ }
651
+
652
+ .eds-pagination__input-wrapper {
653
+ white-space: nowrap;
654
+ }
655
+ .eds-pagination__input-label {
656
+ border-left: 0.0625rem solid #d1d3d3;
657
+ color: #656782;
658
+ font-size: 0.875rem;
659
+ margin-left: 0.5rem;
660
+ padding: 0 1rem;
661
+ }
662
+ .eds-contrast .eds-pagination__input-label {
663
+ border-color: #393d79;
664
+ color: #aeb7e2;
665
+ }
666
+ .eds-pagination__input-field {
667
+ -webkit-appearance: none;
668
+ -moz-appearance: none;
669
+ appearance: none;
670
+ background: transparent;
671
+ border: 0.0625rem solid #d1d3d3;
672
+ border-radius: 0.25rem;
673
+ color: inherit;
674
+ font-family: inherit;
675
+ font-size: 0.875rem;
676
+ height: 2rem;
677
+ text-align: center;
678
+ width: 2rem;
679
+ }
680
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
681
+ -webkit-appearance: none;
682
+ appearance: none;
683
+ margin: 0;
675
684
  }
676
- .eds-breadcrumb__link--current {
677
- font-weight: 600;
678
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.29",
3
+ "version": "4.1.30",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -28,16 +28,16 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@entur/a11y": "^0.2.59",
31
- "@entur/button": "^2.10.14",
32
- "@entur/expand": "^3.3.35",
33
- "@entur/icons": "^5.8.0",
34
- "@entur/layout": "^2.1.21",
31
+ "@entur/button": "^2.10.15",
32
+ "@entur/expand": "^3.3.36",
33
+ "@entur/icons": "^5.8.1",
34
+ "@entur/layout": "^2.1.22",
35
35
  "@entur/tokens": "^3.8.0",
36
- "@entur/typography": "^1.7.10",
36
+ "@entur/typography": "^1.7.11",
37
37
  "@entur/utils": "^0.5.5",
38
38
  "@reach/menu-button": "^0.16.1",
39
39
  "@reach/polymorphic": "0.18.0",
40
40
  "classnames": "^2.3.1"
41
41
  },
42
- "gitHead": "d66e9c3a3708ce61a6a72671e974eb1ce4a13a45"
42
+ "gitHead": "8019b1b3a39b30bf1052ae34ed1c06b6caf1aa34"
43
43
  }