fix mobile cat icon color (bug 1067600)

mozilla · Sep 25, 2014 · f2e6caa · f2e6caa
1 parent 16a3509
commit f2e6caa
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/src/media/css/categories.styl b/src/media/css/categories.styl
@@ -66,7 +66,17 @@
     }
 }
 
+.desktop-cat-header {
+    display: none;
+}
+
 @media $at-least-desktop {
+    .mobile-cat-header {
+        display: none;
+    }
+    .desktop-cat-header {
+        display: block;
+    }
     .category-header {
         background: none;
         padding: 0;

diff --git a/src/media/css/category-icons.styl b/src/media/css/category-icons.styl
@@ -21,6 +21,16 @@ sprite-background-position($vertical-pos) {
     &.cur-cat:before {
         background-position: 0 $vertical-pos;
     }
+    &.mobile-cat-header:focus:before,
+    &.mobile-cat-header:hover:before,
+    &.mobile-cat-header:before {
+        background-position: 100% $vertical-pos;
+    }
+    &.desktop-cat-header:focus:before,
+    &.desktop-cat-header:hover:before,
+    &.desktop-cat-header:before {
+        background-position: 0 $vertical-pos;
+    }
 }
 
 .cat-icon,

diff --git a/src/templates/category.html b/src/templates/category.html
@@ -13,7 +13,12 @@
 
 <section class="main">
   <header class="category-header">
-    <h3 class="cat-{{ category }} cat-icon cur-cat" data-cat-slug="{{ category }}">
+    <h3 class="cat-{{ category }} cat-icon mobile-cat-header"
+        data-cat-slug="{{ category }}">
+      {{ category_name }}
+    </h3>
+    <h3 class="cat-{{ category }} cat-icon desktop-cat-header"
+        data-cat-slug="{{ category }}">
       {{ category_name }}
     </h3>
   </header>