From d21a9cdd176f280c741f82bbc14fb4b1de719886 Mon Sep 17 00:00:00 2001
From: Jordan Scales <scalesjordan@gmail.com>
Date: Tue, 21 Apr 2020 16:18:38 -0400
Subject: [PATCH] move all variables into :root to fix css-variables errors

---
 build/98.css | 85 ++++++++++++++--------------------------------------
 docs/98.css  | 85 ++++++++++++++--------------------------------------
 style.css    | 22 +++++++-------
 3 files changed, 54 insertions(+), 138 deletions(-)

diff --git a/build/98.css b/build/98.css
index ecacd23..aa0cb5a 100644
--- a/build/98.css
+++ b/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 {
diff --git a/docs/98.css b/docs/98.css
index ecacd23..aa0cb5a 100644
--- a/docs/98.css
+++ b/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 {
diff --git a/style.css b/style.css
index cb544d5..f0d8756 100644
--- a/style.css
+++ b/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);