0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

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
This commit is contained in:
Mark Otto 2017-03-03 12:58:57 -08:00 committed by Mark Otto
parent ebe405a01b
commit 4778190d78
3 changed files with 43 additions and 52 deletions

View File

@ -1,5 +1,5 @@
// Visibility // Visibility
@mixin invisible { @mixin invisible($visibility) {
visibility: hidden !important; visibility: $visibility !important;
} }

View File

@ -1,5 +1,5 @@
// //
// Display utilities // Utilities for common `display` values
// //
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@ -16,3 +16,38 @@
.d#{$infix}-inline-flex { display: inline-flex !important; } .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;
}
}

View File

@ -2,54 +2,10 @@
// Visibility utilities // Visibility utilities
// //
.visible {
@include invisible(visible);
}
.invisible { .invisible {
@include invisible(); @include invisible(hidden);
}
// 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;
}
} }