resources/scss/bootstrap/_responsive-utilities.scss

   1 //
   2 // Responsive: Utility classes
   3 // --------------------------------------------------
   4
   5 // IE10 in Windows (Phone) 8
   6 //
   7 // Support for responsive views via media queries is kind of borked in IE10, for
   8 // Surface/desktop in split view and for Windows Phone 8. This particular fix
   9 // must be accompanied by a snippet of JavaScript to sniff the user agent and
  10 // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
  11 // our Getting Started page for more information on this bug.
  12 //
  13 // For more information, see the following:
  14 //
  15 // Issue: https://github.com/twbs/bootstrap/issues/10497
  16 // Docs: http://getbootstrap.com/getting-started/#support-ie10-width
  17 // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
  18 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
  19
  20 @at-root {
  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
  29 @include responsive-invisibility('.visible-xs');
  30 @include responsive-invisibility('.visible-sm');
  31 @include responsive-invisibility('.visible-md');
  32 @include responsive-invisibility('.visible-lg');
  33
  34 .visible-xs-block,
  35 .visible-xs-inline,
  36 .visible-xs-inline-block,
  37 .visible-sm-block,
  38 .visible-sm-inline,
  39 .visible-sm-inline-block,
  40 .visible-md-block,
  41 .visible-md-inline,
  42 .visible-md-inline-block,
  43 .visible-lg-block,
  44 .visible-lg-inline,
  45 .visible-lg-inline-block {
  46   display: none !important;
  47 }
  48
  49 @media (max-width: $screen-xs-max) {
  50   @include responsive-visibility('.visible-xs');
  51 }
  52
  53 .visible-xs-block {
  54   @media (max-width: $screen-xs-max) {
  55         display: block !important;
  56   }
  57 }
  58
  59 .visible-xs-inline {
  60   @media (max-width: $screen-xs-max) {
  61         display: inline !important;
  62   }
  63 }
  64
  65 .visible-xs-inline-block {
  66   @media (max-width: $screen-xs-max) {
  67         display: inline-block !important;
  68   }
  69 }
  70
  71 @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  72   @include responsive-visibility('.visible-sm');
  73 }
  74
  75 .visible-sm-block {
  76   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  77         display: block !important;
  78   }
  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
  87 .visible-sm-inline-block {
  88   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  89         display: inline-block !important;
  90   }
  91 }
  92
  93 @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  94   @include responsive-visibility('.visible-md');
  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
 103 .visible-md-inline {
 104   @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
 105         display: inline !important;
 106   }
 107 }
 108
 109 .visible-md-inline-block {
 110   @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
 111         display: inline-block !important;
 112   }
 113 }
 114
 115 @media (min-width: $screen-lg-min) {
 116   @include responsive-visibility('.visible-lg');
 117 }
 118
 119 .visible-lg-block {
 120   @media (min-width: $screen-lg-min) {
 121         display: block !important;
 122   }
 123 }
 124
 125 .visible-lg-inline {
 126   @media (min-width: $screen-lg-min) {
 127         display: inline !important;
 128   }
 129 }
 130
 131 .visible-lg-inline-block {
 132   @media (min-width: $screen-lg-min) {
 133         display: inline-block !important;
 134   }
 135 }
 136
 137 @media (max-width: $screen-xs-max) {
 138   @include responsive-invisibility('.hidden-xs');
 139 }
 140
 141 @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
 142   @include responsive-invisibility('.hidden-sm');
 143 }
 144
 145 @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
 146   @include responsive-invisibility('.hidden-md');
 147 }
 148
 149 @media (min-width: $screen-lg-min) {
 150   @include responsive-invisibility('.hidden-lg');
 151 }
 152
 153 // Print utilities
 154 //
 155 // Media queries are placed on the inside to be mixin-friendly.
 156
 157 // Note: Deprecated .visible-print as of v3.2.0
 158
 159 @include responsive-invisibility('.visible-print');
 160
 161 @media print {
 162   @include responsive-visibility('.visible-print');
 163 }
 164
 165 .visible-print-block {
 166   display: none !important;
 167
 168   @media print {
 169         display: block !important;
 170   }
 171 }
 172
 173 .visible-print-inline {
 174   display: none !important;
 175
 176   @media print {
 177         display: inline !important;
 178   }
 179 }
 180
 181 .visible-print-inline-block {
 182   display: none !important;
 183
 184   @media print {
 185         display: inline-block !important;
 186   }
 187 }
 188
 189 @media print {
 190   @include responsive-invisibility('.hidden-print');
 191 }