@transferwise/neptune-css 14.8.2 → 14.9.0

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 (49) hide show
  1. package/dist/css/border-radius.css +8 -0
  2. package/dist/css/flex.css +417 -253
  3. package/dist/css/navbar-base.css +168 -339
  4. package/dist/css/navbar.css +41 -107
  5. package/dist/css/neptune-addons.css +426 -898
  6. package/dist/css/neptune-core.css +163 -200
  7. package/dist/css/neptune.css +14432 -15228
  8. package/dist/css/utilities.css +1202 -72
  9. package/package.json +1 -1
  10. package/src/less/{mixins → addons}/_center-block.less +2 -4
  11. package/src/less/addons/_spacing-utilities.less +3 -26
  12. package/src/less/border-radius.less +1 -3
  13. package/src/less/core/_scaffolding.less +7 -27
  14. package/src/less/core/_typography-utilities.less +17 -237
  15. package/src/less/flex.less +9 -18
  16. package/src/less/navbar.less +10 -2
  17. package/src/less/neptune-addons.less +4 -1
  18. package/src/less/utilities/align-items.less +107 -0
  19. package/src/less/utilities/align-self.less +107 -0
  20. package/src/less/utilities/border-radius.less +11 -0
  21. package/src/less/utilities/color.less +70 -0
  22. package/src/less/utilities/cursor.less +3 -0
  23. package/src/less/utilities/display.less +178 -0
  24. package/src/less/utilities/flex-direction.less +47 -0
  25. package/src/less/utilities/flex-grow.less +27 -0
  26. package/src/less/utilities/flex-wrap.less +47 -0
  27. package/src/less/utilities/float.less +77 -0
  28. package/src/less/utilities/font-weight.less +11 -0
  29. package/src/less/utilities/gap.less +3 -0
  30. package/src/less/utilities/justify-content.less +107 -0
  31. package/src/less/utilities/margin.less +192 -0
  32. package/src/less/utilities/max-width.less +3 -0
  33. package/src/less/utilities/order.less +87 -0
  34. package/src/less/utilities/outline-style.less +8 -0
  35. package/src/less/utilities/overflow-wrap.less +3 -0
  36. package/src/less/utilities/padding.less +179 -0
  37. package/src/less/utilities/position.less +3 -0
  38. package/src/less/utilities/rotate.less +12 -0
  39. package/src/less/utilities/screen-reader.less +24 -0
  40. package/src/less/utilities/text-align.less +87 -0
  41. package/src/less/utilities/text-decoration-line.less +8 -0
  42. package/src/less/utilities/text-overflow.less +7 -0
  43. package/src/less/utilities/text-transform.less +11 -0
  44. package/src/less/utilities/visibility.less +3 -0
  45. package/src/less/utilities/white-space.less +27 -0
  46. package/src/less/utilities.less +29 -141
  47. package/src/less/addons/_display-utilities.less +0 -159
  48. package/src/less/addons/_utilities.less +0 -147
  49. package/src/less/mixins/_flex.less +0 -105
@@ -1,153 +1,41 @@
1
1
  @import (reference) "../variables/legacy-variables.less";
2
2
  @import (reference) "./mixins/_clearfix.less";
3
- @import (reference) "./mixins/_center-block.less";
4
3
  @import (reference) "./mixins/_hide-text.less";
5
- @import (reference) "./mixins/_logical-properties.less";
6
4
 
7
- .d-inline-block {
8
- display: inline-block;
9
- }
10
-
11
- .d-inline {
12
- display: inline;
13
- }
5
+ @import "./addons/_center-block.less";
6
+ @import "./utilities/align-items.less";
7
+ @import "./utilities/align-self.less";
8
+ @import "./utilities/border-radius.less";
9
+ @import "./utilities/color.less";
10
+ @import "./utilities/cursor.less";
11
+ @import "./utilities/display.less";
12
+ @import "./utilities/flex-direction.less";
13
+ @import "./utilities/flex-grow.less";
14
+ @import "./utilities/flex-wrap.less";
15
+ @import "./utilities/float.less";
16
+ @import "./utilities/font-weight.less";
17
+ @import "./utilities/gap.less";
18
+ @import "./utilities/justify-content.less";
19
+ @import "./utilities/margin.less";
20
+ @import "./utilities/max-width.less";
21
+ @import "./utilities/order.less";
22
+ @import "./utilities/outline-style.less";
23
+ @import "./utilities/overflow-wrap.less";
24
+ @import "./utilities/padding.less";
25
+ @import "./utilities/position.less";
26
+ @import "./utilities/rotate.less";
27
+ @import "./utilities/screen-reader.less";
28
+ @import "./utilities/text-align.less";
29
+ @import "./utilities/text-decoration-line.less";
30
+ @import "./utilities/text-overflow.less";
31
+ @import "./utilities/text-transform.less";
32
+ @import "./utilities/visibility.less";
33
+ @import "./utilities/white-space.less";
14
34
 
