@transferwise/neptune-css 14.28.2 → 14.29.0

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 (44) hide show
  1. package/dist/css/accordion.css +24 -46
  2. package/dist/css/alerts.css +56 -124
  3. package/dist/css/badge.css +20 -30
  4. package/dist/css/breadcrumbs.css +6 -4
  5. package/dist/css/button-groups.css +116 -254
  6. package/dist/css/buttons.css +51 -90
  7. package/dist/css/circles.css +38 -76
  8. package/dist/css/close.css +1 -4
  9. package/dist/css/column-layout.css +38 -60
  10. package/dist/css/currency-flags.css +4 -17
  11. package/dist/css/decision.css +14 -12
  12. package/dist/css/dropdowns.css +59 -210
  13. package/dist/css/droppable.css +43 -38
  14. package/dist/css/flex.css +40 -136
  15. package/dist/css/footer.css +15 -14
  16. package/dist/css/grid.css +383 -1430
  17. package/dist/css/input-groups.css +254 -542
  18. package/dist/css/link-callout.css +2 -8
  19. package/dist/css/list-group.css +57 -92
  20. package/dist/css/loaders.css +11 -11
  21. package/dist/css/media.css +10 -34
  22. package/dist/css/modals.css +49 -59
  23. package/dist/css/navbar.css +372 -812
  24. package/dist/css/navs.css +59 -124
  25. package/dist/css/neptune-addons.css +687 -1234
  26. package/dist/css/neptune-core.css +123 -229
  27. package/dist/css/neptune-social-media.css +9 -33
  28. package/dist/css/neptune.css +3039 -6483
  29. package/dist/css/panels.css +143 -243
  30. package/dist/css/popovers.css +114 -295
  31. package/dist/css/process.css +64 -77
  32. package/dist/css/progress-bars.css +13 -19
  33. package/dist/css/select.css +21 -53
  34. package/dist/css/sequences.css +99 -219
  35. package/dist/css/table.css +48 -43
  36. package/dist/css/tick.css +10 -10
  37. package/dist/css/tooltip.css +49 -82
  38. package/dist/css/utilities.css +12 -40
  39. package/dist/css/wells.css +16 -16
  40. package/package.json +2 -2
  41. package/src/less/addons/_spacing-utilities.less +4 -4
  42. package/src/less/mixins/_logical-properties-IE-friendly.less +1 -0
  43. package/src/less/mixins/_logical-properties-modern-browsers.less +80 -41
  44. package/src/less/mixins/_logical-properties.less +3 -3
package/dist/css/sequences.css CHANGED
@@ -1,131 +1,91 @@
1
1
  .sequence {
2
- padding-left: 24px;
2
+ padding-inline-start: 24px;
3
3
  position: relative;
4
- margin-left: 25px;
5
- margin-top: 0;
6
- margin-bottom: 0;
4
+ margin-inline-start: 25px;
5
+ margin-block-start: 0;
6
+ margin-block-end: 0;
7
7
  font-size: 0.875rem;
8
8
  font-size: var(--font-size-14);
9
9
  border-color: rgba(0,0,0,0.10196);
10
10
  border-color: var(--color-border-neutral);
11
11
  }
12
12
  .sequence > li {
13
- padding-top: 2px;
14
- padding-bottom: 2px;
13
+ padding-block-start: 2px;
14
+ padding-block-end: 2px;
15
15
  }
16
16
  .sequence > li:first-child {
17
- margin-top: 16px;
17
+ margin-block-start: 16px;
18
18
  }
19
19
  .sequence > li:last-child {
20
- margin-bottom: 16px;
20
+ margin-block-end: 16px;
21
21
  }
22
22
  @media (min-width: 840px) {
23
23
  .sequence > li {
24
- padding-top: 4px;
25
- padding-bottom: 4px;
24
+ padding-block-start: 4px;
25
+ padding-block-end: 4px;
26
26
  }
27
27
  }
28
28
  .sequence > li::before {
29
- margin-top: 8px;
29
+ margin-block-start: 8px;
30
30
  }
31
31
  .sequence > li::after {
32
- top: 16px;
32
+ inset-block-start: 16px;
33
33
  }
34
34
  .sequence > li:first-child::after {
35
- height: 100%;
35
+ block-size: 100%;
36
36
  }
37
37
  .sequence > li:last-child::after {
38
- height: 0;
38
+ block-size: 0;
39
39
  }
