fix :active state and bigger click target for back button (bug 789984)

mozilla · Sep 18, 2012 · c219890 · c219890
1 parent 622c878
commit c219890
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -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>