Fix checkmark disappearing when scrolling (#520)

varianter · Aug 29, 2024 · d63c1c4 · d63c1c4
1 parent 16562c1
commit d63c1c4
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 19 deletions.
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -156,4 +156,100 @@
     font-family: "Graphik-Regular", sans-serif;
     line-height: 2.5rem;
   }
+
+  .checkBoxWithCustomCheckmark {
+    /* 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;
+  }
+
+  .checkBoxWithCustomCheckmark {
+    appearance: none;
+    display: grid;
+    place-content: center;
+  }
+
+  /*Here an svg has been converted to a clip-path, which is why that field is so long*/
+  .checkBoxWithCustomCheckmark::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
+    );
+  }
+
+  .checkBoxWithCustomCheckmark:checked {
+    background-color: #423d89;
+  }
+
+  .checkBoxWithCustomCheckmark: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={`checkBoxWithCustomCheckmark 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 ${