Add media type "all" to media queries to fix them for IE9

Created by: DaBs

Writing @media (max-width: something) will break in IE9, as the media type is not defined. This is easily fixed by simply rewriting all media queries with e.g. @media all and (max-width: something).

less/mixins/grid.less

@@ -44,23 +44,23 @@
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  @media (min-width: @screen-sm-min) {
+  @media all and (min-width: @screen-sm-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-offset(@columns) {
-  @media (min-width: @screen-sm-min) {
+  @media all and (min-width: @screen-sm-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-push(@columns) {
-  @media (min-width: @screen-sm-min) {
+  @media all and (min-width: @screen-sm-min) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-sm-column-pull(@columns) {
-  @media (min-width: @screen-sm-min) {
+  @media all and (min-width: @screen-sm-min) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -72,23 +72,23 @@
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  @media (min-width: @screen-md-min) {
+  @media all and (min-width: @screen-md-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-offset(@columns) {
-  @media (min-width: @screen-md-min) {
+  @media all and (min-width: @screen-md-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-push(@columns) {
-  @media (min-width: @screen-md-min) {
+  @media all and (min-width: @screen-md-min) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-md-column-pull(@columns) {
-  @media (min-width: @screen-md-min) {
+  @media all and (min-width: @screen-md-min) {
     right: percentage((@columns / @grid-columns));
   }
 }
@@ -100,23 +100,23 @@
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  @media (min-width: @screen-lg-min) {
+  @media all and (min-width: @screen-lg-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-offset(@columns) {
-  @media (min-width: @screen-lg-min) {
+  @media all and (min-width: @screen-lg-min) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-push(@columns) {
-  @media (min-width: @screen-lg-min) {
+  @media all and (min-width: @screen-lg-min) {
     left: percentage((@columns / @grid-columns));
   }
 }
 .make-lg-column-pull(@columns) {
-  @media (min-width: @screen-lg-min) {
+  @media all and (min-width: @screen-lg-min) {
     right: percentage((@columns / @grid-columns));
   }
 }

less/dropdowns.less

@@ -202,7 +202,7 @@
 //
 // Reiterate per navbar.less and the modified component alignment there.
 
-@media (min-width: @grid-float-breakpoint) {
+@media all and (min-width: @grid-float-breakpoint) {
   .navbar-right {
     .dropdown-menu {
       .dropdown-menu-right();

less/forms.less

@@ -474,7 +474,7 @@ input[type="checkbox"] {
 .form-inline {
 
   // Kick in the inline
-  @media (min-width: @screen-sm-min) {
+  @media all and (min-width: @screen-sm-min) {
     // Inline-block all the things for "inline"
     .form-group {
       display: inline-block;
@@ -574,7 +574,7 @@ input[type="checkbox"] {
 
   // Reset spacing and right align labels, but scope to media queries so that
   // labels on narrow viewports stack the same as a default form example.
-  @media (min-width: @screen-sm-min) {
+  @media all and (min-width: @screen-sm-min) {
     .control-label {
       text-align: right;
       margin-bottom: 0;
@@ -595,7 +595,7 @@ input[type="checkbox"] {
   // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
   // inputs and labels within a `.form-group`.
   .form-group-lg {
-    @media (min-width: @screen-sm-min) {
+    @media all and (min-width: @screen-sm-min) {
       .control-label {
         padding-top: (@padding-large-vertical + 1);
         font-size: @font-size-large;
@@ -603,7 +603,7 @@ input[type="checkbox"] {
     }
   }
   .form-group-sm {
-    @media (min-width: @screen-sm-min) {
+    @media all and (min-width: @screen-sm-min) {
       .control-label {
         padding-top: (@padding-small-vertical + 1);
         font-size: @font-size-small;

less/grid.less

@@ -10,13 +10,13 @@
 .container {
   .container-fixed();
 
-  @media (min-width: @screen-sm-min) {
+  @media all and (min-width: @screen-sm-min) {
     width: @container-sm;
   }
-  @media (min-width: @screen-md-min) {
+  @media all and (min-width: @screen-md-min) {
     width: @container-md;
   }
-  @media (min-width: @screen-lg-min) {
+  @media all and (min-width: @screen-lg-min) {
     width: @container-lg;
   }
 }
@@ -61,7 +61,7 @@
 // Columns, offsets, pushes, and pulls for the small device range, from phones
 // to tablets.
 
-@media (min-width: @screen-sm-min) {
+@media all and (min-width: @screen-sm-min) {
   .make-grid(sm);
 }
 
@@ -70,7 +70,7 @@
 //
 // Columns, offsets, pushes, and pulls for the desktop device range.
 
-@media (min-width: @screen-md-min) {
+@media all and (min-width: @screen-md-min) {
   .make-grid(md);
 }
 
@@ -79,6 +79,6 @@
 //
 // Columns, offsets, pushes, and pulls for the large desktop device range.
 
-@media (min-width: @screen-lg-min) {
+@media all and (min-width: @screen-lg-min) {
   .make-grid(lg);
 }

less/modals.less

@@ -131,7 +131,7 @@
 }
 
 // Scale up the modal
-@media (min-width: @screen-sm-min) {
+@media all and (min-width: @screen-sm-min) {
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     width: @modal-md;
@@ -145,6 +145,6 @@
   .modal-sm { width: @modal-sm; }
 }
 
-@media (min-width: @screen-md-min) {
+@media all and (min-width: @screen-md-min) {
   .modal-lg { width: @modal-lg; }
 }