@entur/menu 4.1.27 → 4.1.28

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 +151 -151
  2. package/package.json +10 -10
package/dist/styles.css CHANGED
@@ -1,6 +1,54 @@
1
1
  :root {
2
2
  --eds-menu: 1;
3
3
  --reach-menu-button: 1;
4
+ }/* DO NOT CHANGE!*/
5
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
+ .eds-top-navigation-item {
7
+ --show-active-line: 0;
8
+ display: inline-block;
9
+ cursor: pointer;
10
+ color: inherit;
11
+ 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;
21
+ }
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;
32
+ }
33
+ .eds-top-navigation-item:focus {
34
+ outline-offset: 0.125rem;
35
+ outline: none;
36
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
37
+ }
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;
46
+ }
47
+ .eds-top-navigation-item--active {
48
+ --show-active-line: 1;
49
+ }
50
+ .eds-top-navigation-item--active::after {
51
+ width: 2rem;
4
52
  }@charset "UTF-8";
5
53
  /* DO NOT CHANGE!*/
6
54
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -268,124 +316,6 @@
268
316
  font-weight: 600;
269
317
  }/* DO NOT CHANGE!*/
270
318
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
271
- .eds-stepper {
272
- display: flex;
273
- flex-direction: row;
274
- }
275
- .eds-stepper__item__container {
276
- cursor: pointer;
277
- font-family: inherit;
278
- text-transform: none;
279
- -webkit-appearance: none;
280
- -moz-appearance: none;
281
- appearance: none;
282
- background: none;
283
- border: none;
284
- margin: 0;
285
- padding: 0;
286
- align-items: inherit;
287
- display: flex;
288
- flex-grow: 1;
289
- flex-basis: 0;
290
- flex-direction: column;
291
- margin-left: 0.25rem;
292
- }
293
- .eds-stepper__item__container--non-interactive {
294
- cursor: default;
295
- }
296
- .eds-stepper__item__container:focus {
297
- outline-offset: 0.125rem;
298
- outline: none;
299
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
300
- }
301
- .eds-contrast .eds-stepper__item__container:focus {
302
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
303
- }
304
- .eds-stepper__item__container:first-child {
305
- margin-left: 0;
306
- }
307
- .eds-stepper__item__label {
308
- cursor: inherit;
309
- flex-grow: 1;
310
- flex-direction: column;
311
- text-align: center;
312
- font-size: 0.875rem;
313
- padding: 0.25rem 1rem;
314
- }
315
- .eds-stepper__item__label--active {
316
- font-weight: 600;
317
- }
318
- .eds-stepper__item__label.eds-stepper__item__label--active {
319
- color: #181c56;
320
- }
321
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
322
- color: #ffffff;
323
- }
324
- .eds-stepper__item__label.eds-stepper__item__label--has-been {
325
- color: #181c56;
326
- }
327
- .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
328
- color: #ffffff;
329
- }
330
- .eds-stepper__item__square {
331
- height: 0.5rem;
332
- }
333
- .eds-stepper__item__square--active {
334
- color: inherit;
335
- background: #e9e9e9;
336
- position: relative;
337
- }
338
- .eds-stepper__item__square--active:before {
339
- background: #181c56;
340
- content: "";
341
- position: absolute;
342
- right: calc(50% - 0.2rem);
343
- border-radius: 0.0625rem;
344
- bottom: 0.0625rem;
345
- width: calc(
346
- 0.5rem - 0.125rem - 0.01rem
347
- );
348
- height: calc(
349
- 0.5rem - 0.125rem - 0.01rem
350
- );
351
- transform: rotate(45deg);
352
- }
353
- .eds-contrast .eds-stepper__item__square--active:before {
354
- border-left-color: #aeb7e2;
355
- border-left-color: #aeb7e2;
356
- }
357
- .eds-stepper__item__square--active:after {
358
- content: "";
359
- position: absolute;
360
- left: 0;
361
- bottom: 0;
362
- width: 50%;
363
- height: 0.5rem;
364
- background: #181c56;
365
- }
366
- .eds-contrast .eds-stepper__item__square--active:after {
367
- background: #aeb7e2;
368
- }
369
- .eds-contrast .eds-stepper__item__square--active {
370
- background: #aeb7e2;
371
- background: #393d79;
372
- }
373
- .eds-stepper__item__square--inactive {
374
- color: #656782;
375
- background: #e9e9e9;
376
- }
377
- .eds-contrast .eds-stepper__item__square--inactive {
378
- color: #aeb7e2;
379
- background: #393d79;
380
- }
381
- .eds-stepper__item__square--has-been {
382
- color: inherit;
383
- background: #181c56;
384
- }
385
- .eds-contrast .eds-stepper__item__square--has-been {
386
- background: #aeb7e2;
387
- }/* DO NOT CHANGE!*/
388
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
389
319
  .eds-pagination {
390
320
  align-items: center;
391
321
  display: flex;
@@ -630,50 +560,120 @@
630
560
  right: calc(100% - 2rem);
631
561
  }/* DO NOT CHANGE!*/
