@entur/alert 0.17.13-beta.8 → 0.17.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1,5 +1,289 @@
1
1
  /* DO NOT CHANGE!*/
2
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
+ [data-color-mode=light],
8
+ :root {
9
+ --components-alert-alertbox-information-contrast-border: #067eb2;
10
+ --components-alert-alertbox-information-contrast-filldefault: #acd7f1;
11
+ --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
12
+ --components-alert-alertbox-information-contrast-icondefault: #181c56;
13
+ --components-alert-alertbox-information-contrast-icontoast: #181c56;
14
+ --components-alert-alertbox-information-contrast-textdefault: #181c56;
15
+ --components-alert-alertbox-information-contrast-texttoast: #181c56;
16
+ --components-alert-alertbox-information-standard-border: #067eb2;
17
+ --components-alert-alertbox-information-standard-filldefault: #e1eff8;
18
+ --components-alert-alertbox-information-standard-filltoast: #e1eff8;
19
+ --components-alert-alertbox-information-standard-icondefault: #067eb2;
20
+ --components-alert-alertbox-information-standard-icontoast: #067eb2;
21
+ --components-alert-alertbox-information-standard-textdefault: #181c56;
22
+ --components-alert-alertbox-information-standard-texttoast: #181c56;
23
+ --components-alert-alertbox-negative-contrast-border: #d31b1b;
24
+ --components-alert-alertbox-negative-contrast-filldefault: #ff9494;
25
+ --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
26
+ --components-alert-alertbox-negative-contrast-icondefault: #181c56;
27
+ --components-alert-alertbox-negative-contrast-icontoast: #181c56;
28
+ --components-alert-alertbox-negative-contrast-textdefault: #181c56;
29
+ --components-alert-alertbox-negative-contrast-texttoast: #181c56;
30
+ --components-alert-alertbox-negative-standard-border: #d31b1b;
31
+ --components-alert-alertbox-negative-standard-filldefault: #ffcece;
32
+ --components-alert-alertbox-negative-standard-filltoast: #ffcece;
33
+ --components-alert-alertbox-negative-standard-icondefault: #d31b1b;
34
+ --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
35
+ --components-alert-alertbox-negative-standard-textdefault: #181c56;
36
+ --components-alert-alertbox-negative-standard-texttoast: #181c56;
37
+ --components-alert-alertbox-success-contrast-border: #1a8e60;
38
+ --components-alert-alertbox-success-contrast-filldefault: #9cd9c2;
39
+ --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
40
+ --components-alert-alertbox-success-contrast-icondefault: #181c56;
41
+ --components-alert-alertbox-success-contrast-icontoast: #181c56;
42
+ --components-alert-alertbox-success-contrast-textdefault: #181c56;
43
+ --components-alert-alertbox-success-contrast-texttoast: #181c56;
44
+ --components-alert-alertbox-success-standard-border: #1a8e60;
45
+ --components-alert-alertbox-success-standard-filldefault: #d0f1e3;
46
+ --components-alert-alertbox-success-standard-filltoast: #d0f1e3;
47
+ --components-alert-alertbox-success-standard-icondefault: #1a8e60;
48
+ --components-alert-alertbox-success-standard-icontoast: #1a8e60;
49
+ --components-alert-alertbox-success-standard-textdefault: #181c56;
50
+ --components-alert-alertbox-success-standard-texttoast: #181c56;
51
+ --components-alert-alertbox-warning-contrast-border: #e9b10c;
52
+ --components-alert-alertbox-warning-contrast-filldefault: #ffeeb3;
53
+ --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
54
+ --components-alert-alertbox-warning-contrast-icondefault: #181c56;
55
+ --components-alert-alertbox-warning-contrast-icontoast: #181c56;
56
+ --components-alert-alertbox-warning-contrast-textdefault: #181c56;
57
+ --components-alert-alertbox-warning-contrast-textdefault2: #181c56;
58
+ --components-alert-alertbox-warning-standard-border: #e9b10c;
59
+ --components-alert-alertbox-warning-standard-filldefault: #fff4cd;
60
+ --components-alert-alertbox-warning-standard-filltoast: #fff4cd;
61
+ --components-alert-alertbox-warning-standard-icondefault: #181c56;
62
+ --components-alert-alertbox-warning-standard-icontoast: #181c56;
63
+ --components-alert-alertbox-warning-standard-textdefault: #181c56;
64
+ --components-alert-alertbox-warning-standard-texttoast: #181c56;
65
+ --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
66
+ --components-alert-copyabletext-contrast-border-interactive: #aeb7e2;
67
+ --components-alert-copyabletext-contrast-fill: #f6f6f9;
68
+ --components-alert-copyabletext-contrast-icon: #181c56;
69
+ --components-alert-copyabletext-contrast-text: #181c56;
70
+ --components-alert-copyabletext-standard-border: rgba(84, 86, 140, 0.4);
71
+ --components-alert-copyabletext-standard-border-interactive: #181c56;
72
+ --components-alert-copyabletext-standard-fill: #f6f6f9;
73
+ --components-alert-copyabletext-standard-icon: #181c56;
74
+ --components-alert-copyabletext-standard-text: #181c56;
75
+ }
76
+
77
+ [data-color-mode=dark] {
78
+ --components-alert-alertbox-information-contrast-border: #067eb2;
79
+ --components-alert-alertbox-information-contrast-filldefault: rgba(45, 152, 210, 0.2);
80
+ --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
81
+ --components-alert-alertbox-information-contrast-icondefault: #acd7f1;
82
+ --components-alert-alertbox-information-contrast-icontoast: #181c56;
83
+ --components-alert-alertbox-information-contrast-textdefault: #e5e5e9;
84
+ --components-alert-alertbox-information-contrast-texttoast: #181c56;
85
+ --components-alert-alertbox-information-standard-border: #067eb2;
86
+ --components-alert-alertbox-information-standard-filldefault: rgba(45, 152, 210, 0.2);
87
+ --components-alert-alertbox-information-standard-filltoast: #acd7f1;
88
+ --components-alert-alertbox-information-standard-icondefault: #acd7f1;
89
+ --components-alert-alertbox-information-standard-icontoast: #067eb2;
90
+ --components-alert-alertbox-information-standard-textdefault: #e5e5e9;
91
+ --components-alert-alertbox-information-standard-texttoast: #181c56;
92
+ --components-alert-alertbox-negative-contrast-border: #d31b1b;
93
+ --components-alert-alertbox-negative-contrast-filldefault: rgba(255, 148, 148, 0.2);
94
+ --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
95
+ --components-alert-alertbox-negative-contrast-icondefault: #ff9494;
96
+ --components-alert-alertbox-negative-contrast-icontoast: #181c56;
97
+ --components-alert-alertbox-negative-contrast-textdefault: #e5e5e9;
98
+ --components-alert-alertbox-negative-contrast-texttoast: #181c56;
99
+ --components-alert-alertbox-negative-standard-border: #d31b1b;
100
+ --components-alert-alertbox-negative-standard-filldefault: rgba(255, 148, 148, 0.2);
101
+ --components-alert-alertbox-negative-standard-filltoast: #ff9494;
102
+ --components-alert-alertbox-negative-standard-icondefault: #ff9494;
103
+ --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
104
+ --components-alert-alertbox-negative-standard-textdefault: #e5e5e9;
105
+ --components-alert-alertbox-negative-standard-texttoast: #181c56;
106
+ --components-alert-alertbox-success-contrast-border: #1a8e60;
107
+ --components-alert-alertbox-success-contrast-filldefault: rgba(90, 195, 154, 0.2);
108
+ --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
109
+ --components-alert-alertbox-success-contrast-icondefault: #9cd9c2;
110
+ --components-alert-alertbox-success-contrast-icontoast: #181c56;
111
+ --components-alert-alertbox-success-contrast-textdefault: #e5e5e9;
112
+ --components-alert-alertbox-success-contrast-texttoast: #181c56;
113
+ --components-alert-alertbox-success-standard-border: #1a8e60;
114
+ --components-alert-alertbox-success-standard-filldefault: rgba(90, 195, 154, 0.2);
115
+ --components-alert-alertbox-success-standard-filltoast: #9cd9c2;
116
+ --components-alert-alertbox-success-standard-icondefault: #9cd9c2;
117
+ --components-alert-alertbox-success-standard-icontoast: #1a8e60;
118
+ --components-alert-alertbox-success-standard-textdefault: #e5e5e9;
119
+ --components-alert-alertbox-success-standard-texttoast: #181c56;
120
+ --components-alert-alertbox-warning-contrast-border: #e9b10c;
121
+ --components-alert-alertbox-warning-contrast-filldefault: rgba(255, 224, 130, 0.2509803922);
122
+ --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
123
+ --components-alert-alertbox-warning-contrast-icondefault: #181c56;
124
+ --components-alert-alertbox-warning-contrast-icontoast: #181c56;
125
+ --components-alert-alertbox-warning-contrast-textdefault: #e5e5e9;
126
+ --components-alert-alertbox-warning-contrast-textdefault2: #e5e5e9;
127
+ --components-alert-alertbox-warning-standard-border: #e9b10c;
128
+ --components-alert-alertbox-warning-standard-filldefault: rgba(255, 224, 130, 0.2509803922);
129
+ --components-alert-alertbox-warning-standard-filltoast: #ffeeb3;
130
+ --components-alert-alertbox-warning-standard-icondefault: #ffeeb3;
131
+ --components-alert-alertbox-warning-standard-icontoast: #181c56;
132
+ --components-alert-alertbox-warning-standard-textdefault: #e5e5e9;
133
+ --components-alert-alertbox-warning-standard-texttoast: #181c56;
134
+ --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
135
+ --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
136
+ --components-alert-copyabletext-contrast-fill: #393a49;
137
+ --components-alert-copyabletext-contrast-icon: #e5e5e9;
138
+ --components-alert-copyabletext-contrast-text: #e5e5e9;
139
+ --components-alert-copyabletext-standard-border: rgba(255, 255, 255, 0);
140
+ --components-alert-copyabletext-standard-border-interactive: #e5e5e9;
141
+ --components-alert-copyabletext-standard-fill: #393a49;
142
+ --components-alert-copyabletext-standard-icon: #e5e5e9;
143
+ --components-alert-copyabletext-standard-text: #e5e5e9;
144
+ }
145
+
146
+ /* DO NOT CHANGE!*/
147
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
148
+ /* DO NOT CHANGE!*/
149
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
150
+ [data-color-mode=light],
151
+ :root {
152
+ --basecolors-frame-contrast: #181c56;
153
+ --basecolors-frame-contrastalt: #393d79;
154
+ --basecolors-frame-contrastalt-2: #292b6a;
155
+ --basecolors-frame-default: #ffffff;
156
+ --basecolors-frame-elevated: #ffffff;
157
+ --basecolors-frame-elevatedalt: #f6f6f9;
158
+ --basecolors-frame-subdued: #d9dae8;
159
+ --basecolors-frame-tint: #f6f6f9;
160
+ --basecolors-shape-accent: #181c56;
161
+ --basecolors-shape-bicycle-contrast: #00db9b;
162
+ --basecolors-shape-bicycle-default: #388f76;
163
+ --basecolors-shape-bus-contrast: #ff6392;
164
+ --basecolors-shape-bus-default: #c5044e;
165
+ --basecolors-shape-cableway-contrast: #b482fb;
166
+ --basecolors-shape-cableway-default: #78469a;
167
+ --basecolors-shape-disabled: #6e6f73;
168
+ --basecolors-shape-disabledalt: #b6b8ba;
169
+ --basecolors-shape-ferry-contrast: #6fdfff;
170
+ --basecolors-shape-ferry-default: #0c6693;
171
+ --basecolors-shape-funicular-contrast: #b482fb;
172
+ --basecolors-shape-funicular-default: #78469a;
173
+ --basecolors-shape-helicopter-contrast: #fbafea;
174
+ --basecolors-shape-helicopter-default: #800664;
175
+ --basecolors-shape-highlight: #ff5959;
176
+ --basecolors-shape-light: #ffffff;
177
+ --basecolors-shape-mask: #ffffff;
178
+ --basecolors-shape-maskalt: #ffffff;
179
+ --basecolors-shape-metro-contrast: #f08901;
180
+ --basecolors-shape-metro-default: #bf5826;
181
+ --basecolors-shape-mobility-contrast: #00db9b;
182
+ --basecolors-shape-mobility-default: #388f76;
183
+ --basecolors-shape-plane-contrast: #fbafea;
184
+ --basecolors-shape-plane-default: #800664;
185
+ --basecolors-shape-subdued: #626493;
186
+ --basecolors-shape-subduedalt: #d9dae8;
187
+ --basecolors-shape-taxi-contrast: #ffe082;
188
+ --basecolors-shape-taxi-default: #3d3e40;
189
+ --basecolors-shape-train-contrast: #42a5f5;
190
+ --basecolors-shape-train-default: #00367f;
191
+ --basecolors-shape-tram-contrast: #b482fb;
192
+ --basecolors-shape-tram-default: #78469a;
193
+ --basecolors-shape-walk-contrast: #8284ab;
194
+ --basecolors-shape-walk-default: #8d8e9c;
195
+ --basecolors-shape-airportlinkbus-contrast: #fbafea;
196
+ --basecolors-shape-airportlinkbus-default: #800664;
197
+ --basecolors-shape-airportlinkrail-contrast: #fbafea;
198
+ --basecolors-shape-airportlinkrail-default: #800664;
199
+ --basecolors-stroke-contrast: #aeb7e2;
200
+ --basecolors-stroke-default: #181c56;
201
+ --basecolors-stroke-disabled: #949699;
202
+ --basecolors-stroke-focus-contrast: #aeb7e2;
203
+ --basecolors-stroke-focus-standard: #181c56;
204
+ --basecolors-stroke-highlight: #ff5959;
205
+ --basecolors-stroke-light: #ffffff;
206
+ --basecolors-stroke-subdued: #8284ab;
207
+ --basecolors-stroke-subduedalt: #e3e6e8;
208
+ --basecolors-text-accent: #181c56;
209
+ --basecolors-text-disabled: #6e6f73;
210
+ --basecolors-text-disabledalt: #b6b8ba;
211
+ --basecolors-text-highlight: #ff5959;
212
+ --basecolors-text-light: #ffffff;
213
+ --basecolors-text-subdued: #626493;
214
+ --basecolors-text-subduedalt: #d9dae8;
215
+ }
216
+
217
+ [data-color-mode=dark] {
218
+ --basecolors-frame-contrast: #212233;
219
+ --basecolors-frame-contrastalt: #141527;
220
+ --basecolors-frame-contrastalt-2: #08091c;
221
+ --basecolors-frame-default: #08091c;
222
+ --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
223
+ --basecolors-frame-elevatedalt: #464755;
224
+ --basecolors-frame-subdued: #2d2e3e;
225
+ --basecolors-frame-tint: #141527;
226
+ --basecolors-shape-accent: #e5e5e9;
227
+ --basecolors-shape-bicycle-contrast: #4db295;
228
+ --basecolors-shape-bicycle-default: #4db295;
229
+ --basecolors-shape-bus-contrast: #ef7398;
230
+ --basecolors-shape-bus-default: #ef7398;
231
+ --basecolors-shape-cableway-contrast: #b898e5;
232
+ --basecolors-shape-cableway-default: #b898e5;
233
+ --basecolors-shape-disabled: #b6b8ba;
234
+ --basecolors-shape-disabledalt: #b3b4bd;
235
+ --basecolors-shape-ferry-contrast: #8ccfe2;
236
+ --basecolors-shape-ferry-default: #8ccfe2;
237
+ --basecolors-shape-funicular-contrast: #b898e5;
238
+ --basecolors-shape-funicular-default: #b898e5;
239
+ --basecolors-shape-helicopter-contrast: #f2b8e5;
240
+ --basecolors-shape-helicopter-default: #f2b8e5;
241
+ --basecolors-shape-highlight: #ff9494;
242
+ --basecolors-shape-light: #e5e5e9;
243
+ --basecolors-shape-mask: #2d2e3e;
244
+ --basecolors-shape-maskalt: #393a49;
245
+ --basecolors-shape-metro-contrast: #dd973c;
246
+ --basecolors-shape-metro-default: #dd973c;
247
+ --basecolors-shape-mobility-contrast: #4db295;
248
+ --basecolors-shape-mobility-default: #4db295;
249
+ --basecolors-shape-plane-contrast: #f2b8e5;
250
+ --basecolors-shape-plane-default: #f2b8e5;
251
+ --basecolors-shape-subdued: #b3b4bd;
252
+ --basecolors-shape-subduedalt: #b3b4bd;
253
+ --basecolors-shape-taxi-contrast: #ffe082;
254
+ --basecolors-shape-taxi-default: #ffe082;
255
+ --basecolors-shape-train-contrast: #60a2d7;
256
+ --basecolors-shape-train-default: #60a2d7;
257
+ --basecolors-shape-tram-contrast: #b898e5;
258
+ --basecolors-shape-tram-default: #b898e5;
259
+ --basecolors-shape-walk-contrast: #8d8e9c;
260
+ --basecolors-shape-walk-default: #8d8e9c;
261
+ --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
262
+ --basecolors-shape-airportlinkbus-default: #f2b8e5;
263
+ --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
264
+ --basecolors-shape-airportlinkrail-default: #f2b8e5;
265
+ --basecolors-stroke-contrast: #aeb7e2;
266
+ --basecolors-stroke-default: #b3b4bd;
267
+ --basecolors-stroke-disabled: #e3e6e8;
268
+ --basecolors-stroke-focus-contrast: #aeb7e2;
269
+ --basecolors-stroke-focus-standard: #aeb7e2;
270
+ --basecolors-stroke-highlight: #ff9494;
271
+ --basecolors-stroke-light: #b3b4bd;
272
+ --basecolors-stroke-subdued: #81828f;
273
+ --basecolors-stroke-subduedalt: #949699;
274
+ --basecolors-text-accent: #e5e5e9;
275
+ --basecolors-text-disabled: #b6b8ba;
276
+ --basecolors-text-disabledalt: #b6b8ba;
277
+ --basecolors-text-highlight: #ff9494;
278
+ --basecolors-text-light: #e5e5e9;
279
+ --basecolors-text-subdued: #b3b4bd;
280
+ --basecolors-text-subduedalt: #b3b4bd;
281
+ }
282
+
283
+ :root {
284
+ --eds-alert: 1;
285
+ }/* DO NOT CHANGE!*/
286
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
287
  .eds-alert-box {
4
288
  border: 0.0625rem solid transparent;
5
289
  border-radius: 0.25rem;
@@ -24,7 +308,6 @@
24
308
  @media screen and (min-width: 50rem) {
25
309
  .eds-alert-box--toast {
26
310
  min-width: 18rem;
27
- width: -moz-fit-content;
28
311
  width: fit-content;
29
312
  }
30
313
  }
@@ -35,7 +318,6 @@
35
318
  font-size: 0.875rem;
36
319
  }
