refactoring

examples/Components/Routes/TodoList/index.vue

@@ -102,4 +102,48 @@ export default {
 		}
 	},
 }
-</script>
+</script>
+
+<style lang="scss">
+@import "~variables";
+
+ul[data-type="todo_list"] {
+  padding-left: 0;
+}
+
+li[data-type="todo_item"] {
+  display: flex;
+  flex-direction: row;
+}
+
+.todo-checkbox {
+  border: 2px solid $color-black;
+  height: 0.9em;
+  width: 0.9em;
+  box-sizing: border-box;
+  margin-right: 10px;
+  margin-top: 0.3rem;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  border-radius: 0.2em;
+  background-color: transparent;
+  transition: 0.4s background;
+}
+
+.todo-content {
+  flex: 1;
+}
+
+li[data-done="true"] {
+  text-decoration: line-through;
+}
+
+li[data-done="true"] .todo-checkbox {
+  background-color: $color-black;
+}
+
+li[data-done="false"] {
+  text-decoration: none;
+}
+</style>