]>
Commit | Line | Data |
---|---|---|
59c06b17 CS |
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 | .hidden-phone { } | |
19 | .hidden-tablet { } | |
20 | .hidden-desktop { display: none !important; } | |
21 | .visible-desktop { display: inherit !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 | } |