mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-01 03:20:22 +02:00
Code Issues Releases Wiki Activity

add postcss-calc

Browse Source
This commit is contained in:
Jordan Scales
2020-04-21 16:20:12 -04:00
parent d21a9cdd17
commit 04e9e7e9c9
5 changed files with 70 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
build.js
View File

@@ -44,6 +44,7 @@ function buildCSS() {
return postcss() return postcss()
.use(require("postcss-inline-svg")) .use(require("postcss-inline-svg"))
.use(require("postcss-css-variables")({ preserve: "computed" })) .use(require("postcss-css-variables")({ preserve: "computed" }))
.use(require("postcss-calc"))
.process(fs.readFileSync("style.css"), { .process(fs.readFileSync("style.css"), {
from: "style.css", from: "style.css",
to: "build/98.css", to: "build/98.css",

39
build/98.css
View File

@@ -19,20 +19,16 @@
/* Some detailed computations for radio buttons and checkboxes */ /* Some detailed computations for radio buttons and checkboxes */
--radio-total-width-precalc: 12px + 6px; --radio-total-width-precalc: 12px + 6px;
--radio-total-width: calc(12px + 6px); --radio-total-width: 18px;
--radio-left: calc(-1 * 12px + 6px); --radio-left: -6px;
--radio-dot-width: 4px; --radio-dot-width: 4px;
--radio-dot-top: calc(12px / 2 - 4px / 2); --radio-dot-top: 4px;
--radio-dot-left: calc( --radio-dot-left: -14px;
-1 * (12px + 6px) + 12px / 2 - 4px / 2
);
--checkbox-total-width-precalc: 13px + --checkbox-total-width-precalc: 13px +
6px; 6px;
--checkbox-total-width: calc(13px + --checkbox-total-width: 19px;
6px); --checkbox-left: -7px;
--checkbox-left: calc(-1 * 13px +
6px);
--checkmark-width: 7px; --checkmark-width: 7px;
--checkmark-top: 3px; --checkmark-top: 3px;
--checkmark-left: 3px; --checkmark-left: 3px;
@@ -193,7 +189,7 @@ fieldset {
box-shadow: inset -1px -1px #ffffff, box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #0a0a0a, inset -2px -2px #808080, inset 1px 1px #0a0a0a, inset -2px -2px #808080,
inset 2px 2px #dfdfdf; inset 2px 2px #dfdfdf;
padding: calc(2 * 1px + 8px); padding: 10px;
padding-block-start: 8px; padding-block-start: 8px;
margin: 0; margin: 0;
} }
@@ -241,13 +237,13 @@ input[type="checkbox"] {
input[type="radio"] + label { input[type="radio"] + label {
position: relative; position: relative;
margin-left: calc(12px + 6px); margin-left: 18px;
} }
input[type="radio"] + label::before { input[type="radio"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * (12px + 6px)); left: -18px;
display: inline-block; display: inline-block;
width: 12px; width: 12px;
height: 12px; height: 12px;
@@ -260,10 +256,8 @@ input[type="radio"]:checked + label::after {
display: block; display: block;
width: 4px; width: 4px;
height: 4px; height: 4px;
top: calc(12px / 2 - 4px / 2); top: 4px;
left: calc( left: -14px;
-1 * (12px + 6px) + 12px / 2 - 4px / 2
);
position: absolute; 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"); 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 { input[type="checkbox"] + label {
position: relative; position: relative;
margin-left: calc(13px + margin-left: 19px;
6px);
} }
input[type="checkbox"] + label::before { input[type="checkbox"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * (13px + left: -19px;
6px));
display: inline-block; display: inline-block;
width: 13px; width: 13px;
height: 13px; height: 13px;
@@ -309,10 +301,7 @@ input[type="checkbox"]:checked + label::after {
height: 7px; height: 7px;
position: absolute; position: absolute;
top: 3px; top: 3px;
left: calc( left: -16px;
-1 * (13px +
6px) + 3px
);
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"); 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
View File

@@ -19,20 +19,16 @@
/* Some detailed computations for radio buttons and checkboxes */ /* Some detailed computations for radio buttons and checkboxes */
--radio-total-width-precalc: 12px + 6px; --radio-total-width-precalc: 12px + 6px;
--radio-total-width: calc(12px + 6px); --radio-total-width: 18px;
--radio-left: calc(-1 * 12px + 6px); --radio-left: -6px;
--radio-dot-width: 4px; --radio-dot-width: 4px;
--radio-dot-top: calc(12px / 2 - 4px / 2); --radio-dot-top: 4px;
--radio-dot-left: calc( --radio-dot-left: -14px;
-1 * (12px + 6px) + 12px / 2 - 4px / 2
);
--checkbox-total-width-precalc: 13px + --checkbox-total-width-precalc: 13px +
6px; 6px;
--checkbox-total-width: calc(13px + --checkbox-total-width: 19px;
6px); --checkbox-left: -7px;
--checkbox-left: calc(-1 * 13px +
6px);
--checkmark-width: 7px; --checkmark-width: 7px;
--checkmark-top: 3px; --checkmark-top: 3px;
--checkmark-left: 3px; --checkmark-left: 3px;
@@ -193,7 +189,7 @@ fieldset {
box-shadow: inset -1px -1px #ffffff, box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #0a0a0a, inset -2px -2px #808080, inset 1px 1px #0a0a0a, inset -2px -2px #808080,
inset 2px 2px #dfdfdf; inset 2px 2px #dfdfdf;
padding: calc(2 * 1px + 8px); padding: 10px;
padding-block-start: 8px; padding-block-start: 8px;
margin: 0; margin: 0;
} }
@@ -241,13 +237,13 @@ input[type="checkbox"] {
input[type="radio"] + label { input[type="radio"] + label {
position: relative; position: relative;
margin-left: calc(12px + 6px); margin-left: 18px;
} }
input[type="radio"] + label::before { input[type="radio"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * (12px + 6px)); left: -18px;
display: inline-block; display: inline-block;
width: 12px; width: 12px;
height: 12px; height: 12px;
@@ -260,10 +256,8 @@ input[type="radio"]:checked + label::after {
display: block; display: block;
width: 4px; width: 4px;
height: 4px; height: 4px;
top: calc(12px / 2 - 4px / 2); top: 4px;
left: calc( left: -14px;
-1 * (12px + 6px) + 12px / 2 - 4px / 2
);
position: absolute; 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"); 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 { input[type="checkbox"] + label {
position: relative; position: relative;
margin-left: calc(13px + margin-left: 19px;
6px);
} }
input[type="checkbox"] + label::before { input[type="checkbox"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * (13px + left: -19px;
6px));
display: inline-block; display: inline-block;
width: 13px; width: 13px;
height: 13px; height: 13px;
@@ -309,10 +301,7 @@ input[type="checkbox"]:checked + label::after {
height: 7px; height: 7px;
position: absolute; position: absolute;
top: 3px; top: 3px;
left: calc( left: -16px;
-1 * (13px +
6px) + 3px
);
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"); 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
View File

@@ -86,6 +86,12 @@
"integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==", "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
"dev": true "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": { "dedent": {
"version": "0.7.0", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -186,6 +192,12 @@
"readable-stream": "^3.1.1" "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": { "inherits": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -230,6 +242,17 @@
"supports-color": "^6.1.0" "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": { "postcss-css-variables": {
"version": "0.14.0", "version": "0.14.0",
"resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz", "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-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": { "postcss-value-parser": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
@@ -405,6 +439,12 @@
"has-flag": "^3.0.0" "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": { "util-deprecate": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

1
package.json
View File

@@ -29,6 +29,7 @@
"ejs": "^3.0.2", "ejs": "^3.0.2",
"highlight.js": "^9.18.1", "highlight.js": "^9.18.1",
"mkdirp": "^1.0.4", "mkdirp": "^1.0.4",
"postcss-calc": "^7.0.2",
"postcss-css-variables": "^0.14.0", "postcss-css-variables": "^0.14.0",
"postcss-inline": "^1.2.0", "postcss-inline": "^1.2.0",
"postcss-inline-svg": "^4.1.0" "postcss-inline-svg": "^4.1.0"