mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-02 10:23:35 +02:00
Code Issues Releases Wiki Activity

move all variables into :root to fix css-variables errors

Browse Source
This commit is contained in:
Jordan Scales
2020-04-21 16:18:38 -04:00
parent ecfc9758a8
commit d21a9cdd17
3 changed files with 54 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
build/98.css
View File

@@ -21,6 +21,11 @@
--radio-total-width-precalc: 12px + 6px; --radio-total-width-precalc: 12px + 6px;
--radio-total-width: calc(12px + 6px); --radio-total-width: calc(12px + 6px);
--radio-left: calc(-1 * 12px + 6px); --radio-left: calc(-1 * 12px + 6px);
--radio-dot-width: 4px;
--radio-dot-top: calc(12px / 2 - 4px / 2);
--radio-dot-left: calc(
-1 * (12px + 6px) + 12px / 2 - 4px / 2
);
--checkbox-total-width-precalc: 13px + --checkbox-total-width-precalc: 13px +
6px; 6px;
@@ -28,6 +33,9 @@
6px); 6px);
--checkbox-left: calc(-1 * 13px + --checkbox-left: calc(-1 * 13px +
6px); 6px);
--checkmark-width: 7px;
--checkmark-top: 3px;
--checkmark-left: 3px;
/* Borders */ /* Borders */
--border-width: 1px; --border-width: 1px;
@@ -248,40 +256,18 @@ input[type="radio"] + label::before {
} }
input[type="radio"]:checked + label::after { input[type="radio"]:checked + label::after {
--radio-dot-width: 4px;
--radio-dot-top: undefined;
--radio-dot-left: undefined;
content: ""; content: "";
display: block; display: block;
width: undefined; width: 4px;
height: undefined; height: 4px;
top: undefined; top: calc(12px / 2 - 4px / 2);
left: undefined; left: calc(
-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");
} }
input[type="radio"]:checked + label::after::after {
left: undefined;
}
input[type="radio"]:checked + label::after::after {
top: undefined;
}
input[type="radio"]:checked + label::after::after {
top: undefined;
}
input[type="radio"]:checked + label::after::after {
height: 4px;
}
input[type="radio"]:checked + label::after::after {
width: 4px;
}
input[type="radio"]:focus + label, input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label { input[type="checkbox"]:focus + label {
outline: 1px dotted #000000; outline: 1px dotted #000000;
@@ -317,44 +303,17 @@ input[type="checkbox"] + label::before {
} }
input[type="checkbox"]:checked + label::after { input[type="checkbox"]:checked + label::after {
--checkmark-width: 7px;
--checkmark-top: 3px;
--checkmark-left: 3px;
content: ""; content: "";
display: block; display: block;
width: undefined;
height: undefined;
position: absolute;
top: undefined;
left: undefined;
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");
}
input[type="checkbox"]:checked + label::after::after {
left: calc(
-1 * (13px +
6px) + 3px
);
}
input[type="checkbox"]:checked + label::after::after {
left: calc(
-1 * (13px +
6px) + 3px
);
}
input[type="checkbox"]:checked + label::after::after {
top: 3px;
}
input[type="checkbox"]:checked + label::after::after {
height: 7px;
}
input[type="checkbox"]:checked + label::after::after {
width: 7px; width: 7px;
height: 7px;
position: absolute;
top: 3px;
left: calc(
-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");
} }
input[type="checkbox"][disabled] + label::before { input[type="checkbox"][disabled] + label::before {

85
docs/98.css
View File

@@ -21,6 +21,11 @@
--radio-total-width-precalc: 12px + 6px; --radio-total-width-precalc: 12px + 6px;
--radio-total-width: calc(12px + 6px); --radio-total-width: calc(12px + 6px);
--radio-left: calc(-1 * 12px + 6px); --radio-left: calc(-1 * 12px + 6px);
--radio-dot-width: 4px;
--radio-dot-top: calc(12px / 2 - 4px / 2);
--radio-dot-left: calc(
-1 * (12px + 6px) + 12px / 2 - 4px / 2
);
--checkbox-total-width-precalc: 13px + --checkbox-total-width-precalc: 13px +
6px; 6px;
@@ -28,6 +33,9 @@
6px); 6px);
--checkbox-left: calc(-1 * 13px + --checkbox-left: calc(-1 * 13px +
6px); 6px);
--checkmark-width: 7px;
--checkmark-top: 3px;
--checkmark-left: 3px;
/* Borders */ /* Borders */
--border-width: 1px; --border-width: 1px;
@@ -248,40 +256,18 @@ input[type="radio"] + label::before {
} }
input[type="radio"]:checked + label::after { input[type="radio"]:checked + label::after {
--radio-dot-width: 4px;
--radio-dot-top: undefined;
--radio-dot-left: undefined;
content: ""; content: "";
display: block; display: block;
width: undefined; width: 4px;
height: undefined; height: 4px;
top: undefined; top: calc(12px / 2 - 4px / 2);
left: undefined; left: calc(
-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");
} }
input[type="radio"]:checked + label::after::after {
left: undefined;
}
input[type="radio"]:checked + label::after::after {
top: undefined;
}
input[type="radio"]:checked + label::after::after {
top: undefined;
}
input[type="radio"]:checked + label::after::after {
height: 4px;
}
input[type="radio"]:checked + label::after::after {
width: 4px;
}
input[type="radio"]:focus + label, input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label { input[type="checkbox"]:focus + label {
outline: 1px dotted #000000; outline: 1px dotted #000000;
@@ -317,44 +303,17 @@ input[type="checkbox"] + label::before {
} }
input[type="checkbox"]:checked + label::after { input[type="checkbox"]:checked + label::after {
--checkmark-width: 7px;
--checkmark-top: 3px;
--checkmark-left: 3px;
content: ""; content: "";
display: block; display: block;
width: undefined;
height: undefined;
position: absolute;
top: undefined;
left: undefined;
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");
}
input[type="checkbox"]:checked + label::after::after {
left: calc(
-1 * (13px +
6px) + 3px
);
}
input[type="checkbox"]:checked + label::after::after {
left: calc(
-1 * (13px +
6px) + 3px
);
}
input[type="checkbox"]:checked + label::after::after {
top: 3px;
}
input[type="checkbox"]:checked + label::after::after {
height: 7px;
}
input[type="checkbox"]:checked + label::after::after {
width: 7px; width: 7px;
height: 7px;
position: absolute;
top: 3px;
left: calc(
-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");
} }
input[type="checkbox"][disabled] + label::before { input[type="checkbox"][disabled] + label::before {

22
style.css
View File

@@ -21,11 +21,21 @@
--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing); --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
--radio-total-width: calc(var(--radio-total-width-precalc)); --radio-total-width: calc(var(--radio-total-width-precalc));
--radio-left: calc(-1 * var(--radio-total-width-precalc)); --radio-left: calc(-1 * var(--radio-total-width-precalc));
--radio-dot-width: 4px;
--radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
--radio-dot-left: calc(
-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
--radio-dot-width
) / 2
);
--checkbox-total-width-precalc: var(--checkbox-width) + --checkbox-total-width-precalc: var(--checkbox-width) +
var(--radio-label-spacing); var(--radio-label-spacing);
--checkbox-total-width: calc(var(--checkbox-total-width-precalc)); --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
--checkmark-width: 7px;
--checkmark-top: 3px;
--checkmark-left: 3px;
/* Borders */ /* Borders */
--border-width: 1px; --border-width: 1px;
@@ -234,14 +244,6 @@ input[type="radio"] + label::before {
} }
input[type="radio"]:checked + label::after { input[type="radio"]:checked + label::after {
--radio-dot-width: 4px;
--radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
--radio-dot-left: calc(
-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
--radio-dot-width
) / 2
);
content: ""; content: "";
display: block; display: block;
width: var(--radio-dot-width); width: var(--radio-dot-width);
@@ -283,10 +285,6 @@ input[type="checkbox"] + label::before {
} }
input[type="checkbox"]:checked + label::after { input[type="checkbox"]:checked + label::after {
--checkmark-width: 7px;
--checkmark-top: 3px;
--checkmark-left: 3px;
content: ""; content: "";
display: block; display: block;
width: var(--checkmark-width); width: var(--checkmark-width);