_hidpi.scss

/**
 * HiDPI mixin
 * =================================
 *
 *  @include ko-hidpi { ... };
 *  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
 */
@mixin ko-hidpi($ratio: 1.25) {
	@media print,
		(-webkit-min-device-pixel-ratio: $ratio),
		(min-resolution: #{$ratio}dppx),
		(min-resolution: #{$ratio*96}dpi) {
		@content;
	}
}


/**
 * Hidpi with a minimum width media query
 * @include ko-hidpi-min(bp(mid), 1.5) { ... };
 */
@mixin ko-hidpi-min($width, $ratio: 1.25) {
	$width-em: ko-em(ko-strip-units(ko-bp($width)), $mq-base);

	@media print,
		screen and (min-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
		screen and (min-width: $width-em) and (min-resolution: #{$ratio}dppx),
		screen and (min-width: $width-em) and (min-resolution: #{$ratio*96}dpi) {
		@content;
	}
}


/**
 * Hidpi with a max width media query
 * @include ko-hidpi-max(bp(mid), 1.3) { ... };
 */
@mixin ko-hidpi-max($width, $ratio: 1.25) {
	$width-em: ko-em(ko-strip-units(ko-bp($width)), $mq-base);

	@media print,
		screen and (max-width: $width-em) and (-webkit-min-device-pixel-ratio: $ratio),
		screen and (max-width: $width-em) and (min-resolution: #{$ratio}dppx),
		screen and (max-width: $width-em) and (min-resolution: #{$ratio*96}dpi) {
		@content;
	}
}