@transferwise/neptune-css 12.0.0 → 12.0.1
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.
- package/CHANGELOG.md +11 -0
- package/dist/css/forms.css +1 -1
- package/dist/css/grid.css +1 -1
- package/dist/css/navbar-base.css +1 -1
- package/dist/css/navbar.css +1 -1
- package/dist/css/neptune.css +1 -1
- package/package.json +2 -2
- package/src/less/addons/_utilities.less +5 -5
- package/src/less/grid.less +22 -22
- package/src/less/mixins/_grid-framework.less +2 -3
- package/src/less/mixins/_grid.less +16 -24
- package/src/less/navbar-base.less +12 -21
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/neptune-css",
|
|
3
3
|
"description": "Neptune CSS library",
|
|
4
|
-
"version": "12.0.
|
|
4
|
+
"version": "12.0.1",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"bin": {
|
|
61
61
|
"neptune-css-upgrade-util": "scripts/neptune-css-upgrader.js"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "a34135ee671da68b1e81b031581d661dd4b04ea1"
|
|
64
64
|
}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
.pull-left,
|
|
28
28
|
.pull-xs-left {
|
|
29
|
-
.float(
|
|
29
|
+
.float(left) !important;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.pull-xs-none {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
@media (min-width: @screen-sm-min) {
|
|
37
37
|
.pull-sm-left {
|
|
38
|
-
.float(
|
|
38
|
+
.float(left) !important;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.pull-sm-right {
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
|
|
50
50
|
@media (min-width: @screen-md-min) {
|
|
51
51
|
.pull-md-left {
|
|
52
|
-
.float(
|
|
52
|
+
.float(left) !important;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.pull-md-right {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
|
|
64
64
|
@media (min-width: @screen-lg-min) {
|
|
65
65
|
.pull-lg-left {
|
|
66
|
-
.float(
|
|
66
|
+
.float(left) !important;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.pull-lg-right {
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
|
|
78
78
|
@media (min-width: @screen-xl-min) {
|
|
79
79
|
.pull-xl-left {
|
|
80
|
-
.float(
|
|
80
|
+
.float(left) !important;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
.pull-xl-right {
|
package/src/less/grid.less
CHANGED
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
max-width: @container-xl;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
padding-right: @spacing-1-mobile;
|
|
17
|
+
padding-left: @spacing-1-mobile;
|
|
18
18
|
|
|
19
19
|
@media (min-width: @screen-sm-min) {
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
padding-right: @spacing-1-tablet;
|
|
21
|
+
padding-left: @spacing-1-tablet;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@media (min-width: @screen-lg-min) {
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
padding-right: @spacing-1-desktop;
|
|
26
|
+
padding-left: @spacing-1-desktop;
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
@@ -67,15 +67,15 @@
|
|
|
67
67
|
|
|
68
68
|
@media (max-width: @screen-xs-max) {
|
|
69
69
|
.container {
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
padding-right: @spacing-1-mobile;
|
|
71
|
+
padding-left: @spacing-1-mobile;
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
|
76
76
|
.container {
|
|
77
|
-
|
|
78
|
-
|
|
77
|
+
padding-right: @spacing-1-tablet;
|
|
78
|
+
padding-left: @spacing-1-tablet;
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -132,23 +132,23 @@
|
|
|
132
132
|
// Make grid gutters smaller on mobile
|
|
133
133
|
@media (max-width: @screen-xs-max) {
|
|
134
134
|
.row {
|
|
135
|
-
|
|
136
|
-
|
|
135
|
+
margin-right: -8px;
|
|
136
|
+
margin-left: -8px;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
[class*='col-'] {
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
padding-right: 8px;
|
|
141
|
+
padding-left: 8px;
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
.make-grid-columns-wide(@gutter: @grid-gutter-width) {
|
|
146
|
-
|
|
147
|
-
|
|
146
|
+
margin-right: -@gutter / 2;
|
|
147
|
+
margin-left: -@gutter / 2;
|
|
148
148
|
|
|
149
149
|
[class*='col-'] {
|
|
150
|
-
|
|
151
|
-
|
|
150
|
+
padding-right: @gutter / 2;
|
|
151
|
+
padding-left: @gutter / 2;
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
|
|
@@ -172,14 +172,14 @@
|
|
|
172
172
|
|
|
173
173
|
.container--text {
|
|
174
174
|
max-width: 700px;
|
|
175
|
-
|
|
176
|
-
|
|
175
|
+
margin-right: auto;
|
|
176
|
+
margin-left: auto;
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
.container--wide {
|
|
180
180
|
max-width: 1500px;
|
|
181
|
-
|
|
182
|
-
|
|
181
|
+
margin-right: auto;
|
|
182
|
+
margin-left: auto;
|
|
183
183
|
|
|
184
184
|
@media (min-width: @screen-xl-min) {
|
|
185
185
|
max-width: 1500px;
|
|
@@ -24,9 +24,8 @@
|
|
|
24
24
|
// Prevent columns from collapsing when empty
|
|
25
25
|
min-height: 1px;
|
|
26
26
|
// Inner gutter via padding
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
.padding(right, floor((@grid-gutter-width / 2)));
|
|
27
|
+
padding-left: ceil((@grid-gutter-width / 2));
|
|
28
|
+
padding-right: floor((@grid-gutter-width / 2));
|
|
30
29
|
}
|
|
31
30
|
}
|
|
32
31
|
.col(1); // kickstart it
|
|
@@ -4,22 +4,19 @@
|
|
|
4
4
|
|
|
5
5
|
// Centered container element
|
|
6
6
|
.container-fixed(@gutter: @grid-gutter-width) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
.padding(left, (@gutter / 2));
|
|
12
|
-
|
|
13
|
-
.padding(right, (@gutter / 2));
|
|
7
|
+
margin-right: auto;
|
|
8
|
+
margin-left: auto;
|
|
9
|
+
padding-left: (@gutter / 2);
|
|
10
|
+
padding-right: (@gutter / 2);
|
|
14
11
|
|
|
15
12
|
&:extend(.clearfix all);
|
|
16
13
|
}
|
|
17
14
|
|
|
18
15
|
// Creates a wrapper for a series of columns
|
|
19
16
|
.make-row(@gutter: @grid-gutter-width) {
|
|
20
|
-
.margin(left, ceil((@gutter / -2)));
|
|
17
|
+
.margin(left, ceil((@gutter / -2)), floor((@gutter / -2)));
|
|
21
18
|
|
|
22
|
-
.margin(right, floor((@gutter / -2)));
|
|
19
|
+
.margin(right, floor((@gutter / -2)), ceil((@gutter / -2)));
|
|
23
20
|
|
|
24
21
|
&:extend(.clearfix all);
|
|
25
22
|
}
|
|
@@ -31,9 +28,8 @@
|
|
|
31
28
|
|
|
32
29
|
width: percentage((@columns / @grid-columns));
|
|
33
30
|
min-height: 1px;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
.padding(right, (@gutter / 2));
|
|
31
|
+
padding-left: (@gutter / 2);
|
|
32
|
+
padding-right: (@gutter / 2);
|
|
37
33
|
}
|
|
38
34
|
.make-xs-column-offset(@columns) {
|
|
39
35
|
.margin(left, percentage((@columns / @grid-columns)));
|
|
@@ -49,9 +45,8 @@
|
|
|
49
45
|
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
|
50
46
|
position: relative;
|
|
51
47
|
min-height: 1px;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
.padding(right, (@gutter / 2));
|
|
48
|
+
padding-left: (@gutter / 2);
|
|
49
|
+
padding-right: (@gutter / 2);
|
|
55
50
|
|
|
56
51
|
@media (min-width: @screen-sm-min) {
|
|
57
52
|
.float(left);
|
|
@@ -79,9 +74,8 @@
|
|
|
79
74
|
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
|
80
75
|
position: relative;
|
|
81
76
|
min-height: 1px;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
.padding(right, (@gutter / 2));
|
|
77
|
+
padding-left: (@gutter / 2);
|
|
78
|
+
padding-right: (@gutter / 2);
|
|
85
79
|
|
|
86
80
|
@media (min-width: @screen-md-min) {
|
|
87
81
|
.float(left);
|
|
@@ -109,9 +103,8 @@
|
|
|
109
103
|
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
|
110
104
|
position: relative;
|
|
111
105
|
min-height: 1px;
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
.padding(right, (@gutter / 2));
|
|
106
|
+
padding-left: (@gutter / 2);
|
|
107
|
+
padding-right: (@gutter / 2);
|
|
115
108
|
|
|
116
109
|
@media (min-width: @screen-lg-min) {
|
|
117
110
|
.float(left);
|
|
@@ -139,9 +132,8 @@
|
|
|
139
132
|
.make-xl-column(@columns; @gutter: @grid-gutter-width) {
|
|
140
133
|
position: relative;
|
|
141
134
|
min-height: 1px;
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
.padding(right, (@gutter / 2));
|
|
135
|
+
padding-left: (@gutter / 2);
|
|
136
|
+
padding-right: (@gutter / 2);
|
|
145
137
|
|
|
146
138
|
@media (min-width: @screen-xl-min) {
|
|
147
139
|
.float(left);
|
|
@@ -81,9 +81,8 @@
|
|
|
81
81
|
.navbar-fixed-top &,
|
|
82
82
|
.navbar-static-top &,
|
|
83
83
|
.navbar-fixed-bottom & {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
.padding(right, 0);
|
|
84
|
+
padding-left: 0;
|
|
85
|
+
padding-right: 0;
|
|
87
86
|
}
|
|
88
87
|
}
|
|
89
88
|
}
|
|
@@ -99,8 +98,8 @@
|
|
|
99
98
|
> .navbar-collapse {
|
|
100
99
|
|
|
101
100
|
@media (--screen-md) {
|
|
102
|
-
|
|
103
|
-
|
|
101
|
+
margin-right: 0;
|
|
102
|
+
margin-left: 0;
|
|
104
103
|
}
|
|
105
104
|
}
|
|
106
105
|
}
|
|
@@ -134,10 +133,8 @@
|
|
|
134
133
|
.navbar-fixed-top,
|
|
135
134
|
.navbar-fixed-bottom {
|
|
136
135
|
position: fixed;
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
.left(0);
|
|
140
|
-
|
|
136
|
+
right:0;
|
|
137
|
+
left:0;
|
|
141
138
|
z-index: @zindex-navbar-fixed;
|
|
142
139
|
backface-visibility: hidden;
|
|
143
140
|
background-color: @color-navy-background-elevated;
|
|
@@ -439,10 +436,8 @@
|
|
|
439
436
|
@media (--screen-md) {
|
|
440
437
|
width: auto;
|
|
441
438
|
border: 0;
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
.margin(right, 0);
|
|
445
|
-
|
|
439
|
+
margin-left: 0;
|
|
440
|
+
margin-right: 0;
|
|
446
441
|
padding-top: 0;
|
|
447
442
|
padding-bottom: 0;
|
|
448
443
|
box-shadow: none;
|
|
@@ -603,10 +598,8 @@
|
|
|
603
598
|
|
|
604
599
|
@media (--screen-md) {
|
|
605
600
|
.float(left);
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
.margin(right, @navbar-padding-horizontal);
|
|
601
|
+
margin-left: @navbar-padding-horizontal;
|
|
602
|
+
margin-right: @navbar-padding-horizontal;
|
|
610
603
|
}
|
|
611
604
|
}
|
|
612
605
|
|
|
@@ -925,10 +918,8 @@
|
|
|
925
918
|
.navbar-collapse {
|
|
926
919
|
position: fixed;
|
|
927
920
|
bottom: 0;
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
.right(0);
|
|
931
|
-
|
|
921
|
+
left: 0;
|
|
922
|
+
right: 0;
|
|
932
923
|
height: 100% !important;
|
|
933
924
|
|
|
934
925
|
// Backwards compatibility if collapse-panel missing
|