@entur/menu 4.1.5 → 4.1.6

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.6](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.5...@entur/menu@4.1.6) (2022-08-09)
7
+
8
+ **Note:** Version bump only for package @entur/menu
9
+
6
10
  ## [4.1.5](https://bitbucket.org/enturas/design-system/compare/@entur/menu@4.1.4...@entur/menu@4.1.5) (2022-07-05)
7
11
 
8
12
  **Note:** Version bump only for package @entur/menu
package/dist/styles.css CHANGED
@@ -106,6 +106,225 @@
106
106
  width: 2rem;
107
107
  }/* DO NOT CHANGE!*/
108
108
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
+ /* DO NOT CHANGE!*/
110
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
111
+ .eds-side-navigation,
112
+ .eds-side-navigation-group {
113
+ --primary-background-color: #f8f8f8;
114
+ --primary-text-color: #181c56;
115
+ }
116
+ .eds-contrast .eds-side-navigation,
117
+ .eds-contrast .eds-side-navigation-group {
118
+ --primary-background-color: #181c56;
119
+ --primary-text-color: colors-brand-white;
120
+ }
121
+
122
+ .eds-side-navigation__click-target svg {
123
+ margin-right: 1rem;
124
+ color: #656782;
125
+ display: inline-flex;
126
+ align-self: center;
127
+ position: relative;
128
+ top: 0.075em;
129
+ }
130
+ .eds-contrast .eds-side-navigation__click-target svg {
131
+ color: #aeb7e2;
132
+ }
133
+
134
+ .eds-side-navigation__click-target[disabled] svg {
135
+ color: #656782;
136
+ }
137
+
138
+ .eds-side-navigation {
139
+ --padding-vertical: 1rem;
140
+ --padding-horizontal: 2.5rem;
141
+ background-color: var(--primary-background-color);
142
+ color: var(--primary-text-color);
143
+ padding: 0;
144
+ margin: 0;
145
+ list-style: none;
146
+ position: relative;
147
+ transition: max-width ease-in-out 0.2s;
148
+ }
149
+ .eds-side-navigation__collapse-button {
150
+ position: absolute;
151
+ right: -0.75rem;
152
+ height: 1.5rem;
153
+ width: 1.5rem;
154
+ border-radius: 50%;
155
+ cursor: pointer;
156
+ background: #ffffff;
157
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
158
+ border: 0.0625rem solid #d1d3d3;
159
+ color: inherit;
160
+ padding: 0;
161
+ display: flex;
162
+ align-items: center;
163
+ justify-content: center;
164
+ border: none;
165
+ z-index: 10;
166
+ }
167
+ .eds-contrast .eds-side-navigation__collapse-button {
168
+ background: #393d79;
169
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
170
+ border-color: transparent;
171
+ }
172
+ .eds-side-navigation__collapse-button svg {
173
+ margin: 0;
174
+ top: 0;
175
+ color: #181c56;
176
+ }
177
+ .eds-contrast .eds-side-navigation__collapse-button svg {
178
+ color: #ffffff;
179
+ }
180
+ .eds-side-navigation__collapse-button:focus {
181
+ outline: 2px solid #181c56;
182
+ }
183
+ .eds-contrast .eds-side-navigation__collapse-button:focus {
184
+ outline: 2px solid #ffffff;
185
+ }
186
+ @media screen and (min-width: 50rem) {
187
+ .eds-side-navigation {
188
+ max-width: 26rem;
189
+ }
190
+ }
191
+ .eds-side-navigation--small {
192
+ --padding-vertical: calc(0.5rem + 0.1875rem);
193
+ }
194
+ .eds-side-navigation .eds-side-navigation {
195
+ background-color: #f3f3f3;
196
+ }
197
+ .eds-contrast .eds-side-navigation .eds-side-navigation {
198
+ background-color: #292b6a;
199
+ }
200
+ .eds-side-navigation--collapsed {
201
+ max-width: 80px;
202
+ }
203
+
204
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
205
+ padding-left: 3.5rem;
206
+ box-shadow: none;
207
+ }
208
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
209
+ background-color: #d1d4e3;
210
+ }
211
+ .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
212
+ background-color: #54568c;
213
+ }
214
+
215
+ .eds-side-navigation__click-target {
216
+ -webkit-appearance: none;
217
+ -moz-appearance: none;
218
+ appearance: none;
219
+ background: none;
220
+ border: 0;
221
+ border-bottom: 0.125rem solid #e9e9e9;
222
+ border-radius: 0;
223
+ color: var(--primary-text-color);
224
+ cursor: pointer;
225
+ display: block;
226
+ font-family: inherit;
227
+ font-size: inherit;
228
+ font-weight: 500;
229
+ line-height: inherit;
230
+ padding: var(--padding-vertical) 2.5rem;
231
+ padding-left: 2.5rem;
232
+ transition: padding 0.2s ease-in-out;
233
+ text-align: left;
234
+ text-decoration: none;
235
+ width: 100%;
236
+ }
237
+ .eds-contrast .eds-side-navigation__click-target {
238
+ border-color: #292b6a;
239
+ }
240
+ .eds-side-navigation--collapsed .eds-side-navigation__click-target {
241
+ padding-left: 2rem;
242
+ }
243
+ .eds-side-navigation__click-target--active {
244
+ box-shadow: inset 0.25rem 0 0 #181c56;
245
+ font-weight: 600;
246
+ }
247
+ .eds-contrast .eds-side-navigation__click-target--active {
248
+ box-shadow: inset 0.25rem 0 0 #ff5959;
249
+ }
250
+ .eds-side-navigation__click-target[disabled] {
251
+ cursor: default;
252
+ color: #656782;
253
+ }
254
+ .eds-side-navigation__click-target:not([disabled]):hover {
255
+ background-color: #d1d4e3;
256
+ }
257
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
258
+ background-color: #393d79;
259
+ }
260
+ .eds-side-navigation__click-target:not([disabled]):active, .eds-side-navigation__click-target:not([disabled]):focus {
261
+ outline: 2px solid #181c56;
262
+ outline-offset: -2px;
263
+ background: #ebebf1;
264
+ }
265
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
266
+ background-color: #54568c;
267
+ outline: 2px solid #ffffff;
268
+ }
269
+
270
+ .eds-side-navigation-group {
271
+ background-color: var(--primary-background-color);
272
+ color: var(--primary-text-color);
273
+ }
274
+ .eds-side-navigation-group + .eds-side-navigation-group {
275
+ padding-top: 0.5rem;
276
+ }
277
+ @media screen and (min-width: 50rem) {
278
+ .eds-side-navigation-group {
279
+ max-width: 26rem;
280
+ }
281
+ }
282
+
283
+ .eds-side-navigation-group__trigger {
284
+ align-items: center;
285
+ -webkit-appearance: none;
286
+ -moz-appearance: none;
287
+ appearance: none;
288
+ background: none;
289
+ border: none;
290
+ border-radius: 0;
291
+ border-bottom: 0.125rem solid #e9e9e9;
292
+ color: #656782;
293
+ cursor: pointer;
294
+ display: flex;
295
+ font-size: 0.875rem;
296
+ font-family: inherit;
297
+ font-weight: 500;
298
+ height: 3rem;
299
+ justify-content: space-between;
300
+ letter-spacing: 1px;
301
+ line-height: 1.25rem;
302
+ padding: 0.75rem 0 0.75rem 2.5rem;
303
+ margin: 0;
304
+ text-transform: uppercase;
305
+ transition: padding 0.2s ease-in-out;
306
+ width: 100%;
307
+ }
308
+ .eds-contrast .eds-side-navigation-group__trigger {
309
+ color: #aeb7e2;
310
+ border-color: #292b6a;
311
+ }
312
+ .eds-side-navigation-group__trigger-icon {
313
+ margin-right: 0.75rem;
314
+ }
315
+ .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
316
+ margin-right: 2.5rem;
317
+ }
318
+ .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
319
+ padding-left: 2rem;
320
+ }
321
+ .eds-side-navigation-group__trigger:focus {
322
+ outline: 2px solid #181c56;
323
+ }
324
+ .eds-contrast .eds-side-navigation-group__trigger:focus {
325
+ outline: 2px solid #ffffff;
326
+ }/* DO NOT CHANGE!*/
327
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
328
  .eds-overflow-menu__item {
110
329
  -webkit-appearance: none;
111
330
  -moz-appearance: none;
@@ -476,223 +695,4 @@
476
695
  -webkit-appearance: none;
477
696
  appearance: none;
478
697
  margin: 0;
479
- }/* DO NOT CHANGE!*/
480
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
481
- /* DO NOT CHANGE!*/
482
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
483
- .eds-side-navigation,
484
- .eds-side-navigation-group {
485
- --primary-background-color: #f8f8f8;
486
- --primary-text-color: #181c56;
487
- }
488
- .eds-contrast .eds-side-navigation,
489
- .eds-contrast .eds-side-navigation-group {
490
- --primary-background-color: #181c56;
491
- --primary-text-color: colors-brand-white;
492
- }
493
-
494
- .eds-side-navigation__click-target svg {
495
- margin-right: 1rem;
496
- color: #656782;
497
- display: inline-flex;
498
- align-self: center;
499
- position: relative;
500
- top: 0.075em;
501
- }
502
- .eds-contrast .eds-side-navigation__click-target svg {
503
- color: #aeb7e2;
504
- }
505
-
506
- .eds-side-navigation__click-target[disabled] svg {
507
- color: #656782;
508
- }
509
-
510
- .eds-side-navigation {
511
- --padding-vertical: 1rem;
512
- --padding-horizontal: 2.5rem;
513
- background-color: var(--primary-background-color);
514
- color: var(--primary-text-color);
515
- padding: 0;
516
- margin: 0;
517
- list-style: none;
518
- position: relative;
519
- transition: max-width ease-in-out 0.2s;
520
- }
521
- .eds-side-navigation__collapse-button {
522
- position: absolute;
523
- right: -0.75rem;
524
- height: 1.5rem;
525
- width: 1.5rem;
526
- border-radius: 50%;
527
- cursor: pointer;
528
- background: #ffffff;
529
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
530
- border: 0.0625rem solid #d1d3d3;
531
- color: inherit;
532
- padding: 0;
533
- display: flex;
534
- align-items: center;
535
- justify-content: center;
536
- border: none;
537
- z-index: 10;
538
- }
539
- .eds-contrast .eds-side-navigation__collapse-button {
540
- background: #393d79;
541
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
542
- border-color: transparent;
543
- }
544
- .eds-side-navigation__collapse-button svg {
545
- margin: 0;
546
- top: 0;
547
- color: #181c56;
548
- }
549
- .eds-contrast .eds-side-navigation__collapse-button svg {
550
- color: #ffffff;
551
- }
552
- .eds-side-navigation__collapse-button:focus {
553
- outline: 2px solid #181c56;
554
- }
555
- .eds-contrast .eds-side-navigation__collapse-button:focus {
556
- outline: 2px solid #ffffff;
557
- }
558
- @media screen and (min-width: 50rem) {
559
- .eds-side-navigation {
560
- max-width: 26rem;
561
- }
562
- }
563
- .eds-side-navigation--small {
564
- --padding-vertical: calc(0.5rem + 0.1875rem);
565
- }
566
- .eds-side-navigation .eds-side-navigation {
567
- background-color: #f3f3f3;
568
- }
569
- .eds-contrast .eds-side-navigation .eds-side-navigation {
570
- background-color: #292b6a;
571
- }
572
- .eds-side-navigation--collapsed {
573
- max-width: 80px;
574
- }
575
-
576
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
577
- padding-left: 3.5rem;
578
- box-shadow: none;
579
- }
580
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
581
- background-color: #d1d4e3;
582
- }
583
- .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
584
- background-color: #54568c;
585
- }
586
-
587
- .eds-side-navigation__click-target {
588
- -webkit-appearance: none;
589
- -moz-appearance: none;
590
- appearance: none;
591
- background: none;
592
- border: 0;
593
- border-bottom: 0.125rem solid #e9e9e9;
594
- border-radius: 0;
595
- color: var(--primary-text-color);
596
- cursor: pointer;
597
- display: block;
598
- font-family: inherit;
599
- font-size: inherit;
600
- font-weight: 500;
601
- line-height: inherit;
602
- padding: var(--padding-vertical) 2.5rem;
603
- padding-left: 2.5rem;
604
- transition: padding 0.2s ease-in-out;
605
- text-align: left;
606
- text-decoration: none;
607
- width: 100%;
608
- }
609
- .eds-contrast .eds-side-navigation__click-target {
610
- border-color: #292b6a;
611
- }
612
- .eds-side-navigation--collapsed .eds-side-navigation__click-target {
613
- padding-left: 2rem;
614
- }
615
- .eds-side-navigation__click-target--active {
616
- box-shadow: inset 0.25rem 0 0 #181c56;
617
- font-weight: 600;
618
- }
619
- .eds-contrast .eds-side-navigation__click-target--active {
620
- box-shadow: inset 0.25rem 0 0 #ff5959;
621
- }
622
- .eds-side-navigation__click-target[disabled] {
623
- cursor: default;
624
- color: #656782;
625
- }
626
- .eds-side-navigation__click-target:not([disabled]):hover {
627
- background-color: #d1d4e3;
628
- }
629
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
630
- background-color: #393d79;
631
- }
632
- .eds-side-navigation__click-target:not([disabled]):active, .eds-side-navigation__click-target:not([disabled]):focus {
633
- outline: 2px solid #181c56;
634
- outline-offset: -2px;
635
- background: #ebebf1;
636
- }
637
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
638
- background-color: #54568c;
639
- outline: 2px solid #ffffff;
640
- }
641
-
642
- .eds-side-navigation-group {
643
- background-color: var(--primary-background-color);
644
- color: var(--primary-text-color);
645
- }
646
- .eds-side-navigation-group + .eds-side-navigation-group {
647
- padding-top: 0.5rem;
648
- }
649
- @media screen and (min-width: 50rem) {
650
- .eds-side-navigation-group {
651
- max-width: 26rem;
652
- }
653
- }
654
-
655
- .eds-side-navigation-group__trigger {
656
- align-items: center;
657
- -webkit-appearance: none;
658
- -moz-appearance: none;
659
- appearance: none;
660
- background: none;
661
- border: none;
662
- border-radius: 0;
663
- border-bottom: 0.125rem solid #e9e9e9;
664
- color: #656782;
665
- cursor: pointer;
666
- display: flex;
667
- font-size: 0.875rem;
668
- font-family: inherit;
669
- font-weight: 500;
670
- height: 3rem;
671
- justify-content: space-between;
672
- letter-spacing: 1px;
673
- line-height: 1.25rem;
674
- padding: 0.75rem 0 0.75rem 2.5rem;
675
- margin: 0;
676
- text-transform: uppercase;
677
- transition: padding 0.2s ease-in-out;
678
- width: 100%;
679
- }
680
- .eds-contrast .eds-side-navigation-group__trigger {
681
- color: #aeb7e2;
682
- border-color: #292b6a;
683
- }
684
- .eds-side-navigation-group__trigger-icon {
685
- margin-right: 0.75rem;
686
- }
687
- .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
688
- margin-right: 2.5rem;
689
- }
690
- .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
691
- padding-left: 2rem;
692
- }
693
- .eds-side-navigation-group__trigger:focus {
694
- outline: 2px solid #181c56;
695
- }
696
- .eds-contrast .eds-side-navigation-group__trigger:focus {
697
- outline: 2px solid #ffffff;
698
698
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.5",
3
+ "version": "4.1.6",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -23,12 +23,12 @@
23
23
  "lint": "dts lint"
24
24
  },
25
25
  "dependencies": {
26
- "@entur/button": "^2.10.0",
27
- "@entur/expand": "^3.3.16",
28
- "@entur/icons": "^4.3.0",
29
- "@entur/layout": "^2.1.7",
30
- "@entur/tokens": "^3.3.2",
31
- "@entur/typography": "^1.6.14",
26
+ "@entur/button": "^2.10.1",
27
+ "@entur/expand": "^3.3.17",
28
+ "@entur/icons": "^4.3.1",
29
+ "@entur/layout": "^2.1.8",
30
+ "@entur/tokens": "^3.4.0",
31
+ "@entur/typography": "^1.6.15",
32
32
  "@entur/utils": "^0.4.3",
33
33
  "@reach/menu-button": "^0.16.1",
34
34
  "classnames": "^2.3.1"
@@ -37,5 +37,5 @@
37
37
  "react": ">=16.8.0",
38
38
  "react-dom": ">=16.8.0"
39
39
  },
40
- "gitHead": "c58969a2ac3a5429137f84f9fe91888f4c4bcc4b"
40
+ "gitHead": "82b89b2f52c8530f8d930edfdc507c809ec85f7c"
41
41
  }