rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
— 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/mixins/_visibility.scss
View File

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

37
scss/utilities/_display.scss
View File

@ -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;
}
}

54
scss/utilities/_visibility.scss
View File

@ -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);
}