Merge branch 'make-all-the-sprites'

mozilla · May 7, 2012 · 4edb75e · 4edb75e
2 parents 47a43b3 + 42230c4
commit 4edb75e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 17 deletions.
diff --git a/media/img/sprites.png b/media/img/sprites.png
diff --git a/media/socialshare.min.css b/media/socialshare.min.css
diff --git a/src/img/sprites.png b/src/img/sprites.png
diff --git a/src/style.less b/src/style.less
@@ -8,22 +8,21 @@
 
 @font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
 
-@heart-non-active: url('img/heart.png');
+@sprites: url('img/sprites.png') no-repeat top left;
 
-@heart-active: url('img/heart-hover.png');
-
-@caret-non-active: url('img/caret.png');
-
-@caret-active: url('img/caret-open.png');
+.sprite-caret-open { background-position: 0 0; width: 9px; height: 7px; } 
+.sprite-caret { background-position: 0 -12px; width: 9px; height: 7px; } 
+.sprite-heart-hover { background-position: 0 -24px; width: 11px; height: 10px; } 
+.sprite-heart { background-position: 0 -39px; width: 11px; height: 10px; } 
 
 .share-active-state {
     color: @active-colour;
     .heart {
-        background-image: @heart-active;
+        .sprite-heart-hover;
     }
     .caret {
         div {
-            background-image: @caret-active;
+            .sprite-caret-open;
         }
     }
     .text{
@@ -56,21 +55,17 @@
             .rounded(3px);
             .box-shadow(~'0 0 .25px rgba(0, 0, 0, 0.3)', ~'inset 0 -2px rgba(0, 0, 0, 0.1)');
             div {
-                width: 9px;
-                height: 7px;
                 margin: 5px auto 0;
-                background: no-repeat center;
-                background-image: @caret-non-active;
+                background: @sprites;
+                .sprite-caret;
             }
         }
 
         .heart {
             margin: 9px 5px 0 0;
             float: left;
-            background: no-repeat center;
-            background-image: @heart-non-active;
-            width: 12px;
-            height: 10px;
+            background: @sprites;
+            .sprite-heart;
         }
 
         .text {