@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/navs.css CHANGED
@@ -17,29 +17,37 @@
17
17
  display: block;
18
18
  outline-offset: -1px;
19
19
  padding: 9px 24px 7px;
20
- color: #0e0f0c;
20
+ color: #37517e;
21
21
  color: var(--color-content-primary);
22
+ font-weight: 400;
22
23
  font-weight: var(--font-weight-regular);
24
+ font-size: 1rem;
23
25
  font-size: var(--font-size-16);
24
26
  }
25
27
  .nav > li > a:hover,
26
28
  .nav > li > a:focus {
27
29
  -webkit-text-decoration: none;
28
30
  text-decoration: none;
31
+ color: #0084b3;
29
32
  color: var(--color-content-accent-hover);
30
33
  }
31
34
  .nav > li > a:active {
35
+ color: #0077a5;
32
36
  color: var(--color-content-accent-active);
33
37
  }
34
38
  .nav > .active > a {
39
+ color: #0097c7;
35
40
  color: var(--color-content-accent);
41
+ font-weight: 600;
36
42
  font-weight: var(--font-weight-semi-bold);
37
43
  }
38
44
  .nav > .active > a:hover,
39
45
  .nav > .active > a:focus {
46
+ color: #0084b3;
40
47
  color: var(--color-content-accent-hover);
41
48
  }
42
49
  .nav > .active > a:active {
50
+ color: #0077a5;
43
51
  color: var(--color-content-accent-active);
44
52
  }
45
53
  .nav > .disabled > a:hover,
@@ -51,7 +59,7 @@
51
59
  .nav .open > a,
52
60
  .nav .open > a:hover,
53
61
  .nav .open > a:focus {
54
- background-color: rgba(22,51,0,0.07843);
62
+ background-color: rgba(134,167,189,0.10196);
55
63
  background-color: var(--color-background-neutral);
56
64
  }
