Adding media queries breakpoints variables

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 70b610e52bf6641618ab464885e737a0c5e3bda9..2b4ca441f314e9ecfdefee2ff3f481bc4cecf150 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5341,7 +5341,7 @@ a.list-group-item.active > .badge,
   display: inherit !important;
 }
 
-@media (min-width: 768px) and (max-width: 979px) {
+@media (min-width: 768px) and (max-width: 992px) {
   .visible-phone {
     display: none !important;
   }
@@ -5362,7 +5362,7 @@ a.list-group-item.active > .badge,
   }
 }
 
-@media (min-width: 980px) {
+@media (min-width: 992px) {
   .visible-phone {
     display: none !important;
   }

diff --git a/less/carousel.less b/less/carousel.less
index 6d32755ee69b0ab4ee0e9c8f275081571dd85197..43bef87e1ef9a3543a2deb20ed3e96b2878c552b 100644 (file)
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -170,8 +170,8 @@
 }
 
 
-// Scale up controls for >768px
-@media screen and (min-width: 768px) {
+// Scale up controls for tablets and up
+@media screen and (min-width: @screen-tablet) {
 
   // Scale up the controls a smidge
   .carousel-control .glyphicon {

diff --git a/less/forms.less b/less/forms.less
index e0017fac7fe7a5df9f3ede6f0b74d6f40283a093..72eab570d7c5c201997dad4b41e3b759a6bbff4a 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -514,7 +514,7 @@ select:focus:invalid {
 // Horizontal forms
 // --------------------------------------------------
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
 
   .form-horizontal {
 

diff --git a/less/grid.less b/less/grid.less
index 8162d99407649fb8479aebdf95331427792ae6b7..3ac727bc7d3070005058cfdb39e5592e41031485 100644 (file)
--- a/less/grid.less
+++ b/less/grid.less
@@ -26,7 +26,7 @@
 .generate-small-grid-columns(@grid-columns);
 
 // Responsive: Tablets and up
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .container {
     max-width: 728px;
   }
@@ -38,14 +38,14 @@
 }
 
 // Responsive: Desktops and up
-@media screen and (min-width: 992px) {
+@media screen and (min-width: @screen-desktop) {
   .container {
     max-width: 940px;
   }
 }
 
 // Responsive: Large desktops and up
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: @screen-large-desktop) {
   .container {
     max-width: 1170px;
   }

diff --git a/less/jumbotron.less b/less/jumbotron.less
index d3c9ac21c8d29cb132dffa54c7ac6a06ac79cc4c..6ff696b56f47fa476fcadccd111c152ffd95176c 100644 (file)
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -20,7 +20,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .jumbotron {
     padding: 50px 60px;
     border-radius: @border-radius-large; // Only round corners at higher resolutions

diff --git a/less/modals.less b/less/modals.less
index c05c3f7b0542162fe6bfb50a3a4e5f2f232e2713..144588a7bfea40d015cd1f2c85282cca7990d83b 100644 (file)
--- a/less/modals.less
+++ b/less/modals.less
@@ -120,7 +120,7 @@
 }
 
 // Scale up the modal
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
 
   .modal-dialog {
     left: 50%;

diff --git a/less/navbar.less b/less/navbar.less
index 01d747ef52a4b9561ef53e778fcd78cbc966ba40..78b837bdf407134116cab40288d670e9e07b17df 100644 (file)
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -269,7 +269,7 @@
 // Inverse navbar
 // --------------------------------------------------
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .navbar {
     padding-top: 0;
     padding-bottom: 0;

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index f6bfd9611fee4a216e6a85519ab024202b6d4010..9cea0cef6eb021d4ad91f5527c72aa162c78a9fa 100644 (file)
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -46,7 +46,7 @@
 
 
 // Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
+@media (min-width: @screen-tablet) and (max-width: @screen-desktop) {
   .visible-phone    { display: none !important; }
   .visible-tablet    { display: inherit !important; }
   .visible-desktop   { display: none !important; }
@@ -57,7 +57,7 @@
 }
 
 // For desktops
-@media (min-width: 980px) {
+@media (min-width: @screen-desktop) {
   .visible-phone     { display: none !important; }
   .visible-tablet    { display: none !important; }
   .visible-desktop   { display: inherit !important; }

diff --git a/less/scaffolding.less b/less/scaffolding.less
index 79366071058c616422dd7c47a194a63d1775b400..6781a958223d7d281ea26986176383c37972ad82 100644 (file)
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -22,7 +22,7 @@ html {
 }
 
 // Disable iOS/WinMobile font size changes
-@media screen and (max-device-width: 480px) {
+@media screen and (max-device-width: @screen-phone) {
   html {
     -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;

diff --git a/less/variables.less b/less/variables.less
index 1c19fd514339d8b099700a6d57145b2ae30962ed..e09547e8aa0d44a1dc741df332d27c4c2617539a 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -369,6 +369,22 @@
 @component-offset-horizontal: 180px;
 
 
+// Media queries breakpoints
+// --------------------------------------------------
+
+// Tiny screen / phone
+@screen-tiny:                480px;
+@screen-phone:               @screen-tiny;
+// Small screen / tablet
+@screen-small:               768px;
+@screen-tablet:              @screen-small;
+// Medium screen / desktop
+@screen-medium:              992px;
+@screen-desktop:             @screen-medium;
+// Large screen / wide desktop
+@screen-large:               1200px;
+@screen-large-desktop:       @screen-large;
+
 
 // Grid system
 // --------------------------------------------------
@@ -378,4 +394,4 @@
 // Padding, to be divided by two and applied to the left and right of all columns
 @grid-gutter-width:         30px;
 // Point at which the navbar stops collapsing
-@grid-float-breakpoint:     768px;
+@grid-float-breakpoint:     @screen-tablet;