Fixed checkbox issue

content/projects/__demo__/index.md

@@ -91,6 +91,18 @@ _Some normal text because the parser has problems here._
 - [ ] Push my commits to GitHub
 - [ ] One with **inner** html
 
+## Form
+
+<div class="container container--small">
+  <form>
+    <fieldset>
+      <label for="fc-checkbox">This is a label</label>
+      <input type="checkbox" name="checkbox" id="fc-checkbox" />
+      <span for="fc-checkbox">This is a checkbox</span>
+    </fieldset>
+  </form>
+</div>
+
 ## Tables
 
 | key |                                                                                                     value                                                                                                      |

plugins/remark-custom-classes/index.js

@@ -1,5 +1,4 @@
 const visit = require('unist-util-visit')
-const fs = require('fs')
 
 const typesAliasses = {
   heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
@@ -137,7 +136,5 @@ module.exports = ({ markdownAST }, pluginOptions) => {
     })
   }
 
-  fs.writeFileSync('./tmp/md-ast.json', JSON.stringify(markdownAST, null, 2))
-
   return markdownAST
 }

src/styles/_base.scss

@@ -18,7 +18,7 @@ body {
   font-family: var(--font-sans);
   line-height: 1.5;
   color: var(--color-light);
-  background: var(--color-dark);
+  background: var(--color-background);
   overscroll-behavior: none;
   scroll-behavior: smooth;
 
@@ -63,6 +63,7 @@ abbr {
 }
 
 article {
+  form,
   figure,
   table,
   blockquote,

src/styles/_variables.scss

@@ -83,6 +83,8 @@ $color-dark: #1f242e;
   --color-02: #f3f5fa;
   --color-01: #fafcff;
 
+  --color-background: var(--color-dark);
+
   --color-orange: #ffbf00;
   --color-orange-20: #{rgba(#ffbf00, 0.2)};
   --color-red: #ff0000;

src/styles/components/_input.scss

@@ -1,72 +1,74 @@
 [type='checkbox'] {
   display: none;
 
-  & + .task-list-item,
   & + span {
     position: relative;
-    user-select: none;
+    display: inline-flex;
+    align-items: center;
+
+    &::before,
+    &::after {
+      user-select: none;
+      cursor: pointer;
+    }
 
     &::before {
+      content: '';
       display: inline-block;
       width: var(--spacing-lg);
       height: var(--spacing-lg);
       margin-right: var(--spacing-sm);
-      border: 1px solid var(--color-gray-200);
-      border-radius: var(--border-radius);
-      content: '';
-      vertical-align: top;
+      border: 1px solid var(--color-08);
       transition: var(--transition-fast);
+      background: var(--color-background);
     }
 
     &::after {
+      content: '';
       display: none;
       position: absolute;
-      top: 4px;
+      top: 6px;
       left: 5px;
-      width: 14px;
-      height: 7px;
+      width: 15px;
+      height: 8px;
       transform: rotate(-45deg);
-      border-left: 2px solid var(--color-white);
-      border-bottom: 2px solid var(--color-white);
-      content: '';
+      border-left: 2px solid var(--color-08);
+      border-bottom: 2px solid var(--color-08);
     }
   }
 
   &:checked + span {
     &::before {
-      background: var(--jobportal-color-primary);
-      border-color: var(--jobportal-color-primary);
+      background: var(--color-primary);
+      border-color: var(--color-primary);
     }
 
     &::after {
       display: block;
     }
   }
-}
 
-.task-list-item {
-  &::before {
-    display: inline-block;
-    width: var(--spacing-lg);
-    height: var(--spacing-lg);
-    margin-left: negative(var(--spacing-sm));
-    border: 1px solid var(--color-08);
-    border-radius: var(--border-radius);
-    content: '';
-    vertical-align: top;
-    transition: var(--transition-fast);
-  }
+  &:disabled {
+    + span {
+      &::before,
+      &::after {
+        cursor: not-allowed;
+      }
+
+      &::before {
+        border-color: var(--color-09);
+      }
+    }
 
-  &::after {
-    display: none;
-    position: absolute;
-    top: 4px;
-    left: 5px;
-    width: 14px;
-    height: 7px;
-    transform: rotate(-45deg);
-    border-left: 2px solid var(--color-white);
-    border-bottom: 2px solid var(--color-white);
-    content: '';
+    &:checked + span {
+      &::before {
+        background: var(--color-09);
+        border-color: var(--color-09);
+      }
+    }
   }
 }
+
+.task-list-item {
+  padding-left: 0;
+}