@entur/menu 5.2.1-beta.9 → 5.2.2

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 (24) hide show
  1. package/dist/BreadcrumbItem.d.ts +2 -3
  2. package/dist/BreadcrumbNavigation.d.ts +1 -2
  3. package/dist/CollapsibleSideNavigation.d.ts +1 -1
  4. package/dist/OverflowMenu.d.ts +3 -4
  5. package/dist/Pagination.d.ts +1 -2
  6. package/dist/PaginationInput.d.ts +1 -1
  7. package/dist/PaginationPage.d.ts +1 -1
  8. package/dist/SideNavigation.d.ts +1 -2
  9. package/dist/SideNavigationGroup.d.ts +1 -1
  10. package/dist/SideNavigationItem.d.ts +2 -2
  11. package/dist/Stepper.d.ts +1 -2
  12. package/dist/TopNavigationItem.d.ts +2 -3
  13. package/dist/index.d.ts +0 -1
  14. package/dist/menu.cjs.js +820 -0
  15. package/dist/menu.cjs.js.map +1 -0
  16. package/dist/menu.esm.js +712 -669
  17. package/dist/menu.esm.js.map +1 -1
  18. package/dist/styles.css +699 -728
  19. package/package.json +30 -20
  20. package/dist/index.js +0 -8
  21. package/dist/menu.cjs.development.js +0 -793
  22. package/dist/menu.cjs.development.js.map +0 -1
  23. package/dist/menu.cjs.production.min.js +0 -2
  24. package/dist/menu.cjs.production.min.js.map +0 -1
package/dist/styles.css CHANGED
@@ -1,234 +1,345 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-side-navigation,
4
- .eds-side-navigation-group {
5
- color: var(--components-menu-sidenavigation-standard-text);
6
- }
7
- .eds-contrast .eds-side-navigation,
8
- .eds-contrast .eds-side-navigation-group {
9
- color: var(--components-menu-sidenavigation-contrast-text);
10
- }
11
-
12
- .eds-side-navigation__click-target svg {
13
- margin-right: 1rem;
14
- color: var(--components-menu-sidenavigation-standard-icon);
15
- display: inline-flex;
16
- align-self: center;
17
- position: relative;
18
- top: 0.075em;
19
- }
20
- .eds-contrast .eds-side-navigation__click-target svg {
21
- color: var(--components-menu-sidenavigation-contrast-icon);
22
- }
23
-
24
- .eds-side-navigation__click-target[disabled] svg {
25
- color: var(--components-menu-sidenavigation-standard-icon-disabled);
26
- }
27
- .eds-contrast .eds-side-navigation__click-target[disabled] svg {
28
- color: var(--components-menu-sidenavigation-contrast-icon-disabled);
29
- }
30
-
31
- .eds-side-navigation {
32
- --padding-vertical: 1rem;
33
- --padding-horizontal: 2.5rem;
34
- background-color: var(--components-menu-sidenavigation-standard-background);
35
- color: var(--components-menu-sidenavigation-standard-text);
36
- padding: 0;
37
- margin: 0;
38
- list-style: none;
39
- position: relative;
40
- transition: max-width ease-in-out 0.2s;
41
- }
42
- .eds-contrast .eds-side-navigation {
43
- background-color: var(--components-menu-sidenavigation-contrast-background);
44
- color: var(--components-menu-sidenavigation-contrast-text);
45
- }
46
- .eds-side-navigation__collapse-button {
47
- position: absolute;
48
- right: -0.75rem;
49
- height: 1.5rem;
50
- width: 1.5rem;
51
- border-radius: 50%;
52
- border: none;
53
- cursor: pointer;
54
- background-color: var(--components-menu-sidenavigation-standard-background);
55
- color: var(--components-menu-sidenavigation-standard-text);
56
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
57
- padding: 0;
58
- display: flex;
59
- align-items: center;
60
- justify-content: center;
61
- z-index: 10;
62
- }
63
- .eds-contrast .eds-side-navigation__collapse-button {
64
- background-color: var(--components-menu-sidenavigation-contrast-background);
65
- color: var(--components-menu-sidenavigation-contast-text);
66
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
67
- }
68
- .eds-side-navigation__collapse-button svg {
69
- margin: 0;
70
- top: 0;
71
- color: var(--components-menu-sidenavigation-standard-icon);
72
- }
73
- .eds-contrast .eds-side-navigation__collapse-button svg {
74
- color: var(--components-menu-sidenavigation-contrast-icon);
75
- }
76
- .eds-side-navigation__collapse-button:focus-visible {
77
- outline: 2px solid #181c56;
78
- outline-color: var(--basecolors-stroke-focus-standard);
79
- outline-offset: 0.125rem;
80
- }
81
- .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
82
- outline-color: var(--basecolors-stroke-focus-contrast);
83
- }
84
- @media screen and (min-width: 50rem) {
85
- .eds-side-navigation {
86
- max-width: 26rem;
87
- }
88
- }
89
- .eds-side-navigation--small {
90
- --padding-vertical: calc(0.5rem + 0.1875rem);
91
- }
92
- .eds-side-navigation .eds-side-navigation {
93
- background-color: var(--components-menu-sidenavigation-standard-background);
94
- }
95
- .eds-contrast .eds-side-navigation .eds-side-navigation {
96
- background-color: var(--components-menu-sidenavigation-contrast-background);
97
- }
98
- .eds-side-navigation--collapsed {
99
- max-width: 80px;
100
- }
101
-
102
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
103
- padding-left: 3.5rem;
104
- box-shadow: none;
105
- }
106
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
107
- background-color: var(--components-menu-sidenavigation-standard-fill-active);
108
- }
109
- .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
110
- background-color: var(--components-menu-sidenavigation-contrast-fill-active);
3
+ /* DO NOT CHANGE!*/
4
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
+ /* DO NOT CHANGE!*/
6
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
+ [data-color-mode=light],
8
+ :root {
9
+ --components-menu-breadcrumb-contrast-icon: #ffffff;
10
+ --components-menu-breadcrumb-contrast-text: #ffffff;
11
+ --components-menu-breadcrumb-standard-icon: #181c56;
12
+ --components-menu-breadcrumb-standard-text: #181c56;
13
+ --components-menu-navigationbar-contrast-background: #393d79;
14
+ --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
15
+ --components-menu-navigationbar-contrast-icon-selected: #ffffff;
16
+ --components-menu-navigationbar-contrast-icon-unselected: #d9dae8;
17
+ --components-menu-navigationbar-contrast-stroke-selected: #ff5959;
18
+ --components-menu-navigationbar-contrast-text-selected: #ffffff;
19
+ --components-menu-navigationbar-contrast-text-unselected: #d9dae8;
20
+ --components-menu-navigationbar-standard-background: #ffffff;
21
+ --components-menu-navigationbar-standard-divide: #e3e6e8;
22
+ --components-menu-navigationbar-standard-icon-selected: #181c56;
23
+ --components-menu-navigationbar-standard-icon-unselected: #626493;
24
+ --components-menu-navigationbar-standard-stroke-selected: #ff5959;
25
+ --components-menu-navigationbar-standard-text-selected: #181c56;
26
+ --components-menu-navigationbar-standard-text-unselected: #626493;
27
+ --components-menu-navigationlink-contrast-icon: #ffffff;
28
+ --components-menu-navigationlink-contrast-text: #ffffff;
29
+ --components-menu-navigationlink-standard-icon: #181c56;
30
+ --components-menu-navigationlink-standard-text: #181c56;
31
+ --components-menu-overflowmenu-border: #8284ab;
32
+ --components-menu-overflowmenu-fill-active: #aeb7e2;
33
+ --components-menu-overflowmenu-fill-default: #f2f5f7;
34
+ --components-menu-overflowmenu-fill-hover: #d9ddf2;
35
+ --components-menu-overflowmenu-icon: #181c56;
36
+ --components-menu-overflowmenu-icon-disabled: #6e6f73;
37
+ --components-menu-overflowmenu-text: #181c56;
38
+ --components-menu-overflowmenu-text-disabled: #6e6f73;
39
+ --components-menu-pagination-contrast-active: #8794d4;
40
+ --components-menu-pagination-contrast-border-selected: #ffffff;
41
+ --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
42
+ --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
43
+ --components-menu-pagination-contrast-hover: #626493;
44
+ --components-menu-pagination-contrast-icon: #ffffff;
45
+ --components-menu-pagination-contrast-text-selected: #181c56;
46
+ --components-menu-pagination-contrast-text-subdued: #d9dae8;
47
+ --components-menu-pagination-contrast-text-unselected: #ffffff;
48
+ --components-menu-pagination-standard-active: #aeb7e2;
49
+ --components-menu-pagination-standard-border-selected: #181c56;
50
+ --components-menu-pagination-standard-border-unselected: rgba(84, 86, 140, 0.4);
51
+ --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
52
+ --components-menu-pagination-standard-hover: #d9ddf2;
53
+ --components-menu-pagination-standard-icon: #181c56;
54
+ --components-menu-pagination-standard-text-selected: #181c56;
55
+ --components-menu-pagination-standard-text-subdued: #626493;
56
+ --components-menu-pagination-standard-text-unselected: #181c56;
57
+ --components-menu-sidenavigation-contrast-avatar: #393d79;
58
+ --components-menu-sidenavigation-contrast-background: #181c56;
59
+ --components-menu-sidenavigation-contrast-divide: #8284ab;
60
+ --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
61
+ --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
62
+ --components-menu-sidenavigation-contrast-fill-hover: #393d79;
63
+ --components-menu-sidenavigation-contrast-icon: #ffffff;
64
+ --components-menu-sidenavigation-contrast-icon-disabled: #b6b8ba;
65
+ --components-menu-sidenavigation-contrast-icon-label: #aeb7e2;
66
+ --components-menu-sidenavigation-contrast-label: #aeb7e2;
67
+ --components-menu-sidenavigation-contrast-stroke-selected: #ff5959;
68
+ --components-menu-sidenavigation-contrast-text: #ffffff;
69
+ --components-menu-sidenavigation-contrast-text-disabled: #b6b8ba;
70
+ --components-menu-sidenavigation-standard-avatar: #ffffff;
71
+ --components-menu-sidenavigation-standard-background: #f2f5f7;
72
+ --components-menu-sidenavigation-standard-divide: #e3e6e8;
73
+ --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
74
+ --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
75
+ --components-menu-sidenavigation-standard-fill-hover: #d9dae8;
76
+ --components-menu-sidenavigation-standard-icon: #181c56;
77
+ --components-menu-sidenavigation-standard-icon-disabled: #6e6f73;
78
+ --components-menu-sidenavigation-standard-icon-label: #626493;
79
+ --components-menu-sidenavigation-standard-label: #626493;
80
+ --components-menu-sidenavigation-standard-stroke-selected: #181c56;
81
+ --components-menu-sidenavigation-standard-text: #181c56;
82
+ --components-menu-sidenavigation-standard-text-disabled: #6e6f73;
83
+ --components-menu-stepper-contrast-background: #626493;
84
+ --components-menu-stepper-contrast-progressbar: #aeb7e2;
85
+ --components-menu-stepper-contrast-text-completed: #ffffff;
86
+ --components-menu-stepper-contrast-text-uncompleted: #aeb7e2;
87
+ --components-menu-stepper-standard-background: #e3e6e8;
88
+ --components-menu-stepper-standard-progressbar: #181c56;
89
+ --components-menu-stepper-standard-text-completed: #181c56;
90
+ --components-menu-stepper-standard-text-uncompleted: #6e6f73;
91
+ --components-menu-tableofcontent-contrast-icon-selected: #ffffff;
92
+ --components-menu-tableofcontent-contrast-icon-unselected: #d9dae8;
93
+ --components-menu-tableofcontent-contrast-stroke-selected: #ff5959;
94
+ --components-menu-tableofcontent-contrast-stroke-unselected: #54568c;
95
+ --components-menu-tableofcontent-contrast-text-selected: #ffffff;
96
+ --components-menu-tableofcontent-contrast-text-unselected: #d9dae8;
97
+ --components-menu-tableofcontent-standard-icon-selected: #181c56;
98
+ --components-menu-tableofcontent-standard-icon-unselected: #626493;
99
+ --components-menu-tableofcontent-standard-stroke-selected: #ff5959;
100
+ --components-menu-tableofcontent-standard-stroke-unselected: #e3e6e8;
101
+ --components-menu-tableofcontent-standard-text-selected: #181c56;
102
+ --components-menu-tableofcontent-standard-text-unselected: #626493;
111
103
  }
112
104
 
113
- .eds-side-navigation__click-target {
114
- -webkit-appearance: none;
115
- -moz-appearance: none;
116
- appearance: none;
117
- background: none;
118
- border: 0;
119
- border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
120
- border-radius: 0;
121
- color: var(--components-menu-sidenavigation-standard-text);
122
- cursor: pointer;
123
- display: block;
124
- font-size: 1rem;
125
- font-family: inherit;
126
- font-weight: 500;
127
- line-height: inherit;
128
- padding: var(--padding-vertical) 2.5rem;
129
- padding-left: 2.5rem;
130
- transition: padding 0.2s ease-in-out;
131
- text-align: left;
132
- -webkit-text-decoration: none;
133
- text-decoration: none;
134
- width: 100%;
135
- }
136
- .eds-contrast .eds-side-navigation__click-target {
137
- color: var(--components-menu-sidenavigation-contrast-text);
138
- border-color: var(--components-menu-sidenavigation-contrast-divide);
139
- }
140
- .eds-side-navigation--collapsed .eds-side-navigation__click-target {
141
- padding-left: 2rem;
142
- }
143
- .eds-side-navigation__click-target--active {
144
- box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-standard-stroke-selected);
145
- font-weight: 600;
146
- }
147
- .eds-contrast .eds-side-navigation__click-target--active {
148
- box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-contrast-stroke-selected);
149
- }
150
- .eds-side-navigation__click-target[disabled] {
151
- cursor: not-allowed;
152
- color: var(--components-menu-sidenavigation-standard-text-disabled);
153
- }
154
- .eds-contrast .eds-side-navigation__click-target[disabled] {
155
- color: var(--components-menu-sidenavigation-contrast-text-disabled);
156
- }
157
- .eds-side-navigation__click-target:not([disabled]):hover {
158
- background-color: var(--components-menu-sidenavigation-standard-fill-hover);
159
- }
160
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
161
- background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
162
- }
163
- .eds-side-navigation__click-target:not([disabled]):focus-visible {
164
- outline: 2px solid #181c56;
165
- outline-color: var(--basecolors-stroke-focus-standard);
166
- outline-offset: 0.125rem;
167
- }
168
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
169
- outline-color: var(--basecolors-stroke-focus-contrast);
105
+ [data-color-mode=dark] {
106
+ --components-menu-breadcrumb-contrast-icon: #e5e5e9;
107
+ --components-menu-breadcrumb-contrast-text: #e5e5e9;
108
+ --components-menu-breadcrumb-standard-icon: #e5e5e9;
109
+ --components-menu-breadcrumb-standard-text: #e5e5e9;
110
+ --components-menu-navigationbar-contrast-background: #393a49;
111
+ --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
112
+ --components-menu-navigationbar-contrast-icon-selected: #e5e5e9;
113
+ --components-menu-navigationbar-contrast-icon-unselected: #b6b8ba;
114
+ --components-menu-navigationbar-contrast-stroke-selected: #ff9494;
115
+ --components-menu-navigationbar-contrast-text-selected: #e5e5e9;
116
+ --components-menu-navigationbar-contrast-text-unselected: #b6b8ba;
117
+ --components-menu-navigationbar-standard-background: #393a49;
118
+ --components-menu-navigationbar-standard-divide: rgba(255, 255, 255, 0);
119
+ --components-menu-navigationbar-standard-icon-selected: #e5e5e9;
120
+ --components-menu-navigationbar-standard-icon-unselected: #b6b8ba;
121
+ --components-menu-navigationbar-standard-stroke-selected: #ff9494;
122
+ --components-menu-navigationbar-standard-text-selected: #e5e5e9;
123
+ --components-menu-navigationbar-standard-text-unselected: #b6b8ba;
124
+ --components-menu-navigationlink-contrast-icon: #e5e5e9;
125
+ --components-menu-navigationlink-contrast-text: #e5e5e9;
126
+ --components-menu-navigationlink-standard-icon: #e5e5e9;
127
+ --components-menu-navigationlink-standard-text: #e5e5e9;
128
+ --components-menu-overflowmenu-border: rgba(255, 255, 255, 0);
129
+ --components-menu-overflowmenu-fill-active: #8794d4;
130
+ --components-menu-overflowmenu-fill-default: #464755;
131
+ --components-menu-overflowmenu-fill-hover: #626493;
132
+ --components-menu-overflowmenu-icon: #e5e5e9;
133
+ --components-menu-overflowmenu-icon-disabled: #949699;
134
+ --components-menu-overflowmenu-text: #e5e5e9;
135
+ --components-menu-overflowmenu-text-disabled: #949699;
136
+ --components-menu-pagination-contrast-active: #8794d4;
137
+ --components-menu-pagination-contrast-border-selected: #e5e5e9;
138
+ --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
139
+ --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
140
+ --components-menu-pagination-contrast-hover: #626493;
141
+ --components-menu-pagination-contrast-icon: #e5e5e9;
142
+ --components-menu-pagination-contrast-text-selected: #08091c;
143
+ --components-menu-pagination-contrast-text-subdued: #b3b4bd;
144
+ --components-menu-pagination-contrast-text-unselected: #e5e5e9;
145
+ --components-menu-pagination-standard-active: #8794d4;
146
+ --components-menu-pagination-standard-border-selected: #e5e5e9;
147
+ --components-menu-pagination-standard-border-unselected: rgba(174, 183, 226, 0.6980392157);
148
+ --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
149
+ --components-menu-pagination-standard-hover: #626493;
150
+ --components-menu-pagination-standard-icon: #e5e5e9;
151
+ --components-menu-pagination-standard-text-selected: #08091c;
152
+ --components-menu-pagination-standard-text-subdued: #b3b4bd;
153
+ --components-menu-pagination-standard-text-unselected: #e5e5e9;
154
+ --components-menu-sidenavigation-contrast-avatar: rgba(229, 229, 233, 0.1490196078);
155
+ --components-menu-sidenavigation-contrast-background: #212233;
156
+ --components-menu-sidenavigation-contrast-divide: #81828f;
157
+ --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
158
+ --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
159
+ --components-menu-sidenavigation-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
160
+ --components-menu-sidenavigation-contrast-icon: #e5e5e9;
161
+ --components-menu-sidenavigation-contrast-icon-disabled: #949699;
162
+ --components-menu-sidenavigation-contrast-icon-label: #b3b4bd;
163
+ --components-menu-sidenavigation-contrast-label: #b3b4bd;
164
+ --components-menu-sidenavigation-contrast-stroke-selected: #ff9494;
165
+ --components-menu-sidenavigation-contrast-text: #e5e5e9;
166
+ --components-menu-sidenavigation-contrast-text-disabled: #949699;
167
+ --components-menu-sidenavigation-standard-avatar: rgba(229, 229, 233, 0.1490196078);
168
+ --components-menu-sidenavigation-standard-background: #212233;
169
+ --components-menu-sidenavigation-standard-divide: #81828f;
170
+ --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
171
+ --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
172
+ --components-menu-sidenavigation-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
173
+ --components-menu-sidenavigation-standard-icon: #e5e5e9;
174
+ --components-menu-sidenavigation-standard-icon-disabled: #949699;
175
+ --components-menu-sidenavigation-standard-icon-label: #b3b4bd;
176
+ --components-menu-sidenavigation-standard-label: #b3b4bd;
177
+ --components-menu-sidenavigation-standard-stroke-selected: #ff9494;
178
+ --components-menu-sidenavigation-standard-text: #e5e5e9;
179
+ --components-menu-sidenavigation-standard-text-disabled: #949699;
180
+ --components-menu-stepper-contrast-background: #626493;
181
+ --components-menu-stepper-contrast-progressbar: #aeb7e2;
182
+ --components-menu-stepper-contrast-text-completed: #e5e5e9;
183
+ --components-menu-stepper-contrast-text-uncompleted: #b6b8ba;
184
+ --components-menu-stepper-standard-background: #626493;
185
+ --components-menu-stepper-standard-progressbar: #aeb7e2;
186
+ --components-menu-stepper-standard-text-completed: #e5e5e9;
187
+ --components-menu-stepper-standard-text-uncompleted: #b6b8ba;
188
+ --components-menu-tableofcontent-contrast-icon-selected: #e5e5e9;
189
+ --components-menu-tableofcontent-contrast-icon-unselected: #b3b4bd;
190
+ --components-menu-tableofcontent-contrast-stroke-selected: #ff9494;
191
+ --components-menu-tableofcontent-contrast-stroke-unselected: rgba(84, 86, 140, 0.4);
192
+ --components-menu-tableofcontent-contrast-text-selected: #e5e5e9;
193
+ --components-menu-tableofcontent-contrast-text-unselected: #b3b4bd;
194
+ --components-menu-tableofcontent-standard-icon-selected: #e5e5e9;
195
+ --components-menu-tableofcontent-standard-icon-unselected: #b3b4bd;
196
+ --components-menu-tableofcontent-standard-stroke-selected: #ff9494;
197
+ --components-menu-tableofcontent-standard-stroke-unselected: rgba(84, 86, 140, 0.4);
198
+ --components-menu-tableofcontent-standard-text-selected: #e5e5e9;
199
+ --components-menu-tableofcontent-standard-text-unselected: #b3b4bd;
170
200
  }
171
201
 
172
- .eds-side-navigation-group + .eds-side-navigation-group {
173
- padding-top: 0.5rem;
174
- }
175
- @media screen and (min-width: 50rem) {
176
- .eds-side-navigation-group {
177
- max-width: 26rem;
178
- }
202
+ /* DO NOT CHANGE!*/
203
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
204
+ /* DO NOT CHANGE!*/
205
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
206
+ [data-color-mode=light],
207
+ :root {
208
+ --basecolors-frame-contrast: #181c56;
209
+ --basecolors-frame-contrastalt: #393d79;
210
+ --basecolors-frame-contrastalt-2: #292b6a;
211
+ --basecolors-frame-default: #ffffff;
212
+ --basecolors-frame-elevated: #ffffff;
213
+ --basecolors-frame-elevatedalt: #f6f6f9;
214
+ --basecolors-frame-subdued: #d9dae8;
215
+ --basecolors-frame-tint: #f6f6f9;
216
+ --basecolors-shape-accent: #181c56;
217
+ --basecolors-shape-bicycle-contrast: #00db9b;
218
+ --basecolors-shape-bicycle-default: #388f76;
219
+ --basecolors-shape-bus-contrast: #ff6392;
220
+ --basecolors-shape-bus-default: #c5044e;
221
+ --basecolors-shape-cableway-contrast: #b482fb;
222
+ --basecolors-shape-cableway-default: #78469a;
223
+ --basecolors-shape-disabled: #6e6f73;
224
+ --basecolors-shape-disabledalt: #b6b8ba;
225
+ --basecolors-shape-ferry-contrast: #6fdfff;
226
+ --basecolors-shape-ferry-default: #0c6693;
227
+ --basecolors-shape-funicular-contrast: #b482fb;
228
+ --basecolors-shape-funicular-default: #78469a;
229
+ --basecolors-shape-helicopter-contrast: #fbafea;
230
+ --basecolors-shape-helicopter-default: #800664;
231
+ --basecolors-shape-highlight: #ff5959;
232
+ --basecolors-shape-light: #ffffff;
233
+ --basecolors-shape-mask: #ffffff;
234
+ --basecolors-shape-maskalt: #ffffff;
235
+ --basecolors-shape-metro-contrast: #f08901;
236
+ --basecolors-shape-metro-default: #bf5826;
237
+ --basecolors-shape-mobility-contrast: #00db9b;
238
+ --basecolors-shape-mobility-default: #388f76;
239
+ --basecolors-shape-plane-contrast: #fbafea;
240
+ --basecolors-shape-plane-default: #800664;
241
+ --basecolors-shape-subdued: #626493;
242
+ --basecolors-shape-subduedalt: #d9dae8;
243
+ --basecolors-shape-taxi-contrast: #ffe082;
244
+ --basecolors-shape-taxi-default: #3d3e40;
245
+ --basecolors-shape-train-contrast: #42a5f5;
246
+ --basecolors-shape-train-default: #00367f;
247
+ --basecolors-shape-tram-contrast: #b482fb;
248
+ --basecolors-shape-tram-default: #78469a;
249
+ --basecolors-shape-walk-contrast: #8284ab;
250
+ --basecolors-shape-walk-default: #8d8e9c;
251
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
252
+ --basecolors-shape-airportlinkbus-default: #800664;
253
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
254
+ --basecolors-shape-airportlinkrail-default: #800664;
255
+ --basecolors-stroke-contrast: #aeb7e2;
256
+ --basecolors-stroke-default: #181c56;
257
+ --basecolors-stroke-disabled: #949699;
258
+ --basecolors-stroke-focus-contrast: #aeb7e2;
259
+ --basecolors-stroke-focus-standard: #181c56;
260
+ --basecolors-stroke-highlight: #ff5959;
261
+ --basecolors-stroke-light: #ffffff;
262
+ --basecolors-stroke-subdued: #8284ab;
263
+ --basecolors-stroke-subduedalt: #e3e6e8;
264
+ --basecolors-text-accent: #181c56;
265
+ --basecolors-text-disabled: #6e6f73;
266
+ --basecolors-text-disabledalt: #b6b8ba;
267
+ --basecolors-text-highlight: #ff5959;
268
+ --basecolors-text-light: #ffffff;
269
+ --basecolors-text-subdued: #626493;
270
+ --basecolors-text-subduedalt: #d9dae8;
179
271
  }
180
272
 
181
- .eds-side-navigation-group__trigger {
182
- align-items: center;
183
- -webkit-appearance: none;
184
- -moz-appearance: none;
185
- appearance: none;
186
- background-color: var(--components-menu-sidenavigation-standard-background);
187
- border: none;
188
- border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
189
- color: var(--components-menu-sidenavigation-standard-label);
190
- cursor: pointer;
191
- display: flex;
192
- font-size: 0.875rem;
193
- font-family: inherit;
194
- font-weight: 500;
195
- height: 3rem;
196
- justify-content: space-between;
197
- letter-spacing: 1px;
198
- line-height: 1.25rem;
199
- padding: 0.75rem 0 0.75rem 2.5rem;
200
- margin: 0;
201
- text-transform: uppercase;
202
- transition: padding 0.2s ease-in-out;
203
- width: 100%;
204
- }
205
- .eds-contrast .eds-side-navigation-group__trigger {
206
- color: var(--components-menu-sidenavigation-contrast-label);
207
- background-color: var(--components-menu-sidenavigation-contrast-background);
208
- border-color: var(--components-menu-sidenavigation-contrast-divide);
209
- }
210
- .eds-side-navigation-group__trigger-icon {
211
- margin-right: 0.75rem;
212
- }
213
- .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
214
- margin-right: 2.5rem;
215
- color: var(--components-menu-sidenavigation-standard-icon-label);
216
- }
217
- .eds-contrast .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
218
- color: var(--components-menu-sidenavigation-contrast-icon-label);
219
- }
220
- .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
221
- padding-left: 2rem;
222
- }
223
- .eds-side-navigation-group__trigger:focus-visible {
224
- outline: 2px solid #181c56;
225
- outline-color: var(--basecolors-stroke-focus-standard);
226
- outline-offset: 0.125rem;
227
- }
228
- .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
229
- outline-color: var(--basecolors-stroke-focus-contrast);
273
+ [data-color-mode=dark] {
274
+ --basecolors-frame-contrast: #212233;
275
+ --basecolors-frame-contrastalt: #141527;
276
+ --basecolors-frame-contrastalt-2: #08091c;
277
+ --basecolors-frame-default: #08091c;
278
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
279
+ --basecolors-frame-elevatedalt: #464755;
280
+ --basecolors-frame-subdued: #2d2e3e;
281
+ --basecolors-frame-tint: #141527;
282
+ --basecolors-shape-accent: #e5e5e9;
283
+ --basecolors-shape-bicycle-contrast: #4db295;
284
+ --basecolors-shape-bicycle-default: #4db295;
285
+ --basecolors-shape-bus-contrast: #ef7398;
286
+ --basecolors-shape-bus-default: #ef7398;
287
+ --basecolors-shape-cableway-contrast: #b898e5;
288
+ --basecolors-shape-cableway-default: #b898e5;
289
+ --basecolors-shape-disabled: #b6b8ba;
290
+ --basecolors-shape-disabledalt: #b3b4bd;
291
+ --basecolors-shape-ferry-contrast: #8ccfe2;
292
+ --basecolors-shape-ferry-default: #8ccfe2;
293
+ --basecolors-shape-funicular-contrast: #b898e5;
294
+ --basecolors-shape-funicular-default: #b898e5;
295
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
296
+ --basecolors-shape-helicopter-default: #f2b8e5;
297
+ --basecolors-shape-highlight: #ff9494;
298
+ --basecolors-shape-light: #e5e5e9;
299
+ --basecolors-shape-mask: #2d2e3e;
300
+ --basecolors-shape-maskalt: #393a49;
301
+ --basecolors-shape-metro-contrast: #dd973c;
302
+ --basecolors-shape-metro-default: #dd973c;
303
+ --basecolors-shape-mobility-contrast: #4db295;
304
+ --basecolors-shape-mobility-default: #4db295;
305
+ --basecolors-shape-plane-contrast: #f2b8e5;
306
+ --basecolors-shape-plane-default: #f2b8e5;
307
+ --basecolors-shape-subdued: #b3b4bd;
308
+ --basecolors-shape-subduedalt: #b3b4bd;
309
+ --basecolors-shape-taxi-contrast: #ffe082;
310
+ --basecolors-shape-taxi-default: #ffe082;
311
+ --basecolors-shape-train-contrast: #60a2d7;
312
+ --basecolors-shape-train-default: #60a2d7;
313
+ --basecolors-shape-tram-contrast: #b898e5;
314
+ --basecolors-shape-tram-default: #b898e5;
315
+ --basecolors-shape-walk-contrast: #8d8e9c;
316
+ --basecolors-shape-walk-default: #8d8e9c;
317
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
318
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
319
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
320
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
321
+ --basecolors-stroke-contrast: #aeb7e2;
322
+ --basecolors-stroke-default: #b3b4bd;
323
+ --basecolors-stroke-disabled: #e3e6e8;
324
+ --basecolors-stroke-focus-contrast: #aeb7e2;
325
+ --basecolors-stroke-focus-standard: #aeb7e2;
326
+ --basecolors-stroke-highlight: #ff9494;
327
+ --basecolors-stroke-light: #b3b4bd;
328
+ --basecolors-stroke-subdued: #81828f;
329
+ --basecolors-stroke-subduedalt: #949699;
330
+ --basecolors-text-accent: #e5e5e9;
331
+ --basecolors-text-disabled: #b6b8ba;
332
+ --basecolors-text-disabledalt: #b6b8ba;
333
+ --basecolors-text-highlight: #ff9494;
334
+ --basecolors-text-light: #e5e5e9;
335
+ --basecolors-text-subdued: #b3b4bd;
336
+ --basecolors-text-subduedalt: #b3b4bd;
230
337
  }
