Overhaul responsive visibility classes

Thanks to @glebm for help refactoring this to use the breakpoint mixins.

diff --git a/scss/_utilities-responsive.scss b/scss/_utilities-responsive.scss
index a25ec018ebf4f95c27ae5d4916ac074caf41d43a..837cda7b9a5ea944547de83cedde88ad2aaf598e 100644 (file)
--- a/scss/_utilities-responsive.scss
+++ b/scss/_utilities-responsive.scss
@@ -2,6 +2,19 @@
 // Responsive: Utility classes
 // --------------------------------------------------
 
+@each $bp in map-keys($grid-breakpoints) {
+  .hidden-#{$bp}-up {
+    @include media-breakpoint-up($bp) {
+      display: none !important;
+    }
+  }
+  .hidden-#{$bp}-down {
+    @include media-breakpoint-down($bp) {
+      display: none !important;
+    }
+  }
+}
+
 
 // IE10 in Windows (Phone) 8
 //
@@ -23,98 +36,6 @@
 }
 
 
-.visible-xs-block,
-.visible-xs-inline,
-.visible-xs-inline-block,
-.visible-sm-block,
-.visible-sm-inline,
-.visible-sm-inline-block,
-.visible-md-block,
-.visible-md-inline,
-.visible-md-inline-block,
-.visible-lg-block,
-.visible-lg-inline,
-.visible-lg-inline-block {
-  display: none !important;
-}
-
-.visible-xs-block {
-  @include media-breakpoint-down(xs) {
-    display: block !important;
-  }
-}
-.visible-xs-inline {
-  @include media-breakpoint-down(xs) {
-    display: inline !important;
-  }
-}
-.visible-xs-inline-block {
-  @include media-breakpoint-down(xs) {
-    display: inline-block !important;
-  }
-}
-
-.visible-sm-block {
-  @include media-breakpoint-only(sm) {
-    display: block !important;
-  }
-}
-.visible-sm-inline {
-  @include media-breakpoint-only(sm) {
-    display: inline !important;
-  }
-}
-.visible-sm-inline-block {
-  @include media-breakpoint-only(sm) {
-    display: inline-block !important;
-  }
-}
-
-.visible-md-block {
-  @include media-breakpoint-only(md) {
-    display: block !important;
-  }
-}
-.visible-md-inline {
-  @include media-breakpoint-only(md) {
-    display: inline !important;
-  }
-}
-.visible-md-inline-block {
-  @include media-breakpoint-only(md) {
-    display: inline-block !important;
-  }
-}
-
-.visible-lg-block {
-  @include media-breakpoint-up(lg) {
-    display: block !important;
-  }
-}
-.visible-lg-inline {
-  @include media-breakpoint-up(lg) {
-    display: inline !important;
-  }
-}
-.visible-lg-inline-block {
-  @include media-breakpoint-up(lg) {
-    display: inline-block !important;
-  }
-}
-
-@include media-breakpoint-only(sm) {
-  @include responsive-invisibility(".hidden-sm");
-}
-
-@include media-breakpoint-only(md) {
-  @include responsive-invisibility(".hidden-md");
-}
-
-@include media-breakpoint-up(lg) {
-  @include responsive-invisibility(".hidden-lg");
-}
-
-
 // Print utilities
 //
 // Media queries are placed on the inside to be mixin-friendly.