From 38e958620b54734af20441610867d5bb707d2ba3 Mon Sep 17 00:00:00 2001
From: Jordan Scales <scalesjordan@gmail.com>
Date: Fri, 17 Apr 2020 14:36:38 -0400
Subject: [PATCH] radio buttons

---
 docs/index.html           | 29 +++++++++++++++++++++++++++--
 radio-border-disabled.svg |  7 +++++++
 radio-border.svg          |  8 ++++++++
 radio-dot-disabled.svg    |  3 +++
 radio-dot.svg             |  3 +++
 style.css                 | 39 +++++++++++++++++++++++++++++++++++++++
 6 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 radio-border-disabled.svg
 create mode 100644 radio-border.svg
 create mode 100644 radio-dot-disabled.svg
 create mode 100644 radio-dot.svg

diff --git a/docs/index.html b/docs/index.html
index 3f4bb2f..9c03302 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -33,15 +33,20 @@
       <fieldset>
         <legend>I think it's</legend>
         <div class="field-row">
-          <input id="cool" type="radio" name="answer" value="cool">
+          <input id="cool" type="radio" value="cool" name="answer">
           <label for="cool">Cool</label>
         </div>
 
         <div class="field-row">
-          <input id="meh" type="radio" name="answer" value="meh">
+          <input id="meh" type="radio" value="meh" name="answer">
           <label for="meh">Meh</label>
         </div>
 
+        <div class="field-row">
+          <input checked disabled id="idk" type="radio" value="idk" name="answer">
+          <label for="idk">Idk</label>
+        </div>
+
         <div class="field-row-stacked">
           <label for="reason">Reason:</label>
           <select>
@@ -53,6 +58,26 @@
         </div>
       </fieldset>
 
+      <fieldset>
+        <legend>Checkboxes</legend>
+        <div class="field-row">
+          <input checked id="option1" type="checkbox">
+          <label for="option1">Option 1</label>
+        </div>
+        <div class="field-row">
+          <input id="option2" type="checkbox">
+          <label for="option2">Option 2</label>
+        </div>
+        <div class="field-row">
+          <input checked disabled id="option2" type="checkbox">
+          <label for="option2">Option 2</label>
+        </div>
+        <div class="field-row">
+          <input disabled id="option2" type="checkbox">
+          <label for="option2">Option 2</label>
+        </div>
+      </fieldset>
+
       <section class="align-right">
         <button>OK</button>
         <button>Cancel</button>
diff --git a/radio-border-disabled.svg b/radio-border-disabled.svg
new file mode 100644
index 0000000..fd003cd
--- /dev/null
+++ b/radio-border-disabled.svg
@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="#C0C0C0"/>
+</svg>
diff --git a/radio-border.svg b/radio-border.svg
new file mode 100644
index 0000000..633be90
--- /dev/null
+++ b/radio-border.svg
@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="white"/>
+</svg>
+
diff --git a/radio-dot-disabled.svg b/radio-dot-disabled.svg
new file mode 100644
index 0000000..7d59f52
--- /dev/null
+++ b/radio-dot-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="#808080"/>
+</svg>
diff --git a/radio-dot.svg b/radio-dot.svg
new file mode 100644
index 0000000..61b884d
--- /dev/null
+++ b/radio-dot.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="black"/>
+</svg>
diff --git a/style.css b/style.css
index ce0f54a..cb60bba 100644
--- a/style.css
+++ b/style.css
@@ -11,6 +11,7 @@
   /* Spacing */
   --element-spacing: 8px;
   --grouped-element-spacing: 4px;
+  --radio-label-spacing: 6px;
 
   /* Borders */
   --border-width: 1px;
@@ -169,3 +170,41 @@ legend {
 .field-row-stacked * + * {
   margin-top: var(--grouped-element-spacing);
 }
+
+label {
+  display: flex;
+  align-items: center;
+}
+input[type="radio"]:focus + label {
+  outline: 1px dotted #000000;
+}
+input[type="radio"] {
+  display: none;
+}
+input[type="radio"] + label {
+  position: relative;
+}
+input[type="radio"] + label::before {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: var(--radio-label-spacing);
+  background: url("./radio-border.svg");
+}
+input[type="radio"]:checked + label::after {
+  content: "";
+  display: block;
+  width: 4px;
+  height: 4px;
+  top: 4px;
+  left: 4px;
+  position: absolute;
+  background: url("./radio-dot.svg");
+}
+input[type="radio"][disabled] + label::before {
+  background: url("./radio-border-disabled.svg");
+}
+input[type="radio"][disabled]:checked + label::after {
+  background: url("./radio-dot-disabled.svg");
+}