For named breakpoints <= -breakpoint, add print to the media types

diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index 3e5a898273d152abc7ddc9db170cd8ac9fa2a7ca..8d93b5e61989c08520239b8db36acd7900703f8f 100644 (file)
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -18,8 +18,14 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
+/// The largest named breakpoint in which to include print as a media type
+/// @type Keyword
+$print-breakpoint: large !default;
+
 $-zf-zero-breakpoint: small !default;
 
+$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
+
 @if nth(map-values($breakpoints), 1) != 0 {
   @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
 }
@@ -137,6 +143,8 @@ $breakpoint-classes: (small medium large) !default;
 /// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
 @mixin breakpoint($value) {
   $str: breakpoint($value);
+  $bp: index($-zf-breakpoints-keys, $value);
+  $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
 
   // If $str is still an empty string, no media query is needed
   @if $str == '' {
@@ -145,8 +153,16 @@ $breakpoint-classes: (small medium large) !default;
 
   // Otherwise, wrap the content in a media query
   @else {
-    @media screen and #{$str} {
-      @content;
+    // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
+    @if $bp != null and $bp <= $pbp {
+      @media print, screen and #{$str} {
+        @content;
+       }
+    }
+    @else {
+      @media screen and #{$str} {
+        @content;
+      }
     }
   }
 }

diff --git a/scss/util/_value.scss b/scss/util/_value.scss
index 54e562b03794b64023b2fb4c5893305aeaaff547..df0e9b1509184e1ce3790bcf614340982f1ba902 100644 (file)
--- a/scss/util/_value.scss
+++ b/scss/util/_value.scss
@@ -105,3 +105,34 @@
   }
   @return $map;
 }
+
+/// Casts a map into a list.
+/// @link http://hugogiraudel.com/2014/04/28/casting-map-into-list/
+///
+/// @param {Map} $map - Map to pull a value from.
+///
+/// @returns {List} Depending on the flag, returns either $keys or $values or both.
+@function map-to-list($map, $keep: 'both') {
+  $keep: if(index('keys' 'values', $keep), $keep, 'both');
+
+  @if type-of($map) == 'map' {
+    $keys: ();
+    $values: ();
+
+    @each $key, $val in $map {
+      $keys: append($keys, $key);
+      $values: append($values, $val);
+    }
+
+    @if $keep == 'keys' {
+      @return $keys;
+    } @else if $keep == 'values' {
+      @return $values;
+    } @else {
+      @return zip($keys, $values);
+    }
+  }
+
+  @return if(type-of($map) != 'list', ($value,), $map);
+
+}