@transferwise/neptune-css 0.0.0-experimental-bb7ed4a → 0.0.0-experimental-7cfec48

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