Create a more beautiful checkbox

The browser's default checkbox is too ugly, especially in dark mode
mikesnotebook · Dec 13, 2020 · 833f6cd · 833f6cd
1 parent 6d472cc
commit 833f6cd
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 6 deletions.
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
@@ -864,16 +864,46 @@ div.post-content .table-wrapper {
   ul {
     &.task-list, &:not([class]) {
       padding-left: 2rem;
+    }
 
-      .task-list-item {
-        list-style-type: none;
-      }
+    // attribute 'hide-bullet' added by JS
+    .task-list-item[hide-bullet] {
+      list-style-type: none;
 
-      input[type=checkbox] {
-        margin: 0 .5rem .25rem -1.3rem;
+      > span { // <span> created by JS
+        border: 1px solid var(--checkbox-color);
+        background-color: var(--checkbox-bg);
+        border-radius: 4px;
+        margin: 0 .5rem .2rem -1.5rem;
         vertical-align: middle;
+        height: 1rem;
+        width: 1rem;
+        display: inline-block;
+
+        &[checked] {
+          background-color: var(--checkbox-checked-bg);
+
+          &::after {
+            content: "";
+            width: 5px;
+            height: 9px;
+            position: relative;
+            bottom: 9px;
+            left: 5px;
+            background: var(--checkbox-checked-bg);
+            display: inline-block;
+            border: solid var(--checkbox-checked-color); // the hook symbol
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg) scale(1);
+          }
+        }
       }
+    } // .task-list-item
+
+    input[type=checkbox] {
+      display: none;
     }
+
   } // ul
 
 } // .post-content

diff --git a/assets/css/_colors/dark-typography.scss b/assets/css/_colors/dark-typography.scss
@@ -32,6 +32,11 @@
   --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-bg: var(--main-wrapper-bg);
+  --checkbox-checked-color: var(--main-wrapper-bg);
+  --checkbox-checked-bg: var(--text-color);
+
 
   /* Sidebar */
   --nav-cursor-color: rgb(183, 182, 182);

diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss
@@ -25,6 +25,11 @@
   --btn-backtotop-color: #686868;
   --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
   --btn-box-shadow: #eaeaea;
+  --checkbox-color: darkgrey;
+  --checkbox-bg: var(--main-wrapper-bg);
+  --checkbox-checked-bg: var(--main-wrapper-bg);
+  --checkbox-checked-color: grey;
+
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(

diff --git a/assets/css/post.scss b/assets/css/post.scss
@@ -30,13 +30,14 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 .post-content {
   > ol, > ul, > dl {
     padding-left: 2rem;
-    li+li {
+    li + li {
       margin-top: 0.3rem;
     }
   }
   li {
     > ol, > ul, > dl { // sub list
       padding-left: 2rem;
+      margin-top: 0.3rem;
     }
     > p {
       margin: 1rem 0 0.8rem;

diff --git a/assets/js/_commons.js b/assets/js/_commons.js
@@ -18,4 +18,6 @@
 
 {% include_relative _commons/copy-link.js %}
 
+{% include_relative _commons/checkbox.js %}
+
 {% include_relative _utils/tooltip-loader.js %}
diff --git a/assets/js/_commons/checkbox.js b/assets/js/_commons/checkbox.js
@@ -0,0 +1,12 @@
+/*
+ * Create a more beautiful checkbox
+ */
+
+$(function() {
+  /* hide bullet of checkbox item */
+  $("li.task-list-item:has(input)").attr("hide-bullet", "");
+  /* create checked checkbox */
+  $("input[type=checkbox][checked=checked]").before("<span checked></span>");
+  /* create normal checkbox */
+  $("input[type=checkbox]:not([checked=checked])").before("<span></span>");
+});