git.roojs.org Git - bootswatch/blob - bower_components/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 //
   9 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
  10 @-ms-viewport{
  11   width: device-width;
  12 }
  13
  14 // IE10 on Windows Phone 8
  15 // IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
  16 // other words, say on a Lumia, you'll get 768px as the device width,
  17 // meaning users will see the tablet styles and not phone styles.
  18 //
  19 // Alternatively you can override this with JS (see source below), but
  20 // we won't be doing that here given our limited scope.
  21 //
  22 // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
  23 @media screen and (max-width: 400px) {
  24   @-ms-viewport{
  25     width: 320px;
  26   }
  27 }
  28
  29 // Hide from screenreaders and browsers
  30 // Credit: HTML5 Boilerplate
  31 .hidden {
  32   display: none !important;
  33   visibility: hidden !important;
  34 }
  35
  36 // Visibility utilities
  37
  38 // For Phones
  39 .visible-sm {
  40   .responsive-visibility();
  41 }
  42 .visible-md {
  43   .responsive-invisibility();
  44 }
  45 .visible-lg {
  46   .responsive-invisibility();
  47 }
  48
  49 .hidden-sm {
  50   .responsive-invisibility();
  51 }
  52 .hidden-md {
  53   .responsive-visibility();
  54 }
  55 .hidden-lg {
  56   .responsive-visibility();
  57 }
  58
  59
  60 // Tablets & small desktops only
  61 @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
  62   .visible-sm {
  63     .responsive-invisibility();
  64   }
  65   .visible-md {
  66     .responsive-visibility();
  67   }
  68   .visible-lg {
  69     .responsive-invisibility();
  70   }
  71
  72   .hidden-sm {
  73     .responsive-visibility();
  74   }
  75   .hidden-md {
  76     .responsive-invisibility();
  77   }
  78   .hidden-lg {
  79     .responsive-visibility();
  80   }
  81 }
  82
  83 // For desktops
  84 @media (min-width: @screen-desktop) {
  85   .visible-sm {
  86     .responsive-invisibility();
  87   }
  88   .visible-md {
  89     .responsive-invisibility();
  90   }
  91   .visible-lg {
  92     .responsive-visibility();
  93   }
  94
  95   .hidden-sm {
  96     .responsive-visibility();
  97   }
  98   .hidden-md {
  99     .responsive-visibility();
 100   }
 101   .hidden-lg {
 102     .responsive-invisibility();
 103   }
 104 }
 105
 106 // Print utilities
 107 .visible-print {
 108   .responsive-invisibility();
 109 }
 110 .hidden-print  { }
 111
 112 @media print {
 113   .visible-print {
 114     .responsive-visibility();
 115   }
 116   .hidden-print {
 117     .responsive-invisibility();
 118   }
 119 }