@transferwise/neptune-css 14.6.2 → 14.7.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.
- package/dist/css/accordion.css +1 -1
- package/dist/css/buttons.css +1 -1
- package/dist/css/grid.css +1 -1
- package/dist/css/input-groups.css +1 -1
- package/dist/css/media.css +1 -1
- package/dist/css/neptune-addons.css +1 -1
- package/dist/css/neptune-core.css +1 -1
- package/dist/css/neptune.css +2 -2
- package/dist/css/table.css +1 -1
- package/dist/less/neptune-tokens.less +2 -2
- package/dist/props/custom-media.css +2 -0
- package/dist/props/neptune-tokens.css +1 -1
- package/package.json +2 -2
- package/src/less/addons/_spacing-utilities.less +17 -22
- package/src/less/buttons.less +6 -6
- package/src/less/core/_scaffolding.less +8 -6
- package/src/less/core/viewport-themes.less +64 -0
- package/src/less/forms/bootstrap-forms.less +14 -14
- package/src/less/grid.less +6 -6
- package/src/less/media.less +7 -0
- package/src/less/neptune.bundle.less +5 -0
- package/src/less/table.less +4 -4
- package/src/props/custom-media.css +2 -0
package/dist/css/table.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
table{background-color:#fff;background-color:var(--color-background-screen);border-collapse:separate}table td[class*=col-],table th[class*=col-]{display:table-cell;float:none;position:static}caption{color:#5d7079;color:var(--color-content-secondary);padding-bottom:16px;padding-top:16px;text-align:left}[dir=rtl] caption{text-align:right}th{text-align:left}[dir=rtl] th{text-align:right}.table{margin-bottom:24px;margin-bottom:var(--size-24);max-width:100%;width:100%}.table>.tbody>dl>dd,.table>.tfoot>ol>li,.table>.thead>ol>li,.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{border-bottom:0;border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral);line-height:1.5;line-height:var(--line-height-body);padding:24px 16px;padding:var(--size-24)
|
|
1
|
+
table{background-color:#fff;background-color:var(--color-background-screen);border-collapse:separate}table td[class*=col-],table th[class*=col-]{display:table-cell;float:none;position:static}caption{color:#5d7079;color:var(--color-content-secondary);padding-bottom:16px;padding-top:16px;text-align:left}[dir=rtl] caption{text-align:right}th{text-align:left}[dir=rtl] th{text-align:right}.table{margin-bottom:24px;margin-bottom:var(--size-24);max-width:100%;width:100%}.table>.tbody>dl>dd,.table>.tfoot>ol>li,.table>.thead>ol>li,.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{border-bottom:0;border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral);line-height:1.5;line-height:var(--line-height-body);padding:24px 16px;padding:var(--size-24) var(--size-16);transition:border .15s ease;vertical-align:top}.table>.thead>ol>li,.table>thead>tr>th{vertical-align:bottom}.table>.thead>ol>li a,.table>thead>tr>th a{text-decoration:none}.table>.thead>ol>li .tw-icon,.table>thead>tr>th .tw-icon{margin-top:-3px}.table>.thead:first-child>ol:first-child>li,.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:1px solid #0000001a;border-top:1px solid var(--color-border-neutral)}.table .table{background-color:#fff;background-color:var(--color-background-screen)}.table>.tfoot,.table>.thead,.table>tfoot,.table>thead{color:#37517e;color:var(--color-content-primary);font-size:.875rem;font-size:var(--font-size-14)}.table>.tbody,.table>tbody{font-size:.875rem;font-size:var(--font-size-14)}.table>.tbody>dl>.th,.table>tbody>tr>th{color:#37517e;color:var(--color-content-primary)}.table-condensed>.tbody>dl>dd,.table-condensed>.thead>ol>li,.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:8px;padding:var(--size-8)}.table-bordered{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:3px}.table-bordered .thead,.table-bordered thead{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}@media (max-width:767px){div.table-bordered:not(.table-responsive){border:0}}.table-striped>tbody>tr:nth-of-type(odd){background-color:#86a7bd1a;background-color:var(--color-background-neutral)}@media (min-width:768px){.table-striped>.tbody>dl:nth-of-type(odd){background-color:#86a7bd1a;background-color:var(--color-background-neutral)}}table col[class*=col-]{display:table-column;float:none;position:static}.table-hover>tbody>tr.primary:hover>td,.table-hover>tbody>tr.primary:hover>th,.table-hover>tbody>tr:hover>.primary,.table-hover>tbody>tr>td.primary:hover,.table-hover>tbody>tr>th.primary:hover,.table>tbody>tr.primary>td,.table>tbody>tr.primary>th,.table>tbody>tr>td.primary,.table>tbody>tr>th.primary,.table>tfoot>tr.primary>td,.table>tfoot>tr.primary>th,.table>tfoot>tr>td.primary,.table>tfoot>tr>th.primary,.table>thead>tr.primary>td,.table>thead>tr.primary>th,.table>thead>tr>td.primary,.table>thead>tr>th.primary{background-color:#37517e}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#fff;background-color:var(--color-background-screen)}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#36c7971a;background-color:var(--color-background-positive)}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#38c8ff1a;background-color:var(--color-background-accent)}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#ffac001a;background-color:var(--color-background-warning)}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#ff87871a;background-color:var(--color-background-negative)}.table-hover>tbody>tr.default:hover>td,.table-hover>tbody>tr.default:hover>th,.table-hover>tbody>tr:hover>.default,.table-hover>tbody>tr>td.default:hover,.table-hover>tbody>tr>th.default:hover,.table>tbody>tr.default>td,.table>tbody>tr.default>th,.table>tbody>tr>td.default,.table>tbody>tr>th.default,.table>tfoot>tr.default>td,.table>tfoot>tr.default>th,.table>tfoot>tr>td.default,.table>tfoot>tr>th.default,.table>thead>tr.default>td,.table>thead>tr.default>th,.table>thead>tr>td.default,.table>thead>tr>th.default{background-color:var(--color-background-secondary)}.table-responsive{min-height:.01%;overflow-x:auto}.table-responsive.table-bordered{border:0}@media screen and (max-width:767px){.table-responsive{-ms-overflow-style:-ms-autohiding-scrollbar;margin-bottom:24px;margin-bottom:var(--size-24);overflow-y:hidden;width:100%}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.table-responsive.table-bordered{border:1px solid #86a7bd1a;border:1px solid var(--color-background-neutral);border-radius:3px}}@media (min-width:768px){.table{display:table}.table>.thead{display:table-header-group}.table>.thead>ol{display:table-row}.table>.thead>ol>li{color:#37517e;color:var(--color-content-primary);display:table-cell;font-weight:800;font-weight:var(--font-weight-bold)}.table>.tbody{display:table-row-group}.table>.tbody>dl{display:table-row}.table>.tbody>dl>dt{display:none}.table>.tbody>dl>dd{color:#5d7079;color:var(--color-content-secondary);display:table-cell;font-size:.875rem;font-size:var(--font-size-14)}.table>.tfoot{display:table-footer-group}}@media (max-width:767px){.table>.thead{display:none}.table>.tbody>dl{border:1px solid #c9cbce;border:1px solid var(--color-interactive-secondary);border-radius:3px;margin-bottom:24px;margin-bottom:var(--size-24);padding:24px 1.5 0;padding:var(--size-24) var(--line-height-body) 0}.table>.tbody>dl>dd{border:0;padding:0}.table>.tbody>dl>dd:empty{margin:0}}@media (max-width:575px){.table>.tbody>dl{padding-bottom:8px}}.table-calendar{min-width:300px}.table-calendar>tbody>tr>td{padding:0}.table-calendar>tbody>tr>td>a{border-radius:3px;display:block;margin:4px 2px;padding:4px 0;text-align:center;text-decoration:none}.table-calendar>tbody>tr>td>a.active{background-color:#37517e;color:#fff}.table-calendar>tbody>tr>td>a:not([disabled]):hover{background-color:#0097c7;background-color:var(--color-content-accent);color:#fff}.table-calendar>thead>tr>th{text-align:center}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 16 Nov 2023 16:38:15 GMT
|
|
4
4
|
|
|
5
5
|
@color-dark-content-primary: #e2e6e8;
|
|
6
6
|
@color-dark-content-secondary: #c9cbce;
|
|
@@ -219,7 +219,7 @@
|
|
|
219
219
|
@font-family-display: 'Wise Sans', 'Inter', sans-serif;
|
|
220
220
|
|
|
221
221
|
// Do not edit directly
|
|
222
|
-
// Generated on
|
|
222
|
+
// Generated on Thu, 16 Nov 2023 16:38:15 GMT
|
|
223
223
|
|
|
224
224
|
@color-base-blue-light: #00b9ff;
|
|
225
225
|
@color-base-blue-mid: #00a2dd;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/neptune-css",
|
|
3
3
|
"description": "Neptune CSS library",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.7.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"scripts"
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@transferwise/neptune-tokens": "^8.
|
|
26
|
+
"@transferwise/neptune-tokens": "^8.7.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"modern-normalize": "^2.0.0",
|
|
@@ -1,28 +1,23 @@
|
|
|
1
|
-
@import (reference) "../../variables/neptune-tokens.less";
|
|
2
1
|
@import "../mixins/_spacing.less";
|
|
3
2
|
|
|
4
|
-
// These variables are not exposed in _spacing because they shouldn't be used outside of this file.
|
|
5
|
-
@size-72: 72px;
|
|
6
|
-
@size-96: 96px;
|
|
7
|
-
|
|
8
3
|
.spacing(0, 0);
|
|
9
|
-
.spacing(1,
|
|
10
|
-
.spacing(2,
|
|
11
|
-
.spacing(3,
|
|
12
|
-
.spacing(4,
|
|
13
|
-
.spacing(5,
|
|
4
|
+
.spacing(1, var(--size-8));
|
|
5
|
+
.spacing(2, var(--size-16));
|
|
6
|
+
.spacing(3, var(--size-24));
|
|
7
|
+
.spacing(4, var(--size-32));
|
|
8
|
+
.spacing(5, var(--size-40));
|
|
14
9
|
|
|
15
|
-
.spacing-vertical(4,
|
|
16
|
-
.spacing-vertical(5,
|
|
10
|
+
.spacing-vertical(4, var(--size-32));
|
|
11
|
+
.spacing-vertical(5, var(--size-40));
|
|
17
12
|
|
|
18
13
|
.gap-y-1 {
|
|
19
14
|
row-gap: var(--size-8);
|
|
20
15
|
}
|
|
21
16
|
|
|
22
|
-
.responsive-spacing(panel,
|
|
23
|
-
.responsive-spacing-vertical(section-1,
|
|
24
|
-
.responsive-spacing-vertical(section-2,
|
|
25
|
-
.responsive-spacing-vertical(section-3,
|
|
17
|
+
.responsive-spacing(panel, var(--size-16), var(--size-24), var(--size-32));
|
|
18
|
+
.responsive-spacing-vertical(section-1, var(--size-16), var(--size-24), var(--size-32));
|
|
19
|
+
.responsive-spacing-vertical(section-2, var(--size-32), var(--size-48), var(--size-64));
|
|
20
|
+
.responsive-spacing-vertical(section-3, var(--size-48), var(--size-72), var(--size-96));
|
|
26
21
|
|
|
27
22
|
.m-x-auto {
|
|
28
23
|
.margin(right,auto) !important;
|
|
@@ -38,16 +33,16 @@
|
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
.section {
|
|
41
|
-
padding-top:
|
|
42
|
-
padding-bottom:
|
|
36
|
+
padding-top: var(--size-48);
|
|
37
|
+
padding-bottom: var(--size-48);
|
|
43
38
|
|
|
44
39
|
@media (--screen-sm) {
|
|
45
|
-
padding-top:
|
|
46
|
-
padding-bottom:
|
|
40
|
+
padding-top: var(--size-72);
|
|
41
|
+
padding-bottom: var(--size-72);
|
|
47
42
|
}
|
|
48
43
|
|
|
49
44
|
@media (--screen-lg) {
|
|
50
|
-
padding-top:
|
|
51
|
-
padding-bottom:
|
|
45
|
+
padding-top: var(--size-96);
|
|
46
|
+
padding-bottom: var(--size-96);
|
|
52
47
|
}
|
|
53
48
|
}
|
package/src/less/buttons.less
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
var(--font-size-16);
|
|
30
30
|
var(--line-height-24);
|
|
31
31
|
var(--btn-radius-base);
|
|
32
|
-
|
|
32
|
+
var(--btn-height);
|
|
33
33
|
);
|
|
34
34
|
|
|
35
35
|
.np-theme-personal & {
|
|
@@ -460,7 +460,7 @@
|
|
|
460
460
|
var(--font-size-18);
|
|
461
461
|
var(--line-height-28);
|
|
462
462
|
var(--btn-lg-radius-base);
|
|
463
|
-
|
|
463
|
+
var(--btn-lg-height)
|
|
464
464
|
);
|
|
465
465
|
|
|
466
466
|
.np-theme-personal & {
|
|
@@ -480,7 +480,7 @@
|
|
|
480
480
|
var(--font-size-14);
|
|
481
481
|
var(--line-height-22);
|
|
482
482
|
var(--btn-sm-radius-base);
|
|
483
|
-
|
|
483
|
+
var(--btn-sm-height);
|
|
484
484
|
);
|
|
485
485
|
|
|
486
486
|
.np-theme-personal & {
|
|
@@ -517,14 +517,14 @@
|
|
|
517
517
|
var(--font-size-16);
|
|
518
518
|
var(--line-height-24);
|
|
519
519
|
var(border-radius-base);
|
|
520
|
-
|
|
520
|
+
var(--btn-height);
|
|
521
521
|
);
|
|
522
522
|
|
|
523
523
|
.np-theme-personal & {
|
|
524
524
|
font-size: @btn-font-size;
|
|
525
525
|
line-height: @btn-line-height;
|
|
526
526
|
|
|
527
|
-
max-height:
|
|
527
|
+
max-height: var(--btn-height);
|
|
528
528
|
}
|
|
529
529
|
}
|
|
530
530
|
}
|
|
@@ -536,7 +536,7 @@
|
|
|
536
536
|
|
|
537
537
|
// Vertically space out multiple block buttons
|
|
538
538
|
.btn-block + .btn-block {
|
|
539
|
-
margin-top:
|
|
539
|
+
margin-top: var(--size-8);
|
|
540
540
|
}
|
|
541
541
|
|
|
542
542
|
input[type="submit"],
|
|
@@ -8,8 +8,6 @@
|
|
|
8
8
|
@import "../../variables/legacy-variables.less";
|
|
9
9
|
|
|
10
10
|
:root {
|
|
11
|
-
--radius-small: 3px;
|
|
12
|
-
--radius-medium: 10px;
|
|
13
11
|
// page default font size should be set in absolute units (pixels)
|
|
14
12
|
--base-font-size: 16px;
|
|
15
13
|
--font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif;
|
|
@@ -36,9 +34,6 @@
|
|
|
36
34
|
|
|
37
35
|
font-family: var(--font-family-regular);
|
|
38
36
|
line-height: var(--line-height-body);
|
|
39
|
-
|
|
40
|
-
--radius-small: 3px !important;
|
|
41
|
-
--radius-medium: 10px !important;
|
|
42
37
|
}
|
|
43
38
|
|
|
44
39
|
.np-theme-personal,
|
|
@@ -53,6 +48,13 @@
|
|
|
53
48
|
--btn-xs-padding: calc(@btn-xs-padding-vertical - @btn-border-width) @btn-xs-padding-horizontal;
|
|
54
49
|
--btn-sm-padding: calc(@btn-sm-padding-vertical - @btn-border-width) @btn-sm-padding-horizontal;
|
|
55
50
|
--btn-lg-padding: calc(@btn-lg-padding-vertical - @btn-border-width) @btn-lg-padding-horizontal;
|
|
51
|
+
--btn-height: @btn-height;
|
|
52
|
+
--btn-xs-height: @btn-xs-height;
|
|
53
|
+
--btn-sm-height: @btn-sm-height;
|
|
54
|
+
--btn-lg-height: @btn-lg-height;
|
|
55
|
+
--input-height-base: @input-height-base;
|
|
56
|
+
--input-height-large: @input-height-large;
|
|
57
|
+
--input-height-small: @input-height-small;
|
|
56
58
|
--input-padding: @padding-large-vertical @padding-base-horizontal;
|
|
57
59
|
--input-padding-small: @padding-small-vertical @padding-small-horizontal;
|
|
58
60
|
--input-padding-large: @padding-large-vertical @padding-large-horizontal;
|
|
@@ -187,7 +189,7 @@ textarea {
|
|
|
187
189
|
ol,
|
|
188
190
|
ul {
|
|
189
191
|
margin: 0 0 var(--size-24);
|
|
190
|
-
.padding-shorthand(0, 0, 0,
|
|
192
|
+
.padding-shorthand(0, 0, 0, calc(var(--size-48) - var(--size-10)));
|
|
191
193
|
|
|
192
194
|
ol,
|
|
193
195
|
ul {
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
@import '@transferwise/neptune-tokens/themes/personal/tokens.less';
|
|
2
|
+
|
|
3
|
+
@media (--screen-400-zoom) {
|
|
4
|
+
.np-theme-personal {
|
|
5
|
+
--delta: 2;
|
|
6
|
+
|
|
7
|
+
--size-4: calc(@size-4 / var(--delta));
|
|
8
|
+
--size-8: calc(@size-8 / var(--delta));
|
|
9
|
+
--size-10: calc(@size-10 / var(--delta));
|
|
10
|
+
--size-12: calc(@size-12 / var(--delta));
|
|
11
|
+
--size-14: calc(@size-14 / var(--delta));
|
|
12
|
+
--size-16: calc(@size-16 / var(--delta));
|
|
13
|
+
--size-24: calc(@size-24 / var(--delta));
|
|
14
|
+
--size-32: calc(@size-32 / var(--delta));
|
|
15
|
+
--size-40: calc(@size-40 / var(--delta));
|
|
16
|
+
--size-48: calc(@size-48 / var(--delta));
|
|
17
|
+
--size-52: calc(@size-52 / var(--delta));
|
|
18
|
+
--size-56: calc(@size-56 / var(--delta));
|
|
19
|
+
--size-60: calc(@size-60 / var(--delta));
|
|
20
|
+
--size-64: calc(@size-64 / var(--delta));
|
|
21
|
+
--size-72: calc(@size-72 / var(--delta));
|
|
22
|
+
--size-80: calc(@size-80 / var(--delta));
|
|
23
|
+
--size-88: calc(@size-88 / var(--delta));
|
|
24
|
+
--size-96: calc(@size-96 / var(--delta));
|
|
25
|
+
--size-104: calc(@size-104 / var(--delta));
|
|
26
|
+
--size-112: calc(@size-112 / var(--delta));
|
|
27
|
+
--size-120: calc(@size-120 / var(--delta));
|
|
28
|
+
--size-126: calc(@size-126 / var(--delta));
|
|
29
|
+
--size-128: calc(@size-128 / var(--delta));
|
|
30
|
+
--size-146: calc(@size-146 / var(--delta));
|
|
31
|
+
--size-154: calc(@size-154 / var(--delta));
|
|
32
|
+
--size-x-small: calc(@size-x-small / var(--delta));
|
|
33
|
+
--size-small: calc(@size-small / var(--delta));
|
|
34
|
+
--size-medium: calc(@size-medium / var(--delta));
|
|
35
|
+
--size-large: calc(@size-large / var(--delta));
|
|
36
|
+
--size-x-large: calc(@size-x-large / var(--delta));
|
|
37
|
+
--size-2x-large: calc(@size-2x-large / var(--delta));
|
|
38
|
+
--space-content-horizontal: calc(@space-content-horizontal / var(--delta));
|
|
39
|
+
--space-small: calc(@space-small / var(--delta));
|
|
40
|
+
--space-medium: calc(@space-medium / var(--delta));
|
|
41
|
+
--space-large: calc(@space-large / var(--delta));
|
|
42
|
+
--space-x-large: calc(@space-x-large / var(--delta));
|
|
43
|
+
--padding-x-small: var(--size-8);
|
|
44
|
+
--padding-small: var(--size-16);
|
|
45
|
+
--padding-medium: var(--size-24);
|
|
46
|
+
--padding-large: var(--size-32);
|
|
47
|
+
|
|
48
|
+
--input-height-base: var(--size-32);
|
|
49
|
+
--input-height-large: var(--input-height-small);
|
|
50
|
+
--input-padding: var(--input-padding-small);
|
|
51
|
+
--input-padding-large: var(--input-padding-small);
|
|
52
|
+
--input-group-addon-padding: var(--input-group-addon-sm-padding);
|
|
53
|
+
--input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
|
|
54
|
+
|
|
55
|
+
--btn-height: var(--input-height-base);
|
|
56
|
+
--btn-lg-height: var(--btn-height);
|
|
57
|
+
--btn-sm-height: var(--btn-height);
|
|
58
|
+
--btn-padding: var(--input-padding);
|
|
59
|
+
--btn-sm-padding: var(--btn-padding);
|
|
60
|
+
--btn-lg-padding: var(--btn-padding);
|
|
61
|
+
|
|
62
|
+
--dropdown-link-padding: var(--size-12) var(--size-16);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -44,7 +44,7 @@ legend {
|
|
|
44
44
|
label {
|
|
45
45
|
display: inline-block;
|
|
46
46
|
max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
|
|
47
|
-
margin-bottom:
|
|
47
|
+
margin-bottom: var(--size-4);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
label,
|
|
@@ -149,7 +149,7 @@ output {
|
|
|
149
149
|
font-size: var(--font-size-16);
|
|
150
150
|
|
|
151
151
|
.input-size(
|
|
152
|
-
|
|
152
|
+
var(--input-height-base),
|
|
153
153
|
var(--input-padding),
|
|
154
154
|
@input-border-radius
|
|
155
155
|
);
|
|
@@ -221,16 +221,16 @@ input[type='search'] {
|
|
|
221
221
|
input[type='time'],
|
|
222
222
|
input[type='datetime-local'],
|
|
223
223
|
input[type='month'] {
|
|
224
|
-
line-height:
|
|
224
|
+
line-height: var(--input-height-base);
|
|
225
225
|
|
|
226
226
|
&.input-sm,
|
|
227
227
|
.input-group-sm & {
|
|
228
|
-
line-height:
|
|
228
|
+
line-height: var(--input-height-small);
|
|
229
229
|
}
|
|
230
230
|
|
|
231
231
|
&.input-lg,
|
|
232
232
|
.input-group-lg & {
|
|
233
|
-
line-height: calc(
|
|
233
|
+
line-height: calc(var(--input-height-large) - var(--line-height-body));
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
236
|
}
|
|
@@ -271,7 +271,7 @@ input[type='search'] {
|
|
|
271
271
|
// margin-bottom: (@padding-base-vertical * 1.5);
|
|
272
272
|
|
|
273
273
|
label {
|
|
274
|
-
min-height:
|
|
274
|
+
min-height: var(--input-height-base);
|
|
275
275
|
margin-bottom: 0;
|
|
276
276
|
cursor: pointer;
|
|
277
277
|
}
|
|
@@ -421,7 +421,7 @@ input[type="password"] {
|
|
|
421
421
|
|
|
422
422
|
.input-lg {
|
|
423
423
|
.input-size(
|
|
424
|
-
|
|
424
|
+
var(--input-height-large);
|
|
425
425
|
var(--input-padding-large);
|
|
426
426
|
@input-border-radius-large
|
|
427
427
|
);
|
|
@@ -434,7 +434,7 @@ input[type="password"] {
|
|
|
434
434
|
.input-lg,
|
|
435
435
|
.input-group-lg > .form-control,
|
|
436
436
|
.input-group-lg > .input-group-addon {
|
|
437
|
-
height:
|
|
437
|
+
height: var(--input-height-large);
|
|
438
438
|
padding: calc(@padding-small-vertical + var(--size-24)) @padding-small-horizontal
|
|
439
439
|
@padding-small-vertical;
|
|
440
440
|
font-size: @input-font-size-large;
|
|
@@ -442,7 +442,7 @@ input[type="password"] {
|
|
|
442
442
|
}
|
|
443
443
|
|
|
444
444
|
select.form-control {
|
|
445
|
-
line-height:
|
|
445
|
+
line-height: var(--input-height-large);
|
|
446
446
|
}
|
|
447
447
|
|
|
448
448
|
textarea.form-control,
|
|
@@ -451,7 +451,7 @@ input[type="password"] {
|
|
|
451
451
|
}
|
|
452
452
|
|
|
453
453
|
.form-control-static {
|
|
454
|
-
height:
|
|
454
|
+
height: var(--input-height-large);
|
|
455
455
|
min-height: calc(var(--line-height-control) + @input-font-size-large);
|
|
456
456
|
padding: var(--input-padding-large);
|
|
457
457
|
font-size: @input-font-size-large;
|
|
@@ -478,7 +478,7 @@ input[type="password"] {
|
|
|
478
478
|
|
|
479
479
|
// Ensure icons don't overlap text
|
|
480
480
|
.form-control {
|
|
481
|
-
.padding(right,
|
|
481
|
+
.padding(right, var(--input-height-base));
|
|
482
482
|
}
|
|
483
483
|
}
|
|
484
484
|
// Feedback icon (requires .glyphicon classes)
|
|
@@ -498,8 +498,8 @@ input[type="password"] {
|
|
|
498
498
|
.input-lg + .form-control-feedback,
|
|
499
499
|
.input-group-lg + .form-control-feedback,
|
|
500
500
|
.form-group-lg .form-control + .form-control-feedback {
|
|
501
|
-
width:
|
|
502
|
-
height:
|
|
501
|
+
width: var(--input-height-large);
|
|
502
|
+
height: var(--input-height-large);
|
|
503
503
|
}
|
|
504
504
|
|
|
505
505
|
.input-sm + .form-control-feedback,
|
|
@@ -922,7 +922,7 @@ input[type="password"] {
|
|
|
922
922
|
&.checkbox-lg,
|
|
923
923
|
&.radio-lg {
|
|
924
924
|
> label {
|
|
925
|
-
min-height:
|
|
925
|
+
min-height: var(--size-72);
|
|
926
926
|
|
|
927
927
|
small,
|
|
928
928
|
.small,
|
package/src/less/grid.less
CHANGED
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
[class*="col-md"],
|
|
84
84
|
[class*="col-lg"],
|
|
85
85
|
[class*="col-xl"] {
|
|
86
|
-
margin-bottom: (
|
|
86
|
+
margin-bottom: calc(var(--size-8) * 2);
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
[class*="col-xs"] {
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
|
|
125
125
|
@media (max-width: @screen-xs-max) {
|
|
126
126
|
.col-xs-12 {
|
|
127
|
-
margin-bottom:
|
|
127
|
+
margin-bottom: var(--size-12);
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
}
|
|
@@ -132,13 +132,13 @@
|
|
|
132
132
|
// Make grid gutters smaller on mobile
|
|
133
133
|
@media (max-width: @screen-xs-max) {
|
|
134
134
|
.row {
|
|
135
|
-
margin-right: -
|
|
136
|
-
margin-left: -
|
|
135
|
+
margin-right: calc(var(--size-8) * -1);
|
|
136
|
+
margin-left: calc(var(--size-8) * -1);
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
[class*="col-"] {
|
|
140
|
-
padding-right:
|
|
141
|
-
padding-left:
|
|
140
|
+
padding-right: var(--size-8);
|
|
141
|
+
padding-left: var(--size-8);
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
|
package/src/less/media.less
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
@import "@transferwise/neptune-tokens/tokens.css";
|
|
2
|
+
@import '@transferwise/neptune-tokens/themes/personal/tokens.css';
|
|
3
|
+
@import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';
|
|
4
|
+
@import '@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css';
|
|
5
|
+
@import '@transferwise/neptune-tokens/themes/personal--dark/tokens.css';
|
|
2
6
|
@import "./neptune-core.less";
|
|
7
|
+
@import './core/viewport-themes.less';
|
|
3
8
|
@import "./neptune-addons.less";
|
|
4
9
|
|
|
5
10
|
// Components
|
package/src/less/table.less
CHANGED
|
@@ -49,7 +49,7 @@ th {
|
|
|
49
49
|
> tfoot {
|
|
50
50
|
> tr > th,
|
|
51
51
|
> tr > td {
|
|
52
|
-
padding: var(--size-24)
|
|
52
|
+
padding: var(--size-24) var(--size-16);
|
|
53
53
|
line-height: var(--line-height-body);
|
|
54
54
|
vertical-align: top;
|
|
55
55
|
border-top: 1px solid var(--color-border-neutral);
|
|
@@ -61,7 +61,7 @@ th {
|
|
|
61
61
|
> .thead > ol > li,
|
|
62
62
|
> .tbody > dl > dd,
|
|
63
63
|
> .tfoot > ol > li {
|
|
64
|
-
padding: var(--size-24)
|
|
64
|
+
padding: var(--size-24) var(--size-16);
|
|
65
65
|
line-height: var(--line-height-body);
|
|
66
66
|
vertical-align: top;
|
|
67
67
|
border-top: 1px solid var(--color-border-neutral);
|
|
@@ -139,14 +139,14 @@ th {
|
|
|
139
139
|
> tr {
|
|
140
140
|
> th,
|
|
141
141
|
> td {
|
|
142
|
-
padding:
|
|
142
|
+
padding: var(--size-8);
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
> .thead > ol > li,
|
|
148
148
|
> .tbody > dl > dd {
|
|
149
|
-
padding:
|
|
149
|
+
padding: var(--size-8);
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
152
|
|