37
320
  .eds-alert-box--fit-content {
38
- width: -moz-fit-content;
39
321
  width: fit-content;
40
322
  }
41
323
  .eds-alert-box--success {
@@ -182,8 +464,7 @@
182
464
  .eds-alert-box__content {
183
465
  flex: 1;
184
466
  word-break: break-word;
185
- -webkit-hyphens: auto;
186
- hyphens: auto;
467
+ hyphens: auto;
187
468
  }
188
469
  .eds-alert-box__content--no-children {
189
470
  display: flex;
@@ -201,9 +482,7 @@
201
482
  .eds-alert-box .eds-alert-box__close-button {
202
483
  margin-top: -0.3125rem;
203
484
  margin-left: 0.5rem;
204
- height: -moz-fit-content;
205
485
  height: fit-content;
206
- width: -moz-fit-content;
207
486
  width: fit-content;
208
487
  }
209
488
  .eds-contrast .eds-alert-box .eds-alert-box__close-button {
@@ -211,517 +490,224 @@
211
490
  }
212
491
  .eds-contrast .eds-alert-box .eds-alert-box__close-button:hover {
213
492
  background: var(--components-button-iconbutton-standard-hover);
214
- }
215
- .eds-contrast .eds-alert-box .eds-alert-box__close-button:active {
216
- background: var(--components-button-iconbutton-standard-active);
217
- }
218
- .eds-contrast .eds-alert-box .eds-alert-box__close-button:focus-visible {
219
- outline: 2px solid #181c56;
220
- outline-color: var(--basecolors-stroke-focus-standard);
221
- }
222
- .eds-contrast .eds-alert-box .eds-alert-box__tooltip {
223
- background: var(--components-tooltip-tooltip-standard-fill);
224
- color: var(--components-tooltip-tooltip-standard-text);
225
- }
226
- .eds-contrast .eds-alert-box .eds-alert-box__tooltip::after {
227
- background: var(--components-tooltip-tooltip-standard-fill);
228
- }
229
- /* DO NOT CHANGE!*/
230
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
231
- .eds-toast-container {
232
- position: fixed;
233
- z-index: 50;
234
- display: flex;
235
- align-items: flex-end;
236
- flex-direction: column;
237
- }
238
- .eds-toast-container .eds-alert-box__close-button {
239
- position: absolute;
240
- top: 0.75rem;
241
- right: 0.75rem;
242
- }
243
- .eds-toast-container--bottom-right {
244
- bottom: 1.5rem;
245
- right: 1.5rem;
246
- left: 1.5rem;
247
- }
248
- .eds-toast-container--top-right {
249
- top: 1.5rem;
250
- right: 1.5rem;
251
- left: 1.5rem;
252
- }
253
- .eds-toast-container > * + * {
254
- margin-top: 1rem;
255
- }
256
- @media screen and (min-width: 50rem) {
257
- .eds-toast-container {
258
- left: auto;
259
- left: initial;
260
- }
261
- }
262
-
263
- @keyframes bounceInRight {
264
- from, 60%, 75%, 90%, to {
265
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
266
- }
267
- from {
268
- opacity: 0;
269
- transform: translate3d(3000px, 0, 0) scaleX(3);
270
- }
271
- 60% {
272
- opacity: 1;
273
- transform: translate3d(-25px, 0, 0) scaleX(1);
274
- }
275
- 75% {
276
- transform: translate3d(10px, 0, 0) scaleX(0.98);
277
- }
278
- 90% {
279
- transform: translate3d(-5px, 0, 0) scaleX(0.995);
280
- }
281
- to {
282
- transform: translate3d(0, 0, 0);
283
- }
284
- }
285
- @keyframes bounceOutRight {
286
- 20% {
287
- opacity: 1;
288
- transform: translate3d(-20px, 0, 0) scaleX(0.9);
289
- }
290
- to {
291
- opacity: 0;
292
- transform: translate3d(2000px, 0, 0) scaleX(2);
293
- }
294
- }
295
- /* DO NOT CHANGE!*/
296
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
297
- .eds-copyable-text,
298
- .eds-contrast .eds-copyable-text {
299
- -webkit-appearance: none;
300
- -moz-appearance: none;
301
- appearance: none;
302
- background: none;
303
- border: 0;
304
- border-radius: 0;
305
- color: inherit;
306
- cursor: pointer;
307
- display: block;
308
- font-size: inherit;
309
- padding: 0;
310
- position: relative;
311
- margin: 0 0 1rem 0;
312
- text-align: left;
313
- width: 100%;
314
- }
315
- .eds-copyable-text__preformatted-text,
316
- .eds-contrast .eds-copyable-text__preformatted-text {
317
- margin: 0;
318
- display: flex;
319
- justify-content: space-between;
320
- align-items: center;
321
- transition: border-color 0.1s;
322
- }
323
- .eds-copyable-text__preformatted-text:hover,
324
- .eds-contrast .eds-copyable-text__preformatted-text:hover {
325
- border-color: var(--components-alert-copyabletext-standard-border-interactive);
326
- }
327
- .eds-contrast .eds-copyable-text__preformatted-text:hover,
328
- .eds-contrast .eds-contrast .eds-copyable-text__preformatted-text:hover {
329
- border-color: var(--components-alert-copyabletext-contrast-border-interactive);
330
- }
331
- .eds-copyable-text__displayed-text,
332
- .eds-contrast .eds-copyable-text__displayed-text {
333
- overflow-x: hidden;
334
- text-overflow: ellipsis;
335
- text-wrap: nowrap;
336
- }
337
- .eds-copyable-text .eds-copyable-text__button,
338
- .eds-copyable-text .eds-contrast .eds-copyable-text__button,
339
- .eds-contrast .eds-copyable-text .eds-copyable-text__button,
340
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button {
341
- color: var(--components-alert-copyabletext-standard-text);
342
- margin: -0.5rem;
343
- margin-left: 0.5rem;
344
- width: -moz-fit-content;
345
- width: fit-content;
346
- height: -moz-fit-content;
347
- height: fit-content;
348
- }
349
- .eds-copyable-text .eds-copyable-text__button, .eds-contrast .eds-copyable-text .eds-copyable-text__button,
350
- .eds-copyable-text .eds-contrast .eds-copyable-text__button,
351
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button,
352
- .eds-contrast .eds-copyable-text .eds-copyable-text__button,
353
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button,
354
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button,
355
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button {
356
- color: var(--components-alert-copyabletext-standard-text);
357
- }
358
- .eds-copyable-text .eds-copyable-text__button:hover, .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
359
- .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
360
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
361
- .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
362
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
363
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
364
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover {
365
- background: var(--components-button-iconbutton-standard-hover);
366
- }
367
- .eds-copyable-text .eds-copyable-text__button:active, .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
368
- .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
369
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
370
- .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
371
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
372
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
373
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active {
374
- background: var(--components-button-iconbutton-standard-active);
375
- }
376
- .eds-copyable-text .eds-copyable-text__button:focus-visible, .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
377
- .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
378
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
379
- .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
380
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
381
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
382
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
383
- outline: 2px solid #181c56;
384
- outline-color: var(--basecolors-stroke-focus-standard);
385
- outline-offset: 0.125rem;
386
- }
387
- .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible, .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
388
- .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
389
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
390
- .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
391
- .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
392
- .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
393
- .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
493
+ }
494
+ .eds-contrast .eds-alert-box .eds-alert-box__close-button:active {
495
+ background: var(--components-button-iconbutton-standard-active);
496
+ }
497
+ .eds-contrast .eds-alert-box .eds-alert-box__close-button:focus-visible {
498
+ outline: 2px solid #181c56;
394
499
  outline-color: var(--basecolors-stroke-focus-standard);
395
500
  }
