@transferwise/neptune-css 0.0.0-experimental-d672ed6 → 0.0.0-experimental-0e8eafd

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 (50) hide show
  1. package/dist/css/border-radius.css +1 -1
  2. package/dist/css/flex.css +1 -1
  3. package/dist/css/navbar-base.css +1 -1
  4. package/dist/css/navbar.css +1 -1
  5. package/dist/css/neptune-addons.css +1 -1
  6. package/dist/css/neptune-core.css +1 -1
  7. package/dist/css/neptune.css +1 -1
  8. package/dist/css/utilities.css +1 -1
  9. package/package.json +1 -1
  10. package/src/less/addons/_display-utilities.less +159 -0
  11. package/src/less/addons/_spacing-utilities.less +26 -3
  12. package/src/less/addons/_utilities.less +147 -0
  13. package/src/less/border-radius.less +3 -1
  14. package/src/less/core/_scaffolding.less +33 -4
  15. package/src/less/core/_typography-utilities.less +241 -15
  16. package/src/less/flex.less +18 -9
  17. package/src/less/{addons → mixins}/_center-block.less +4 -2
  18. package/src/less/mixins/_flex.less +105 -0
  19. package/src/less/navbar.less +2 -10
  20. package/src/less/neptune-addons.less +1 -4
  21. package/src/less/utilities.less +141 -30
  22. package/src/less/utilities/align-items.less +0 -139
  23. package/src/less/utilities/align-self.less +0 -139
  24. package/src/less/utilities/border-radius.less +0 -11
  25. package/src/less/utilities/color.less +0 -70
  26. package/src/less/utilities/cursor.less +0 -3
  27. package/src/less/utilities/display.less +0 -333
  28. package/src/less/utilities/flex-direction.less +0 -55
  29. package/src/less/utilities/flex-grow.less +0 -27
  30. package/src/less/utilities/flex-wrap.less +0 -55
  31. package/src/less/utilities/float.less +0 -93
  32. package/src/less/utilities/font-style.less +0 -3
  33. package/src/less/utilities/font-weight.less +0 -11
  34. package/src/less/utilities/gap.less +0 -3
  35. package/src/less/utilities/justify-content.less +0 -139
  36. package/src/less/utilities/margin.less +0 -192
  37. package/src/less/utilities/max-width.less +0 -3
  38. package/src/less/utilities/order.less +0 -111
  39. package/src/less/utilities/outline-style.less +0 -8
  40. package/src/less/utilities/overflow-wrap.less +0 -3
  41. package/src/less/utilities/padding.less +0 -179
  42. package/src/less/utilities/position.less +0 -3
  43. package/src/less/utilities/rotate.less +0 -12
  44. package/src/less/utilities/screen-reader.less +0 -24
  45. package/src/less/utilities/text-align.less +0 -111
  46. package/src/less/utilities/text-decoration-line.less +0 -8
  47. package/src/less/utilities/text-overflow.less +0 -7
  48. package/src/less/utilities/text-transform.less +0 -11
  49. package/src/less/utilities/visibility.less +0 -3
  50. package/src/less/utilities/white-space.less +0 -27
