video/public/less/responsive-utilities.less

   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 }