Custom checkboxes and radios!

2024-05-26 21:40:15 +03:00
parent 1c9d941601
commit 96031d9cdb
3 changed files with 136 additions and 0 deletions
--- a/sass/_input.scss
+++ b/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);
+	}
+}