Added retina image support mixin

1 files changed, 26 insertions, 0 deletions

diff --git a/less/mixins.less b/less/mixins.less
index ad1597121..b2116ce56 100644
--- 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
 // --------------------------------------------------