libs/bootstrap/less/responsive-utilities.less

   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 }