aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--scss/mixins/_visibility.scss4
-rw-r--r--scss/utilities/_display.scss37
-rw-r--r--scss/utilities/_visibility.scss52
3 files changed, 42 insertions, 51 deletions
diff --git a/scss/mixins/_visibility.scss b/scss/mixins/_visibility.scss
index 88c50b05d..f67fc1c52 100644
--- 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 ae942a6fb..45353620a 100644
--- 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 fcedc9cb9..823406dc3 100644
--- 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);
}