40
40
  .sequence.sequence-top > li:first-child {
41
- padding-top: 20px;
42
- margin-top: 0;
41
+ padding-block-start: 20px;
42
+ margin-block-start: 0;
43
43
  }
44
44
  .sequence.sequence-top > li:first-child::after {
45
- height: calc(100% + 16px);
45
+ block-size: calc(100% + 16px);
46
46
  }
47
47
  .sequence.sequence-bottom > li:last-child {
48
- padding-bottom: 20px;
49
- margin-bottom: 0;
48
+ padding-block-end: 20px;
49
+ margin-block-end: 0;
50
50
  }
51
51
  .sequence.sequence-bottom > li:last-child::after {
52
- height: calc(100% - 16px);
52
+ block-size: calc(100% - 16px);
53
53
  }
54
54
  .sequence.sequence-top.sequence-bottom > li:first-child:last-child::after {
55
- height: 100%;
55
+ block-size: 100%;
56
56
  }
57
57
  .sequence .sequence-icon {
58
- top: 2px;
58
+ inset-block-start: 2px;
59
59
  }
60
60
  @media (min-width: 840px) {
61
61
  .sequence .sequence-icon {
62
- top: 4px;
62
+ inset-block-start: 4px;
63
63
  }
64
64
  }
65
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;
66
+ inset-block-start: 20px;
72
67
  }
73
68
  .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;
69
+ margin-inline-start: -27px;
80
70
  }
81
71
  .sequence > li::after {
82
- left: -24px;
83
- }
84
- [dir="rtl"] .sequence > li::after {
85
- right: -24px;
86
- left: auto;
87
- left: initial;
72
+ inset-inline-start: -24px;
88
73
  }
89
74
  .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;
75
+ margin-inline-start: -35px;
96
76
  }
97
77
  .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;
78
+ margin-inline-start: -39px;
104
79
  }
105
80
  .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;
81
+ margin-inline-start: -43px;
117
82
  }
118
83
  @media (min-width: 840px) {
119
84
  .sequence {
120
- padding-right: 24px;
85
+ padding-inline-end: 24px;
121
86
  font-size: 1rem;
122
87
  font-size: var(--font-size-16);
123
88
  }
124
- [dir="rtl"] .sequence {
125
- padding-left: 24px;
126
- padding-right: 0;
127
- padding-right: initial;
128
- }
129
89
  }
130
90
  .sequence > li {
131
91
  display: block;
@@ -156,12 +116,12 @@
156
116
  color: var(--color-content-accent-active);
157
117
  }
158
118
  .sequence > li p {
159
- margin-bottom: 0;
160
- padding-bottom: 8px;
161
- max-width: 600px;
119
+ margin-block-end: 0;
120
+ padding-block-end: 8px;
121
+ max-inline-size: 600px;
162
122
  }
163
123
  .sequence > li p:last-child {
164
- padding-bottom: 0;
124
+ padding-block-end: 0;
165
125
  }
166
126
  .sequence > li h1,
167
127
  .sequence > li h2,
@@ -172,14 +132,14 @@
172
132
  .sequence > li .h3,
173
133
  .sequence > li .h4,
174
134
  .sequence > li .btn-toolbar {
175
- margin-bottom: 16px;
135
+ margin-block-end: 16px;
176
136
  }
177
137
  .sequence > li::before {
178
138
  content: "";
179
139
  display: block;
180
140
  position: absolute;
181
- width: 8px;
182
- height: 8px;
141
+ inline-size: 8px;
142
+ block-size: 8px;
183
143
  border-radius: 50%;
184
144
  z-index: 2;
185
145
  border-width: 4px;
@@ -190,8 +150,8 @@
190
150
  .sequence > li::after {
191
151
  content: "";
192
152
  position: absolute;
193
- width: 2px;
194
- height: 100%;
153
+ inline-size: 2px;
154
+ block-size: 100%;
195
155
  border-style: solid;
196
156
  border-color: inherit;
197
157
  outline: 0;
@@ -244,7 +204,7 @@
244
204
  font-weight: var(--font-weight-regular);
245
205
  }
246
206
  .sequence-top > li:first-child::after {
247
- top: 0;
207
+ inset-block-start: 0;
248
208
  }
249
209
  .sequence-inverse > li {
250
210
  border-color: rgba(0,0,0,0.10196);
@@ -421,12 +381,12 @@
421
381
  .sequence-icon {
422
382
  position: absolute;
423
383
  display: block;
424
- margin-left: -35px;
384
+ margin-inline-start: -35px;
425
385
  background-color: #ffffff;
426
386
  background-color: var(--color-background-screen);
427
387
  border-radius: 50%;
428
- width: 24px;
429
- height: 24px;
388
+ inline-size: 24px;
389
+ block-size: 24px;
430
390
  z-index: 2;
431
391
  text-align: center;
432
392
  -webkit-text-decoration: none !important;
@@ -435,15 +395,10 @@
435
395
  border-style: solid;
436
396
  border-color: rgba(0,0,0,0.10196);
437
397
  border-color: var(--color-border-neutral);
438
- top: 4px;
398
+ inset-block-start: 4px;
439
399
  font-size: 0.75rem;
440
400
  font-size: var(--font-size-12);
441
401
  }
442
- [dir="rtl"] .sequence-icon {
443
- margin-right: -35px;
444
- margin-left: 0;
445
- margin-left: initial;
446
- }
447
402
  .sequence-icon .icon {
448
403
  font-size: 1rem;
449
404
  font-size: var(--font-size-16);
@@ -478,25 +433,15 @@
478
433
  .sequence-table > li > .sequence-table-td,
479
434
  .sequence-table > li > .sequence-table-th {
480
435
  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;
436
+ padding-block: 4px;
437
+ padding-block: var(--size-4);
438
+ padding-inline: 12px;
439
+ padding-inline: var(--size-12);
440
+ padding-inline-start: 0;
490
441
  }
491
442
  .sequence-table > li > .sequence-table-td:last-child,
492
443
  .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;
444
+ padding-inline-end: 0;
500
445
  }
501
446
  .sequence-table > li > .sequence-table-th {
502
447
  color: #37517e;
@@ -513,42 +458,37 @@
513
458
  .sequence-table > li .sequence-icon {
514
459
  position: static;
515
460
  position: initial;
516
- margin-top: -17px;
461
+ margin-block-start: -17px;
517
462
  }
518
463
  .sequence-table > li:first-child .sequence-table-td,
519
464
  .sequence-table > li:first-child .sequence-table-th {
520
- padding-top: 17px;
465
+ padding-block-start: 17px;
521
466
  }
522
467
  .sequence-table > li:last-child .sequence-table-td,
523
468
  .sequence-table > li:last-child .sequence-table-th {
524
- padding-bottom: 15px;
469
+ padding-block-end: 15px;
525
470
  }
526
471
  .sequence-table::before {
527
472
  content: " ";
528
- width: 2px;
529
- left: 0;
473
+ inline-size: 2px;
474
+ inset-inline-start: 0;
530
475
  position: absolute;
531
476
  border-width: 1px;
532
477
  border-style: solid;
533
478
  border-color: inherit;
534
- height: calc(100% - 56px);
535
- margin-top: 28px;
479
+ block-size: calc(100% - 56px);
480
+ margin-block-start: 28px;
536
481
  display: block;
537
482
  }
538
- [dir="rtl"] .sequence-table::before {
539
- right: 0;
540
- left: auto;
541
- left: initial;
542
- }
543
483
  .sequence-table.sequence-top::before {
544
- height: calc(100% - 28px);
545
- margin-top: 0;
484
+ block-size: calc(100% - 28px);
485
+ margin-block-start: 0;
546
486
  }
547
487
  .sequence-table.sequence-bottom::before {
548
- height: calc(100% - 28px);
488
+ block-size: calc(100% - 28px);
549
489
  }
550
490
  .sequence-table.sequence-top.sequence-bottom::before {
551
- height: 100%;
491
+ block-size: 100%;
552
492
  }
553
493
  .sequence-inverse > li > .sequence-table-th,
554
494
  .sequence-inverse > li > .sequence-table-td {
@@ -556,18 +496,18 @@
556
496
  color: var(--color-content-secondary);
557
497
  }
558
498
  .sequence-icon-md {
559
- width: 32px;
560
- height: 32px;
499
+ inline-size: 32px;
500
+ block-size: 32px;
561
501
  line-height: 30px;
562
- margin-top: -6px;
502
+ margin-block-start: -6px;
563
503
  font-size: 0.875rem;
564
504
  font-size: var(--font-size-14);
565
505
  }
566
506
  .sequence-icon-lg {
567
- width: 40px;
568
- height: 40px;
507
+ inline-size: 40px;
508
+ block-size: 40px;
569
509
  line-height: 38px;
570
- margin-top: -6px;
510
+ margin-block-start: -6px;
571
511
  font-size: 1rem;
572
512
  font-size: var(--font-size-16);
573
513
  }
@@ -576,157 +516,97 @@
576
516
  line-height: 35px;
577
517
  }
578
518
  .sequence-lg {
579
- padding-left: 40px;
519
+ padding-inline-start: 40px;
580
520
  }
581
521
  .sequence-lg > li {
582
- padding-top: 8px;
583
- padding-bottom: 8px;
522
+ padding-block-start: 8px;
523
+ padding-block-end: 8px;
584
524
  }
585
525
  .sequence-lg > li:first-child {
586
- margin-top: 24px;
526
+ margin-block-start: 24px;
587
527
  }
588
528
  .sequence-lg > li:last-child {
589
- margin-bottom: 24px;
529
+ margin-block-end: 24px;
590
530
  }
591
531
  @media (min-width: 840px) {
592
532
  .sequence-lg > li {
593
- padding-top: 8px;
594
- padding-bottom: 8px;
533
+ padding-block-start: 8px;
534
+ padding-block-end: 8px;
595
535
  }
596
536
  }
597
537
  .sequence-lg > li::before {
598
- margin-top: 8px;
538
+ margin-block-start: 8px;
599
539
  }
600
540
  .sequence-lg > li::after {
601
- top: 20px;
541
+ inset-block-start: 20px;
602
542
  }
603
543
  .sequence-lg > li:first-child::after {
604
- height: 100%;
544
+ block-size: 100%;
605
545
  }
606
546
  .sequence-lg > li:last-child::after {
607
- height: 0;
547
+ block-size: 0;
608
548
  }
609
549
  .sequence-lg.sequence-top > li:first-child {
610
- padding-top: 32px;
611
- margin-top: 0;
550
+ padding-block-start: 32px;
551
+ margin-block-start: 0;
612
552
  }
613
553
  .sequence-lg.sequence-top > li:first-child::after {
614
- height: calc(100% + 20px);
554
+ block-size: calc(100% + 20px);
615
555
  }
616
556
  .sequence-lg.sequence-bottom > li:last-child {
617
- padding-bottom: 32px;
618
- margin-bottom: 0;
557
+ padding-block-end: 32px;
558
+ margin-block-end: 0;
619
559
  }
620
560
  .sequence-lg.sequence-bottom > li:last-child::after {
621
- height: calc(100% - 20px);
561
+ block-size: calc(100% - 20px);
622
562
  }
623
563
  .sequence-lg.sequence-top.sequence-bottom > li:first-child:last-child::after {
624
- height: 100%;
564
+ block-size: 100%;
625
565
  }
626
566
  .sequence-lg .sequence-icon {
627
- top: 8px;
567
+ inset-block-start: 8px;
628
568
  }
629
569
  @media (min-width: 840px) {
630
570
  .sequence-lg .sequence-icon {
631
- top: 8px;
571
+ inset-block-start: 8px;
632
572
  }
633
573
  }
634
574
  .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;
575
+ inset-block-start: 32px;
641
576
  }
642
577
  .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;
578
+ margin-inline-start: -43px;
649
579
  }
