@volue/design-media-queries 1.2.1-next.3 → 1.3.0-next.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/dist/index.common.d.ts +13 -8
- package/dist/index.common.js +13 -8
- package/dist/index.cssmodules.css +1 -3
- package/dist/index.custom-properties.css +12 -8
- package/dist/index.map.scss +10 -0
- package/dist/index.module.d.ts +13 -8
- package/dist/index.module.js +5 -0
- package/dist/index.scss +11 -8
- package/dist/mediaQueriesSync.common.js +9 -4
- package/dist/mediaQueriesSync.map.scss +5 -6
- package/package.json +10 -12
- package/src/breakpoints.json +24 -0
- package/src/tokens.json +28 -0
- package/src/tokensSync.json +16 -0
- package/dist/index.html +0 -248
- package/dist/mediaQueries.map.scss +0 -11
- package/src/_aliases.yml +0 -17
- package/src/index.yml +0 -2
- package/src/mediaQueries.yml +0 -22
- package/src/mediaQueriesSync.yml +0 -14
package/dist/index.common.d.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 15 Feb 2023 21:25:56 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export const mqSmallOnly : "screen and ( max-width: 31.1875em )";
|
|
7
|
+
export const mqMediumAndUp : "screen and ( min-width: 31.25em )";
|
|
8
|
+
export const mqMediumOnly : "screen and ( min-width: 31.25em ) and ( max-width: 48.75em )";
|
|
9
|
+
export const mqMediumAndBelow : "screen and ( max-width: 48.6875em )";
|
|
10
|
+
export const mqZeroToLarge : "screen and ( min-width: 0 ) and ( max-width: 48.6875em )";
|
|
11
|
+
export const mqLargeAndUp : "screen and ( min-width: 48.75em )";
|
|
12
|
+
export const mqLargeAndBelow : "screen and ( max-width: 87.4375em )";
|
|
13
|
+
export const mqXlargeAndUp : "screen and ( min-width: 87.5em )";
|
package/dist/index.common.js
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 15 Feb 2023 21:25:56 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
1
6
|
module.exports = {
|
|
2
|
-
mqSmallOnly: "screen and ( max-width: 31.1875em )",
|
|
3
|
-
mqMediumAndUp: "screen and ( min-width: 31.25em )",
|
|
4
|
-
mqMediumOnly: "screen and ( min-width: 31.25em ) and ( max-width: 48.75em )",
|
|
5
|
-
mqMediumAndBelow: "screen and ( max-width: 48.6875em )",
|
|
6
|
-
mqZeroToLarge: "screen and ( min-width: 0 ) and ( max-width: 48.6875em )",
|
|
7
|
-
mqLargeAndUp: "screen and ( min-width: 48.75em )",
|
|
8
|
-
mqLargeAndBelow: "screen and ( max-width: 87.4375em )",
|
|
9
|
-
mqXlargeAndUp: "screen and ( min-width: 87.5em )"
|
|
7
|
+
"mqSmallOnly": "screen and ( max-width: 31.1875em )",
|
|
8
|
+
"mqMediumAndUp": "screen and ( min-width: 31.25em )",
|
|
9
|
+
"mqMediumOnly": "screen and ( min-width: 31.25em ) and ( max-width: 48.75em )",
|
|
10
|
+
"mqMediumAndBelow": "screen and ( max-width: 48.6875em )",
|
|
11
|
+
"mqZeroToLarge": "screen and ( min-width: 0 ) and ( max-width: 48.6875em )",
|
|
12
|
+
"mqLargeAndUp": "screen and ( min-width: 48.75em )",
|
|
13
|
+
"mqLargeAndBelow": "screen and ( max-width: 87.4375em )",
|
|
14
|
+
"mqXlargeAndUp": "screen and ( min-width: 87.5em )"
|
|
10
15
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
@value mq-small-only: screen and ( max-width: 31.1875em );
|
|
3
2
|
@value mq-medium-and-up: screen and ( min-width: 31.25em );
|
|
4
3
|
@value mq-medium-only: screen and ( min-width: 31.25em ) and ( max-width: 48.75em );
|
|
@@ -6,5 +5,4 @@
|
|
|
6
5
|
@value mq-zero-to-large: screen and ( min-width: 0 ) and ( max-width: 48.6875em );
|
|
7
6
|
@value mq-large-and-up: screen and ( min-width: 48.75em );
|
|
8
7
|
@value mq-large-and-below: screen and ( max-width: 87.4375em );
|
|
9
|
-
@value mq-xlarge-and-up: screen and ( min-width: 87.5em );
|
|
10
|
-
|
|
8
|
+
@value mq-xlarge-and-up: screen and ( min-width: 87.5em );
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 15 Feb 2023 21:25:56 GMT
|
|
4
|
+
*/
|
|
1
5
|
|
|
2
6
|
:root {
|
|
3
|
-
--mq-small-only:
|
|
4
|
-
--mq-medium-and-up:
|
|
5
|
-
--mq-medium-only:
|
|
6
|
-
--mq-medium-and-below:
|
|
7
|
-
--mq-zero-to-large:
|
|
8
|
-
--mq-large-and-up:
|
|
9
|
-
--mq-large-and-below:
|
|
10
|
-
--mq-xlarge-and-up:
|
|
7
|
+
--mq-small-only: screen and ( max-width: 31.1875em );
|
|
8
|
+
--mq-medium-and-up: screen and ( min-width: 31.25em );
|
|
9
|
+
--mq-medium-only: screen and ( min-width: 31.25em ) and ( max-width: 48.75em );
|
|
10
|
+
--mq-medium-and-below: screen and ( max-width: 48.6875em );
|
|
11
|
+
--mq-zero-to-large: screen and ( min-width: 0 ) and ( max-width: 48.6875em );
|
|
12
|
+
--mq-large-and-up: screen and ( min-width: 48.75em );
|
|
13
|
+
--mq-large-and-below: screen and ( max-width: 87.4375em );
|
|
14
|
+
--mq-xlarge-and-up: screen and ( min-width: 87.5em );
|
|
11
15
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
$mediaQueries-map: (
|
|
2
|
+
'mq-small-only': "screen and ( max-width: 31.1875em )",
|
|
3
|
+
'mq-medium-and-up': "screen and ( min-width: 31.25em )",
|
|
4
|
+
'mq-medium-only': "screen and ( min-width: 31.25em ) and ( max-width: 48.75em )",
|
|
5
|
+
'mq-medium-and-below': "screen and ( max-width: 48.6875em )",
|
|
6
|
+
'mq-zero-to-large': "screen and ( min-width: 0 ) and ( max-width: 48.6875em )",
|
|
7
|
+
'mq-large-and-up': "screen and ( min-width: 48.75em )",
|
|
8
|
+
'mq-large-and-below': "screen and ( max-width: 87.4375em )",
|
|
9
|
+
'mq-xlarge-and-up': "screen and ( min-width: 87.5em )",
|
|
10
|
+
);
|
package/dist/index.module.d.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 15 Feb 2023 21:25:56 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export const mqSmallOnly : "screen and ( max-width: 31.1875em )";
|
|
7
|
+
export const mqMediumAndUp : "screen and ( min-width: 31.25em )";
|
|
8
|
+
export const mqMediumOnly : "screen and ( min-width: 31.25em ) and ( max-width: 48.75em )";
|
|
9
|
+
export const mqMediumAndBelow : "screen and ( max-width: 48.6875em )";
|
|
10
|
+
export const mqZeroToLarge : "screen and ( min-width: 0 ) and ( max-width: 48.6875em )";
|
|
11
|
+
export const mqLargeAndUp : "screen and ( min-width: 48.75em )";
|
|
12
|
+
export const mqLargeAndBelow : "screen and ( max-width: 87.4375em )";
|
|
13
|
+
export const mqXlargeAndUp : "screen and ( min-width: 87.5em )";
|
package/dist/index.module.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 15 Feb 2023 21:25:56 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
1
6
|
export const mqSmallOnly = "screen and ( max-width: 31.1875em )";
|
|
2
7
|
export const mqMediumAndUp = "screen and ( min-width: 31.25em )";
|
|
3
8
|
export const mqMediumOnly = "screen and ( min-width: 31.25em ) and ( max-width: 48.75em )";
|
package/dist/index.scss
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$mq-
|
|
6
|
-
$mq-
|
|
7
|
-
$mq-
|
|
8
|
-
$mq-
|
|
9
|
-
$mq-
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Wed, 15 Feb 2023 21:25:56 GMT
|
|
4
|
+
|
|
5
|
+
$mq-small-only: screen and ( max-width: 31.1875em );
|
|
6
|
+
$mq-medium-and-up: screen and ( min-width: 31.25em );
|
|
7
|
+
$mq-medium-only: screen and ( min-width: 31.25em ) and ( max-width: 48.75em );
|
|
8
|
+
$mq-medium-and-below: screen and ( max-width: 48.6875em );
|
|
9
|
+
$mq-zero-to-large: screen and ( min-width: 0 ) and ( max-width: 48.6875em );
|
|
10
|
+
$mq-large-and-up: screen and ( min-width: 48.75em );
|
|
11
|
+
$mq-large-and-below: screen and ( max-width: 87.4375em );
|
|
12
|
+
$mq-xlarge-and-up: screen and ( min-width: 87.5em );
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 15 Feb 2023 21:25:56 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
1
6
|
module.exports = {
|
|
2
|
-
small: "screen and ( max-width: 31.1875em )",
|
|
3
|
-
medium: "screen and ( min-width: 31.25em )",
|
|
4
|
-
large: "screen and ( min-width: 48.75em )",
|
|
5
|
-
xlarge: "screen and ( min-width: 87.5em )"
|
|
7
|
+
"small": "screen and ( max-width: 31.1875em )",
|
|
8
|
+
"medium": "screen and ( min-width: 31.25em )",
|
|
9
|
+
"large": "screen and ( min-width: 48.75em )",
|
|
10
|
+
"xlarge": "screen and ( min-width: 87.5em )"
|
|
6
11
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
|
|
2
1
|
$mediaQueriesSync-map: (
|
|
3
|
-
'small':
|
|
4
|
-
'medium':
|
|
5
|
-
'large':
|
|
6
|
-
'xlarge':
|
|
7
|
-
);
|
|
2
|
+
'small': "screen and ( max-width: 31.1875em )",
|
|
3
|
+
'medium': "screen and ( min-width: 31.25em )",
|
|
4
|
+
'large': "screen and ( min-width: 48.75em )",
|
|
5
|
+
'xlarge': "screen and ( min-width: 87.5em )",
|
|
6
|
+
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@volue/design-media-queries",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0-next.1",
|
|
4
4
|
"description": "Media queries for Volue design primitives",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
@@ -26,22 +26,20 @@
|
|
|
26
26
|
"format": "yarn run _prettier --write",
|
|
27
27
|
"test": "run-p lint \"_prettier --check\"",
|
|
28
28
|
"clean": "rimraf dist",
|
|
29
|
-
"
|
|
30
|
-
"build
|
|
31
|
-
"build:mediaQueriesMap": "npm run _theo -s -- --format map.scss src/mediaQueries.yml",
|
|
32
|
-
"build:mediaQueriesSyncMap": "npm run _theo -s -- --format map.scss,common.js src/mediaQueriesSync.yml",
|
|
33
|
-
"build": "yarn run clean && run-p \"build:*\"",
|
|
29
|
+
"build:tokens": "style-dictionary build",
|
|
30
|
+
"build": "yarn run clean && yarn run build:tokens",
|
|
34
31
|
"prepack": "yarn run build"
|
|
35
32
|
},
|
|
36
33
|
"devDependencies": {
|
|
37
|
-
"
|
|
34
|
+
"change-case": "4.1.2",
|
|
35
|
+
"eslint": "8.34.0",
|
|
38
36
|
"eslint-config-powel": "14.2.1",
|
|
39
|
-
"eslint-import-resolver-node": "0.3.
|
|
40
|
-
"eslint-plugin-import": "2.
|
|
37
|
+
"eslint-import-resolver-node": "0.3.7",
|
|
38
|
+
"eslint-plugin-import": "2.27.5",
|
|
41
39
|
"npm-run-all": "4.1.5",
|
|
42
|
-
"prettier": "2.8.
|
|
40
|
+
"prettier": "2.8.4",
|
|
43
41
|
"rimraf": "3.0.2",
|
|
44
|
-
"
|
|
45
|
-
"typescript": "4.
|
|
42
|
+
"style-dictionary": "3.7.3-rc.1",
|
|
43
|
+
"typescript": "4.9.5"
|
|
46
44
|
}
|
|
47
45
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"size": {
|
|
3
|
+
"breakpoints": {
|
|
4
|
+
"medium": {
|
|
5
|
+
"value": "31.25em"
|
|
6
|
+
},
|
|
7
|
+
"belowMedium": {
|
|
8
|
+
"value": "31.1875em"
|
|
9
|
+
},
|
|
10
|
+
"large": {
|
|
11
|
+
"value": "48.75em"
|
|
12
|
+
},
|
|
13
|
+
"belowLarge": {
|
|
14
|
+
"value": "48.6875em"
|
|
15
|
+
},
|
|
16
|
+
"xlarge": {
|
|
17
|
+
"value": "87.5em"
|
|
18
|
+
},
|
|
19
|
+
"belowXlarge": {
|
|
20
|
+
"value": "87.4375em"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
package/src/tokens.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"mq": {
|
|
3
|
+
"smallOnly": {
|
|
4
|
+
"value": "screen and ( max-width: {size.breakpoints.belowMedium.value} )"
|
|
5
|
+
},
|
|
6
|
+
"mediumAndUp": {
|
|
7
|
+
"value": "screen and ( min-width: {size.breakpoints.medium.value} )"
|
|
8
|
+
},
|
|
9
|
+
"mediumOnly": {
|
|
10
|
+
"value": "screen and ( min-width: {size.breakpoints.medium.value} ) and ( max-width: {size.breakpoints.large.value} )"
|
|
11
|
+
},
|
|
12
|
+
"mediumAndBelow": {
|
|
13
|
+
"value": "screen and ( max-width: {size.breakpoints.belowLarge.value} )"
|
|
14
|
+
},
|
|
15
|
+
"zeroToLarge": {
|
|
16
|
+
"value": "screen and ( min-width: 0 ) and ( max-width: {size.breakpoints.belowLarge.value} )"
|
|
17
|
+
},
|
|
18
|
+
"largeAndUp": {
|
|
19
|
+
"value": "screen and ( min-width: {size.breakpoints.large.value} )"
|
|
20
|
+
},
|
|
21
|
+
"largeAndBelow": {
|
|
22
|
+
"value": "screen and ( max-width: {size.breakpoints.belowXlarge.value} )"
|
|
23
|
+
},
|
|
24
|
+
"xlargeAndUp": {
|
|
25
|
+
"value": "screen and ( min-width: {size.breakpoints.xlarge.value} )"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
package/dist/index.html
DELETED
|
@@ -1,248 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
7
|
-
<title>Design Tokens</title>
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
9
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" />
|
|
10
|
-
<style>
|
|
11
|
-
html {
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
font-size: 1em;
|
|
14
|
-
font-family: Helvetica, Arial, sans-serif;
|
|
15
|
-
line-height: 1.5;
|
|
16
|
-
background: #fff;
|
|
17
|
-
color: #444;
|
|
18
|
-
}
|
|
19
|
-
*,
|
|
20
|
-
*:before,
|
|
21
|
-
*:after {
|
|
22
|
-
box-sizing: inherit;
|
|
23
|
-
}
|
|
24
|
-
body { font-size: .75rem; }
|
|
25
|
-
::-moz-selection {
|
|
26
|
-
background: #b3d4fc;
|
|
27
|
-
text-shadow: none;
|
|
28
|
-
}
|
|
29
|
-
::selection {
|
|
30
|
-
background: #b3d4fc;
|
|
31
|
-
text-shadow: none;
|
|
32
|
-
}
|
|
33
|
-
.banner,
|
|
34
|
-
.contentinfo { background: #f5f5f5; }
|
|
35
|
-
.banner { padding: 1em 0; }
|
|
36
|
-
.container {
|
|
37
|
-
margin: 0 auto;
|
|
38
|
-
padding: 0 2rem;
|
|
39
|
-
max-width: 80rem;
|
|
40
|
-
}
|
|
41
|
-
main {
|
|
42
|
-
margin-right: -2rem;
|
|
43
|
-
margin-left: -2rem;
|
|
44
|
-
padding-bottom: 2rem;
|
|
45
|
-
}
|
|
46
|
-
h1 {
|
|
47
|
-
margin: 0;
|
|
48
|
-
font-weight: normal;
|
|
49
|
-
line-height: 1.25;
|
|
50
|
-
}
|
|
51
|
-
table {
|
|
52
|
-
table-layout: fixed;
|
|
53
|
-
border-collapse: separate;
|
|
54
|
-
border-spacing: 1rem;
|
|
55
|
-
width: 100%;
|
|
56
|
-
}
|
|
57
|
-
th,
|
|
58
|
-
td {
|
|
59
|
-
padding: 0 1rem;
|
|
60
|
-
vertical-align: baseline;
|
|
61
|
-
word-break: break-word;
|
|
62
|
-
hyphens: auto;
|
|
63
|
-
}
|
|
64
|
-
th {
|
|
65
|
-
font-weight: normal;
|
|
66
|
-
text-align: left;
|
|
67
|
-
}
|
|
68
|
-
thead th {
|
|
69
|
-
border-bottom: 1px solid #eee;
|
|
70
|
-
padding-top: 1rem;
|
|
71
|
-
padding-bottom: .5rem;
|
|
72
|
-
color: #999;
|
|
73
|
-
}
|
|
74
|
-
thead th:first-child {
|
|
75
|
-
font-size: 1.25rem;
|
|
76
|
-
color: inherit;
|
|
77
|
-
}
|
|
78
|
-
code { font-family: monaco, Consolas, monospace, monospace; }
|
|
79
|
-
hr {
|
|
80
|
-
display: block;
|
|
81
|
-
margin: 2rem 0;
|
|
82
|
-
border: 0;
|
|
83
|
-
border-top: 1px solid #eee;
|
|
84
|
-
padding: 0;
|
|
85
|
-
height: 1px;
|
|
86
|
-
}
|
|
87
|
-
.metric-box,
|
|
88
|
-
.radius-box {
|
|
89
|
-
display: inline-block;
|
|
90
|
-
vertical-align: middle;
|
|
91
|
-
background: #eee;
|
|
92
|
-
}
|
|
93
|
-
.radius-box {
|
|
94
|
-
width: 100%;
|
|
95
|
-
height: 3rem;
|
|
96
|
-
}
|
|
97
|
-
.radius-box.borderRadiusCircle {
|
|
98
|
-
width: 3rem;
|
|
99
|
-
}
|
|
100
|
-
.line-height-example {
|
|
101
|
-
border-bottom: 1px solid #eee;
|
|
102
|
-
background-image: -webkit-linear-gradient(#eee 1px, transparent 1px);
|
|
103
|
-
background-image: linear-gradient(#eee 1px, transparent 1px);
|
|
104
|
-
background-size: 100% 1rem;
|
|
105
|
-
}
|
|
106
|
-
</style>
|
|
107
|
-
</head>
|
|
108
|
-
<body>
|
|
109
|
-
<header role="banner" class="banner">
|
|
110
|
-
<div class="container">
|
|
111
|
-
<h1>Design Tokens</h1>
|
|
112
|
-
</div>
|
|
113
|
-
</header>
|
|
114
|
-
<div class="container">
|
|
115
|
-
<main role="main">
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<section>
|
|
140
|
-
<table>
|
|
141
|
-
|
|
142
|
-
<thead>
|
|
143
|
-
<tr id=media-query>
|
|
144
|
-
<th scope="col">Media Queries</th>
|
|
145
|
-
<th scope="col">Value</th>
|
|
146
|
-
<th scope="col">Examples</th>
|
|
147
|
-
<th scope="col">Usage</th>
|
|
148
|
-
</tr>
|
|
149
|
-
</thead>
|
|
150
|
-
|
|
151
|
-
<tbody>
|
|
152
|
-
<tr>
|
|
153
|
-
<th scope="row">
|
|
154
|
-
<code>mqSmallOnly</code>
|
|
155
|
-
</th>
|
|
156
|
-
<td>
|
|
157
|
-
<code>screen and ( max-width: 31.1875em )</code>
|
|
158
|
-
</td>
|
|
159
|
-
<td></td>
|
|
160
|
-
<td></td>
|
|
161
|
-
</tr>
|
|
162
|
-
|
|
163
|
-
<tr>
|
|
164
|
-
<th scope="row">
|
|
165
|
-
<code>mqMediumAndUp</code>
|
|
166
|
-
</th>
|
|
167
|
-
<td>
|
|
168
|
-
<code>screen and ( min-width: 31.25em )</code>
|
|
169
|
-
</td>
|
|
170
|
-
<td></td>
|
|
171
|
-
<td></td>
|
|
172
|
-
</tr>
|
|
173
|
-
|
|
174
|
-
<tr>
|
|
175
|
-
<th scope="row">
|
|
176
|
-
<code>mqMediumOnly</code>
|
|
177
|
-
</th>
|
|
178
|
-
<td>
|
|
179
|
-
<code>screen and ( min-width: 31.25em ) and ( max-width: 48.75em )</code>
|
|
180
|
-
</td>
|
|
181
|
-
<td></td>
|
|
182
|
-
<td></td>
|
|
183
|
-
</tr>
|
|
184
|
-
|
|
185
|
-
<tr>
|
|
186
|
-
<th scope="row">
|
|
187
|
-
<code>mqMediumAndBelow</code>
|
|
188
|
-
</th>
|
|
189
|
-
<td>
|
|
190
|
-
<code>screen and ( max-width: 48.6875em )</code>
|
|
191
|
-
</td>
|
|
192
|
-
<td></td>
|
|
193
|
-
<td></td>
|
|
194
|
-
</tr>
|
|
195
|
-
|
|
196
|
-
<tr>
|
|
197
|
-
<th scope="row">
|
|
198
|
-
<code>mqZeroToLarge</code>
|
|
199
|
-
</th>
|
|
200
|
-
<td>
|
|
201
|
-
<code>screen and ( min-width: 0 ) and ( max-width: 48.6875em )</code>
|
|
202
|
-
</td>
|
|
203
|
-
<td></td>
|
|
204
|
-
<td></td>
|
|
205
|
-
</tr>
|
|
206
|
-
|
|
207
|
-
<tr>
|
|
208
|
-
<th scope="row">
|
|
209
|
-
<code>mqLargeAndUp</code>
|
|
210
|
-
</th>
|
|
211
|
-
<td>
|
|
212
|
-
<code>screen and ( min-width: 48.75em )</code>
|
|
213
|
-
</td>
|
|
214
|
-
<td></td>
|
|
215
|
-
<td></td>
|
|
216
|
-
</tr>
|
|
217
|
-
|
|
218
|
-
<tr>
|
|
219
|
-
<th scope="row">
|
|
220
|
-
<code>mqLargeAndBelow</code>
|
|
221
|
-
</th>
|
|
222
|
-
<td>
|
|
223
|
-
<code>screen and ( max-width: 87.4375em )</code>
|
|
224
|
-
</td>
|
|
225
|
-
<td></td>
|
|
226
|
-
<td></td>
|
|
227
|
-
</tr>
|
|
228
|
-
|
|
229
|
-
<tr>
|
|
230
|
-
<th scope="row">
|
|
231
|
-
<code>mqXlargeAndUp</code>
|
|
232
|
-
</th>
|
|
233
|
-
<td>
|
|
234
|
-
<code>screen and ( min-width: 87.5em )</code>
|
|
235
|
-
</td>
|
|
236
|
-
<td></td>
|
|
237
|
-
<td></td>
|
|
238
|
-
</tr>
|
|
239
|
-
</tbody>
|
|
240
|
-
</table>
|
|
241
|
-
<hr />
|
|
242
|
-
</section>
|
|
243
|
-
|
|
244
|
-
</main>
|
|
245
|
-
</div>
|
|
246
|
-
</body>
|
|
247
|
-
</html>
|
|
248
|
-
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
$mediaQueries-map: (
|
|
3
|
-
'mq-small-only': ("screen and ( max-width: 31.1875em )"),
|
|
4
|
-
'mq-medium-and-up': ("screen and ( min-width: 31.25em )"),
|
|
5
|
-
'mq-medium-only': ("screen and ( min-width: 31.25em ) and ( max-width: 48.75em )"),
|
|
6
|
-
'mq-medium-and-below': ("screen and ( max-width: 48.6875em )"),
|
|
7
|
-
'mq-zero-to-large': ("screen and ( min-width: 0 ) and ( max-width: 48.6875em )"),
|
|
8
|
-
'mq-large-and-up': ("screen and ( min-width: 48.75em )"),
|
|
9
|
-
'mq-large-and-below': ("screen and ( max-width: 87.4375em )"),
|
|
10
|
-
'mq-xlarge-and-up': ("screen and ( min-width: 87.5em )"),
|
|
11
|
-
);
|
package/src/_aliases.yml
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
aliases:
|
|
2
|
-
BREAKPOINT_MEDIUM: '31.25em'
|
|
3
|
-
BREAKPOINT_BELOW_MEDIUM: '31.1875em'
|
|
4
|
-
BREAKPOINT_LARGE: '48.75em'
|
|
5
|
-
BREAKPOINT_BELOW_LARGE: '48.6875em'
|
|
6
|
-
BREAKPOINT_XLARGE: '87.5em'
|
|
7
|
-
BREAKPOINT_BELOW_XLARGE: '87.4375em'
|
|
8
|
-
|
|
9
|
-
# Media Queries
|
|
10
|
-
MQ_SMALL_ONLY: 'screen and ( max-width: {!BREAKPOINT_BELOW_MEDIUM} )'
|
|
11
|
-
MQ_MEDIUM_AND_UP: 'screen and ( min-width: {!BREAKPOINT_MEDIUM} )'
|
|
12
|
-
MQ_MEDIUM_ONLY: 'screen and ( min-width: {!BREAKPOINT_MEDIUM} ) and ( max-width: {!BREAKPOINT_LARGE} )'
|
|
13
|
-
MQ_MEDIUM_AND_BELOW: 'screen and ( max-width: {!BREAKPOINT_BELOW_LARGE} )'
|
|
14
|
-
MQ_ZERO_TO_LARGE: 'screen and ( min-width: 0 ) and ( max-width: {!BREAKPOINT_BELOW_LARGE} )'
|
|
15
|
-
MQ_LARGE_AND_UP: 'screen and ( min-width: {!BREAKPOINT_LARGE} )'
|
|
16
|
-
MQ_LARGE_AND_BELOW: 'screen and ( max-width: {!BREAKPOINT_BELOW_XLARGE} )'
|
|
17
|
-
MQ_XLARGE_AND_UP: 'screen and ( min-width: {!BREAKPOINT_XLARGE} )'
|
package/src/index.yml
DELETED
package/src/mediaQueries.yml
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
global:
|
|
2
|
-
type: string
|
|
3
|
-
category: media-query
|
|
4
|
-
imports:
|
|
5
|
-
- ./_aliases.yml
|
|
6
|
-
props:
|
|
7
|
-
- name: MQ_SMALL_ONLY
|
|
8
|
-
value: '{!MQ_SMALL_ONLY}'
|
|
9
|
-
- name: MQ_MEDIUM_AND_UP
|
|
10
|
-
value: '{!MQ_MEDIUM_AND_UP}'
|
|
11
|
-
- name: MQ_MEDIUM_ONLY
|
|
12
|
-
value: '{!MQ_MEDIUM_ONLY}'
|
|
13
|
-
- name: MQ_MEDIUM_AND_BELOW
|
|
14
|
-
value: '{!MQ_MEDIUM_AND_BELOW}'
|
|
15
|
-
- name: MQ_ZERO_TO_LARGE
|
|
16
|
-
value: '{!MQ_ZERO_TO_LARGE}'
|
|
17
|
-
- name: MQ_LARGE_AND_UP
|
|
18
|
-
value: '{!MQ_LARGE_AND_UP}'
|
|
19
|
-
- name: MQ_LARGE_AND_BELOW
|
|
20
|
-
value: '{!MQ_LARGE_AND_BELOW}'
|
|
21
|
-
- name: MQ_XLARGE_AND_UP
|
|
22
|
-
value: '{!MQ_XLARGE_AND_UP}'
|
package/src/mediaQueriesSync.yml
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
global:
|
|
2
|
-
type: string
|
|
3
|
-
category: media-query
|
|
4
|
-
imports:
|
|
5
|
-
- ./_aliases.yml
|
|
6
|
-
props:
|
|
7
|
-
- name: SMALL
|
|
8
|
-
value: '{!MQ_SMALL_ONLY}'
|
|
9
|
-
- name: MEDIUM
|
|
10
|
-
value: '{!MQ_MEDIUM_AND_UP}'
|
|
11
|
-
- name: LARGE
|
|
12
|
-
value: '{!MQ_LARGE_AND_UP}'
|
|
13
|
-
- name: XLARGE
|
|
14
|
-
value: '{!MQ_XLARGE_AND_UP}'
|