@transferwise/neptune-css 14.28.2 → 14.29.1

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 (51) hide show
  1. package/dist/css/accordion.css +27 -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 +50 -95
  7. package/dist/css/chevron.css +3 -0
  8. package/dist/css/circles.css +38 -76
  9. package/dist/css/close.css +1 -4
  10. package/dist/css/column-layout.css +38 -60
  11. package/dist/css/currency-flags.css +4 -17
  12. package/dist/css/decision.css +14 -12
  13. package/dist/css/dropdowns.css +59 -210
  14. package/dist/css/droppable.css +43 -38
  15. package/dist/css/flex.css +40 -136
  16. package/dist/css/footer.css +15 -14
  17. package/dist/css/grid.css +383 -1430
  18. package/dist/css/input-groups.css +254 -542
  19. package/dist/css/link-callout.css +2 -8
  20. package/dist/css/list-group.css +57 -92
  21. package/dist/css/loaders.css +11 -11
  22. package/dist/css/media.css +10 -34
  23. package/dist/css/modals.css +49 -59
  24. package/dist/css/navbar.css +372 -812
  25. package/dist/css/navs.css +59 -124
  26. package/dist/css/neptune-addons.css +687 -1234
  27. package/dist/css/neptune-core.css +123 -229
  28. package/dist/css/neptune-social-media.css +9 -33
  29. package/dist/css/neptune.css +3060 -6498
  30. package/dist/css/panels.css +143 -243
  31. package/dist/css/popovers.css +114 -295
  32. package/dist/css/process.css +79 -86
  33. package/dist/css/progress-bars.css +13 -19
  34. package/dist/css/select.css +21 -53
  35. package/dist/css/sequences.css +99 -219
  36. package/dist/css/table.css +48 -43
  37. package/dist/css/tick.css +14 -11
  38. package/dist/css/tooltip.css +49 -82
  39. package/dist/css/utilities.css +12 -40
  40. package/dist/css/wells.css +16 -16
  41. package/dist/less/legacy-variables.css +0 -0
  42. package/dist/less/neptune-tokens.css +0 -0
  43. package/package.json +2 -2
  44. package/src/less/addons/_spacing-utilities.less +4 -4
  45. package/src/less/buttons.less +3 -11
  46. package/src/less/chevron.less +4 -0
  47. package/src/less/mixins/_logical-properties-IE-friendly.less +1 -0
  48. package/src/less/mixins/_logical-properties-modern-browsers.less +80 -41
  49. package/src/less/mixins/_logical-properties.less +3 -3
  50. package/src/less/process.less +13 -6
  51. package/src/less/tick.less +7 -3
package/dist/css/flex.css CHANGED
@@ -399,198 +399,102 @@
399
399
  display: flex;
400
400
  flex: 1;
401
401
  flex-wrap: wrap;
402
- margin-right: calc(-1 * 16px);
403
- margin-right: calc(-1 * var(--size-16));
404
- margin-left: calc(-1 * 16px);
405
- margin-left: calc(-1 * var(--size-16));
406
- }
407
- [dir="rtl"] .flex__inner {
408
- margin-left: calc(-1 * 16px);
409
- margin-left: calc(-1 * var(--size-16));
410
- margin-right: 0;
411
- margin-right: initial;
412
- }
413
- [dir="rtl"] .flex__inner {
414
- margin-right: calc(-1 * 16px);
415
- margin-right: calc(-1 * var(--size-16));
416
- margin-left: 0;
417
- margin-left: initial;
402
+ margin-inline-end: calc(-1 * 16px);
403
+ margin-inline-end: calc(-1 * var(--size-16));
404
+ margin-inline-start: calc(-1 * 16px);
405
+ margin-inline-start: calc(-1 * var(--size-16));
418
406
  }
419
407
  @media (min-width: 600px) {
420
408
  .flex__inner {
421
- margin-right: calc(-1 * 24px);
422
- margin-right: calc(-1 * var(--size-24));
423
- margin-left: calc(-1 * 24px);
424
- margin-left: calc(-1 * var(--size-24));
425
- }
426
- [dir="rtl"] .flex__inner {
427
- margin-left: calc(-1 * 24px);
428
- margin-left: calc(-1 * var(--size-24));
429
- margin-right: 0;
430
- margin-right: initial;
431
- }
432
- [dir="rtl"] .flex__inner {
433
- margin-right: calc(-1 * 24px);
434
- margin-right: calc(-1 * var(--size-24));
435
- margin-left: 0;
436
- margin-left: initial;
409
+ margin-inline-end: calc(-1 * 24px);
410
+ margin-inline-end: calc(-1 * var(--size-24));
411
+ margin-inline-start: calc(-1 * 24px);
412
+ margin-inline-start: calc(-1 * var(--size-24));
437
413
  }
438
414
  }
