From c2198900548a395d99220a204b4db066bbbd8a34 Mon Sep 17 00:00:00 2001
From: Chris Van <cvan@mozilla.com>
Date: Mon, 17 Sep 2012 18:12:05 -0700
Subject: [PATCH] fix :active state and bigger click target for back button
 (bug 789984)

---
 media/css/mkt/header.less     | 27 ++++++++++++++++++---------
 mkt/templates/mkt/header.html |  2 +-
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/media/css/mkt/header.less b/media/css/mkt/header.less
index 4af2488d152..b0c8ba27fb4 100644
--- a/media/css/mkt/header.less
+++ b/media/css/mkt/header.less
@@ -67,9 +67,6 @@
     > section {
         position: relative;
     }
-    .pressed() {
-        background-image: -moz-linear-gradient(top, fade(#000, 0%), fade(#000, 25%) 25%, fade(#000, 25%) 75%, fade(#000, 0%) 100%);
-    }
 }
 
 .header-button {
@@ -129,18 +126,30 @@
         background-position: 0 -48px;
     }
     &.back {
-        width: 20px;
-        #site-header > .pressed;
+        width: 40px;
+        &:after {
+            right: 19px;
+            top: 0;
+        }
         &:before {
             background-position: 0 -72px;
             width: 12px;
             left: 4px;
         }
-        &:hover {
-            background-image: -moz-linear-gradient(top, fade(#000, 0%), fade(#000, 35%) 25%, fade(#000, 35%) 75%, fade(#000, 0%) 100%);
+        /* Gives us a big click target without being totally insane. */
+        b {
+            display: block;
+            height: 50px;
+            overflow: hidden;
+            width: 20px;
+        }
+        &:hover b {
+            background-image: -moz-linear-gradient(top, fade(#000, 0%), fade(#000, 25%) 25%, fade(#000, 25%) 75%, fade(#000, 0%) 100%);
+            background-image: -webkit-linear-gradient(top, fade(#000, 0%), fade(#000, 25%) 25%, fade(#000, 25%) 75%, fade(#000, 0%) 100%);
         }
-        &:focus {
-            .depressed;
+        &:active b {
+            background-image: -moz-linear-gradient(top, fade(#000, 0%), fade(#000, 35%) 25%, fade(#000, 35%) 75%, fade(#000, 0%) 100%);
+            background-image: -webkit-linear-gradient(top, fade(#000, 0%), fade(#000, 35%) 25%, fade(#000, 35%) 75%, fade(#000, 0%) 100%);
         }
     }
     &.home {
diff --git a/mkt/templates/mkt/header.html b/mkt/templates/mkt/header.html
index f69c52f607d..ab9f3a1d307 100644
--- a/mkt/templates/mkt/header.html
+++ b/mkt/templates/mkt/header.html
@@ -5,7 +5,7 @@ <h1><a href="{{ url('home') }}">{{ _('Firefox Marketplace') }}</a></h1>
     <nav role="navigation">
       <a href="{{ url('home') }}" class="header-button icon home left">{{ _('Home') }}</a>
       <a href="{{ url('account.settings') }}" class="header-button icon settings left">{{ _('Settings') }}</a>
-      <a href="#" id="nav-back" class="header-button icon back left">{{ _('Back') }}</a>
+      <a href="#" id="nav-back" class="header-button icon back left"><b>{{ _('Back') }}</b></a>
       <a href="#" class="header-button icon search right">{{ _('Search') }}</a>
       <a href="#" class="header-button icon cancel right">{{ _('Cancel') }}</a>
       <a href="#" class="header-button filter right">{{ _('Filter') }}</a>