@transferwise/neptune-css 14.9.1 → 14.9.3

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 +0 -8
  2. package/dist/css/flex.css +253 -417
  3. package/dist/css/navbar-base.css +339 -168
  4. package/dist/css/navbar.css +107 -41
  5. package/dist/css/neptune-addons.css +893 -421
  6. package/dist/css/neptune-core.css +203 -169
  7. package/dist/css/neptune.css +15450 -14660
  8. package/dist/css/ring.css +0 -4
  9. package/dist/css/utilities.css +72 -1202
  10. package/package.json +1 -1
  11. package/src/less/addons/_display-utilities.less +159 -0
  12. package/src/less/addons/_spacing-utilities.less +26 -3
  13. package/src/less/addons/_utilities.less +147 -0
  14. package/src/less/border-radius.less +3 -1
  15. package/src/less/core/_scaffolding.less +29 -9
  16. package/src/less/core/_typography-utilities.less +237 -17
  17. package/src/less/flex.less +18 -9
  18. package/src/less/{addons → mixins}/_center-block.less +4 -2
  19. package/src/less/mixins/_flex.less +105 -0
  20. package/src/less/navbar.less +2 -10
  21. package/src/less/neptune-addons.less +1 -4
  22. package/src/less/utilities.less +141 -29
  23. package/src/less/utilities/align-items.less +0 -107
  24. package/src/less/utilities/align-self.less +0 -107
  25. package/src/less/utilities/border-radius.less +0 -11
  26. package/src/less/utilities/color.less +0 -70
  27. package/src/less/utilities/cursor.less +0 -3
  28. package/src/less/utilities/display.less +0 -178
  29. package/src/less/utilities/flex-direction.less +0 -47
  30. package/src/less/utilities/flex-grow.less +0 -27
  31. package/src/less/utilities/flex-wrap.less +0 -47
  32. package/src/less/utilities/float.less +0 -77
  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 -107
  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 -87
  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 -87
  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
package/dist/css/flex.css CHANGED
@@ -1,4 +1,30 @@
1
- /* TODO: Remove utility imports to prevent duplicates */
1
+ .d-flex {
2
+ display: flex;
3
+ }
4
+ .d-inline-flex {
5
+ display: inline-flex;
6
+ }
7
+ .flex-column {
8
+ flex-direction: column;
9
+ }
10
+ .flex-row {
11
+ flex-direction: row;
12
+ }
13
+ .justify-content-start {
14
+ justify-content: flex-start;
15
+ }
16
+ .justify-content-end {
17
+ justify-content: flex-end;
18
+ }
19
+ .justify-content-center {
20
+ justify-content: center;
21
+ }
22
+ .justify-content-between {
23
+ justify-content: space-between;
24
+ }
25
+ .justify-content-around {
26
+ justify-content: space-around;
27
+ }
2
28
  .align-items-start {
3
29
  align-items: flex-start;
4
30
  }
@@ -14,74 +40,6 @@
14
40
  .align-items-stretch {
15
41
  align-items: stretch;
16
42
  }
17
- @media (min-width: 576px) {
18
- .align-items-start--sm {
19
- align-items: flex-start;
20
- }
21
- .align-items-end--sm {
22
- align-items: flex-end;
23
- }
24
- .align-items-center--sm {
25
- align-items: center;
26
- }
27
- .align-items-baseline--sm {
28
- align-items: baseline;
29
- }
30
- .align-items-stretch--sm {
31
- align-items: stretch;
32
- }
33
- }
34
- @media (min-width: 768px) {
35
- .align-items-start--md {
36
- align-items: flex-start;
37
- }
38
- .align-items-end--md {
39
- align-items: flex-end;
40
- }
41
- .align-items-center--md {
42
- align-items: center;
43
- }
44
- .align-items-baseline--md {
45
- align-items: baseline;
46
- }
47
- .align-items-stretch--md {
48
- align-items: stretch;
49
- }
50
- }
51
- @media (min-width: 992px) {
52
- .align-items-start--lg {
53
- align-items: flex-start;
54
- }
55
- .align-items-end--lg {
56
- align-items: flex-end;
57
- }
58
- .align-items-center--lg {
59
- align-items: center;
60
- }
61
- .align-items-baseline--lg {
62
- align-items: baseline;
63
- }
64
- .align-items-stretch--lg {
65
- align-items: stretch;
66
- }
67
- }
68
- @media (min-width: 1200px) {
69
- .align-items-start--xl {
70
- align-items: flex-start;
71
- }
72
- .align-items-end--xl {
73
- align-items: flex-end;
74
- }
75
- .align-items-center--xl {
76
- align-items: center;
77
- }
78
- .align-items-baseline--xl {
79
- align-items: baseline;
80
- }
81
- .align-items-stretch--xl {
82
- align-items: stretch;
83
- }
84
- }
85
43
  .align-self-start {
86
44
  align-self: flex-start;
87
45
  }