632
562
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
633
- .eds-top-navigation-item {
634
- --show-active-line: 0;
635
- display: inline-block;
563
+ .eds-stepper {
564
+ display: flex;
565
+ flex-direction: row;
566
+ }
567
+ .eds-stepper__item__container {
636
568
  cursor: pointer;
637
- color: inherit;
638
- text-decoration: none;
639
- position: relative;
640
- padding: 1rem;
641
- min-width: 5rem;
642
- width: -moz-fit-content;
643
- width: fit-content;
644
- text-align: center;
645
569
  font-family: inherit;
646
- font-size: 1rem;
647
- font-weight: 600;
570
+ text-transform: none;
571
+ -webkit-appearance: none;
572
+ -moz-appearance: none;
573
+ appearance: none;
574
+ background: none;
575
+ border: none;
576
+ margin: 0;
577
+ padding: 0;
578
+ align-items: inherit;
579
+ display: flex;
580
+ flex-grow: 1;
581
+ flex-basis: 0;
582
+ flex-direction: column;
583
+ margin-left: 0.25rem;
648
584
  }
649
- .eds-top-navigation-item::after {
650
- content: "";
651
- display: block;
652
- bottom: 1rem;
653
- height: 0.1875rem;
654
- width: 0;
655
- margin: 0 auto;
656
- opacity: var(--show-active-line);
657
- background: #ff5959;
658
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
585
+ .eds-stepper__item__container--non-interactive {
586
+ cursor: default;
659
587
  }
660
- .eds-top-navigation-item:focus {
588
+ .eds-stepper__item__container:focus {
661
589
  outline-offset: 0.125rem;
662
590
  outline: none;
663
591
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
664
592
  }
665
- .eds-contrast .eds-top-navigation-item:focus {
593
+ .eds-contrast .eds-stepper__item__container:focus {
666
594
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
667
595
  }
668
- .eds-top-navigation-item:hover {
669
- --show-active-line: 1;
596
+ .eds-stepper__item__container:first-child {
597
+ margin-left: 0;
670
598
  }
671
- .eds-top-navigation-item:hover::after {
672
- width: 2rem;
599
+ .eds-stepper__item__label {
600
+ cursor: inherit;
601
+ flex-grow: 1;
602
+ flex-direction: column;
603
+ text-align: center;
604
+ font-size: 0.875rem;
605
+ padding: 0.25rem 1rem;
673
606
  }
674
- .eds-top-navigation-item--active {
675
- --show-active-line: 1;
607
+ .eds-stepper__item__label--active {
608
+ font-weight: 600;
676
609
  }
677
- .eds-top-navigation-item--active::after {
678
- width: 2rem;
610
+ .eds-stepper__item__label.eds-stepper__item__label--active {
611
+ color: #181c56;
612
+ }
613
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--active {
614
+ color: #ffffff;
615
+ }
616
+ .eds-stepper__item__label.eds-stepper__item__label--has-been {
617
+ color: #181c56;
618
+ }
619
+ .eds-contrast .eds-stepper__item__label.eds-stepper__item__label--has-been {
620
+ color: #ffffff;
621
+ }
622
+ .eds-stepper__item__square {
623
+ height: 0.5rem;
624
+ }
625
+ .eds-stepper__item__square--active {
626
+ color: inherit;
627
+ background: #e9e9e9;
628
+ position: relative;
629
+ }
630
+ .eds-stepper__item__square--active:before {
631
+ background: #181c56;
632
+ content: "";
633
+ position: absolute;
634
+ right: calc(50% - 0.2rem);
635
+ border-radius: 0.0625rem;
636
+ bottom: 0.0625rem;
637
+ width: calc(
638
+ 0.5rem - 0.125rem - 0.01rem
639
+ );
640
+ height: calc(
641
+ 0.5rem - 0.125rem - 0.01rem
642
+ );
643
+ transform: rotate(45deg);
644
+ }
645
+ .eds-contrast .eds-stepper__item__square--active:before {
646
+ border-left-color: #aeb7e2;
647
+ border-left-color: #aeb7e2;
648
+ }
649
+ .eds-stepper__item__square--active:after {
650
+ content: "";
651
+ position: absolute;
652
+ left: 0;
653
+ bottom: 0;
654
+ width: 50%;
655
+ height: 0.5rem;
656
+ background: #181c56;
657
+ }
658
+ .eds-contrast .eds-stepper__item__square--active:after {
659
+ background: #aeb7e2;
660
+ }
661
+ .eds-contrast .eds-stepper__item__square--active {
662
+ background: #aeb7e2;
663
+ background: #393d79;
664
+ }
665
+ .eds-stepper__item__square--inactive {
666
+ color: #656782;
667
+ background: #e9e9e9;
668
+ }
669
+ .eds-contrast .eds-stepper__item__square--inactive {
670
+ color: #aeb7e2;
671
+ background: #393d79;
672
+ }
673
+ .eds-stepper__item__square--has-been {
674
+ color: inherit;
675
+ background: #181c56;
676
+ }
677
+ .eds-contrast .eds-stepper__item__square--has-been {
678
+ background: #aeb7e2;
679
679
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.27",
3
+ "version": "4.1.28",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -27,17 +27,17 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.58",
31
- "@entur/button": "^2.10.13",
32
- "@entur/expand": "^3.3.34",
33
- "@entur/icons": "^5.7.0",
34
- "@entur/layout": "^2.1.20",
35
- "@entur/tokens": "^3.7.0",
36
- "@entur/typography": "^1.7.9",
37
- "@entur/utils": "^0.5.4",
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",
35
+ "@entur/tokens": "^3.8.0",
36
+ "@entur/typography": "^1.7.10",
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": "0488198c40c8c610f981c97c8a755a9a435044dd"
42
+ "gitHead": "bc067536ed769de8072f19002ef4877a1e974443"
43
43
  }