From: Mark Otto Date: Sun, 17 Mar 2013 00:19:05 +0000 (-0700) Subject: convert to preboot's retina mixin X-Git-Tag: v3.0.0-rc1~574 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ef4898990ffd2d35d0e27b2e93b931a1f78e8ee7;p=thirdparty%2Fbootstrap.git convert to preboot's retina mixin --- diff --git a/less/mixins.less b/less/mixins.less index 3207c82ec9..a5c02d5fd7 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; + } }