@@ -91,134 +49,32 @@
91
49
  .align-self-center {
92
50
  align-self: center;
93
51
  }
94
- .align-self-stretch {
95
- align-self: stretch;
96
- }
97
52
  .align-self-baseline {
98
53
  align-self: baseline;
99
54
  }
100
- @media (min-width: 576px) {
101
- .align-self-start--sm {
102
- align-self: flex-start;
103
- }
104
- .align-self-end--sm {
105
- align-self: flex-end;
106
- }
107
- .align-self-center--sm {
108
- align-self: center;
109
- }
110
- .align-self-stretch--sm {
111
- align-self: stretch;
112
- }
113
- .align-self-baseline--sm {
114
- align-self: baseline;
115
- }
116
- }
117
- @media (min-width: 768px) {
118
- .align-self-start--md {
119
- align-self: flex-start;
120
- }
121
- .align-self-end--md {
122
- align-self: flex-end;
123
- }
124
- .align-self-center--md {
125
- align-self: center;
126
- }
127
- .align-self-stretch--md {
128
- align-self: stretch;
129
- }
130
- .align-self-baseline--md {
131
- align-self: baseline;
132
- }
133
- }
134
- @media (min-width: 992px) {
135
- .align-self-start--lg {
136
- align-self: flex-start;
137
- }
138
- .align-self-end--lg {
139
- align-self: flex-end;
140
- }
141
- .align-self-center--lg {
142
- align-self: center;
143
- }
144
- .align-self-stretch--lg {
145
- align-self: stretch;
146
- }
147
- .align-self-baseline--lg {
148
- align-self: baseline;
149
- }
55
+ .align-self-stretch {
56
+ align-self: stretch;
150
57
  }
151
- @media (min-width: 1200px) {
152
- .align-self-start--xl {
153
- align-self: flex-start;
154
- }
155
- .align-self-end--xl {
156
- align-self: flex-end;
157
- }
158
- .align-self-center--xl {
159
- align-self: center;
160
- }
161
- .align-self-stretch--xl {
162
- align-self: stretch;
163
- }
164
- .align-self-baseline--xl {
165
- align-self: baseline;
166
- }
58
+ .flex-nowrap {
59
+ flex-wrap: nowrap;
167
60
  }
168
- .d-block,
169
- .show {
170
- display: block !important;
61
+ .flex-wrap {
62
+ flex-wrap: wrap;
171
63
  }
172
- .d-inline-block {
173
- display: inline-block !important;
64
+ .order-0 {
65
+ order: 0;
174
66
  }
175
- .d-inline {
176
- display: inline;
67
+ .order-1 {
68
+ order: 1;
177
69
  }
178
- .d-flex {
179
- display: flex;
70
+ .order-2 {
71
+ order: 2;
180
72
  }
181
- .d-inline-flex {
182
- display: inline-flex;
73
+ .order-3 {
74
+ order: 3;
183
75
  }
184
- .hidden,
185
- .hide,
186
- .visible-xs,
187
- .visible-xs-block,
188
- .visible-xs-inline-block,
189
- .visible-xs-inline,
190
- .visible-sm,
191
- .visible-sm-block,
192
- .visible-sm-inline-block,
193
- .visible-sm-inline,
194
- .visible-md,
195
- .visible-md-block,
196
- .visible-md-inline-block,
197
- .visible-md-inline,
198
- .visible-lg,
199
- .visible-lg-block,
200
- .visible-lg-inline-block,
201
- .visible-lg-inline,
202
- .visible-xl,
203
- .visible-xl-block,
204
- .visible-xl-inline-block,
205
- .visible-xl-inline {
206
- display: none !important;
207
- }
208
- @media not all and (min-width: 576px) {
209
- .hidden-xs {
210
- display: none !important;
211
- }
212
- .visible-xs,
213
- .visible-xs-block {
214
- display: block !important;
215
- }
216
- .visible-xs-inline-block {
217
- display: inline-block !important;
218
- }
219
- .visible-xs-inline {
220
- display: inline !important;
221
- }
76
+ .flex-grow-1 {
77
+ flex-grow: 1;
222
78
  }
223
79
  @media (min-width: 576px) {
224
80
  .d-flex--sm {
@@ -227,221 +83,92 @@
227
83
  .d-inline-flex--sm {
228
84
  display: inline-flex;
229
85
  }
230
- }
231
- @media (min-width: 576px) and not all and (min-width: 768px) {
232
- .hidden-sm {
233
- display: none !important;
234
- }
235
- .visible-sm,
236
- .visible-sm-block {
237
- display: block !important;
238
- }
239
- .visible-sm-inline-block {
240
- display: inline-block !important;
241
- }
242
- .visible-sm-inline {
243
- display: inline !important;
244
- }
245
- }
246
- @media (min-width: 768px) {
247
- .d-flex--md {
248
- display: flex;
249
- }
250
- .d-inline-flex--md {
251
- display: inline-flex;
252
- }
253
- }
254
- @media (min-width: 768px) and not all and (min-width: 992px) {
255
- .hidden-md {
256
- display: none !important;
257
- }
258
- .visible-md,
259
- .visible-md-block {
260
- display: block !important;
261
- }
262
- .visible-md-inline-block {
263
- display: inline-block !important;
264
- }
265
- .visible-md-inline {
266
- display: inline !important;
267
- }
268
- }
269
- @media (min-width: 992px) {
270
- .d-flex--lg {
271
- display: flex;
272
- }
273
- .d-inline-flex--lg {
274
- display: inline-flex;
275
- }
276
- }
277
- @media (min-width: 992px) and not all and (min-width: 1200px) {
278
- .hidden-lg {
279
- display: none !important;
280
- }
281
- .visible-lg,
282
- .visible-lg-block {
283
- display: block !important;
284
- }
285
- .visible-lg-inline-block {
286
- display: inline-block !important;
287
- }
288
- .visible-lg-inline {
289
- display: inline !important;
290
- }
291
- }
292
- @media (min-width: 1200px) {
293
- .d-flex--xl {
294
- display: flex;
295
- }
296
- .d-inline-flex--xl {
297
- display: inline-flex;
298
- }
299
- .hidden-xl {
300
- display: none !important;
301
- }
302
- .visible-xl,
303
- .visible-xl-block {
304
- display: block !important;
305
- }
306
- .visible-xl-inline-block {
307
- display: inline-block !important;
308
- }
309
- .visible-xl-inline {
310
- display: inline !important;
311
- }
312
- }
313
- .flex-row {
314
- flex-direction: row;
315
- }
316
- .flex-column {
317
- flex-direction: column;
318
- }
319
- @media (min-width: 576px) {
320
- .flex-row--sm {
321
- flex-direction: row;
322
- }
323
86
  .flex-column--sm {
324
87
  flex-direction: column;
325
88
  }
326
- }
327
- @media (min-width: 768px) {
328
- .flex-row--md {
89
+ .flex-row--sm {
329
90
  flex-direction: row;
330
91
  }
331
- .flex-column--md {
332
- flex-direction: column;
92
+ .justify-content-start--sm {
93
+ justify-content: flex-start;
333
94
  }
334
- }
335
- @media (min-width: 992px) {
336
- .flex-row--lg {
337
- flex-direction: row;
95
+ .justify-content-end--sm {
96
+ justify-content: flex-end;
338
97
  }
339
- .flex-column--lg {
340
- flex-direction: column;
98
+ .justify-content-center--sm {
99
+ justify-content: center;
341
100
  }
342
- }
343
- @media (min-width: 1200px) {
344
- .flex-row--xl {
345
- flex-direction: row;
101
+ .justify-content-between--sm {
102
+ justify-content: space-between;
346
103
  }
347
- .flex-column--xl {
348
- flex-direction: column;
104
+ .justify-content-around--sm {
105
+ justify-content: space-around;
349
106
  }
350
- }
351
- .flex-grow-1 {
352
- flex-grow: 1;
353
- }
354
- @media (min-width: 576px) {
355
- .flex-grow-1--sm {
356
- flex-grow: 1;
107
+ .align-items-start--sm {
108
+ align-items: flex-start;
357
109
  }
358
- }
359
- @media (min-width: 768px) {
360
- .flex-grow-1--md {
361
- flex-grow: 1;
110
+ .align-items-end--sm {
111
+ align-items: flex-end;
362
112
  }
363
- }
364
- @media (min-width: 992px) {
365
- .flex-grow-1--lg {
366
- flex-grow: 1;
113
+ .align-items-center--sm {
114
+ align-items: center;
367
115
  }
368
- }
369
- @media (min-width: 1200px) {
370
- .flex-grow-1--xl {
371
- flex-grow: 1;
116
+ .align-items-baseline--sm {
117
+ align-items: baseline;
372
118
  }
373
- }
374
- .flex-wrap {
375
- flex-wrap: wrap;
376
- }
377
- .flex-nowrap {
378
- flex-wrap: nowrap;
379
- }
380
- @media (min-width: 576px) {
381
- .flex-wrap--sm {
382
- flex-wrap: wrap;
119
+ .align-items-stretch--sm {
120
+ align-items: stretch;
383
121
  }
384
- .flex-nowrap--sm {
385
- flex-wrap: nowrap;
122
+ .align-self-start--sm {
123
+ align-self: flex-start;
386
124
  }
387
- }
388
- @media (min-width: 768px) {
389
- .flex-wrap--md {
390
- flex-wrap: wrap;
125
+ .align-self-end--sm {
126
+ align-self: flex-end;
391
127
  }
392
- .flex-nowrap--md {
393
- flex-wrap: nowrap;
128
+ .align-self-center--sm {
129
+ align-self: center;
394
130
  }
395
- }
396
- @media (min-width: 992px) {
397
- .flex-wrap--lg {
398
- flex-wrap: wrap;
131
+ .align-self-baseline--sm {
132
+ align-self: baseline;
399
133
  }
400
- .flex-nowrap--lg {
134
+ .align-self-stretch--sm {
135
+ align-self: stretch;
136
+ }
137
+ .flex-nowrap--sm {
401
138
  flex-wrap: nowrap;
402
139
  }
403
- }
404
- @media (min-width: 1200px) {
405
- .flex-wrap--xl {
140
+ .flex-wrap--sm {
406
141
  flex-wrap: wrap;
407
142
  }
408
- .flex-nowrap--xl {
409
- flex-wrap: nowrap;
410
- }
411
- }
412
- .justify-content-start {
413
- justify-content: flex-start;
414
- }
415
- .justify-content-end {
416
- justify-content: flex-end;
417
- }
418
- .justify-content-center {
419
- justify-content: center;
420
- }
421
- .justify-content-between {
422
- justify-content: space-between;
423
- }
424
- .justify-content-around {
425
- justify-content: space-around;
426
- }
427
- @media (min-width: 576px) {
428
- .justify-content-start--sm {
429
- justify-content: flex-start;
143
+ .order-0--sm {
144
+ order: 0;
430
145
  }
431
- .justify-content-end--sm {
432
- justify-content: flex-end;
146
+ .order-1--sm {
147
+ order: 1;
433
148
  }
434
- .justify-content-center--sm {
435
- justify-content: center;
149
+ .order-2--sm {
150
+ order: 2;
436
151
  }
437
- .justify-content-between--sm {
438
- justify-content: space-between;
152
+ .order-3--sm {
153
+ order: 3;
439
154
  }
440
- .justify-content-around--sm {
441
- justify-content: space-around;
155
+ .flex-grow-1--sm {
156
+ flex-grow: 1;
442
157
  }
443
158
  }
444
159
  @media (min-width: 768px) {
160
+ .d-flex--md {
161
+ display: flex;
162
+ }
163
+ .d-inline-flex--md {
164
+ display: inline-flex;
165
+ }
166
+ .flex-column--md {
167
+ flex-direction: column;
168
+ }
169
+ .flex-row--md {
170
+ flex-direction: row;
171
+ }
445
172
  .justify-content-start--md {
446
173
  justify-content: flex-start;
447
174
  }
@@ -457,8 +184,71 @@
457
184
  .justify-content-around--md {
458
185
  justify-content: space-around;
459
186
  }
187
+ .align-items-start--md {
188
+ align-items: flex-start;
189
+ }
190
+ .align-items-end--md {
191
+ align-items: flex-end;
192
+ }
193
+ .align-items-center--md {
194
+ align-items: center;
195
+ }
196
+ .align-items-baseline--md {
197
+ align-items: baseline;
198
+ }
199
+ .align-items-stretch--md {
200
+ align-items: stretch;
201
+ }
202
+ .align-self-start--md {
203
+ align-self: flex-start;
204
+ }
205
+ .align-self-end--md {
206
+ align-self: flex-end;
207
+ }
208
+ .align-self-center--md {
209
+ align-self: center;
210
+ }
211
+ .align-self-baseline--md {
212
+ align-self: baseline;
213
+ }
214
+ .align-self-stretch--md {
215
+ align-self: stretch;
216
+ }
217
+ .flex-nowrap--md {
218
+ flex-wrap: nowrap;
219
+ }
220
+ .flex-wrap--md {
221
+ flex-wrap: wrap;
222
+ }
223
+ .order-0--md {
224
+ order: 0;
225
+ }
226
+ .order-1--md {
227
+ order: 1;
228
+ }
229
+ .order-2--md {
230
+ order: 2;
231
+ }
232
+ .order-3--md {
233
+ order: 3;
234
+ }
235
+ .flex-grow-1--md {
236
+ flex-grow: 1;
237
+ }
460
238
  }
461
239
  @media (min-width: 992px) {
240
+ .d-flex--lg {
241
+ display: flex;
242
+ }
243
+ .d-inline-flex--lg {
244
+ display: inline-flex;
245
+ }
246
+ .flex-column--lg {
247
+ flex-direction: column;
248
+ }
249
+ .flex-row--lg {
250
+ flex-direction: row;
251
+ }
462
252
  .justify-content-start--lg {
463
253
  justify-content: flex-start;
464
254
  }
@@ -474,8 +264,71 @@
474
264
  .justify-content-around--lg {
475
265
  justify-content: space-around;
476
266
  }
267
+ .align-items-start--lg {
268
+ align-items: flex-start;
269
+ }
270
+ .align-items-end--lg {
271
+ align-items: flex-end;
272
+ }
273
+ .align-items-center--lg {
274
+ align-items: center;
275
+ }
276
+ .align-items-baseline--lg {
277
+ align-items: baseline;
278
+ }
279
+ .align-items-stretch--lg {
280
+ align-items: stretch;
281
+ }
282
+ .align-self-start--lg {
283
+ align-self: flex-start;
284
+ }
285
+ .align-self-end--lg {
286
+ align-self: flex-end;
287
+ }
288
+ .align-self-center--lg {
289
+ align-self: center;
290
+ }
291
+ .align-self-baseline--lg {
292
+ align-self: baseline;
293
+ }
294
+ .align-self-stretch--lg {
295
+ align-self: stretch;
296
+ }
297
+ .flex-nowrap--lg {
298
+ flex-wrap: nowrap;
299
+ }
300
+ .flex-wrap--lg {
301
+ flex-wrap: wrap;
302
+ }
303
+ .order-0--lg {
304
+ order: 0;
305
+ }
306
+ .order-1--lg {
307
+ order: 1;
308
+ }
309
+ .order-2--lg {
310
+ order: 2;
311
+ }
312
+ .order-3--lg {
313
+ order: 3;
314
+ }
315
+ .flex-grow-1--lg {
316
+ flex-grow: 1;
317
+ }
477
318
  }
478
319
  @media (min-width: 1200px) {
320
+ .d-flex--xl {
321
+ display: flex;
322
+ }
323
+ .d-inline-flex--xl {
324
+ display: inline-flex;
325
+ }
326
+ .flex-column--xl {
327
+ flex-direction: column;
328
+ }
329
+ .flex-row--xl {
330
+ flex-direction: row;
331
+ }
479
332
  .justify-content-start--xl {
480
333
  justify-content: flex-start;
481
334
  }
@@ -491,62 +344,45 @@
491
344
  .justify-content-around--xl {
492
345
  justify-content: space-around;
493
346
  }
494
- }
495
- .order-1 {
496
- order: 1;
497
- }
498
- .order-2 {
499
- order: 2;
500
- }
501
- .order-3 {
502
- order: 3;
503
- }
504
- .order-0 {
505
- order: 0;
506
- }
507
- @media (min-width: 576px) {
508
- .order-1--sm {
509
- order: 1;
347
+ .align-items-start--xl {
348
+ align-items: flex-start;
510
349
  }
511
- .order-2--sm {
512
- order: 2;
350
+ .align-items-end--xl {
351
+ align-items: flex-end;
513
352
  }
514
- .order-3--sm {
515
- order: 3;
353
+ .align-items-center--xl {
354
+ align-items: center;
516
355
  }
517
- .order-0--sm {
518
- order: 0;
356
+ .align-items-baseline--xl {
357
+ align-items: baseline;
519
358
  }
520
- }
521
- @media (min-width: 768px) {
522
- .order-1--md {
523
- order: 1;
359
+ .align-items-stretch--xl {
360
+ align-items: stretch;
524
361
  }
525
- .order-2--md {
526
- order: 2;
362
+ .align-self-start--xl {
363
+ align-self: flex-start;
527
364
  }
528
- .order-3--md {
529
- order: 3;
365
+ .align-self-end--xl {
366
+ align-self: flex-end;
530
367
  }
531
- .order-0--md {
532
- order: 0;
368
+ .align-self-center--xl {
369
+ align-self: center;
533
370
  }
534
- }
535
- @media (min-width: 992px) {
536
- .order-1--lg {
537
- order: 1;
371
+ .align-self-baseline--xl {
372
+ align-self: baseline;
538
373
  }
539
- .order-2--lg {
540
- order: 2;
374
+ .align-self-stretch--xl {
375
+ align-self: stretch;
541
376
  }
542
- .order-3--lg {
543
- order: 3;
377
+ .flex-nowrap--xl {
378
+ flex-wrap: nowrap;
544
379
  }
545
- .order-0--lg {
380
+ .flex-wrap--xl {
381
+ flex-wrap: wrap;
382
+ }
383
+ .order-0--xl {
546
384
  order: 0;
547
385
  }
548
- }
549
- @media (min-width: 1200px) {
550
386
  .order-1--xl {
551
387
  order: 1;
552
388
  }
@@ -556,8 +392,8 @@
556
392
  .order-3--xl {
557
393
  order: 3;
558
394
  }
559
- .order-0--xl {
560
- order: 0;
395
+ .flex-grow-1--xl {
396
+ flex-grow: 1;
561
397
  }
562
398
  }
563
399
  /* Items */