mindcoding-template/less/responsive-utilities.less

   1 //
   2 // Responsive: Utility classes
   3 // --------------------------------------------------
   4
   5
   6 // IE10 in Windows (Phone) 8
   7 //
   8 // Support for responsive views via media queries is kind of borked in IE10, for
   9 // Surface/desktop in split view and for Windows Phone 8. This particular fix
  10 // must be accompanied by a snippet of JavaScript to sniff the user agent and
  11 // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
  12 // our Getting Started page for more information on this bug.
  13 //
  14 // For more information, see the following:
  15 //
  16 // Issue: https://github.com/twbs/bootstrap/issues/10497
  17 // Docs: http://getbootstrap.com/getting-started/#browsers
  18 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
  19
  20 @-ms-viewport {
  21   width: device-width;
  22 }
  23
  24
  25 // Visibility utilities
  26
  27 .visible-xs {
  28   .responsive-invisibility();
  29   @media (max-width: @screen-xs-max) {
  30     .responsive-visibility();
  31   }
  32   &.visible-sm {
  33     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  34       .responsive-visibility();
  35     }
  36   }
  37   &.visible-md {
  38     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  39       .responsive-visibility();
  40     }
  41   }
  42   &.visible-lg {
  43     @media (min-width: @screen-lg-min) {
  44       .responsive-visibility();
  45     }
  46   }
  47 }
  48 .visible-sm {
  49   .responsive-invisibility();
  50   &.visible-xs {
  51     @media (max-width: @screen-xs-max) {
  52       .responsive-visibility();
  53     }
  54   }
  55   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  56     .responsive-visibility();
  57   }
  58   &.visible-md {
  59     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  60       .responsive-visibility();
  61     }
  62   }
  63   &.visible-lg {
  64     @media (min-width: @screen-lg-min) {
  65       .responsive-visibility();
  66     }
  67   }
  68 }
  69 .visible-md {
  70   .responsive-invisibility();
  71   &.visible-xs {
  72     @media (max-width: @screen-xs-max) {
  73       .responsive-visibility();
  74     }
  75   }
  76   &.visible-sm {
  77     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  78       .responsive-visibility();
  79     }
  80   }
  81   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  82     .responsive-visibility();
  83   }
  84   &.visible-lg {
  85     @media (min-width: @screen-lg-min) {
  86       .responsive-visibility();
  87     }
  88   }
  89 }
  90 .visible-lg {
  91   .responsive-invisibility();
  92   &.visible-xs {
  93     @media (max-width: @screen-xs-max) {
  94       .responsive-visibility();
  95     }
  96   }
  97   &.visible-sm {
  98     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  99       .responsive-visibility();
 100     }
 101   }
 102   &.visible-md {
 103     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 104       .responsive-visibility();
 105     }
 106   }
 107   @media (min-width: @screen-lg-min) {
 108     .responsive-visibility();
 109   }
 110 }
 111
 112 .hidden-xs {
 113   .responsive-visibility();
 114   @media (max-width: @screen-xs-max) {
 115     .responsive-invisibility();
 116   }
 117   &.hidden-sm {
 118     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
 119       .responsive-invisibility();
 120     }
 121   }
 122   &.hidden-md {
 123     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 124       .responsive-invisibility();
 125     }
 126   }
 127   &.hidden-lg {
 128     @media (min-width: @screen-lg-min) {
 129       .responsive-invisibility();
 130     }
 131   }
 132 }
 133 .hidden-sm {
 134   .responsive-visibility();
 135   &.hidden-xs {
 136     @media (max-width: @screen-xs-max) {
 137       .responsive-invisibility();
 138     }
 139   }
 140   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
 141     .responsive-invisibility();
 142   }
 143   &.hidden-md {
 144     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 145       .responsive-invisibility();
 146     }
 147   }
 148   &.hidden-lg {
 149     @media (min-width: @screen-lg-min) {
 150       .responsive-invisibility();
 151     }
 152   }
 153 }
 154 .hidden-md {
 155   .responsive-visibility();
 156   &.hidden-xs {
 157     @media (max-width: @screen-xs-max) {
 158       .responsive-invisibility();
 159     }
 160   }
 161   &.hidden-sm {
 162     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
 163       .responsive-invisibility();
 164     }
 165   }
 166   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 167     .responsive-invisibility();
 168   }
 169   &.hidden-lg {
 170     @media (min-width: @screen-lg-min) {
 171       .responsive-invisibility();
 172     }
 173   }
 174 }
 175 .hidden-lg {
 176   .responsive-visibility();
 177   &.hidden-xs {
 178     @media (max-width: @screen-xs-max) {
 179       .responsive-invisibility();
 180     }
 181   }
 182   &.hidden-sm {
 183     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
 184       .responsive-invisibility();
 185     }
 186   }
 187   &.hidden-md {
 188     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 189       .responsive-invisibility();
 190     }
 191   }
 192   @media (min-width: @screen-lg-min) {
 193     .responsive-invisibility();
 194   }
 195 }
 196
 197 // Print utilities
 198 .visible-print {
 199   .responsive-invisibility();
 200 }
 201
 202 @media print {
 203   .visible-print {
 204     .responsive-visibility();
 205   }
 206   .hidden-print {
 207     .responsive-invisibility();
 208   }
 209 }