@transferwise/neptune-css 0.0.0-experimental-7cfec48 → 0.0.0-experimental-1ed1574

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 (59) hide show
  1. package/dist/css/accordion.css +21 -6
  2. package/dist/css/alerts.css +159 -14
  3. package/dist/css/background.css +6 -2
  4. package/dist/css/badge.css +11 -1
  5. package/dist/css/breadcrumbs.css +2 -1
  6. package/dist/css/button-groups.css +8 -2
  7. package/dist/css/buttons.css +212 -142
  8. package/dist/css/chevron.css +1 -1
  9. package/dist/css/circles.css +22 -10
  10. package/dist/css/close.css +3 -2
  11. package/dist/css/column-layout.css +4 -0
  12. package/dist/css/currency-flags.css +5 -1
  13. package/dist/css/decision.css +14 -5
  14. package/dist/css/dropdowns.css +28 -8
  15. package/dist/css/droppable.css +18 -11
  16. package/dist/css/flex.css +32 -0
  17. package/dist/css/footer.css +46 -8
  18. package/dist/css/grid.css +6 -0
  19. package/dist/css/input-groups.css +188 -142
  20. package/dist/css/link-callout.css +2 -0
  21. package/dist/css/list-group.css +39 -8
  22. package/dist/css/media.css +6 -0
  23. package/dist/css/modals.css +13 -3
  24. package/dist/css/navbar-base.css +107 -19
  25. package/dist/css/navbar.css +175 -37
  26. package/dist/css/navs.css +33 -8
  27. package/dist/css/neptune-addons.css +466 -4
  28. package/dist/css/neptune-core.css +196 -32
  29. package/dist/css/neptune.css +2204 -655
  30. package/dist/css/panels.css +3 -0
  31. package/dist/css/popovers.css +30 -6
  32. package/dist/css/process.css +8 -8
  33. package/dist/css/progress-bars.css +11 -2
  34. package/dist/css/ring.css +2 -2
  35. package/dist/css/select.css +12 -2
  36. package/dist/css/sequences.css +173 -25
  37. package/dist/css/table.css +65 -18
  38. package/dist/css/tick.css +2 -0
  39. package/dist/css/tooltip.css +7 -1
  40. package/dist/css/wells.css +25 -5
  41. package/dist/less/neptune-tokens.less +264 -153
  42. package/dist/props/neptune-tokens.css +132 -145
  43. package/package.json +2 -2
  44. package/src/less/addons/_background-utilities.less +33 -33
  45. package/src/less/alerts.less +28 -28
  46. package/src/less/background.less +3 -0
  47. package/src/less/buttons.less +19 -19
  48. package/src/less/column-layout.less +1 -1
  49. package/src/less/core/_scaffolding.less +13 -13
  50. package/src/less/core/_typography-utilities.less +18 -18
  51. package/src/less/dropdowns.less +7 -7
  52. package/src/less/footer.less +26 -26
  53. package/src/less/modals.less +1 -1
  54. package/src/less/navbar-base.less +25 -25
  55. package/src/less/navbar.less +3 -3
  56. package/src/less/navs.less +9 -9
  57. package/src/less/sequences.less +13 -13
  58. package/src/less/table.less +31 -31
  59. package/src/variables/neptune-tokens.less +8 -8
package/dist/css/footer.css CHANGED
@@ -1,31 +1,41 @@
1
1
  @media (min-width: 768px) {
2
2
  }@media (min-width: 768px) {
3
3
  }.footer {
4
- background-color: rgba(22,51,0,0.07843);
4
+ background-color: rgba(134,167,189,0.10196);
5
5
  background-color: var(--color-background-neutral);
6
+ font-size: 0.875rem;
6
7
  font-size: var(--font-size-14);
7
8
  line-height: 155%;
8
9
  letter-spacing: -0.006em;
10
+ font-weight: 400;
9
11
  font-weight: var(--font-weight-regular);
12
+ padding-top: calc(8px * 10);
10
13
  padding-top: calc(var(--size-8) * 10);
14
+ padding-bottom: calc(8px * 10);
11
15
  padding-bottom: calc(var(--size-8) * 10);
12
16
  }@media (min-width: 576px) {
13
17
  .footer {
18
+ padding-top: calc(8px * 15);
14
19
  padding-top: calc(var(--size-8) * 15);
20
+ padding-bottom: calc(8px * 15);
15
21
  padding-bottom: calc(var(--size-8) * 15);
16
22
  }
17
23
  }@media (min-width: 992px) {
18
24
  .footer {
25
+ padding-top: calc(8px * 20);
19
26
  padding-top: calc(var(--size-8) * 20);
27
+ padding-bottom: calc(8px * 20);
20
28
  padding-bottom: calc(var(--size-8) * 20);
21
29
  }
22
30
  }.footer .footer-link,
