From 4e449235b20afe32f6a9b012969834195b943fd2 Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Fri, 13 Dec 2019 18:41:27 +0000
Subject: [PATCH] Add custom checkbox focus style

---
 src/styles/_base.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index df5e3ad..7a65b62 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -34,11 +34,17 @@ ul {
 input[type="checkbox"] {
   appearance: none;
   border: 0; // Remove the unchecked checkbox outline in Safari on iOS
+  border-radius: 4px; // Round the focus box-shadow
   cursor: pointer;
   margin-right: 3px;
   position: relative;
   vertical-align: top;
 
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
+  }
+
   &::before {
     border: 2px solid var(--color-primary);
     border-radius: 4px;