/app/styles/compass_twitter_bootstrap/_responsive-utilities.scss
Sass | 43 lines | 22 code | 6 blank | 15 comment | 0 complexity | 5c727e32a19796c5319182073534f5dc MD5 | raw file
1//
2// Responsive: Utility classes
3// --------------------------------------------------
4
5
6// Hide from screenreaders and browsers
7// Credit: HTML5 Boilerplate
8.hidden {
9 display: none;
10 visibility: hidden;
11}
12
13// Visibility utilities
14
15// For desktops
16.visible-phone { display: none !important; }
17.visible-tablet { display: none !important; }
18.visible-desktop { } // Don't set initially
19.hidden-phone { }
20.hidden-tablet { }
21.hidden-desktop { display: none !important; }
22
23// Tablets & small desktops only
24@media (min-width: 768px) and (max-width: 979px) {
25 // Hide everything else
26 .hidden-desktop { display: inherit !important; }
27 .visible-desktop { display: none !important ; }
28 // Show
29 .visible-tablet { display: inherit !important; }
30 // Hide
31 .hidden-tablet { display: none !important; }
32}
33
34// Phones only
35@media (max-width: 767px) {
36 // Hide everything else
37 .hidden-desktop { display: inherit !important; }
38 .visible-desktop { display: none !important; }
39 // Show
40 .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
41 // Hide
42 .hidden-phone { display: none !important; }
43}