439
415
  @media (min-width: 840px) {
440
416
  .flex__inner {
441
- margin-right: calc(-1 * 32px);
442
- margin-right: calc(-1 * var(--size-32));
443
- margin-left: calc(-1 * 32px);
444
- margin-left: calc(-1 * var(--size-32));
445
- }
446
- [dir="rtl"] .flex__inner {
447
- margin-left: calc(-1 * 32px);
448
- margin-left: calc(-1 * var(--size-32));
449
- margin-right: 0;
450
- margin-right: initial;
451
- }
452
- [dir="rtl"] .flex__inner {
453
- margin-right: calc(-1 * 32px);
454
- margin-right: calc(-1 * var(--size-32));
455
- margin-left: 0;
456
- margin-left: initial;
417
+ margin-inline-end: calc(-1 * 32px);
418
+ margin-inline-end: calc(-1 * var(--size-32));
419
+ margin-inline-start: calc(-1 * 32px);
420
+ margin-inline-start: calc(-1 * var(--size-32));
457
421
  }
458
422
  }
459
423
  @media (min-width: 1160px) {
460
424
  .flex__inner {
461
- margin-right: calc(-1 * 48px);
462
- margin-right: calc(-1 * var(--size-48));
463
- margin-left: calc(-1 * 48px);
464
- margin-left: calc(-1 * var(--size-48));
465
- }
466
- [dir="rtl"] .flex__inner {
467
- margin-left: calc(-1 * 48px);
468
- margin-left: calc(-1 * var(--size-48));
469
- margin-right: 0;
470
- margin-right: initial;
471
- }
472
- [dir="rtl"] .flex__inner {
473
- margin-right: calc(-1 * 48px);
474
- margin-right: calc(-1 * var(--size-48));
475
- margin-left: 0;
476
- margin-left: initial;
425
+ margin-inline-end: calc(-1 * 48px);
426
+ margin-inline-end: calc(-1 * var(--size-48));
427
+ margin-inline-start: calc(-1 * 48px);
428
+ margin-inline-start: calc(-1 * var(--size-48));
477
429
  }
478
430
  }
479
431
  .flex__item {
480
- padding-right: 16px;
481
- padding-right: var(--size-16);
482
- padding-left: 16px;
483
- padding-left: var(--size-16);
484
- }
485
- [dir="rtl"] .flex__item {
486
- padding-left: 16px;
487
- padding-left: var(--size-16);
488
- padding-right: 0;
489
- padding-right: initial;
490
- }
491
- [dir="rtl"] .flex__item {
492
- padding-right: 16px;
493
- padding-right: var(--size-16);
494
- padding-left: 0;
495
- padding-left: initial;
432
+ padding-inline-end: 16px;
433
+ padding-inline-end: var(--size-16);
434
+ padding-inline-start: 16px;
435
+ padding-inline-start: var(--size-16);
496
436
  }
497
437
  @media (min-width: 600px) {
498
438
  .flex__item {
499
- padding-right: 24px;
500
- padding-right: var(--size-24);
501
- padding-left: 24px;
502
- padding-left: var(--size-24);
503
- }
504
- [dir="rtl"] .flex__item {
505
- padding-left: 24px;
506
- padding-left: var(--size-24);
507
- padding-right: 0;
508
- padding-right: initial;
509
- }
510
- [dir="rtl"] .flex__item {
511
- padding-right: 24px;
512
- padding-right: var(--size-24);
513
- padding-left: 0;
514
- padding-left: initial;
439
+ padding-inline-end: 24px;
440
+ padding-inline-end: var(--size-24);
441
+ padding-inline-start: 24px;
442
+ padding-inline-start: var(--size-24);
515
443
  }
516
444
  }
517
445
  @media (min-width: 840px) {
518
446
  .flex__item {
519
- padding-right: 32px;
520
- padding-right: var(--size-32);
521
- padding-left: 32px;
522
- padding-left: var(--size-32);
523
- }
524
- [dir="rtl"] .flex__item {
525
- padding-left: 32px;
526
- padding-left: var(--size-32);
527
- padding-right: 0;
528
- padding-right: initial;
529
- }
530
- [dir="rtl"] .flex__item {
531
- padding-right: 32px;
532
- padding-right: var(--size-32);
533
- padding-left: 0;
534
- padding-left: initial;
447
+ padding-inline-end: 32px;
448
+ padding-inline-end: var(--size-32);
449
+ padding-inline-start: 32px;
450
+ padding-inline-start: var(--size-32);
535
451
  }
536
452
  }
