@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/link-callout.css CHANGED
@@ -1,11 +1,13 @@
1
1
  .link-callout > .tw-icon-chevron-up {
2
2
  display: inline-block;
3
+ margin-left: 8px;
3
4
  margin-left: var(--size-8);
4
5
  pointer-events: none;
5
6
  transition: transform 0.2s ease-in-out;
6
7
  transform: rotate(90deg);
7
8
  }
8
9
  [dir="rtl"] .link-callout > .tw-icon-chevron-up {
10
+ margin-right: 8px;
9
11
  margin-right: var(--size-8);
10
12
  margin-left: 0;
11
13
  margin-left: initial;
package/dist/css/list-group.css CHANGED
@@ -4,9 +4,9 @@
4
4
  list-style-type: none;
5
5
  margin-bottom: 20px;
6
6
  padding-left: 0;
7
- border-left: 1px solid rgba(14,15,12,0.12157);
7
+ border-left: 1px solid rgba(0,0,0,0.10196);
8
8
  border-left: 1px solid var(--color-border-neutral);
9
- border-right: 1px solid rgba(14,15,12,0.12157);
9
+ border-right: 1px solid rgba(0,0,0,0.10196);
10
10
  border-right: 1px solid var(--color-border-neutral);
11
11
  }[dir="rtl"] .list-group {
12
12
  padding-right: 0;
@@ -18,6 +18,7 @@
18
18
  background-color: #ffffff;
19
19
  background-color: var(--color-background-screen);
20
20
  margin-top: 1px;
21
+ line-height: 1.5;
21
22
  line-height: var(--line-height-body);
22
23
  transition: all ease 0.15s;
23
24
  }[dir="rtl"] .list-group-item {
@@ -45,34 +46,41 @@
45
46
  }.list-group-item-heading {
46
47
  margin-bottom: 0;
47
48
  margin: 0;
49
+ line-height: 1.2;
48
50
  line-height: var(--line-height-title);
49
51
  letter-spacing: 0;
52
+ font-weight: 500;
50
53
  font-weight: var(--font-weight-medium);
54
+ font-size: 0.875rem;
51
55
  font-size: var(--font-size-14);
52
56
  letter-spacing: -0.006em;
53
57
  line-height: 140%;
54
- color: #0e0f0c;
58
+ color: #37517e;
55
59
  color: var(--color-content-primary);
56
60
  }.list-group-item-heading + p,
57
61
  .list-group-item-heading + ul:not(.list-unstyled),
58
62
  .list-group-item-heading + ol:not(.list-unstyled) {
63
+ margin-top: 8px;
59
64
  margin-top: var(--size-8);
60
65
  }.list-group-item-text {
61
66
  margin-bottom: 0;
62
- color: #454745;
67
+ color: #5d7079;
63
68
  color: var(--color-content-secondary);
64
69
  }a.list-group-item {
70
+ color: #0097c7;
65
71
  color: var(--color-content-accent);
66
72
  -webkit-text-decoration: none;
67
73
  text-decoration: none;
68
74
  }a.list-group-item .list-group-item-heading {
75
+ color: #0097c7;
69
76
  color: var(--color-content-accent);
70
77
  }a.list-group-item:not(.disabled):not(:disabled):hover,
