🎨 Add custom checkbox control

stormwarning · Sep 10, 2019 · 4861799 · 4861799
1 parent fe07900
commit 4861799
Showing 1 changed file with 52 additions and 1 deletion.
diff --git a/components/Controls.vue b/components/Controls.vue
@@ -27,7 +27,14 @@
                 <div class="f6 fw5 tracked lh-title ttu o-80">
                     Japanese
                 </div>
-                <input v-model="nihongo" type="checkbox" />
+                <div class="relative mt2 checkbox">
+                    <input
+                        v-model="nihongo"
+                        class="absolute checkbox-input"
+                        type="checkbox"
+                    />
+                    <div class="dib na1 br1 checkbox-control" />
+                </div>
             </label>
         </form>
     </aside>
@@ -106,4 +113,48 @@ export default {
         margin-top: 2.5rem;
     }
 }
+
+.checkbox {
+    position: relative;
+    top: -1px;
+}
+
+.checkbox-control {
+    &::before {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin: 0.25rem;
+        content: '';
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+}
+
+.checkbox-input {
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+
+    &:checked {
+        & ~ .checkbox-control::before {
+            background-color: #fff;
+        }
+    }
+
+    &:focus {
+        & ~ .checkbox-control {
+            box-shadow: 0 0 0 2px var(--blue);
+        }
+    }
+
+    &:active {
+        & ~ .checkbox-control::before {
+            background-color: rgba(255, 255, 255, 0.6);
+        }
+    }
+}
 </style>