Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
authorMark Otto <markotto@twitter.com>2012-06-26 03:25:50 +0400
committerMark Otto <markotto@twitter.com>2012-06-26 03:25:50 +0400
commit94a3d4eb14bc4674971617d6114c4fb7b08b3b7d (patch)
treeaf6d1b693e59f3125d9939e556c8f939a49ef6e2 /less
parent8c2db7d7d62d22183601364e7dcaee4a12b083ea (diff)
reorder media queries
Diffstat (limited to 'less')
-rw-r--r--less/responsive-767px-max.less134
-rw-r--r--less/responsive-utilities.less20
-rw-r--r--less/responsive.less8
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