diff options
| author | Mark Otto <[email protected]> | 2012-07-12 16:24:37 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-07-12 16:24:37 -0700 |
| commit | 7d324ee35b96a7d177bd301e2f11fe442713a1f6 (patch) | |
| tree | e5bbb11613239b679bd1284805a37434f582355b /less | |
| parent | 3c775f24323d649f55aaa175eb6a1a19024ab30c (diff) | |
| parent | f0ed383e51f4513273bd96636d5c630f792e08e9 (diff) | |
| download | bootstrap-7d324ee35b96a7d177bd301e2f11fe442713a1f6.tar.xz bootstrap-7d324ee35b96a7d177bd301e2f11fe442713a1f6.zip | |
Merge branch 'respclasses' of https://github.com/digitaldisseny/bootstrap into digitaldisseny-respclasses
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> + |