Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

  • Loading branch information...
commit c2198900548a395d99220a204b4db066bbbd8a34 1 parent 622c878
@cvan cvan authored
Showing with 19 additions and 10 deletions.
  1. +18 −9 media/css/mkt/header.less
  2. +1 −1  mkt/templates/mkt/header.html
View
27 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 {
View
2  mkt/templates/mkt/header.html
@@ -5,7 +5,7 @@
<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>
Please sign in to comment.
Something went wrong with that request. Please try again.