From 7779b7fb847a05640dad2177fcf7c3b6edcbf0d4 Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Thu, 27 Oct 2016 11:43:22 -0400 Subject: [PATCH] For named breakpoints <= -breakpoint, add print to the media types --- scss/util/_breakpoint.scss | 20 ++++++++++++++++++-- scss/util/_value.scss | 31 +++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 2 deletions(-) diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss index 3e5a89827..8d93b5e61 100644 --- 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 54e562b03..df0e9b150 100644 --- 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); + +} -- 2.47.2