From b8b6556a1496376c76066abfaf888a1bc2137e3b Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 24 Sep 2019 18:46:58 -0700
Subject: [PATCH] fix: more focus style fixes for small devices (#1532)

---
 src/scss/focus.scss | 57 +++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/scss/focus.scss b/src/scss/focus.scss
index b32e569d4..6df949f96 100644
--- a/src/scss/focus.scss
+++ b/src/scss/focus.scss
@@ -20,21 +20,21 @@
 /* Another hack to make some focus styles appear better */
 .focus-after {
   position: relative;
-}
 
-.focus-after:focus {
-  outline: none;
-}
+  &:focus {
+    outline: none;
+  }
 
-.focus-after:focus::after {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  content: '';
-  border: var(--focus-width) solid var(--focus-outline);
-  pointer-events: none;
+  &:focus::after {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    content: '';
+    border: var(--focus-width) solid var(--focus-outline);
+    pointer-events: none;
+  }
 }
 
 // For KaiOS, do some additional things to improve the focus styles, which don't show up well
@@ -52,23 +52,24 @@
     opacity: 0.8;
   }
 
-  button, .button {
+  // add extremely visible styles for buttons, ala .focus-after
+  button, .button, a.main-nav-link {
     position: relative;
-  }
 
-  // add extremely visible styles for buttons, ala .focus-after
-  button:focus, .button:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
+
+    &:focus::after {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      content: '';
+      border: var(--focus-width) solid var(--focus-outline);
+      pointer-events: none;
+    }
 
-  button:focus::after, .button:focus::after {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    content: '';
-    border: var(--focus-width) solid var(--focus-outline);
-    pointer-events: none;
   }
 }