Clean up :focus treatment of menu buttons. #20

azavea · Jan 11, 2018 · 121e69e · 121e69e
1 parent 3c2ee76
commit 121e69e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/src/sass/02_tools/_mixins.scss b/src/sass/02_tools/_mixins.scss
@@ -11,6 +11,7 @@
     padding: 0;
     vertical-align: middle;
     white-space: normal;
+    border-radius: 0;
     background: none;
     line-height: 1;
     appearance: none;

diff --git a/src/sass/06_components/_additional-actions.scss b/src/sass/06_components/_additional-actions.scss
@@ -11,13 +11,18 @@
         display: block;
         align-self: stretch;
         width: $pwdub-app-switcher-gutter;
+        outline: 0;
         cursor: pointer;
 
         > .icon {
             width: 24px;
             height: 18px;
         }
 
+        &:focus > .icon {
+            outline: rgba($pwdub-v-lt-gray, .6) dotted 1px;
+        }
+
         &:hover {
             background-color: $pwdub-action-hover-background-color;
         }

diff --git a/src/sass/06_components/_app-switcher.scss b/src/sass/06_components/_app-switcher.scss
@@ -25,6 +25,7 @@
         width: $pwdub-app-switcher-gutter;
         margin-right: 8px;
         cursor: pointer;
+        outline: 0;
         z-index: 11;
 
         > .icon {
@@ -36,6 +37,10 @@
             }
         }
 
+        &:focus > .icon {
+            outline: rgba($pwdub-v-lt-gray, .6) dotted 1px;
+        }
+
         &:hover {
             background-color: $pwdub-action-hover-background-color;
         }