eskp-app/1.0: static/less/responsive-utilities.less@3416f82943ea

     1 //

     2 // Responsive: Utility classes

     3 // --------------------------------------------------

     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/#browsers

    18 // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

    20 @-ms-viewport {

    21   width: device-width;

    22 }

    25 // Visibility utilities

    27 .visible-xs {

    28   .responsive-invisibility();

    29   @media (max-width: @screen-xs-max) {

    30     .responsive-visibility();

    31   }

    32   &.visible-sm {

    33     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

    34       .responsive-visibility();

    35     }

    36   }

    37   &.visible-md {

    38     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

    39       .responsive-visibility();

    40     }

    41   }

    42   &.visible-lg {

    43     @media (min-width: @screen-lg-min) {

    44       .responsive-visibility();

    45     }

    46   }

    47 }

    48 .visible-sm {

    49   .responsive-invisibility();

    50   &.visible-xs {

    51     @media (max-width: @screen-xs-max) {

    52       .responsive-visibility();

    53     }

    54   }

    55   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

    56     .responsive-visibility();

    57   }

    58   &.visible-md {

    59     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

    60       .responsive-visibility();

    61     }

    62   }

    63   &.visible-lg {

    64     @media (min-width: @screen-lg-min) {

    65       .responsive-visibility();

    66     }

    67   }

    68 }

    69 .visible-md {

    70   .responsive-invisibility();

    71   &.visible-xs {

    72     @media (max-width: @screen-xs-max) {

    73       .responsive-visibility();

    74     }

    75   }

    76   &.visible-sm {

    77     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

    78       .responsive-visibility();

    79     }

    80   }

    81   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

    82     .responsive-visibility();

    83   }

    84   &.visible-lg {

    85     @media (min-width: @screen-lg-min) {

    86       .responsive-visibility();

    87     }

    88   }

    89 }

    90 .visible-lg {

    91   .responsive-invisibility();

    92   &.visible-xs {

    93     @media (max-width: @screen-xs-max) {

    94       .responsive-visibility();

    95     }

    96   }

    97   &.visible-sm {

    98     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

    99       .responsive-visibility();

   100     }

   101   }

   102   &.visible-md {

   103     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

   104       .responsive-visibility();

   105     }

   106   }

   107   @media (min-width: @screen-lg-min) {

   108     .responsive-visibility();

   109   }

   110 }

   112 .hidden-xs {

   113   .responsive-visibility();

   114   @media (max-width: @screen-xs-max) {

   115     .responsive-invisibility();

   116   }

   117   &.hidden-sm {

   118     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

   119       .responsive-invisibility();

   120     }

   121   }

   122   &.hidden-md {

   123     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

   124       .responsive-invisibility();

   125     }

   126   }

   127   &.hidden-lg {

   128     @media (min-width: @screen-lg-min) {

   129       .responsive-invisibility();

   130     }

   131   }

   132 }

   133 .hidden-sm {

   134   .responsive-visibility();

   135   &.hidden-xs {

   136     @media (max-width: @screen-xs-max) {

   137       .responsive-invisibility();

   138     }

   139   }

   140   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

   141     .responsive-invisibility();

   142   }

   143   &.hidden-md {

   144     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

   145       .responsive-invisibility();

   146     }

   147   }

   148   &.hidden-lg {

   149     @media (min-width: @screen-lg-min) {

   150       .responsive-invisibility();

   151     }

   152   }

   153 }

   154 .hidden-md {

   155   .responsive-visibility();

   156   &.hidden-xs {

   157     @media (max-width: @screen-xs-max) {

   158       .responsive-invisibility();

   159     }

   160   }

   161   &.hidden-sm {

   162     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

   163       .responsive-invisibility();

   164     }

   165   }

   166   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

   167     .responsive-invisibility();

   168   }

   169   &.hidden-lg {

   170     @media (min-width: @screen-lg-min) {

   171       .responsive-invisibility();

   172     }

   173   }

   174 }

   175 .hidden-lg {

   176   .responsive-visibility();

   177   &.hidden-xs {

   178     @media (max-width: @screen-xs-max) {

   179       .responsive-invisibility();

   180     }

   181   }

   182   &.hidden-sm {

   183     @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

   184       .responsive-invisibility();

   185     }

   186   }

   187   &.hidden-md {

   188     @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {

   189       .responsive-invisibility();

   190     }

   191   }

   192   @media (min-width: @screen-lg-min) {

   193     .responsive-invisibility();

   194   }

   195 }

   197 // Print utilities

   198 .visible-print {

   199   .responsive-invisibility();

   200 }

   202 @media print {

   203   .visible-print {

   204     .responsive-visibility();

   205   }

   206   .hidden-print {

   207     .responsive-invisibility();

   208   }

   209 }

author	stetrabby <info@trabucchi.de>
	Fri, 20 Dec 2013 22:30:44 +0100
changeset 53	3416f82943ea
permissions	-rwxr-xr-x