diff options
| author | Roberto - phproberto <[email protected]> | 2012-07-10 08:12:16 +0200 |
|---|---|---|
| committer | Roberto - phproberto <[email protected]> | 2012-07-10 08:12:16 +0200 |
| commit | 83846ba0d629a3882e727ccc7b64684507206cce (patch) | |
| tree | c160883c6693f88611ced37bc56b2fae77b67e75 /less | |
| parent | dbea3e27849bc2e2aa5315e02e026872b913691f (diff) | |
| download | bootstrap-83846ba0d629a3882e727ccc7b64684507206cce.tar.xz bootstrap-83846ba0d629a3882e727ccc7b64684507206cce.zip | |
Fixes #4002 responsive utilities classes
Diffstat (limited to 'less')
| -rw-r--r-- | less/responsive-utilities.less | 14 | ||||
| -rw-r--r-- | less/tests/css-tests.html | 31 |
2 files changed, 38 insertions, 7 deletions
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 59deafe81..2c3f6c15f 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -15,29 +15,29 @@ // For desktops .visible-phone { display: none !important; } .visible-tablet { display: none !important; } -.visible-desktop { } // Don't set initially .hidden-phone { } .hidden-tablet { } .hidden-desktop { display: none !important; } +.visible-desktop { display: inherit !important; } // Tablets & small desktops only @media (min-width: 768px) and (max-width: 979px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important ; } // Show .visible-tablet { display: inherit !important; } // Hide .hidden-tablet { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } } // Phones only @media (max-width: 767px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important; } // Show .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior // Hide .hidden-phone { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 4b8b1a277..341c80264 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1019,6 +1019,37 @@ +<!-- Responsive utility classes +================================================== --> + +<div class="page-header"> + <h1>Responsive utility classes</h1> +</div> + +<h4>Visible on...</h4> +<ul class="responsive-utilities-test visible-on"> + <li>Phone<span class="visible-phone">✔ Phone</span></li> + <li>Tablet<span class="visible-tablet">✔ Tablet</span></li> + <li>Desktop<span class="visible-desktop">✔ Desktop</span></li> +</ul> +<ul class="responsive-utilities-test visible-on"> + <li>Phone + Tablet<span class="visible-phone visible-tablet">✔ Phone + Tablet</span></li> + <li>Tablet + Desktop<span class="visible-tablet visible-desktop">✔ Tablet + Desktop</span></li> + <li>All<span class="visible-phone visible-tablet visible-desktop">✔ All</span></li> +</ul> + +<h4>Hidden on...</h4> +<ul class="responsive-utilities-test hidden-on"> + <li>Phone<span class="hidden-phone">✔ Phone</span></li> + <li>Tablet<span class="hidden-tablet">✔ Tablet</span></li> + <li>Desktop<span class="hidden-desktop">✔ Desktop</span></li> +</ul> +<ul class="responsive-utilities-test hidden-on"> + <li>Phone + Tablet<span class="hidden-phone hidden-tablet">✔ Phone + Tablet</span></li> + <li>Tablet + Desktop<span class="hidden-tablet hidden-desktop">✔ Tablet + Desktop</span></li> + <li>All<span class="hidden-phone hidden-tablet hidden-desktop">✔ All</span></li> +</ul> + |