57
65
  .nav .nav-divider {
@@ -63,8 +71,14 @@
63
71
  .nav > li > a > img {
64
72
  max-width: none;
65
73
  }
74
+ .nav-inverse > li > a {
75
+ color: #ffffff;
76
+ }
77
+ .nav-inverse > li.active > a {
78
+ background-color: #2e4369;
79
+ }
66
80
  .nav-tabs {
67
- border-bottom: 1px solid rgba(14,15,12,0.12157);
81
+ border-bottom: 1px solid rgba(0,0,0,0.10196);
68
82
  border-bottom: 1px solid var(--color-border-neutral);
69
83
  }
70
84
  .nav-tabs > li {
@@ -76,8 +90,10 @@
76
90
  }
77
91
  .nav-tabs > li > a {
78
92
  margin-right: 2px;
93
+ line-height: 1.5;
79
94
  line-height: var(--line-height-body);
80
95
  border-bottom: 3px solid transparent;
96
+ font-size: 1rem;
81
97
  font-size: var(--font-size-16);
82
98
  }
83
99
  [dir="rtl"] .nav-tabs > li > a {
@@ -86,22 +102,25 @@
86
102
  margin-right: initial;
87
103
  }
88
104
  .nav-tabs > .active > a {
89
- border-bottom: 3px solid rgba(14,15,12,0.12157);
105
+ border-bottom: 3px solid rgba(0,0,0,0.10196);
90
106
  border-bottom: 3px solid var(--color-border-neutral);
91
107
  }
92
108
  .nav-tabs > .active > a:hover,
93
109
  .nav-tabs > .active > a:focus {
110
+ color: #0097c7;
94
111
  color: var(--color-content-accent);
95
112
  cursor: default;
96
113
  }
97
114
  .nav-pills > li {
98
115
  float: left;
116
+ font-size: 0.875rem;
99
117
  font-size: var(--font-size-14);
100
118
  }
101
119
  [dir="rtl"] .nav-pills > li {
102
120
  float: right;
103
121
  }
104
122
  .nav-pills > li > a {
123
+ font-size: 0.875rem;
105
124
  font-size: var(--font-size-14);
106
125
  }
107
126
  .nav-stacked > li {
@@ -109,6 +128,7 @@
109
128
  }
110
129
  .nav-stacked > li > a {
111
130
  padding-left: 21px;
131
+ padding-right: 24px;
112
132
  padding-right: var(--size-24);
113
133
  transition: color 0.2s ease-in-out;
114
134
  }
@@ -124,6 +144,7 @@ html:not([dir="rtl"]) .nav-stacked > li > a {
124
144
  padding-left: initial;
125
145
  }
126
146
  [dir="rtl"] .nav-stacked > li > a {
147
+ padding-left: 24px;
127
148
  padding-left: var(--size-24);
128
149
  padding-right: 0;
129
150
  padding-right: initial;
@@ -133,10 +154,12 @@ html:not([dir="rtl"]) .nav-stacked > li > a {
133
154
  }
134
155
  @media (min-width: 992px) {
135
156
  .nav-stacked > li > a {
157
+ padding-right: 32px;
136
158
  padding-right: var(--size-32);
137
159
  padding-left: 29px !important;
138
160
  }
139
161
  [dir="rtl"] .nav-stacked > li > a {
162
+ padding-left: 32px;
140
163
  padding-left: var(--size-32);
141
164
  padding-right: 0;
142
165
  padding-right: initial;
@@ -163,13 +186,13 @@ html:not([dir="rtl"]) .nav-stacked > li > a {
163
186
  [dir="rtl"] .nav-stacked > li.active > a,
164
187
  [dir="rtl"] .nav-stacked > li.active > a:hover,
165
188
  [dir="rtl"] .nav-stacked > li.active > a:focus {
166
- border-right: 3px solid #9fe870;
189
+ border-right: 3px solid #00a2dd;
167
190
  border-right: 3px solid var(--color-interactive-accent);
168
191
  }
169
192
  html:not([dir="rtl"]) .nav-stacked > li.active > a,
170
193
  html:not([dir="rtl"]) .nav-stacked > li.active > a:hover,
171
194
  html:not([dir="rtl"]) .nav-stacked > li.active > a:focus {
172
- border-left: 3px solid #9fe870;
195
+ border-left: 3px solid #00a2dd;
173
196
  border-left: 3px solid var(--color-interactive-accent);
174
197
  }
175
198
  [dir="rtl"] .nav-stacked > li.active > a,
@@ -202,7 +225,9 @@ html:not([dir="rtl"]) .nav-stacked > li.active > a:focus {
202
225
  left: initial;
203
226
  }
204
227
  .nav-justified.nav-pills > li > a {
228
+ padding: 0 4px;
205
229
  padding: 0 var(--size-4);
230
+ line-height: 1.5;
206
231
  line-height: var(--line-height-body);
207
232
  }
208
233
  @media (min-width: 768px) {
@@ -247,14 +272,14 @@ html:not([dir="rtl"]) .nav-stacked > li.active > a:focus {
247
272
  }
248
273
  .nav-tabs-justified > li > a {
249
274
  margin-right: 0;
250
- border-bottom: 1px solid rgba(14,15,12,0.12157);
275
+ border-bottom: 1px solid rgba(0,0,0,0.10196);
251
276
  border-bottom: 1px solid var(--color-border-neutral);
252
277
  border-radius: 3px;
253
278
  }
254
279
  .nav-tabs-justified > .active > a,
255
280
  .nav-tabs-justified > .active > a:hover,
256
281
  .nav-tabs-justified > .active > a:focus {
257
- border: 1px solid rgba(14,15,12,0.12157);
282
+ border: 1px solid rgba(0,0,0,0.10196);
258
283
  border: 1px solid var(--color-border-neutral);
259
284
  border-bottom: 0;
260
285
  }