fix: more focus style fixes for small devices (#1532)

nolanlawson · Sep 25, 2019 · b8b6556 · b8b6556
1 parent 6552410
commit b8b6556
Showing 1 changed file with 29 additions and 28 deletions.
diff --git 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;
   }
 }