From e5d6a40a7781daea884dc4472e5eb3f1705a8498 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 May 2013 19:13:58 -0700 Subject: [PATCH] Redo the responsive utilities stuff * Update docs language * Enforce display: block; on all utilities for now * Fix up docs CSS for the tests --- docs/_layouts/default.html | 2 +- docs/assets/css/bootstrap.css | 20 ++++++++++---------- docs/assets/css/docs.css | 18 ++++++++++-------- docs/css.html | 26 +++++++++++++------------- less/responsive-utilities.less | 20 ++++++++++---------- 5 files changed, 44 insertions(+), 42 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 249088b995..638b5485e9 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -41,7 +41,7 @@ - + Back to top diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 326ae49906..9737e77713 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -5094,7 +5094,7 @@ a.list-group-item.active > .badge, } .visible-sm { - display: inherit !important; + display: block !important; } .visible-md { @@ -5110,11 +5110,11 @@ a.list-group-item.active > .badge, } .hidden-md { - display: inherit !important; + display: block !important; } .hidden-lg { - display: inherit !important; + display: block !important; } @media (min-width: 768px) and (max-width: 991px) { @@ -5122,19 +5122,19 @@ a.list-group-item.active > .badge, display: none !important; } .visible-md { - display: inherit !important; + display: block !important; } .visible-lg { display: none !important; } .hidden-sm { - display: inherit !important; + display: block !important; } .hidden-md { display: none !important; } .hidden-lg { - display: inherit !important; + display: block !important; } } @@ -5146,13 +5146,13 @@ a.list-group-item.active > .badge, display: none !important; } .visible-lg { - display: inherit !important; + display: block !important; } .hidden-sm { - display: inherit !important; + display: block !important; } .hidden-md { - display: inherit !important; + display: block !important; } .hidden-lg { display: none !important; @@ -5165,7 +5165,7 @@ a.list-group-item.active > .badge, @media print { .visible-print { - display: inherit !important; + display: block !important; } .hidden-print { display: none !important; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 3cc4d97ecc..fd40cdafb9 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -510,16 +510,14 @@ body { position: relative; float: left; width: 25%; - height: 43px; + padding: 15px 10px; font-size: 14px; font-weight: bold; - line-height: 43px; + line-height: 1.1; color: #999; text-align: center; border: 1px solid #ddd; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + border-radius: 4px; } .responsive-utilities-test li + li { margin-left: 10px; @@ -530,9 +528,8 @@ body { left: -1px; right: -1px; bottom: -1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + padding: 15px 10px; + border-radius: 4px; } .responsive-utilities-test span { color: #468847; @@ -646,6 +643,10 @@ input.focused { margin-bottom: 5px; } +/* Hide the top link initially */ +.bs-top { + display: none; +} /* Responsive variations @@ -673,6 +674,7 @@ input.focused { /* Back to top link */ .bs-top { + display: block; /* Unhide */ float: left; padding: 7px 15px; font-weight: 500; diff --git a/docs/css.html b/docs/css.html index 90f6f490fe..69bb0dd7cb 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1927,9 +1927,9 @@ For example, <section> should be wrapped as inline. Class - Phones 767px and below - Tablets 979px to 768px - Desktops Default + Small devices Up to 768px + Medium devices 768px to 979px + Large devices 980px and up @@ -1997,23 +1997,23 @@ For example, <section> should be wrapped as inline.

When to use

-

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

+

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning display: none; or display: block;. Use with inline and table elements is currently not supported.

Test case

-

Resize your browser or load on different devices to test the above classes.

+

Resize your browser or load on different devices to test the responsive utility classes.

Visible on...

-

Green checkmarks indicate that class is visible in your current viewport.

+

Green checkmarks indicate the element is visible in your current viewport.

Hidden on...

-

Here, green checkmarks indicate that class is hidden in your current viewport.

+

Here, green checkmarks indicate the element is hidden in your current viewport.

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 09a0955f89..f319298f00 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -36,34 +36,34 @@ // Visibility utilities // For Phones -.visible-sm { display: inherit !important; } +.visible-sm { display: block !important; } .visible-md { display: none !important; } .visible-lg { display: none !important; } .hidden-sm { display: none !important; } -.hidden-md { display: inherit !important; } -.hidden-lg { display: inherit !important; } +.hidden-md { display: block !important; } +.hidden-lg { display: block !important; } // Tablets & small desktops only @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .visible-sm { display: none !important; } - .visible-md { display: inherit !important; } + .visible-md { display: block !important; } .visible-lg { display: none !important; } - .hidden-sm { display: inherit !important; } + .hidden-sm { display: block !important; } .hidden-md { display: none !important; } - .hidden-lg { display: inherit !important; } + .hidden-lg { display: block !important; } } // For desktops @media (min-width: @screen-desktop) { .visible-sm { display: none !important; } .visible-md { display: none !important; } - .visible-lg { display: inherit !important; } + .visible-lg { display: block !important; } - .hidden-sm { display: inherit !important; } - .hidden-md { display: inherit !important; } + .hidden-sm { display: block !important; } + .hidden-md { display: block !important; } .hidden-lg { display: none !important; } } @@ -72,6 +72,6 @@ .hidden-print { } @media print { - .visible-print { display: inherit !important; } + .visible-print { display: block !important; } .hidden-print { display: none !important; } }