From 5782ad49d9d3ac01c5c4a11b2ce97f0db8f8cfc8 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 7 Aug 2017 11:40:17 +0100
Subject: [PATCH] Make focus state of switch service align nicely
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There is padding on the switch service link so that:
- it lines up with the service name
- it has a bigger hit area (because Fitt’s law[1])

This means that visually, the default focus state overlaps the blue
bar under the GOV.UK banner. So it needs a bit of custom CSS to make it
look right visually.
---
 app/assets/stylesheets/components/navigation.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index 6f1ce23b6..02dc7970b 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -15,12 +15,22 @@
     }
 
     &-switch {
+
       @include core-16;
       text-align: right;
       position: absolute;
       top: 0;
       right: 0;
       padding: 13px 0 9px 15px;
+
+      &:focus {
+        outline: none;
+        border-bottom: 4px solid $yellow;
+        border-left: 10px solid $yellow;
+        border-right: 3px solid $yellow;
+        right: -3px;
+      }
+
     }
 
   }