@@ -1,139 +0,0 @@
1
- .align-items-start {
2
- align-items: flex-start;
3
- }
4
-
5
- @media (--screen-sm) {
6
- .align-items-start--sm {
7
- align-items: flex-start;
8
- }
9
- }
10
-
11
- @media (--screen-md) {
12
- .align-items-start--md {
13
- align-items: flex-start;
14
- }
15
- }
16
-
17
- @media (--screen-lg) {
18
- .align-items-start--lg {
19
- align-items: flex-start;
20
- }
21
- }
22
-
23
- @media (--screen-xl) {
24
- .align-items-start--xl {
25
- align-items: flex-start;
26
- }
27
- }
28
-
29
- .align-items-end {
30
- align-items: flex-end;
31
- }
32
-
33
- @media (--screen-sm) {
34
- .align-items-end--sm {
35
- align-items: flex-end;
36
- }
37
- }
38
-
39
- @media (--screen-md) {
40
- .align-items-end--md {
41
- align-items: flex-end;
42
- }
43
- }
44
-
45
- @media (--screen-lg) {
46
- .align-items-end--lg {
47
- align-items: flex-end;
48
- }
49
- }
50
-
51
- @media (--screen-xl) {
52
- .align-items-end--xl {
53
- align-items: flex-end;
54
- }
55
- }
56
-
57
- .align-items-center {
58
- align-items: center;
59
- }
60
-
61
- @media (--screen-sm) {
62
- .align-items-center--sm {
63
- align-items: center;
64
- }
65
- }
66
-
67
- @media (--screen-md) {
68
- .align-items-center--md {
69
- align-items: center;
70
- }
71
- }
72
-
73
- @media (--screen-lg) {
74
- .align-items-center--lg {
75
- align-items: center;
76
- }
77
- }
78
-
79
- @media (--screen-xl) {
80
- .align-items-center--xl {
81
- align-items: center;
82
- }
83
- }
84
-
85
- .align-items-baseline {
86
- align-items: baseline;
87
- }
88
-
89
- @media (--screen-sm) {
90
- .align-items-baseline--sm {
91
- align-items: baseline;
92
- }
93
- }
94
-
95
- @media (--screen-md) {
96
- .align-items-baseline--md {
97
- align-items: baseline;
98
- }
99
- }
100
-
101
- @media (--screen-lg) {
102
- .align-items-baseline--lg {
103
- align-items: baseline;
104
- }
105
- }
106
-
107
- @media (--screen-xl) {
108
- .align-items-baseline--xl {
109
- align-items: baseline;
110
- }
111
- }
112
-
113
- .align-items-stretch {
114
- align-items: stretch;
115
- }
116
-
117
- @media (--screen-sm) {
118
- .align-items-stretch--sm {
119
- align-items: stretch;
120
- }
121
- }
122
-
123
- @media (--screen-md) {
124
- .align-items-stretch--md {
125
- align-items: stretch;
126
- }
127
- }
128
-
129
- @media (--screen-lg) {
130
- .align-items-stretch--lg {
131
- align-items: stretch;
132
- }
133
- }
134
-
135
- @media (--screen-xl) {
136
- .align-items-stretch--xl {
137
- align-items: stretch;
138
- }
139
- }
@@ -1,139 +0,0 @@
1
- .align-self-start {
2
- align-self: flex-start;
3
- }
4
-
5
- @media (--screen-sm) {
6
- .align-self-start--sm {
7
- align-self: flex-start;
8
- }
9
- }
10
-
11
- @media (--screen-md) {
12
- .align-self-start--md {
13
- align-self: flex-start;
14
- }
15
- }
16
-
17
- @media (--screen-lg) {
18
- .align-self-start--lg {
19
- align-self: flex-start;
20
- }
21
- }
22
-
23
- @media (--screen-xl) {
24
- .align-self-start--xl {
25
- align-self: flex-start;
26
- }
27
- }
28
-
29
- .align-self-end {
30
- align-self: flex-end;
31
- }
32
-
33
- @media (--screen-sm) {
34
- .align-self-end--sm {
35
- align-self: flex-end;
36
- }
37
- }
38
-
39
- @media (--screen-md) {
40
- .align-self-end--md {
41
- align-self: flex-end;
42
- }
43
- }
44
-
45
- @media (--screen-lg) {
46
- .align-self-end--lg {
47
- align-self: flex-end;
48
- }
49
- }
50
-
51
- @media (--screen-xl) {
52
- .align-self-end--xl {
53
- align-self: flex-end;
54
- }
55
- }
56
-
57
- .align-self-center {
58
- align-self: center;
59
- }
60
-
61
- @media (--screen-sm) {
62
- .align-self-center--sm {
63
- align-self: center;
64
- }
65
- }
66
-
67
- @media (--screen-md) {
68
- .align-self-center--md {
69
- align-self: center;
70
- }
71
- }
72
-
73
- @media (--screen-lg) {
74
- .align-self-center--lg {
75
- align-self: center;
76
- }
77
- }
78
-
79
- @media (--screen-xl) {
80
- .align-self-center--xl {
81
- align-self: center;
82
- }
83
- }
84
-
85
- .align-self-stretch {
86
- align-self: stretch;
87
- }
88
-
89
- @media (--screen-sm) {
90
- .align-self-stretch--sm {
91
- align-self: stretch;
92
- }
93
- }
94
-
95
- @media (--screen-md) {
96
- .align-self-stretch--md {
97
- align-self: stretch;
98
- }
99
- }
100
-
101
- @media (--screen-lg) {
102
- .align-self-stretch--lg {
103
- align-self: stretch;
104
- }
105
- }
106
-
107
- @media (--screen-xl) {
108
- .align-self-stretch--xl {
109
- align-self: stretch;
110
- }
111
- }
112
-
113
- .align-self-baseline {
114
- align-self: baseline;
115
- }
116
-
117
- @media (--screen-sm) {
118
- .align-self-baseline--sm {
119
- align-self: baseline;
120
- }
121
- }
122
-
123
- @media (--screen-md) {
124
- .align-self-baseline--md {
125
- align-self: baseline;
126
- }
127
- }
128
-
129
- @media (--screen-lg) {
130
- .align-self-baseline--lg {
131
- align-self: baseline;
132
- }
133
- }
134
-
135
- @media (--screen-xl) {
136
- .align-self-baseline--xl {
137
- align-self: baseline;
138
- }
139
- }
@@ -1,11 +0,0 @@
1
- .rounded-sm {
2
- border-radius: 2px;
3
- }
4
-
5
- .img-rounded {
6
- border-radius: var(--radius-small);
7
- }
8
-
9
- .img-circle {
10
- border-radius: var(--radius-full);
11
- }
@@ -1,70 +0,0 @@
1
- @import (reference) "../../variables/neptune-tokens.less";
2
- @import (reference) "../mixins/_text-emphasis.less";
3
-
4
- .text-primary {
5
- color: var(--color-content-primary) !important;
6
-
7
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
8
- .bg-primary & {
9
- color: @color-navy-content-primary !important;
10
- }
11
- }
12
-
13
- .text-secondary {
14
- color: var(--color-content-secondary) !important;
15
- }
16
-
17
- .text-muted {
18
- color: var(--color-content-tertiary) !important;
19
- }
20
-
21
- .text-accent,
22
- .text-info {
23
- color: var(--color-interactive-primary) !important;
24
-
25
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
26
- .bg-primary & {
27
- color: @color-navy-content-accent !important;
28
- }
29
- }
30
-
31
- .text-negative,
32
- /* TODO: Deprecate in favor of `.text-negative` */
33
- .text-danger {
34
- color: var(--color-sentiment-negative) !important;
35
-
36
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
37
- .bg-primary & {
38
- color: @color-navy-content-negative !important;
39
- }
40
- }
41
-
42
- .text-positive,
43
- /* TODO: Deprecate in favor of `.text-positive` */
44
- .text-success {
45
- color: var(--color-sentiment-positive) !important;
46
-
47
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
48
- .bg-primary & {
49
- color: @color-navy-content-positive !important;
50
- }
51
- }
52
-
53
- /**
54
- * @deprecated This makes text inaccessible. Use background color in combination with `.text-primary` instead.
55
- */
56
- .text-warning {
57
- color: var(--color-sentiment-warning) !important;
58
-
59
- /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
60
- .bg-primary & {
61
- color: @color-navy-content-warning !important;
62
- }
63
- }
64
-
65
- /**
66
- * @deprecated Navy colors are obsolete.
67
- */
68
- .text-inverse {
69
- .text-emphasis-variant(@color-navy-content-primary, @color-navy-content-primary, @color-navy-content-secondary);
70
- }
@@ -1,3 +0,0 @@
1
- .clickable {
2
- cursor: pointer;
3
- }
@@ -1,333 +0,0 @@
1
- .d-block,
2
- .show {
3
- display: block !important;
4
- }
5
-
6
- .d-inline-block {
7
- display: inline-block !important;
8
- }
9
-
10
- .d-inline {
11
- display: inline;
12
- }
13
-
14
- .d-flex {
15
- display: flex;
16
- }
17
-
18
- @media (--screen-sm) {
19
- .d-flex--sm {
20
- display: flex;
21
- }
22
- }
23
-
24
- @media (--screen-md) {
25
- .d-flex--md {
26
- display: flex;
27
- }
28
- }
29
-
30
- @media (--screen-lg) {
31
- .d-flex--lg {
32
- display: flex;
33
- }
34
- }
35
-
36
- @media (--screen-xl) {
37
- .d-flex--xl {
38
- display: flex;
39
- }
40
- }
41
-
42
- .d-inline-flex {
43
- display: inline-flex;
44
- }
45
-
46
- @media (--screen-sm) {
47
- .d-inline-flex--sm {
48
- display: inline-flex;
49
- }
50
- }
51
-
52
- @media (--screen-md) {
53
- .d-inline-flex--md {
54
- display: inline-flex;
55
- }
56
- }
57
-
58
- @media (--screen-lg) {
59
- .d-inline-flex--lg {
60
- display: inline-flex;
61
- }
62
- }
63
-
64
- @media (--screen-xl) {
65
- .d-inline-flex--xl {
66
- display: inline-flex;
67
- }
68
- }
69
-
70
- .hidden,
71
- .hide {
72
- display: none !important;
73
- }
74
-
75
- @media not all and (--screen-sm) {
76
- .hidden-xs {
77
- display: none !important;
78
- }
79
- }
80
-
81
- @media (--screen-sm) {
82
- @media not all and (--screen-md) {
83
- .hidden-sm {
84
- display: none !important;
85
- }
86
- }
87
- }
88
-
89
- @media (--screen-md) {
90
- @media not all and (--screen-lg) {
91
- .hidden-md {
92
- display: none !important;
93
- }
94
- }
95
- }
96
-
97
- @media (--screen-lg) {
98
- @media not all and (--screen-xl) {
99
- .hidden-lg {
100
- display: none !important;
101
- }
102
- }
103
- }
104
-
105
- @media (--screen-xl) {
106
- .hidden-xl {
107
- display: none !important;
108
- }
109
- }
110
-
111
- .visible-xs {
112
- display: none !important;
113
- }
114
-
115
- @media not all and (--screen-sm) {
116
- .visible-xs {
117
- display: block !important;
118
- }
119
- }
120
-
121
- .visible-sm {
122
- display: none !important;
123
- }
124
-
125
- @media (--screen-sm) {
126
- @media not all and (--screen-md) {
127
- .visible-sm {
128
- display: block !important;
129
- }
130
- }
131
- }
132
-
133
- .visible-md {
134
- display: none !important;
135
- }
136
-
137
- @media (--screen-md) {
138
- @media not all and (--screen-lg) {
139
- .visible-md {
140
- display: block !important;
141
- }
142
- }
143
- }
144
-
145
- .visible-lg {
146
- display: none !important;
147
- }
148
-
149
- @media (--screen-lg) {
150
- @media not all and (--screen-xl) {
151
- .visible-lg {
152
- display: block !important;
153
- }
154
- }
155
- }
156
-
157
- .visible-xl {
158
- display: none !important;
159
- }
160
-
161
- @media (--screen-xl) {
162
- .visible-xl {
163
- display: block !important;
164
- }
165
- }
166
-
167
- .visible-xs-block {
168
- display: none !important;
169
- }
170
-
171
- @media not all and (--screen-sm) {
172
- .visible-xs-block {
173
- display: block !important;
174
- }
175
- }
176
-
177
- .visible-sm-block {
178
- display: none !important;
179
- }
180
-
181
- @media (--screen-sm) {
182
- @media not all and (--screen-md) {
183
- .visible-sm-block {
184
- display: block !important;
185
- }
186
- }
187
- }
188
-
189
- .visible-md-block {
190
- display: none !important;
191
- }
192
-
193
- @media (--screen-md) {
194
- @media not all and (--screen-lg) {
195
- .visible-md-block {
196
- display: block !important;
197
- }
198
- }
199
- }
200
-
201
- .visible-lg-block {
202
- display: none !important;
203
- }
204
-
205
- @media (--screen-lg) {
206
- @media not all and (--screen-xl) {
207
- .visible-lg-block {
208
- display: block !important;
209
- }
210
- }
211
- }
212
-
213
- .visible-xl-block {
214
- display: none !important;
215
- }
216
-
217
- @media (--screen-xl) {
218
- .visible-xl-block {
219
- display: block !important;
220
- }
221
- }
222
-
223
- .visible-xs-inline {
224
- display: none !important;
225
- }
226
-
227
- @media not all and (--screen-sm) {
228
- .visible-xs-inline {
229
- display: inline !important;
230
- }
231
- }
232
-
233
- .visible-sm-inline {
234
- display: none !important;
235
- }
236
-
237
- @media (--screen-sm) {
238
- @media not all and (--screen-md) {
239
- .visible-sm-inline {
240
- display: inline !important;
241
- }
242
- }
243
- }
244
-
245
- .visible-md-inline {
246
- display: none !important;
247
- }
248
-
249
- @media (--screen-md) {
250
- @media not all and (--screen-lg) {
251
- .visible-md-inline {
252
- display: inline !important;
253
- }
254
- }
255
- }
256
-
257
- .visible-lg-inline {
258
- display: none !important;
259
- }
260
-
261
- @media (--screen-lg) {
262
- @media not all and (--screen-xl) {
263
- .visible-lg-inline {
264
- display: inline !important;
265
- }
266
- }
267
- }
268
-
269
- .visible-xl-inline {
270
- display: none !important;
271
- }
272
-
273
- @media (--screen-xl) {
274
- .visible-xl-inline {
275
- display: inline !important;
276
- }
277
- }
278
-
279
- .visible-xs-inline-block {
280
- display: none !important;
281
- }
282
-
283
- @media not all and (--screen-sm) {
284
- .visible-xs-inline-block {
285
- display: inline-block !important;
286
- }
287
- }
288
-
289
- .visible-sm-inline-block {
290
- display: none !important;
291
- }
292
-
293
- @media (--screen-sm) {
294
- @media not all and (--screen-md) {
295
- .visible-sm-inline-block {
296
- display: inline-block !important;
297
- }
298
- }
299
- }
300
-
301
- .visible-md-inline-block {
302
- display: none !important;
303
- }
304
-
305
- @media (--screen-md) {
306
- @media not all and (--screen-lg) {
307
- .visible-md-inline-block {
308
- display: inline-block !important;
309
- }
310
- }
311
- }
312
-
313
- .visible-lg-inline-block {
314
- display: none !important;
315
- }
316
-
317
- @media (--screen-lg) {
318
- @media not all and (--screen-xl) {
319
- .visible-lg-inline-block {
320
- display: inline-block !important;
321
- }
322
- }
323
- }
324
-
325
- .visible-xl-inline-block {
326
- display: none !important;
327
- }
328
-
329
- @media (--screen-xl) {
330
- .visible-xl-inline-block {
331
- display: inline-block !important;
332
- }
333
- }