[Summary view] [Print] [Text view]

   1  //
   2  // Responsive: Utility classes
   3  // --------------------------------------------------
   4  
   5  
   6  // IE10 Metro responsive
   7  // Required for Windows 8 Metro split-screen snapping with IE10
   8  // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
   9  @-ms-viewport{
  10    width: device-width;
  11  }
  12  
  13  // Hide from screenreaders and browsers
  14  // Credit: HTML5 Boilerplate
  15  .hidden {
  16    display: none;
  17    visibility: hidden;
  18  }
  19  
  20  // Visibility utilities
  21  
  22  // For desktops
  23  .visible-phone     { display: none !important; }
  24  .visible-tablet    { display: none !important; }
  25  .hidden-phone      { }
  26  .hidden-tablet     { }
  27  .hidden-desktop    { display: none !important; }
  28  .visible-desktop   { display: inherit !important; }
  29  
  30  // Tablets & small desktops only
  31  @media (min-width: 768px) and (max-width: 979px) {
  32    // Hide everything else
  33    .hidden-desktop    { display: inherit !important; }
  34    .visible-desktop   { display: none !important ; }
  35    // Show
  36    .visible-tablet    { display: inherit !important; }
  37    // Hide
  38    .hidden-tablet     { display: none !important; }
  39  }
  40  
  41  // Phones only
  42  @media (max-width: 767px) {
  43    // Hide everything else
  44    .hidden-desktop    { display: inherit !important; }
  45    .visible-desktop   { display: none !important; }
  46    // Show
  47    .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
  48    // Hide
  49    .hidden-phone      { display: none !important; }
  50  }
  51  
  52  // Print utilities
  53  .visible-print    { display: none !important; }
  54  .hidden-print     { }
  55  
  56  @media print {
  57    .visible-print  { display: inherit !important; }
  58    .hidden-print   { display: none !important; }
  59  }