mirror of
https://github.com/jdan/98.css.git
synced 2025-09-02 02:12:44 +02:00
move all variables into :root to fix css-variables errors
This commit is contained in:
Jordan Scales
85
build/98.css
85
build/98.css
@@ -21,6 +21,11 @@
|
||||
--radio-total-width-precalc: 12px + 6px;
|
||||
--radio-total-width: calc(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 +
|
||||
6px;
|
||||
@@ -28,6 +33,9 @@
|
||||
6px);
|
||||
--checkbox-left: calc(-1 * 13px +
|
||||
6px);
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
/* Borders */
|
||||
--border-width: 1px;
|
||||
@@ -248,40 +256,18 @@ input[type="radio"] + label::before {
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label::after {
|
||||
--radio-dot-width: 4px;
|
||||
--radio-dot-top: undefined;
|
||||
--radio-dot-left: undefined;
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
width: undefined;
|
||||
height: undefined;
|
||||
top: undefined;
|
||||
left: undefined;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
top: calc(12px / 2 - 4px / 2);
|
||||
left: calc(
|
||||
-1 * (12px + 6px) + 12px / 2 - 4px / 2
|
||||
);
|
||||
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");
|
||||
}
|
||||
|
||||
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="checkbox"]:focus + label {
|
||||
outline: 1px dotted #000000;
|
||||
@@ -317,44 +303,17 @@ input[type="checkbox"] + label::before {
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label::after {
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
content: "";
|
||||
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;
|
||||
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 {
|
||||
|
||||
85
docs/98.css
85
docs/98.css
@@ -21,6 +21,11 @@
|
||||
--radio-total-width-precalc: 12px + 6px;
|
||||
--radio-total-width: calc(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 +
|
||||
6px;
|
||||
@@ -28,6 +33,9 @@
|
||||
6px);
|
||||
--checkbox-left: calc(-1 * 13px +
|
||||
6px);
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
/* Borders */
|
||||
--border-width: 1px;
|
||||
@@ -248,40 +256,18 @@ input[type="radio"] + label::before {
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label::after {
|
||||
--radio-dot-width: 4px;
|
||||
--radio-dot-top: undefined;
|
||||
--radio-dot-left: undefined;
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
width: undefined;
|
||||
height: undefined;
|
||||
top: undefined;
|
||||
left: undefined;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
top: calc(12px / 2 - 4px / 2);
|
||||
left: calc(
|
||||
-1 * (12px + 6px) + 12px / 2 - 4px / 2
|
||||
);
|
||||
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");
|
||||
}
|
||||
|
||||
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="checkbox"]:focus + label {
|
||||
outline: 1px dotted #000000;
|
||||
@@ -317,44 +303,17 @@ input[type="checkbox"] + label::before {
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label::after {
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
content: "";
|
||||
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;
|
||||
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 {
|
||||
|
||||
22
style.css
22
style.css
@@ -21,11 +21,21 @@
|
||||
--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
|
||||
--radio-total-width: calc(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) +
|
||||
var(--radio-label-spacing);
|
||||
--checkbox-total-width: calc(var(--checkbox-total-width-precalc));
|
||||
--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
/* Borders */
|
||||
--border-width: 1px;
|
||||
@@ -234,14 +244,6 @@ input[type="radio"] + label::before {
|
||||
}
|
||||
|
||||
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: "";
|
||||
display: block;
|
||||
width: var(--radio-dot-width);
|
||||
@@ -283,10 +285,6 @@ input[type="checkbox"] + label::before {
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label::after {
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
width: var(--checkmark-width);
|
||||
|
||||
Reference in New Issue
Block a user