650
580
  .sequence-lg > li::after {
651
- left: -40px;
652
- }
653
- [dir="rtl"] .sequence-lg > li::after {
654
- right: -40px;
655
- left: auto;
656
- left: initial;
581
+ inset-inline-start: -40px;
657
582
  }
658
583
  .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;
584
+ margin-inline-start: -51px;
665
585
  }
666
586
  .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;
587
+ margin-inline-start: -55px;
673
588
  }
674
589
  .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;
590
+ margin-inline-start: -59px;
681
591
  }
682
592
  @media (min-width: 840px) {
683
593
  .sequence-lg {
684
- padding-left: 48px;
685
- }
686
- [dir="rtl"] .sequence-lg {
687
- padding-right: 48px;
688
- padding-left: 0;
689
- padding-left: initial;
594
+ padding-inline-start: 48px;
690
595
  }
691
596
  .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;
597
+ margin-inline-start: -51px;
698
598
  }
699
599
  .sequence-lg > li::after {
700
- left: -48px;
701
- }
702
- [dir="rtl"] .sequence-lg > li::after {
703
- right: -48px;
704
- left: auto;
705
- left: initial;
600
+ inset-inline-start: -48px;
706
601
  }
707
602
  .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;
603
+ margin-inline-start: -59px;
714
604
  }
715
605
  .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;
606
+ margin-inline-start: -63px;
722
607
  }
723
608
  .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;
609
+ margin-inline-start: -67px;
730
610
  }
731
611
  }
732
612
  .sequence-animate > li::after {