less/bootstrap/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/#support-ie10-width
  18 // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
  19 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
  20
  21 @-ms-viewport {
  22   width: device-width;
  23 }
  24
  25
  26 // Visibility utilities
  27 // Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
  28 .visible-xs,
  29 .visible-sm,
  30 .visible-md,
  31 .visible-lg {
  32   .responsive-invisibility();
  33 }
  34
  35 .visible-xs-block,
  36 .visible-xs-inline,
  37 .visible-xs-inline-block,
  38 .visible-sm-block,
  39 .visible-sm-inline,
  40 .visible-sm-inline-block,
  41 .visible-md-block,
  42 .visible-md-inline,
  43 .visible-md-inline-block,
  44 .visible-lg-block,
  45 .visible-lg-inline,
  46 .visible-lg-inline-block {
  47   display: none !important;
  48 }
  49
  50 .visible-xs {
  51   @media (max-width: @screen-xs-max) {
  52     .responsive-visibility();
  53   }
  54 }
  55 .visible-xs-block {
  56   @media (max-width: @screen-xs-max) {
  57     display: block !important;
  58   }
  59 }
  60 .visible-xs-inline {
  61   @media (max-width: @screen-xs-max) {
  62     display: inline !important;
  63   }
  64 }
  65 .visible-xs-inline-block {
  66   @media (max-width: @screen-xs-max) {
  67     display: inline-block !important;
  68   }
  69 }
  70
  71 .visible-sm {
  72   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  73     .responsive-visibility();
  74   }
  75 }
  76 .visible-sm-block {
  77   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  78     display: block !important;
  79   }
  80 }
  81 .visible-sm-inline {
  82   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  83     display: inline !important;
  84   }
  85 }
  86 .visible-sm-inline-block {
  87   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  88     display: inline-block !important;
  89   }
  90 }
  91
  92 .visible-md {
  93   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  94     .responsive-visibility();
  95   }
  96 }
  97 .visible-md-block {
  98   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  99     display: block !important;
 100   }
 101 }
 102 .visible-md-inline {
 103   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 104     display: inline !important;
 105   }
 106 }
 107 .visible-md-inline-block {
 108   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 109     display: inline-block !important;
 110   }
 111 }
 112
 113 .visible-lg {
 114   @media (min-width: @screen-lg-min) {
 115     .responsive-visibility();
 116   }
 117 }
 118 .visible-lg-block {
 119   @media (min-width: @screen-lg-min) {
 120     display: block !important;
 121   }
 122 }
 123 .visible-lg-inline {
 124   @media (min-width: @screen-lg-min) {
 125     display: inline !important;
 126   }
 127 }
 128 .visible-lg-inline-block {
 129   @media (min-width: @screen-lg-min) {
 130     display: inline-block !important;
 131   }
 132 }
 133
 134 .hidden-xs {
 135   @media (max-width: @screen-xs-max) {
 136     .responsive-invisibility();
 137   }
 138 }
 139 .hidden-sm {
 140   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
 141     .responsive-invisibility();
 142   }
 143 }
 144 .hidden-md {
 145   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 146     .responsive-invisibility();
 147   }
 148 }
 149 .hidden-lg {
 150   @media (min-width: @screen-lg-min) {
 151     .responsive-invisibility();
 152   }
 153 }
 154
 155
 156 // Print utilities
 157 //
 158 // Media queries are placed on the inside to be mixin-friendly.
 159
 160 // Note: Deprecated .visible-print as of v3.2.0
 161 .visible-print {
 162   .responsive-invisibility();
 163
 164   @media print {
 165     .responsive-visibility();
 166   }
 167 }
 168 .visible-print-block {
 169   display: none !important;
 170
 171   @media print {
 172     display: block !important;
 173   }
 174 }
 175 .visible-print-inline {
 176   display: none !important;
 177
 178   @media print {
 179     display: inline !important;
 180   }
 181 }
 182 .visible-print-inline-block {
 183   display: none !important;
 184
 185   @media print {
 186     display: inline-block !important;
 187   }
 188 }
 189
 190 .hidden-print {
 191   @media print {
 192     .responsive-invisibility();
 193   }
 194 }