15
35
  .clearfix {
16
36
  .clearfix();
17
37
  }
18
38
 
19
- .center-block {
20
- .center-block();
21
- }
22
-
23
- .pull-right,
24
- .pull-xs-right {
25
- .float(right) !important;
26
- }
27
-
28
- .pull-left,
29
- .pull-xs-left {
30
- .float(left) !important;
31
- }
32
-
33
- .pull-xs-none {
34
- float: none !important;
35
- }
36
-
37
- @media (--screen-sm) {
38
- .pull-sm-left {
39
- .float(left) !important;
40
- }
41
-
42
- .pull-sm-right {
43
- .float(right) !important;
44
- }
45
-
46
- .pull-sm-none {
47
- float: none !important;
48
- }
49
- }
50
-
51
- @media (--screen-md) {
52
- .pull-md-left {
53
- .float(left) !important;
54
- }
55
-
56
- .pull-md-right {
57
- .float(right) !important;
58
- }
59
-
60
- .pull-md-none {
61
- float: none !important;
62
- }
63
- }
64
-
65
- @media (--screen-lg) {
66
- .pull-lg-left {
67
- .float(left) !important;
68
- }
69
-
70
- .pull-lg-right {
71
- .float(right) !important;
72
- }
73
-
74
- .pull-lg-none {
75
- float: none !important;
76
- }
77
- }
78
-
79
- @media (--screen-xl) {
80
- .pull-xl-left {
81
- .float(left) !important;
82
- }
83
-
84
- .pull-xl-right {
85
- .float(right) !important;
86
- }
87
-
88
- .pull-xl-none {
89
- float: none !important;
90
- }
91
- }
92
-
93
- // Floats not changing direction on RTL.
94
-
95
- .pull-left-single-direction {
96
- float: left !important;
97
- }
98
-
99
- .pull-right-single-direction {
100
- float: right !important;
101
- }
102
-
103
- // Toggling content
104
- // -------------------------
105
-
106
- // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
107
-
108
- .hide {
109
- display: none !important;
110
- }
111
-
112
- .show {
113
- display: block !important;
114
- }
115
-
116
- .invisible {
117
- visibility: hidden;
118
- }
119
-
120
39
  .text-hide {
121
40
  .text-hide();
122
41
  }
