diff options
| author | Mark Otto <[email protected]> | 2013-08-11 17:03:24 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-11 17:03:24 -0700 |
| commit | 32f6cbf9d0b3bb564590fb920364ddcebb0dee12 (patch) | |
| tree | 415d3c4fcf23b0ab4b16d1ac7a384978eea3a6f2 | |
| parent | 83c236f5705822882e094d08e0bfa193d4e9f4ae (diff) | |
| parent | 407c966736c93ca63509fa3e1bffff8c5dc6f946 (diff) | |
| download | bootstrap-32f6cbf9d0b3bb564590fb920364ddcebb0dee12.tar.xz bootstrap-32f6cbf9d0b3bb564590fb920364ddcebb0dee12.zip | |
Merge pull request #9211 from zacwasielewski/responsive-visibility-utilities-as-less-mixins
Make visibility utility classes responsive when used as LESS mixins
| -rw-r--r-- | less/responsive-utilities.less | 68 |
1 files changed, 28 insertions, 40 deletions
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 38dd9639a..0815909cc 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -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(); -} - -.hidden-sm { - .responsive-invisibility(); -} -.hidden-md { - .responsive-visibility(); -} -.hidden-lg { - .responsive-visibility(); -} - - -// Tablets & small desktops only -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { - .visible-sm { + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); } - .visible-md { + @media (min-width: @screen-desktop) { .responsive-visibility(); } - .visible-lg { - .responsive-invisibility(); - } +} - .hidden-sm { +.hidden-sm { + .responsive-invisibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); } - .hidden-md { - .responsive-invisibility(); - } - .hidden-lg { + @media (min-width: @screen-desktop) { .responsive-visibility(); } } - -// For desktops -@media (min-width: @screen-desktop) { - .visible-sm { - .responsive-invisibility(); - } - .visible-md { +.hidden-md { + .responsive-visibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); } - .visible-lg { + @media (min-width: @screen-desktop) { .responsive-visibility(); } - - .hidden-sm { - .responsive-visibility(); - } - .hidden-md { +} +.hidden-lg { + .responsive-visibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); } - .hidden-lg { + @media (min-width: @screen-desktop) { .responsive-invisibility(); } } |