From 8f3b07f28e4c75fc019344666d95a88c06fc25f9 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 6 Dec 2020 15:44:26 +0100
Subject: [PATCH] Header: Use custom focus styling

The current focus outline is using a rectangle, while the input is rounded, which looks very ugly. This commit uses a `box-shadow` instead of the regular `outline` to solve this issue.
---
 app/components/header.module.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/components/header.module.css b/app/components/header.module.css
index 3c5cd239363..a4be591e06b 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -58,6 +58,12 @@ input.search {
     background-size: 14px 15px;
     border-radius: 15px;
     box-shadow: none;
+    transition: box-shadow 150ms;
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 4px var(--yellow);
+    }
 }
 
 .mobile-search {