Expando: Use sprites for new expando icons

Author: Matt Lee

r2/Makefile

@@ -86,8 +86,8 @@ clean_ini:
 	rm $(INIFILES)
 
 #################### CSS file lists
-SPRITED_STYLESHEETS += reddit.less compact.css modtools.less
-LESS_STYLESHEETS := wiki.less adminbar.less policies.less reddit-embed.less expando.less
+SPRITED_STYLESHEETS += reddit.less compact.css modtools.less expando.less
+LESS_STYLESHEETS := wiki.less adminbar.less policies.less reddit-embed.less
 OTHER_STYLESHEETS := mobile.css highlight.css
 
 #################### Static Files

r2/r2/public/static/css/expando.less

@@ -1,50 +1,43 @@
-
-// copied from mixins.less
-.hdpi-bg-image(@1x; @2x; @2x-bg-size: 100%; @bg-repeat: no-repeat) {
-    background-image: @1x;
-    background-repeat: @bg-repeat;
-
-    @media
-    only screen and (min-resolution: 2dppx),
-    only screen and (-webkit-min-device-pixel-ratio: 2) {
-        background-image: @2x;
-        background-size: @2x-bg-size;
-    }
-}
-
 .thing .entry .expando-button {
     background-color: transparent;
     cursor: pointer;
     height: 20px;
     margin: 4px 8px 4px 0;
-    transition: background-image 0.1s;
     width: 20px;
 
-    &, &:hover {
-        background-position: 0 0;
-    }
-
     &.expanded {
-        .hdpi-bg-image(
-            @1x: url('../icon-contract.png'),
-            @2x: url('../icon-contract_2x.png'));
+        background-image: url('../icon-contract.png'); /* SPRITE */
     }
 
     &.expanded:hover {
-        .hdpi-bg-image(
-            @1x: url('../icon-contract-hover.png'),
-            @2x: url('../icon-contract-hover_2x.png'));
+        background-image: url('../icon-contract-hover.png'); /* SPRITE */
     }
 
     &.collapsed {
-        .hdpi-bg-image(
-            @1x: url('../icon-expand.png'),
-            @2x: url('../icon-expand_2x.png'));
+        background-image: url('../icon-expand.png'); /* SPRITE */
     }
 
     &.collapsed:hover {
-        .hdpi-bg-image(
-            @1x: url('../icon-expand-hover.png'),
-            @2x: url('../icon-expand-hover_2x.png'));
+        background-image: url('../icon-expand-hover.png'); /* SPRITE */
+    }
+
+    @media
+    only screen and (min-resolution: 2dppx),
+    only screen and (-webkit-min-device-pixel-ratio: 2) {
+        &.expanded {
+            background-image: url(../icon-contract_2x.png); /* SPRITE pixel-ratio=2 */
+        }
+
+        &.expanded:hover {
+            background-image: url(../icon-contract-hover_2x.png); /* SPRITE pixel-ratio=2 */
+        }
+
+        &.collapsed {
+            background-image: url(../icon-expand_2x.png); /* SPRITE pixel-ratio=2 */
+        }
+
+        &.collapsed:hover {
+            background-image: url(../icon-expand-hover_2x.png); /* SPRITE pixel-ratio=2 */
+        }
     }
 }