diff --git a/scss/mixins/_visibility.scss b/scss/mixins/_visibility.scss index 88c50b05d5..f67fc1c529 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 ae942a6fb9..45353620ab 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 fcedc9cb91..823406dc3c 100644 --- a/scss/utilities/_visibility.scss +++ b/scss/utilities/_visibility.scss @@ -2,54 +2,10 @@ // Visibility utilities // +.visible { + @include invisible(visible); +} + .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; - } - } -} - - -// 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; - } + @include invisible(hidden); }