improve checkbox icon

dldevinc · May 25, 2024 · eb6fb1d · eb6fb1d
1 parent 3bd40f2
commit eb6fb1d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ The `paper-checkbox-tree` library transforms a standard HTML `<select multiple>`
 into an interactive tree of checkboxes. This is particularly useful for forms requiring 
 a hierarchical structure of selectable options.
 
-![image](https://github.com/dldevinc/paper-checkbox-tree/assets/6928240/9aef1bd2-8717-4322-abde-2c41e301107b)
+![image](https://github.com/dldevinc/paper-checkbox-tree/assets/6928240/16ccaa19-9081-4c28-a010-f5d56fbfebb1)
 
 [Demo](https://dldevinc.github.io/paper-checkbox-tree/)
 

diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paper-checkbox-tree@latest/dist/style.css">
-  <script src="https://cdn.jsdelivr.net/npm/paper-checkbox-tree@latest/dist/umd.js" defer></script>
+  <link rel="stylesheet" href="../dist/style.css">
+  <script src="../dist/umd.js" defer></script>
 
   <style>
     body {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-checkbox-tree",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A JavaScript component that transforms a select element into a checkbox tree.",
   "keywords": [
     "widgets",

diff --git a/src/index.js b/src/index.js
@@ -257,10 +257,10 @@ export default class CheckboxTree {
      */
     buildCheckboxIcon() {
         return `
-            <svg class="pct-checkbox" width="22" height="22" stroke-width="2">
-              <rect class="pct-checkbox__box" x="1" y="1" width="20" height="20" rx="4"></rect>
-              <path class="pct-checkbox__marker" d="M4,13 8,17 18,6" fill="none"></path>
-              <path class="pct-checkbox__line" d="M5,11 17,11" fill="none"></path>
+            <svg class="pct-checkbox" width="22" height="22" fill="none">
+              <rect class="pct-checkbox__box"></rect>
+              <path class="pct-checkbox__marker" d="M4,13 8,17 18,6"></path>
+              <path class="pct-checkbox__line" d="M5,11 17,11"></path>
             </svg>
         `;
     }

diff --git a/src/index.pcss b/src/index.pcss
@@ -2,7 +2,52 @@ $scrollbar-track-color: hsl(0 0% 95%);
 $scrollbar-thumb-color: hsl(200 100% 55%);
 $outline-color: hsl(200 100% 55%);
 $checkbox-background: hsl(200 100% 45%);
-$checkbox-border-color: #4f4f4f;
+$checkbox-border-color: #d0d0d0;
+
+
+.pct-checkbox {
+  margin-top: max(0px, (1lh - 22px) / 2);
+  flex: none;
+
+  &__box {
+    x: 0.5;
+    y: 0.5;
+    rx: 4;
+    width: 21;
+    height: 21;
+    fill: #fff;
+    stroke: $checkbox-border-color;
+    stroke-width: 1;
+    transition: fill 0.15s, stroke 0.15s;
+  }
+
+  &__marker,
+  &__line {
+    opacity: 0;
+    stroke: #ffffff;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: opacity 0.2s;
+  }
+
+  &--checked &__box,
+  &--partial &__box {
+    fill: $checkbox-background;
+    stroke: $checkbox-background;
+  }
+
+  &--disabled &__box {
+    fill: #f8f8f8;
+    stroke: #d6d6d6;
+  }
+
+  &--partial &__line,
+  &--checked &__marker {
+    opacity: 1;
+  }
+}
+
 
 .pct-tree {
   contain: layout;
@@ -69,6 +114,10 @@ $checkbox-border-color: #4f4f4f;
     outline-offset: 3px;
     outline-color: $outline-color;
     cursor: pointer;
+
+    &:active .pct-checkbox .pct-checkbox__box {
+      stroke: $outline-color;
+    }
   }
 
   &__text {
@@ -95,46 +144,13 @@ $checkbox-border-color: #4f4f4f;
   &__input {
     position: absolute;
     left: -100vw;
+
+    &:active:not(:checked) + .pct-checkbox .pct-checkbox__box {
+      stroke: $outline-color;
+    }
   }
 
   &__text {
     align-self: center;
   }
 }
-
-
-.pct-checkbox {
-  margin-top: max(0px, (1lh - 22px) / 2);
-  flex: none;
-
-  &__box {
-    fill: #fff;
-    stroke: $checkbox-border-color;
-    transition: fill 0.1s, stroke 0.1s;
-  }
-
-  &__marker,
-  &__line {
-    opacity: 0;
-    stroke: #ffffff;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    transition: opacity 0.2s;
-  }
-
-  &--checked &__box,
-  &--partial &__box {
-    fill: $checkbox-background;
-    stroke: $checkbox-background;
-  }
-
-  &--disabled &__box {
-    fill: #f8f8f8;
-    stroke: #d6d6d6;
-  }
-
-  &--partial &__line,
-  &--checked &__marker {
-    opacity: 1;
-  }
-}