mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-31 01:29:58 +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

39
docs/98.css
View File

@@ -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");
}