@transferwise/neptune-css 0.0.0-experimental-4c688cd → 0.0.0-experimental-5405b30

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 (48) hide show
  1. package/dist/css/accordion.css +1 -235
  2. package/dist/css/alerts.css +1 -761
  3. package/dist/css/background.css +1 -20
  4. package/dist/css/badge.css +1 -90
  5. package/dist/css/border-radius.css +1 -3
  6. package/dist/css/breadcrumbs.css +1 -20
  7. package/dist/css/button-groups.css +1 -412
  8. package/dist/css/buttons.css +1 -1382
  9. package/dist/css/chevron.css +1 -35
  10. package/dist/css/circles.css +1 -284
  11. package/dist/css/close.css +1 -47
  12. package/dist/css/column-layout.css +1 -164
  13. package/dist/css/currency-flags.css +1 -45
  14. package/dist/css/decision.css +1 -95
  15. package/dist/css/dropdowns.css +1 -413
  16. package/dist/css/droppable.css +1 -207
  17. package/dist/css/flex.css +1 -598
  18. package/dist/css/footer.css +1 -118
  19. package/dist/css/grid.css +1 -2369
  20. package/dist/css/input-groups.css +1 -2706
  21. package/dist/css/link-callout.css +1 -20
  22. package/dist/css/list-group.css +1 -267
  23. package/dist/css/loaders.css +1 -76
  24. package/dist/css/media.css +1 -74
  25. package/dist/css/modals.css +1 -185
  26. package/dist/css/navbar-base.css +1 -1385
  27. package/dist/css/navbar.css +1 -2397
  28. package/dist/css/navs.css +1 -296
  29. package/dist/css/neptune-addons.css +1 -1829
  30. package/dist/css/neptune-core.css +2 -2037
  31. package/dist/css/neptune-social-media.css +1 -144
  32. package/dist/css/neptune.css +2 -24374
  33. package/dist/css/panels.css +1 -528
  34. package/dist/css/popovers.css +1 -538
  35. package/dist/css/process.css +1 -483
  36. package/dist/css/progress-bars.css +1 -76
  37. package/dist/css/ring.css +1 -59
  38. package/dist/css/select.css +1 -99
  39. package/dist/css/sequences.css +1 -855
  40. package/dist/css/table.css +1 -446
  41. package/dist/css/tick.css +1 -32
  42. package/dist/css/tooltip.css +1 -142
  43. package/dist/css/utilities.css +1 -145
  44. package/dist/css/wells.css +1 -74
  45. package/package.json +2 -3
  46. package/src/less/buttons.less +6 -2
  47. package/src/less/core/_scaffolding.less +1 -3
  48. package/scripts/analyze-css-selectors.js +0 -39
