Edit the SCSS to be more SCSSesque

web-svelte/src/components/SciFi-Checkbox.svelte

@@ -21,7 +21,38 @@ function toggleState() {
 </label>
 
 <style lang="scss">
-/* Customize the label (the container) */
+$unchecked: #ff0000;
+$checked: #00aa00;
+
+/* Create a custom checkbox */
+.checkmark {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 25px;
+	width: 25px;
+	background-color: $unchecked;
+	border-radius: 12px;
+
+	&:after {
+		content: "";
+		position: absolute;
+		display: none;
+	}
+
+	&:after {
+		left: 7px;
+		top: 2px;
+		width: 7px;
+		height: 14px;
+		border: solid black;
+		border-width: 0 3px 3px 0;
+		-webkit-transform: rotate(45deg);
+		-ms-transform: rotate(45deg);
+		transform: rotate(45deg);
+	}
+}
+
 .container {
 	display: inline-flex;
 	align-items: center;
@@ -42,55 +73,41 @@ function toggleState() {
 		height: 0;
 		width: 0;
 	}
-}
 
-/* Create a custom checkbox */
-.checkmark {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 25px;
-	width: 25px;
-	background-color: #ff0000;
-	border-radius: 12px;
-}
+	/* Checked checkmark */
+	input:checked ~ .checkmark {
+		background-color: $checked;
+	}
 
-/* On mouse-over, add a grey background color */
-.container:hover input ~ .checkmark {
-	background-color: #a70000;
-}
+	/* Darken the checkmark background colour when hovering */
+	&:hover {
+		input ~ .checkmark {
+			background-color: darken($unchecked, 20%);
+		}
 
-.container:hover input:checked ~ .checkmark {
-	background-color: #007700;
-}
+		input:checked ~ .checkmark {
+			background-color: darken($checked, 20%);
+		}
+	}
 
-/* When the checkbox is checked, add a blue background */
-.container input:checked ~ .checkmark {
-	background-color: #00aa00;
-}
+	/* Indicate to users when they can't actually use the options */
+	&[disabled="true"] {
+		cursor: not-allowed;
 
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-	content: "";
-	position: absolute;
-	display: none;
-}
+		&:hover {
+			input ~ .checkmark {
+				background-color: $unchecked;
+			}
 
-/* Show the checkmark when checked */
-.container input:checked ~ .checkmark:after {
-	display: block;
-}
+			input:checked ~ .checkmark {
+				background-color: $checked;
+			}
+		}
+	}
 
-/* Style the checkmark/indicator */
-.checkmark:after {
-	left: 7px;
-	top: 2px;
-	width: 7px;
-	height: 14px;
-	border: solid black;
-	border-width: 0 3px 3px 0;
-	-webkit-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
+	/* Show the checkmark when checked */
+	input:checked ~ .checkmark:after {
+		display: block;
+	}
 }
 </style>