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

Merge pull request #9211 from zacwasielewski/responsive-visibility-utilities-as-less-mixins

Browse Source 
Make visibility utility classes responsive when used as LESS mixins
This commit is contained in:
Mark Otto 2013-08-11 17:03:24 -07:00
commit 32f6cbf9d0
1 changed files with 32 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
less/responsive-utilities.less
View File

@ -35,70 +35,58 @@
// Visibility utilities // Visibility utilities
// For Phones
.visible-sm { .visible-sm {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-invisibility();
}
} }
.visible-md { .visible-md {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) {
.responsive-invisibility();
}
} }
.visible-lg { .visible-lg {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
} }
.hidden-sm { .hidden-sm {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
} }
.hidden-md { .hidden-md {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
} }
.hidden-lg { .hidden-lg {
.responsive-visibility(); .responsive-visibility();
} @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
// Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-sm {
.responsive-invisibility();
}
.visible-md {
.responsive-visibility(); .responsive-visibility();
} }
.visible-lg { @media (min-width: @screen-desktop) {
.responsive-invisibility();
}
.hidden-sm {
.responsive-visibility();
}
.hidden-md {
.responsive-invisibility();
}
.hidden-lg {
.responsive-visibility();
}
}
// For desktops
@media (min-width: @screen-desktop) {
.visible-sm {
.responsive-invisibility();
}
.visible-md {
.responsive-invisibility();
}
.visible-lg {
.responsive-visibility();
}
.hidden-sm {
.responsive-visibility();
}
.hidden-md {
.responsive-visibility();
}
.hidden-lg {
.responsive-invisibility(); .responsive-invisibility();
} }
} }