responsive-utilities.less.svn-base 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. // RESPONSIVE CLASSES
  2. // ------------------
  3. // Hide from screenreaders and browsers
  4. // Credit: HTML5 Boilerplate
  5. .hidden {
  6. display: none;
  7. visibility: hidden;
  8. }
  9. // Visibility utilities
  10. // For desktops
  11. .visible-phone { display: none !important; }
  12. .visible-tablet { display: none !important; }
  13. .visible-desktop { } // Don't set initially
  14. .hidden-phone { }
  15. .hidden-tablet { }
  16. .hidden-desktop { display: none !important; }
  17. // Phones only
  18. @media (max-width: 767px) {
  19. // Show
  20. .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
  21. // Hide
  22. .hidden-phone { display: none !important; }
  23. // Hide everything else
  24. .hidden-desktop { display: inherit !important; }
  25. .visible-desktop { display: none !important; }
  26. }
  27. // Tablets & small desktops only
  28. @media (min-width: 768px) and (max-width: 979px) {
  29. // Show
  30. .visible-tablet { display: inherit !important; }
  31. // Hide
  32. .hidden-tablet { display: none !important; }
  33. // Hide everything else
  34. .hidden-desktop { display: inherit !important; }
  35. .visible-desktop { display: none !important ; }
  36. }