Add better looking checkboxes (#6)

src/components/Home.vue

@@ -7,9 +7,19 @@
 		<div class="box tasks" v-if="tasks && tasks.length > 0">
 			<div @click="gotoList(l.listID)" class="task" v-for="l in tasks" v-bind:key="l.id" v-if="!l.done">
 				<label v-bind:for="l.id">
-					<input type="checkbox" v-bind:id="l.id" disabled>
-					{{l.text}}
-					<i v-if="l.dueDate > 0"> - Due on {{formatUnixDate(l.dueDate)}}</i>
+					<div class="fancycheckbox">
+						<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done" style="display: none;" disabled>
+						<label  v-bind:for="l.id" class="check">
+							<svg width="18px" height="18px" viewBox="0 0 18 18">
+								<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+								<polyline points="1 9 7 14 15 4"></polyline>
+							</svg>
+						</label>
+					</div>
+					<span class="tasktext">
+						{{l.text}}
+						<i v-if="l.dueDate > 0"> - Due on {{formatUnixDate(l.dueDate)}}</i>
+					</span>
 				</label>
 			</div>
 		</div>

src/components/lists/ShowList.vue

@@ -30,8 +30,18 @@
 				<div class="box tasks" v-if="this.list.tasks && this.list.tasks.length > 0">
 					<div class="task" v-for="l in list.tasks" v-bind:key="l.id">
 						<label v-bind:for="l.id">
-							<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done">
-							{{l.text}}
+							<div class="fancycheckbox">
+								<input @change="markAsDone" type="checkbox" v-bind:id="l.id" v-bind:checked="l.done" style="display: none;">
+								<label  v-bind:for="l.id" class="check">
+									<svg width="18px" height="18px" viewBox="0 0 18 18">
+										<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+										<polyline points="1 9 7 14 15 4"></polyline>
+									</svg>
+								</label>
+							</div>
+							<span class="tasktext">
+								{{l.text}}
+							</span>
 						</label>
 						<div @click="editTask(l.id)" class="icon settings">
 							<icon icon="cog"/>

src/vikunja.scss

@@ -98,6 +98,10 @@ h1,h2,h3,h4,h5,h6{
       width: 96%;
       display: inline-block;
       cursor: pointer;
+
+      .tasktext {
+        vertical-align: top;
+      }
     }
 
     input[type="checkbox"] {
@@ -176,4 +180,62 @@ h1,h2,h3,h4,h5,h6{
       border-width: 0.25em;
     }
   }
+}
+
+// Fancy Checkboxes
+.fancycheckbox {
+  display: inline-block;
+  padding-right: 5px;
+  padding-top: 3px;
+
+  .check {
+    cursor: pointer;
+    position: relative;
+    margin: auto;
+    width: 18px;
+    height: 18px;
+    -webkit-tap-highlight-color: transparent;
+    transform: translate3d(0, 0, 0);
+
+    &:hover svg {
+      stroke: $primary;
+    }
+
+    svg {
+      position: relative;
+      z-index: 1;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke: #c8ccd4;
+      stroke-width: 1.5;
+      transform: translate3d(0, 0, 0);
+      transition: all 0.2s ease;
+
+      path {
+        stroke-dasharray: 60;
+        stroke-dashoffset: 0;
+      }
+
+      polyline {
+        stroke-dasharray: 22;
+        stroke-dashoffset: 66;
+      }
+    }
+  }
+
+  input[type=checkbox]:checked + .check svg {
+    stroke: $primary;
+  }
+
+  input[type=checkbox]:checked + .check svg path {
+    stroke-dashoffset: 60;
+    transition: all 0.3s linear;
+  }
+
+  input[type=checkbox]:checked + .check svg polyline {
+    stroke-dashoffset: 42;
+    transition: all 0.2s linear;
+    transition-delay: 0.15s;
+  }
 }