537
453
  @media (min-width: 1160px) {
538
454
  .flex__item {
539
- padding-right: 48px;
540
- padding-right: var(--size-48);
541
- padding-left: 48px;
542
- padding-left: var(--size-48);
543
- }
544
- [dir="rtl"] .flex__item {
545
- padding-left: 48px;
546
- padding-left: var(--size-48);
547
- padding-right: 0;
548
- padding-right: initial;
549
- }
550
- [dir="rtl"] .flex__item {
551
- padding-right: 48px;
552
- padding-right: var(--size-48);
553
- padding-left: 0;
554
- padding-left: initial;
455
+ padding-inline-end: 48px;
456
+ padding-inline-end: var(--size-48);
457
+ padding-inline-start: 48px;
458
+ padding-inline-start: var(--size-48);
555
459
  }
556
460
  }
557
461
  .flex__item--4 {
558
462
  flex: 0 0 calc(100% / 3);
559
- max-width: calc(100% / 3);
463
+ max-inline-size: calc(100% / 3);
560
464
  }
561
465
  @media (max-width: 839.98px) {
562
466
  .flex__item--4--md {
563
467
  flex: 0 0 calc(100% / 3);
564
- max-width: calc(100% / 3);
468
+ max-inline-size: calc(100% / 3);
565
469
  }
566
470
  }
567
471
  .flex__item--8 {
568
472
  flex: 0 0 calc(100% / 1.5);
569
- max-width: calc(100% / 1.5);
473
+ max-inline-size: calc(100% / 1.5);
570
474
  }
571
475
  @media (max-width: 839.98px) {
572
476
  .flex__item--8--md {
573
477
  flex: 0 0 calc(100% / 1.5);
574
- max-width: calc(100% / 1.5);
478
+ max-inline-size: calc(100% / 1.5);
575
479
  }
576
480
  }
577
481
  .flex__item--6 {
578
482
  flex: 0 0 50%;
579
- max-width: 50%;
483
+ max-inline-size: 50%;
580
484
  }
581
485
  @media (max-width: 839.98px) {
582
486
  .flex__item--6--md {
583
487
  flex: 0 0 50%;
584
- max-width: 50%;
488
+ max-inline-size: 50%;
585
489
  }
586
490
  }
587
491
  .flex__item--12 {
588
492
  flex: 0 0 100%;
589
- max-width: 100%;
493
+ max-inline-size: 100%;
590
494
  }
591
495
  @media (max-width: 839.98px) {
592
496
  .flex__item--12--md {
593
497
  flex: 0 0 100%;
594
- max-width: 100%;
498
+ max-inline-size: 100%;
595
499
  }
596
500
  }
package/dist/css/footer.css CHANGED
@@ -7,25 +7,25 @@
7
7
  letter-spacing: -0.006em;
8
8
  font-weight: 400;
9
9
  font-weight: var(--font-weight-regular);
10
- padding-top: calc(8px * 10);
11
- padding-top: calc(var(--size-8) * 10);
12
- padding-bottom: calc(8px * 10);
13
- padding-bottom: calc(var(--size-8) * 10);
10
+ padding-block-start: calc(8px * 10);
11
+ padding-block-start: calc(var(--size-8) * 10);
12
+ padding-block-end: calc(8px * 10);
13
+ padding-block-end: calc(var(--size-8) * 10);
14
14
  }
15
15
  @media (min-width: 600px) {
16
16
  .footer {
17
- padding-top: calc(8px * 15);
18
- padding-top: calc(var(--size-8) * 15);
19
- padding-bottom: calc(8px * 15);
20
- padding-bottom: calc(var(--size-8) * 15);
17
+ padding-block-start: calc(8px * 15);
18
+ padding-block-start: calc(var(--size-8) * 15);
19
+ padding-block-end: calc(8px * 15);
20
+ padding-block-end: calc(var(--size-8) * 15);
21
21
  }
22
22
  }
23
23
  @media (min-width: 1160px) {
24
24
  .footer {
25
- padding-top: calc(8px * 20);
26
- padding-top: calc(var(--size-8) * 20);
27
- padding-bottom: calc(8px * 20);
28
- padding-bottom: calc(var(--size-8) * 20);
25
+ padding-block-start: calc(8px * 20);
26
+ padding-block-start: calc(var(--size-8) * 20);
27
+ padding-block-end: calc(8px * 20);
28
+ padding-block-end: calc(var(--size-8) * 20);
29
29
  }
30
30
  }
31
31
  .footer .footer-link,
@@ -66,9 +66,10 @@
66
66
  color: transparent;
67
67
  }
68
68
  .footer .icon {
69
- margin: 0 5px;
69
+ margin-block: 0;
70
+ margin-inline: 5px;
70
71
  font-size: 32px !important;
71
- width: 24px;
72
+ inline-size: 24px;
72
73
  }
73
74
  .footer .link-icon {
74
75
  -webkit-text-decoration: none;