Add switch class for checkboxes (fixes #70)

CHANGELOG.md

@@ -13,8 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add active state to footer's "Powered by" links.
 - Add active state to footnotes' go back button.
 - Add active state to slider thumb.
-- Add hover state to slider thumb.
 - Add loading animation to "Load Comments" button.
+- Add special `switch` class for checkboxes (#70).
 - Add zoom-on-hover to custom comment emojis.
 - Style mentions and hashtags.
 

content/demo/index.md

@@ -334,6 +334,36 @@ Available variables are:
   </li>
 </ul>
 
+With `switch` class:
+
+```html
+<input class="switch" type="checkbox" />
+<label>Checkbox</label>
+```
+
+<ul>
+  <li>
+    <input class="switch" type="checkbox" />
+    <label>&nbsp;Milk</label>
+  </li>
+  <li>
+    <input class="switch" type="checkbox" />
+    <label>&nbsp;Eggs</label>
+  </li>
+  <li>
+    <input class="switch" type="checkbox" />
+    <label>&nbsp;Flour</label>
+  </li>
+  <li>
+    <input class="switch" type="checkbox" checked />
+    <label>&nbsp;Coffee</label>
+  </li>
+  <li>
+    <input class="switch" type="checkbox" disabled />
+    <label>&nbsp;Combustible lemons</label>
+  </li>
+</ul>
+
 With `radio` type:
 
 ```html

sass/_input.scss

@@ -81,30 +81,67 @@ input[type="checkbox"] {
 		mask-size: cover;
 		width: 1rem;
 		height: 1rem;
-		content: "";
+	}
+
+	&.switch {
+		vertical-align: -0.625rem;
+		box-shadow: var(--edge-highlight);
+		border: none;
+		border-radius: 999px;
+		width: 3rem;
+		height: 2rem;
+
+		&::before {
+			-webkit-mask-image: none;
+			top: 0.25rem;
+			left: 0.25rem;
+			transform: none;
+			transform-origin: center;
+			opacity: 1;
+			mask-image: none;
+			transition: var(--transition);
+			box-shadow: var(--shadow);
+			border-radius: 50%;
+			background-color: white;
+			width: 1.5rem;
+			height: 1.5rem;
+		}
+
+		&:checked {
+			background-color: var(--primary-color);
+
+			&::before {
+				transform: translateX(1rem);
+				background-color: var(--contrast-color);
+			}
+		}
+
+		&:disabled {
+			&::before {
+				opacity: 0.6;
+				box-shadow: none;
+			}
+		}
 	}
 }
 
 input[type="color"] {
 	vertical-align: -0.375em;
-	border: 0.25rem solid var(--fg-muted-2);
+	box-shadow: var(--edge-highlight);
+	border: none;
 	border-radius: var(--rounded-corner-small);
-	padding: 0;
+	padding: 0.25rem;
 	width: 3rem;
 	height: 2rem;
 
-	&:hover {
-		background-color: var(--fg-muted-2);
-	}
-
 	&:disabled {
-		border: 0.25rem solid var(--fg-muted-2);
+		opacity: 0.6;
-		background-color: var(--fg-muted-1);
+		border: none;
 	}
 
 	&::-moz-color-swatch {
 		border: none;
-		border-radius: calc(var(--rounded-corner-small) / 2);
+		border-radius: calc(var(--rounded-corner-small) - 0.25rem);
 	}
 
 	&::-webkit-color-swatch-wrapper {
@@ -112,7 +149,7 @@ input[type="color"] {
 	}
 
 	&::-webkit-color-swatch {
-		border-radius: calc(var(--rounded-corner-small) / 2);
+		border-radius: calc(var(--rounded-corner-small) - 0.25rem);
 	}
 }
 
@@ -135,16 +172,10 @@ input[type="range"] {
 		cursor: grab;
 		box-shadow: var(--shadow);
 		border-radius: 999px;
-		background-color: hsl(0, 0%, 90%);
+		background-color: white;
 		width: 1.5rem;
 		height: 1.5rem;
 
-		&:hover {
-			transform: scale(1.1);
-			box-shadow: var(--shadow-raised);
-			background-color: white;
-		}
-
 		&:active {
 			transform: scale(var(--active));
 			cursor: grabbing;
@@ -158,16 +189,10 @@ input[type="range"] {
 		box-shadow: var(--shadow);
 		border: none;
 		border-radius: 999px;
-		background-color: hsl(0, 0%, 90%);
+		background-color: white;
 		width: 1.5rem;
 		height: 1.5rem;
 
-		&:hover {
-			transform: scale(1.1);
-			box-shadow: var(--shadow-raised);
-			background-color: white;
-		}
-
 		&:active {
 			transform: scale(var(--active));
 			cursor: grabbing;