@transferwise/neptune-css 0.0.0-experimental-bca35d9 → 0.0.0-experimental-e674a91

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 (53) hide show
  1. package/dist/css/accordion.css +7 -10
  2. package/dist/css/alerts.css +142 -14
  3. package/dist/css/background.css +2 -2
  4. package/dist/css/badge.css +3 -1
  5. package/dist/css/breadcrumbs.css +1 -1
  6. package/dist/css/button-groups.css +6 -2
  7. package/dist/css/buttons.css +176 -151
  8. package/dist/css/chevron.css +1 -1
  9. package/dist/css/circles.css +11 -10
  10. package/dist/css/close.css +3 -2
  11. package/dist/css/column-layout.css +1 -0
  12. package/dist/css/currency-flags.css +1 -1
  13. package/dist/css/decision.css +6 -9
  14. package/dist/css/dropdowns.css +20 -12
  15. package/dist/css/droppable.css +9 -12
  16. package/dist/css/footer.css +43 -8
  17. package/dist/css/input-groups.css +139 -146
  18. package/dist/css/list-group.css +33 -12
  19. package/dist/css/modals.css +4 -3
  20. package/dist/css/navbar.css +133 -41
  21. package/dist/css/navs.css +20 -8
  22. package/dist/css/neptune-addons.css +85 -8
  23. package/dist/css/neptune-core.css +94 -42
  24. package/dist/css/neptune.css +1187 -640
  25. package/dist/css/popovers.css +12 -10
  26. package/dist/css/process.css +8 -8
  27. package/dist/css/progress-bars.css +7 -2
  28. package/dist/css/ring.css +2 -2
  29. package/dist/css/select.css +2 -2
  30. package/dist/css/sequences.css +95 -39
  31. package/dist/css/table.css +48 -14
  32. package/dist/css/tick.css +1 -0
  33. package/dist/css/tooltip.css +2 -1
  34. package/dist/css/wells.css +5 -5
  35. package/dist/less/neptune-tokens.less +175 -81
  36. package/dist/props/neptune-tokens.css +40 -80
  37. package/package.json +2 -2
  38. package/src/less/addons/_background-utilities.less +37 -0
  39. package/src/less/alerts.less +36 -0
  40. package/src/less/background.less +1 -0
  41. package/src/less/buttons.less +22 -0
  42. package/src/less/column-layout.less +1 -0
  43. package/src/less/core/_scaffolding.less +22 -3
  44. package/src/less/core/_typography-utilities.less +29 -0
  45. package/src/less/dropdowns.less +8 -0
  46. package/src/less/footer.less +33 -0
  47. package/src/less/mixins/_sequence.less +2 -2
  48. package/src/less/modals.less +1 -0
  49. package/src/less/navbar.less +31 -0
  50. package/src/less/navs.less +10 -0
  51. package/src/less/sequences.less +26 -0
  52. package/src/less/table.less +8 -0
  53. package/src/variables/neptune-tokens.less +10 -1
package/dist/css/list-group.css CHANGED
@@ -2,9 +2,9 @@
2
2
  list-style-type: none;
3
3
  margin-bottom: 20px;
4
4
  padding-left: 0;
5
- border-left: 1px solid rgba(14,15,12,0.12157);
5
+ border-left: 1px solid rgba(0,0,0,0.10196);
6
6
  border-left: 1px solid var(--color-border-neutral);
7
- border-right: 1px solid rgba(14,15,12,0.12157);
7
+ border-right: 1px solid rgba(0,0,0,0.10196);
8
8
  border-right: 1px solid var(--color-border-neutral);
9
9
  }
