diff options
| -rw-r--r-- | docs/assets/css/bootstrap.css | 4 | ||||
| -rw-r--r-- | less/carousel.less | 4 | ||||
| -rw-r--r-- | less/forms.less | 2 | ||||
| -rw-r--r-- | less/grid.less | 6 | ||||
| -rw-r--r-- | less/jumbotron.less | 2 | ||||
| -rw-r--r-- | less/modals.less | 2 | ||||
| -rw-r--r-- | less/navbar.less | 2 | ||||
| -rw-r--r-- | less/responsive-utilities.less | 4 | ||||
| -rw-r--r-- | less/scaffolding.less | 2 | ||||
| -rw-r--r-- | less/variables.less | 18 |
10 files changed, 31 insertions, 15 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 70b610e52..2b4ca441f 100644 --- 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 6d32755ee..43bef87e1 100644 --- 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 e0017fac7..72eab570d 100644 --- 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 8162d9940..3ac727bc7 100644 --- 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 d3c9ac21c..6ff696b56 100644 --- 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 c05c3f7b0..144588a7b 100644 --- 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 01d747ef5..78b837bdf 100644 --- 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 f6bfd9611..9cea0cef6 100644 --- 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 793660710..6781a9582 100644 --- 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 1c19fd514..e09547e8a 100644 --- 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; |