From f3212070361efdae63f2f823b0544d06f75df3c1 Mon Sep 17 00:00:00 2001
From: michael-wilson <michael.wilson@nottingham.ac.uk>
Date: Sat, 21 Nov 2015 00:13:51 +0000
Subject: [PATCH] Update _visibility.scss

If you use every breakpoint in $breakpoint-classes, the last one will break, because it's impossible to have an "only" range for the highest one. As in, you can't do "xxlarge-only" because there's no upper bound past xxlarge. So the -only classes need to account for this by not printing any CSS.

When printing "small only", the loop should check if the lower bound is 0, and if it is, don't subtract the (1/16)rem, just keep it at 0.
---
 scss/components/_visibility.scss | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index dd080731a3..871b67271e 100644
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -16,14 +16,30 @@
 /// Hide an element by default, only displaying it within a certain breakpoint.
 /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
 @mixin show-for-only($size) {
-  $lower-bound: -zf-bp-to-em(map-get($breakpoints, $size)) - (1/16);
-  $upper-bound: -zf-bp-to-em(-zf-map-next($breakpoints, $size));
+  $lower-bound-size: map-get($breakpoints, $size);
+  $upper-bound-size: -zf-map-next($breakpoints, $size);
+
+  // more often than not this will be correct, just one time round the loop it won't so set in scope here
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
+  // test actual lower-bound-size, if 0 set it to 0em
+  @if $lower-bound-size == 0 {
+    $lower-bound: -zf-bp-to-em($lower-bound-size);
+  }
 
-  @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
-    display: none !important;
+  @if $upper-bound-size == null {
+    @media screen and (max-width: $lower-bound) {
+      display: none !important;
+    }
+  }
+  @else {
+    $upper-bound: -zf-bp-to-em($upper-bound-size);
+    @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
+      display: none !important;
+    }
   }
 }
 
+
 /// Show an element by default, and hide it above a certain screen size.
 /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
 @mixin hide-for($size) {