Add retina media query to scss.

diff --git a/doc/pages/media-queries.html b/doc/pages/media-queries.html
index 82aa4580f1315b916bba90f6dd5abe317ac2a9df..9ea39eff5cf6fad01174681840d9ae5db5437763 100644 (file)
--- 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 200b175c0a67d172d20e1dea9797256e01e96a68..915f1ccb8da7839e68b13cbe2b5cded5ae37f1cf 100644 (file)
--- 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 ebbe448d2fe4ed27a5967ef5e4282143e55afc83..7fa5ccd89d2f8ecdb458a678748b0eeef1369b7d 100644 (file)
--- 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;