396
- /* DO NOT CHANGE!*/
501
+ .eds-contrast .eds-alert-box .eds-alert-box__tooltip {
502
+ background: var(--components-tooltip-tooltip-standard-fill);
503
+ color: var(--components-tooltip-tooltip-standard-text);
504
+ }
505
+ .eds-contrast .eds-alert-box .eds-alert-box__tooltip::after {
506
+ background: var(--components-tooltip-tooltip-standard-fill);
507
+ }/* DO NOT CHANGE!*/
397
508
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
398
- .eds-expandable-alert-box .eds-alert-box__content {
399
- width: 100%;
509
+ .eds-toast-container {
510
+ position: fixed;
511
+ z-index: 50;
512
+ display: flex;
513
+ align-items: flex-end;
514
+ flex-direction: column;
400
515
  }
401
- .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
402
- margin-top: 0.0625rem;
516
+ .eds-toast-container .eds-alert-box__close-button {
517
+ position: absolute;
518
+ top: 0.75rem;
519
+ right: 0.75rem;
403
520
  }
404
- @media screen and (min-width: 50rem) {
405
- .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
406
- margin-top: -0.375rem;
407
- }
521
+ .eds-toast-container--bottom-right {
522
+ bottom: 1.5rem;
523
+ right: 1.5rem;
524
+ left: 1.5rem;
408
525
  }
409
- .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
410
- margin-top: 0.125rem;
526
+ .eds-toast-container--top-right {
527
+ top: 1.5rem;
528
+ right: 1.5rem;
529
+ left: 1.5rem;
530
+ }
531
+ .eds-toast-container > * + * {
532
+ margin-top: 1rem;
411
533
  }
412
534
  @media screen and (min-width: 50rem) {
413
- .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
414
- margin-top: 0.125rem;
535
+ .eds-toast-container {
536
+ left: initial;
415
537
  }
416
538
  }
417
- .eds-expandable-alert-box__title {
418
- display: flex;
419
- justify-content: space-between;
420
- align-items: baseline;
539
+
540
+ @keyframes bounceInRight {
541
+ from, 60%, 75%, 90%, to {
542
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
543
+ }
544
+ from {
545
+ opacity: 0;
546
+ transform: translate3d(3000px, 0, 0) scaleX(3);
547
+ }
548
+ 60% {
549
+ opacity: 1;
550
+ transform: translate3d(-25px, 0, 0) scaleX(1);
551
+ }
552
+ 75% {
553
+ transform: translate3d(10px, 0, 0) scaleX(0.98);
554
+ }
555
+ 90% {
556
+ transform: translate3d(-5px, 0, 0) scaleX(0.995);
557
+ }
558
+ to {
559
+ transform: translate3d(0, 0, 0);
560
+ }
421
561
  }
422
- .eds-expandable-alert-box__button {
423
- color: var(--components-button-iconbutton-standard-text);
562
+ @keyframes bounceOutRight {
563
+ 20% {
564
+ opacity: 1;
565
+ transform: translate3d(-20px, 0, 0) scaleX(0.9);
566
+ }
567
+ to {
568
+ opacity: 0;
569
+ transform: translate3d(2000px, 0, 0) scaleX(2);
570
+ }
571
+ }/* DO NOT CHANGE!*/
572
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
573
+ .eds-copyable-text,
574
+ .eds-contrast .eds-copyable-text {
575
+ appearance: none;
424
576
  background: none;
425
- border: none;
577
+ border: 0;
578
+ border-radius: 0;
579
+ color: inherit;
426
580
  cursor: pointer;
427
- font-family: inherit;
581
+ display: block;
428
582
  font-size: inherit;
429
- line-height: 1.5rem;
430
- padding: 0 0.25rem;
431
- flex-shrink: 0;
432
- }
433
- .eds-expandable-alert-box__button:focus-visible {
434
- outline: 2px solid #181c56;
435
- outline-color: var(--basecolors-stroke-focus-standard);
436
- outline-offset: 0.125rem;
437
- }
438
- .eds-expandable-alert-box__button .eds-icon {
439
- font-size: 1rem;
440
- padding-left: 0.25rem;
441
- color: var(--components-button-iconbutton-standard-text);
442
- }
443
- /* DO NOT CHANGE!*/
444
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
445
- /* DO NOT CHANGE!*/
446
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
447
- /* DO NOT CHANGE!*/
448
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
449
- [data-color-mode=light],
450
- :root {
451
- --components-alert-alertbox-information-contrast-border: #067eb2;
452
- --components-alert-alertbox-information-contrast-filldefault: #acd7f1;
453
- --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
454
- --components-alert-alertbox-information-contrast-icondefault: #181c56;
455
- --components-alert-alertbox-information-contrast-icontoast: #181c56;
456
- --components-alert-alertbox-information-contrast-textdefault: #181c56;
457
- --components-alert-alertbox-information-contrast-texttoast: #181c56;
458
- --components-alert-alertbox-information-standard-border: #067eb2;
459
- --components-alert-alertbox-information-standard-filldefault: #e1eff8;
460
- --components-alert-alertbox-information-standard-filltoast: #e1eff8;
461
- --components-alert-alertbox-information-standard-icondefault: #067eb2;
462
- --components-alert-alertbox-information-standard-icontoast: #067eb2;
463
- --components-alert-alertbox-information-standard-textdefault: #181c56;
464
- --components-alert-alertbox-information-standard-texttoast: #181c56;
465
- --components-alert-alertbox-negative-contrast-border: #d31b1b;
466
- --components-alert-alertbox-negative-contrast-filldefault: #ff9494;
467
- --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
468
- --components-alert-alertbox-negative-contrast-icondefault: #181c56;
469
- --components-alert-alertbox-negative-contrast-icontoast: #181c56;
470
- --components-alert-alertbox-negative-contrast-textdefault: #181c56;
471
- --components-alert-alertbox-negative-contrast-texttoast: #181c56;
472
- --components-alert-alertbox-negative-standard-border: #d31b1b;
473
- --components-alert-alertbox-negative-standard-filldefault: #ffcece;
474
- --components-alert-alertbox-negative-standard-filltoast: #ffcece;
475
- --components-alert-alertbox-negative-standard-icondefault: #d31b1b;
476
- --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
477
- --components-alert-alertbox-negative-standard-textdefault: #181c56;
478
- --components-alert-alertbox-negative-standard-texttoast: #181c56;
479
- --components-alert-alertbox-success-contrast-border: #1a8e60;
480
- --components-alert-alertbox-success-contrast-filldefault: #9cd9c2;
481
- --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
482
- --components-alert-alertbox-success-contrast-icondefault: #181c56;
483
- --components-alert-alertbox-success-contrast-icontoast: #181c56;
484
- --components-alert-alertbox-success-contrast-textdefault: #181c56;
485
- --components-alert-alertbox-success-contrast-texttoast: #181c56;
486
- --components-alert-alertbox-success-standard-border: #1a8e60;
487
- --components-alert-alertbox-success-standard-filldefault: #d0f1e3;
488
- --components-alert-alertbox-success-standard-filltoast: #d0f1e3;
489
- --components-alert-alertbox-success-standard-icondefault: #1a8e60;
490
- --components-alert-alertbox-success-standard-icontoast: #1a8e60;
491
- --components-alert-alertbox-success-standard-textdefault: #181c56;
492
- --components-alert-alertbox-success-standard-texttoast: #181c56;
493
- --components-alert-alertbox-warning-contrast-border: #e9b10c;
494
- --components-alert-alertbox-warning-contrast-filldefault: #ffeeb3;
495
- --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
496
- --components-alert-alertbox-warning-contrast-icondefault: #181c56;
497
- --components-alert-alertbox-warning-contrast-icontoast: #181c56;
498
- --components-alert-alertbox-warning-contrast-textdefault: #181c56;
499
- --components-alert-alertbox-warning-contrast-textdefault2: #181c56;
500
- --components-alert-alertbox-warning-standard-border: #e9b10c;
501
- --components-alert-alertbox-warning-standard-filldefault: #fff4cd;
502
- --components-alert-alertbox-warning-standard-filltoast: #fff4cd;
503
- --components-alert-alertbox-warning-standard-icondefault: #181c56;
504
- --components-alert-alertbox-warning-standard-icontoast: #181c56;
505
- --components-alert-alertbox-warning-standard-textdefault: #181c56;
506
- --components-alert-alertbox-warning-standard-texttoast: #181c56;
507
- --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
508
- --components-alert-copyabletext-contrast-border-interactive: #aeb7e2;
509
- --components-alert-copyabletext-contrast-fill: #f6f6f9;
510
- --components-alert-copyabletext-contrast-icon: #181c56;
511
- --components-alert-copyabletext-contrast-text: #181c56;
512
- --components-alert-copyabletext-standard-border: rgba(84, 86, 140, 0.4);
513
- --components-alert-copyabletext-standard-border-interactive: #181c56;
514
- --components-alert-copyabletext-standard-fill: #f6f6f9;
515
- --components-alert-copyabletext-standard-icon: #181c56;
516
- --components-alert-copyabletext-standard-text: #181c56;
517
- }
518
-
519
- [data-color-mode=dark] {
520
- --components-alert-alertbox-information-contrast-border: #067eb2;
521
- --components-alert-alertbox-information-contrast-filldefault: rgba(45, 152, 210, 0.2);
522
- --components-alert-alertbox-information-contrast-filltoast: #acd7f1;
523
- --components-alert-alertbox-information-contrast-icondefault: #acd7f1;
524
- --components-alert-alertbox-information-contrast-icontoast: #181c56;
525
- --components-alert-alertbox-information-contrast-textdefault: #e5e5e9;
526
- --components-alert-alertbox-information-contrast-texttoast: #181c56;
527
- --components-alert-alertbox-information-standard-border: #067eb2;
528
- --components-alert-alertbox-information-standard-filldefault: rgba(45, 152, 210, 0.2);
529
- --components-alert-alertbox-information-standard-filltoast: #acd7f1;
530
- --components-alert-alertbox-information-standard-icondefault: #acd7f1;
531
- --components-alert-alertbox-information-standard-icontoast: #067eb2;
532
- --components-alert-alertbox-information-standard-textdefault: #e5e5e9;
533
- --components-alert-alertbox-information-standard-texttoast: #181c56;
534
- --components-alert-alertbox-negative-contrast-border: #d31b1b;
535
- --components-alert-alertbox-negative-contrast-filldefault: rgba(255, 148, 148, 0.2);
536
- --components-alert-alertbox-negative-contrast-filltoast: #ff9494;
537
- --components-alert-alertbox-negative-contrast-icondefault: #ff9494;
538
- --components-alert-alertbox-negative-contrast-icontoast: #181c56;
539
- --components-alert-alertbox-negative-contrast-textdefault: #e5e5e9;
540
- --components-alert-alertbox-negative-contrast-texttoast: #181c56;
541
- --components-alert-alertbox-negative-standard-border: #d31b1b;
542
- --components-alert-alertbox-negative-standard-filldefault: rgba(255, 148, 148, 0.2);
543
- --components-alert-alertbox-negative-standard-filltoast: #ff9494;
544
- --components-alert-alertbox-negative-standard-icondefault: #ff9494;
545
- --components-alert-alertbox-negative-standard-icontoast: #d31b1b;
546
- --components-alert-alertbox-negative-standard-textdefault: #e5e5e9;
547
- --components-alert-alertbox-negative-standard-texttoast: #181c56;
548
- --components-alert-alertbox-success-contrast-border: #1a8e60;
549
- --components-alert-alertbox-success-contrast-filldefault: rgba(90, 195, 154, 0.2);
550
- --components-alert-alertbox-success-contrast-filltoast: #9cd9c2;
551
- --components-alert-alertbox-success-contrast-icondefault: #9cd9c2;
552
- --components-alert-alertbox-success-contrast-icontoast: #181c56;
553
- --components-alert-alertbox-success-contrast-textdefault: #e5e5e9;
554
- --components-alert-alertbox-success-contrast-texttoast: #181c56;
555
- --components-alert-alertbox-success-standard-border: #1a8e60;
556
- --components-alert-alertbox-success-standard-filldefault: rgba(90, 195, 154, 0.2);
557
- --components-alert-alertbox-success-standard-filltoast: #9cd9c2;
558
- --components-alert-alertbox-success-standard-icondefault: #9cd9c2;
559
- --components-alert-alertbox-success-standard-icontoast: #1a8e60;
560
- --components-alert-alertbox-success-standard-textdefault: #e5e5e9;
561
- --components-alert-alertbox-success-standard-texttoast: #181c56;
562
- --components-alert-alertbox-warning-contrast-border: #e9b10c;
563
- --components-alert-alertbox-warning-contrast-filldefault: rgba(255, 224, 130, 0.2509803922);
564
- --components-alert-alertbox-warning-contrast-filltoast: #ffeeb3;
565
- --components-alert-alertbox-warning-contrast-icondefault: #181c56;
566
- --components-alert-alertbox-warning-contrast-icontoast: #181c56;
567
- --components-alert-alertbox-warning-contrast-textdefault: #e5e5e9;
568
- --components-alert-alertbox-warning-contrast-textdefault2: #e5e5e9;
569
- --components-alert-alertbox-warning-standard-border: #e9b10c;
570
- --components-alert-alertbox-warning-standard-filldefault: rgba(255, 224, 130, 0.2509803922);
571
- --components-alert-alertbox-warning-standard-filltoast: #ffeeb3;
572
- --components-alert-alertbox-warning-standard-icondefault: #ffeeb3;
573
- --components-alert-alertbox-warning-standard-icontoast: #181c56;
574
- --components-alert-alertbox-warning-standard-textdefault: #e5e5e9;
575
- --components-alert-alertbox-warning-standard-texttoast: #181c56;
576
- --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
577
- --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
578
- --components-alert-copyabletext-contrast-fill: #393a49;
579
- --components-alert-copyabletext-contrast-icon: #e5e5e9;
580
- --components-alert-copyabletext-contrast-text: #e5e5e9;
581
- --components-alert-copyabletext-standard-border: rgba(255, 255, 255, 0);
582
- --components-alert-copyabletext-standard-border-interactive: #e5e5e9;
583
- --components-alert-copyabletext-standard-fill: #393a49;
584
- --components-alert-copyabletext-standard-icon: #e5e5e9;
585
- --components-alert-copyabletext-standard-text: #e5e5e9;
583
+ padding: 0;
584
+ position: relative;
585
+ margin: 0 0 1rem 0;
586
+ text-align: left;
587
+ width: 100%;
586
588
  }
587
-
588
- /* DO NOT CHANGE!*/
589
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
590
- /* DO NOT CHANGE!*/
589
+ .eds-copyable-text__preformatted-text,
590
+ .eds-contrast .eds-copyable-text__preformatted-text {
591
+ margin: 0;
592
+ display: flex;
593
+ justify-content: space-between;
594
+ align-items: center;
595
+ transition: border-color 0.1s;
596
+ }
597
+ .eds-copyable-text__preformatted-text:hover,
598
+ .eds-contrast .eds-copyable-text__preformatted-text:hover {
599
+ border-color: var(--components-alert-copyabletext-standard-border-interactive);
600
+ }
601
+ .eds-contrast .eds-copyable-text__preformatted-text:hover,
602
+ .eds-contrast .eds-contrast .eds-copyable-text__preformatted-text:hover {
603
+ border-color: var(--components-alert-copyabletext-contrast-border-interactive);
604
+ }
605
+ .eds-copyable-text__displayed-text,
606
+ .eds-contrast .eds-copyable-text__displayed-text {
607
+ overflow-x: hidden;
608
+ text-overflow: ellipsis;
609
+ text-wrap: nowrap;
610
+ }
611
+ .eds-copyable-text .eds-copyable-text__button,
612
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button,
613
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button,
614
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button {
615
+ color: var(--components-alert-copyabletext-standard-text);
616
+ margin: -0.5rem;
617
+ margin-left: 0.5rem;
618
+ width: fit-content;
619
+ height: fit-content;
620
+ }
621
+ .eds-copyable-text .eds-copyable-text__button, .eds-contrast .eds-copyable-text .eds-copyable-text__button,
622
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button,
623
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button,
624
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button,
625
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button,
626
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button,
627
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button {
628
+ color: var(--components-alert-copyabletext-standard-text);
629
+ }
630
+ .eds-copyable-text .eds-copyable-text__button:hover, .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
631
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
632
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
633
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
634
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:hover,
635
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover,
636
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:hover {
637
+ background: var(--components-button-iconbutton-standard-hover);
638
+ }
639
+ .eds-copyable-text .eds-copyable-text__button:active, .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
640
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
641
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
642
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
643
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:active,
644
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active,
645
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:active {
646
+ background: var(--components-button-iconbutton-standard-active);
647
+ }
648
+ .eds-copyable-text .eds-copyable-text__button:focus-visible, .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
649
+ .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
650
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
651
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
652
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
653
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
654
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
655
+ outline: 2px solid #181c56;
656
+ outline-color: var(--basecolors-stroke-focus-standard);
657
+ outline-offset: 0.125rem;
658
+ }
659
+ .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible, .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
660
+ .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
661
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
662
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
663
+ .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-copyable-text__button:focus-visible,
664
+ .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible,
665
+ .eds-contrast .eds-contrast .eds-contrast .eds-copyable-text .eds-contrast .eds-copyable-text__button:focus-visible {
666
+ outline-color: var(--basecolors-stroke-focus-standard);
667
+ }/* DO NOT CHANGE!*/
591
668
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
592
- [data-color-mode=light],
593
- :root {
594
- --basecolors-frame-contrast: #181c56;
595
- --basecolors-frame-contrastalt: #393d79;
596
- --basecolors-frame-contrastalt-2: #292b6a;
597
- --basecolors-frame-default: #ffffff;
598
- --basecolors-frame-elevated: #ffffff;
599
- --basecolors-frame-elevatedalt: #f6f6f9;
600
- --basecolors-frame-subdued: #d9dae8;
601
- --basecolors-frame-tint: #f6f6f9;
602
- --basecolors-shape-accent: #181c56;
603
- --basecolors-shape-bicycle-contrast: #00db9b;
604
- --basecolors-shape-bicycle-default: #388f76;
605
- --basecolors-shape-bus-contrast: #ff6392;
606
- --basecolors-shape-bus-default: #c5044e;
607
- --basecolors-shape-cableway-contrast: #b482fb;
608
- --basecolors-shape-cableway-default: #78469a;
609
- --basecolors-shape-disabled: #6e6f73;
610
- --basecolors-shape-disabledalt: #b6b8ba;
611
- --basecolors-shape-ferry-contrast: #6fdfff;
612
- --basecolors-shape-ferry-default: #0c6693;
613
- --basecolors-shape-funicular-contrast: #b482fb;
614
- --basecolors-shape-funicular-default: #78469a;
615
- --basecolors-shape-helicopter-contrast: #fbafea;
616
- --basecolors-shape-helicopter-default: #800664;
617
- --basecolors-shape-highlight: #ff5959;
618
- --basecolors-shape-light: #ffffff;
619
- --basecolors-shape-mask: #ffffff;
620
- --basecolors-shape-maskalt: #ffffff;
621
- --basecolors-shape-metro-contrast: #f08901;
622
- --basecolors-shape-metro-default: #bf5826;
623
- --basecolors-shape-mobility-contrast: #00db9b;
624
- --basecolors-shape-mobility-default: #388f76;
625
- --basecolors-shape-plane-contrast: #fbafea;
626
- --basecolors-shape-plane-default: #800664;
627
- --basecolors-shape-subdued: #626493;
628
- --basecolors-shape-subduedalt: #d9dae8;
629
- --basecolors-shape-taxi-contrast: #ffe082;
630
- --basecolors-shape-taxi-default: #3d3e40;
631
- --basecolors-shape-train-contrast: #42a5f5;
632
- --basecolors-shape-train-default: #00367f;
633
- --basecolors-shape-tram-contrast: #b482fb;
634
- --basecolors-shape-tram-default: #78469a;
635
- --basecolors-shape-walk-contrast: #8284ab;
636
- --basecolors-shape-walk-default: #8d8e9c;
637
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
638
- --basecolors-shape-airportlinkbus-default: #800664;
639
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
640
- --basecolors-shape-airportlinkrail-default: #800664;
641
- --basecolors-stroke-contrast: #aeb7e2;
642
- --basecolors-stroke-default: #181c56;
643
- --basecolors-stroke-disabled: #949699;
644
- --basecolors-stroke-focus-contrast: #aeb7e2;
645
- --basecolors-stroke-focus-standard: #181c56;
646
- --basecolors-stroke-highlight: #ff5959;
647
- --basecolors-stroke-light: #ffffff;
648
- --basecolors-stroke-subdued: #8284ab;
649
- --basecolors-stroke-subduedalt: #e3e6e8;
650
- --basecolors-text-accent: #181c56;
651
- --basecolors-text-disabled: #6e6f73;
652
- --basecolors-text-disabledalt: #b6b8ba;
653
- --basecolors-text-highlight: #ff5959;
654
- --basecolors-text-light: #ffffff;
655
- --basecolors-text-subdued: #626493;
656
- --basecolors-text-subduedalt: #d9dae8;
669
+ .eds-expandable-alert-box .eds-alert-box__content {
670
+ width: 100%;
657
671
  }
658
-
659
- [data-color-mode=dark] {
660
- --basecolors-frame-contrast: #212233;
661
- --basecolors-frame-contrastalt: #141527;
662
- --basecolors-frame-contrastalt-2: #08091c;
663
- --basecolors-frame-default: #08091c;
664
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
665
- --basecolors-frame-elevatedalt: #464755;
666
- --basecolors-frame-subdued: #2d2e3e;
667
- --basecolors-frame-tint: #141527;
668
- --basecolors-shape-accent: #e5e5e9;
669
- --basecolors-shape-bicycle-contrast: #4db295;
670
- --basecolors-shape-bicycle-default: #4db295;
671
- --basecolors-shape-bus-contrast: #ef7398;
672
- --basecolors-shape-bus-default: #ef7398;
673
- --basecolors-shape-cableway-contrast: #b898e5;
674
- --basecolors-shape-cableway-default: #b898e5;
675
- --basecolors-shape-disabled: #b6b8ba;
676
- --basecolors-shape-disabledalt: #b3b4bd;
677
- --basecolors-shape-ferry-contrast: #8ccfe2;
678
- --basecolors-shape-ferry-default: #8ccfe2;
679
- --basecolors-shape-funicular-contrast: #b898e5;
680
- --basecolors-shape-funicular-default: #b898e5;
681
- --basecolors-shape-helicopter-contrast: #f2b8e5;
682
- --basecolors-shape-helicopter-default: #f2b8e5;
683
- --basecolors-shape-highlight: #ff9494;
684
- --basecolors-shape-light: #e5e5e9;
685
- --basecolors-shape-mask: #2d2e3e;
686
- --basecolors-shape-maskalt: #393a49;
687
- --basecolors-shape-metro-contrast: #dd973c;
688
- --basecolors-shape-metro-default: #dd973c;
689
- --basecolors-shape-mobility-contrast: #4db295;
690
- --basecolors-shape-mobility-default: #4db295;
691
- --basecolors-shape-plane-contrast: #f2b8e5;
692
- --basecolors-shape-plane-default: #f2b8e5;
693
- --basecolors-shape-subdued: #b3b4bd;
694
- --basecolors-shape-subduedalt: #b3b4bd;
695
- --basecolors-shape-taxi-contrast: #ffe082;
696
- --basecolors-shape-taxi-default: #ffe082;
697
- --basecolors-shape-train-contrast: #60a2d7;
698
- --basecolors-shape-train-default: #60a2d7;
699
- --basecolors-shape-tram-contrast: #b898e5;
700
- --basecolors-shape-tram-default: #b898e5;
701
- --basecolors-shape-walk-contrast: #8d8e9c;
702
- --basecolors-shape-walk-default: #8d8e9c;
703
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
704
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
705
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
706
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
707
- --basecolors-stroke-contrast: #aeb7e2;
708
- --basecolors-stroke-default: #b3b4bd;
709
- --basecolors-stroke-disabled: #e3e6e8;
710
- --basecolors-stroke-focus-contrast: #aeb7e2;
711
- --basecolors-stroke-focus-standard: #aeb7e2;
712
- --basecolors-stroke-highlight: #ff9494;
713
- --basecolors-stroke-light: #b3b4bd;
714
- --basecolors-stroke-subdued: #81828f;
715
- --basecolors-stroke-subduedalt: #949699;
716
- --basecolors-text-accent: #e5e5e9;
717
- --basecolors-text-disabled: #b6b8ba;
718
- --basecolors-text-disabledalt: #b6b8ba;
719
- --basecolors-text-highlight: #ff9494;
720
- --basecolors-text-light: #e5e5e9;
721
- --basecolors-text-subdued: #b3b4bd;
722
- --basecolors-text-subduedalt: #b3b4bd;
672
+ .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
673
+ margin-top: 0.0625rem;
723
674
  }
724
-
725
- :root {
726
- --eds-alert: 1;
675
+ @media screen and (min-width: 50rem) {
676
+ .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
677
+ margin-top: -0.375rem;
678
+ }
679
+ }
680
+ .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
681
+ margin-top: 0.125rem;
682
+ }
683
+ @media screen and (min-width: 50rem) {
684
+ .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
685
+ margin-top: 0.125rem;
686
+ }
687
+ }
688
+ .eds-expandable-alert-box__title {
689
+ display: flex;
690
+ justify-content: space-between;
691
+ align-items: baseline;
692
+ }
693
+ .eds-expandable-alert-box__button {
694
+ color: var(--components-button-iconbutton-standard-text);
695
+ background: none;
696
+ border: none;
697
+ cursor: pointer;
698
+ font-family: inherit;
699
+ font-size: inherit;
700
+ line-height: 1.5rem;
701
+ padding: 0 0.25rem;
702
+ flex-shrink: 0;
703
+ }
704
+ .eds-expandable-alert-box__button:focus-visible {
705
+ outline: 2px solid #181c56;
706
+ outline-color: var(--basecolors-stroke-focus-standard);
707
+ outline-offset: 0.125rem;
727
708
  }
709
+ .eds-expandable-alert-box__button .eds-icon {
710
+ font-size: 1rem;
711
+ padding-left: 0.25rem;
712
+ color: var(--components-button-iconbutton-standard-text);
713
+ }