From 4bd266521a0d3246142f2653b5462b66065bbd70 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Thu, 7 Apr 2016 12:23:12 -0700
Subject: [PATCH] Apply button hover effect on focus as well

// FREEBIE
---
 stylesheets/_variables.scss | 4 ++--
 stylesheets/manifest.css    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 8729fb95c322..875ea687d16a 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -49,13 +49,13 @@ $border-radius: 5px;
 }
 @mixin header-icon-white($svg) {
   @include color-svg($svg, rgba(255,255,255, 0.8));
-  &:hover {
+  &:focus, &:hover {
     @include color-svg($svg, white);
   }
 }
 @mixin header-icon-black($svg) {
   @include color-svg($svg, rgba(0,0,0, 0.5));
-  &:hover {
+  &:focus, &:hover {
     @include color-svg($svg, black);
   }
 }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 26f2a6a88293..841ca568e45d 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -70,7 +70,7 @@ a {
   -webkit-mask: url("/images/back.svg") no-repeat center;
   -webkit-mask-size: 100%;
   background-color: rgba(0, 0, 0, 0.5); }
-  .inactive button.back:hover {
+  .inactive button.back:focus, .inactive button.back:hover {
     -webkit-mask: url("/images/back.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: black; }
@@ -79,7 +79,7 @@ button.back {
   -webkit-mask: url("/images/back.svg") no-repeat center;
   -webkit-mask-size: 100%;
   background-color: rgba(255, 255, 255, 0.8); }
-  button.back:hover {
+  button.back:focus, button.back:hover {
     -webkit-mask: url("/images/back.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: white; }
@@ -108,7 +108,7 @@ button.back {
   -webkit-mask: url("/images/menu.svg") no-repeat center;
   -webkit-mask-size: 100%;
   background-color: rgba(0, 0, 0, 0.5); }
-  .inactive .menu .hamburger:hover {
+  .inactive .menu .hamburger:focus, .inactive .menu .hamburger:hover {
     -webkit-mask: url("/images/menu.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: black; }
@@ -123,7 +123,7 @@ button.back {
     -webkit-mask: url("/images/menu.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: rgba(255, 255, 255, 0.8); }
-    .menu .hamburger:hover {
+    .menu .hamburger:focus, .menu .hamburger:hover {
       -webkit-mask: url("/images/menu.svg") no-repeat center;
       -webkit-mask-size: 100%;
       background-color: white; }