Funky custom checkmark

app/components/add-contributor/template.hbs

@@ -1,7 +1,9 @@
 <form {{action "save" on="submit"}}>
   <p>
     {{input type="checkbox" name="is-core" id="is-core" checked=isCore}}
-    <label for="is-core">Core team member (can add contributors)</label>
+    <label for="is-core" class="checkbox">
+      Core team member (can add contributors)
+    </label>
   </p>
   <p>
     {{input name="id"

app/styles/components/_add-contributor.scss

@@ -31,6 +31,35 @@ section#add-contributor {
       }
     }
 
+    input[type=checkbox] {
+      display: none;
+    }
+
+    label.checkbox {
+      line-height: 3.2rem;
+      font-size: 1.2rem;
+      &::before {
+        display: inline-block;
+        height: 3.2rem;
+        width: 3.2rem;
+        font-size: 2rem;
+        background-color: rgba(22, 21, 40, 0.3);
+        border-bottom: 1px solid rgba(255,255,255,0.2);
+        color: #fff;
+        text-align: center;
+        vertical-align: middle;
+        content: '';
+        margin-right: 0.8rem;
+      }
+    }
+
+    input[type=checkbox]:checked + label.checkbox {
+      &::before {
+        content: '✓';
+        background-color: rgba(22, 21, 40, 0.6);
+      }
+    }
+
   }
 
 }