rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-09 01:53:53 +02:00
Code Issues Actions 10 Packages Releases Activity

make visible/hidden classes mixable

Browse Source
This commit is contained in:
Elvis Ratzlaff 2013-08-19 00:23:53 -04:00
parent f584500211
commit 5b3e6eb563
1 changed files with 116 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
less/responsive-utilities.less
View File

@ -36,99 +36,171 @@
// Visibility utilities // Visibility utilities
.visible-xs { .visible-xs {
.responsive-visibility(); .responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (max-width: @screen-phone-max) {
.responsive-invisibility(); .responsive-visibility();
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.visible-sm {
.responsive-invisibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-lg) { &.visible-md {
.responsive-invisibility(); @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-large-desktop) {
.responsive-visibility();
}
} }
} }
.visible-sm { .visible-sm {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.visible-xs {
@media (max-width: @screen-phone-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.visible-md {
.responsive-invisibility(); @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-lg) { &.visible-lg {
.responsive-invisibility(); @media (min-width: @screen-large-desktop) {
.responsive-visibility();
}
} }
} }
.visible-md { .visible-md {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.visible-xs {
.responsive-invisibility(); @media (max-width: @screen-phone-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.visible-sm {
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility(); .responsive-visibility();
} }
@media (min-width: @screen-lg) { &.visible-lg {
.responsive-invisibility(); @media (min-width: @screen-large-desktop) {
.responsive-visibility();
}
} }
} }
.visible-lg { .visible-lg {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.visible-xs {
.responsive-invisibility(); @media (max-width: @screen-phone-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.visible-sm {
.responsive-invisibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
} }
@media (min-width: @screen-lg) { &.visible-md {
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-large-desktop) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-xs { .hidden-xs {
.responsive-invisibility(); .responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (max-width: @screen-phone-max) {
.responsive-visibility(); .responsive-invisibility();
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.hidden-sm {
.responsive-visibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-lg) { &.hidden-md {
.responsive-visibility(); @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
} }
} }
.hidden-sm { .hidden-sm {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.hidden-xs {
@media (max-width: @screen-phone-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.hidden-md {
.responsive-visibility(); @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-lg) { &.hidden-lg {
.responsive-visibility(); @media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
} }
} }
.hidden-md { .hidden-md {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.hidden-xs {
.responsive-visibility(); @media (max-width: @screen-phone-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.hidden-sm {
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
@media (min-width: @screen-lg) { &.hidden-lg {
.responsive-visibility(); @media (min-width: @screen-large-desktop) {
.responsive-invisibility();
}
} }
} }
.hidden-lg { .hidden-lg {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { &.hidden-xs {
.responsive-visibility(); @media (max-width: @screen-phone-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { &.hidden-sm {
.responsive-visibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
} }
@media (min-width: @screen-lg) { &.hidden-md {
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-large-desktop) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }