mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code Activity

Make visibility utility classes responsive when used as LESS mixins

Browse Source
This commit is contained in:
Zac Wasielewski
2013-08-07 16:47:49 -04:00
parent c587114f99
commit 407c966736
1 changed files with 32 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/responsive-utilities.less
+32 -44
View File
@@ -35,70 +35,58 @@
// Visibility utilities
// For Phones
.visible-sm {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-invisibility();
}
}
.visible-md {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) {
.responsive-invisibility();
}
}
.visible-lg {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
}
.hidden-sm {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
}
.hidden-md {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
}
.hidden-lg {
.responsive-visibility();
}
// Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-sm {
.responsive-invisibility();
}
.visible-md {
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
.visible-lg {
.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 {
@media (min-width: @screen-desktop) {
.responsive-invisibility();
}
}