@carbon/layout 11.13.0 → 11.14.0-rc.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/es/index.js +43 -17
- package/lib/index.js +50 -16
- package/package.json +6 -6
- package/scss/_spacing.scss +1 -0
- package/scss/generated/_layout.scss +55 -0
- package/src/index.js +19 -0
- package/src/tokens.js +10 -0
- package/umd/index.js +50 -16
package/es/index.js
CHANGED
|
@@ -4,11 +4,19 @@
|
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
'
|
|
11
|
-
|
|
7
|
+
|
|
8
|
+
var unstable_tokens = [
|
|
9
|
+
// Spacing
|
|
10
|
+
'spacing01', 'spacing02', 'spacing03', 'spacing04', 'spacing05', 'spacing06', 'spacing07', 'spacing08', 'spacing09', 'spacing10', 'spacing11', 'spacing12', 'spacing13',
|
|
11
|
+
// Fluid spacing
|
|
12
|
+
'fluidSpacing01', 'fluidSpacing02', 'fluidSpacing03', 'fluidSpacing04',
|
|
13
|
+
// Containers
|
|
14
|
+
'container01', 'container02', 'container03', 'container04', 'container05', 'sizeXSmall', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'sizeXLarge', 'size2XLarge',
|
|
15
|
+
// Icon sizes
|
|
16
|
+
'iconSize01', 'iconSize02',
|
|
17
|
+
// Layout
|
|
18
|
+
// Deprecated
|
|
19
|
+
'layout01', 'layout02', 'layout03', 'layout04', 'layout05', 'layout06', 'layout07'];
|
|
12
20
|
|
|
13
21
|
/**
|
|
14
22
|
* Copyright IBM Corp. 2018, 2023
|
|
@@ -16,38 +24,40 @@ var unstable_tokens = [// Spacing
|
|
|
16
24
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
17
25
|
* LICENSE file in the root directory of this source tree.
|
|
18
26
|
*/
|
|
19
|
-
// Default, Use with em() and rem() functions
|
|
20
27
|
|
|
28
|
+
// Convert
|
|
29
|
+
// Default, Use with em() and rem() functions
|
|
21
30
|
var baseFontSize = 16;
|
|
31
|
+
|
|
22
32
|
/**
|
|
23
33
|
* Convert a given px unit to a rem unit
|
|
24
34
|
* @param {number} px
|
|
25
35
|
* @returns {string}
|
|
26
36
|
*/
|
|
27
|
-
|
|
28
37
|
function rem(px) {
|
|
29
38
|
return "".concat(px / baseFontSize, "rem");
|
|
30
39
|
}
|
|
40
|
+
|
|
31
41
|
/**
|
|
32
42
|
* Convert a given px unit to a em unit
|
|
33
43
|
* @param {number} px
|
|
34
44
|
* @returns {string}
|
|
35
45
|
*/
|
|
36
|
-
|
|
37
46
|
function em(px) {
|
|
38
47
|
return "".concat(px / baseFontSize, "em");
|
|
39
48
|
}
|
|
49
|
+
|
|
40
50
|
/**
|
|
41
51
|
* Convert a given px unit to its string representation
|
|
42
52
|
* @param {number} value - number of pixels
|
|
43
53
|
* @returns {string}
|
|
44
54
|
*/
|
|
45
|
-
|
|
46
55
|
function px(value) {
|
|
47
56
|
return "".concat(value, "px");
|
|
48
|
-
}
|
|
49
|
-
// Initial map of our breakpoints and their values
|
|
57
|
+
}
|
|
50
58
|
|
|
59
|
+
// Breakpoint
|
|
60
|
+
// Initial map of our breakpoints and their values
|
|
51
61
|
var breakpoints = {
|
|
52
62
|
sm: {
|
|
53
63
|
width: rem(320),
|
|
@@ -83,13 +93,15 @@ function breakpointDown(name) {
|
|
|
83
93
|
}
|
|
84
94
|
function breakpoint() {
|
|
85
95
|
return breakpointUp.apply(void 0, arguments);
|
|
86
|
-
}
|
|
96
|
+
}
|
|
87
97
|
|
|
98
|
+
// Mini-unit
|
|
88
99
|
var miniUnit = 8;
|
|
89
100
|
function miniUnits(count) {
|
|
90
101
|
return rem(miniUnit * count);
|
|
91
|
-
}
|
|
102
|
+
}
|
|
92
103
|
|
|
104
|
+
// Spacing
|
|
93
105
|
var spacing01 = miniUnits(0.25);
|
|
94
106
|
var spacing02 = miniUnits(0.5);
|
|
95
107
|
var spacing03 = miniUnits(1);
|
|
@@ -103,14 +115,27 @@ var spacing10 = miniUnits(8);
|
|
|
103
115
|
var spacing11 = miniUnits(10);
|
|
104
116
|
var spacing12 = miniUnits(12);
|
|
105
117
|
var spacing13 = miniUnits(20);
|
|
106
|
-
var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
|
|
118
|
+
var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
|
|
107
119
|
|
|
120
|
+
// Fluid spacing
|
|
108
121
|
var fluidSpacing01 = 0;
|
|
109
122
|
var fluidSpacing02 = '2vw';
|
|
110
123
|
var fluidSpacing03 = '5vw';
|
|
111
124
|
var fluidSpacing04 = '10vw';
|
|
112
|
-
var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
|
|
125
|
+
var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
|
|
113
126
|
|
|
127
|
+
// Layout
|
|
128
|
+
// Deprecated
|
|
129
|
+
var layout01 = miniUnits(2);
|
|
130
|
+
var layout02 = miniUnits(3);
|
|
131
|
+
var layout03 = miniUnits(4);
|
|
132
|
+
var layout04 = miniUnits(6);
|
|
133
|
+
var layout05 = miniUnits(8);
|
|
134
|
+
var layout06 = miniUnits(12);
|
|
135
|
+
var layout07 = miniUnits(20);
|
|
136
|
+
var layout = [layout01, layout02, layout03, layout04, layout05, layout06, layout07];
|
|
137
|
+
|
|
138
|
+
// Container
|
|
114
139
|
var container01 = miniUnits(3);
|
|
115
140
|
var container02 = miniUnits(4);
|
|
116
141
|
var container03 = miniUnits(5);
|
|
@@ -130,10 +155,11 @@ var sizes = {
|
|
|
130
155
|
Large: sizeLarge,
|
|
131
156
|
XLarge: sizeXLarge,
|
|
132
157
|
'2XLarge': size2XLarge
|
|
133
|
-
};
|
|
158
|
+
};
|
|
134
159
|
|
|
160
|
+
// Icon
|
|
135
161
|
var iconSize01 = '1rem';
|
|
136
162
|
var iconSize02 = '1.25rem';
|
|
137
163
|
var iconSize = [iconSize01, iconSize02];
|
|
138
164
|
|
|
139
|
-
export { baseFontSize, breakpoint, breakpointDown, breakpointUp, breakpoints, container, container01, container02, container03, container04, container05, em, fluidSpacing, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize, iconSize01, iconSize02, miniUnit, miniUnits, px, rem, size2XLarge, sizeLarge, sizeMedium, sizeSmall, sizeXLarge, sizeXSmall, sizes, spacing, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, unstable_tokens };
|
|
165
|
+
export { baseFontSize, breakpoint, breakpointDown, breakpointUp, breakpoints, container, container01, container02, container03, container04, container05, em, fluidSpacing, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize, iconSize01, iconSize02, layout, layout01, layout02, layout03, layout04, layout05, layout06, layout07, miniUnit, miniUnits, px, rem, size2XLarge, sizeLarge, sizeMedium, sizeSmall, sizeXLarge, sizeXSmall, sizes, spacing, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, unstable_tokens };
|
package/lib/index.js
CHANGED
|
@@ -8,11 +8,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
8
8
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
'
|
|
15
|
-
|
|
11
|
+
|
|
12
|
+
var unstable_tokens = [
|
|
13
|
+
// Spacing
|
|
14
|
+
'spacing01', 'spacing02', 'spacing03', 'spacing04', 'spacing05', 'spacing06', 'spacing07', 'spacing08', 'spacing09', 'spacing10', 'spacing11', 'spacing12', 'spacing13',
|
|
15
|
+
// Fluid spacing
|
|
16
|
+
'fluidSpacing01', 'fluidSpacing02', 'fluidSpacing03', 'fluidSpacing04',
|
|
17
|
+
// Containers
|
|
18
|
+
'container01', 'container02', 'container03', 'container04', 'container05', 'sizeXSmall', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'sizeXLarge', 'size2XLarge',
|
|
19
|
+
// Icon sizes
|
|
20
|
+
'iconSize01', 'iconSize02',
|
|
21
|
+
// Layout
|
|
22
|
+
// Deprecated
|
|
23
|
+
'layout01', 'layout02', 'layout03', 'layout04', 'layout05', 'layout06', 'layout07'];
|
|
16
24
|
|
|
17
25
|
/**
|
|
18
26
|
* Copyright IBM Corp. 2018, 2023
|
|
@@ -20,38 +28,40 @@ var unstable_tokens = [// Spacing
|
|
|
20
28
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
21
29
|
* LICENSE file in the root directory of this source tree.
|
|
22
30
|
*/
|
|
23
|
-
// Default, Use with em() and rem() functions
|
|
24
31
|
|
|
32
|
+
// Convert
|
|
33
|
+
// Default, Use with em() and rem() functions
|
|
25
34
|
var baseFontSize = 16;
|
|
35
|
+
|
|
26
36
|
/**
|
|
27
37
|
* Convert a given px unit to a rem unit
|
|
28
38
|
* @param {number} px
|
|
29
39
|
* @returns {string}
|
|
30
40
|
*/
|
|
31
|
-
|
|
32
41
|
function rem(px) {
|
|
33
42
|
return "".concat(px / baseFontSize, "rem");
|
|
34
43
|
}
|
|
44
|
+
|
|
35
45
|
/**
|
|
36
46
|
* Convert a given px unit to a em unit
|
|
37
47
|
* @param {number} px
|
|
38
48
|
* @returns {string}
|
|
39
49
|
*/
|
|
40
|
-
|
|
41
50
|
function em(px) {
|
|
42
51
|
return "".concat(px / baseFontSize, "em");
|
|
43
52
|
}
|
|
53
|
+
|
|
44
54
|
/**
|
|
45
55
|
* Convert a given px unit to its string representation
|
|
46
56
|
* @param {number} value - number of pixels
|
|
47
57
|
* @returns {string}
|
|
48
58
|
*/
|
|
49
|
-
|
|
50
59
|
function px(value) {
|
|
51
60
|
return "".concat(value, "px");
|
|
52
|
-
}
|
|
53
|
-
// Initial map of our breakpoints and their values
|
|
61
|
+
}
|
|
54
62
|
|
|
63
|
+
// Breakpoint
|
|
64
|
+
// Initial map of our breakpoints and their values
|
|
55
65
|
var breakpoints = {
|
|
56
66
|
sm: {
|
|
57
67
|
width: rem(320),
|
|
@@ -87,13 +97,15 @@ function breakpointDown(name) {
|
|
|
87
97
|
}
|
|
88
98
|
function breakpoint() {
|
|
89
99
|
return breakpointUp.apply(void 0, arguments);
|
|
90
|
-
}
|
|
100
|
+
}
|
|
91
101
|
|
|
102
|
+
// Mini-unit
|
|
92
103
|
var miniUnit = 8;
|
|
93
104
|
function miniUnits(count) {
|
|
94
105
|
return rem(miniUnit * count);
|
|
95
|
-
}
|
|
106
|
+
}
|
|
96
107
|
|
|
108
|
+
// Spacing
|
|
97
109
|
var spacing01 = miniUnits(0.25);
|
|
98
110
|
var spacing02 = miniUnits(0.5);
|
|
99
111
|
var spacing03 = miniUnits(1);
|
|
@@ -107,14 +119,27 @@ var spacing10 = miniUnits(8);
|
|
|
107
119
|
var spacing11 = miniUnits(10);
|
|
108
120
|
var spacing12 = miniUnits(12);
|
|
109
121
|
var spacing13 = miniUnits(20);
|
|
110
|
-
var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
|
|
122
|
+
var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
|
|
111
123
|
|
|
124
|
+
// Fluid spacing
|
|
112
125
|
var fluidSpacing01 = 0;
|
|
113
126
|
var fluidSpacing02 = '2vw';
|
|
114
127
|
var fluidSpacing03 = '5vw';
|
|
115
128
|
var fluidSpacing04 = '10vw';
|
|
116
|
-
var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
|
|
129
|
+
var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
|
|
117
130
|
|
|
131
|
+
// Layout
|
|
132
|
+
// Deprecated
|
|
133
|
+
var layout01 = miniUnits(2);
|
|
134
|
+
var layout02 = miniUnits(3);
|
|
135
|
+
var layout03 = miniUnits(4);
|
|
136
|
+
var layout04 = miniUnits(6);
|
|
137
|
+
var layout05 = miniUnits(8);
|
|
138
|
+
var layout06 = miniUnits(12);
|
|
139
|
+
var layout07 = miniUnits(20);
|
|
140
|
+
var layout = [layout01, layout02, layout03, layout04, layout05, layout06, layout07];
|
|
141
|
+
|
|
142
|
+
// Container
|
|
118
143
|
var container01 = miniUnits(3);
|
|
119
144
|
var container02 = miniUnits(4);
|
|
120
145
|
var container03 = miniUnits(5);
|
|
@@ -134,8 +159,9 @@ var sizes = {
|
|
|
134
159
|
Large: sizeLarge,
|
|
135
160
|
XLarge: sizeXLarge,
|
|
136
161
|
'2XLarge': size2XLarge
|
|
137
|
-
};
|
|
162
|
+
};
|
|
138
163
|
|
|
164
|
+
// Icon
|
|
139
165
|
var iconSize01 = '1rem';
|
|
140
166
|
var iconSize02 = '1.25rem';
|
|
141
167
|
var iconSize = [iconSize01, iconSize02];
|
|
@@ -160,6 +186,14 @@ exports.fluidSpacing04 = fluidSpacing04;
|
|
|
160
186
|
exports.iconSize = iconSize;
|
|
161
187
|
exports.iconSize01 = iconSize01;
|
|
162
188
|
exports.iconSize02 = iconSize02;
|
|
189
|
+
exports.layout = layout;
|
|
190
|
+
exports.layout01 = layout01;
|
|
191
|
+
exports.layout02 = layout02;
|
|
192
|
+
exports.layout03 = layout03;
|
|
193
|
+
exports.layout04 = layout04;
|
|
194
|
+
exports.layout05 = layout05;
|
|
195
|
+
exports.layout06 = layout06;
|
|
196
|
+
exports.layout07 = layout07;
|
|
163
197
|
exports.miniUnit = miniUnit;
|
|
164
198
|
exports.miniUnits = miniUnits;
|
|
165
199
|
exports.px = px;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/layout",
|
|
3
3
|
"description": "Layout helpers for digital and software products using the Carbon Design System",
|
|
4
|
-
"version": "11.
|
|
4
|
+
"version": "11.14.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"clean": "rimraf es lib umd scss/generated"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@carbon/cli": "^11.
|
|
31
|
+
"@carbon/cli": "^11.10.0-rc.0",
|
|
32
32
|
"@carbon/cli-reporter": "^10.6.0",
|
|
33
|
-
"@carbon/scss-generator": "^10.
|
|
34
|
-
"@carbon/test-utils": "^10.
|
|
33
|
+
"@carbon/scss-generator": "^10.17.0-rc.0",
|
|
34
|
+
"@carbon/test-utils": "^10.29.0-rc.0",
|
|
35
35
|
"core-js": "^3.16.0",
|
|
36
|
-
"rimraf": "^
|
|
36
|
+
"rimraf": "^5.0.0"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "64172da793195b868dd5f4cbf9f2933184ed9cac"
|
|
39
39
|
}
|
package/scss/_spacing.scss
CHANGED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
// Code generated by @carbon/layout. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2023
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
/// @type Number
|
|
10
|
+
/// @access public
|
|
11
|
+
/// @group @carbon/layout
|
|
12
|
+
$layout-01: 1rem !default;
|
|
13
|
+
|
|
14
|
+
/// @type Number
|
|
15
|
+
/// @access public
|
|
16
|
+
/// @group @carbon/layout
|
|
17
|
+
$layout-02: 1.5rem !default;
|
|
18
|
+
|
|
19
|
+
/// @type Number
|
|
20
|
+
/// @access public
|
|
21
|
+
/// @group @carbon/layout
|
|
22
|
+
$layout-03: 2rem !default;
|
|
23
|
+
|
|
24
|
+
/// @type Number
|
|
25
|
+
/// @access public
|
|
26
|
+
/// @group @carbon/layout
|
|
27
|
+
$layout-04: 3rem !default;
|
|
28
|
+
|
|
29
|
+
/// @type Number
|
|
30
|
+
/// @access public
|
|
31
|
+
/// @group @carbon/layout
|
|
32
|
+
$layout-05: 4rem !default;
|
|
33
|
+
|
|
34
|
+
/// @type Number
|
|
35
|
+
/// @access public
|
|
36
|
+
/// @group @carbon/layout
|
|
37
|
+
$layout-06: 6rem !default;
|
|
38
|
+
|
|
39
|
+
/// @type Number
|
|
40
|
+
/// @access public
|
|
41
|
+
/// @group @carbon/layout
|
|
42
|
+
$layout-07: 10rem !default;
|
|
43
|
+
|
|
44
|
+
/// @type Map
|
|
45
|
+
/// @access public
|
|
46
|
+
/// @group @carbon/layout
|
|
47
|
+
$layout: (
|
|
48
|
+
layout-01: $layout-01,
|
|
49
|
+
layout-02: $layout-02,
|
|
50
|
+
layout-03: $layout-03,
|
|
51
|
+
layout-04: $layout-04,
|
|
52
|
+
layout-05: $layout-05,
|
|
53
|
+
layout-06: $layout-06,
|
|
54
|
+
layout-07: $layout-07,
|
|
55
|
+
);
|
package/src/index.js
CHANGED
|
@@ -131,6 +131,25 @@ export const fluidSpacing = [
|
|
|
131
131
|
fluidSpacing04,
|
|
132
132
|
];
|
|
133
133
|
|
|
134
|
+
// Layout
|
|
135
|
+
// Deprecated
|
|
136
|
+
export const layout01 = miniUnits(2);
|
|
137
|
+
export const layout02 = miniUnits(3);
|
|
138
|
+
export const layout03 = miniUnits(4);
|
|
139
|
+
export const layout04 = miniUnits(6);
|
|
140
|
+
export const layout05 = miniUnits(8);
|
|
141
|
+
export const layout06 = miniUnits(12);
|
|
142
|
+
export const layout07 = miniUnits(20);
|
|
143
|
+
export const layout = [
|
|
144
|
+
layout01,
|
|
145
|
+
layout02,
|
|
146
|
+
layout03,
|
|
147
|
+
layout04,
|
|
148
|
+
layout05,
|
|
149
|
+
layout06,
|
|
150
|
+
layout07,
|
|
151
|
+
];
|
|
152
|
+
|
|
134
153
|
// Container
|
|
135
154
|
export const container01 = miniUnits(3);
|
|
136
155
|
export const container02 = miniUnits(4);
|
package/src/tokens.js
CHANGED
package/umd/index.js
CHANGED
|
@@ -10,11 +10,19 @@
|
|
|
10
10
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
11
11
|
* LICENSE file in the root directory of this source tree.
|
|
12
12
|
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
'
|
|
17
|
-
|
|
13
|
+
|
|
14
|
+
var unstable_tokens = [
|
|
15
|
+
// Spacing
|
|
16
|
+
'spacing01', 'spacing02', 'spacing03', 'spacing04', 'spacing05', 'spacing06', 'spacing07', 'spacing08', 'spacing09', 'spacing10', 'spacing11', 'spacing12', 'spacing13',
|
|
17
|
+
// Fluid spacing
|
|
18
|
+
'fluidSpacing01', 'fluidSpacing02', 'fluidSpacing03', 'fluidSpacing04',
|
|
19
|
+
// Containers
|
|
20
|
+
'container01', 'container02', 'container03', 'container04', 'container05', 'sizeXSmall', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'sizeXLarge', 'size2XLarge',
|
|
21
|
+
// Icon sizes
|
|
22
|
+
'iconSize01', 'iconSize02',
|
|
23
|
+
// Layout
|
|
24
|
+
// Deprecated
|
|
25
|
+
'layout01', 'layout02', 'layout03', 'layout04', 'layout05', 'layout06', 'layout07'];
|
|
18
26
|
|
|
19
27
|
/**
|
|
20
28
|
* Copyright IBM Corp. 2018, 2023
|
|
@@ -22,38 +30,40 @@
|
|
|
22
30
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
23
31
|
* LICENSE file in the root directory of this source tree.
|
|
24
32
|
*/
|
|
25
|
-
// Default, Use with em() and rem() functions
|
|
26
33
|
|
|
34
|
+
// Convert
|
|
35
|
+
// Default, Use with em() and rem() functions
|
|
27
36
|
var baseFontSize = 16;
|
|
37
|
+
|
|
28
38
|
/**
|
|
29
39
|
* Convert a given px unit to a rem unit
|
|
30
40
|
* @param {number} px
|
|
31
41
|
* @returns {string}
|
|
32
42
|
*/
|
|
33
|
-
|
|
34
43
|
function rem(px) {
|
|
35
44
|
return "".concat(px / baseFontSize, "rem");
|
|
36
45
|
}
|
|
46
|
+
|
|
37
47
|
/**
|
|
38
48
|
* Convert a given px unit to a em unit
|
|
39
49
|
* @param {number} px
|
|
40
50
|
* @returns {string}
|
|
41
51
|
*/
|
|
42
|
-
|
|
43
52
|
function em(px) {
|
|
44
53
|
return "".concat(px / baseFontSize, "em");
|
|
45
54
|
}
|
|
55
|
+
|
|
46
56
|
/**
|
|
47
57
|
* Convert a given px unit to its string representation
|
|
48
58
|
* @param {number} value - number of pixels
|
|
49
59
|
* @returns {string}
|
|
50
60
|
*/
|
|
51
|
-
|
|
52
61
|
function px(value) {
|
|
53
62
|
return "".concat(value, "px");
|
|
54
|
-
}
|
|
55
|
-
// Initial map of our breakpoints and their values
|
|
63
|
+
}
|
|
56
64
|
|
|
65
|
+
// Breakpoint
|
|
66
|
+
// Initial map of our breakpoints and their values
|
|
57
67
|
var breakpoints = {
|
|
58
68
|
sm: {
|
|
59
69
|
width: rem(320),
|
|
@@ -89,13 +99,15 @@
|
|
|
89
99
|
}
|
|
90
100
|
function breakpoint() {
|
|
91
101
|
return breakpointUp.apply(void 0, arguments);
|
|
92
|
-
}
|
|
102
|
+
}
|
|
93
103
|
|
|
104
|
+
// Mini-unit
|
|
94
105
|
var miniUnit = 8;
|
|
95
106
|
function miniUnits(count) {
|
|
96
107
|
return rem(miniUnit * count);
|
|
97
|
-
}
|
|
108
|
+
}
|
|
98
109
|
|
|
110
|
+
// Spacing
|
|
99
111
|
var spacing01 = miniUnits(0.25);
|
|
100
112
|
var spacing02 = miniUnits(0.5);
|
|
101
113
|
var spacing03 = miniUnits(1);
|
|
@@ -109,14 +121,27 @@
|
|
|
109
121
|
var spacing11 = miniUnits(10);
|
|
110
122
|
var spacing12 = miniUnits(12);
|
|
111
123
|
var spacing13 = miniUnits(20);
|
|
112
|
-
var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
|
|
124
|
+
var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
|
|
113
125
|
|
|
126
|
+
// Fluid spacing
|
|
114
127
|
var fluidSpacing01 = 0;
|
|
115
128
|
var fluidSpacing02 = '2vw';
|
|
116
129
|
var fluidSpacing03 = '5vw';
|
|
117
130
|
var fluidSpacing04 = '10vw';
|
|
118
|
-
var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
|
|
131
|
+
var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
|
|
119
132
|
|
|
133
|
+
// Layout
|
|
134
|
+
// Deprecated
|
|
135
|
+
var layout01 = miniUnits(2);
|
|
136
|
+
var layout02 = miniUnits(3);
|
|
137
|
+
var layout03 = miniUnits(4);
|
|
138
|
+
var layout04 = miniUnits(6);
|
|
139
|
+
var layout05 = miniUnits(8);
|
|
140
|
+
var layout06 = miniUnits(12);
|
|
141
|
+
var layout07 = miniUnits(20);
|
|
142
|
+
var layout = [layout01, layout02, layout03, layout04, layout05, layout06, layout07];
|
|
143
|
+
|
|
144
|
+
// Container
|
|
120
145
|
var container01 = miniUnits(3);
|
|
121
146
|
var container02 = miniUnits(4);
|
|
122
147
|
var container03 = miniUnits(5);
|
|
@@ -136,8 +161,9 @@
|
|
|
136
161
|
Large: sizeLarge,
|
|
137
162
|
XLarge: sizeXLarge,
|
|
138
163
|
'2XLarge': size2XLarge
|
|
139
|
-
};
|
|
164
|
+
};
|
|
140
165
|
|
|
166
|
+
// Icon
|
|
141
167
|
var iconSize01 = '1rem';
|
|
142
168
|
var iconSize02 = '1.25rem';
|
|
143
169
|
var iconSize = [iconSize01, iconSize02];
|
|
@@ -162,6 +188,14 @@
|
|
|
162
188
|
exports.iconSize = iconSize;
|
|
163
189
|
exports.iconSize01 = iconSize01;
|
|
164
190
|
exports.iconSize02 = iconSize02;
|
|
191
|
+
exports.layout = layout;
|
|
192
|
+
exports.layout01 = layout01;
|
|
193
|
+
exports.layout02 = layout02;
|
|
194
|
+
exports.layout03 = layout03;
|
|
195
|
+
exports.layout04 = layout04;
|
|
196
|
+
exports.layout05 = layout05;
|
|
197
|
+
exports.layout06 = layout06;
|
|
198
|
+
exports.layout07 = layout07;
|
|
165
199
|
exports.miniUnit = miniUnit;
|
|
166
200
|
exports.miniUnits = miniUnits;
|
|
167
201
|
exports.px = px;
|