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.

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index dd080731a3b3073dc1af27c6482ce58e16198ea7..871b67271e4cdc3b231cbea9eb9680fcb0422a2f 100644 (file)
--- 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) {