aleph1.co.uk Git - yaffs-website/blob - vendor/twbs/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities.scss

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