@@ -1,855 +1 @@
1
- .sequence {
2
- padding-left: 24px;
3
- position: relative;
4
- margin-left: 25px;
5
- margin-top: 0;
6
- margin-bottom: 0;
7
- font-size: 0.875rem;
8
- font-size: var(--font-size-14);
9
- border-color: rgba(0,0,0,0.10196);
10
- border-color: var(--color-border-neutral);
11
- }
12
- .sequence > li {
13
- padding-top: 2px;
14
- padding-bottom: 2px;
15
- }
16
- .sequence > li:first-child {
17
- margin-top: 16px;
18
- }
19
- .sequence > li:last-child {
20
- margin-bottom: 16px;
21
- }
22
- @media (min-width: 768px) {
23
- .sequence > li {
24
- padding-top: 4px;
25
- padding-bottom: 4px;
26
- }
27
- }
28
- .sequence > li::before {
29
- margin-top: 8px;
30
- }
31
- .sequence > li::after {
32
- top: 16px;
33
- }
34
- .sequence > li:first-child::after {
35
- height: 100%;
36
- }
37
- .sequence > li:last-child::after {
38
- height: 0;
39
- }
40
- .sequence.sequence-top > li:first-child {
41
- padding-top: 20px;
42
- margin-top: 0;
43
- }
44
- .sequence.sequence-top > li:first-child::after {
45
- height: calc(100% + 16px);
46
- }
47
- .sequence.sequence-bottom > li:last-child {
48
- padding-bottom: 20px;
49
- margin-bottom: 0;
50
- }
51
- .sequence.sequence-bottom > li:last-child::after {
52
- height: calc(100% - 16px);
53
- }
54
- .sequence.sequence-top.sequence-bottom > li:first-child:last-child::after {
55
- height: 100%;
56
- }
57
- .sequence .sequence-icon {
58
- top: 2px;
59
- }
60
- @media (min-width: 768px) {
61
- .sequence .sequence-icon {
62
- top: 4px;
63
- }
64
- }
65
- .sequence.sequence-top > li:first-child .sequence-icon {
66
- top: 20px;
67
- }
68
- [dir="rtl"] .sequence {
69
- padding-right: 24px;
70
- padding-left: 0;
71
- padding-left: initial;
72
- }
73
- .sequence > li::before {
74
- margin-left: -27px;
75
- }
76
- [dir="rtl"] .sequence > li::before {
77
- margin-right: -27px;
78
- margin-left: 0;
79
- margin-left: initial;
80
- }
81
- .sequence > li::after {
82
- left: -24px;
83
- }
84
- [dir="rtl"] .sequence > li::after {
85
- right: -24px;
86
- left: auto;
87
- left: initial;
88
- }
89
- .sequence .sequence-icon {
90
- margin-left: -35px;
91
- }
92
- [dir="rtl"] .sequence .sequence-icon {
93
- margin-right: -35px;
94
- margin-left: 0;
95
- margin-left: initial;
96
- }
97
- .sequence .sequence-icon-md {
98
- margin-left: -39px;
99
- }
100
- [dir="rtl"] .sequence .sequence-icon-md {
101
- margin-right: -39px;
102
- margin-left: 0;
103
- margin-left: initial;
104
- }
105
- .sequence .sequence-icon-lg {
106
- margin-left: -43px;
107
- }
108
- [dir="rtl"] .sequence .sequence-icon-lg {
109
- margin-right: -43px;
110
- margin-left: 0;
111
- margin-left: initial;
112
- }
113
- [dir="rtl"] .sequence {
114
- margin-right: 25px;
115
- margin-left: 0;
116
- margin-left: initial;
117
- }
118
- @media (min-width: 768px) {
119
- .sequence {
120
- padding-right: 24px;
121
- font-size: 1rem;
122
- font-size: var(--font-size-16);
123
- }
124
- [dir="rtl"] .sequence {
125
- padding-left: 24px;
126
- padding-right: 0;
127
- padding-right: initial;
128
- }
129
- }
130
- .sequence > li {
131
- display: block;
132
- line-height: 24px;
133
- position: relative;
134
- border-color: rgba(0,0,0,0.10196);
135
- border-color: var(--color-border-neutral);
136
- }
137
- .sequence > li > a {
138
- display: block;
139
- -webkit-text-decoration: none;
140
- text-decoration: none;
141
- font-weight: 400;
142
- font-weight: var(--font-weight-regular);
143
- color: #0097c7;
144
- color: var(--color-content-accent);
145
- outline-offset: -1px;
146
- }
147
- .sequence > li > a:hover,
148
- .sequence > li > a:focus {
149
- -webkit-text-decoration: none;
150
- text-decoration: none;
151
- color: #0084b3;
152
- color: var(--color-content-accent-hover);
153
- }
154
- .sequence > li > a:active {
155
- color: #0077a5;
156
- color: var(--color-content-accent-active);
157
- }
158
- .sequence > li p {
159
- margin-bottom: 0;
160
- padding-bottom: 8px;
161
- max-width: 600px;
162
- }
163
- .sequence > li p:last-child {
164
- padding-bottom: 0;
165
- }
166
- .sequence > li h1,
167
- .sequence > li h2,
168
- .sequence > li h3,
169
- .sequence > li h4,
170
- .sequence > li .h1,
171
- .sequence > li .h2,
172
- .sequence > li .h3,
173
- .sequence > li .h4,
174
- .sequence > li .btn-toolbar {
175
- margin-bottom: 16px;
176
- }
177
- .sequence > li::before {
178
- content: "";
179
- display: block;
180
- position: absolute;
181
- width: 8px;
182
- height: 8px;
183
- border-radius: 50%;
184
- z-index: 2;
185
- border-width: 4px;
186
- border-style: solid;
187
- border-color: inherit;
188
- outline: 0;
189
- }
190
- .sequence > li::after {
191
- content: "";
192
- position: absolute;
193
- width: 2px;
194
- height: 100%;
195
- border-style: solid;
196
- border-color: inherit;
197
- outline: 0;
198
- border-width: 0;
199
- background-color: rgba(0,0,0,0.10196);
200
- background-color: var(--color-border-neutral);
201
- background-size: 200% 200%;
202
- background-position: 0 0%;
203
- }
204
- .sequence .sequence-item-no-pip::before {
205
- display: none;
206
- }
207
- .sequence > .active > a {
208
- -webkit-text-decoration: none;
209
- text-decoration: none;
210
- color: #37517e;
211
- color: var(--color-content-primary);
212
- font-weight: 600;
213
- font-weight: var(--font-weight-semi-bold);
214
- }
215
- .sequence > .active > a:hover,
216
- .sequence > .active > a:focus {
217
- -webkit-text-decoration: none;
218
- text-decoration: none;
219
- color: #37517e;
220
- color: var(--color-content-primary);
221
- }
222
- .sequence > .active > a:active {
223
- color: #37517e;
224
- color: var(--color-content-primary);
225
- }
226
- .sequence > .active::before {
227
- border-color: #0097c7;
228
- border-color: var(--color-content-accent);
229
- }
230
- .sequence > .active::after,
231
- .sequence > .active ~ li::after {
232
- background-color: rgba(0,0,0,0.10196);
233
- background-color: var(--color-border-neutral);
234
- background-image: none;
235
- }
236
- .sequence > .active ~ li::before {
237
- border-color: rgba(0,0,0,0.10196);
238
- border-color: var(--color-border-neutral);
239
- }
240
- .sequence a {
241
- -webkit-text-decoration: none;
242
- text-decoration: none;
243
- font-weight: 400;
244
- font-weight: var(--font-weight-regular);
245
- }
246
- .sequence-top > li:first-child::after {
247
- top: 0;
248
- }
249
- .sequence-inverse > li {
250
- border-color: rgba(0,0,0,0.10196);
251
- border-color: var(--color-border-neutral);
252
- }
253
- .sequence-inverse > li > a {
254
- color: #ffffff;
255
- }
256
- .sequence-inverse > li::after {
257
- background-color: #37517e;
258
- }
259
- .sequence-inverse > .active > a {
260
- color: #ffffff;
261
- }
262
- .sequence-inverse > .active .small,
263
- .sequence-inverse > .active .body-2,
264
- .sequence-inverse > .active .np-text-body-default {
265
- color: #5d7079;
266
- color: var(--color-content-secondary);
267
- }
268
- .sequence-inverse > .active::after,
269
- .sequence-inverse > .active ~ li::after {
270
- background-color: #37517e;
271
- background-image: none !important;
272
- }
273
- .sequence-inverse > .active ~ li::before {
274
- border-color: #37517e;
275
- }
276
- .sequence-info > li {
277
- border-color: #00a2dd;
278
- border-color: var(--color-interactive-accent);
279
- }
280
- .sequence-info > li::after {
281
- background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
282
- background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
283
- }
284
- .sequence-info.sequence-inverse > li::after {
285
- background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
286
- background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
287
- }
288
- .sequence-info > .active::before {
289
- border-color: #00a2dd;
290
- border-color: var(--color-interactive-accent);
291
- background-color: #00a2dd;
292
- background-color: var(--color-interactive-accent);
293
- }
294
- @keyframes sequence-pip-info {
295
- from {
296
- border-color: rgba(255,255,255,0.10196);
297
- }
298
- to {
299
- border-color: #00a2dd;
300
- border-color: var(--color-interactive-accent);
301
- }
302
- }
303
- .sequence-primary > li {
304
- border-color: #37517e;
305
- }
306
- .sequence-primary > li::after {
307
- background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
308
- background-image: linear-gradient(#37517e 0, #37517e 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
309
- }
310
- .sequence-primary.sequence-inverse > li::after {
311
- background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
312
- }
313
- .sequence-primary > .active::before {
314
- border-color: #37517e;
315
- background-color: #37517e;
316
- }
317
- @keyframes sequence-pip-primary {
318
- from {
319
- border-color: rgba(255,255,255,0.10196);
320
- }
321
- to {
322
- border-color: #37517e;
323
- }
324
- }
325
- .sequence-success > li {
326
- border-color: #2ead4b;
327
- border-color: var(--color-interactive-positive);
328
- }
329
- .sequence-success > li::after {
330
- background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
331
- background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
332
- }
333
- .sequence-success.sequence-inverse > li::after {
334
- background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
335
- background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
336
- }
337
- .sequence-success > .active::before {
338
- border-color: #2ead4b;
339
- border-color: var(--color-interactive-positive);
340
- background-color: #2ead4b;
341
- background-color: var(--color-interactive-positive);
342
- }
343
- @keyframes sequence-pip-success {
344
- from {
345
- border-color: rgba(255,255,255,0.10196);
346
- }
347
- to {
348
- border-color: #2ead4b;
349
- border-color: var(--color-interactive-positive);
350
- }
351
- }
352
- .sequence-warning > li {
353
- border-color: #df8700;
354
- border-color: var(--color-interactive-warning);
355
- }
356
- .sequence-warning > li::after {
357
- background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
358
- background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
359
- }
360
- .sequence-warning.sequence-inverse > li::after {
361
- background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
362
- background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
363
- }
364
- .sequence-warning > .active::before {
365
- border-color: #df8700;
366
- border-color: var(--color-interactive-warning);
367
- background-color: #df8700;
368
- background-color: var(--color-interactive-warning);
369
- }
370
- @keyframes sequence-pip-warning {
371
- from {
372
- border-color: rgba(255,255,255,0.10196);
373
- }
374
- to {
375
- border-color: #df8700;
376
- border-color: var(--color-interactive-warning);
377
- }
378
- }
379
- .sequence-danger > li {
380
- border-color: #e74848;
381
- border-color: var(--color-interactive-negative);
382
- }
383
- .sequence-danger > li::after {
384
- background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
385
- background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
386
- }
387
- .sequence-danger.sequence-inverse > li::after {
388
- background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
389
- background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
390
- }
391
- .sequence-danger > .active::before {
392
- border-color: #e74848;
393
- border-color: var(--color-interactive-negative);
394
- background-color: #e74848;
395
- background-color: var(--color-interactive-negative);
396
- }
397
- @keyframes sequence-pip-danger {
398
- from {
399
- border-color: rgba(255,255,255,0.10196);
400
- }
401
- to {
402
- border-color: #e74848;
403
- border-color: var(--color-interactive-negative);
404
- }
405
- }
406
- .sequence-hollow > li::before {
407
- border-width: 2px;
408
- background-color: #ffffff;
409
- background-color: var(--color-background-screen);
410
- }
411
- .sequence-hollow > .active::before {
412
- border-width: 4px;
413
- }
414
- .sequence-hollow > .active ~ li::before {
415
- background-color: #ffffff;
416
- background-color: var(--color-background-screen);
417
- }
418
- .sequence-hollow.sequence-inverse > li::before {
419
- background-color: #37517e;
420
- }
421
- .sequence-icon {
422
- position: absolute;
423
- display: block;
424
- margin-left: -35px;
425
- background-color: #ffffff;
426
- background-color: var(--color-background-screen);
427
- border-radius: 50%;
428
- width: 24px;
429
- height: 24px;
430
- z-index: 2;
431
- text-align: center;
432
- -webkit-text-decoration: none !important;
433
- text-decoration: none !important;
434
- border-width: 1px;
435
- border-style: solid;
436
- border-color: rgba(0,0,0,0.10196);
437
- border-color: var(--color-border-neutral);
438
- top: 4px;
439
- font-size: 0.75rem;
440
- font-size: var(--font-size-12);
441
- }
442
- [dir="rtl"] .sequence-icon {
443
- margin-right: -35px;
444
- margin-left: 0;
445
- margin-left: initial;
446
- }
447
- .sequence-icon .icon {
448
- font-size: 1rem;
449
- font-size: var(--font-size-16);
450
- line-height: 23px;
451
- }
452
- .sequence-inverse .sequence-icon {
453
- background-color: #37517e;
454
- border-color: #ffffff;
455
- }
456
- .sequence a .sequence-icon {
457
- color: #0097c7;
458
- color: var(--color-content-accent);
459
- border-color: #00a2dd;
460
- border-color: var(--color-interactive-accent);
461
- }
462
- .sequence a:hover .sequence-icon,
463
- .sequence a:focus .sequence-icon {
464
- color: #0084b3;
465
- color: var(--color-content-accent-hover);
466
- border-color: #008fc9;
467
- border-color: var(--color-interactive-accent-hover);
468
- }
469
- .sequence-table {
470
- display: table;
471
- }
472
- .sequence-table > li {
473
- display: table-row;
474
- }
475
- .sequence-table > li > a {
476
- position: absolute;
477
- }
478
- .sequence-table > li > .sequence-table-td,
479
- .sequence-table > li > .sequence-table-th {
480
- display: table-cell;
481
- padding: 4px 12px;
482
- padding: var(--size-4) var(--size-12);
483
- padding-left: 0;
484
- }
485
- [dir="rtl"] .sequence-table > li > .sequence-table-td,
486
- [dir="rtl"] .sequence-table > li > .sequence-table-th {
487
- padding-right: 0;
488
- padding-left: 0;
489
- padding-left: initial;
490
- }
491
- .sequence-table > li > .sequence-table-td:last-child,
492
- .sequence-table > li > .sequence-table-th:last-child {
493
- padding-right: 0;
494
- }
495
- [dir="rtl"] .sequence-table > li > .sequence-table-td:last-child,
496
- [dir="rtl"] .sequence-table > li > .sequence-table-th:last-child {
497
- padding-left: 0;
498
- padding-right: 0;
499
- padding-right: initial;
500
- }
501
- .sequence-table > li > .sequence-table-th {
502
- color: #37517e;
503
- color: var(--color-content-primary);
504
- white-space: nowrap;
505
- }
506
- .sequence-table > li::before {
507
- position: static;
508
- position: initial;
509
- }
510
- .sequence-table > li::after {
511
- display: none;
512
- }
513
- .sequence-table > li .sequence-icon {
514
- position: static;
515
- position: initial;
516
- margin-top: -17px;
517
- }
518
- .sequence-table > li:first-child .sequence-table-td,
519
- .sequence-table > li:first-child .sequence-table-th {
520
- padding-top: 17px;
521
- }
522
- .sequence-table > li:last-child .sequence-table-td,
523
- .sequence-table > li:last-child .sequence-table-th {
524
- padding-bottom: 15px;
525
- }
526
- .sequence-table::before {
527
- content: " ";
528
- width: 2px;
529
- left: 0;
530
- position: absolute;
531
- border-width: 1px;
532
- border-style: solid;
533
- border-color: inherit;
534
- height: calc(100% - 56px);
535
- margin-top: 28px;
536
- display: block;
537
- }
538
- [dir="rtl"] .sequence-table::before {
539
- right: 0;
540
- left: auto;
541
- left: initial;
542
- }
543
- .sequence-table.sequence-top::before {
544
- height: calc(100% - 28px);
545
- margin-top: 0;
546
- }
547
- .sequence-table.sequence-bottom::before {
548
- height: calc(100% - 28px);
549
- }
550
- .sequence-table.sequence-top.sequence-bottom::before {
551
- height: 100%;
552
- }
553
- .sequence-inverse > li > .sequence-table-th,
554
- .sequence-inverse > li > .sequence-table-td {
555
- color: #5d7079;
556
- color: var(--color-content-secondary);
557
- }
558
- .sequence-icon-md {
559
- width: 32px;
560
- height: 32px;
561
- line-height: 30px;
562
- margin-top: -6px;
563
- font-size: 0.875rem;
564
- font-size: var(--font-size-14);
565
- }
566
- .sequence-icon-lg {
567
- width: 40px;
568
- height: 40px;
569
- line-height: 38px;
570
- margin-top: -6px;
571
- font-size: 1rem;
572
- font-size: var(--font-size-16);
573
- }
574
- .sequence-icon-lg .icon {
575
- font-size: 22px;
576
- line-height: 35px;
577
- }
578
- .sequence-lg {
579
- padding-left: 40px;
580
- }
581
- .sequence-lg > li {
582
- padding-top: 8px;
583
- padding-bottom: 8px;
584
- }
585
- .sequence-lg > li:first-child {
586
- margin-top: 24px;
587
- }
588
- .sequence-lg > li:last-child {
589
- margin-bottom: 24px;
590
- }
591
- @media (min-width: 768px) {
592
- .sequence-lg > li {
593
- padding-top: 8px;
594
- padding-bottom: 8px;
595
- }
596
- }
597
- .sequence-lg > li::before {
598
- margin-top: 8px;
599
- }
600
- .sequence-lg > li::after {
601
- top: 20px;
602
- }
603
- .sequence-lg > li:first-child::after {
604
- height: 100%;
605
- }
606
- .sequence-lg > li:last-child::after {
607
- height: 0;
608
- }
609
- .sequence-lg.sequence-top > li:first-child {
610
- padding-top: 32px;
611
- margin-top: 0;
612
- }
613
- .sequence-lg.sequence-top > li:first-child::after {
614
- height: calc(100% + 20px);
615
- }
616
- .sequence-lg.sequence-bottom > li:last-child {
617
- padding-bottom: 32px;
618
- margin-bottom: 0;
619
- }
620
- .sequence-lg.sequence-bottom > li:last-child::after {
621
- height: calc(100% - 20px);
622
- }
623
- .sequence-lg.sequence-top.sequence-bottom > li:first-child:last-child::after {
624
- height: 100%;
625
- }
626
- .sequence-lg .sequence-icon {
627
- top: 8px;
628
- }
629
- @media (min-width: 768px) {
630
- .sequence-lg .sequence-icon {
631
- top: 8px;
632
- }
633
- }
634
- .sequence-lg.sequence-top > li:first-child .sequence-icon {
635
- top: 32px;
636
- }
637
- [dir="rtl"] .sequence-lg {
638
- padding-right: 40px;
639
- padding-left: 0;
640
- padding-left: initial;
641
- }
642
- .sequence-lg > li::before {
643
- margin-left: -43px;
644
- }
645
- [dir="rtl"] .sequence-lg > li::before {
646
- margin-right: -43px;
647
- margin-left: 0;
648
- margin-left: initial;
649
- }
650
- .sequence-lg > li::after {
651
- left: -40px;
652
- }
653
- [dir="rtl"] .sequence-lg > li::after {
654
- right: -40px;
655
- left: auto;
656
- left: initial;
657
- }
658
- .sequence-lg .sequence-icon {
659
- margin-left: -51px;
660
- }
661
- [dir="rtl"] .sequence-lg .sequence-icon {
662
- margin-right: -51px;
663
- margin-left: 0;
664
- margin-left: initial;
665
- }
666
- .sequence-lg .sequence-icon-md {
667
- margin-left: -55px;
668
- }
669
- [dir="rtl"] .sequence-lg .sequence-icon-md {
670
- margin-right: -55px;
671
- margin-left: 0;
672
- margin-left: initial;
673
- }
674
- .sequence-lg .sequence-icon-lg {
675
- margin-left: -59px;
676
- }
677
- [dir="rtl"] .sequence-lg .sequence-icon-lg {
678
- margin-right: -59px;
679
- margin-left: 0;
680
- margin-left: initial;
681
- }
682
- @media (min-width: 768px) {
683
- .sequence-lg {
684
- padding-left: 48px;
685
- }
686
- [dir="rtl"] .sequence-lg {
687
- padding-right: 48px;
688
- padding-left: 0;
689
- padding-left: initial;
690
- }
691
- .sequence-lg > li::before {
692
- margin-left: -51px;
693
- }
694
- [dir="rtl"] .sequence-lg > li::before {
695
- margin-right: -51px;
696
- margin-left: 0;
697
- margin-left: initial;
698
- }
699
- .sequence-lg > li::after {
700
- left: -48px;
701
- }
702
- [dir="rtl"] .sequence-lg > li::after {
703
- right: -48px;
704
- left: auto;
705
- left: initial;
706
- }
707
- .sequence-lg .sequence-icon {
708
- margin-left: -59px;
709
- }
710
- [dir="rtl"] .sequence-lg .sequence-icon {
711
- margin-right: -59px;
712
- margin-left: 0;
713
- margin-left: initial;
714
- }
715
- .sequence-lg .sequence-icon-md {
716
- margin-left: -63px;
717
- }
718
- [dir="rtl"] .sequence-lg .sequence-icon-md {
719
- margin-right: -63px;
720
- margin-left: 0;
721
- margin-left: initial;
722
- }
723
- .sequence-lg .sequence-icon-lg {
724
- margin-left: -67px;
725
- }
726
- [dir="rtl"] .sequence-lg .sequence-icon-lg {
727
- margin-right: -67px;
728
- margin-left: 0;
729
- margin-left: initial;
730
- }
731
- }
732
- .sequence-animate > li::after {
733
- background-size: 200% 200%;
734
- animation: 0.3s linear 0s both sequence-fill;
735
- }
736
- .sequence-animate.sequence-info > li::before {
737
- animation: 0.3s linear 0.3s both sequence-pip-info, 3s linear 0.3s forwards sequence-pulse-info;
738
- }
739
- .sequence-animate.sequence-info > .active::before {
740
- animation: 0.3s linear 0.3s both sequence-pip-info, 3s linear 0.3s infinite sequence-pulse-info;
741
- }
742
- .sequence-animate.sequence-warning > li::before {
743
- animation: 0.3s linear 0.3s both sequence-pip-warning, 3s linear 0.3s forwards sequence-pulse-warning;
744
- }
745
- .sequence-animate.sequence-warning > .active::before {
746
- animation: 0.3s linear 0.3s both sequence-pip-warning, 3s linear 0.3s infinite sequence-pulse-warning;
747
- }
748
- .sequence-animate.sequence-success > li::before {
749
- animation: 0.3s linear 0.3s both sequence-pip-success, 3s linear 0.3s forwards sequence-pulse-success;
750
- }
751
- .sequence-animate.sequence-success > .active::before {
752
- animation: 0.3s linear 0.3s both sequence-pip-success, 3s linear 0.3s infinite sequence-pulse-success;
753
- }
754
- .sequence-animate.sequence-danger > li::before {
755
- animation: 0.3s linear 0.3s both sequence-pip-danger, 3s linear 0.3s forwards sequence-pulse-danger;
756
- }
757
- .sequence-animate.sequence-danger > .active::before {
758
- animation: 0.3s linear 0.3s both sequence-pip-danger, 3s linear 0.3s infinite sequence-pulse-danger;
759
- }
760
- .sequence-animate > li:nth-child(1):before,
761
- .sequence-animate > li:nth-child(1):after {
762
- animation-delay: 0.3s !important;
763
- }
764
- .sequence-animate > li:nth-child(2):before,
765
- .sequence-animate > li:nth-child(2):after {
766
- animation-delay: 0.6s !important;
767
- }
768
- .sequence-animate > li:nth-child(3):before,
769
- .sequence-animate > li:nth-child(3):after {
770
- animation-delay: 0.9s !important;
771
- }
772
- .sequence-animate > li:nth-child(4):before,
773
- .sequence-animate > li:nth-child(4):after {
774
- animation-delay: 1.2s !important;
775
- }
776
- .sequence-animate > li:nth-child(5):before,
777
- .sequence-animate > li:nth-child(5):after {
778
- animation-delay: 1.5s !important;
779
- }
780
- .sequence-animate > li:nth-child(6):before,
781
- .sequence-animate > li:nth-child(6):after {
782
- animation-delay: 1.8s !important;
783
- }
784
- .sequence-animate > li:nth-child(7):before,
785
- .sequence-animate > li:nth-child(7):after {
786
- animation-delay: 2.1s !important;
787
- }
788
- .sequence-animate > li:nth-child(8):before,
789
- .sequence-animate > li:nth-child(8):after {
790
- animation-delay: 2.4s !important;
791
- }
792
- .sequence-animate > li:nth-child(9):before,
793
- .sequence-animate > li:nth-child(9):after {
794
- animation-delay: 2.7s !important;
795
- }
796
- .sequence-animate > li:nth-child(10):before,
797
- .sequence-animate > li:nth-child(10):after {
798
- animation-delay: 3s !important;
799
- }
800
- .sequence-animate > .active ~ li::before,
801
- .sequence-animate > .active ~ li::after {
802
- animation: none;
803
- }
804
- @keyframes sequence-fill {
805
- from {
806
- background-position: 0 100%;
807
- }
808
- to {
809
- background-position: 0 0;
810
- }
811
- }
812
- @keyframes sequence-pulse-info {
813
- 0% {
814
- box-shadow: 0 0 0 0 rgba(0, 185, 255, 0.3);
815
- }
816
- 50% {
817
- box-shadow: 0 0 0 16px rgba(0, 185, 255, 0);
818
- }
819
- 100% {
820
- box-shadow: 0 0 0 0 rgba(0, 185, 255, 0);
821
- }
822
- }
823
- @keyframes sequence-pulse-warning {
824
- 0% {
825
- box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.3);
826
- }
827
- 50% {
828
- box-shadow: 0 0 0 16px rgba(255, 166, 0, 0);
829
- }
830
- 100% {
831
- box-shadow: 0 0 0 0 rgba(255, 166, 0, 0);
832
- }
833
- }
834
- @keyframes sequence-pulse-success {
835
- 0% {
836
- box-shadow: 0 0 0 0 rgba(26, 208, 110, 0.3);
837
- }
838
- 50% {
839
- box-shadow: 0 0 0 16px rgba(26, 208, 110, 0);
840
- }
841
- 100% {
842
- box-shadow: 0 0 0 0 rgba(226, 208, 110, 0);
843
- }
844
- }
845
- @keyframes sequence-pulse-danger {
846
- 0% {
847
- box-shadow: 0 0 0 0 rgba(245, 54, 54, 0.3);
848
- }
849
- 50% {
850
- box-shadow: 0 0 0 16px rgba(245, 54, 54, 0);
851
- }
852
- 100% {
853
- box-shadow: 0 0 0 0 rgba(245, 54, 54, 0);
854
- }
855
- }
1
+ .sequence{border-color:#0000001a;border-color:var(--color-border-neutral);font-size:.875rem;font-size:var(--font-size-14);margin-bottom:0;margin-left:25px;margin-top:0;padding-left:24px;position:relative}.sequence>li{padding-bottom:2px;padding-top:2px}.sequence>li:first-child{margin-top:16px}.sequence>li:last-child{margin-bottom:16px}@media (min-width:768px){.sequence>li{padding-bottom:4px;padding-top:4px}}.sequence>li:before{margin-top:8px}.sequence>li:after{top:16px}.sequence>li:first-child:after{height:100%}.sequence>li:last-child:after{height:0}.sequence.sequence-top>li:first-child{margin-top:0;padding-top:20px}.sequence.sequence-top>li:first-child:after{height:calc(100% + 16px)}.sequence.sequence-bottom>li:last-child{margin-bottom:0;padding-bottom:20px}.sequence.sequence-bottom>li:last-child:after{height:calc(100% - 16px)}.sequence.sequence-top.sequence-bottom>li:first-child:last-child:after{height:100%}.sequence .sequence-icon{top:2px}@media (min-width:768px){.sequence .sequence-icon{top:4px}}.sequence.sequence-top>li:first-child .sequence-icon{top:20px}[dir=rtl] .sequence{padding-left:0;padding-right:24px}.sequence>li:before{margin-left:-27px}[dir=rtl] .sequence>li:before{margin-left:0;margin-right:-27px}.sequence>li:after{left:-24px}[dir=rtl] .sequence>li:after{left:auto;right:-24px}.sequence .sequence-icon{margin-left:-35px}[dir=rtl] .sequence .sequence-icon{margin-left:0;margin-right:-35px}.sequence .sequence-icon-md{margin-left:-39px}[dir=rtl] .sequence .sequence-icon-md{margin-left:0;margin-right:-39px}.sequence .sequence-icon-lg{margin-left:-43px}[dir=rtl] .sequence .sequence-icon-lg{margin-left:0;margin-right:-43px}[dir=rtl] .sequence{margin-left:0;margin-right:25px}@media (min-width:768px){.sequence{font-size:1rem;font-size:var(--font-size-16);padding-right:24px}[dir=rtl] .sequence{padding-left:24px;padding-right:0}}.sequence>li{border-color:#0000001a;border-color:var(--color-border-neutral);display:block;line-height:24px;position:relative}.sequence>li>a{color:#0097c7;color:var(--color-content-accent);display:block;font-weight:400;font-weight:var(--font-weight-regular);outline-offset:-1px;text-decoration:none}.sequence>li>a:focus,.sequence>li>a:hover{color:#0084b3;color:var(--color-content-accent-hover);text-decoration:none}.sequence>li>a:active{color:#0077a5;color:var(--color-content-accent-active)}.sequence>li p{margin-bottom:0;max-width:600px;padding-bottom:8px}.sequence>li p:last-child{padding-bottom:0}.sequence>li .btn-toolbar,.sequence>li .h1,.sequence>li .h2,.sequence>li .h3,.sequence>li .h4,.sequence>li h1,.sequence>li h2,.sequence>li h3,.sequence>li h4{margin-bottom:16px}.sequence>li:before{border:4px solid;border-color:inherit;border-radius:50%;content:"";display:block;height:8px;outline:0;position:absolute;width:8px;z-index:2}.sequence>li:after{background-color:#0000001a;background-color:var(--color-border-neutral);background-position:0 0;background-size:200% 200%;border:0 solid;border-color:inherit;content:"";height:100%;outline:0;position:absolute;width:2px}.sequence .sequence-item-no-pip:before{display:none}.sequence>.active>a{font-weight:600;font-weight:var(--font-weight-semi-bold)}.sequence>.active>a,.sequence>.active>a:focus,.sequence>.active>a:hover{color:#37517e;color:var(--color-content-primary);text-decoration:none}.sequence>.active>a:active{color:#37517e;color:var(--color-content-primary)}.sequence>.active:before{border-color:#0097c7;border-color:var(--color-content-accent)}.sequence>.active:after,.sequence>.active~li:after{background-color:#0000001a;background-color:var(--color-border-neutral);background-image:none}.sequence>.active~li:before{border-color:#0000001a;border-color:var(--color-border-neutral)}.sequence a{font-weight:400;font-weight:var(--font-weight-regular);text-decoration:none}.sequence-top>li:first-child:after{top:0}.sequence-inverse>li{border-color:#0000001a;border-color:var(--color-border-neutral)}.sequence-inverse>li>a{color:#fff}.sequence-inverse>li:after{background-color:#37517e}.sequence-inverse>.active>a{color:#fff}.sequence-inverse>.active .body-2,.sequence-inverse>.active .np-text-body-default,.sequence-inverse>.active .small{color:#5d7079;color:var(--color-content-secondary)}.sequence-inverse>.active:after,.sequence-inverse>.active~li:after{background-color:#37517e;background-image:none!important}.sequence-inverse>.active~li:before{border-color:#37517e}.sequence-info>li{border-color:#00a2dd;border-color:var(--color-interactive-accent)}.sequence-info>li:after{background-image:linear-gradient(#00a2dd,#00a2dd 50%,#0000001a 0,#0000001a);background-image:linear-gradient(var(--color-interactive-accent) 0,var(--color-interactive-accent) 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-info.sequence-inverse>li:after{background-image:linear-gradient(#00a2dd,#00a2dd 50%,#ffffff1a 0,#ffffff1a);background-image:linear-gradient(var(--color-interactive-accent) 0,var(--color-interactive-accent) 50%,#ffffff1a 50%,#ffffff1a 100%)}.sequence-info>.active:before{background-color:#00a2dd;background-color:var(--color-interactive-accent);border-color:#00a2dd;border-color:var(--color-interactive-accent)}@keyframes sequence-pip-info{0%{border-color:#ffffff1a}to{border-color:#00a2dd;border-color:var(--color-interactive-accent)}}.sequence-primary>li{border-color:#37517e}.sequence-primary>li:after{background-image:linear-gradient(#37517e,#37517e 50%,#0000001a 0,#0000001a);background-image:linear-gradient(#37517e 0,#37517e 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-primary.sequence-inverse>li:after{background-image:linear-gradient(#37517e,#37517e 50%,#ffffff1a 0,#ffffff1a)}.sequence-primary>.active:before{background-color:#37517e;border-color:#37517e}@keyframes sequence-pip-primary{0%{border-color:#ffffff1a}to{border-color:#37517e}}.sequence-success>li{border-color:#2ead4b;border-color:var(--color-interactive-positive)}.sequence-success>li:after{background-image:linear-gradient(#2ead4b,#2ead4b 50%,#0000001a 0,#0000001a);background-image:linear-gradient(var(--color-interactive-positive) 0,var(--color-interactive-positive) 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-success.sequence-inverse>li:after{background-image:linear-gradient(#2ead4b,#2ead4b 50%,#ffffff1a 0,#ffffff1a);background-image:linear-gradient(var(--color-interactive-positive) 0,var(--color-interactive-positive) 50%,#ffffff1a 50%,#ffffff1a 100%)}.sequence-success>.active:before{background-color:#2ead4b;background-color:var(--color-interactive-positive);border-color:#2ead4b;border-color:var(--color-interactive-positive)}@keyframes sequence-pip-success{0%{border-color:#ffffff1a}to{border-color:#2ead4b;border-color:var(--color-interactive-positive)}}.sequence-warning>li{border-color:#df8700;border-color:var(--color-interactive-warning)}.sequence-warning>li:after{background-image:linear-gradient(#df8700,#df8700 50%,#0000001a 0,#0000001a);background-image:linear-gradient(var(--color-interactive-warning) 0,var(--color-interactive-warning) 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-warning.sequence-inverse>li:after{background-image:linear-gradient(#df8700,#df8700 50%,#ffffff1a 0,#ffffff1a);background-image:linear-gradient(var(--color-interactive-warning) 0,var(--color-interactive-warning) 50%,#ffffff1a 50%,#ffffff1a 100%)}.sequence-warning>.active:before{background-color:#df8700;background-color:var(--color-interactive-warning);border-color:#df8700;border-color:var(--color-interactive-warning)}@keyframes sequence-pip-warning{0%{border-color:#ffffff1a}to{border-color:#df8700;border-color:var(--color-interactive-warning)}}.sequence-danger>li{border-color:#e74848;border-color:var(--color-interactive-negative)}.sequence-danger>li:after{background-image:linear-gradient(#e74848,#e74848 50%,#0000001a 0,#0000001a);background-image:linear-gradient(var(--color-interactive-negative) 0,var(--color-interactive-negative) 50%,var(--color-border-neutral) 50%,var(--color-border-neutral) 100%)}.sequence-danger.sequence-inverse>li:after{background-image:linear-gradient(#e74848,#e74848 50%,#ffffff1a 0,#ffffff1a);background-image:linear-gradient(var(--color-interactive-negative) 0,var(--color-interactive-negative) 50%,#ffffff1a 50%,#ffffff1a 100%)}.sequence-danger>.active:before{background-color:#e74848;background-color:var(--color-interactive-negative);border-color:#e74848;border-color:var(--color-interactive-negative)}@keyframes sequence-pip-danger{0%{border-color:#ffffff1a}to{border-color:#e74848;border-color:var(--color-interactive-negative)}}.sequence-hollow>li:before{background-color:#fff;background-color:var(--color-background-screen);border-width:2px}.sequence-hollow>.active:before{border-width:4px}.sequence-hollow>.active~li:before{background-color:#fff;background-color:var(--color-background-screen)}.sequence-hollow.sequence-inverse>li:before{background-color:#37517e}.sequence-icon{background-color:#fff;background-color:var(--color-background-screen);border:1px solid #0000001a;border-color:var(--color-border-neutral);border-radius:50%;display:block;font-size:.75rem;font-size:var(--font-size-12);height:24px;margin-left:-35px;position:absolute;text-align:center;text-decoration:none!important;top:4px;width:24px;z-index:2}[dir=rtl] .sequence-icon{margin-left:0;margin-right:-35px}.sequence-icon .icon{font-size:1rem;font-size:var(--font-size-16);line-height:23px}.sequence-inverse .sequence-icon{background-color:#37517e;border-color:#fff}.sequence a .sequence-icon{border-color:#00a2dd;border-color:var(--color-interactive-accent);color:#0097c7;color:var(--color-content-accent)}.sequence a:focus .sequence-icon,.sequence a:hover .sequence-icon{border-color:#008fc9;border-color:var(--color-interactive-accent-hover);color:#0084b3;color:var(--color-content-accent-hover)}.sequence-table{display:table}.sequence-table>li{display:table-row}.sequence-table>li>a{position:absolute}.sequence-table>li>.sequence-table-td,.sequence-table>li>.sequence-table-th{display:table-cell;padding:4px 12px;padding:var(--size-4) var(--size-12);padding-left:0}[dir=rtl] .sequence-table>li>.sequence-table-td,[dir=rtl] .sequence-table>li>.sequence-table-th{padding-left:0;padding-right:0}.sequence-table>li>.sequence-table-td:last-child,.sequence-table>li>.sequence-table-th:last-child{padding-right:0}[dir=rtl] .sequence-table>li>.sequence-table-td:last-child,[dir=rtl] .sequence-table>li>.sequence-table-th:last-child{padding-left:0;padding-right:0}.sequence-table>li>.sequence-table-th{color:#37517e;color:var(--color-content-primary);white-space:nowrap}.sequence-table>li:before{position:static}.sequence-table>li:after{display:none}.sequence-table>li .sequence-icon{margin-top:-17px;position:static}.sequence-table>li:first-child .sequence-table-td,.sequence-table>li:first-child .sequence-table-th{padding-top:17px}.sequence-table>li:last-child .sequence-table-td,.sequence-table>li:last-child .sequence-table-th{padding-bottom:15px}.sequence-table:before{border:1px solid;border-color:inherit;content:" ";display:block;height:calc(100% - 56px);left:0;margin-top:28px;position:absolute;width:2px}[dir=rtl] .sequence-table:before{left:auto;right:0}.sequence-table.sequence-top:before{height:calc(100% - 28px);margin-top:0}.sequence-table.sequence-bottom:before{height:calc(100% - 28px)}.sequence-table.sequence-top.sequence-bottom:before{height:100%}.sequence-inverse>li>.sequence-table-td,.sequence-inverse>li>.sequence-table-th{color:#5d7079;color:var(--color-content-secondary)}.sequence-icon-md{font-size:.875rem;font-size:var(--font-size-14);height:32px;line-height:30px;margin-top:-6px;width:32px}.sequence-icon-lg{font-size:1rem;font-size:var(--font-size-16);height:40px;line-height:38px;margin-top:-6px;width:40px}.sequence-icon-lg .icon{font-size:22px;line-height:35px}.sequence-lg{padding-left:40px}.sequence-lg>li{padding-bottom:8px;padding-top:8px}.sequence-lg>li:first-child{margin-top:24px}.sequence-lg>li:last-child{margin-bottom:24px}@media (min-width:768px){.sequence-lg>li{padding-bottom:8px;padding-top:8px}}.sequence-lg>li:before{margin-top:8px}.sequence-lg>li:after{top:20px}.sequence-lg>li:first-child:after{height:100%}.sequence-lg>li:last-child:after{height:0}.sequence-lg.sequence-top>li:first-child{margin-top:0;padding-top:32px}.sequence-lg.sequence-top>li:first-child:after{height:calc(100% + 20px)}.sequence-lg.sequence-bottom>li:last-child{margin-bottom:0;padding-bottom:32px}.sequence-lg.sequence-bottom>li:last-child:after{height:calc(100% - 20px)}.sequence-lg.sequence-top.sequence-bottom>li:first-child:last-child:after{height:100%}.sequence-lg .sequence-icon{top:8px}@media (min-width:768px){.sequence-lg .sequence-icon{top:8px}}.sequence-lg.sequence-top>li:first-child .sequence-icon{top:32px}[dir=rtl] .sequence-lg{padding-left:0;padding-right:40px}.sequence-lg>li:before{margin-left:-43px}[dir=rtl] .sequence-lg>li:before{margin-left:0;margin-right:-43px}.sequence-lg>li:after{left:-40px}[dir=rtl] .sequence-lg>li:after{left:auto;right:-40px}.sequence-lg .sequence-icon{margin-left:-51px}[dir=rtl] .sequence-lg .sequence-icon{margin-left:0;margin-right:-51px}.sequence-lg .sequence-icon-md{margin-left:-55px}[dir=rtl] .sequence-lg .sequence-icon-md{margin-left:0;margin-right:-55px}.sequence-lg .sequence-icon-lg{margin-left:-59px}[dir=rtl] .sequence-lg .sequence-icon-lg{margin-left:0;margin-right:-59px}@media (min-width:768px){.sequence-lg{padding-left:48px}[dir=rtl] .sequence-lg{padding-left:0;padding-right:48px}.sequence-lg>li:before{margin-left:-51px}[dir=rtl] .sequence-lg>li:before{margin-left:0;margin-right:-51px}.sequence-lg>li:after{left:-48px}[dir=rtl] .sequence-lg>li:after{left:auto;right:-48px}.sequence-lg .sequence-icon{margin-left:-59px}[dir=rtl] .sequence-lg .sequence-icon{margin-left:0;margin-right:-59px}.sequence-lg .sequence-icon-md{margin-left:-63px}[dir=rtl] .sequence-lg .sequence-icon-md{margin-left:0;margin-right:-63px}.sequence-lg .sequence-icon-lg{margin-left:-67px}[dir=rtl] .sequence-lg .sequence-icon-lg{margin-left:0;margin-right:-67px}}.sequence-animate>li:after{animation:sequence-fill .3s linear 0s both;background-size:200% 200%}.sequence-animate.sequence-info>li:before{animation:sequence-pip-info .3s linear .3s both,sequence-pulse-info 3s linear .3s forwards}.sequence-animate.sequence-info>.active:before{animation:sequence-pip-info .3s linear .3s both,sequence-pulse-info 3s linear .3s infinite}.sequence-animate.sequence-warning>li:before{animation:sequence-pip-warning .3s linear .3s both,sequence-pulse-warning 3s linear .3s forwards}.sequence-animate.sequence-warning>.active:before{animation:sequence-pip-warning .3s linear .3s both,sequence-pulse-warning 3s linear .3s infinite}.sequence-animate.sequence-success>li:before{animation:sequence-pip-success .3s linear .3s both,sequence-pulse-success 3s linear .3s forwards}.sequence-animate.sequence-success>.active:before{animation:sequence-pip-success .3s linear .3s both,sequence-pulse-success 3s linear .3s infinite}.sequence-animate.sequence-danger>li:before{animation:sequence-pip-danger .3s linear .3s both,sequence-pulse-danger 3s linear .3s forwards}.sequence-animate.sequence-danger>.active:before{animation:sequence-pip-danger .3s linear .3s both,sequence-pulse-danger 3s linear .3s infinite}.sequence-animate>li:first-child:after,.sequence-animate>li:first-child:before{animation-delay:.3s!important}.sequence-animate>li:nth-child(2):after,.sequence-animate>li:nth-child(2):before{animation-delay:.6s!important}.sequence-animate>li:nth-child(3):after,.sequence-animate>li:nth-child(3):before{animation-delay:.9s!important}.sequence-animate>li:nth-child(4):after,.sequence-animate>li:nth-child(4):before{animation-delay:1.2s!important}.sequence-animate>li:nth-child(5):after,.sequence-animate>li:nth-child(5):before{animation-delay:1.5s!important}.sequence-animate>li:nth-child(6):after,.sequence-animate>li:nth-child(6):before{animation-delay:1.8s!important}.sequence-animate>li:nth-child(7):after,.sequence-animate>li:nth-child(7):before{animation-delay:2.1s!important}.sequence-animate>li:nth-child(8):after,.sequence-animate>li:nth-child(8):before{animation-delay:2.4s!important}.sequence-animate>li:nth-child(9):after,.sequence-animate>li:nth-child(9):before{animation-delay:2.7s!important}.sequence-animate>li:nth-child(10):after,.sequence-animate>li:nth-child(10):before{animation-delay:3s!important}.sequence-animate>.active~li:after,.sequence-animate>.active~li:before{animation:none}@keyframes sequence-fill{0%{background-position:0 100%}to{background-position:0 0}}@keyframes sequence-pulse-info{0%{box-shadow:0 0 0 0 rgba(0,185,255,.3)}50%{box-shadow:0 0 0 16px rgba(0,185,255,0)}to{box-shadow:0 0 0 0 rgba(0,185,255,0)}}@keyframes sequence-pulse-warning{0%{box-shadow:0 0 0 0 rgba(255,166,0,.3)}50%{box-shadow:0 0 0 16px rgba(255,166,0,0)}to{box-shadow:0 0 0 0 rgba(255,166,0,0)}}@keyframes sequence-pulse-success{0%{box-shadow:0 0 0 0 rgba(26,208,110,.3)}50%{box-shadow:0 0 0 16px rgba(26,208,110,0)}to{box-shadow:0 0 0 0 hsla(51,67%,66%,0)}}@keyframes sequence-pulse-danger{0%{box-shadow:0 0 0 0 rgba(245,54,54,.3)}50%{box-shadow:0 0 0 16px rgba(245,54,54,0)}to{box-shadow:0 0 0 0 rgba(245,54,54,0)}}