From 00d878ef3300f7cd97320c672304b4990a03f038 Mon Sep 17 00:00:00 2001
From: Evan Sosenko <razorx@evansosenko.com>
Date: Thu, 9 Apr 2015 15:29:25 -0700
Subject: [PATCH] Add retina media query to scss.

---
 doc/pages/media-queries.html            | 9 +++++++++
 scss/foundation/_settings.scss          | 9 +++++++++
 scss/foundation/components/_global.scss | 9 +++++++++
 3 files changed, 27 insertions(+)

diff --git a/doc/pages/media-queries.html b/doc/pages/media-queries.html
index 82aa4580f..9ea39eff5 100644
--- a/doc/pages/media-queries.html
+++ b/doc/pages/media-queries.html
@@ -75,6 +75,15 @@ $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max
 
 $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
 $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
+
+$retina: (
+  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+  "#{$screen} and (min-device-pixel-ratio: 2)",
+  "#{$screen} and (min-resolution: 192dpi)",
+  "#{$screen} and (min-resolution: 2dppx)"
+);
 ```
 
 <h3>Style With Sass</h3>
diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 200b175c0..915f1ccb8 100644
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -94,6 +94,15 @@
 // $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
 // $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
 
+// $retina: (
+//  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+//  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+//  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+//  "#{$screen} and (min-device-pixel-ratio: 2)",
+//  "#{$screen} and (min-resolution: 192dpi)",
+//  "#{$screen} and (min-resolution: 2dppx)"
+// );
+
 // Legacy
 // $small: $medium-up;
 // $medium: $medium-up;
diff --git a/scss/foundation/components/_global.scss b/scss/foundation/components/_global.scss
index ebbe448d2..7fa5ccd89 100644
--- a/scss/foundation/components/_global.scss
+++ b/scss/foundation/components/_global.scss
@@ -241,6 +241,15 @@ $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max
 $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
 $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
 
+$retina: (
+  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+  "#{$screen} and (min-device-pixel-ratio: 2)",
+  "#{$screen} and (min-resolution: 192dpi)",
+  "#{$screen} and (min-resolution: 2dppx)"
+);
+
 // Legacy
 $small: $medium-up;
 $medium: $medium-up;
-- 
2.47.2