rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Overhaul responsive visibility classes

Browse Source 
Thanks to @glebm for help refactoring this to use the breakpoint mixins.
This commit is contained in:
Chris Rebert 2014-12-29 13:58:21 -08:00
parent cbb3b1ff9a
commit 11a574ce9e
1 changed files with 13 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
scss/_utilities-responsive.scss
View File

@ -2,6 +2,19 @@
// Responsive: Utility classes
// --------------------------------------------------
@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;
}
}
}
// IE10 in Windows (Phone) 8
//
@ -23,98 +36,6 @@
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
.visible-xs-block {
@include media-breakpoint-down(xs) {
display: block !important;
}
}
.visible-xs-inline {
@include media-breakpoint-down(xs) {
display: inline !important;
}
}
.visible-xs-inline-block {
@include media-breakpoint-down(xs) {
display: inline-block !important;
}
}
.visible-sm-block {
@include media-breakpoint-only(sm) {
display: block !important;
}
}
.visible-sm-inline {
@include media-breakpoint-only(sm) {
display: inline !important;
}
}
.visible-sm-inline-block {
@include media-breakpoint-only(sm) {
display: inline-block !important;
}
}
.visible-md-block {
@include media-breakpoint-only(md) {
display: block !important;
}
}
.visible-md-inline {
@include media-breakpoint-only(md) {
display: inline !important;
}
}
.visible-md-inline-block {
@include media-breakpoint-only(md) {
display: inline-block !important;
}
}
.visible-lg-block {
@include media-breakpoint-up(lg) {
display: block !important;
}
}
.visible-lg-inline {
@include media-breakpoint-up(lg) {
display: inline !important;
}
}
.visible-lg-inline-block {
@include media-breakpoint-up(lg) {
display: inline-block !important;
}
}
@include media-breakpoint-only(sm) {
@include responsive-invisibility(".hidden-sm");
}
@include media-breakpoint-only(md) {
@include responsive-invisibility(".hidden-md");
}
@include media-breakpoint-up(lg) {
@include responsive-invisibility(".hidden-lg");
}
// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.