diff options
author | Mark Otto <markotto@twitter.com> | 2012-06-26 03:25:50 +0400 |
---|---|---|
committer | Mark Otto <markotto@twitter.com> | 2012-06-26 03:25:50 +0400 |
commit | 94a3d4eb14bc4674971617d6114c4fb7b08b3b7d (patch) | |
tree | af6d1b693e59f3125d9939e556c8f939a49ef6e2 /less | |
parent | 8c2db7d7d62d22183601364e7dcaee4a12b083ea (diff) |
reorder media queries
Diffstat (limited to 'less')
-rw-r--r-- | less/responsive-767px-max.less | 134 | ||||
-rw-r--r-- | less/responsive-utilities.less | 20 | ||||
-rw-r--r-- | less/responsive.less | 8 |
3 files changed, 81 insertions, 81 deletions
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index ab724e407c..84d1ba13fc 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -1,70 +1,3 @@ -// UP TO LANDSCAPE PHONE -// --------------------- - -@media (max-width: 480px) { - - // Smooth out the collapsing/expanding nav - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); // activate the GPU - } - - // Block level the page header small tag for readability - .page-header h1 small { - display: block; - line-height: @baseLineHeight; - } - - // Update checkboxes for iOS - input[type="checkbox"], - input[type="radio"] { - border: 1px solid #ccc; - } - - // Remove the horizontal form styles - .form-horizontal .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - // Move over all input controls and content - .form-horizontal .controls { - margin-left: 0; - } - // Move the options list down to align with labels - .form-horizontal .control-list { - padding-top: 0; // has to be padding because margin collaspes - } - // Move over buttons in .form-actions to align with .controls - .form-horizontal .form-actions { - padding-left: 10px; - padding-right: 10px; - } - - // Modals - .modal { - position: fixed; - top: 10px; - left: 10px; - right: 10px; - width: auto; - margin: 0; - &.fade.in { top: auto; } - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - - // Carousel - .carousel-caption { - position: static; - } - -} - - - // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET // -------------------------------------------------- @@ -147,3 +80,70 @@ } } + + + +// UP TO LANDSCAPE PHONE +// --------------------- + +@media (max-width: 480px) { + + // Smooth out the collapsing/expanding nav + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); // activate the GPU + } + + // Block level the page header small tag for readability + .page-header h1 small { + display: block; + line-height: @baseLineHeight; + } + + // Update checkboxes for iOS + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + + // Remove the horizontal form styles + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + // Move over all input controls and content + .form-horizontal .controls { + margin-left: 0; + } + // Move the options list down to align with labels + .form-horizontal .control-list { + padding-top: 0; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-horizontal .form-actions { + padding-left: 10px; + padding-right: 10px; + } + + // Modals + .modal { + position: fixed; + top: 10px; + left: 10px; + right: 10px; + width: auto; + margin: 0; + &.fade.in { top: auto; } + } + .modal-header .close { + padding: 10px; + margin: -10px; + } + + // Carousel + .carousel-caption { + position: static; + } + +} diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 572846c0fa..1962a2f152 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -18,24 +18,24 @@ .hidden-tablet { } .hidden-desktop { display: none !important; } -// Phones only -@media (max-width: 767px) { +// Tablets & small desktops only +@media (min-width: 768px) and (max-width: 979px) { // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior + .visible-tablet { display: inherit !important; } // Hide - .hidden-phone { display: none !important; } + .hidden-tablet { display: none !important; } // Hide everything else .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } + .visible-desktop { display: none !important ; } } -// Tablets & small desktops only -@media (min-width: 768px) and (max-width: 979px) { +// Phones only +@media (max-width: 767px) { // Show - .visible-tablet { display: inherit !important; } + .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior // Hide - .hidden-tablet { display: none !important; } + .hidden-phone { display: none !important; } // Hide everything else .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } + .visible-desktop { display: none !important; } } diff --git a/less/responsive.less b/less/responsive.less index 734b1988bf..2410838574 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -31,14 +31,14 @@ // MEDIA QUERIES // ------------------ -// Phones to portrait tablets and narrow desktops -@import "responsive-767px-max.less"; +// Large desktops +@import "responsive-1200px-min.less"; // Tablets to regular desktops @import "responsive-768px-979px.less"; -// Large desktops -@import "responsive-1200px-min.less"; +// Phones to portrait tablets and narrow desktops +@import "responsive-767px-max.less"; // RESPONSIVE NAVBAR |