responsive-utilities.less 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. //
  2. // Responsive: Utility classes
  3. // --------------------------------------------------
  4. // IE10 Metro responsive
  5. // Required for Windows 8 Metro split-screen snapping with IE10
  6. // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
  7. @-ms-viewport{
  8. width: device-width;
  9. }
  10. // Hide from screenreaders and browsers
  11. // Credit: HTML5 Boilerplate
  12. .hidden {
  13. display: none;
  14. visibility: hidden;
  15. }
  16. // Visibility utilities
  17. // For desktops
  18. .visible-phone { display: none !important; }
  19. .visible-tablet { display: none !important; }
  20. .hidden-phone { }
  21. .hidden-tablet { }
  22. .hidden-desktop { display: none !important; }
  23. .visible-desktop { display: inherit !important; }
  24. // Tablets & small desktops only
  25. @media (min-width: 768px) and (max-width: 979px) {
  26. // Hide everything else
  27. .hidden-desktop { display: inherit !important; }
  28. .visible-desktop { display: none !important ; }
  29. // Show
  30. .visible-tablet { display: inherit !important; }
  31. // Hide
  32. .hidden-tablet { display: none !important; }
  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. }
  44. // Print utilities
  45. .visible-print { display: none !important; }
  46. .hidden-print { }
  47. @media print {
  48. .visible-print { display: inherit !important; }
  49. .hidden-print { display: none !important; }
  50. }