From 0739af92593aa439ffb5014dcfd09f8279b5434e Mon Sep 17 00:00:00 2001
From: Herwin Bozet <herwin.bozet@gmail.com>
Date: Sun, 24 Aug 2025 18:15:22 +0200
Subject: [PATCH] Added radio input styles, improved SASS for checkboxes and
 radios Update inputs.php, inputs.php, and 2 more files...

---
 htdocs/parts/core/inputs.php     |  8 ++--
 htdocs/parts/examples/inputs.php | 46 +++++++++++++++++++-
 scss/site/input.scss             | 75 ++++++++++++++++++++++++++++++--
 scss/variables.scss              |  3 ++
 4 files changed, 123 insertions(+), 9 deletions(-)

diff --git a/htdocs/parts/core/inputs.php b/htdocs/parts/core/inputs.php
index 4248ea8..5f2a82f 100644
--- a/htdocs/parts/core/inputs.php
+++ b/htdocs/parts/core/inputs.php
@@ -43,14 +43,14 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
     </div>
 
     <div class="px-s mb-m">
-        <input type="radio" id="demo-core-radio-1">
+        <input type="radio" id="demo-core-radio-1" name="demo-core-radio">
         <label for="demo-core-radio-1">Radio 1</label><br>
-        <input type="radio" id="demo-core-radio-2">
+        <input type="radio" id="demo-core-radio-2" name="demo-core-radio">
         <label for="demo-core-radio-2">Radio 2</label><br>
-        <input type="radio" id="demo-core-radio-3">
+        <input type="radio" id="demo-core-radio-3" name="demo-core-radio">
         <label for="demo-core-radio-3">Radio 3</label>
         <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
-            (input[type=radio]+label+br)*3
+            (input[type=radio][name=myRadioInput]+label+br)*3
         </code>
     </div>
 
diff --git a/htdocs/parts/examples/inputs.php b/htdocs/parts/examples/inputs.php
index 7f48020..028dd2c 100644
--- a/htdocs/parts/examples/inputs.php
+++ b/htdocs/parts/examples/inputs.php
@@ -14,7 +14,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 </div>
 <section class="p-s">
 
-    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic inputs</h3>
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Text inputs</h3>
 
     <div class="px-s mb-m">
         <label for="demo-core-text">Text Input: </label>
@@ -33,5 +33,47 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 
     </div>
 
-    <p class="mt-m t-bold">TODO: Add other types</p>
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Checkboxes</h3>
+
+    <div class="px-s mb-m">
+        <input type="checkbox" id="demo-site-combo-1" class="cb-pretty r-m border">
+        <label for="demo-site-combo-1">Checkbox 1</label><br>
+        <input type="checkbox" id="demo-site-combo-2" class="cb-pretty r-m border">
+        <label for="demo-site-combo-2">Checkbox 2</label><br>
+        <input type="checkbox" id="demo-site-combo-3" class="cb-pretty r-m border">
+        <label for="demo-site-combo-3">Checkbox 3</label>
+
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=checkbox].cb-pretty.r-m.border+label+br)*3
+        </code>
+    </div>
+
+
+    <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Radio inputs</h3>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-site-radio-1-solid" name="demo-site-radio-solid" class="radio-solid border">
+        <label for="demo-site-radio-1-solid"">Radio 1</label><br>
+        <input type="radio" id="demo-site-radio-2-solid" name="demo-site-radio-solid" class="radio-solid border">
+        <label for="demo-site-radio-2-solid"">Radio 2</label><br>
+        <input type="radio" id="demo-site-radio-3-solid" name="demo-site-radio-solid" class="radio-solid border">
+        <label for="demo-site-radio-3-solid">Radio 3</label>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=radio][name=myRadioInput].radio-solid.border+label+br)*3
+        </code>
+    </div>
+
+    <div class="px-s mb-m">
+        <input type="radio" id="demo-site-radio-1-3d" name="demo-site-radio-3d" class="radio-3d border">
+        <label for="demo-site-radio-1-3d">Radio 1</label><br>
+        <input type="radio" id="demo-site-radio-2-3d" name="demo-site-radio-3d" class="radio-3d border">
+        <label for="demo-site-radio-2-3d">Radio 2</label><br>
+        <input type="radio" id="demo-site-radio-3-3d" name="demo-site-radio-3d" class="radio-3d border">
+        <label for="demo-site-radio-3-3d">Radio 3</label>
+        <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
+            (input[type=radio][name=myRadioInput].radio-3d.border+label+br)*3
+        </code>
+    </div>
+
 </section>
diff --git a/scss/site/input.scss b/scss/site/input.scss
index a11e454..0cf84e6 100644
--- a/scss/site/input.scss
+++ b/scss/site/input.scss
@@ -30,9 +30,9 @@ label {
 	user-select: none;
 }
 
-/* Site > Elements > Inputs > Checkbox */
+/* Site > Elements > Inputs > Checkbox & Radio */
 
-input[type=checkbox] {
+input[type=checkbox], input[type=radio] {
 	width: 1.65em;
 	height: 1.65em;
 	background-color: #{$color-background-checkbox-unchecked};
@@ -46,12 +46,81 @@ input[type=checkbox] {
 	position: relative;
 	vertical-align: middle;
 }
-input[type="checkbox"] + label {
+input[type="checkbox"] + label, input[type="radio"] + label {
 	position: relative;
 	display: inline-block;
 	vertical-align: middle;
 }
 
+/* Site > Elements > Inputs > Checkbox */
+
+input[type=checkbox] {
+	&.cb-pretty, &.checkbox-pretty {
+		text-align: center;
+		padding: 0;
+
+		&:before {
+			content: "✘";
+		}
+
+		&:checked {
+			&:before {
+				content: "✔";
+			}
+		}
+	}
+}
+
+/* Site > Elements > Inputs > Radio */
+
+input[type=radio] {
+	border-radius: 50%;
+
+	&.radio-solid, &.radio-3d {
+		text-align: center;
+		padding: 0;
+
+		&:before {
+			content: "";
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 60%;
+			height: 60%;
+			border-radius: 50%;
+			background-color: transparent;
+			border-color: white;
+		}
+
+		&:checked {
+			&:before {
+				background-color: white;
+			}
+		}
+	}
+
+	&.radio-solid {
+		&:before {
+			border-style: double;
+			border-width: 2px;
+		}
+	}
+
+	&.radio-3d {
+		&:before {
+			border-style: inset;
+			border-width: 2px;
+		}
+
+		&:checked {
+			&:before {
+				border-style: outset;
+			}
+		}
+	}
+}
+
 /* Site > Elements > Inputs > Buttons */
 
 button {
diff --git a/scss/variables.scss b/scss/variables.scss
index ebe38e7..2d0c49b 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -223,6 +223,9 @@ $color-background-inputs: map-get((
 $color-background-checkbox-checked: $color-apollo-08;
 $color-background-checkbox-unchecked: $color-apollo-27;
 
+$color-background-radio-checked: $color-apollo-08;
+$color-background-radio-unchecked: $color-apollo-27;
+
 $color-background-button: map-get((
 		teal: $color-apollo-40,
 		winui: $color-unset,