@transferwise/neptune-css 0.0.0-experimental-b3f4bb2 → 0.0.0-experimental-2255abe
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/dist/css/alerts.css +4 -2
- package/dist/css/circles.css +3 -39
- package/dist/css/navbar-base.css +1385 -0
- package/dist/css/navbar.css +47 -47
- package/dist/css/neptune.css +8 -46
- package/package.json +1 -1
- package/src/less/alerts.less +2 -1
- package/src/less/circles.less +11 -1
- package/src/less/navbar-base.less +1338 -0
- package/src/less/navbar.less +1 -1336
- package/src/less/mixins/_circle.less +0 -11
package/dist/css/alerts.css
CHANGED
|
@@ -36,11 +36,13 @@
|
|
|
36
36
|
padding-left: var(--padding-small);
|
|
37
37
|
margin-top: 2px;
|
|
38
38
|
}
|
|
39
|
-
.alert .close
|
|
39
|
+
.alert .close,
|
|
40
|
+
.alert .np-close-button {
|
|
40
41
|
margin-top: 4px;
|
|
41
42
|
margin-top: var(--size-4);
|
|
42
43
|
}
|
|
43
|
-
.np-theme-personal .alert .close
|
|
44
|
+
.np-theme-personal .alert .close,
|
|
45
|
+
.np-theme-personal .alert .np-close-button {
|
|
44
46
|
margin-top: calc(8px * -1);
|
|
45
47
|
margin-top: calc(var(--size-8) * -1);
|
|
46
48
|
margin-right: calc(8px * -1);
|
package/dist/css/circles.css
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DEPRECATED: use <Circle /> component instead
|
|
3
|
+
*/
|
|
1
4
|
.circle {
|
|
2
5
|
display: flex;
|
|
3
6
|
align-items: center;
|
|
@@ -58,41 +61,24 @@ a.circle[style]:hover {
|
|
|
58
61
|
height: 48px;
|
|
59
62
|
line-height: 48px;
|
|
60
63
|
}
|
|
61
|
-
.circle .icon,
|
|
62
|
-
.circle-sm .icon {
|
|
63
|
-
font-size: 24px;
|
|
64
|
-
line-height: 46px;
|
|
65
|
-
}
|
|
66
64
|
.circle-xs {
|
|
67
65
|
font-size: 10px;
|
|
68
66
|
width: 24px;
|
|
69
67
|
height: 24px;
|
|
70
68
|
line-height: 24px;
|
|
71
69
|
}
|
|
72
|
-
.circle-xs .icon {
|
|
73
|
-
font-size: 14px;
|
|
74
|
-
line-height: 22px;
|
|
75
|
-
}
|
|
76
70
|
.circle-md {
|
|
77
71
|
font-size: 24px;
|
|
78
72
|
width: 72px;
|
|
79
73
|
height: 72px;
|
|
80
74
|
line-height: 72px;
|
|
81
75
|
}
|
|
82
|
-
.circle-md .icon {
|
|
83
|
-
font-size: 32px;
|
|
84
|
-
line-height: 70px;
|
|
85
|
-
}
|
|
86
76
|
.circle-lg {
|
|
87
77
|
font-size: 32px;
|
|
88
78
|
width: 96px;
|
|
89
79
|
height: 96px;
|
|
90
80
|
line-height: 96px;
|
|
91
81
|
}
|
|
92
|
-
.circle-lg .icon {
|
|
93
|
-
font-size: 40px;
|
|
94
|
-
line-height: 94px;
|
|
95
|
-
}
|
|
96
82
|
a.circle,
|
|
97
83
|
a.circle .icon {
|
|
98
84
|
-webkit-text-decoration: none;
|
|
@@ -159,10 +145,6 @@ a.circle.active:hover {
|
|
|
159
145
|
background-color: rgba(134,167,189,0.10196);
|
|
160
146
|
background-color: var(--color-background-neutral);
|
|
161
147
|
}
|
|
162
|
-
.circle-responsive.circle-lg .icon {
|
|
163
|
-
font-size: 24px;
|
|
164
|
-
line-height: 46px;
|
|
165
|
-
}
|
|
166
148
|
@media (min-width: 576px) {
|
|
167
149
|
.circle-responsive {
|
|
168
150
|
border-radius: 50%;
|
|
@@ -176,22 +158,12 @@ a.circle.active:hover {
|
|
|
176
158
|
height: 48px;
|
|
177
159
|
line-height: 48px;
|
|
178
160
|
}
|
|
179
|
-
.circle-responsive.circle .icon,
|
|
180
|
-
.circle-responsive.circle-sm .icon,
|
|
181
|
-
.circle-responsive.circle-md .icon {
|
|
182
|
-
font-size: 24px;
|
|
183
|
-
line-height: 46px;
|
|
184
|
-
}
|
|
185
161
|
.circle-responsive.circle-lg {
|
|
186
162
|
font-size: 24px;
|
|
187
163
|
width: 72px;
|
|
188
164
|
height: 72px;
|
|
189
165
|
line-height: 72px;
|
|
190
166
|
}
|
|
191
|
-
.circle-responsive.circle-lg .icon {
|
|
192
|
-
font-size: 32px;
|
|
193
|
-
line-height: 70px;
|
|
194
|
-
}
|
|
195
167
|
.circle-responsive.circle-inverse {
|
|
196
168
|
background-color: rgba(134,167,189,0.10196);
|
|
197
169
|
background-color: var(--color-background-neutral);
|
|
@@ -204,20 +176,12 @@ a.circle.active:hover {
|
|
|
204
176
|
height: 72px;
|
|
205
177
|
line-height: 72px;
|
|
206
178
|
}
|
|
207
|
-
.circle-responsive.circle-md .icon {
|
|
208
|
-
font-size: 32px;
|
|
209
|
-
line-height: 70px;
|
|
210
|
-
}
|
|
211
179
|
.circle-responsive.circle-lg {
|
|
212
180
|
font-size: 32px;
|
|
213
181
|
width: 96px;
|
|
214
182
|
height: 96px;
|
|
215
183
|
line-height: 96px;
|
|
216
184
|
}
|
|
217
|
-
.circle-responsive.circle-lg .icon {
|
|
218
|
-
font-size: 40px;
|
|
219
|
-
line-height: 94px;
|
|
220
|
-
}
|
|
221
185
|
}
|
|
222
186
|
.dropdown-menu li > .circle:first-child,
|
|
223
187
|
.dropdown-menu li > a > .circle:first-child {
|