@entur/menu 4.1.45 → 4.1.47

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
@@ -50,6 +50,166 @@
50
50
  }
51
51
  /* DO NOT CHANGE!*/
52
52
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
53
+ .eds-pagination {
54
+ align-items: center;
55
+ display: flex;
56
+ flex-wrap: wrap;
57
+ row-gap: 0.75rem;
58
+ justify-content: space-between;
59
+ }
60
+ .eds-pagination__results {
61
+ align-items: center;
62
+ display: flex;
63
+ flex: 1;
64
+ justify-content: flex-start;
65
+ }
66
+ .eds-pagination__results-label {
67
+ margin-right: 0.5rem;
68
+ }
69
+ .eds-pagination__controls {
70
+ align-items: center;
71
+ display: flex;
72
+ justify-content: center;
73
+ }
74
+ .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
75
+ margin: 0 auto;
76
+ }
77
+
78
+ .eds-pagination-menu__menu-button {
79
+ -webkit-appearance: none;
80
+ -moz-appearance: none;
81
+ appearance: none;
82
+ background: transparent;
83
+ border: 0.0625rem solid #d1d3d3;
84
+ border-radius: 0.25rem;
85
+ color: inherit;
86
+ font-family: inherit;
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: space-around;
90
+ height: 2rem;
91
+ margin-left: 0.25rem;
92
+ margin-right: 1rem;
93
+ width: 3.5rem;
94
+ }
95
+ .eds-pagination-menu__menu-button--open {
96
+ border-color: currentColor;
97
+ }
98
+ .eds-pagination-menu__menu-button:focus {
99
+ outline: none;
100
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
101
+ }
102
+ .eds-pagination-menu__menu-list {
103
+ width: 3.5rem;
104
+ }
105
+
106
+ .eds-pagination__page {
107
+ align-items: center;
108
+ -webkit-appearance: none;
109
+ -moz-appearance: none;
110
+ appearance: none;
111
+ background: transparent;
112
+ border: 0.0625rem solid #d1d3d3;
113
+ border-color: #d1d3d3;
114
+ border-radius: 0.25rem;
115
+ color: inherit;
116
+ cursor: pointer;
117
+ display: flex;
118
+ font-family: inherit;
119
+ font-size: 0.875rem;
120
+ height: 2rem;
121
+ justify-content: center;
122
+ margin: 0 0.125rem;
123
+ padding: 0 0.25rem;
124
+ transition: background 0.1s ease-out, border-color 0.1s ease-out;
125
+ -webkit-user-select: none;
126
+ -moz-user-select: none;
127
+ user-select: none;
128
+ min-width: 2rem;
129
+ }
130
+ .eds-contrast .eds-pagination__page {
131
+ border-color: #54568c;
132
+ }
133
+ .eds-pagination__page--selected {
134
+ background: #d1d4e3;
135
+ border-color: #181c56;
136
+ color: inherit;
137
+ opacity: 1;
138
+ pointer-events: none;
139
+ }
140
+ .eds-contrast .eds-pagination__page--selected {
141
+ border-color: #ffffff;
142
+ background: #393d79;
143
+ }
144
+ .eds-pagination__page--disabled {
145
+ opacity: 0.5;
146
+ pointer-events: none;
147
+ }
148
+ .eds-pagination__page:hover {
149
+ background-color: #d1d4e3;
150
+ border-color: #d1d4e3;
151
+ }
152
+ .eds-contrast .eds-pagination__page:hover {
153
+ background-color: #393d79;
154
+ border-color: #393d79;
155
+ }
156
+ .eds-pagination__page:focus {
157
+ outline: none;
158
+ border-color: #181c56;
159
+ }
160
+ .eds-contrast .eds-pagination__page:focus {
161
+ border-color: #ffffff;
162
+ }
163
+
164
+ .eds-pagination__ellipsis {
165
+ align-items: baseline;
166
+ cursor: default;
167
+ display: flex;
168
+ font-size: 1.5rem;
169
+ height: 2rem;
170
+ justify-content: center;
171
+ -webkit-user-select: none;
172
+ -moz-user-select: none;
173
+ user-select: none;
174
+ width: 2rem;
175
+ margin: 0 2px;
176
+ }
177
+
178
+ .eds-pagination__input-wrapper {
179
+ white-space: nowrap;
180
+ }
181
+ .eds-pagination__input-label {
182
+ border-left: 0.0625rem solid #d1d3d3;
183
+ color: #656782;
184
+ font-size: 0.875rem;
185
+ margin-left: 0.5rem;
186
+ padding: 0 1rem;
187
+ }
188
+ .eds-contrast .eds-pagination__input-label {
189
+ border-color: #393d79;
190
+ color: #aeb7e2;
191
+ }
192
+ .eds-pagination__input-field {
193
+ -webkit-appearance: none;
194
+ -moz-appearance: none;
195
+ appearance: none;
196
+ background: transparent;
197
+ border: 0.0625rem solid #d1d3d3;
198
+ border-radius: 0.25rem;
199
+ color: inherit;
200
+ font-family: inherit;
201
+ font-size: 0.875rem;
202
+ height: 2rem;
203
+ text-align: center;
204
+ width: 2rem;
205
+ }
206
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
207
+ -webkit-appearance: none;
208
+ appearance: none;
209
+ margin: 0;
210
+ }
211
+ /* DO NOT CHANGE!*/
212
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
53
213
  /* DO NOT CHANGE!*/
54
214
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
55
215
  .eds-side-navigation,
@@ -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.47",
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.13",
32
+ "@entur/expand": "^3.4.6",
33
+ "@entur/icons": "^6.4.1",
34
+ "@entur/layout": "^2.1.38",
35
35
  "@entur/tokens": "^3.10.0",
36
- "@entur/typography": "^1.8.3",
36
+ "@entur/typography": "^1.8.5",
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": "113113f32a331fcd5f01d20e2c47ae2f2b73b93e"
43
43
  }