@entur/menu 4.1.45 → 4.1.46

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 +220 -220
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -270,6 +270,166 @@
270
270
  }
271
271
  /* DO NOT CHANGE!*/
272
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
+ }
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;
305
+ color: inherit;
306
+ 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;
314
+ }
315
+ .eds-pagination-menu__menu-button--open {
316
+ border-color: currentColor;
317
+ }
318
+ .eds-pagination-menu__menu-button:focus {
319
+ outline: none;
320
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
321
+ }
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;
379
+ }
380
+ .eds-contrast .eds-pagination__page:focus {
381
+ border-color: #ffffff;
382
+ }
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;
394
+ 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
+ }
408
+ .eds-contrast .eds-pagination__input-label {
409
+ border-color: #393d79;
410
+ color: #aeb7e2;
411
+ }
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;
424
+ width: 2rem;
425
+ }
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
+ }
431
+ /* DO NOT CHANGE!*/
432
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
273
433
  .eds-top-navigation-item {
274
434
  --show-active-line: 0;
275
435
  display: inline-block;
@@ -319,92 +479,6 @@
319
479
  }
320
480
  /* DO NOT CHANGE!*/
321
481
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
322
- .eds-overflow-menu__item {
323
- -webkit-appearance: none;
324
- -moz-appearance: none;
325
- appearance: none;
326
- border: none;
327
- font-size: 0.875rem;
328
- font-family: inherit;
329
- color: var(--primary-text-color);
330
- background: #f8f8f8;
331
- display: block;
332
- height: 3rem;
333
- cursor: pointer;
334
- width: 100%;
335
- line-height: 1.375rem;
336
- text-align: left;
337
- padding: 0.75rem 1rem;
338
- opacity: 1;
339
- }
340
- .eds-contrast .eds-overflow-menu__item {
341
- color: #181c56;
342
- }
343
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
344
- background: #e9e9e9;
345
- color: #949494;
346
- }
347
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
348
- background: #e9e9e9;
349
- color: #949494;
350
- }
351
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
352
- cursor: not-allowed;
353
- background: #e9e9e9;
354
- color: #949494;
355
- }
356
- .eds-overflow-menu__item .eds-icon {
357
- margin-right: 0.75rem;
358
- }
359
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
360
- background: #d1d4e3;
361
- }
362
- .eds-overflow-menu__item:focus {
363
- outline: none;
364
- }
365
-
366
- .eds-overflow-menu__item + .eds-overflow-menu__item {
367
- border-top: 0.0625rem solid #e9e9e9;
368
- }
369
-
370
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
371
- border: 0.0625rem solid #e9e9e9;
372
- border-radius: 0.25rem;
373
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
374
- overflow: hidden;
375
- }
376
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
377
- outline: none;
378
- }
379
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
380
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
381
- }
382
-
383
- .eds-overflow-menu__menu-list[data-reach-menu-list],
384
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
385
- animation: slide-in 0.2s ease-in-out;
386
- }
387
-
388
- @keyframes slide-in {
389
- 0% {
390
- opacity: 0;
391
- transform: translateY(0.5rem);
392
- }
393
- 100% {
394
- opacity: 1;
395
- transform: translateY(0);
396
- }
397
- }
398
- [data-reach-menu-popover] {
399
- position: absolute;
400
- z-index: 30;
401
- }
402
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
403
- position: relative;
404
- right: calc(100% - 2rem);
405
- }
406
- /* DO NOT CHANGE!*/
407
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
408
482
  .eds-stepper {
409
483
  display: flex;
410
484
  flex-direction: row;
@@ -524,161 +598,87 @@
524
598
  }
525
599
  /* DO NOT CHANGE!*/
