Custom checkboxes and radios!

content/demo/index.md

@@ -110,6 +110,26 @@ end
 - [ ] Coffee
 - [x] Combustible lemons
 
+### Same but interactive
+
+<ul>
+<li><input type="checkbox"> Milk</li>
+<li><input checked="" type="checkbox"> Eggs</li>
+<li><input checked="" type="checkbox"> Flour</li>
+<li><input type="checkbox"> Coffee</li>
+<li><input checked="" type="checkbox"> Combustible lemons</li>
+</ul>
+
+### With radio type
+
+<ul>
+<li><input type="radio" name="test"> Milk</li>
+<li><input type="radio" name="test"> Eggs</li>
+<li><input type="radio" name="test"> Flour</li>
+<li><input checked="" type="radio" name="test"> Coffee</li>
+<li><input type="radio" name="test" disabled=""> Combustible lemons</li>
+</ul>
+
 ## Small image
 
 {{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png", alt="Codeberg icon", transparent=true, no_hover=true) }}

sass/_input.scss

@@ -0,0 +1,115 @@
+input[type="radio"],
+input[type="checkbox"] {
+	-webkit-appearance: none;
+	position: relative;
+	appearance: none;
+	transition-duration: var(--transition);
+	transition-property: border, background-color;
+	border: 0.15rem solid var(--fg-muted-3);
+	background-color: var(--fg-muted-1);
+	width: 1rem;
+	height: 1rem;
+
+	&::before {
+		display: block;
+		position: absolute;
+		transform: scale(0);
+		transition-duration: var(--transition);
+		transition-property: transform, opacity;
+		background-color: white;
+		content: "";
+	}
+
+	&:hover {
+		background-color: var(--fg-muted-2);
+	}
+
+	&:checked {
+		border: 0.15rem solid transparent;
+		background-color: var(--primary-color);
+
+		&:disabled {
+			cursor: not-allowed;
+			border: 0.15rem solid transparent;
+			background-color: var(--primary-color-alpha);
+
+			&::before {
+				opacity: 0.8;
+				background-color: var(--fg-color);
+			}
+		}
+
+		&::before {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		border: 0.15rem solid var(--fg-muted-1);
+		background-color: var(--fg-muted-1);
+	}
+}
+
+input[type="radio"] {
+	border-radius: 50%;
+
+	&::before {
+		border-radius: 50%;
+		width: 0.5rem;
+		height: 0.5rem;
+		top: 0.125rem;
+		left: 0.125rem;
+	}
+}
+
+input[type="checkbox"] {
+	border-radius: calc(var(--rounded-corner-small) / 2);
+
+	&::before {
+		$checkmark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M13.754 4.668c.176-.2.262-.461.246-.723a1 1 0 0 0-.34-.687 1 1 0 0 0-.726-.246 1 1 0 0 0-.688.34L5.95 10.547 3.707 8.3A1 1 0 0 0 2 9.01a1 1 0 0 0 .293.708l3 3c.195.195.465.3.742.293.278-.012.535-.133.719-.344zm0 0'/%3E%3C/svg%3E");
+		-webkit-mask-image: $checkmark-icon;
+		-webkit-mask-size: cover;
+		top: -0.125rem;
+		left: -0.125rem;
+		transform-origin: bottom left;
+		opacity: 0;
+		mask-image: $checkmark-icon;
+		mask-size: cover;
+		width: 1rem;
+		height: 1rem;
+		content: "";
+	}
+
+	&:hover {
+		background-color: var(--fg-muted-2);
+	}
+
+	&:checked {
+		border: 0.15rem solid transparent;
+		background-color: var(--primary-color);
+
+		&:disabled {
+			cursor: not-allowed;
+			border: 0.15rem solid transparent;
+			background-color: var(--primary-color-alpha);
+
+			&::before {
+				opacity: 0.8;
+				background-color: var(--fg-color);
+			}
+		}
+
+		&::before {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		border: 0.15rem solid var(--fg-muted-1);
+		background-color: var(--fg-muted-1);
+	}
+}

sass/style.scss

@@ -18,6 +18,7 @@
 @use "footer";
 @use "general";
 @use "icon";
+@use "input";
 @use "johnvertisement";
 @use "media";
 @use "nav";