Drop the .hidden and .visible classes, save for the print ones

— Moves print display utils to display utils file
— Removes all other .hidden- utils
— Expands on .invisible and it's mixin to provide options for visibility: visible and visibility: hidden

diff --git a/scss/mixins/_visibility.scss b/scss/mixins/_visibility.scss
index 88c50b05d5ced1df322e324996e2d30928dba85b..f67fc1c529e88388d3db1eb87dc626fdda541448 100644 (file)
--- a/scss/mixins/_visibility.scss
+++ b/scss/mixins/_visibility.scss
@@ -1,5 +1,5 @@
 // Visibility
 
-@mixin invisible {
-  visibility: hidden !important;
+@mixin invisible($visibility) {
+  visibility: $visibility !important;
 }

diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index ae942a6fb97d71d4e274ecf3b7f79966a03d3eba..45353620ab457fc5aef5a3afbe990db1949dab90 100644 (file)
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -1,5 +1,5 @@
 //
-// Display utilities
+// Utilities for common `display` values
 //
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -16,3 +16,38 @@
     .d#{$infix}-inline-flex  { display: inline-flex !important; }
   }
 }
+
+
+//
+// Utilities for toggling `display` in print
+//
+
+.d-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+
+.d-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+
+.d-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}

diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss
index fcedc9cb91233651d010415efd14a23afab67306..823406dc3c74b6f53f1764b7e5c905b57bed27ba 100644 (file)
--- a/scss/utilities/_visibility.scss
+++ b/scss/utilities/_visibility.scss
@@ -2,54 +2,10 @@
 // Visibility utilities
 //
 
-.invisible {
-  @include invisible();
-}
-
-// Responsive visibility utilities
-
-@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;
-    }
-  }
+.visible {
+  @include invisible(visible);
 }
 
-
-// Print utilities
-//
-// Media queries are placed on the inside to be mixin-friendly.
-
-.visible-print-block {
-  display: none !important;
-
-  @media print {
-    display: block !important;
-  }
-}
-.visible-print-inline {
-  display: none !important;
-
-  @media print {
-    display: inline !important;
-  }
-}
-.visible-print-inline-block {
-  display: none !important;
-
-  @media print {
-    display: inline-block !important;
-  }
-}
-
-.hidden-print {
-  @media print {
-    display: none !important;
-  }
+.invisible {
+  @include invisible(hidden);
 }