Home | History | Annotate | Download | only in bootstrap 
      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 }
    195