Commit e5d6a40a authored by Mark Otto's avatar Mark Otto

Redo the responsive utilities stuff

* Update docs language
* Enforce display: block; on all utilities for now
* Fix up docs CSS for the tests
parent bdd50228
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</div> </div>
<!-- Quick back to top --> <!-- Quick back to top -->
<a href="#welcome" class="bs-top"> <a href="#" class="bs-top">
Back to top Back to top
</a> </a>
......
...@@ -5094,7 +5094,7 @@ a.list-group-item.active > .badge, ...@@ -5094,7 +5094,7 @@ a.list-group-item.active > .badge,
} }
.visible-sm { .visible-sm {
display: inherit !important; display: block !important;
} }
.visible-md { .visible-md {
...@@ -5110,11 +5110,11 @@ a.list-group-item.active > .badge, ...@@ -5110,11 +5110,11 @@ a.list-group-item.active > .badge,
} }
.hidden-md { .hidden-md {
display: inherit !important; display: block !important;
} }
.hidden-lg { .hidden-lg {
display: inherit !important; display: block !important;
} }
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991px) {
...@@ -5122,19 +5122,19 @@ a.list-group-item.active > .badge, ...@@ -5122,19 +5122,19 @@ a.list-group-item.active > .badge,
display: none !important; display: none !important;
} }
.visible-md { .visible-md {
display: inherit !important; display: block !important;
} }
.visible-lg { .visible-lg {
display: none !important; display: none !important;
} }
.hidden-sm { .hidden-sm {
display: inherit !important; display: block !important;
} }
.hidden-md { .hidden-md {
display: none !important; display: none !important;
} }
.hidden-lg { .hidden-lg {
display: inherit !important; display: block !important;
} }
} }
...@@ -5146,13 +5146,13 @@ a.list-group-item.active > .badge, ...@@ -5146,13 +5146,13 @@ a.list-group-item.active > .badge,
display: none !important; display: none !important;
} }
.visible-lg { .visible-lg {
display: inherit !important; display: block !important;
} }
.hidden-sm { .hidden-sm {
display: inherit !important; display: block !important;
} }
.hidden-md { .hidden-md {
display: inherit !important; display: block !important;
} }
.hidden-lg { .hidden-lg {
display: none !important; display: none !important;
...@@ -5165,7 +5165,7 @@ a.list-group-item.active > .badge, ...@@ -5165,7 +5165,7 @@ a.list-group-item.active > .badge,
@media print { @media print {
.visible-print { .visible-print {
display: inherit !important; display: block !important;
} }
.hidden-print { .hidden-print {
display: none !important; display: none !important;
......
...@@ -510,16 +510,14 @@ body { ...@@ -510,16 +510,14 @@ body {
position: relative; position: relative;
float: left; float: left;
width: 25%; width: 25%;
height: 43px; padding: 15px 10px;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
line-height: 43px; line-height: 1.1;
color: #999; color: #999;
text-align: center; text-align: center;
border: 1px solid #ddd; border: 1px solid #ddd;
-webkit-border-radius: 4px; border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
} }
.responsive-utilities-test li + li { .responsive-utilities-test li + li {
margin-left: 10px; margin-left: 10px;
...@@ -530,9 +528,8 @@ body { ...@@ -530,9 +528,8 @@ body {
left: -1px; left: -1px;
right: -1px; right: -1px;
bottom: -1px; bottom: -1px;
-webkit-border-radius: 4px; padding: 15px 10px;
-moz-border-radius: 4px; border-radius: 4px;
border-radius: 4px;
} }
.responsive-utilities-test span { .responsive-utilities-test span {
color: #468847; color: #468847;
...@@ -646,6 +643,10 @@ input.focused { ...@@ -646,6 +643,10 @@ input.focused {
margin-bottom: 5px; margin-bottom: 5px;
} }
/* Hide the top link initially */
.bs-top {
display: none;
}
/* Responsive variations /* Responsive variations
...@@ -673,6 +674,7 @@ input.focused { ...@@ -673,6 +674,7 @@ input.focused {
/* Back to top link */ /* Back to top link */
.bs-top { .bs-top {
display: block; /* Unhide */
float: left; float: left;
padding: 7px 15px; padding: 7px 15px;
font-weight: 500; font-weight: 500;
......
...@@ -1927,9 +1927,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1927,9 +1927,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<thead> <thead>
<tr> <tr>
<th>Class</th> <th>Class</th>
<th>Phones <small>767px and below</small></th> <th>Small devices <small>Up to 768px</small></th>
<th>Tablets <small>979px to 768px</small></th> <th>Medium devices <small>768px to 979px</small></th>
<th>Desktops <small>Default</small></th> <th>Large devices <small>980px and up</small></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -1997,23 +1997,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1997,23 +1997,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table> </table>
<h3>When to use</h3> <h3>When to use</h3>
<p>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.</p> <p>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 <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
<h3>Test case</h3> <h3>Test case</h3>
<p>Resize your browser or load on different devices to test the above classes.</p> <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
<h4>Visible on...</h4> <h4>Visible on...</h4>
<p>Green checkmarks indicate that class is visible in your current viewport.</p> <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
<ul class="responsive-utilities-test"> <ul class="responsive-utilities-test">
<li>Phone<span class="visible-sm">&#10004; Phone</span></li> <li>Small<span class="visible-sm">&#10004; Visible on small</span></li>
<li>Tablet<span class="visible-md">&#10004; Tablet</span></li> <li>Medium<span class="visible-md">&#10004; Visible on medium</span></li>
<li>Desktop<span class="visible-lg">&#10004; Desktop</span></li> <li>Large<span class="visible-lg">&#10004; Visible on large</span></li>
</ul> </ul>
<h4>Hidden on...</h4> <h4>Hidden on...</h4>
<p>Here, green checkmarks indicate that class is hidden in your current viewport.</p> <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<ul class="responsive-utilities-test hidden-on"> <ul class="responsive-utilities-test hidden-on">
<li>Phone<span class="hidden-sm">&#10004; Phone</span></li> <li>Small<span class="hidden-sm">&#10004; Hidden on small</span></li>
<li>Tablet<span class="hidden-md">&#10004; Tablet</span></li> <li>Medium<span class="hidden-md">&#10004; Hidden on medium</span></li>
<li>Desktop<span class="hidden-lg">&#10004; Desktop</span></li> <li>Large<span class="hidden-lg">&#10004; Hidden on desktop</span></li>
</ul> </ul>
</div> </div>
...@@ -36,34 +36,34 @@ ...@@ -36,34 +36,34 @@
// Visibility utilities // Visibility utilities
// For Phones // For Phones
.visible-sm { display: inherit !important; } .visible-sm { display: block !important; }
.visible-md { display: none !important; } .visible-md { display: none !important; }
.visible-lg { display: none !important; } .visible-lg { display: none !important; }
.hidden-sm { display: none !important; } .hidden-sm { display: none !important; }
.hidden-md { display: inherit !important; } .hidden-md { display: block !important; }
.hidden-lg { display: inherit !important; } .hidden-lg { display: block !important; }
// Tablets & small desktops only // Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-sm { display: none !important; } .visible-sm { display: none !important; }
.visible-md { display: inherit !important; } .visible-md { display: block !important; }
.visible-lg { display: none !important; } .visible-lg { display: none !important; }
.hidden-sm { display: inherit !important; } .hidden-sm { display: block !important; }
.hidden-md { display: none !important; } .hidden-md { display: none !important; }
.hidden-lg { display: inherit !important; } .hidden-lg { display: block !important; }
} }
// For desktops // For desktops
@media (min-width: @screen-desktop) { @media (min-width: @screen-desktop) {
.visible-sm { display: none !important; } .visible-sm { display: none !important; }
.visible-md { display: none !important; } .visible-md { display: none !important; }
.visible-lg { display: inherit !important; } .visible-lg { display: block !important; }
.hidden-sm { display: inherit !important; } .hidden-sm { display: block !important; }
.hidden-md { display: inherit !important; } .hidden-md { display: block !important; }
.hidden-lg { display: none !important; } .hidden-lg { display: none !important; }
} }
...@@ -72,6 +72,6 @@ ...@@ -72,6 +72,6 @@
.hidden-print { } .hidden-print { }
@media print { @media print {
.visible-print { display: inherit !important; } .visible-print { display: block !important; }
.hidden-print { display: none !important; } .hidden-print { display: none !important; }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment