@entur/tooltip 5.2.17 → 5.2.18

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 +319 -1280
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,1284 +1,323 @@
1
- /* DO NOT CHANGE!*/
2
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
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
1
  [data-color-mode=light],
8
- :root {
9
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
10
- --components-tooltip-popover-contrast-fill: #393d79;
11
- --components-tooltip-popover-contrast-icon: #ffffff;
12
- --components-tooltip-popover-contrast-text: #ffffff;
13
- --components-tooltip-popover-standard-border: rgba(84, 86, 140, 0.4);
14
- --components-tooltip-popover-standard-fill: #f6f6f9;
15
- --components-tooltip-popover-standard-icon: #181c56;
16
- --components-tooltip-popover-standard-text: #181c56;
17
- --components-tooltip-tooltip-contrast-fill: #ffffff;
18
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
19
- --components-tooltip-tooltip-contrast-icon: #181c56;
20
- --components-tooltip-tooltip-contrast-icon-negative: #181c56;
21
- --components-tooltip-tooltip-contrast-text: #181c56;
22
- --components-tooltip-tooltip-contrast-text-negative: #181c56;
23
- --components-tooltip-tooltip-contrast-triangle: #ffffff;
24
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
25
- --components-tooltip-tooltip-standard-fill: #181c56;
26
- --components-tooltip-tooltip-standard-fill-negative: #ffcece;
27
- --components-tooltip-tooltip-standard-icon: #ffffff;
28
- --components-tooltip-tooltip-standard-icon-negative: #181c56;
29
- --components-tooltip-tooltip-standard-text: #ffffff;
30
- --components-tooltip-tooltip-standard-text-negative: #181c56;
31
- --components-tooltip-tooltip-standard-triangle: #181c56;
32
- --components-tooltip-tooltip-standard-triangle-negative: #ffcece;
2
+ :root{
3
+ --components-tooltip-popover-contrast-border:rgba(255, 255, 255, 0);
4
+ --components-tooltip-popover-contrast-fill:#393d79;
5
+ --components-tooltip-popover-contrast-icon:#ffffff;
6
+ --components-tooltip-popover-contrast-text:#ffffff;
7
+ --components-tooltip-popover-standard-border:rgba(84, 86, 140, 0.4);
8
+ --components-tooltip-popover-standard-fill:#f6f6f9;
9
+ --components-tooltip-popover-standard-icon:#181c56;
10
+ --components-tooltip-popover-standard-text:#181c56;
11
+ --components-tooltip-tooltip-contrast-fill:#ffffff;
12
+ --components-tooltip-tooltip-contrast-fill-negative:#ff9494;
13
+ --components-tooltip-tooltip-contrast-icon:#181c56;
14
+ --components-tooltip-tooltip-contrast-icon-negative:#181c56;
15
+ --components-tooltip-tooltip-contrast-text:#181c56;
16
+ --components-tooltip-tooltip-contrast-text-negative:#181c56;
17
+ --components-tooltip-tooltip-contrast-triangle:#ffffff;
18
+ --components-tooltip-tooltip-contrast-triangle-negative:#ff9494;
19
+ --components-tooltip-tooltip-standard-fill:#181c56;
20
+ --components-tooltip-tooltip-standard-fill-negative:#ffcece;
21
+ --components-tooltip-tooltip-standard-icon:#ffffff;
22
+ --components-tooltip-tooltip-standard-icon-negative:#181c56;
23
+ --components-tooltip-tooltip-standard-text:#ffffff;
24
+ --components-tooltip-tooltip-standard-text-negative:#181c56;
25
+ --components-tooltip-tooltip-standard-triangle:#181c56;
26
+ --components-tooltip-tooltip-standard-triangle-negative:#ffcece;
27
+ }
28
+
29
+ [data-color-mode=dark]{
30
+ --components-tooltip-popover-contrast-border:rgba(255, 255, 255, 0);
31
+ --components-tooltip-popover-contrast-fill:#393a49;
32
+ --components-tooltip-popover-contrast-icon:#e5e5e9;
33
+ --components-tooltip-popover-contrast-text:#e5e5e9;
34
+ --components-tooltip-popover-standard-border:rgba(255, 255, 255, 0);
35
+ --components-tooltip-popover-standard-fill:#393a49;
36
+ --components-tooltip-popover-standard-icon:#e5e5e9;
37
+ --components-tooltip-popover-standard-text:#e5e5e9;
38
+ --components-tooltip-tooltip-contrast-fill:#393a49;
39
+ --components-tooltip-tooltip-contrast-fill-negative:#ff9494;
40
+ --components-tooltip-tooltip-contrast-icon:#e5e5e9;
41
+ --components-tooltip-tooltip-contrast-icon-negative:#08091c;
42
+ --components-tooltip-tooltip-contrast-text:#e5e5e9;
43
+ --components-tooltip-tooltip-contrast-text-negative:#08091c;
44
+ --components-tooltip-tooltip-contrast-triangle:#393a49;
45
+ --components-tooltip-tooltip-contrast-triangle-negative:#ff9494;
46
+ --components-tooltip-tooltip-standard-fill:#393a49;
47
+ --components-tooltip-tooltip-standard-fill-negative:#ff9494;
48
+ --components-tooltip-tooltip-standard-icon:#e5e5e9;
49
+ --components-tooltip-tooltip-standard-icon-negative:#08091c;
50
+ --components-tooltip-tooltip-standard-text:#e5e5e9;
51
+ --components-tooltip-tooltip-standard-text-negative:#08091c;
52
+ --components-tooltip-tooltip-standard-triangle:#393a49;
53
+ --components-tooltip-tooltip-standard-triangle-negative:#ff9494;
33
54
  }
34
-
35
- [data-color-mode=dark] {
36
- --components-tooltip-popover-contrast-border: rgba(255, 255, 255, 0);
37
- --components-tooltip-popover-contrast-fill: #393a49;
38
- --components-tooltip-popover-contrast-icon: #e5e5e9;
39
- --components-tooltip-popover-contrast-text: #e5e5e9;
40
- --components-tooltip-popover-standard-border: rgba(255, 255, 255, 0);
41
- --components-tooltip-popover-standard-fill: #393a49;
42
- --components-tooltip-popover-standard-icon: #e5e5e9;
43
- --components-tooltip-popover-standard-text: #e5e5e9;
44
- --components-tooltip-tooltip-contrast-fill: #393a49;
45
- --components-tooltip-tooltip-contrast-fill-negative: #ff9494;
46
- --components-tooltip-tooltip-contrast-icon: #e5e5e9;
47
- --components-tooltip-tooltip-contrast-icon-negative: #08091c;
48
- --components-tooltip-tooltip-contrast-text: #e5e5e9;
49
- --components-tooltip-tooltip-contrast-text-negative: #08091c;
50
- --components-tooltip-tooltip-contrast-triangle: #393a49;
51
- --components-tooltip-tooltip-contrast-triangle-negative: #ff9494;
52
- --components-tooltip-tooltip-standard-fill: #393a49;
53
- --components-tooltip-tooltip-standard-fill-negative: #ff9494;
54
- --components-tooltip-tooltip-standard-icon: #e5e5e9;
55
- --components-tooltip-tooltip-standard-icon-negative: #08091c;
56
- --components-tooltip-tooltip-standard-text: #e5e5e9;
57
- --components-tooltip-tooltip-standard-text-negative: #08091c;
58
- --components-tooltip-tooltip-standard-triangle: #393a49;
59
- --components-tooltip-tooltip-standard-triangle-negative: #ff9494;
60
- }
61
-
62
- /* DO NOT CHANGE!*/
63
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
64
- /* DO NOT CHANGE!*/
65
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
66
- [data-color-mode=light],
67
- :root {
68
- --basecolors-frame-contrast: #181c56;
69
- --basecolors-frame-contrastalt: #393d79;
70
- --basecolors-frame-contrastalt-2: #292b6a;
71
- --basecolors-frame-default: #ffffff;
72
- --basecolors-frame-elevated: #ffffff;
73
- --basecolors-frame-elevatedalt: #f6f6f9;
74
- --basecolors-frame-subdued: #d9dae8;
75
- --basecolors-frame-tint: #f6f6f9;
76
- --basecolors-shape-accent: #181c56;
77
- --basecolors-shape-bicycle-contrast: #00db9b;
78
- --basecolors-shape-bicycle-default: #33826b;
79
- --basecolors-shape-bus-contrast: #ff6392;
80
- --basecolors-shape-bus-default: #c5044e;
81
- --basecolors-shape-cableway-contrast: #b482fb;
82
- --basecolors-shape-cableway-default: #78469a;
83
- --basecolors-shape-disabled: #6e6f73;
84
- --basecolors-shape-disabledalt: #b6b8ba;
85
- --basecolors-shape-ferry-contrast: #6fdfff;
86
- --basecolors-shape-ferry-default: #0c6693;
87
- --basecolors-shape-funicular-contrast: #b482fb;
88
- --basecolors-shape-funicular-default: #78469a;
89
- --basecolors-shape-helicopter-contrast: #fbafea;
90
- --basecolors-shape-helicopter-default: #800664;
91
- --basecolors-shape-highlight: #ff5959;
92
- --basecolors-shape-light: #ffffff;
93
- --basecolors-shape-mask: #ffffff;
94
- --basecolors-shape-maskalt: #ffffff;
95
- --basecolors-shape-metro-contrast: #f08901;
96
- --basecolors-shape-metro-default: #bf5826;
97
- --basecolors-shape-mobility-contrast: #00db9b;
98
- --basecolors-shape-mobility-default: #33826b;
99
- --basecolors-shape-plane-contrast: #fbafea;
100
- --basecolors-shape-plane-default: #800664;
101
- --basecolors-shape-subdued: #626493;
102
- --basecolors-shape-subduedalt: #d9dae8;
103
- --basecolors-shape-taxi-contrast: #ffe082;
104
- --basecolors-shape-taxi-default: #3d3e40;
105
- --basecolors-shape-train-contrast: #42a5f5;
106
- --basecolors-shape-train-default: #00367f;
107
- --basecolors-shape-tram-contrast: #b482fb;
108
- --basecolors-shape-tram-default: #78469a;
109
- --basecolors-shape-walk-contrast: #8284ab;
110
- --basecolors-shape-walk-default: #8d8e9c;
111
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
112
- --basecolors-shape-airportlinkbus-default: #800664;
113
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
114
- --basecolors-shape-airportlinkrail-default: #800664;
115
- --basecolors-stroke-contrast: #aeb7e2;
116
- --basecolors-stroke-default: #181c56;
117
- --basecolors-stroke-disabled: #949699;
118
- --basecolors-stroke-focus-contrast: #aeb7e2;
119
- --basecolors-stroke-focus-standard: #181c56;
120
- --basecolors-stroke-highlight: #ff5959;
121
- --basecolors-stroke-light: #ffffff;
122
- --basecolors-stroke-subdued: #8284ab;
123
- --basecolors-stroke-subduedalt: #e3e6e8;
124
- --basecolors-text-accent: #181c56;
125
- --basecolors-text-disabled: #6e6f73;
126
- --basecolors-text-disabledalt: #b6b8ba;
127
- --basecolors-text-highlight: #ff5959;
128
- --basecolors-text-light: #ffffff;
129
- --basecolors-text-subdued: #626493;
130
- --basecolors-text-subduedalt: #d9dae8;
131
- }
132
-
133
- [data-color-mode=dark] {
134
- --basecolors-frame-contrast: #212233;
135
- --basecolors-frame-contrastalt: #141527;
136
- --basecolors-frame-contrastalt-2: #08091c;
137
- --basecolors-frame-default: #08091c;
138
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
139
- --basecolors-frame-elevatedalt: #464755;
140
- --basecolors-frame-subdued: #2d2e3e;
141
- --basecolors-frame-tint: #141527;
142
- --basecolors-shape-accent: #e5e5e9;
143
- --basecolors-shape-bicycle-contrast: #4db295;
144
- --basecolors-shape-bicycle-default: #4db295;
145
- --basecolors-shape-bus-contrast: #ef7398;
146
- --basecolors-shape-bus-default: #ef7398;
147
- --basecolors-shape-cableway-contrast: #b898e5;
148
- --basecolors-shape-cableway-default: #b898e5;
149
- --basecolors-shape-disabled: #b6b8ba;
150
- --basecolors-shape-disabledalt: #b3b4bd;
151
- --basecolors-shape-ferry-contrast: #8ccfe2;
152
- --basecolors-shape-ferry-default: #8ccfe2;
153
- --basecolors-shape-funicular-contrast: #b898e5;
154
- --basecolors-shape-funicular-default: #b898e5;
155
- --basecolors-shape-helicopter-contrast: #f2b8e5;
156
- --basecolors-shape-helicopter-default: #f2b8e5;
157
- --basecolors-shape-highlight: #ff9494;
158
- --basecolors-shape-light: #e5e5e9;
159
- --basecolors-shape-mask: #2d2e3e;
160
- --basecolors-shape-maskalt: #393a49;
161
- --basecolors-shape-metro-contrast: #dd973c;
162
- --basecolors-shape-metro-default: #dd973c;
163
- --basecolors-shape-mobility-contrast: #4db295;
164
- --basecolors-shape-mobility-default: #4db295;
165
- --basecolors-shape-plane-contrast: #f2b8e5;
166
- --basecolors-shape-plane-default: #f2b8e5;
167
- --basecolors-shape-subdued: #b3b4bd;
168
- --basecolors-shape-subduedalt: #b3b4bd;
169
- --basecolors-shape-taxi-contrast: #ffe082;
170
- --basecolors-shape-taxi-default: #ffe082;
171
- --basecolors-shape-train-contrast: #60a2d7;
172
- --basecolors-shape-train-default: #60a2d7;
173
- --basecolors-shape-tram-contrast: #b898e5;
174
- --basecolors-shape-tram-default: #b898e5;
175
- --basecolors-shape-walk-contrast: #8d8e9c;
176
- --basecolors-shape-walk-default: #8d8e9c;
177
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
178
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
179
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
180
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
181
- --basecolors-stroke-contrast: #aeb7e2;
182
- --basecolors-stroke-default: #b3b4bd;
183
- --basecolors-stroke-disabled: #e3e6e8;
184
- --basecolors-stroke-focus-contrast: #aeb7e2;
185
- --basecolors-stroke-focus-standard: #aeb7e2;
186
- --basecolors-stroke-highlight: #ff9494;
187
- --basecolors-stroke-light: #b3b4bd;
188
- --basecolors-stroke-subdued: #81828f;
189
- --basecolors-stroke-subduedalt: #949699;
190
- --basecolors-text-accent: #e5e5e9;
191
- --basecolors-text-disabled: #b6b8ba;
192
- --basecolors-text-disabledalt: #b6b8ba;
193
- --basecolors-text-highlight: #ff9494;
194
- --basecolors-text-light: #e5e5e9;
195
- --basecolors-text-subdued: #b3b4bd;
196
- --basecolors-text-subduedalt: #b3b4bd;
197
- }
198
-
199
- :root {
200
- --eds-tooltip: 1;
201
- }/* DO NOT CHANGE!*/
202
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
203
- /* DO NOT CHANGE!*/
204
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
205
- /* DO NOT CHANGE!*/
206
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
207
- /* DO NOT CHANGE!*/
208
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
209
55
  [data-color-mode=light],
210
- :root {
211
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
212
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
213
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
214
- --components-button-disabled-standard-fill: #cfd2d4;
215
- --components-button-disabled-standard-icon-disabled: #515254;
216
- --components-button-disabled-standard-text-disabled: #515254;
217
- --components-button-floating-contrast-active: #d9dae8;
218
- --components-button-floating-contrast-default: #ffffff;
219
- --components-button-floating-contrast-hover: #f6f6f9;
220
- --components-button-floating-contrast-icon: #181c56;
221
- --components-button-floating-contrast-text: #181c56;
222
- --components-button-floating-standard-active: #11143c;
223
- --components-button-floating-standard-default: #181c56;
224
- --components-button-floating-standard-hover: #393d79;
225
- --components-button-floating-standard-icon: #ffffff;
226
- --components-button-floating-standard-text: #ffffff;
227
- --components-button-iconbutton-contrast-active: #8794d4;
228
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
229
- --components-button-iconbutton-contrast-hover: #626493;
230
- --components-button-iconbutton-contrast-icon: #ffffff;
231
- --components-button-iconbutton-contrast-icon-active: #181c56;
232
- --components-button-iconbutton-contrast-text: #ffffff;
233
- --components-button-iconbutton-contrast-text-active: #181c56;
234
- --components-button-iconbutton-standard-active: #aeb7e2;
235
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
236
- --components-button-iconbutton-standard-hover: #d9ddf2;
237
- --components-button-iconbutton-standard-icon: #181c56;
238
- --components-button-iconbutton-standard-icon-active: #181c56;
239
- --components-button-iconbutton-standard-text: #181c56;
240
- --components-button-iconbutton-standard-text-active: #181c56;
241
- --components-button-negative-contrast-active: #ff9494;
242
- --components-button-negative-contrast-border: #ff9494;
243
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
244
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
245
- --components-button-negative-contrast-icon: #ffffff;
246
- --components-button-negative-contrast-icon-active: #181c56;
247
- --components-button-negative-contrast-text: #ffffff;
248
- --components-button-negative-contrast-text-active: #181c56;
249
- --components-button-negative-standard-active: #d31b1b;
250
- --components-button-negative-standard-border: #d31b1b;
251
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
252
- --components-button-negative-standard-hover: #ffcece;
253
- --components-button-negative-standard-icon: #d31b1b;
254
- --components-button-negative-standard-icon-active: #ffffff;
255
- --components-button-negative-standard-text: #d31b1b;
256
- --components-button-negative-standard-text-active: #ffffff;
257
- --components-button-primary-contrast-active: #8794d4;
258
- --components-button-primary-contrast-default: #aeb7e2;
259
- --components-button-primary-contrast-hover: #c7cdeb;
260
- --components-button-primary-contrast-icon: #181c56;
261
- --components-button-primary-contrast-text: #181c56;
262
- --components-button-primary-standard-active: #11143c;
263
- --components-button-primary-standard-default: #181c56;
264
- --components-button-primary-standard-hover: #393d79;
265
- --components-button-primary-standard-icon: #ffffff;
266
- --components-button-primary-standard-text: #ffffff;
267
- --components-button-secondary-contrast-active: #8794d4;
268
- --components-button-secondary-contrast-border: #8284ab;
269
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
270
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
271
- --components-button-secondary-contrast-hover: #626493;
272
- --components-button-secondary-contrast-icon: #ffffff;
273
- --components-button-secondary-contrast-icon-active: #181c56;
274
- --components-button-secondary-contrast-text: #ffffff;
275
- --components-button-secondary-contrast-text-active: #181c56;
276
- --components-button-secondary-standard-active: #aeb7e2;
277
- --components-button-secondary-standard-border: #8284ab;
278
- --components-button-secondary-standard-border-active: #181c56;
279
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
280
- --components-button-secondary-standard-hover: #d9ddf2;
281
- --components-button-secondary-standard-icon: #181c56;
282
- --components-button-secondary-standard-icon-active: #181c56;
283
- --components-button-secondary-standard-text: #181c56;
284
- --components-button-secondary-standard-text-active: #181c56;
285
- --components-button-squaresecondary-contrast-active: #8794d4;
286
- --components-button-squaresecondary-contrast-border: #8284ab;
287
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
288
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
289
- --components-button-squaresecondary-contrast-hover: #d9ddf2;
290
- --components-button-squaresecondary-contrast-icon-active: #181c56;
291
- --components-button-squaresecondary-contrast-icon-default: #ffffff;
292
- --components-button-squaresecondary-contrast-icon-hover: #181c56;
293
- --components-button-squaresecondary-contrast-label: #ffffff;
294
- --components-button-squaresecondary-standard-active: #aeb7e2;
295
- --components-button-squaresecondary-standard-border: #8284ab;
296
- --components-button-squaresecondary-standard-border-active: #181c56;
297
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
298
- --components-button-squaresecondary-standard-hover: #d9ddf2;
299
- --components-button-squaresecondary-standard-icon: #181c56;
300
- --components-button-squaresecondary-standard-icon-active: #181c56;
301
- --components-button-squaresecondary-standard-text: #181c56;
302
- --components-button-squaresuccess-contrast-active: #37ab83;
303
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
304
- --components-button-squaresuccess-contrast-default: #5ac39a;
305
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
306
- --components-button-squaresuccess-contrast-icon: #181c56;
307
- --components-button-squaresuccess-contrast-label: #ffffff;
308
- --components-button-squaresuccess-standard-active: #37ab83;
309
- --components-button-squaresuccess-standard-border: #181c56;
310
- --components-button-squaresuccess-standard-default: #5ac39a;
311
- --components-button-squaresuccess-standard-hover: #9cd9c2;
312
- --components-button-squaresuccess-standard-icon: #181c56;
313
- --components-button-squaresuccess-standard-label: #181c56;
314
- --components-button-success-contrast-active: #37ab83;
315
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
316
- --components-button-success-contrast-default: #5ac39a;
317
- --components-button-success-contrast-hover: #9cd9c2;
318
- --components-button-success-contrast-icon: #181c56;
319
- --components-button-success-contrast-text: #181c56;
320
- --components-button-success-standard-active: #37ab83;
321
- --components-button-success-standard-border: #181c56;
322
- --components-button-success-standard-default: #5ac39a;
323
- --components-button-success-standard-hover: #9cd9c2;
324
- --components-button-success-standard-icon: #181c56;
325
- --components-button-success-standard-text: #181c56;
326
- }
327
-
328
- [data-color-mode=dark] {
329
- --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
330
- --components-button-disabled-contrast-icon-disabled: #b6b8ba;
331
- --components-button-disabled-contrast-text-disabled: #b6b8ba;
332
- --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
333
- --components-button-disabled-standard-icon-disabled: #b6b8ba;
334
- --components-button-disabled-standard-text-disabled: #b6b8ba;
335
- --components-button-floating-contrast-active: #8794d4;
336
- --components-button-floating-contrast-default: #aeb7e2;
337
- --components-button-floating-contrast-hover: #c7cdeb;
338
- --components-button-floating-contrast-icon: #08091c;
339
- --components-button-floating-contrast-text: #08091c;
340
- --components-button-floating-standard-active: #8794d4;
341
- --components-button-floating-standard-default: #aeb7e2;
342
- --components-button-floating-standard-hover: #c7cdeb;
343
- --components-button-floating-standard-icon: #08091c;
344
- --components-button-floating-standard-text: #08091c;
345
- --components-button-iconbutton-contrast-active: #8794d4;
346
- --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
347
- --components-button-iconbutton-contrast-hover: #626493;
348
- --components-button-iconbutton-contrast-icon: #e5e5e9;
349
- --components-button-iconbutton-contrast-icon-active: #08091c;
350
- --components-button-iconbutton-contrast-text: #e5e5e9;
351
- --components-button-iconbutton-contrast-text-active: #08091c;
352
- --components-button-iconbutton-standard-active: #8794d4;
353
- --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
354
- --components-button-iconbutton-standard-hover: #626493;
355
- --components-button-iconbutton-standard-icon: #e5e5e9;
356
- --components-button-iconbutton-standard-icon-active: #08091c;
357
- --components-button-iconbutton-standard-text: #e5e5e9;
358
- --components-button-iconbutton-standard-text-active: #08091c;
359
- --components-button-negative-contrast-active: #ff9494;
360
- --components-button-negative-contrast-border: #ff9494;
361
- --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
362
- --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
363
- --components-button-negative-contrast-icon: #e5e5e9;
364
- --components-button-negative-contrast-icon-active: #08091c;
365
- --components-button-negative-contrast-text: #e5e5e9;
366
- --components-button-negative-contrast-text-active: #08091c;
367
- --components-button-negative-standard-active: #ff9494;
368
- --components-button-negative-standard-border: #ff9494;
369
- --components-button-negative-standard-default: rgba(255, 255, 255, 0);
370
- --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
371
- --components-button-negative-standard-icon: #e5e5e9;
372
- --components-button-negative-standard-icon-active: #08091c;
373
- --components-button-negative-standard-text: #e5e5e9;
374
- --components-button-negative-standard-text-active: #08091c;
375
- --components-button-primary-contrast-active: #8794d4;
376
- --components-button-primary-contrast-default: #aeb7e2;
377
- --components-button-primary-contrast-hover: #c7cdeb;
378
- --components-button-primary-contrast-icon: #08091c;
379
- --components-button-primary-contrast-text: #08091c;
380
- --components-button-primary-standard-active: #8794d4;
381
- --components-button-primary-standard-default: #aeb7e2;
382
- --components-button-primary-standard-hover: #c7cdeb;
383
- --components-button-primary-standard-icon: #08091c;
384
- --components-button-primary-standard-text: #08091c;
385
- --components-button-secondary-contrast-active: #8794d4;
386
- --components-button-secondary-contrast-border: #8284ab;
387
- --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
388
- --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
389
- --components-button-secondary-contrast-hover: #626493;
390
- --components-button-secondary-contrast-icon: #e5e5e9;
391
- --components-button-secondary-contrast-icon-active: #08091c;
392
- --components-button-secondary-contrast-text: #e5e5e9;
393
- --components-button-secondary-contrast-text-active: #08091c;
394
- --components-button-secondary-standard-active: #8794d4;
395
- --components-button-secondary-standard-border: #8284ab;
396
- --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
397
- --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
398
- --components-button-secondary-standard-hover: #626493;
399
- --components-button-secondary-standard-icon: #e5e5e9;
400
- --components-button-secondary-standard-icon-active: #08091c;
401
- --components-button-secondary-standard-text: #e5e5e9;
402
- --components-button-secondary-standard-text-active: #08091c;
403
- --components-button-squaresecondary-contrast-active: #8794d4;
404
- --components-button-squaresecondary-contrast-border: #8284ab;
405
- --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
406
- --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
407
- --components-button-squaresecondary-contrast-hover: #626493;
408
- --components-button-squaresecondary-contrast-icon-active: #08091c;
409
- --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
410
- --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
411
- --components-button-squaresecondary-contrast-label: #e5e5e9;
412
- --components-button-squaresecondary-standard-active: #8794d4;
413
- --components-button-squaresecondary-standard-border: #8284ab;
414
- --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
415
- --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
416
- --components-button-squaresecondary-standard-hover: #626493;
417
- --components-button-squaresecondary-standard-icon: #e5e5e9;
418
- --components-button-squaresecondary-standard-icon-active: #08091c;
419
- --components-button-squaresecondary-standard-text: #e5e5e9;
420
- --components-button-squaresuccess-contrast-active: #5ac39a;
421
- --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
422
- --components-button-squaresuccess-contrast-default: #5ac39a;
423
- --components-button-squaresuccess-contrast-hover: #9cd9c2;
424
- --components-button-squaresuccess-contrast-icon: #08091c;
425
- --components-button-squaresuccess-contrast-label: #e5e5e9;
426
- --components-button-squaresuccess-standard-active: #37ab83;
427
- --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
428
- --components-button-squaresuccess-standard-default: #5ac39a;
429
- --components-button-squaresuccess-standard-hover: #9cd9c2;
430
- --components-button-squaresuccess-standard-icon: #08091c;
431
- --components-button-squaresuccess-standard-label: #e5e5e9;
432
- --components-button-success-contrast-active: #37ab83;
433
- --components-button-success-contrast-border: rgba(255, 255, 255, 0);
434
- --components-button-success-contrast-default: #5ac39a;
435
- --components-button-success-contrast-hover: #9cd9c2;
436
- --components-button-success-contrast-icon: #08091c;
437
- --components-button-success-contrast-text: #08091c;
438
- --components-button-success-standard-active: #37ab83;
439
- --components-button-success-standard-border: rgba(255, 255, 255, 0);
440
- --components-button-success-standard-default: #5ac39a;
441
- --components-button-success-standard-hover: #9cd9c2;
442
- --components-button-success-standard-icon: #08091c;
443
- --components-button-success-standard-text: #08091c;
444
- }
445
-
446
- /* DO NOT CHANGE!*/
447
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
448
- /* DO NOT CHANGE!*/
449
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
450
- [data-color-mode=light],
451
- :root {
452
- --basecolors-frame-contrast: #181c56;
453
- --basecolors-frame-contrastalt: #393d79;
454
- --basecolors-frame-contrastalt-2: #292b6a;
455
- --basecolors-frame-default: #ffffff;
456
- --basecolors-frame-elevated: #ffffff;
457
- --basecolors-frame-elevatedalt: #f6f6f9;
458
- --basecolors-frame-subdued: #d9dae8;
459
- --basecolors-frame-tint: #f6f6f9;
460
- --basecolors-shape-accent: #181c56;
461
- --basecolors-shape-bicycle-contrast: #00db9b;
462
- --basecolors-shape-bicycle-default: #33826b;
463
- --basecolors-shape-bus-contrast: #ff6392;
464
- --basecolors-shape-bus-default: #c5044e;
465
- --basecolors-shape-cableway-contrast: #b482fb;
466
- --basecolors-shape-cableway-default: #78469a;
467
- --basecolors-shape-disabled: #6e6f73;
468
- --basecolors-shape-disabledalt: #b6b8ba;
469
- --basecolors-shape-ferry-contrast: #6fdfff;
470
- --basecolors-shape-ferry-default: #0c6693;
471
- --basecolors-shape-funicular-contrast: #b482fb;
472
- --basecolors-shape-funicular-default: #78469a;
473
- --basecolors-shape-helicopter-contrast: #fbafea;
474
- --basecolors-shape-helicopter-default: #800664;
475
- --basecolors-shape-highlight: #ff5959;
476
- --basecolors-shape-light: #ffffff;
477
- --basecolors-shape-mask: #ffffff;
478
- --basecolors-shape-maskalt: #ffffff;
479
- --basecolors-shape-metro-contrast: #f08901;
480
- --basecolors-shape-metro-default: #bf5826;
481
- --basecolors-shape-mobility-contrast: #00db9b;
482
- --basecolors-shape-mobility-default: #33826b;
483
- --basecolors-shape-plane-contrast: #fbafea;
484
- --basecolors-shape-plane-default: #800664;
485
- --basecolors-shape-subdued: #626493;
486
- --basecolors-shape-subduedalt: #d9dae8;
487
- --basecolors-shape-taxi-contrast: #ffe082;
488
- --basecolors-shape-taxi-default: #3d3e40;
489
- --basecolors-shape-train-contrast: #42a5f5;
490
- --basecolors-shape-train-default: #00367f;
491
- --basecolors-shape-tram-contrast: #b482fb;
492
- --basecolors-shape-tram-default: #78469a;
493
- --basecolors-shape-walk-contrast: #8284ab;
494
- --basecolors-shape-walk-default: #8d8e9c;
495
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
496
- --basecolors-shape-airportlinkbus-default: #800664;
497
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
498
- --basecolors-shape-airportlinkrail-default: #800664;
499
- --basecolors-stroke-contrast: #aeb7e2;
500
- --basecolors-stroke-default: #181c56;
501
- --basecolors-stroke-disabled: #949699;
502
- --basecolors-stroke-focus-contrast: #aeb7e2;
503
- --basecolors-stroke-focus-standard: #181c56;
504
- --basecolors-stroke-highlight: #ff5959;
505
- --basecolors-stroke-light: #ffffff;
506
- --basecolors-stroke-subdued: #8284ab;
507
- --basecolors-stroke-subduedalt: #e3e6e8;
508
- --basecolors-text-accent: #181c56;
509
- --basecolors-text-disabled: #6e6f73;
510
- --basecolors-text-disabledalt: #b6b8ba;
511
- --basecolors-text-highlight: #ff5959;
512
- --basecolors-text-light: #ffffff;
513
- --basecolors-text-subdued: #626493;
514
- --basecolors-text-subduedalt: #d9dae8;
515
- }
516
-
517
- [data-color-mode=dark] {
518
- --basecolors-frame-contrast: #212233;
519
- --basecolors-frame-contrastalt: #141527;
520
- --basecolors-frame-contrastalt-2: #08091c;
521
- --basecolors-frame-default: #08091c;
522
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
523
- --basecolors-frame-elevatedalt: #464755;
524
- --basecolors-frame-subdued: #2d2e3e;
525
- --basecolors-frame-tint: #141527;
526
- --basecolors-shape-accent: #e5e5e9;
527
- --basecolors-shape-bicycle-contrast: #4db295;
528
- --basecolors-shape-bicycle-default: #4db295;
529
- --basecolors-shape-bus-contrast: #ef7398;
530
- --basecolors-shape-bus-default: #ef7398;
531
- --basecolors-shape-cableway-contrast: #b898e5;
532
- --basecolors-shape-cableway-default: #b898e5;
533
- --basecolors-shape-disabled: #b6b8ba;
534
- --basecolors-shape-disabledalt: #b3b4bd;
535
- --basecolors-shape-ferry-contrast: #8ccfe2;
536
- --basecolors-shape-ferry-default: #8ccfe2;
537
- --basecolors-shape-funicular-contrast: #b898e5;
538
- --basecolors-shape-funicular-default: #b898e5;
539
- --basecolors-shape-helicopter-contrast: #f2b8e5;
540
- --basecolors-shape-helicopter-default: #f2b8e5;
541
- --basecolors-shape-highlight: #ff9494;
542
- --basecolors-shape-light: #e5e5e9;
543
- --basecolors-shape-mask: #2d2e3e;
544
- --basecolors-shape-maskalt: #393a49;
545
- --basecolors-shape-metro-contrast: #dd973c;
546
- --basecolors-shape-metro-default: #dd973c;
547
- --basecolors-shape-mobility-contrast: #4db295;
548
- --basecolors-shape-mobility-default: #4db295;
549
- --basecolors-shape-plane-contrast: #f2b8e5;
550
- --basecolors-shape-plane-default: #f2b8e5;
551
- --basecolors-shape-subdued: #b3b4bd;
552
- --basecolors-shape-subduedalt: #b3b4bd;
553
- --basecolors-shape-taxi-contrast: #ffe082;
554
- --basecolors-shape-taxi-default: #ffe082;
555
- --basecolors-shape-train-contrast: #60a2d7;
556
- --basecolors-shape-train-default: #60a2d7;
557
- --basecolors-shape-tram-contrast: #b898e5;
558
- --basecolors-shape-tram-default: #b898e5;
559
- --basecolors-shape-walk-contrast: #8d8e9c;
560
- --basecolors-shape-walk-default: #8d8e9c;
561
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
562
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
563
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
564
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
565
- --basecolors-stroke-contrast: #aeb7e2;
566
- --basecolors-stroke-default: #b3b4bd;
567
- --basecolors-stroke-disabled: #e3e6e8;
568
- --basecolors-stroke-focus-contrast: #aeb7e2;
569
- --basecolors-stroke-focus-standard: #aeb7e2;
570
- --basecolors-stroke-highlight: #ff9494;
571
- --basecolors-stroke-light: #b3b4bd;
572
- --basecolors-stroke-subdued: #81828f;
573
- --basecolors-stroke-subduedalt: #949699;
574
- --basecolors-text-accent: #e5e5e9;
575
- --basecolors-text-disabled: #b6b8ba;
576
- --basecolors-text-disabledalt: #b6b8ba;
577
- --basecolors-text-highlight: #ff9494;
578
- --basecolors-text-light: #e5e5e9;
579
- --basecolors-text-subdued: #b3b4bd;
580
- --basecolors-text-subduedalt: #b3b4bd;
581
- }
582
-
583
- :root {
584
- --eds-button: 1;
585
- } /* DO NOT CHANGE!*/
586
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
587
- a.eds-button {
588
- display: flex;
589
- align-items: center;
590
- justify-content: center;
591
- }
592
-
593
- a.eds-button .eds-icon {
594
- position: unset;
595
- }
596
-
597
- .eds-button {
598
- min-width: 9.5rem;
599
- width: max-content;
600
- min-height: 3rem;
601
- height: fit-content;
602
- border-radius: 0.25rem;
603
- font-size: inherit;
604
- cursor: pointer;
605
- display: inline-block;
606
- appearance: none;
607
- text-decoration: none;
608
- padding: 0 1rem;
609
- font-size: 1rem;
610
- line-height: 1.5rem;
611
- font-weight: 500;
612
- text-align: center;
613
- font-family: inherit;
614
- position: relative;
615
- vertical-align: top;
616
- background-color: var(--eds-button-background);
617
- border: 0.125rem solid var(--eds-button-border);
618
- color: var(--eds-button-text);
619
- }
620
-
621
- .eds-button:hover {
622
- background-color: var(--eds-button-background-hover);
623
- }
624
-
625
- .eds-button:active {
626
- background-color: var(--eds-button-background-active);
627
- border-color: var(--eds-button-border-active);
628
- color: var(--eds-button-text-active);
629
- }
630
-
631
- .eds-button:focus-visible {
632
- outline: 2px solid #181c56;
633
- outline-color: var(--basecolors-stroke-focus-standard);
634
- outline-offset: 0.125rem;
635
- }
636
-
637
- .eds-contrast .eds-button:focus-visible {
638
- outline-color: var(--basecolors-stroke-focus-contrast);
639
- }
640
-
641
- .eds-button > .eds-button__loading-dots {
642
- width: 100%;
643
- }
644
-
645
- .eds-button > .eds-button__loading-dots .eds-loading-dots__dot {
646
- background: var(--eds-button-text);
647
- }
648
-
649
- .eds-button .eds-icon {
650
- position: relative;
651
- top: 0.2em;
652
- }
653
-
654
- .eds-button--leading-icon .eds-icon {
655
- margin-right: 0.75rem;
656
- }
657
-
658
- .eds-button--trailing-icon .eds-icon {
659
- margin-left: 0.75rem;
660
- }
661
-
662
- .eds-button--size-small {
663
- min-width: 5.75rem;
664
- min-height: 2rem;
665
- font-size: 0.875rem;
666
- line-height: 1.375rem;
667
- }
668
-
669
- .eds-button--size-large {
670
- min-width: 11.75rem;
671
- min-height: 3.75rem;
672
- }
673
-
674
- .eds-button--width-fluid {
675
- width: 100%;
676
- }
677
-
678
- .eds-button--variant-primary {
679
- --eds-button-background: var(--components-button-primary-standard-default);
680
- --eds-button-text: var(--components-button-primary-standard-text);
681
- --eds-button-text-active: var(--components-button-primary-standard-text);
682
- --eds-button-background-hover: var(--components-button-primary-standard-hover);
683
- --eds-button-background-active: var(--components-button-primary-standard-active);
684
- --eds-button-border: transparent;
685
- --eds-button-border-active: transparent;
686
- }
687
-
688
- .eds-contrast .eds-button--variant-primary {
689
- --eds-button-background: var(--components-button-primary-contrast-default);
690
- --eds-button-text: var(--components-button-primary-contrast-text);
691
- --eds-button-text-active: var(--components-button-primary-contrast-text);
692
- --eds-button-background-hover: var(--components-button-primary-contrast-hover);
693
- --eds-button-background-active: var(--components-button-primary-contrast-active);
694
- --eds-button-border: transparent;
695
- --eds-button-border-active: transparent;
696
- }
697
-
698
- .eds-button--variant-secondary {
699
- --eds-button-background: var(--components-button-secondary-standard-default);
700
- --eds-button-text: var(--components-button-secondary-standard-text);
701
- --eds-button-text-active: var(--components-button-secondary-standard-text-active);
702
- --eds-button-background-hover: var(--components-button-secondary-standard-hover);
703
- --eds-button-background-active: var(--components-button-secondary-standard-active);
704
- --eds-button-border: var(--components-button-secondary-standard-border);
705
- --eds-button-border-active: var(--components-button-secondary-standard-border-active);
706
- }
707
-
708
- .eds-contrast .eds-button--variant-secondary {
709
- --eds-button-background: var(--components-button-secondary-contrast-default);
710
- --eds-button-text: var(--components-button-secondary-contrast-text);
711
- --eds-button-text-active: var(--components-button-secondary-contrast-text-active);
712
- --eds-button-background-hover: var(--components-button-secondary-contrast-hover);
713
- --eds-button-background-active: var(--components-button-secondary-contrast-active);
714
- --eds-button-border: var(--components-button-secondary-contrast-border);
715
- --eds-button-border-active: var(--components-button-secondary-contrast-border-active);
716
- }
717
-
718
- .eds-button--variant-success {
719
- --eds-button-background: var(--components-button-success-standard-default);
720
- --eds-button-text: var(--components-button-success-standard-text);
721
- --eds-button-text-active: var(--components-button-success-standard-text);
722
- --eds-button-background-hover: var(--components-button-success-standard-hover);
723
- --eds-button-background-active: var(--components-button-success-standard-active);
724
- --eds-button-border: var(--components-button-success-standard-border);
725
- --eds-button-border-active: var(--components-button-success-standard-border);
726
- }
727
-
728
- .eds-contrast .eds-button--variant-success {
729
- --eds-button-background: var(--components-button-success-contrast-default);
730
- --eds-button-text: var(--components-button-success-contrast-text);
731
- --eds-button-text-active: var(--components-button-success-contrast-text);
732
- --eds-button-background-hover: var(--components-button-success-contrast-hover);
733
- --eds-button-background-active: var(--components-button-success-contrast-active);
734
- --eds-button-border: var(--components-button-success-contrast-border);
735
- --eds-button-border-active: var(--components-button-success-contrast-border);
736
- }
737
-
738
- .eds-button--variant-negative {
739
- --eds-button-background: var(--components-button-negative-standard-default);
740
- --eds-button-text: var(--components-button-negative-standard-text);
741
- --eds-button-text-active: var(--components-button-negative-standard-text-active);
742
- --eds-button-background-hover: var(--components-button-negative-standard-hover);
743
- --eds-button-background-active: var(--components-button-negative-standard-active);
744
- --eds-button-border: var(--components-button-negative-standard-border);
745
- --eds-button-border-active: var(--components-button-negative-standard-border);
746
- }
747
-
748
- .eds-contrast .eds-button--variant-negative {
749
- --eds-button-background: var(--components-button-negative-contrast-default);
750
- --eds-button-text: var(--components-button-negative-contrast-text);
751
- --eds-button-text-active: var(--components-button-negative-contrast-text-active);
752
- --eds-button-background-hover: var(--components-button-negative-contrast-hover);
753
- --eds-button-background-active: var(--components-button-negative-contrast-active);
754
- --eds-button-border: var(--components-button-negative-contrast-border);
755
- --eds-button-border-active: var(--components-button-negative-contrast-border);
756
- }
757
-
758
- .eds-button--variant-tertiary {
759
- font-size: 0.875rem;
760
- border: 0.0625rem solid #54568c;
761
- border-radius: 0.25rem;
762
- background-color: transparent;
763
- color: #181c56;
764
- height: 2rem;
765
- padding: 0 0.75rem;
766
- min-width: 6rem;
767
- }
768
-
769
- .eds-button--variant-tertiary:hover {
770
- background-color: rgb(206.4, 211.8, 237.6);
771
- }
772
-
773
- .eds-button--variant-tertiary:active {
774
- background-color: #aeb7e2;
775
- }
776
-
777
- .eds-button--variant-tertiary.eds-button--leading-icon .eds-icon {
778
- margin-right: 0.5rem;
779
- }
780
-
781
- .eds-button--variant-tertiary.eds-button--trailing-icon .eds-icon {
782
- margin-left: 0.5rem;
783
- }
784
-
785
- .eds-contrast .eds-button--variant-tertiary {
786
- background-color: transparent;
787
- color: #ffffff;
788
- border-color: #aeb7e2;
789
- }
790
-
791
- .eds-contrast .eds-button--variant-tertiary > .eds-button__loading-dots .eds-loading-dots__dot {
792
- background: #ffffff;
793
- }
794
-
795
- .eds-contrast .eds-button--variant-tertiary:hover {
796
- background-color: rgba(174, 183, 226, 0.2);
797
- }
798
-
799
- .eds-contrast .eds-button--variant-tertiary:active {
800
- background: #aeb7e2;
801
- color: #181c56;
802
- }
803
-
804
- .eds-contrast .eds-button--variant-tertiary:active > .eds-button__loading-dots .eds-loading-dots__dot {
805
- background: #181c56;
806
- }
807
-
808
- .eds-button[disabled].eds-button--loading {
809
- pointer-events: none;
810
- }
811
-
812
- .eds-button[disabled]:not(.eds-button--loading) {
813
- background: var(--components-button-disabled-standard-fill);
814
- color: var(--components-button-disabled-standard-text-disabled);
815
- border-color: transparent;
816
- cursor: not-allowed;
817
- }
818
-
819
- .eds-contrast .eds-button[disabled]:not(.eds-button--loading) {
820
- background-color: var(--components-button-disabled-contrast-fill);
821
- color: var(--components-button-disabled-contrast-text-disabled);
822
- border-color: transparent;
823
- } /* DO NOT CHANGE!*/
824
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
825
- .eds-button-group .eds-button {
826
- margin-right: 0.75rem;
827
- margin-bottom: 0.75rem;
828
- }
829
-
830
- .eds-button-group .eds-button:only-child {
831
- margin: 0;
832
- } /* DO NOT CHANGE!*/
833
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
834
- .eds-floating-button {
835
- align-items: center;
836
- appearance: none;
837
- background: var(--components-button-floating-standard-default);
838
- border: 0;
839
- border-radius: 1.5rem;
840
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
841
- color: var(--components-button-floating-standard-text);
842
- cursor: pointer;
843
- display: flex;
844
- font-family: inherit;
845
- font-size: 0.875rem;
846
- font-weight: 500;
847
- justify-content: center;
848
- min-height: 3rem;
849
- margin: 0;
850
- min-width: 3rem;
851
- padding: 0 1rem;
852
- position: relative;
853
- z-index: 10;
854
- }
855
-
856
- .eds-floating-button--extended {
857
- padding: 0 0.9375rem;
858
- }
859
-
860
- .eds-floating-button:hover {
861
- background-color: var(--components-button-floating-standard-hover);
862
- }
863
-
864
- .eds-floating-button:active {
865
- background-color: var(--components-button-floating-standard-active);
866
- }
867
-
868
- .eds-floating-button:focus-visible {
869
- outline: 2px solid #181c56;
870
- outline-color: var(--basecolors-stroke-focus-standard);
871
- outline-offset: 0.125rem;
872
- }
873
-
874
- .eds-contrast .eds-floating-button:focus-visible {
875
- outline-color: var(--basecolors-stroke-focus-contrast);
876
- }
877
-
878
- .eds-contrast .eds-floating-button {
879
- background: var(--components-button-floating-contrast-default);
880
- color: var(--components-button-floating-contrast-text);
881
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
882
- }
883
-
884
- .eds-contrast .eds-floating-button:hover {
885
- background-color: var(--components-button-floating-contrast-hover);
886
- }
887
-
888
- .eds-contrast .eds-floating-button:active {
889
- background-color: var(--components-button-floating-contrast-active);
890
- }
891
-
892
- .eds-floating-button--small {
893
- border-radius: 1rem;
894
- height: 2rem;
895
- padding: 0 0.5rem;
896
- min-width: 2rem;
897
- min-height: 2rem;
898
- flex: 0 1 auto;
899
- }
900
-
901
- .eds-floating-button--small.eds-floating-button--extended {
902
- padding: 0 0.6875rem;
903
- }
904
-
905
- .eds-floating-button--extended > * {
906
- margin: 0 0.5em;
907
- }
908
-
909
- .eds-floating-button--extended > *:first-child {
910
- margin-left: 0;
911
- }
912
-
913
- .eds-floating-button--extended > *:last-child {
914
- margin-right: 0;
915
- } /* DO NOT CHANGE!*/
916
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
917
- .eds-square-button {
918
- align-items: center;
919
- appearance: none;
920
- background: transparent;
921
- border: 0;
922
- border-radius: 0.25rem;
923
- cursor: pointer;
924
- font-size: 1rem;
925
- display: inline-flex;
926
- font-family: inherit;
927
- font-weight: 500;
928
- justify-content: center;
929
- padding: 0;
930
- text-decoration: none;
931
- }
932
-
933
- .eds-square-button:focus-visible {
934
- outline: none;
935
- }
936
-
937
- .eds-square-button:focus-visible .eds-square-button__button {
938
- outline: 2px solid #181c56;
939
- outline-color: var(--basecolors-stroke-focus-standard);
940
- outline-offset: 0.125rem;
941
- }
942
-
943
- .eds-contrast .eds-square-button:focus-visible .eds-square-button__button {
944
- outline-color: var(--basecolors-stroke-focus-contrast);
945
- }
946
-
947
- .eds-square-button[disabled]:not(.eds-square-button--loading) {
948
- cursor: not-allowed;
949
- }
950
-
951
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button,
952
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover {
953
- border-color: var(--basecolors-stroke-disabled);
954
- border-style: dashed;
955
- background-color: transparent;
956
- color: var(--basecolors-text-disabled);
957
- }
958
-
959
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label,
960
- .eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover {
961
- color: var(--basecolors-text-disabled);
962
- }
963
-
964
- .eds-square-button.eds-square-button--loading {
965
- opacity: 1;
966
- }
967
-
968
- .eds-square-button__button {
969
- align-items: center;
970
- background-color: var(--button-background);
971
- border: 0.125rem solid var(--border-color);
972
- border-radius: 0.25rem;
973
- color: var(--icon-color);
974
- display: inline-flex;
975
- height: 3rem;
976
- justify-content: center;
977
- line-height: 1.5rem;
978
- padding: 0;
979
- text-align: center;
980
- text-decoration: none;
981
- vertical-align: top;
982
- position: relative;
983
- width: 3rem;
984
- }
985
-
986
- .eds-square-button__label {
987
- color: var(--label-color);
988
- }
989
-
990
- .eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label {
991
- margin-left: 1rem;
992
- }
993
-
994
- .eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot {
995
- background: var(--icon-color);
996
- }
997
-
998
- .eds-square-button--secondary {
999
- --button-background: var(--components-button-squaresecondary-standard-default);
1000
- --border-color: var(--components-button-squaresecondary-standard-border);
1001
- --icon-color: var(--components-button-squaresecondary-standard-icon);
1002
- --label-color: var(--components-button-squaresecondary-standard-text);
1003
- }
1004
-
1005
- .eds-square-button--secondary:hover {
1006
- --button-background: var(--components-button-squaresecondary-standard-hover);
1007
- }
1008
-
1009
- .eds-square-button--secondary:active {
1010
- --button-background: var(--components-button-squaresecondary-standard-active);
1011
- --border-color: var(--components-button-squaresecondary-standard-border-active);
1012
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
1013
- }
1014
-
1015
- .eds-contrast .eds-square-button--secondary {
1016
- --button-background: var(--components-button-squaresecondary-contrast-default);
1017
- --border-color: var(--components-button-squaresecondary-contrast-border);
1018
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
1019
- --label-color: var(--components-button-squaresecondary-contrast-label);
1020
- }
1021
-
1022
- .eds-contrast .eds-square-button--secondary:hover {
1023
- --button-background: var(--components-button-squaresecondary-contrast-hover);
1024
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
1025
- }
1026
-
1027
- .eds-contrast .eds-square-button--secondary:active {
1028
- --button-background: var(--components-button-squaresecondary-contrast-active);
1029
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
1030
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
1031
- }
1032
-
1033
- .eds-square-button--success {
1034
- --button-background: var(--components-button-squaresuccess-standard-default);
1035
- --border-color: var(--components-button-squaresuccess-standard-border);
1036
- --icon-color: var(--components-button-squaresuccess-standard-icon);
1037
- --label-color: var(--components-button-squaresuccess-standard-label);
1038
- }
1039
-
1040
- .eds-square-button--success:hover {
1041
- --button-background: var(--components-button-squaresuccess-standard-hover);
1042
- }
1043
-
1044
- .eds-square-button--success:active {
1045
- --button-background: var(--components-button-squaresuccess-standard-active);
1046
- }
1047
-
1048
- .eds-contrast .eds-square-button--success {
1049
- --button-background: var(--components-button-squaresuccess-contrast-default);
1050
- --border-color: var(--components-button-squaresuccess-contrast-border);
1051
- --icon-color: var(--components-button-squaresuccess-contrast-icon);
1052
- --label-color: var(--components-button-squaresuccess-contrast-label);
1053
- }
1054
-
1055
- .eds-contrast .eds-square-button--success:hover {
1056
- --button-background: var(--components-button-squaresuccess-contrast-hover);
1057
- }
1058
-
1059
- .eds-contrast .eds-square-button--success:active {
1060
- --button-background: var(--components-button-squaresuccess-contrast-active);
1061
- }
1062
-
1063
- .eds-square-button--tertiary {
1064
- --button-background: var(--components-button-squaresecondary-standard-default);
1065
- --border-color: var(--components-button-squaresecondary-standard-border);
1066
- --icon-color: var(--components-button-squaresecondary-standard-icon);
1067
- --label-color: var(--components-button-squaresecondary-standard-text);
1068
- font-size: 0.875rem;
1069
- }
1070
-
1071
- .eds-square-button--tertiary:hover {
1072
- --button-background: var(--components-button-squaresecondary-standard-hover);
1073
- }
1074
-
1075
- .eds-square-button--tertiary:active {
1076
- --button-background: var(--components-button-squaresecondary-standard-active);
1077
- --border-color: var(--components-button-squaresecondary-standard-border-active);
1078
- --icon-color: var(--components-button-squaresecondary-standard-icon-active);
1079
- }
1080
-
1081
- .eds-contrast .eds-square-button--tertiary {
1082
- --button-background: var(--components-button-squaresecondary-contrast-default);
1083
- --border-color: var(--components-button-squaresecondary-contrast-border);
1084
- --icon-color: var(--components-button-squaresecondary-contrast-icon-default);
1085
- --label-color: var(--components-button-squaresecondary-contrast-label);
1086
- }
1087
-
1088
- .eds-contrast .eds-square-button--tertiary:hover {
1089
- --button-background: var(--components-button-squaresecondary-contrast-hover);
1090
- --icon-color: var(--components-button-squaresecondary-contrast-icon-hover);
1091
- }
1092
-
1093
- .eds-contrast .eds-square-button--tertiary:active {
1094
- --button-background: var(--components-button-squaresecondary-contrast-active);
1095
- --border-color: var(--components-button-squaresecondary-contrast-border-active);
1096
- --icon-color: var(--components-button-squaresecondary-contrast-icon-active);
1097
- }
1098
-
1099
- .eds-square-button--tertiary .eds-square-button__label + .eds-square-button__button,
1100
- .eds-square-button--tertiary .eds-square-button__button + .eds-square-button__label {
1101
- margin-left: 0.75rem;
1102
- }
1103
-
1104
- .eds-square-button--tertiary .eds-square-button__button {
1105
- height: 2rem;
1106
- width: 2rem;
1107
- border-width: 0.0625rem;
1108
- } /* DO NOT CHANGE!*/
1109
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1110
- .eds-icon-button {
1111
- border: 0.125rem solid transparent;
1112
- border-radius: 0.25rem;
1113
- background: none;
1114
- color: var(--components-button-iconbutton-standard-text);
1115
- cursor: pointer;
1116
- display: flex;
1117
- justify-content: center;
1118
- align-items: center;
1119
- font-size: 1rem;
1120
- padding: 0.5rem;
1121
- }
1122
-
1123
- .eds-contrast .eds-icon-button {
1124
- color: var(--components-button-iconbutton-contrast-text);
1125
- }
1126
-
1127
- .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot {
1128
- background-color: var(--components-button-iconbutton-contrast-icon);
1129
- }
1130
-
1131
- .eds-icon-button--size-small {
1132
- height: 1.5rem;
1133
- width: 1.5rem;
1134
- padding: 0;
1135
- }
1136
-
1137
- .eds-icon-button:hover {
1138
- background-color: var(--components-button-iconbutton-standard-hover);
1139
- }
1140
-
1141
- .eds-contrast .eds-icon-button:hover {
1142
- background-color: var(--components-button-iconbutton-contrast-hover);
1143
- }
1144
-
1145
- .eds-icon-button:active {
1146
- background: var(--components-button-iconbutton-standard-active);
1147
- color: var(--components-button-iconbutton-standard-text-active);
1148
- }
1149
-
1150
- .eds-contrast .eds-icon-button:active {
1151
- background: var(--components-button-iconbutton-contrast-active);
1152
- color: var(--components-button-iconbutton-contrast-text-active);
1153
- }
1154
-
1155
- .eds-icon-button:focus-visible {
1156
- outline: 2px solid #181c56;
1157
- outline-color: var(--basecolors-stroke-focus-standard);
1158
- outline-offset: 0.125rem;
1159
- }
1160
-
1161
- .eds-contrast .eds-icon-button:focus-visible {
1162
- outline-color: var(--basecolors-stroke-focus-contrast);
1163
- }
1164
-
1165
- .eds-icon-button--disabled {
1166
- opacity: 0.5;
1167
- pointer-events: none;
1168
- }
1169
-
1170
- .eds-icon-button--disabled__wrapper {
1171
- cursor: not-allowed;
1172
- width: fit-content;
1173
- }
1174
-
1175
- .eds-tooltip-wrapper {
1176
- display: inline-block;
1177
- position: relative;
1178
- }
1179
-
1180
- .eds-tooltip {
1181
- position: absolute;
1182
- display: flex;
1183
- align-items: center;
1184
- justify-content: space-between;
1185
- z-index: 20;
1186
- padding: 0.3125rem 0.625rem;
1187
- min-height: 1rem;
1188
- min-width: 2rem;
1189
- max-width: 32rem;
1190
- font-size: 0.875rem;
1191
- border-radius: 0.25rem;
1192
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1193
- background: var(--components-tooltip-tooltip-standard-fill);
1194
- color: var(--components-tooltip-tooltip-standard-text);
1195
- }
1196
- .eds-contrast .eds-tooltip {
1197
- color: var(--components-tooltip-tooltip-contrast-text);
1198
- background: var(--components-tooltip-tooltip-contrast-fill);
1199
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1200
- }
1201
- .eds-tooltip__arrow, .eds-tooltip__arrow--bottom, .eds-tooltip__arrow--top, .eds-tooltip__arrow--left, .eds-tooltip__arrow--right {
1202
- position: absolute;
1203
- background: inherit;
1204
- width: 0.5rem;
1205
- height: 0.5rem;
1206
- transform: rotate(45deg);
1207
- }
1208
- .eds-tooltip__arrow--right {
1209
- left: -0.2285533906rem;
1210
- }
1211
- .eds-tooltip__arrow--left {
1212
- right: -0.2285533906rem;
1213
- }
1214
- .eds-tooltip__arrow--top {
1215
- bottom: -0.2285533906rem;
1216
- }
1217
- .eds-tooltip__arrow--bottom {
1218
- top: -0.2285533906rem;
1219
- }
1220
- .eds-tooltip--error, .eds-tooltip--negative {
1221
- background: var(--components-tooltip-tooltip-standard-fill-negative);
1222
- border: solid var(--components-tooltip-tooltip-standard-fill-negative);
1223
- color: var(--components-tooltip-tooltip-standard-text-negative);
1224
- }
1225
- .eds-contrast .eds-tooltip--error, .eds-contrast .eds-tooltip--negative {
1226
- background: var(--components-tooltip-tooltip-contrast-fill-negative);
1227
- color: var(--components-tooltip-tooltip-contrast-text-negative);
1228
- border: solid var(--components-tooltip-tooltip-contrast-fill-negative);
1229
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1230
- }
1231
- .eds-tooltip__close-button {
1232
- padding: 0.2rem;
1233
- height: 1.5rem;
1234
- width: 1.5rem;
1235
- margin: -0.3125rem;
1236
- margin-left: 0.25rem;
1237
- color: inherit;
1238
- }
1239
- .eds-tooltip__close-button:hover {
1240
- background-color: var(--components-button-iconbutton-contrast-hover);
1241
- }
1242
- .eds-tooltip__close-button:focus-visible {
1243
- outline: 2px solid #181c56;
1244
- outline-color: var(--basecolors-stroke-focus-contrast);
1245
- outline-offset: 0.125rem;
1246
- }
1247
- .eds-tooltip__close-button:active {
1248
- background-color: var(--components-button-iconbutton-contrast-active);
1249
- }
1250
- .eds-contrast .eds-tooltip__close-button {
1251
- color: inherit;
1252
- }
1253
- .eds-contrast .eds-tooltip__close-button:hover {
1254
- background-color: var(--components-button-iconbutton-standard-hover);
1255
- }
1256
- .eds-contrast .eds-tooltip__close-button:focus-visible {
1257
- outline: 2px solid #181c56;
1258
- outline-color: var(--basecolors-stroke-focus-standard);
1259
- outline-offset: 0.125rem;
1260
- }
1261
- .eds-contrast .eds-tooltip__close-button:active {
1262
- background-color: var(--components-button-iconbutton-standard-active);
1263
- }/* DO NOT CHANGE!*/
1264
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1265
- .eds-popover {
1266
- background: var(--components-tooltip-popover-standard-fill);
1267
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1268
- border-radius: 0.25rem;
1269
- border: 0.0625rem solid var(--components-tooltip-popover-standard-border);
1270
- font-family: inherit;
1271
- z-index: 20;
1272
- }
1273
- .eds-contrast .eds-popover {
1274
- background: var(--components-tooltip-popover-contrast-fill);
1275
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1276
- }
1277
- .eds-popover:focus-visible {
1278
- outline: 2px solid #181c56;
1279
- outline-color: var(--basecolors-stroke-focus-standard);
1280
- outline-offset: 0.125rem;
1281
- }
1282
- .eds-contrast .eds-popover:focus-visible {
1283
- outline-color: var(--basecolors-stroke-focus-contrast);
56
+ :root{
57
+ --basecolors-frame-contrast:#181c56;
58
+ --basecolors-frame-contrastalt:#393d79;
59
+ --basecolors-frame-contrastalt-2:#292b6a;
60
+ --basecolors-frame-default:#ffffff;
61
+ --basecolors-frame-elevated:#ffffff;
62
+ --basecolors-frame-elevatedalt:#f6f6f9;
63
+ --basecolors-frame-subdued:#d9dae8;
64
+ --basecolors-frame-tint:#f6f6f9;
65
+ --basecolors-shape-accent:#181c56;
66
+ --basecolors-shape-bicycle-contrast:#00db9b;
67
+ --basecolors-shape-bicycle-default:#33826b;
68
+ --basecolors-shape-bus-contrast:#ff6392;
69
+ --basecolors-shape-bus-default:#c5044e;
70
+ --basecolors-shape-cableway-contrast:#b482fb;
71
+ --basecolors-shape-cableway-default:#78469a;
72
+ --basecolors-shape-disabled:#6e6f73;
73
+ --basecolors-shape-disabledalt:#b6b8ba;
74
+ --basecolors-shape-ferry-contrast:#6fdfff;
75
+ --basecolors-shape-ferry-default:#0c6693;
76
+ --basecolors-shape-funicular-contrast:#b482fb;
77
+ --basecolors-shape-funicular-default:#78469a;
78
+ --basecolors-shape-helicopter-contrast:#fbafea;
79
+ --basecolors-shape-helicopter-default:#800664;
80
+ --basecolors-shape-highlight:#ff5959;
81
+ --basecolors-shape-light:#ffffff;
82
+ --basecolors-shape-mask:#ffffff;
83
+ --basecolors-shape-maskalt:#ffffff;
84
+ --basecolors-shape-metro-contrast:#f08901;
85
+ --basecolors-shape-metro-default:#bf5826;
86
+ --basecolors-shape-mobility-contrast:#00db9b;
87
+ --basecolors-shape-mobility-default:#33826b;
88
+ --basecolors-shape-plane-contrast:#fbafea;
89
+ --basecolors-shape-plane-default:#800664;
90
+ --basecolors-shape-subdued:#626493;
91
+ --basecolors-shape-subduedalt:#d9dae8;
92
+ --basecolors-shape-taxi-contrast:#ffe082;
93
+ --basecolors-shape-taxi-default:#3d3e40;
94
+ --basecolors-shape-train-contrast:#42a5f5;
95
+ --basecolors-shape-train-default:#00367f;
96
+ --basecolors-shape-tram-contrast:#b482fb;
97
+ --basecolors-shape-tram-default:#78469a;
98
+ --basecolors-shape-walk-contrast:#8284ab;
99
+ --basecolors-shape-walk-default:#8d8e9c;
100
+ --basecolors-shape-airportlinkbus-contrast:#fbafea;
101
+ --basecolors-shape-airportlinkbus-default:#800664;
102
+ --basecolors-shape-airportlinkrail-contrast:#fbafea;
103
+ --basecolors-shape-airportlinkrail-default:#800664;
104
+ --basecolors-stroke-contrast:#aeb7e2;
105
+ --basecolors-stroke-default:#181c56;
106
+ --basecolors-stroke-disabled:#949699;
107
+ --basecolors-stroke-focus-contrast:#aeb7e2;
108
+ --basecolors-stroke-focus-standard:#181c56;
109
+ --basecolors-stroke-highlight:#ff5959;
110
+ --basecolors-stroke-light:#ffffff;
111
+ --basecolors-stroke-subdued:#8284ab;
112
+ --basecolors-stroke-subduedalt:#e3e6e8;
113
+ --basecolors-text-accent:#181c56;
114
+ --basecolors-text-disabled:#6e6f73;
115
+ --basecolors-text-disabledalt:#b6b8ba;
116
+ --basecolors-text-highlight:#ff5959;
117
+ --basecolors-text-light:#ffffff;
118
+ --basecolors-text-subdued:#626493;
119
+ --basecolors-text-subduedalt:#d9dae8;
120
+ }
121
+
122
+ [data-color-mode=dark]{
123
+ --basecolors-frame-contrast:#212233;
124
+ --basecolors-frame-contrastalt:#141527;
125
+ --basecolors-frame-contrastalt-2:#08091c;
126
+ --basecolors-frame-default:#08091c;
127
+ --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
128
+ --basecolors-frame-elevatedalt:#464755;
129
+ --basecolors-frame-subdued:#2d2e3e;
130
+ --basecolors-frame-tint:#141527;
131
+ --basecolors-shape-accent:#e5e5e9;
132
+ --basecolors-shape-bicycle-contrast:#4db295;
133
+ --basecolors-shape-bicycle-default:#4db295;
134
+ --basecolors-shape-bus-contrast:#ef7398;
135
+ --basecolors-shape-bus-default:#ef7398;
136
+ --basecolors-shape-cableway-contrast:#b898e5;
137
+ --basecolors-shape-cableway-default:#b898e5;
138
+ --basecolors-shape-disabled:#b6b8ba;
139
+ --basecolors-shape-disabledalt:#b3b4bd;
140
+ --basecolors-shape-ferry-contrast:#8ccfe2;
141
+ --basecolors-shape-ferry-default:#8ccfe2;
142
+ --basecolors-shape-funicular-contrast:#b898e5;
143
+ --basecolors-shape-funicular-default:#b898e5;
144
+ --basecolors-shape-helicopter-contrast:#f2b8e5;
145
+ --basecolors-shape-helicopter-default:#f2b8e5;
146
+ --basecolors-shape-highlight:#ff9494;
147
+ --basecolors-shape-light:#e5e5e9;
148
+ --basecolors-shape-mask:#2d2e3e;
149
+ --basecolors-shape-maskalt:#393a49;
150
+ --basecolors-shape-metro-contrast:#dd973c;
151
+ --basecolors-shape-metro-default:#dd973c;
152
+ --basecolors-shape-mobility-contrast:#4db295;
153
+ --basecolors-shape-mobility-default:#4db295;
154
+ --basecolors-shape-plane-contrast:#f2b8e5;
155
+ --basecolors-shape-plane-default:#f2b8e5;
156
+ --basecolors-shape-subdued:#b3b4bd;
157
+ --basecolors-shape-subduedalt:#b3b4bd;
158
+ --basecolors-shape-taxi-contrast:#ffe082;
159
+ --basecolors-shape-taxi-default:#ffe082;
160
+ --basecolors-shape-train-contrast:#60a2d7;
161
+ --basecolors-shape-train-default:#60a2d7;
162
+ --basecolors-shape-tram-contrast:#b898e5;
163
+ --basecolors-shape-tram-default:#b898e5;
164
+ --basecolors-shape-walk-contrast:#8d8e9c;
165
+ --basecolors-shape-walk-default:#8d8e9c;
166
+ --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
167
+ --basecolors-shape-airportlinkbus-default:#f2b8e5;
168
+ --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
169
+ --basecolors-shape-airportlinkrail-default:#f2b8e5;
170
+ --basecolors-stroke-contrast:#aeb7e2;
171
+ --basecolors-stroke-default:#b3b4bd;
172
+ --basecolors-stroke-disabled:#e3e6e8;
173
+ --basecolors-stroke-focus-contrast:#aeb7e2;
174
+ --basecolors-stroke-focus-standard:#aeb7e2;
175
+ --basecolors-stroke-highlight:#ff9494;
176
+ --basecolors-stroke-light:#b3b4bd;
177
+ --basecolors-stroke-subdued:#81828f;
178
+ --basecolors-stroke-subduedalt:#949699;
179
+ --basecolors-text-accent:#e5e5e9;
180
+ --basecolors-text-disabled:#b6b8ba;
181
+ --basecolors-text-disabledalt:#b6b8ba;
182
+ --basecolors-text-highlight:#ff9494;
183
+ --basecolors-text-light:#e5e5e9;
184
+ --basecolors-text-subdued:#b3b4bd;
185
+ --basecolors-text-subduedalt:#b3b4bd;
186
+ }
187
+
188
+ :root{
189
+ --eds-tooltip:1;
190
+ }.eds-tooltip-wrapper{
191
+ display:inline-block;
192
+ position:relative;
193
+ }
194
+
195
+ .eds-tooltip{
196
+ position:absolute;
197
+ display:-webkit-box;
198
+ display:-webkit-flex;
199
+ display:-moz-box;
200
+ display:flex;
201
+ -webkit-box-align:center;
202
+ -webkit-align-items:center;
203
+ -moz-box-align:center;
204
+ align-items:center;
205
+ -webkit-box-pack:justify;
206
+ -webkit-justify-content:space-between;
207
+ -moz-box-pack:justify;
208
+ justify-content:space-between;
209
+ z-index:20;
210
+ padding:0.3125rem 0.625rem;
211
+ min-height:1rem;
212
+ min-width:2rem;
213
+ max-width:32rem;
214
+ font-size:0.875rem;
215
+ -webkit-border-radius:0.25rem;
216
+ -moz-border-radius:0.25rem;
217
+ border-radius:0.25rem;
218
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
219
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
220
+ box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
221
+ background:var(--components-tooltip-tooltip-standard-fill);
222
+ color:var(--components-tooltip-tooltip-standard-text);
223
+ }
224
+ .eds-contrast .eds-tooltip{
225
+ color:var(--components-tooltip-tooltip-contrast-text);
226
+ background:var(--components-tooltip-tooltip-contrast-fill);
227
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
228
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
229
+ box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
230
+ }
231
+ .eds-tooltip__arrow, .eds-tooltip__arrow--bottom, .eds-tooltip__arrow--top, .eds-tooltip__arrow--left, .eds-tooltip__arrow--right{
232
+ position:absolute;
233
+ background:inherit;
234
+ width:0.5rem;
235
+ height:0.5rem;
236
+ -webkit-transform:rotate(45deg);
237
+ -moz-transform:rotate(45deg);
238
+ -o-transform:rotate(45deg);
239
+ transform:rotate(45deg);
240
+ }
241
+ .eds-tooltip__arrow--right{
242
+ left:-0.2285533906rem;
243
+ }
244
+ .eds-tooltip__arrow--left{
245
+ right:-0.2285533906rem;
246
+ }
247
+ .eds-tooltip__arrow--top{
248
+ bottom:-0.2285533906rem;
249
+ }
250
+ .eds-tooltip__arrow--bottom{
251
+ top:-0.2285533906rem;
252
+ }
253
+ .eds-tooltip--error, .eds-tooltip--negative{
254
+ background:var(--components-tooltip-tooltip-standard-fill-negative);
255
+ border:solid var(--components-tooltip-tooltip-standard-fill-negative);
256
+ color:var(--components-tooltip-tooltip-standard-text-negative);
257
+ }
258
+ .eds-contrast .eds-tooltip--error, .eds-contrast .eds-tooltip--negative{
259
+ background:var(--components-tooltip-tooltip-contrast-fill-negative);
260
+ color:var(--components-tooltip-tooltip-contrast-text-negative);
261
+ border:solid var(--components-tooltip-tooltip-contrast-fill-negative);
262
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
263
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
264
+ box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
265
+ }
266
+ .eds-tooltip__close-button{
267
+ padding:0.2rem;
268
+ height:1.5rem;
269
+ width:1.5rem;
270
+ margin:-0.3125rem;
271
+ margin-left:0.25rem;
272
+ color:inherit;
273
+ }
274
+ .eds-tooltip__close-button:hover{
275
+ background-color:var(--components-button-iconbutton-contrast-hover);
276
+ }
277
+ .eds-tooltip__close-button:focus-visible{
278
+ outline:2px solid #181c56;
279
+ outline-color:var(--basecolors-stroke-focus-contrast);
280
+ outline-offset:0.125rem;
281
+ }
282
+ .eds-tooltip__close-button:active{
283
+ background-color:var(--components-button-iconbutton-contrast-active);
284
+ }
285
+ .eds-contrast .eds-tooltip__close-button{
286
+ color:inherit;
287
+ }
288
+ .eds-contrast .eds-tooltip__close-button:hover{
289
+ background-color:var(--components-button-iconbutton-standard-hover);
290
+ }
291
+ .eds-contrast .eds-tooltip__close-button:focus-visible{
292
+ outline:2px solid #181c56;
293
+ outline-color:var(--basecolors-stroke-focus-standard);
294
+ outline-offset:0.125rem;
295
+ }
296
+ .eds-contrast .eds-tooltip__close-button:active{
297
+ background-color:var(--components-button-iconbutton-standard-active);
298
+ }.eds-popover{
299
+ background:var(--components-tooltip-popover-standard-fill);
300
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
301
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
302
+ box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
303
+ -webkit-border-radius:0.25rem;
304
+ -moz-border-radius:0.25rem;
305
+ border-radius:0.25rem;
306
+ border:0.0625rem solid var(--components-tooltip-popover-standard-border);
307
+ font-family:inherit;
308
+ z-index:20;
309
+ }
310
+ .eds-contrast .eds-popover{
311
+ background:var(--components-tooltip-popover-contrast-fill);
312
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
313
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
314
+ box-shadow:0 0.0625rem 0.1875rem rgb(57, 61, 121);
315
+ }
316
+ .eds-popover:focus-visible{
317
+ outline:2px solid #181c56;
318
+ outline-color:var(--basecolors-stroke-focus-standard);
319
+ outline-offset:0.125rem;
320
+ }
321
+ .eds-contrast .eds-popover:focus-visible{
322
+ outline-color:var(--basecolors-stroke-focus-contrast);
1284
323
  }