From 43d4f3204952bb397fcfa175f580a191801dfb05 Mon Sep 17 00:00:00 2001
From: Filip Znachor <filip@znachor.cz>
Date: Fri, 6 Oct 2023 10:34:01 +0200
Subject: [PATCH] Added checkboxes

---
 index.html       | 11 +++++---
 src/checkbox.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/radio.css    | 47 ---------------------------------
 style.css        |  2 +-
 4 files changed, 77 insertions(+), 51 deletions(-)
 create mode 100644 src/checkbox.css
 delete mode 100644 src/radio.css

diff --git a/index.html b/index.html
index 01e9124..eb3ad52 100644
--- a/index.html
+++ b/index.html
@@ -72,18 +72,23 @@
 						</div>
 					</div>
 
-					<div class="radio-row">
-						<label class="radio">
+					<div class="cbox-row">
+						<label class="cbox">
 							<input type="radio" name="radio-button" checked>
 							<span>Radio 1</span>
 						</label>
 	
-						<label class="radio">
+						<label class="cbox">
 							<input type="radio" name="radio-button">
 							<span>Radio 2</span>
 						</label>
 					</div>
 
+					<label class="cbox">
+						<input type="checkbox">
+						<span>Check me!</span>
+					</label>
+
 					<div class="btn-row">
 						<button class="btn btn-primary">
 							Send
diff --git a/src/checkbox.css b/src/checkbox.css
new file mode 100644
index 0000000..3904a64
--- /dev/null
+++ b/src/checkbox.css
@@ -0,0 +1,68 @@
+label.cbox {position: relative;}
+
+label.cbox > input {
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+	z-index: 100;
+	margin: 0;
+	pointer-events: none;
+}
+
+label.cbox > input + * {
+	display: grid;
+	grid-template-columns: min-content max-content;
+	grid-template-areas: "box .";
+	align-items: center;
+	cursor: pointer;
+	gap: 10px;
+}
+
+label.cbox > input + *::before {
+	content: "";
+	display: block;
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+	aspect-ratio: 1 / 1;
+	border: 2px solid var(--synergy-border);
+	transition: background .1s, box-shadow .2s;
+	background: var(--synergy-bg);
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
+	grid-area: box;
+}
+
+label.cbox > input:checked + *::before {
+	background: var(--synergy-border-active);
+}
+
+label.cbox > input:focus-visible  + *::before {
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 0 0 8px var(--synergy-focus-highlight);
+}
+
+label.cbox > input[type=checkbox] + *::before {
+	border-radius: var(--synergy-border-radius);
+}
+
+label.cbox > input[type=checkbox] + *::after {
+	content: "";
+	grid-area: box;
+	width: 25%;
+	height: 50%;
+	border: 0 solid var(--synergy-bg);
+	border-width: 0 2px 2px 0;
+	margin: auto;
+	transform: rotate(45deg);
+	z-index: 10;
+	top: -3.5%;
+	left: 1.5%;
+	position: relative;
+}
+
+.cbox-row {
+	display: flex; gap: 25px; flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/src/radio.css b/src/radio.css
deleted file mode 100644
index cadaf40..0000000
--- a/src/radio.css
+++ /dev/null
@@ -1,47 +0,0 @@
-label.radio {position: relative;}
-
-label.radio > input[type="radio"] {
-	opacity: 0;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	cursor: pointer;
-	z-index: 100;
-	margin: 0;
-	pointer-events: none;
-}
-
-label.radio > input[type="radio"] + * {
-	display: flex;
-	flex-wrap: nowrap;
-	align-items: center;
-	cursor: pointer;
-	gap: 10px;
-}
-
-label.radio > input[type="radio"] + *::before {
-	content: "";
-	display: block;
-	width: 1rem;
-	height: 1rem;
-	border-radius: 50%;
-	aspect-ratio: 1 / 1;
-	border: 2px solid var(--synergy-border);
-	transition: background .1s, box-shadow .2s;
-	background: var(--synergy-bg);
-	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
-}
-
-label.radio > input[type="radio"]:checked + *::before {
-	background: var(--synergy-border-active);
-}
-
-label.radio > input[type="radio"]:focus-visible  + *::before {
-	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 0 0 8px var(--synergy-focus-highlight);
-}
-
-.radio-row {
-	display: flex; gap: 25px; flex-wrap: wrap;
-}
\ No newline at end of file
diff --git a/style.css b/style.css
index a94488c..0c7e036 100644
--- a/style.css
+++ b/style.css
@@ -2,4 +2,4 @@
 @import url("src/button.css");
 @import url("src/input.css");
 @import url("src/toggle.css");
-@import url("src/radio.css");
+@import url("src/checkbox.css");