71
78
  a.list-group-item:not(.disabled):not(:disabled):focus {
72
79
  -webkit-text-decoration: none;
73
80
  text-decoration: none;
81
+ color: #0084b3;
74
82
  color: var(--color-content-accent-hover);
75
- background-color: rgba(22,51,0,0.07843);
83
+ background-color: rgba(134,167,189,0.10196);
76
84
  background-color: var(--color-background-neutral);
77
85
  }.list-group-item[ng-click] {
78
86
  cursor: pointer;
@@ -82,9 +90,11 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
82
90
  z-index: 2;
83
91
  background-color: #ffffff;
84
92
  background-color: var(--color-background-elevated);
85
- box-shadow: 0 1px 10px rgba(14,15,12,0.12157);
93
+ box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
86
94
  box-shadow: 0 1px 10px var(--color-border-neutral);
95
+ margin-top: 24px;
87
96
  margin-top: var(--size-24);
97
+ margin-bottom: 24px;
88
98
  margin-bottom: var(--size-24);
89
99
  }.list-group-item.active:first-child {
90
100
  margin-top: 1px;
@@ -112,62 +122,83 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
112
122
  }@media (min-width: 576px) {
113
123
  .list-group-inactive .list-group-item:hover .circle,
114
124
  .list-group-inactive .list-group-item.active .circle {
115
- background-color: rgba(22,51,0,0.07843);
125
+ background-color: rgba(134,167,189,0.10196);
116
126
  background-color: var(--color-background-neutral);
117
127
  }
118
128
  }.list-group-inactive .list-group-item.active {
129
+ margin-top: 24px;
119
130
  margin-top: var(--size-24);
120
131
  }[dir="rtl"] .list-group-item-success {
132
+ border-right: 3px solid #008026;
121
133
  border-right: 3px solid var(--color-content-positive);
122
134
  }html:not([dir="rtl"]) .list-group-item-success {
135
+ border-left: 3px solid #008026;
123
136
  border-left: 3px solid var(--color-content-positive);
124
137
  }.list-group-item.list-group-item-success {
125
138
  background-color: #ffffff;
126
139
  background-color: var(--color-background-screen);
127
140
  }.list-group-item-success .list-group-item-text {
141
+ color: #008026;
128
142
  color: var(--color-content-positive);
129
143
  }a.list-group-item-success {
144
+ color: #008026;
130
145
  color: var(--color-content-positive);
131
146
  }a.list-group-item-success:hover {
147
+ color: #008026;
132
148
  color: var(--color-content-positive);
133
149
  }[dir="rtl"] .list-group-item-info {
150
+ border-right: 3px solid #0097c7;
134
151
  border-right: 3px solid var(--color-content-accent);
135
152
  }html:not([dir="rtl"]) .list-group-item-info {
153
+ border-left: 3px solid #0097c7;
136
154
  border-left: 3px solid var(--color-content-accent);
137
155
  }.list-group-item.list-group-item-info {
138
156
  background-color: #ffffff;
139
157
  background-color: var(--color-background-screen);
140
158
  }.list-group-item-info .list-group-item-text {
159
+ color: #0097c7;
141
160
  color: var(--color-content-accent);
142
161
  }a.list-group-item-info {
162
+ color: #0097c7;
143
163
  color: var(--color-content-accent);
144
164
  }a.list-group-item-info:hover {
165
+ color: #0097c7;
145
166
  color: var(--color-content-accent);
146
167
  }[dir="rtl"] .list-group-item-warning {
168
+ border-right: 3px solid #9a6500;
147
169
  border-right: 3px solid var(--color-content-warning);
148
170
  }html:not([dir="rtl"]) .list-group-item-warning {
171
+ border-left: 3px solid #9a6500;
149
172
  border-left: 3px solid var(--color-content-warning);
150
173
  }.list-group-item.list-group-item-warning {
151
174
  background-color: #ffffff;
152
175
  background-color: var(--color-background-screen);
153
176
  }.list-group-item-warning .list-group-item-text {
177
+ color: #9a6500;
154
178
  color: var(--color-content-warning);
155
179
  }a.list-group-item-warning {
180
+ color: #9a6500;
156
181
  color: var(--color-content-warning);
157
182
  }a.list-group-item-warning:hover {
183
+ color: #9a6500;
158
184
  color: var(--color-content-warning);
159
185
  }[dir="rtl"] .list-group-item-danger {
186
+ border-right: 3px solid #cf2929;
160
187
  border-right: 3px solid var(--color-content-negative);
161
188
  }html:not([dir="rtl"]) .list-group-item-danger {
189
+ border-left: 3px solid #cf2929;
162
190
  border-left: 3px solid var(--color-content-negative);
163
191
  }.list-group-item.list-group-item-danger {
164
192
  background-color: #ffffff;
165
193
  background-color: var(--color-background-screen);
166
194
  }.list-group-item-danger .list-group-item-text {
195
+ color: #cf2929;
167
196
  color: var(--color-content-negative);
168
197
  }a.list-group-item-danger {
198
+ color: #cf2929;
169
199
  color: var(--color-content-negative);
170
200
  }a.list-group-item-danger:hover {
201
+ color: #cf2929;
171
202
  color: var(--color-content-negative);
172
203
  }.list-group:hover .list-group-item:not(.active) {
173
204
  background-color: #fbfcfd;
@@ -179,7 +210,7 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
179
210
  }.list-group:hover .list-group-item:hover .media {
180
211
  opacity: 1;
181
212
  }.list-group-inactive:hover .list-group-item:not(.active) {
182
- background-color: rgba(22,51,0,0.07843);
213
+ background-color: rgba(134,167,189,0.10196);
183
214
  background-color: var(--color-background-neutral);
184
215
  }.list-group-inactive:hover .list-group-item:hover {
185
216
  background-color: #ffffff;
package/dist/css/media.css CHANGED
@@ -20,17 +20,21 @@
20
20
  }
21
21
  /* Alignment */
