From 4558104196834963cea5748e4bed1750fbc4f6e2 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 10 Jan 2023 16:17:08 +0100
Subject: Properly center the checkbox checkmark

Using a flexbox we can easily center the checkmark without using hard
coded positions.
---
 app/styles/input.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index eaf083c..dc345aa 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -86,6 +86,9 @@ option {
  * Checkboxes
  */
 input[type=checkbox] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   background-color: white;
   background-image: unset;
   border: 1px solid dimgrey;
@@ -104,14 +107,11 @@ input[type=checkbox]:checked {
 input[type=checkbox]:checked::after {
   content: "";
   display: block; /* width & height doesn't work on inline elements */
-  position: relative;
-  top: 0;
-  left: 3px;
   width: 3px;
   height: 7px;
   border: 1px solid white;
   border-width: 0 2px 2px 0;
-  transform: rotate(40deg);
+  transform: rotate(40deg) translateY(-1px);
 }
 
 /*
-- 
cgit v1.2.1