1 files changed, 44 insertions, 0 deletions
diff --git a/css/post/task_list.css b/css/post/task_list.css
new file mode 100644
index 00000000..ee2ec895
--- /dev/null
+++ b/css/post/task_list.css
@@ -0,0 +1,44 @@
+ul li.task-list-item {
+  position: relative;
+}
+ul li.task-list-item>input[type=checkbox] {
+  list-style: none;
+  background: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: $margin-l-0;
+  display: inline-block;
+  border: none;
+  opacity: 1;
+}
+ul li.task-list-item>input[type=checkbox][checked]:before {
+  background: $color-text-primary;
+  -webkit-mask-image: url("../icon/checkbox-checked.svg");
+  -webkit-mask-position: center center;
+  mask-image: url("../icon/checkbox-checked.svg");
+  -webkit-mask-repeat: no-repeat;
+}
+ul li.task-list-item>input[type=checkbox]:before {
+  background: $color-text-primary;
+  -webkit-mask-image: url("../icon/checkbox-default.svg");
+  -webkit-mask-position: center center;
+  mask-image: url("../icon/checkbox-default.svg");
+  -webkit-mask-repeat: no-repeat;
+}
+ul li.task-list-item>input[type=checkbox]:after,
+ul li.task-list-item>input[type=checkbox]:before {
+  display: block;
+  position: absolute;
+  content: "X";
+  color: transparent;
+  left: 0;
+  top: 0;
+  width: $icon-size;
+  height: $line-height-body;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-x: 0;
+  background-position-y: center;
+  --webkit-touch-callout: none;
+}