mirror of
https://github.com/jdan/98.css.git
synced 2025-01-17 12:48:32 +01:00
add postcss-calc
This commit is contained in:
Jordan Scales
parent
d21a9cdd17
commit
04e9e7e9c9
1
build.js
1
build.js
@ -44,6 +44,7 @@ function buildCSS() {
|
||||
return postcss()
|
||||
.use(require("postcss-inline-svg"))
|
||||
.use(require("postcss-css-variables")({ preserve: "computed" }))
|
||||
.use(require("postcss-calc"))
|
||||
.process(fs.readFileSync("style.css"), {
|
||||
from: "style.css",
|
||||
to: "build/98.css",
|
||||
|
||||
39
build/98.css
39
build/98.css
@ -19,20 +19,16 @@
|
||||
|
||||
/* Some detailed computations for radio buttons and checkboxes */
|
||||
--radio-total-width-precalc: 12px + 6px;
|
||||
--radio-total-width: calc(12px + 6px);
|
||||
--radio-left: calc(-1 * 12px + 6px);
|
||||
--radio-total-width: 18px;
|
||||
--radio-left: -6px;
|
||||
--radio-dot-width: 4px;
|
||||
--radio-dot-top: calc(12px / 2 - 4px / 2);
|
||||
--radio-dot-left: calc(
|
||||
-1 * (12px + 6px) + 12px / 2 - 4px / 2
|
||||
);
|
||||
--radio-dot-top: 4px;
|
||||
--radio-dot-left: -14px;
|
||||
|
||||
--checkbox-total-width-precalc: 13px +
|
||||
6px;
|
||||
--checkbox-total-width: calc(13px +
|
||||
6px);
|
||||
--checkbox-left: calc(-1 * 13px +
|
||||
6px);
|
||||
--checkbox-total-width: 19px;
|
||||
--checkbox-left: -7px;
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
@ -193,7 +189,7 @@ fieldset {
|
||||
box-shadow: inset -1px -1px #ffffff,
|
||||
inset 1px 1px #0a0a0a, inset -2px -2px #808080,
|
||||
inset 2px 2px #dfdfdf;
|
||||
padding: calc(2 * 1px + 8px);
|
||||
padding: 10px;
|
||||
padding-block-start: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
@ -241,13 +237,13 @@ input[type="checkbox"] {
|
||||
|
||||
input[type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: calc(12px + 6px);
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
input[type="radio"] + label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(-1 * (12px + 6px));
|
||||
left: -18px;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
@ -260,10 +256,8 @@ input[type="radio"]:checked + label::after {
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
top: calc(12px / 2 - 4px / 2);
|
||||
left: calc(
|
||||
-1 * (12px + 6px) + 12px / 2 - 4px / 2
|
||||
);
|
||||
top: 4px;
|
||||
left: -14px;
|
||||
position: absolute;
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
@ -283,15 +277,13 @@ input[type="radio"][disabled]:checked + label::after {
|
||||
|
||||
input[type="checkbox"] + label {
|
||||
position: relative;
|
||||
margin-left: calc(13px +
|
||||
6px);
|
||||
margin-left: 19px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(-1 * (13px +
|
||||
6px));
|
||||
left: -19px;
|
||||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
@ -309,10 +301,7 @@ input[type="checkbox"]:checked + label::after {
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: calc(
|
||||
-1 * (13px +
|
||||
6px) + 3px
|
||||
);
|
||||
left: -16px;
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
|
||||
39
docs/98.css
39
docs/98.css
@ -19,20 +19,16 @@
|
||||
|
||||
/* Some detailed computations for radio buttons and checkboxes */
|
||||
--radio-total-width-precalc: 12px + 6px;
|
||||
--radio-total-width: calc(12px + 6px);
|
||||
--radio-left: calc(-1 * 12px + 6px);
|
||||
--radio-total-width: 18px;
|
||||
--radio-left: -6px;
|
||||
--radio-dot-width: 4px;
|
||||
--radio-dot-top: calc(12px / 2 - 4px / 2);
|
||||
--radio-dot-left: calc(
|
||||
-1 * (12px + 6px) + 12px / 2 - 4px / 2
|
||||
);
|
||||
--radio-dot-top: 4px;
|
||||
--radio-dot-left: -14px;
|
||||
|
||||
--checkbox-total-width-precalc: 13px +
|
||||
6px;
|
||||
--checkbox-total-width: calc(13px +
|
||||
6px);
|
||||
--checkbox-left: calc(-1 * 13px +
|
||||
6px);
|
||||
--checkbox-total-width: 19px;
|
||||
--checkbox-left: -7px;
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
@ -193,7 +189,7 @@ fieldset {
|
||||
box-shadow: inset -1px -1px #ffffff,
|
||||
inset 1px 1px #0a0a0a, inset -2px -2px #808080,
|
||||
inset 2px 2px #dfdfdf;
|
||||
padding: calc(2 * 1px + 8px);
|
||||
padding: 10px;
|
||||
padding-block-start: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
@ -241,13 +237,13 @@ input[type="checkbox"] {
|
||||
|
||||
input[type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: calc(12px + 6px);
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
input[type="radio"] + label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(-1 * (12px + 6px));
|
||||
left: -18px;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
@ -260,10 +256,8 @@ input[type="radio"]:checked + label::after {
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
top: calc(12px / 2 - 4px / 2);
|
||||
left: calc(
|
||||
-1 * (12px + 6px) + 12px / 2 - 4px / 2
|
||||
);
|
||||
top: 4px;
|
||||
left: -14px;
|
||||
position: absolute;
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
@ -283,15 +277,13 @@ input[type="radio"][disabled]:checked + label::after {
|
||||
|
||||
input[type="checkbox"] + label {
|
||||
position: relative;
|
||||
margin-left: calc(13px +
|
||||
6px);
|
||||
margin-left: 19px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(-1 * (13px +
|
||||
6px));
|
||||
left: -19px;
|
||||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
@ -309,10 +301,7 @@ input[type="checkbox"]:checked + label::after {
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: calc(
|
||||
-1 * (13px +
|
||||
6px) + 3px
|
||||
);
|
||||
left: -16px;
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
|
||||
40
package-lock.json
generated
40
package-lock.json
generated
@ -86,6 +86,12 @@
|
||||
"integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
|
||||
"dev": true
|
||||
},
|
||||
"cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||
"dev": true
|
||||
},
|
||||
"dedent": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
|
||||
@ -186,6 +192,12 @@
|
||||
"readable-stream": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"indexes-of": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
|
||||
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
|
||||
"dev": true
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
@ -230,6 +242,17 @@
|
||||
"supports-color": "^6.1.0"
|
||||
}
|
||||
},
|
||||
"postcss-calc": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.2.tgz",
|
||||
"integrity": "sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^7.0.27",
|
||||
"postcss-selector-parser": "^6.0.2",
|
||||
"postcss-value-parser": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"postcss-css-variables": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz",
|
||||
@ -349,6 +372,17 @@
|
||||
"postcss-value-parser": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-selector-parser": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
|
||||
"integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cssesc": "^3.0.0",
|
||||
"indexes-of": "^1.0.1",
|
||||
"uniq": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"postcss-value-parser": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
|
||||
@ -405,6 +439,12 @@
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"uniq": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
|
||||
"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
|
||||
"dev": true
|
||||
},
|
||||
"util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"ejs": "^3.0.2",
|
||||
"highlight.js": "^9.18.1",
|
||||
"mkdirp": "^1.0.4",
|
||||
"postcss-calc": "^7.0.2",
|
||||
"postcss-css-variables": "^0.14.0",
|
||||
"postcss-inline": "^1.2.0",
|
||||
"postcss-inline-svg": "^4.1.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user