23
31
  .footer .link-icon {
24
- color: #454745;
32
+ color: #5d7079;
25
33
  color: var(--color-content-secondary);
34
+ font-size: 0.875rem;
26
35
  font-size: var(--font-size-14);
27
36
  line-height: 155%;
28
37
  letter-spacing: -0.006em;
38
+ font-weight: 400;
29
39
  font-weight: var(--font-weight-regular);
30
40
  }.footer .footer-link:hover,
31
41
  .footer .link-icon:hover,
@@ -33,18 +43,18 @@
33
43
  .footer .link-icon:active,
34
44
  .footer .footer-link:focus,
35
45
  .footer .link-icon:focus {
36
- color: #454745;
46
+ color: #5d7079;
37
47
  color: var(--color-content-secondary);
38
48
  }.footer .footer-title {
39
- color: #0e0f0c;
49
+ color: #37517e;
40
50
  color: var(--color-content-primary);
41
51
  }.footer .footer-title .footer-link {
42
- color: #0e0f0c;
52
+ color: #37517e;
43
53
  color: var(--color-content-primary);
44
54
  }.footer .footer-title .footer-link:hover,
45
55
  .footer .footer-title .footer-link:active,
46
56
  .footer .footer-title .footer-link:focus {
47
- color: #0e0f0c;
57
+ color: #37517e;
48
58
  color: var(--color-content-primary);
49
59
  }.footer .logo {
50
60
  color: transparent;
@@ -56,15 +66,43 @@
56
66
  -webkit-text-decoration: none;
57
67
  text-decoration: none;
58
68
  }.footer .link-icon svg {
59
- fill: #454745;
69
+ fill: #5d7079;
60
70
  fill: var(--color-content-secondary);
61
71
  }.footer .link-icon svg:hover,
62
72
  .footer .link-icon svg:active,
63
73
  .footer .link-icon svg:focus {
64
- fill: #454745;
74
+ fill: #5d7079;
65
75
  fill: var(--color-content-secondary);
76
+ }.footer.footer-inverse {
77
+ background: #37517e;
78
+ }.footer.footer-inverse .footer-link,
79
+ .footer.footer-inverse .link-icon {
80
+ color: #ffffff;
81
+ }.footer.footer-inverse .footer-link:hover,
82
+ .footer.footer-inverse .link-icon:hover,
83
+ .footer.footer-inverse .footer-link:active,
84
+ .footer.footer-inverse .link-icon:active,
85
+ .footer.footer-inverse .footer-link:focus,
86
+ .footer.footer-inverse .link-icon:focus {
87
+ color: #ffffff;
88
+ }.footer.footer-inverse .footer-link svg,
89
+ .footer.footer-inverse .link-icon svg {
90
+ fill: #ffffff;
91
+ }.footer.footer-inverse .footer-link svg:hover,
92
+ .footer.footer-inverse .link-icon svg:hover,
93
+ .footer.footer-inverse .footer-link svg:active,
94
+ .footer.footer-inverse .link-icon svg:active,
95
+ .footer.footer-inverse .footer-link svg:focus,
96
+ .footer.footer-inverse .link-icon svg:focus {
97
+ fill: #ffffff;
98
+ }.footer.footer-inverse .footer-title {
99
+ color: #ffffff;
66
100
  }.footer.footer-inverse hr {
67
101
  opacity: 0.1;
102
+ }.footer.footer-inverse .tiny,
103
+ .footer.footer-inverse .body-3,
104
+ .footer.footer-inverse .np-text-body-default {
105
+ color: #ffffff;
68
106
  }@media (max-width: 575px) {
69
107
  .footer {
70
108
  position: relative;
package/dist/css/grid.css CHANGED
@@ -2266,6 +2266,7 @@
2266
2266
  [class*="col-md"],
2267
2267
  [class*="col-lg"],
2268
2268
  [class*="col-xl"] {
2269
+ margin-bottom: calc(8px * 2);
2269
2270
  margin-bottom: calc(var(--size-8) * 2);
2270
2271
  }
2271
2272
  [class*="col-xs"] {
@@ -2300,16 +2301,21 @@
2300
2301
  }
2301
2302
  @media (max-width: 575px) {
2302
2303
  .row-equal-height .col-xs-12 {
2304
+ margin-bottom: 12px;
2303
2305
  margin-bottom: var(--size-12);
2304
2306
  }
2305
2307
  }
2306
2308
  @media (max-width: 575px) {
2307
2309
  .row {
2310
+ margin-right: calc(8px * -1);
2308
2311
  margin-right: calc(var(--size-8) * -1);
2312
+ margin-left: calc(8px * -1);
2309
2313
  margin-left: calc(var(--size-8) * -1);
2310
2314
  }
2311
2315
  [class*="col-"] {
2316
+ padding-right: 8px;
2312
2317
  padding-right: var(--size-8);
2318
+ padding-left: 8px;
2313
2319
  padding-left: var(--size-8);
2314
2320
  }
2315
2321
  }