From cb984aa021acdb7f945978f2fd19beb19d577e53 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 15 Dec 2020 15:20:03 +0800
Subject: [PATCH] Simplify checkbox with fontawesome icon

---
 assets/css/_addon/main.scss              | 33 +++++-------------------
 assets/css/_colors/dark-typography.scss  |  2 +-
 assets/css/_colors/light-typography.scss |  2 +-
 assets/js/_commons/checkbox.js           |  4 +--
 4 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index ab6a6d7..5a05aef 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -870,37 +870,16 @@ div.post-content .table-wrapper {
     .task-list-item[hide-bullet] {
       list-style-type: none;
 
-      > span { // <span> created by JS
-        border: 1px solid var(--checkbox-color);
-        background-color: var(--main-wrapper-bg);
-        border-radius: 50%;
-        margin: 0 .5rem .2rem -1.5rem;
+      > i { // checkbox icon
+        margin: 0 .4rem .2rem -1.4rem;
         vertical-align: middle;
-        height: 1rem;
-        width: 1rem;
-        display: inline-block;
-
-        &[checked] {
-          background-color: var(--checkbox-checked-color);
-          border-color: var(--checkbox-checked-color);
-
-          &::after {
-            content: "";
-            width: 5px;
-            height: 9px;
-            position: relative;
-            bottom: 9px;
-            left: 5px;
-            background: var(--checkbox-checked-color);
-            display: inline-block;
-            border: solid var(--main-wrapper-bg); // the hook symbol
-            border-width: 0 2px 2px 0;
-            transform: rotate(45deg) scale(1);
-          }
+        color: var(--checkbox-color);
+        &.checked {
+          color: var(--checkbox-checked-color);
         }
       }
 
-    } // .task-list-item
+    }
 
     input[type=checkbox] {
       margin: 0 .5rem .2rem -1.3rem;
diff --git a/assets/css/_colors/dark-typography.scss b/assets/css/_colors/dark-typography.scss
index a913e72..022a06f 100644
--- a/assets/css/_colors/dark-typography.scss
+++ b/assets/css/_colors/dark-typography.scss
@@ -32,7 +32,7 @@
   --btn-box-shadow: var(--main-wrapper-bg);
   --card-header-bg: rgb(51, 50, 50);
   --label-color: rgb(108, 117, 125);
-  --checkbox-color: var(--text-color);
+  --checkbox-color: rgb(118 120 121);
   --checkbox-checked-color: var(--link-color);
 
   /* Sidebar */
diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss
index 25f972c..b71e349 100644
--- a/assets/css/_colors/light-typography.scss
+++ b/assets/css/_colors/light-typography.scss
@@ -26,7 +26,7 @@
   --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
   --checkbox-color: darkgrey;
-  --checkbox-checked-color: #2796ff;
+  --checkbox-checked-color: #07a8f7;
 
 
   /* Sidebar */
diff --git a/assets/js/_commons/checkbox.js b/assets/js/_commons/checkbox.js
index 93ab6d1..b600d0a 100644
--- a/assets/js/_commons/checkbox.js
+++ b/assets/js/_commons/checkbox.js
@@ -6,7 +6,7 @@ $(function() {
   /* hide browser default checkbox */
   $("input[type=checkbox]").addClass("unloaded");
   /* create checked checkbox */
-  $("input[type=checkbox][checked]").before("<span checked></span>");
+  $("input[type=checkbox][checked]").before("<i class=\"fas fa-check-circle checked\"></i>");
   /* create normal checkbox */
-  $("input[type=checkbox]:not([checked])").before("<span></span>");
+  $("input[type=checkbox]:not([checked])").before("<i class=\"far fa-circle\"></i>");
 });