convert to preboot's retina mixin

1 files changed, 14 insertions, 21 deletions

diff --git a/less/mixins.less b/less/mixins.less
index 3207c82ec..a5c02d5fd 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -379,27 +379,20 @@
 // RETINA IMAGE SUPPORT
 // --------------------------------------------------
 
-// Retina background image support with non-retina fall back
-// Usage example can be found here: https://gist.github.com/dannykeane/4754113
-.retina-image(@file, @type, @repeat, @width, @height, @posx, @posy) {
-  background-image: url('@{file}.@{type}');
-  background-repeat: @repeat;
-  background-position: @posx @posy;
-
-  @media print,
-    screen,
-    (-webkit-min-device-pixel-ratio: 1.25),
-    (~`"-o-min-device-pixel-ratio: 1.25/1"`),
-    (min--moz-device-pixel-ratio: 1.25),
-    (-moz-min-device-pixel-ratio: 1.25),
-    (-ms-min-device-pixel-ratio: 1.25),
-    (min-device-pixel-ratio: 1.25),
-    (min-resolution: 120dpi),
-    (min-resolution: 1.25dppx) {
-      background-size: @width @height;
-      background-image: url('@{file}@2x.@{type}');
-      background-position: @posx * 2 @posy * 2;
-    }
+// Short retina mixin for setting background-image and -size
+.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
+  background-image: url("@{file-1x}");
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (   min--moz-device-pixel-ratio: 2),
+  only screen and (     -o-min-device-pixel-ratio: 2/1),
+  only screen and (        min-device-pixel-ratio: 2),
+  only screen and (                min-resolution: 192dpi),
+  only screen and (                min-resolution: 2dppx) {
+    background-image: url("@{file-2x}");
+    background-size: @width-1x @height-1x;
+  }
 }