22
22
  .media-right {
23
+ padding-left: 16px;
23
24
  padding-left: var(--size-16);
24
25
  }
25
26
  [dir="rtl"] .media-right {
27
+ padding-right: 16px;
26
28
  padding-right: var(--size-16);
27
29
  padding-left: 0;
28
30
  padding-left: initial;
29
31
  }
30
32
  .media-left {
33
+ padding-right: 16px;
31
34
  padding-right: var(--size-16);
32
35
  }
33
36
  [dir="rtl"] .media-left {
37
+ padding-left: 16px;
34
38
  padding-left: var(--size-16);
35
39
  padding-right: 0;
36
40
  padding-right: initial;
@@ -38,10 +42,12 @@
38
42
  @media (max-width: 320px) {
39
43
  .media-right,
40
44
  .media-left {
45
+ padding-left: 32px;
41
46
  padding-left: var(--size-32);
42
47
  }
43
48
  [dir="rtl"] .media-right,
44
49
  [dir="rtl"] .media-left {
50
+ padding-right: 32px;
45
51
  padding-right: var(--size-32);
46
52
  padding-left: 0;
47
53
  padding-left: initial;
package/dist/css/modals.css CHANGED
@@ -27,13 +27,14 @@
27
27
  .modal-dialog {
28
28
  position: relative;
29
29
  width: auto;
30
+ margin: 16px;
30
31
  margin: var(--size-16);
31
32
  }
32
33
  .modal-content {
33
34
  position: relative;
34
35
  background-color: #ffffff;
35
36
  background-color: var(--color-background-screen);
36
- border: 1px solid rgba(22,51,0,0.07843);
37
+ border: 1px solid rgba(134,167,189,0.10196);
37
38
  border: 1px solid var(--color-background-neutral);
38
39
  border-radius: 3px;
39
40
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
@@ -46,6 +47,7 @@
46
47
  box-shadow: none;
47
48
  }
48
49
  .np-theme-personal .modal-content {
50
+ border-radius: 10px;
49
51
  border-radius: var(--radius-small);
50
52
  }
51
53
  .modal-backdrop {
@@ -55,6 +57,7 @@
55
57
  bottom: 0;
56
58
  left: 0;
57
59
  z-index: 1040;
60
+ background-color: #37517e;
58
61
  }
59
62
  .modal-backdrop.fade {
60
63
  opacity: 0;
@@ -74,8 +77,9 @@
74
77
  }
75
78
  .modal-header {
76
79
  padding: 24px;
77
- border-bottom: 1px solid rgba(14,15,12,0.12157);
80
+ border-bottom: 1px solid rgba(0,0,0,0.10196);
78
81
  border-bottom: 1px solid var(--color-border-neutral);
82
+ min-height: calc(24px + 24px);
79
83
  min-height: calc(24px + var(--size-24));
80
84
  }
81
85
  .modal-header .close {
@@ -83,6 +87,7 @@
83
87
  }
84
88
  .modal-title {
85
89
  margin: 0;
90
+ line-height: 1.2;
86
91
  line-height: var(--line-height-title);
87
92
  }
88
93
  .modal-body {
@@ -90,19 +95,22 @@
90
95
  padding: 24px;
91
96
  }
92
97
  .modal-footer {
98
+ padding: 16px 24px;
93
99
  padding: var(--size-16) 24px;
94
100
  text-align: right;
95
- border-top: 1px solid rgba(14,15,12,0.12157);
101
+ border-top: 1px solid rgba(0,0,0,0.10196);
96
102
  border-top: 1px solid var(--color-border-neutral);
97
103
  }
98
104
  [dir="rtl"] .modal-footer {
99
105
  text-align: left;
100
106
  }
101
107
  .modal-footer .btn + .btn {
108
+ margin-left: 8px;
102
109
  margin-left: var(--size-8);
103
110
  margin-bottom: 0;
104
111
  }
105
112
  [dir="rtl"] .modal-footer .btn + .btn {
113
+ margin-right: 8px;
106
114
  margin-right: var(--size-8);
107
115
  margin-left: 0;
108
116
  margin-left: initial;
@@ -145,12 +153,14 @@
145
153
  }
146
154
  .modal-header {
147
155
  padding: 28px 32px;
156
+ min-height: calc(28px + 24px);
148
157
  min-height: calc(28px + var(--size-24));
149
158
  }
150
159
  .modal-body {
151
160
  padding: 32px;
152
161
  }
153
162
  .modal-footer {
163
+ padding: 16px 32px;
154
164
  padding: var(--size-16) 32px;
155
165
  }
156
166
  }