Use css clippath instead of svg, so checkmark does not disappear when…

… scrolling
varianter · Aug 26, 2024 · 2e8228a · 2e8228a
1 parent 82ab89d
commit 2e8228a
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 19 deletions.
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -156,4 +156,99 @@
     font-family: "Graphik-Regular", sans-serif;
     line-height: 2.5rem;
   }
+
+  input[type="checkbox"] {
+    /* Add if not using autoprefixer */
+    -webkit-appearance: none;
+    appearance: none;
+    /* For iOS < 15 to remove gradient background */
+    background-color: #fff;
+    /* Not removed via appearance */
+    margin: 0;
+  }
+
+  input[type="checkbox"] {
+    appearance: none;
+    display: grid;
+    place-content: center;
+  }
+
+  input[type="checkbox"]::before {
+    content: "";
+    width: 12px;
+    height: 12px;
+    transform: scale(0);
+    box-shadow: inset 12px 12px #ffffff;
+    transform-origin: bottom left;
+    clip-path: polygon(
+      10.3536px 2.64645px,
+      10.3536px 2.64645px,
+      10.406304px 2.70842496px,
+      10.447296px 2.77622328px,
+      10.476576px 2.84838912px,
+      10.494144px 2.92346664px,
+      10.5px 3px,
+      10.494144px 3.07653336px,
+      10.476576px 3.15161088px,
+      10.447296px 3.22377672px,
+      10.406304px 3.29157504px,
+      10.3536px 3.35355px,
+      4.85355px 8.85355px,
+      4.85355px 8.85355px,
+      4.79157504px 8.9062729px,
+      4.72377672px 8.9472796px,
+      4.65161088px 8.9765701px,
+      4.57653336px 8.9941444px,
+      4.5px 9.0000025px,
+      4.42346664px 8.9941444px,
+      4.34838912px 8.9765701px,
+      4.27622328px 8.9472796px,
+      4.20842496px 8.9062729px,
+      4.14645px 8.85355px,
+      1.64645px 6.35355px,
+      1.64645px 6.35355px,
+      1.5937271px 6.29157504px,
+      1.5527204px 6.22377672px,
+      1.5234299px 6.15161088px,
+      1.5058556px 6.07653336px,
+      1.4999975px 6px,
+      1.5058556px 5.92346664px,
+      1.5234299px 5.84838912px,
+      1.5527204px 5.77622328px,
+      1.5937271px 5.70842496px,
+      1.64645px 5.64645px,
+      1.64645px 5.64645px,
+      1.70842496px 5.5937271px,
+      1.77622328px 5.5527204px,
+      1.84838912px 5.5234299px,
+      1.92346664px 5.5058556px,
+      2px 5.4999975px,
+      2.07653336px 5.5058556px,
+      2.15161088px 5.5234299px,
+      2.22377672px 5.5527204px,
+      2.29157504px 5.5937271px,
+      2.35355px 5.64645px,
+      4.5px 7.79289px,
+      9.64645px 2.64645px,
+      9.64645px 2.64645px,
+      9.70842528px 2.5937271px,
+      9.77622464px 2.5527204px,
+      9.84839236px 2.5234299px,
+      9.92347272px 2.5058556px,
+      10.00001px 2.4999975px,
+      10.07654848px 2.5058556px,
+      10.15163244px 2.5234299px,
+      10.22380616px 2.5527204px,
+      10.29161392px 2.5937271px,
+      10.3536px 2.64645px
+    );
+  }
+
+  input[type="checkbox"]:checked {
+    background-color: #423d89;
+  }
+
+  input[type="checkbox"]:checked::before {
+    transform: scale(1);
+  }
 }
diff --git a/frontend/src/components/Buttons/FilterButton.tsx b/frontend/src/components/Buttons/FilterButton.tsx
@@ -7,14 +7,14 @@ export default function FilterButton({
   rounded?: boolean;
 } & React.InputHTMLAttributes<HTMLInputElement>) {
   return (
-    <div className="flex items-center" onClick={inputProps.onClick}>
+    <div className="flex items-center gap-2" onClick={inputProps.onClick}>
       <input
         type="checkbox"
         aria-labelledby={label.replaceAll(/ /g, "-")}
         disabled={inputProps.disabled}
         readOnly
         {...inputProps}
-        className={`appearance-none border flex items-center border-opacity-50 m-[1px] mr-2 h-4 w-4  border-primary hover:border-primary checked:bg-primary
+        className={`border flex items-center border-opacity-50 m-[1px] mr-2 h-4 w-4  border-primary hover:border-primary
           
           ${
             inputProps.checked
@@ -27,23 +27,6 @@ export default function FilterButton({
           }
           `}
       />
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 12 12"
-        fill="none"
-        className={`absolute ml-[3px] pointer-events-none ${
-          !inputProps.checked && "hidden"
-        }`}
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M10.3536 2.64645C10.5488 2.84171 10.5488 3.15829 10.3536 3.35355L4.85355 8.85355C4.65829 9.04882 4.34171 9.04882 4.14645 8.85355L1.64645 6.35355C1.45118 6.15829 1.45118 5.84171 1.64645 5.64645C1.84171 5.45118 2.15829 5.45118 2.35355 5.64645L4.5 7.79289L9.64645 2.64645C9.84171 2.45118 10.1583 2.45118 10.3536 2.64645Z"
-          fill="white"
-        />
-      </svg>
       <label
         id={label.replaceAll(/ /g, "-")}
         className={`normal select-none ${