shop.balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

_responsive-utilities.scss (4588B)

      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 }