10
10
  [dir="rtl"] .list-group {
@@ -62,13 +62,12 @@ html:not([dir="rtl"]) .list-group-item {
62
62
  font-size: var(--font-size-14);
63
63
  letter-spacing: -0.006em;
64
64
  line-height: 140%;
65
- color: #0e0f0c;
65
+ color: #37517e;
66
66
  color: var(--color-content-primary);
67
67
  }
68
68
  @supports (hyphenate-limit-chars: 1) {
69
69
  .list-group-item-heading {
70
- -webkit-hyphens: auto;
71
- hyphens: auto;
70
+ hyphens: auto;
72
71
  hyphenate-limit-chars: 7 3;
73
72
  }
74
73
  @media (min-width: 768px) {
@@ -84,8 +83,7 @@ html:not([dir="rtl"]) .list-group-item {
84
83
  }
85
84
  @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
86
85
  .list-group-item-heading {
87
- -webkit-hyphens: auto;
88
- hyphens: auto;
86
+ hyphens: auto;
89
87
  -webkit-hyphenate-limit-before: 3;
90
88
  -webkit-hyphenate-limit-after: 3;
91
89
  }
@@ -103,23 +101,26 @@ html:not([dir="rtl"]) .list-group-item {
103
101
  }
104
102
  .list-group-item-text {
105
103
  margin-bottom: 0;
106
- color: #454745;
104
+ color: #5d7079;
107
105
  color: var(--color-content-secondary);
108
106
  }
109
107
  a.list-group-item {
108
+ color: #0097c7;
110
109
  color: var(--color-content-accent);
111
110
  -webkit-text-decoration: none;
112
111
  text-decoration: none;
113
112
  }
114
113
  a.list-group-item .list-group-item-heading {
114
+ color: #0097c7;
115
115
  color: var(--color-content-accent);
116
116
  }
117
117
  a.list-group-item:not(.disabled):not(:disabled):hover,
118
118
  a.list-group-item:not(.disabled):not(:disabled):focus {
119
119
  -webkit-text-decoration: none;
120
120
  text-decoration: none;
121
+ color: #0084b3;
121
122
  color: var(--color-content-accent-hover);
122
- background-color: rgba(22,51,0,0.07843);
123
+ background-color: rgba(134,167,189,0.10196);
123
124
  background-color: var(--color-background-neutral);
124
125
  }
125
126
  .list-group-item[ng-click] {
@@ -132,7 +133,7 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
132
133
  z-index: 2;
133
134
  background-color: #ffffff;
134
135
  background-color: var(--color-background-elevated);
135
- box-shadow: 0 1px 10px rgba(14,15,12,0.12157);
136
+ box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
136
137
  box-shadow: 0 1px 10px var(--color-border-neutral);
137
138
  margin-top: 24px;
138
139
  margin-top: var(--size-24);
@@ -171,7 +172,7 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
171
172
  @media (min-width: 576px) {
172
173
  .list-group-inactive .list-group-item:hover .circle,
173
174
  .list-group-inactive .list-group-item.active .circle {
174
- background-color: rgba(22,51,0,0.07843);
175
+ background-color: rgba(134,167,189,0.10196);
175
176
  background-color: var(--color-background-neutral);
176
177
  }
177
178
  }
@@ -180,9 +181,11 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
180
181
  margin-top: var(--size-24);
181
182
  }
182
183
  [dir="rtl"] .list-group-item-success {
184
+ border-right: 3px solid #008026;
183
185
  border-right: 3px solid var(--color-content-positive);
184
186
  }
185
187
  html:not([dir="rtl"]) .list-group-item-success {
188
+ border-left: 3px solid #008026;
186
189
  border-left: 3px solid var(--color-content-positive);
187
190
  }
188
191
  .list-group-item.list-group-item-success {
@@ -190,18 +193,23 @@ html:not([dir="rtl"]) .list-group-item-success {
190
193
  background-color: var(--color-background-screen);
191
194
  }
192
195
  .list-group-item-success .list-group-item-text {
196
+ color: #008026;
193
197
  color: var(--color-content-positive);
194
198
  }
195
199
  a.list-group-item-success {
200
+ color: #008026;
196
201
  color: var(--color-content-positive);
197
202
  }
198
203
  a.list-group-item-success:hover {
204
+ color: #008026;
199
205
  color: var(--color-content-positive);
200
206
  }
201
207
  [dir="rtl"] .list-group-item-info {
208
+ border-right: 3px solid #0097c7;
202
209
  border-right: 3px solid var(--color-content-accent);
203
210
  }
204
211
  html:not([dir="rtl"]) .list-group-item-info {
212
+ border-left: 3px solid #0097c7;
205
213
  border-left: 3px solid var(--color-content-accent);
206
214
  }
207
215
  .list-group-item.list-group-item-info {
@@ -209,18 +217,23 @@ html:not([dir="rtl"]) .list-group-item-info {
209
217
  background-color: var(--color-background-screen);
210
218
  }
211
219
  .list-group-item-info .list-group-item-text {
220
+ color: #0097c7;
212
221
  color: var(--color-content-accent);
213
222
  }
214
223
  a.list-group-item-info {
224
+ color: #0097c7;
215
225
  color: var(--color-content-accent);
216
226
  }
217
227
  a.list-group-item-info:hover {
228
+ color: #0097c7;
218
229
  color: var(--color-content-accent);
219
230
  }
220
231
  [dir="rtl"] .list-group-item-warning {
232
+ border-right: 3px solid #9a6500;
221
233
  border-right: 3px solid var(--color-content-warning);
222
234
  }
223
235
  html:not([dir="rtl"]) .list-group-item-warning {
236
+ border-left: 3px solid #9a6500;
224
237
  border-left: 3px solid var(--color-content-warning);
225
238
  }
226
239
  .list-group-item.list-group-item-warning {
@@ -228,18 +241,23 @@ html:not([dir="rtl"]) .list-group-item-warning {
228
241
  background-color: var(--color-background-screen);
229
242
  }
230
243
  .list-group-item-warning .list-group-item-text {
244
+ color: #9a6500;
231
245
  color: var(--color-content-warning);
232
246
  }
233
247
  a.list-group-item-warning {
248
+ color: #9a6500;
234
249
  color: var(--color-content-warning);
235
250
  }
236
251
  a.list-group-item-warning:hover {
252
+ color: #9a6500;
237
253
  color: var(--color-content-warning);
238
254
  }
239
255
  [dir="rtl"] .list-group-item-danger {
256
+ border-right: 3px solid #cf2929;
240
257
  border-right: 3px solid var(--color-content-negative);
241
258
  }
242
259
  html:not([dir="rtl"]) .list-group-item-danger {
260
+ border-left: 3px solid #cf2929;
243
261
  border-left: 3px solid var(--color-content-negative);
244
262
  }
245
263
  .list-group-item.list-group-item-danger {
@@ -247,12 +265,15 @@ html:not([dir="rtl"]) .list-group-item-danger {
247
265
  background-color: var(--color-background-screen);
248
266
  }
249
267
  .list-group-item-danger .list-group-item-text {
268
+ color: #cf2929;
250
269
  color: var(--color-content-negative);
251
270
  }
252
271
  a.list-group-item-danger {
272
+ color: #cf2929;
253
273
  color: var(--color-content-negative);
254
274
  }
255
275
  a.list-group-item-danger:hover {
276
+ color: #cf2929;
256
277
  color: var(--color-content-negative);
257
278
  }
258
279
  .list-group:hover .list-group-item:not(.active) {
@@ -269,7 +290,7 @@ a.list-group-item-danger:hover {
269
290
  opacity: 1;
270
291
  }
271
292
  .list-group-inactive:hover .list-group-item:not(.active) {
272
- background-color: rgba(22,51,0,0.07843);
293
+ background-color: rgba(134,167,189,0.10196);
273
294
  background-color: var(--color-background-neutral);
274
295
  }
275
296
  .list-group-inactive:hover .list-group-item:hover {
package/dist/css/modals.css CHANGED
@@ -34,7 +34,7 @@
34
34
  position: relative;
35
35
  background-color: #ffffff;
36
36
  background-color: var(--color-background-screen);
37
- border: 1px solid rgba(22,51,0,0.07843);
37
+ border: 1px solid rgba(134,167,189,0.10196);
38
38
  border: 1px solid var(--color-background-neutral);
39
39
  border-radius: 3px;
40
40
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
@@ -57,6 +57,7 @@
57
57
  bottom: 0;
58
58
  left: 0;
59
59
  z-index: 1040;
60
+ background-color: #37517e;
60
61
  }
61
62
  .modal-backdrop.fade {
62
63
  opacity: 0;
@@ -76,7 +77,7 @@
76
77
  }
77
78
  .modal-header {
78
79
  padding: 24px;
79
- border-bottom: 1px solid rgba(14,15,12,0.12157);
80
+ border-bottom: 1px solid rgba(0,0,0,0.10196);
80
81
  border-bottom: 1px solid var(--color-border-neutral);
81
82
  min-height: calc(24px + 24px);
82
83
  min-height: calc(24px + var(--size-24));
@@ -97,7 +98,7 @@
97
98
  padding: 16px 24px;
98
99
  padding: var(--size-16) 24px;
99
100
  text-align: right;
100
- border-top: 1px solid rgba(14,15,12,0.12157);
101
+ border-top: 1px solid rgba(0,0,0,0.10196);
101
102
  border-top: 1px solid var(--color-border-neutral);
102
103
  }
103
104
  [dir="rtl"] .modal-footer {