git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/assets/less/bootstrap-3.0.0/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-invisibility();
  40   @media (max-width: @screen-xs-max) {
  41     .responsive-visibility();
  42   }
  43   &.visible-sm {
  44     @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
  45       .responsive-visibility();
  46     }
  47   }
  48   &.visible-md {
  49     @media (min-width: @screen-md) and (max-width: @screen-md-max) {
  50       .responsive-visibility();
  51     }
  52   }
  53   &.visible-lg {
  54     @media (min-width: @screen-lg) {
  55       .responsive-visibility();
  56     }
  57   }
  58 }
  59 .visible-sm {
  60   .responsive-invisibility();
  61   &.visible-xs {
  62     @media (max-width: @screen-xs-max) {
  63       .responsive-visibility();
  64     }
  65   }
  66   @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
  67     .responsive-visibility();
  68   }
  69   &.visible-md {
  70     @media (min-width: @screen-md) and (max-width: @screen-md-max) {
  71       .responsive-visibility();
  72     }
  73   }
  74   &.visible-lg {
  75     @media (min-width: @screen-lg) {
  76       .responsive-visibility();
  77     }
  78   }
  79 }
  80 .visible-md {
  81   .responsive-invisibility();
  82   &.visible-xs {
  83     @media (max-width: @screen-xs-max) {
  84       .responsive-visibility();
  85     }
  86   }
  87   &.visible-sm {
  88     @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
  89       .responsive-visibility();
  90     }
  91   }
  92   @media (min-width: @screen-md) and (max-width: @screen-md-max) {
  93     .responsive-visibility();
  94   }
  95   &.visible-lg {
  96     @media (min-width: @screen-lg) {
  97       .responsive-visibility();
  98     }
  99   }
 100 }
 101 .visible-lg {
 102   .responsive-invisibility();
 103   &.visible-xs {
 104     @media (max-width: @screen-xs-max) {
 105       .responsive-visibility();
 106     }
 107   }
 108   &.visible-sm {
 109     @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
 110       .responsive-visibility();
 111     }
 112   }
 113   &.visible-md {
 114     @media (min-width: @screen-md) and (max-width: @screen-md-max) {
 115       .responsive-visibility();
 116     }
 117   }
 118   @media (min-width: @screen-lg) {
 119     .responsive-visibility();
 120   }
 121 }
 122
 123 .hidden-xs {
 124   .responsive-visibility();
 125   @media (max-width: @screen-xs-max) {
 126     .responsive-invisibility();
 127   }
 128   &.hidden-sm {
 129     @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
 130       .responsive-invisibility();
 131     }
 132   }
 133   &.hidden-md {
 134     @media (min-width: @screen-md) and (max-width: @screen-md-max) {
 135       .responsive-invisibility();
 136     }
 137   }
 138   &.hidden-lg {
 139     @media (min-width: @screen-lg) {
 140       .responsive-invisibility();
 141     }
 142   }
 143 }
 144 .hidden-sm {
 145   .responsive-visibility();
 146   &.hidden-xs {
 147     @media (max-width: @screen-xs-max) {
 148       .responsive-invisibility();
 149     }
 150   }
 151   @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
 152     .responsive-invisibility();
 153   }
 154   &.hidden-md {
 155     @media (min-width: @screen-md) and (max-width: @screen-md-max) {
 156       .responsive-invisibility();
 157     }
 158   }
 159   &.hidden-lg {
 160     @media (min-width: @screen-lg) {
 161       .responsive-invisibility();
 162     }
 163   }
 164 }
 165 .hidden-md {
 166   .responsive-visibility();
 167   &.hidden-xs {
 168     @media (max-width: @screen-xs-max) {
 169       .responsive-invisibility();
 170     }
 171   }
 172   &.hidden-sm {
 173     @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
 174       .responsive-invisibility();
 175     }
 176   }
 177   @media (min-width: @screen-md) and (max-width: @screen-md-max) {
 178     .responsive-invisibility();
 179   }
 180   &.hidden-lg {
 181     @media (min-width: @screen-lg) {
 182       .responsive-invisibility();
 183     }
 184   }
 185 }
 186 .hidden-lg {
 187   .responsive-visibility();
 188   &.hidden-xs {
 189     @media (max-width: @screen-xs-max) {
 190       .responsive-invisibility();
 191     }
 192   }
 193   &.hidden-sm {
 194     @media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
 195       .responsive-invisibility();
 196     }
 197   }
 198   &.hidden-md {
 199     @media (min-width: @screen-md) and (max-width: @screen-md-max) {
 200       .responsive-invisibility();
 201     }
 202   }
 203   @media (min-width: @screen-lg) {
 204     .responsive-invisibility();
 205   }
 206 }
 207
 208 // Print utilities
 209 .visible-print {
 210   .responsive-invisibility();
 211 }
 212
 213 @media print {
 214   .visible-print {
 215     .responsive-visibility();
 216   }
 217   .hidden-print {
 218     .responsive-invisibility();
 219   }
 220 }