From e6740d9b4f9cdaefed3becb4590e50b1518df442 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Sun, 19 Feb 2017 13:49:54 +0800
Subject: [PATCH] Funky custom checkmark

---
 app/components/add-contributor/template.hbs |  4 ++-
 app/styles/components/_add-contributor.scss | 29 +++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/app/components/add-contributor/template.hbs b/app/components/add-contributor/template.hbs
index 98caf38..076156e 100644
--- a/app/components/add-contributor/template.hbs
+++ b/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"
diff --git a/app/styles/components/_add-contributor.scss b/app/styles/components/_add-contributor.scss
index a17667e..8a12a31 100644
--- a/app/styles/components/_add-contributor.scss
+++ b/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);
+      }
+    }
+
   }
 
 }