Added retina image support mixin

diff --git a/less/mixins.less b/less/mixins.less
index ad1597121785c1644b484f2e38c61c1ae388a12e..b2116ce56906f82ff061c691c36c5bb1591ae01a 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -374,6 +374,32 @@
 }
 
 
+// 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;
+    }
+}
+
 
 // COMPONENT MIXINS
 // --------------------------------------------------