123
-
124
- // Hide from screenreaders and browsers
125
- //
126
- // Credit: HTML5 Boilerplate
127
-
128
- .hidden {
129
- display: none !important;
130
- }
131
-
132
- // For Affix plugin
133
- // -------------------------
134
-
135
- .affix {
136
- position: fixed;
137
- }
138
-
139
- .rotate90 {
140
- transform: rotate(90deg);
141
- }
142
-
143
- .rotate180 {
144
- transform: rotate(180deg);
145
- }
146
-
147
- .rotate270 {
148
- transform: rotate(270deg);
149
- }
150
-
151
- .rotate-90 {
152
- transform: rotate(-90deg);
153
- }
@@ -1,159 +0,0 @@
1
- .d-block {
2
- display: block !important;
3
- }
4
-
5
- .d-inline-block {
6
- display: inline-block !important;
7
- }
8
-
9
- .visible-xs,
10
- .visible-xs-block,
11
- .visible-xs-inline,
12
- .visible-xs-inline-block,
13
- .visible-sm,
14
- .visible-sm-block,
15
- .visible-sm-inline,
16
- .visible-sm-inline-block,
17
- .visible-md,
18
- .visible-md-block,
19
- .visible-md-inline,
20
- .visible-md-inline-block,
21
- .visible-lg,
22
- .visible-lg-block,
23
- .visible-lg-inline,
24
- .visible-lg-inline-block,
25
- .visible-xl,
26
- .visible-xl-block,
27
- .visible-xl-inline,
28
- .visible-xl-inline-block {
29
- display: none !important;
30
- }
31
-
32
- .visible-xs,
33
- .visible-xs-block {
34
- @media (--screen-xs-max) {
35
- display: block !important;
36
- }
37
- }
38
-
39
- .visible-xs-inline {
40
- @media (--screen-xs-max) {
41
- display: inline !important;
42
- }
43
- }
44
-
45
- .visible-xs-inline-block {
46
- @media (--screen-xs-max) {
47
- display: inline-block !important;
48
- }
49
- }
50
-
51
- .visible-sm,
52
- .visible-sm-block {
53
- @media (--screen-sm) and (--screen-sm-max) {
54
- display: block !important;
55
- }
56
- }
57
-
58
- .visible-sm-inline {
59
- @media (--screen-sm) and (--screen-sm-max) {
60
- display: inline !important;
61
- }
62
- }
63
-
64
- .visible-sm-inline-block {
65
- @media (--screen-sm) and (--screen-sm-max) {
66
- display: inline-block !important;
67
- }
68
- }
69
-
70
- .visible-md,
71
- .visible-md-block {
72
- @media (--screen-md) and (--screen-md-max) {
73
- display: block !important;
74
- }
75
- }
76
-
77
- .visible-md-inline {
78
- @media (--screen-md) and (--screen-md-max) {
79
- display: inline !important;
80
- }
81
- }
82
-
83
- .visible-md-inline-block {
84
- @media (--screen-md) and (--screen-md-max) {
85
- display: inline-block !important;
86
- }
87
- }
88
-
89
- .visible-lg,
90
- .visible-lg-block {
91
- @media (--screen-lg) and (--screen-lg-max) {
92
- display: block !important;
93
- }
94
- }
95
-
96
- .visible-lg-inline {
97
- @media (--screen-lg) and (--screen-lg-max) {
98
- display: inline !important;
99
- }
100
- }
101
-
102
- .visible-lg-inline-block {
103
- @media (--screen-lg) and (--screen-lg-max) {
104
- display: inline-block !important;
105
- }
106
- }
107
-
108
- .visible-xl,
109
- .visible-xl-block {
110
- @media (--screen-xl) {
111
- display: block !important;
112
- }
113
- }
114
-
115
- .visible-xl-inline {
116
- @media (--screen-xl) {
117
- display: inline !important;
118
- }
119
- }
120
-
121
- .visible-xl-inline-block {
122
- @media (--screen-xl) {
123
- display: inline-block !important;
124
- }
125
- }
126
-
127
- .hidden-xs {
128
- @media (--screen-xs-max) {
129
- display: none !important;
130
- }
131
- }
132
-
133
- .hidden-sm {
134
- @media (--screen-sm) and (--screen-sm-max) {
135
- display: none !important;
136
- }
137
- }
138
-
139
- .hidden-md {
140
- @media (--screen-md) and (--screen-md-max) {
141
- display: none !important;
142
- }
143
- }
144
-
145
- .hidden-lg {
146
- @media (--screen-lg) and (--screen-lg-max) {
147
- display: none !important;
148
- }
149
- }
150
-
151
- .hidden-xl {
152
- @media (--screen-xl) {
153
- display: none !important;
154
- }
155
- }
156
-
157
- .outline-none {
158
- outline: none;
159
- }
@@ -1,147 +0,0 @@
1
- @import (reference)
2
- "../../variables/legacy-variables.less";
3
- @import (reference) "../mixins/_clearfix.less";
4
- @import (reference) "../mixins/_center-block.less";
5
- @import (reference) "../mixins/_hide-text.less";
6
-
7
- //
8
- // Utility classes
9
- // --------------------------------------------------
10
-
11
- // Floats
12
- // -------------------------
13
-
14
- .clearfix {
15
- .clearfix();
16
- }
17
-
18
- .center-block {
19
- .center-block();
20
- }
21
-
22
- .pull-right,
23
- .pull-xs-right {
24
- .float(right) !important;
25
- }
26
-
27
- .pull-left,
28
- .pull-xs-left {
29
- .float(left) !important;
30
- }
31
-
32
- .pull-xs-none {
33
- float: none !important;
34
- }
35
-
36
- @media (min-width: @screen-sm-min) {
37
- .pull-sm-left {
38
- .float(left) !important;
39
- }
40
-
41
- .pull-sm-right {
42
- .float(right) !important;
43
- }
44
-
45
- .pull-sm-none {
46
- float: none !important;
47
- }
48
- }
49
-
50
- @media (min-width: @screen-md-min) {
51
- .pull-md-left {
52
- .float(left) !important;
53
- }
54
-
55
- .pull-md-right {
56
- .float(right) !important;
57
- }
58
-
59
- .pull-md-none {
60
- float: none !important;
61
- }
62
- }
63
-
64
- @media (min-width: @screen-lg-min) {
65
- .pull-lg-left {
66
- .float(left) !important;
67
- }
68
-
69
- .pull-lg-right {
70
- .float(right) !important;
71
- }
72
-
73
- .pull-lg-none {
74
- float: none !important;
75
- }
76
- }
77
-
78
- @media (min-width: @screen-xl-min) {
79
- .pull-xl-left {
80
- .float(left) !important;
81
- }
82
-
83
- .pull-xl-right {
84
- .float(right) !important;
85
- }
86
-
87
- .pull-xl-none {
88
- float: none !important;
89
- }
90
- }
91
-
92
- // Toggling content
93
- // -------------------------
94
-
95
- // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
96
- .hide {
97
- display: none !important;
98
- }
99
-
100
- .show {
101
- display: block !important;
102
- }
103
-
104
- .invisible {
105
- visibility: hidden;
106
- }
107
-
108
- .text-hide {
109
- .text-hide();
110
- }
111
-
112
- // Hide from screenreaders and browsers
113
- //
114
- // Credit: HTML5 Boilerplate
115
-
116
- .hidden {
117
- display: none !important;
118
- }
119
-
120
- // For Affix plugin
121
- // -------------------------
122
-
123
- .affix {
124
- position: fixed;
125
- }
126
-
127
- .rotate90 {
128
- transform: rotate(90deg);
129
- }
130
-
131
- .rotate180 {
132
- transform: rotate(180deg);
133
- }
134
-
135
- .rotate270 {
136
- transform: rotate(270deg);
137
- }
138
-
139
- .rotate-90 {
140
- transform: rotate(-90deg);
141
- }
142
-
143
- // Cursor
144
-
145
- .clickable {
146
- cursor: pointer !important;
147
- }
@@ -1,105 +0,0 @@
1
- .flex-properties(@break-point) {
2
- .d-flex@{break-point} {
3
- display: flex;
4
- }
5
-
6
- .d-inline-flex@{break-point} {
7
- display: inline-flex;
8
- }
9
-
10
- .flex-column@{break-point} {
11
- flex-direction: column;
12
- }
13
-
14
- .flex-row@{break-point} {
15
- flex-direction: row;
16
- }
17
-
18
- .justify-content-start@{break-point} {
19
- justify-content: flex-start;
20
- }
21
-
22
- .justify-content-end@{break-point} {
23
- justify-content: flex-end;
24
- }
25
-
26
- .justify-content-center@{break-point} {
27
- justify-content: center;
28
- }
29
-
30
- .justify-content-between@{break-point} {
31
- justify-content: space-between;
32
- }
33
-
34
- .justify-content-around@{break-point} {
35
- justify-content: space-around;
36
- }
37
-
38
- .align-items-start@{break-point} {
39
- align-items: flex-start;
40
- }
41
-
42
- .align-items-end@{break-point} {
43
- align-items: flex-end;
44
- }
45
-
46
- .align-items-center@{break-point} {
47
- align-items: center;
48
- }
49
-
50
- .align-items-baseline@{break-point} {
51
- align-items: baseline;
52
- }
53
-
54
- .align-items-stretch@{break-point} {
55
- align-items: stretch;
56
- }
57
-
58
- .align-self-start@{break-point} {
59
- align-self: flex-start;
60
- }
61
-
62
- .align-self-end@{break-point} {
63
- align-self: flex-end;
64
- }
65
-
66
- .align-self-center@{break-point} {
67
- align-self: center;
68
- }
69
-
70
- .align-self-baseline@{break-point} {
71
- align-self: baseline;
72
- }
73
-
74
- .align-self-stretch@{break-point} {
75
- align-self: stretch;
76
- }
77
-
78
- .flex-nowrap@{break-point} {
79
- flex-wrap: nowrap;
80
- }
81
-
82
- .flex-wrap@{break-point} {
83
- flex-wrap: wrap;
84
- }
85
-
86
- .order-0@{break-point} {
87
- order: 0;
88
- }
89
-
90
- .order-1@{break-point} {
91
- order: 1;
92
- }
93
-
94
- .order-2@{break-point} {
95
- order: 2;
96
- }
97
-
98
- .order-3@{break-point} {
99
- order: 3;
100
- }
101
-
102
- .flex-grow-1@{break-point} {
103
- flex-grow: 1;
104
- }
105
- }