526
600
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
527
- .eds-pagination {
528
- align-items: center;
529
- display: flex;
530
- flex-wrap: wrap;
531
- row-gap: 0.75rem;
532
- justify-content: space-between;
533
- }
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;
550
- }
551
-
552
- .eds-pagination-menu__menu-button {
601
+ .eds-overflow-menu__item {
553
602
  -webkit-appearance: none;
554
603
  -moz-appearance: none;
555
604
  appearance: none;
556
- background: transparent;
557
- border: 0.0625rem solid #d1d3d3;
558
- border-radius: 0.25rem;
559
- color: inherit;
605
+ border: none;
606
+ font-size: 0.875rem;
560
607
  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;
608
+ color: var(--primary-text-color);
609
+ background: #f8f8f8;
610
+ display: block;
611
+ height: 3rem;
612
+ cursor: pointer;
613
+ width: 100%;
614
+ line-height: 1.375rem;
615
+ text-align: left;
616
+ padding: 0.75rem 1rem;
617
+ opacity: 1;
568
618
  }
569
- .eds-pagination-menu__menu-button--open {
570
- border-color: currentColor;
619
+ .eds-contrast .eds-overflow-menu__item {
620
+ color: #181c56;
571
621
  }
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;
622
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
623
+ background: #e9e9e9;
624
+ color: #949494;
575
625
  }
576
- .eds-pagination-menu__menu-list {
577
- width: 3.5rem;
626
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
627
+ background: #e9e9e9;
628
+ color: #949494;
578
629
  }
579
-
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;
589
- color: inherit;
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;
630
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
631
+ cursor: not-allowed;
632
+ background: #e9e9e9;
633
+ color: #949494;
603
634
  }
604
- .eds-contrast .eds-pagination__page {
605
- border-color: #54568c;
635
+ .eds-overflow-menu__item .eds-icon {
636
+ margin-right: 0.75rem;
606
637
  }
607
- .eds-pagination__page--selected {
638
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
608
639
  background: #d1d4e3;
609
- border-color: #181c56;
610
- color: inherit;
611
- opacity: 1;
612
- pointer-events: none;
613
- }
614
- .eds-contrast .eds-pagination__page--selected {
615
- border-color: #ffffff;
616
- background: #393d79;
617
640
  }
618
- .eds-pagination__page--disabled {
619
- opacity: 0.5;
620
- pointer-events: none;
641
+ .eds-overflow-menu__item:focus {
642
+ outline: none;
621
643
  }
622
- .eds-pagination__page:hover {
623
- background-color: #d1d4e3;
624
- border-color: #d1d4e3;
644
+
645
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
646
+ border-top: 0.0625rem solid #e9e9e9;
625
647
  }
626
- .eds-contrast .eds-pagination__page:hover {
627
- background-color: #393d79;
628
- border-color: #393d79;
648
+
649
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
650
+ border: 0.0625rem solid #e9e9e9;
651
+ border-radius: 0.25rem;
652
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
653
+ overflow: hidden;
629
654
  }
630
- .eds-pagination__page:focus {
655
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
631
656
  outline: none;
632
- border-color: #181c56;
633
657
  }
634
- .eds-contrast .eds-pagination__page:focus {
635
- border-color: #ffffff;
658
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
659
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
636
660
  }
637
661
 
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;
662
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
663
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
664
+ animation: slide-in 0.2s ease-in-out;
650
665
  }
651
666
 
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;
667
+ @keyframes slide-in {
668
+ 0% {
669
+ opacity: 0;
670
+ transform: translateY(0.5rem);
671
+ }
672
+ 100% {
673
+ opacity: 1;
674
+ transform: translateY(0);
675
+ }
665
676
  }
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;
677
+ [data-reach-menu-popover] {
678
+ position: absolute;
679
+ z-index: 30;
679
680
  }
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;
681
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
682
+ position: relative;
683
+ right: calc(100% - 2rem);
684
684
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.45",
3
+ "version": "4.1.46",
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.68",
31
- "@entur/button": "^3.0.11",
32
- "@entur/expand": "^3.4.4",
33
- "@entur/icons": "^6.3.1",
34
- "@entur/layout": "^2.1.36",
31
+ "@entur/button": "^3.0.12",
32
+ "@entur/expand": "^3.4.5",
33
+ "@entur/icons": "^6.4.0",
34
+ "@entur/layout": "^2.1.37",
35
35
  "@entur/tokens": "^3.10.0",
36
- "@entur/typography": "^1.8.3",
36
+ "@entur/typography": "^1.8.4",
37
37
  "@entur/utils": "^0.9.3",
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": "9bf0838160519db9fb072af36dc19731dfb5e2dd"
42
+ "gitHead": "6e84c896e30f146cfc15284218f55ab9f1766d46"
43
43
  }