changeset 83:343d79b20dd5

Fix header-icon positioning in Firefox/Opera To accommodate lack of support for background-position-x/y.
author dellsystem <ilostwaldo@gmail.com>
date Fri, 24 Aug 2012 17:22:27 -0400
parents 6da61f3f83fe
children cf741f0c5255
files static/css/agora.less static/css/variables.less
diffstat 2 files changed, 14 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/static/css/agora.less
+++ b/static/css/agora.less
@@ -55,7 +55,6 @@
                 font-size: 1.1em;
 
                 &:hover {
-                    background-position-y: -60px;
                     text-decoration: none;
                     color: @darkerGrey;
                 }
@@ -67,20 +66,29 @@
             }
         }
 
+        // Because Firefox/Opera don't do background-position-x/y
+        .header-icon(@xPosition) {
+            background-position: @xPosition 0px;
+
+            &:hover {
+                background-position: @xPosition @headerIconHoverY;
+            }
+        }
+
         .code {
-            background-position-x: -62px;
+            .header-icon(-62px);
         }
 
         .discuss {
-            background-position-x: -125px;
+            .header-icon(-125px);
         }
 
         .help {
-            background-position-x: -209px;
+            .header-icon(-209px);
         }
 
         .about {
-            background-position-x: 12px;
+            .header-icon(12px);
         }
 
         .login {
--- a/static/css/variables.less
+++ b/static/css/variables.less
@@ -20,3 +20,4 @@
 // Dimensions and positioning
 @fixedWidth:        960px;
 @headerHeight:      100px;
+@headerIconHoverY:  -60px;