New: Navigation arrows now remain visible when focused (#775)

box · Apr 19, 2018 · 6f4af87 · 6f4af87
1 parent 10d7cba
commit 6f4af87
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/lib/_navigation.scss b/src/lib/_navigation.scss
@@ -23,9 +23,22 @@ $navigationBtnWidth: 50px;
     white-space: nowrap;
     width: $navigationBtnWidth;
 
-    &:hover {
+    &:hover,
+    &:focus {
         opacity: 1;
     }
+
+    // Custom focus
+    &:focus {
+        box-shadow: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9);
+        height: 64px;
+        outline: 1px solid $downtown-grey;
+    }
+
+    &:active {
+        box-shadow: none;
+        outline: none;
+    }
 }
 
 .bp-is-navigation-visible .bp-navigate {