231
- /* DO NOT CHANGE!*/
338
+
339
+ :root {
340
+ --eds-menu: 1;
341
+ --reach-menu-button: 1;
342
+ }/* DO NOT CHANGE!*/
232
343
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
233
344
  .eds-breadcrumb {
234
345
  list-style: none;
@@ -249,7 +360,6 @@
249
360
  }
250
361
 
251
362
  .eds-breadcrumb__link {
252
- -webkit-text-decoration: none;
253
363
  text-decoration: none;
254
364
  color: var(--components-menu-breadcrumb-standard-text);
255
365
  background-image: linear-gradient(120deg, var(--components-menu-breadcrumb-standard-text) 0%, var(--components-menu-breadcrumb-standard-text) 100%);
@@ -282,8 +392,7 @@
282
392
  }
283
393
  .eds-breadcrumb__link--current {
284
394
  font-weight: 600;
285
- }
286
- /* DO NOT CHANGE!*/
395
+ }/* DO NOT CHANGE!*/
287
396
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
288
397
  .eds-overflow-menu__menu-list {
289
398
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
@@ -298,16 +407,13 @@
298
407
  .eds-overflow-menu__item {
299
408
  display: block;
300
409
  width: 100%;
301
- -webkit-appearance: none;
302
- -moz-appearance: none;
303
- appearance: none;
410
+ appearance: none;
304
411
  padding: 0.75rem;
305
412
  border: none;
306
413
  outline: none;
307
414
  font-size: 1rem;
308
415
  line-height: 1.375rem;
309
416
  text-align: left;
310
- -webkit-text-decoration: none;
311
417
  text-decoration: none;
312
418
  color: var(--components-menu-overflowmenu-text);
313
419
  background: var(--components-menu-overflowmenu-fill-default);
@@ -327,8 +433,7 @@
327
433
  }
328
434
  .eds-overflow-menu__item svg {
329
435
  margin-right: 0.75rem;
330
- }
331
- /* DO NOT CHANGE!*/
436
+ }/* DO NOT CHANGE!*/
332
437
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
333
438
  .eds-pagination {
334
439
  align-items: center;
@@ -368,9 +473,7 @@
368
473
  }
369
474
  .eds-pagination__controls__page {
370
475
  align-items: center;
371
- -webkit-appearance: none;
372
- -moz-appearance: none;
373
- appearance: none;
476
+ appearance: none;
374
477
  background-color: var(--components-menu-pagination-standard-default);
375
478
  border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
376
479
  border-radius: 0.25rem;
@@ -384,9 +487,7 @@
384
487
  margin: 0 0.125rem;
385
488
  padding: 0 0.25rem;
386
489
  transition: background 0.1s ease-out, border-color 0.1s ease-out;
387
- -webkit-user-select: none;
388
- -moz-user-select: none;
389
- user-select: none;
490
+ user-select: none;
390
491
  min-width: 2rem;
391
492
  }
392
493
  .eds-contrast .eds-pagination__controls__page {
@@ -434,9 +535,7 @@
434
535
  font-size: 1.5rem;
435
536
  height: 2rem;
436
537
  justify-content: center;
437
- -webkit-user-select: none;
438
- -moz-user-select: none;
439
- user-select: none;
538
+ user-select: none;
440
539
  width: 2rem;
441
540
  margin: 0 2px;
442
541
  }
@@ -458,9 +557,7 @@
458
557
  color: var(--components-menu-pagination-contrast-text-subdued);
459
558
  }
460
559
  .eds-pagination__controls__input__field {
461
- -webkit-appearance: none;
462
- -moz-appearance: none;
463
- appearance: none;
560
+ appearance: none;
464
561
  background-color: var(--components-menu-pagination-standard-default);
465
562
  border: 0.0625rem solid var(--components-menu-pagination-standard-border-unselected);
466
563
  border-radius: 0.25rem;
@@ -471,538 +568,412 @@
471
568
  text-align: center;
472
569
  width: 2rem;
473
570
  }
