commit 85358ed1b6d725a2090e82d82757fbd3d7dbc706
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Mon May 18 10:05:36 2020 -0700
committer Gunnar Mills <gmills@us.ibm.com> Thu May 21 13:34:35 2020 +0000
tree 0e88a1e4c812bf21ebce3877741106338a060035
parent ce9a3ef3036923cb4c0f28240c8bb37a6b4540fc

Remove focus outline from navigation items

Removing outline from app navigation to allow for custom
Bootstrap box-shadow focus styles. Explicitly set outline
property to none to override default user agent styles.
Needed to apply to <li> and <a> (nav-item and nav-link).

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Iaf70215c68b91fd03f595487a30e93e024c12a1d

src/components/AppNavigation/AppNavigation.vue

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 5196099..2081609 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -165,8 +165,13 @@
   padding-left: 0;
   margin-left: 0;
 
+  .nav-item {
+    outline: none;
+  }
+
   .nav-link {
     padding-left: $spacer * 4;
+    outline: none;
 
     &:not(.nav-link--current) {
       font-weight: normal;