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 .visible-xs {
  39   .responsive-visibility();
  40   @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
  41     .responsive-invisibility();
  42   }
  43   @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
  44     .responsive-invisibility();
  45   }
  46   @media (min-width: @screen-large-desktop) {
  47     .responsive-invisibility();
  48   }
  49 }
  50 .visible-sm {
  51   .responsive-invisibility();
  52   @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
  53     .responsive-visibility();
  54   }
  55   @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
  56     .responsive-invisibility();
  57   }
  58   @media (min-width: @screen-large-desktop) {
  59     .responsive-invisibility();
  60   }
  61 }
  62 .visible-md {
  63   .responsive-invisibility();
  64   @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
  65     .responsive-invisibility();
  66   }
  67   @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
  68     .responsive-visibility();
  69   }
  70   @media (min-width: @screen-large-desktop) {
  71     .responsive-invisibility();
  72   }
  73 }
  74 .visible-lg {
  75   .responsive-invisibility();
  76   @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
  77     .responsive-invisibility();
  78   }
  79   @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
  80     .responsive-invisibility();
  81   }
  82   @media (min-width: @screen-large-desktop) {
  83     .responsive-visibility();
  84   }
  85 }
  86
  87 .hidden-xs {
  88   .responsive-invisibility();
  89   @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
  90     .responsive-visibility();
  91   }
  92   @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
  93     .responsive-visibility();
  94   }
  95   @media (min-width: @screen-large-desktop) {
  96     .responsive-visibility();
  97   }
  98 }
  99 .hidden-sm {
 100   .responsive-visibility();
 101   @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
 102     .responsive-invisibility();
 103   }
 104   @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
 105     .responsive-visibility();
 106   }
 107   @media (min-width: @screen-large-desktop) {
 108     .responsive-visibility();
 109   }
 110 }
 111 .hidden-md {
 112   .responsive-visibility();
 113   @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
 114     .responsive-visibility();
 115   }
 116   @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
 117     .responsive-invisibility();
 118   }
 119   @media (min-width: @screen-large-desktop) {
 120     .responsive-visibility();
 121   }
 122 }
 123 .hidden-lg {
 124   .responsive-visibility();
 125   @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
 126     .responsive-visibility();
 127   }
 128   @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
 129     .responsive-visibility();
 130   }
 131   @media (min-width: @screen-large-desktop) {
 132     .responsive-invisibility();
 133   }
 134 }
 135
 136 // Print utilities
 137 .visible-print {
 138   .responsive-invisibility();
 139 }
 140 .hidden-print  { }
 141
 142 @media print {
 143   .visible-print {
 144     .responsive-visibility();
 145   }
 146   .hidden-print {
 147     .responsive-invisibility();
 148   }
 149 }