474
- .eds-contrast .eds-pagination__controls__input__field {
475
- background-color: var(--components-menu-pagination-contrast-default);
476
- border-color: var(--components-menu-pagination-contrast-border-unselected);
477
- color: var(--components-menu-pagination-contrast-text-unselected);
571
+ .eds-contrast .eds-pagination__controls__input__field {
572
+ background-color: var(--components-menu-pagination-contrast-default);
573
+ border-color: var(--components-menu-pagination-contrast-border-unselected);
574
+ color: var(--components-menu-pagination-contrast-text-unselected);
575
+ }
576
+ .eds-pagination__controls__input__field::-webkit-inner-spin-button, .eds-pagination__controls__input__field::-webkit-outer-spin-button {
577
+ appearance: none;
578
+ margin: 0;
579
+ }
580
+ .eds-pagination__controls__input__field:focus-visible {
581
+ outline: 2px solid #181c56;
582
+ outline-color: var(--basecolors-stroke-focus-standard);
583
+ outline-offset: 0.125rem;
584
+ }
585
+ .eds-contrast .eds-pagination__controls__input__field:focus-visible {
586
+ outline-color: var(--basecolors-stroke-focus-contrast);
587
+ }/* DO NOT CHANGE!*/
588
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
589
+ .eds-side-navigation,
590
+ .eds-side-navigation-group {
591
+ color: var(--components-menu-sidenavigation-standard-text);
592
+ }
593
+ .eds-contrast .eds-side-navigation,
594
+ .eds-contrast .eds-side-navigation-group {
595
+ color: var(--components-menu-sidenavigation-contrast-text);
596
+ }
597
+
598
+ .eds-side-navigation__click-target svg {
599
+ margin-right: 1rem;
600
+ color: var(--components-menu-sidenavigation-standard-icon);
601
+ display: inline-flex;
602
+ align-self: center;
603
+ position: relative;
604
+ top: 0.075em;
605
+ }
606
+ .eds-contrast .eds-side-navigation__click-target svg {
607
+ color: var(--components-menu-sidenavigation-contrast-icon);
608
+ }
609
+
610
+ .eds-side-navigation__click-target[disabled] svg {
611
+ color: var(--components-menu-sidenavigation-standard-icon-disabled);
612
+ }
613
+ .eds-contrast .eds-side-navigation__click-target[disabled] svg {
614
+ color: var(--components-menu-sidenavigation-contrast-icon-disabled);
615
+ }
616
+
617
+ .eds-side-navigation {
618
+ --padding-vertical: 1rem;
619
+ --padding-horizontal: 2.5rem;
620
+ background-color: var(--components-menu-sidenavigation-standard-background);
621
+ color: var(--components-menu-sidenavigation-standard-text);
622
+ padding: 0;
623
+ margin: 0;
624
+ list-style: none;
625
+ position: relative;
626
+ transition: max-width ease-in-out 0.2s;
627
+ }
628
+ .eds-contrast .eds-side-navigation {
629
+ background-color: var(--components-menu-sidenavigation-contrast-background);
630
+ color: var(--components-menu-sidenavigation-contrast-text);
631
+ }
632
+ .eds-side-navigation__collapse-button {
633
+ position: absolute;
634
+ right: -0.75rem;
635
+ height: 1.5rem;
636
+ width: 1.5rem;
637
+ border-radius: 50%;
638
+ border: none;
639
+ cursor: pointer;
640
+ background-color: var(--components-menu-sidenavigation-standard-background);
641
+ color: var(--components-menu-sidenavigation-standard-text);
642
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
643
+ padding: 0;
644
+ display: flex;
645
+ align-items: center;
646
+ justify-content: center;
647
+ z-index: 10;
648
+ }
649
+ .eds-contrast .eds-side-navigation__collapse-button {
650
+ background-color: var(--components-menu-sidenavigation-contrast-background);
651
+ color: var(--components-menu-sidenavigation-contast-text);
652
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
478
653
  }
479
- .eds-pagination__controls__input__field::-webkit-inner-spin-button, .eds-pagination__controls__input__field::-webkit-outer-spin-button {
480
- -webkit-appearance: none;
481
- appearance: none;
654
+ .eds-side-navigation__collapse-button svg {
482
655
  margin: 0;
656
+ top: 0;
657
+ color: var(--components-menu-sidenavigation-standard-icon);
483
658
  }
484
- .eds-pagination__controls__input__field:focus-visible {
659
+ .eds-contrast .eds-side-navigation__collapse-button svg {
660
+ color: var(--components-menu-sidenavigation-contrast-icon);
661
+ }
662
+ .eds-side-navigation__collapse-button:focus-visible {
485
663
  outline: 2px solid #181c56;
486
664
  outline-color: var(--basecolors-stroke-focus-standard);
487
665
  outline-offset: 0.125rem;
488
666
  }
489
- .eds-contrast .eds-pagination__controls__input__field:focus-visible {
667
+ .eds-contrast .eds-side-navigation__collapse-button:focus-visible {
490
668
  outline-color: var(--basecolors-stroke-focus-contrast);
491
669
  }
492
- /* DO NOT CHANGE!*/
493
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
494
- .eds-stepper {
495
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
496
- --line-color: var(--components-menu-stepper-standard-background);
497
- --label-font-weight: 500;
498
- --display-active-line: none;
499
- display: flex;
500
- flex-direction: row;
501
- width: 100%;
502
- list-style-type: none;
670
+ @media screen and (min-width: 50rem) {
671
+ .eds-side-navigation {
672
+ max-width: 26rem;
673
+ }
503
674
  }
504
- .eds-stepper__step {
505
- display: flex;
506
- flex-grow: 1;
507
- flex-basis: 0;
508
- flex-direction: column;
509
- align-items: inherit;
510
- -webkit-appearance: none;
511
- -moz-appearance: none;
512
- appearance: none;
513
- background: none;
514
- border: none;
515
- font-family: inherit;
516
- text-transform: none;
675
+ .eds-side-navigation--small {
676
+ --padding-vertical: calc(0.5rem + 0.1875rem);
517
677
  }
518
- .eds-stepper__step:focus-visible .eds-stepper__step__label {
519
- outline-offset: 0.125rem;
520
- outline: 2px solid #181c56;
678
+ .eds-side-navigation .eds-side-navigation {
679
+ background-color: var(--components-menu-sidenavigation-standard-background);
521
680
  }
522
- .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
523
- outline: 2px solid #ffffff;
681
+ .eds-contrast .eds-side-navigation .eds-side-navigation {
682
+ background-color: var(--components-menu-sidenavigation-contrast-background);
524
683
  }
525
- .eds-contrast .eds-stepper__step {
526
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
527
- --line-color: var(--components-menu-stepper-contrast-background);
684
+ .eds-side-navigation--collapsed {
685
+ max-width: 80px;
528
686
  }
529
- .eds-stepper__step__wrapper {
530
- flex-grow: 1;
687
+
688
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
689
+ padding-left: 3.5rem;
690
+ box-shadow: none;
531
691
  }
532
- .eds-stepper__step--interactive {
533
- all: unset;
534
- display: flex;
535
- flex-direction: column;
536
- width: 100%;
692
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
693
+ background-color: var(--components-menu-sidenavigation-standard-fill-active);
694
+ }
695
+ .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
696
+ background-color: var(--components-menu-sidenavigation-contrast-fill-active);
697
+ }
698
+
699
+ .eds-side-navigation__click-target {
700
+ appearance: none;
701
+ background: none;
702
+ border: 0;
703
+ border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
704
+ border-radius: 0;
705
+ color: var(--components-menu-sidenavigation-standard-text);
537
706
  cursor: pointer;
707
+ display: block;
708
+ font-size: 1rem;
709
+ font-family: inherit;
710
+ font-weight: 500;
711
+ line-height: inherit;
712
+ padding: var(--padding-vertical) 2.5rem;
713
+ padding-left: 2.5rem;
714
+ transition: padding 0.2s ease-in-out;
715
+ text-align: left;
716
+ text-decoration: none;
717
+ width: 100%;
538
718
  }
539
- .eds-stepper__step--active {
540
- --text-color: var(--components-menu-stepper-standard-text-uncompleted);
541
- --label-font-weight: 600;
542
- --display-active-line: block;
719
+ .eds-contrast .eds-side-navigation__click-target {
720
+ color: var(--components-menu-sidenavigation-contrast-text);
721
+ border-color: var(--components-menu-sidenavigation-contrast-divide);
543
722
  }
544
- .eds-contrast .eds-stepper__step--active {
545
- --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
723
+ .eds-side-navigation--collapsed .eds-side-navigation__click-target {
724
+ padding-left: 2rem;
546
725
  }
547
- .eds-stepper__step--completed {
548
- --text-color: var(--components-menu-stepper-standard-text-completed);
549
- --line-color: var(--components-menu-stepper-standard-progressbar);
726
+ .eds-side-navigation__click-target--active {
727
+ box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-standard-stroke-selected);
728
+ font-weight: 600;
550
729
  }
551
- .eds-contrast .eds-stepper__step--completed {
552
- --text-color: var(--components-menu-stepper-contrast-text-completed);
553
- --line-color: var(--components-menu-stepper-contrast-progressbar);
730
+ .eds-contrast .eds-side-navigation__click-target--active {
731
+ box-shadow: inset 0.25rem 0 0 var(--components-menu-sidenavigation-contrast-stroke-selected);
554
732
  }
555
- .eds-stepper__step__label {
556
- flex-grow: 1;
557
- flex-direction: column;
558
- align-self: center;
559
- text-align: center;
560
- font-size: 0.875rem;
561
- margin: 0.5rem 0 0;
562
- padding: 0 0.5rem;
563
- width: -moz-fit-content;
564
- width: fit-content;
565
- border-radius: 0.0625rem;
566
- color: var(--text-color);
567
- font-weight: var(--label-font-weight);
733
+ .eds-side-navigation__click-target[disabled] {
734
+ cursor: not-allowed;
735
+ color: var(--components-menu-sidenavigation-standard-text-disabled);
568
736
  }
569
- .eds-stepper__step--interactive:hover .eds-stepper__step__label {
570
- background-color: var(--components-menu-stepper-standard-background);
571
- color: var(--components-menu-stepper-standard-text-completed);
737
+ .eds-contrast .eds-side-navigation__click-target[disabled] {
738
+ color: var(--components-menu-sidenavigation-contrast-text-disabled);
572
739
  }
573
- .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
574
- background-color: var(--components-menu-stepper-contrast-background);
575
- color: var(--components-menu-stepper-contrast-text-completed);
740
+ .eds-side-navigation__click-target:not([disabled]):hover {
741
+ background-color: var(--components-menu-sidenavigation-standard-fill-hover);
576
742
  }
577
- .eds-stepper__step__line {
578
- height: 0.5rem;
579
- background: var(--line-color);
580
- position: relative;
743
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
744
+ background-color: var(--components-menu-sidenavigation-contrast-fill-hover);
581
745
  }
582
- .eds-stepper__step__line:before {
583
- display: var(--display-active-line);
584
- content: "";
585
- position: absolute;
586
- right: calc(50% - 0.2rem);
587
- bottom: 0.0625rem;
588
- border-radius: 0.0625rem;
589
- background: var(--components-menu-stepper-standard-progressbar);
590
- width: calc(0.5rem - 0.125rem - 0.01rem);
591
- height: calc(0.5rem - 0.125rem - 0.01rem);
592
- transform: rotate(45deg);
746
+ .eds-side-navigation__click-target:not([disabled]):focus-visible {
747
+ outline: 2px solid #181c56;
748
+ outline-color: var(--basecolors-stroke-focus-standard);
749
+ outline-offset: 0.125rem;
593
750
  }
594
- .eds-contrast .eds-stepper__step__line:before {
595
- background: var(--components-menu-stepper-contrast-progressbar);
751
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus-visible {
752
+ outline-color: var(--basecolors-stroke-focus-contrast);
596
753
  }
597
- .eds-stepper__step__line:after {
598
- display: var(--display-active-line);
599
- content: "";
600
- position: absolute;
601
- left: 0;
602
- bottom: 0;
603
- width: 50%;
604
- height: 0.5rem;
605
- background: var(--components-menu-stepper-standard-progressbar);
754
+
755
+ .eds-side-navigation-group + .eds-side-navigation-group {
756
+ padding-top: 0.5rem;
606
757
  }
607
- .eds-contrast .eds-stepper__step__line:after {
608
- background: var(--components-menu-stepper-contrast-progressbar);
758
+ @media screen and (min-width: 50rem) {
759
+ .eds-side-navigation-group {
760
+ max-width: 26rem;
761
+ }
609
762
  }
610
- /* DO NOT CHANGE!*/
611
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
612
- .eds-top-navigation-item {
613
- --show-active-line: 0;
614
- display: inline-block;
763
+
764
+ .eds-side-navigation-group__trigger {
765
+ align-items: center;
766
+ appearance: none;
767
+ background-color: var(--components-menu-sidenavigation-standard-background);
768
+ border: none;
769
+ border-bottom: 0.0625rem solid var(--components-menu-sidenavigation-standard-divide);
770
+ color: var(--components-menu-sidenavigation-standard-label);
615
771
  cursor: pointer;
616
- color: var(--components-menu-navigationbar-standard-text-unselected);
617
- -webkit-text-decoration: none;
618
- text-decoration: none;
619
- position: relative;
620
- padding: 1rem;
621
- min-width: 5rem;
622
- width: -moz-fit-content;
623
- width: fit-content;
624
- text-align: center;
772
+ display: flex;
773
+ font-size: 0.875rem;
625
774
  font-family: inherit;
626
- font-size: 1rem;
627
- font-weight: 600;
775
+ font-weight: 500;
776
+ height: 3rem;
777
+ justify-content: space-between;
778
+ letter-spacing: 1px;
779
+ line-height: 1.25rem;
780
+ padding: 0.75rem 0 0.75rem 2.5rem;
781
+ margin: 0;
782
+ text-transform: uppercase;
783
+ transition: padding 0.2s ease-in-out;
784
+ width: 100%;
628
785
  }
629
- .eds-top-navigation-item::after {
630
- content: "";
631
- display: block;
632
- bottom: 1rem;
633
- height: 0.1875rem;
634
- width: 0;
635
- margin: 0 auto;
636
- opacity: var(--show-active-line);
637
- background: var(--components-menu-navigationbar-standard-stroke-selected);
638
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
786
+ .eds-contrast .eds-side-navigation-group__trigger {
787
+ color: var(--components-menu-sidenavigation-contrast-label);
788
+ background-color: var(--components-menu-sidenavigation-contrast-background);
789
+ border-color: var(--components-menu-sidenavigation-contrast-divide);
790
+ }
791
+ .eds-side-navigation-group__trigger-icon {
792
+ margin-right: 0.75rem;
793
+ }
794
+ .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
795
+ margin-right: 2.5rem;
796
+ color: var(--components-menu-sidenavigation-standard-icon-label);
797
+ }
798
+ .eds-contrast .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
799
+ color: var(--components-menu-sidenavigation-contrast-icon-label);
639
800
  }
640
- .eds-contrast .eds-top-navigation-item {
641
- color: var(--components-menu-navigationbar-contrast-text-unselected);
801
+ .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
802
+ padding-left: 2rem;
642
803
  }
643
- .eds-top-navigation-item:focus-visible {
804
+ .eds-side-navigation-group__trigger:focus-visible {
644
805
  outline: 2px solid #181c56;
645
806
  outline-color: var(--basecolors-stroke-focus-standard);
646
807
  outline-offset: 0.125rem;
647
808
  }
648
- .eds-contrast .eds-top-navigation-item:focus-visible {
809
+ .eds-contrast .eds-side-navigation-group__trigger:focus-visible {
649
810
  outline-color: var(--basecolors-stroke-focus-contrast);
811
+ }/* DO NOT CHANGE!*/
812
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
813
+ .eds-stepper {
814
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
815
+ --line-color: var(--components-menu-stepper-standard-background);
816
+ --label-font-weight: 500;
817
+ --display-active-line: none;
818
+ display: flex;
819
+ flex-direction: row;
820
+ width: 100%;
821
+ list-style-type: none;
650
822
  }
651
- .eds-top-navigation-item:hover {
652
- --show-active-line: 1;
653
- }
654
- .eds-top-navigation-item:hover::after {
655
- width: 2rem;
823
+ .eds-stepper__step {
824
+ display: flex;
825
+ flex-grow: 1;
826
+ flex-basis: 0;
827
+ flex-direction: column;
828
+ align-items: inherit;
829
+ appearance: none;
830
+ background: none;
831
+ border: none;
832
+ font-family: inherit;
833
+ text-transform: none;
656
834
  }
657
- .eds-top-navigation-item--active {
658
- color: var(--components-menu-navigationbar-standard-text-selected);
659
- --show-active-line: 1;
835
+ .eds-stepper__step:focus-visible .eds-stepper__step__label {
836
+ outline-offset: 0.125rem;
837
+ outline: 2px solid #181c56;
660
838
  }
661
- .eds-top-navigation-item--active::after {
662
- width: 2rem;
839
+ .eds-contrast .eds-stepper__step:focus-visible .eds-stepper__step__label {
840
+ outline: 2px solid #ffffff;
663
841
  }
664
- .eds-contrast .eds-top-navigation-item--active {
665
- color: var(--components-menu-navigationbar-contrast-text-selected);
842
+ .eds-contrast .eds-stepper__step {
843
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
844
+ --line-color: var(--components-menu-stepper-contrast-background);
666
845
  }
667
- /* DO NOT CHANGE!*/
668
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
669
- /* DO NOT CHANGE!*/
670
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
671
- /* DO NOT CHANGE!*/
672
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
673
- [data-color-mode=light],
674
- :root {
675
- --components-menu-breadcrumb-contrast-icon: #ffffff;
676
- --components-menu-breadcrumb-contrast-text: #ffffff;
677
- --components-menu-breadcrumb-standard-icon: #181c56;
678
- --components-menu-breadcrumb-standard-text: #181c56;
679
- --components-menu-navigationbar-contrast-background: #393d79;
680
- --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
681
- --components-menu-navigationbar-contrast-icon-selected: #ffffff;
682
- --components-menu-navigationbar-contrast-icon-unselected: #d9dae8;
683
- --components-menu-navigationbar-contrast-stroke-selected: #ff5959;
684
- --components-menu-navigationbar-contrast-text-selected: #ffffff;
685
- --components-menu-navigationbar-contrast-text-unselected: #d9dae8;
686
- --components-menu-navigationbar-standard-background: #ffffff;
687
- --components-menu-navigationbar-standard-divide: #e3e6e8;
688
- --components-menu-navigationbar-standard-icon-selected: #181c56;
689
- --components-menu-navigationbar-standard-icon-unselected: #626493;
690
- --components-menu-navigationbar-standard-stroke-selected: #ff5959;
691
- --components-menu-navigationbar-standard-text-selected: #181c56;
692
- --components-menu-navigationbar-standard-text-unselected: #626493;
693
- --components-menu-navigationlink-contrast-icon: #ffffff;
694
- --components-menu-navigationlink-contrast-text: #ffffff;
695
- --components-menu-navigationlink-standard-icon: #181c56;
696
- --components-menu-navigationlink-standard-text: #181c56;
697
- --components-menu-overflowmenu-border: #8284ab;
698
- --components-menu-overflowmenu-fill-active: #aeb7e2;
699
- --components-menu-overflowmenu-fill-default: #f2f5f7;
700
- --components-menu-overflowmenu-fill-hover: #d9ddf2;
701
- --components-menu-overflowmenu-icon: #181c56;
702
- --components-menu-overflowmenu-icon-disabled: #6e6f73;
703
- --components-menu-overflowmenu-text: #181c56;
704
- --components-menu-overflowmenu-text-disabled: #6e6f73;
705
- --components-menu-pagination-contrast-active: #8794d4;
706
- --components-menu-pagination-contrast-border-selected: #ffffff;
707
- --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
708
- --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
709
- --components-menu-pagination-contrast-hover: #626493;
710
- --components-menu-pagination-contrast-icon: #ffffff;
711
- --components-menu-pagination-contrast-text-selected: #181c56;
712
- --components-menu-pagination-contrast-text-subdued: #d9dae8;
713
- --components-menu-pagination-contrast-text-unselected: #ffffff;
714
- --components-menu-pagination-standard-active: #aeb7e2;
715
- --components-menu-pagination-standard-border-selected: #181c56;
716
- --components-menu-pagination-standard-border-unselected: rgba(84, 86, 140, 0.4);
717
- --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
718
- --components-menu-pagination-standard-hover: #d9ddf2;
719
- --components-menu-pagination-standard-icon: #181c56;
720
- --components-menu-pagination-standard-text-selected: #181c56;
721
- --components-menu-pagination-standard-text-subdued: #626493;
722
- --components-menu-pagination-standard-text-unselected: #181c56;
723
- --components-menu-sidenavigation-contrast-avatar: #393d79;
724
- --components-menu-sidenavigation-contrast-background: #181c56;
725
- --components-menu-sidenavigation-contrast-divide: #8284ab;
726
- --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
727
- --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
728
- --components-menu-sidenavigation-contrast-fill-hover: #393d79;
729
- --components-menu-sidenavigation-contrast-icon: #ffffff;
730
- --components-menu-sidenavigation-contrast-icon-disabled: #b6b8ba;
731
- --components-menu-sidenavigation-contrast-icon-label: #aeb7e2;
732
- --components-menu-sidenavigation-contrast-label: #aeb7e2;
733
- --components-menu-sidenavigation-contrast-stroke-selected: #ff5959;
734
- --components-menu-sidenavigation-contrast-text: #ffffff;
735
- --components-menu-sidenavigation-contrast-text-disabled: #b6b8ba;
736
- --components-menu-sidenavigation-standard-avatar: #ffffff;
737
- --components-menu-sidenavigation-standard-background: #f2f5f7;
738
- --components-menu-sidenavigation-standard-divide: #e3e6e8;
739
- --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
740
- --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
741
- --components-menu-sidenavigation-standard-fill-hover: #d9dae8;
742
- --components-menu-sidenavigation-standard-icon: #181c56;
743
- --components-menu-sidenavigation-standard-icon-disabled: #6e6f73;
744
- --components-menu-sidenavigation-standard-icon-label: #626493;
745
- --components-menu-sidenavigation-standard-label: #626493;
746
- --components-menu-sidenavigation-standard-stroke-selected: #181c56;
747
- --components-menu-sidenavigation-standard-text: #181c56;
748
- --components-menu-sidenavigation-standard-text-disabled: #6e6f73;
749
- --components-menu-stepper-contrast-background: #626493;
750
- --components-menu-stepper-contrast-progressbar: #aeb7e2;
751
- --components-menu-stepper-contrast-text-completed: #ffffff;
752
- --components-menu-stepper-contrast-text-uncompleted: #aeb7e2;
753
- --components-menu-stepper-standard-background: #e3e6e8;
754
- --components-menu-stepper-standard-progressbar: #181c56;
755
- --components-menu-stepper-standard-text-completed: #181c56;
756
- --components-menu-stepper-standard-text-uncompleted: #6e6f73;
757
- --components-menu-tableofcontent-contrast-icon-selected: #ffffff;
758
- --components-menu-tableofcontent-contrast-icon-unselected: #d9dae8;
759
- --components-menu-tableofcontent-contrast-stroke-selected: #ff5959;
760
- --components-menu-tableofcontent-contrast-stroke-unselected: #54568c;
761
- --components-menu-tableofcontent-contrast-text-selected: #ffffff;
762
- --components-menu-tableofcontent-contrast-text-unselected: #d9dae8;
763
- --components-menu-tableofcontent-standard-icon-selected: #181c56;
764
- --components-menu-tableofcontent-standard-icon-unselected: #626493;
765
- --components-menu-tableofcontent-standard-stroke-selected: #ff5959;
766
- --components-menu-tableofcontent-standard-stroke-unselected: #e3e6e8;
767
- --components-menu-tableofcontent-standard-text-selected: #181c56;
768
- --components-menu-tableofcontent-standard-text-unselected: #626493;
846
+ .eds-stepper__step__wrapper {
847
+ flex-grow: 1;
769
848
  }
770
-
771
- [data-color-mode=dark] {
772
- --components-menu-breadcrumb-contrast-icon: #e5e5e9;
773
- --components-menu-breadcrumb-contrast-text: #e5e5e9;
774
- --components-menu-breadcrumb-standard-icon: #e5e5e9;
775
- --components-menu-breadcrumb-standard-text: #e5e5e9;
776
- --components-menu-navigationbar-contrast-background: #393a49;
777
- --components-menu-navigationbar-contrast-divide: rgba(255, 255, 255, 0);
778
- --components-menu-navigationbar-contrast-icon-selected: #e5e5e9;
779
- --components-menu-navigationbar-contrast-icon-unselected: #b6b8ba;
780
- --components-menu-navigationbar-contrast-stroke-selected: #ff9494;
781
- --components-menu-navigationbar-contrast-text-selected: #e5e5e9;
782
- --components-menu-navigationbar-contrast-text-unselected: #b6b8ba;
783
- --components-menu-navigationbar-standard-background: #393a49;
784
- --components-menu-navigationbar-standard-divide: rgba(255, 255, 255, 0);
785
- --components-menu-navigationbar-standard-icon-selected: #e5e5e9;
786
- --components-menu-navigationbar-standard-icon-unselected: #b6b8ba;
787
- --components-menu-navigationbar-standard-stroke-selected: #ff9494;
788
- --components-menu-navigationbar-standard-text-selected: #e5e5e9;
789
- --components-menu-navigationbar-standard-text-unselected: #b6b8ba;
790
- --components-menu-navigationlink-contrast-icon: #e5e5e9;
791
- --components-menu-navigationlink-contrast-text: #e5e5e9;
792
- --components-menu-navigationlink-standard-icon: #e5e5e9;
793
- --components-menu-navigationlink-standard-text: #e5e5e9;
794
- --components-menu-overflowmenu-border: rgba(255, 255, 255, 0);
795
- --components-menu-overflowmenu-fill-active: #8794d4;
796
- --components-menu-overflowmenu-fill-default: #464755;
797
- --components-menu-overflowmenu-fill-hover: #626493;
798
- --components-menu-overflowmenu-icon: #e5e5e9;
799
- --components-menu-overflowmenu-icon-disabled: #949699;
800
- --components-menu-overflowmenu-text: #e5e5e9;
801
- --components-menu-overflowmenu-text-disabled: #949699;
802
- --components-menu-pagination-contrast-active: #8794d4;
803
- --components-menu-pagination-contrast-border-selected: #e5e5e9;
804
- --components-menu-pagination-contrast-border-unselected: rgba(174, 183, 226, 0.6980392157);
805
- --components-menu-pagination-contrast-default: rgba(255, 255, 255, 0);
806
- --components-menu-pagination-contrast-hover: #626493;
807
- --components-menu-pagination-contrast-icon: #e5e5e9;
808
- --components-menu-pagination-contrast-text-selected: #08091c;
809
- --components-menu-pagination-contrast-text-subdued: #b3b4bd;
810
- --components-menu-pagination-contrast-text-unselected: #e5e5e9;
811
- --components-menu-pagination-standard-active: #8794d4;
812
- --components-menu-pagination-standard-border-selected: #e5e5e9;
813
- --components-menu-pagination-standard-border-unselected: rgba(174, 183, 226, 0.6980392157);
814
- --components-menu-pagination-standard-default: rgba(255, 255, 255, 0);
815
- --components-menu-pagination-standard-hover: #626493;
816
- --components-menu-pagination-standard-icon: #e5e5e9;
817
- --components-menu-pagination-standard-text-selected: #08091c;
818
- --components-menu-pagination-standard-text-subdued: #b3b4bd;
819
- --components-menu-pagination-standard-text-unselected: #e5e5e9;
820
- --components-menu-sidenavigation-contrast-avatar: rgba(229, 229, 233, 0.1490196078);
821
- --components-menu-sidenavigation-contrast-background: #212233;
822
- --components-menu-sidenavigation-contrast-divide: #81828f;
823
- --components-menu-sidenavigation-contrast-fill-active: rgba(255, 255, 255, 0);
824
- --components-menu-sidenavigation-contrast-fill-default: rgba(255, 255, 255, 0);
825
- --components-menu-sidenavigation-contrast-fill-hover: rgba(229, 229, 233, 0.1490196078);
826
- --components-menu-sidenavigation-contrast-icon: #e5e5e9;
827
- --components-menu-sidenavigation-contrast-icon-disabled: #949699;
828
- --components-menu-sidenavigation-contrast-icon-label: #b3b4bd;
829
- --components-menu-sidenavigation-contrast-label: #b3b4bd;
830
- --components-menu-sidenavigation-contrast-stroke-selected: #ff9494;
831
- --components-menu-sidenavigation-contrast-text: #e5e5e9;
832
- --components-menu-sidenavigation-contrast-text-disabled: #949699;
833
- --components-menu-sidenavigation-standard-avatar: rgba(229, 229, 233, 0.1490196078);
834
- --components-menu-sidenavigation-standard-background: #212233;
835
- --components-menu-sidenavigation-standard-divide: #81828f;
836
- --components-menu-sidenavigation-standard-fill-active: rgba(255, 255, 255, 0);
837
- --components-menu-sidenavigation-standard-fill-default: rgba(255, 255, 255, 0);
838
- --components-menu-sidenavigation-standard-fill-hover: rgba(229, 229, 233, 0.1490196078);
839
- --components-menu-sidenavigation-standard-icon: #e5e5e9;
840
- --components-menu-sidenavigation-standard-icon-disabled: #949699;
841
- --components-menu-sidenavigation-standard-icon-label: #b3b4bd;
842
- --components-menu-sidenavigation-standard-label: #b3b4bd;
843
- --components-menu-sidenavigation-standard-stroke-selected: #ff9494;
844
- --components-menu-sidenavigation-standard-text: #e5e5e9;
845
- --components-menu-sidenavigation-standard-text-disabled: #949699;
846
- --components-menu-stepper-contrast-background: #626493;
847
- --components-menu-stepper-contrast-progressbar: #aeb7e2;
848
- --components-menu-stepper-contrast-text-completed: #e5e5e9;
849
- --components-menu-stepper-contrast-text-uncompleted: #b6b8ba;
850
- --components-menu-stepper-standard-background: #626493;
851
- --components-menu-stepper-standard-progressbar: #aeb7e2;
852
- --components-menu-stepper-standard-text-completed: #e5e5e9;
853
- --components-menu-stepper-standard-text-uncompleted: #b6b8ba;
854
- --components-menu-tableofcontent-contrast-icon-selected: #e5e5e9;
855
- --components-menu-tableofcontent-contrast-icon-unselected: #b3b4bd;
856
- --components-menu-tableofcontent-contrast-stroke-selected: #ff9494;
857
- --components-menu-tableofcontent-contrast-stroke-unselected: rgba(84, 86, 140, 0.4);
858
- --components-menu-tableofcontent-contrast-text-selected: #e5e5e9;
859
- --components-menu-tableofcontent-contrast-text-unselected: #b3b4bd;
860
- --components-menu-tableofcontent-standard-icon-selected: #e5e5e9;
861
- --components-menu-tableofcontent-standard-icon-unselected: #b3b4bd;
862
- --components-menu-tableofcontent-standard-stroke-selected: #ff9494;
863
- --components-menu-tableofcontent-standard-stroke-unselected: rgba(84, 86, 140, 0.4);
864
- --components-menu-tableofcontent-standard-text-selected: #e5e5e9;
865
- --components-menu-tableofcontent-standard-text-unselected: #b3b4bd;
849
+ .eds-stepper__step--interactive {
850
+ all: unset;
851
+ display: flex;
852
+ flex-direction: column;
853
+ width: 100%;
854
+ cursor: pointer;
866
855
  }
867
-
868
- /* DO NOT CHANGE!*/
869
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
870
- /* DO NOT CHANGE!*/
856
+ .eds-stepper__step--active {
857
+ --text-color: var(--components-menu-stepper-standard-text-uncompleted);
858
+ --label-font-weight: 600;
859
+ --display-active-line: block;
860
+ }
861
+ .eds-contrast .eds-stepper__step--active {
862
+ --text-color: var(--components-menu-stepper-contrast-text-uncompleted);
863
+ }
864
+ .eds-stepper__step--completed {
865
+ --text-color: var(--components-menu-stepper-standard-text-completed);
866
+ --line-color: var(--components-menu-stepper-standard-progressbar);
867
+ }
868
+ .eds-contrast .eds-stepper__step--completed {
869
+ --text-color: var(--components-menu-stepper-contrast-text-completed);
870
+ --line-color: var(--components-menu-stepper-contrast-progressbar);
871
+ }
872
+ .eds-stepper__step__label {
873
+ flex-grow: 1;
874
+ flex-direction: column;
875
+ align-self: center;
876
+ text-align: center;
877
+ font-size: 0.875rem;
878
+ margin: 0.5rem 0 0;
879
+ padding: 0 0.5rem;
880
+ width: fit-content;
881
+ border-radius: 0.0625rem;
882
+ color: var(--text-color);
883
+ font-weight: var(--label-font-weight);
884
+ }
885
+ .eds-stepper__step--interactive:hover .eds-stepper__step__label {
886
+ background-color: var(--components-menu-stepper-standard-background);
887
+ color: var(--components-menu-stepper-standard-text-completed);
888
+ }
889
+ .eds-contrast .eds-stepper__step--interactive:hover .eds-stepper__step__label {
890
+ background-color: var(--components-menu-stepper-contrast-background);
891
+ color: var(--components-menu-stepper-contrast-text-completed);
892
+ }
893
+ .eds-stepper__step__line {
894
+ height: 0.5rem;
895
+ background: var(--line-color);
896
+ position: relative;
897
+ }
898
+ .eds-stepper__step__line:before {
899
+ display: var(--display-active-line);
900
+ content: "";
901
+ position: absolute;
902
+ right: calc(50% - 0.2rem);
903
+ bottom: 0.0625rem;
904
+ border-radius: 0.0625rem;
905
+ background: var(--components-menu-stepper-standard-progressbar);
906
+ width: calc(0.5rem - 0.125rem - 0.01rem);
907
+ height: calc(0.5rem - 0.125rem - 0.01rem);
908
+ transform: rotate(45deg);
909
+ }
910
+ .eds-contrast .eds-stepper__step__line:before {
911
+ background: var(--components-menu-stepper-contrast-progressbar);
912
+ }
913
+ .eds-stepper__step__line:after {
914
+ display: var(--display-active-line);
915
+ content: "";
916
+ position: absolute;
917
+ left: 0;
918
+ bottom: 0;
919
+ width: 50%;
920
+ height: 0.5rem;
921
+ background: var(--components-menu-stepper-standard-progressbar);
922
+ }
923
+ .eds-contrast .eds-stepper__step__line:after {
924
+ background: var(--components-menu-stepper-contrast-progressbar);
925
+ }/* DO NOT CHANGE!*/
871
926
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
872
- [data-color-mode=light],
873
- :root {
874
- --basecolors-frame-contrast: #181c56;
875
- --basecolors-frame-contrastalt: #393d79;
876
- --basecolors-frame-contrastalt-2: #292b6a;
877
- --basecolors-frame-default: #ffffff;
878
- --basecolors-frame-elevated: #ffffff;
879
- --basecolors-frame-elevatedalt: #f6f6f9;
880
- --basecolors-frame-subdued: #d9dae8;
881
- --basecolors-frame-tint: #f6f6f9;
882
- --basecolors-shape-accent: #181c56;
883
- --basecolors-shape-bicycle-contrast: #00db9b;
884
- --basecolors-shape-bicycle-default: #388f76;
885
- --basecolors-shape-bus-contrast: #ff6392;
886
- --basecolors-shape-bus-default: #c5044e;
887
- --basecolors-shape-cableway-contrast: #b482fb;
888
- --basecolors-shape-cableway-default: #78469a;
889
- --basecolors-shape-disabled: #6e6f73;
890
- --basecolors-shape-disabledalt: #b6b8ba;
891
- --basecolors-shape-ferry-contrast: #6fdfff;
892
- --basecolors-shape-ferry-default: #0c6693;
893
- --basecolors-shape-funicular-contrast: #b482fb;
894
- --basecolors-shape-funicular-default: #78469a;
895
- --basecolors-shape-helicopter-contrast: #fbafea;
896
- --basecolors-shape-helicopter-default: #800664;
897
- --basecolors-shape-highlight: #ff5959;
898
- --basecolors-shape-light: #ffffff;
899
- --basecolors-shape-mask: #ffffff;
900
- --basecolors-shape-maskalt: #ffffff;
901
- --basecolors-shape-metro-contrast: #f08901;
902
- --basecolors-shape-metro-default: #bf5826;
903
- --basecolors-shape-mobility-contrast: #00db9b;
904
- --basecolors-shape-mobility-default: #388f76;
905
- --basecolors-shape-plane-contrast: #fbafea;
906
- --basecolors-shape-plane-default: #800664;
907
- --basecolors-shape-subdued: #626493;
908
- --basecolors-shape-subduedalt: #d9dae8;
909
- --basecolors-shape-taxi-contrast: #ffe082;
910
- --basecolors-shape-taxi-default: #3d3e40;
911
- --basecolors-shape-train-contrast: #42a5f5;
912
- --basecolors-shape-train-default: #00367f;
913
- --basecolors-shape-tram-contrast: #b482fb;
914
- --basecolors-shape-tram-default: #78469a;
915
- --basecolors-shape-walk-contrast: #8284ab;
916
- --basecolors-shape-walk-default: #8d8e9c;
917
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
918
- --basecolors-shape-airportlinkbus-default: #800664;
919
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
920
- --basecolors-shape-airportlinkrail-default: #800664;
921
- --basecolors-stroke-contrast: #aeb7e2;
922
- --basecolors-stroke-default: #181c56;
923
- --basecolors-stroke-disabled: #949699;
924
- --basecolors-stroke-focus-contrast: #aeb7e2;
925
- --basecolors-stroke-focus-standard: #181c56;
926
- --basecolors-stroke-highlight: #ff5959;
927
- --basecolors-stroke-light: #ffffff;
928
- --basecolors-stroke-subdued: #8284ab;
929
- --basecolors-stroke-subduedalt: #e3e6e8;
930
- --basecolors-text-accent: #181c56;
931
- --basecolors-text-disabled: #6e6f73;
932
- --basecolors-text-disabledalt: #b6b8ba;
933
- --basecolors-text-highlight: #ff5959;
934
- --basecolors-text-light: #ffffff;
935
- --basecolors-text-subdued: #626493;
936
- --basecolors-text-subduedalt: #d9dae8;
927
+ .eds-top-navigation-item {
928
+ --show-active-line: 0;
929
+ display: inline-block;
930
+ cursor: pointer;
931
+ color: var(--components-menu-navigationbar-standard-text-unselected);
932
+ text-decoration: none;
933
+ position: relative;
934
+ padding: 1rem;
935
+ min-width: 5rem;
936
+ width: fit-content;
937
+ text-align: center;
938
+ font-family: inherit;
939
+ font-size: 1rem;
940
+ font-weight: 600;
937
941
  }
938
-
939
- [data-color-mode=dark] {
940
- --basecolors-frame-contrast: #212233;
941
- --basecolors-frame-contrastalt: #141527;
942
- --basecolors-frame-contrastalt-2: #08091c;
943
- --basecolors-frame-default: #08091c;
944
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
945
- --basecolors-frame-elevatedalt: #464755;
946
- --basecolors-frame-subdued: #2d2e3e;
947
- --basecolors-frame-tint: #141527;
948
- --basecolors-shape-accent: #e5e5e9;
949
- --basecolors-shape-bicycle-contrast: #4db295;
950
- --basecolors-shape-bicycle-default: #4db295;
951
- --basecolors-shape-bus-contrast: #ef7398;
952
- --basecolors-shape-bus-default: #ef7398;
953
- --basecolors-shape-cableway-contrast: #b898e5;
954
- --basecolors-shape-cableway-default: #b898e5;
955
- --basecolors-shape-disabled: #b6b8ba;
956
- --basecolors-shape-disabledalt: #b3b4bd;
957
- --basecolors-shape-ferry-contrast: #8ccfe2;
958
- --basecolors-shape-ferry-default: #8ccfe2;
959
- --basecolors-shape-funicular-contrast: #b898e5;
960
- --basecolors-shape-funicular-default: #b898e5;
961
- --basecolors-shape-helicopter-contrast: #f2b8e5;
962
- --basecolors-shape-helicopter-default: #f2b8e5;
963
- --basecolors-shape-highlight: #ff9494;
964
- --basecolors-shape-light: #e5e5e9;
965
- --basecolors-shape-mask: #2d2e3e;
966
- --basecolors-shape-maskalt: #393a49;
967
- --basecolors-shape-metro-contrast: #dd973c;
968
- --basecolors-shape-metro-default: #dd973c;
969
- --basecolors-shape-mobility-contrast: #4db295;
970
- --basecolors-shape-mobility-default: #4db295;
971
- --basecolors-shape-plane-contrast: #f2b8e5;
972
- --basecolors-shape-plane-default: #f2b8e5;
973
- --basecolors-shape-subdued: #b3b4bd;
974
- --basecolors-shape-subduedalt: #b3b4bd;
975
- --basecolors-shape-taxi-contrast: #ffe082;
976
- --basecolors-shape-taxi-default: #ffe082;
977
- --basecolors-shape-train-contrast: #60a2d7;
978
- --basecolors-shape-train-default: #60a2d7;
979
- --basecolors-shape-tram-contrast: #b898e5;
980
- --basecolors-shape-tram-default: #b898e5;
981
- --basecolors-shape-walk-contrast: #8d8e9c;
982
- --basecolors-shape-walk-default: #8d8e9c;
983
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
984
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
985
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
986
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
987
- --basecolors-stroke-contrast: #aeb7e2;
988
- --basecolors-stroke-default: #b3b4bd;
989
- --basecolors-stroke-disabled: #e3e6e8;
990
- --basecolors-stroke-focus-contrast: #aeb7e2;
991
- --basecolors-stroke-focus-standard: #aeb7e2;
992
- --basecolors-stroke-highlight: #ff9494;
993
- --basecolors-stroke-light: #b3b4bd;
994
- --basecolors-stroke-subdued: #81828f;
995
- --basecolors-stroke-subduedalt: #949699;
996
- --basecolors-text-accent: #e5e5e9;
997
- --basecolors-text-disabled: #b6b8ba;
998
- --basecolors-text-disabledalt: #b6b8ba;
999
- --basecolors-text-highlight: #ff9494;
1000
- --basecolors-text-light: #e5e5e9;
1001
- --basecolors-text-subdued: #b3b4bd;
1002
- --basecolors-text-subduedalt: #b3b4bd;
942
+ .eds-top-navigation-item::after {
943
+ content: "";
944
+ display: block;
945
+ bottom: 1rem;
946
+ height: 0.1875rem;
947
+ width: 0;
948
+ margin: 0 auto;
949
+ opacity: var(--show-active-line);
950
+ background: var(--components-menu-navigationbar-standard-stroke-selected);
951
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
1003
952
  }
1004
-
1005
- :root {
1006
- --eds-menu: 1;
1007
- --reach-menu-button: 1;
953
+ .eds-contrast .eds-top-navigation-item {
954
+ color: var(--components-menu-navigationbar-contrast-text-unselected);
955
+ }
956
+ .eds-top-navigation-item:focus-visible {
957
+ outline: 2px solid #181c56;
958
+ outline-color: var(--basecolors-stroke-focus-standard);
959
+ outline-offset: 0.125rem;
960
+ }
961
+ .eds-contrast .eds-top-navigation-item:focus-visible {
962
+ outline-color: var(--basecolors-stroke-focus-contrast);
963
+ }
964
+ .eds-top-navigation-item:hover {
965
+ --show-active-line: 1;
966
+ }
967
+ .eds-top-navigation-item:hover::after {
968
+ width: 2rem;
969
+ }
970
+ .eds-top-navigation-item--active {
971
+ color: var(--components-menu-navigationbar-standard-text-selected);
972
+ --show-active-line: 1;
973
+ }
974
+ .eds-top-navigation-item--active::after {
975
+ width: 2rem;
1008
976
  }
977
+ .eds-contrast .eds-top-navigation-item--active {
978
+ color: var(--components-menu-navigationbar-contrast-text-selected);
979
+ }