From 94a3d4eb14bc4674971617d6114c4fb7b08b3b7d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 16:25:50 -0700 Subject: [PATCH] reorder media queries --- docs/assets/css/bootstrap-responsive.css | 902 +++++++++++------------ less/responsive-767px-max.less | 134 ++-- less/responsive-utilities.less | 22 +- less/responsive.less | 8 +- 4 files changed, 533 insertions(+), 533 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index a8bf03d725..ac6571fd84 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -57,21 +57,6 @@ display: none !important; } -@media (max-width: 767px) { - .visible-phone { - display: inherit !important; - } - .hidden-phone { - display: none !important; - } - .hidden-desktop { - display: inherit !important; - } - .visible-desktop { - display: none !important; - } -} - @media (min-width: 768px) and (max-width: 979px) { .visible-tablet { display: inherit !important; @@ -87,446 +72,18 @@ } } -@media (max-width: 480px) { - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); - } - .page-header h1 small { - display: block; - line-height: 18px; - } - input[type="checkbox"], - input[type="radio"] { - border: 1px solid #ccc; - } - .form-horizontal .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - .form-horizontal .controls { - margin-left: 0; - } - .form-horizontal .control-list { - padding-top: 0; - } - .form-horizontal .form-actions { - padding-right: 10px; - padding-left: 10px; - } - .modal { - position: fixed; - top: 10px; - right: 10px; - left: 10px; - width: auto; - margin: 0; - } - .modal.fade.in { - top: auto; - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - .carousel-caption { - position: static; - } -} - @media (max-width: 767px) { - body { - padding-right: 20px; - padding-left: 20px; + .visible-phone { + display: inherit !important; } - .navbar-fixed-top, - .navbar-fixed-bottom { - margin-right: -20px; - margin-left: -20px; + .hidden-phone { + display: none !important; } - .container-fluid { - padding: 0; + .hidden-desktop { + display: inherit !important; } - .dl-horizontal dt { - float: none; - width: auto; - clear: none; - text-align: left; - } - .dl-horizontal dd { - margin-left: 0; - } - .container { - width: auto; - } - .row-fluid { - width: 100%; - } - .row, - .thumbnails { - margin-left: 0; - } - [class*="span"], - .row-fluid [class*="span"] { - display: block; - float: none; - width: auto; - margin-left: 0; - } - .input-large, - .input-xlarge, - .input-xxlarge, - input[class*="span"], - select[class*="span"], - textarea[class*="span"], - .uneditable-input { - display: block; - width: 100%; - min-height: 28px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - } - .input-prepend input, - .input-append input, - .input-prepend input[class*="span"], - .input-append input[class*="span"] { - display: inline-block; - width: auto; - } -} - -@media (min-width: 768px) and (max-width: 979px) { - .row { - margin-left: -20px; - *zoom: 1; - } - .row:before, - .row:after { - display: table; - content: ""; - } - .row:after { - clear: both; - } - [class*="span"] { - float: left; - margin-left: 20px; - } - .container, - .navbar-fixed-top .container, - .navbar-fixed-bottom .container { - width: 724px; - } - .span12 { - width: 724px; - } - .span11 { - width: 662px; - } - .span10 { - width: 600px; - } - .span9 { - width: 538px; - } - .span8 { - width: 476px; - } - .span7 { - width: 414px; - } - .span6 { - width: 352px; - } - .span5 { - width: 290px; - } - .span4 { - width: 228px; - } - .span3 { - width: 166px; - } - .span2 { - width: 104px; - } - .span1 { - width: 42px; - } - .offset12 { - margin-left: 764px; - } - .offset11 { - margin-left: 702px; - } - .offset10 { - margin-left: 640px; - } - .offset9 { - margin-left: 578px; - } - .offset8 { - margin-left: 516px; - } - .offset7 { - margin-left: 454px; - } - .offset6 { - margin-left: 392px; - } - .offset5 { - margin-left: 330px; - } - .offset4 { - margin-left: 268px; - } - .offset3 { - margin-left: 206px; - } - .offset2 { - margin-left: 144px; - } - .offset1 { - margin-left: 82px; - } - .row-fluid { - width: 100%; - *zoom: 1; - } - .row-fluid:before, - .row-fluid:after { - display: table; - content: ""; - } - .row-fluid:after { - clear: both; - } - .row-fluid [class*="span"] { - display: block; - float: left; - width: 100%; - min-height: 28px; - margin-left: 2.762430939%; - *margin-left: 2.709239449638298%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - } - .row-fluid [class*="span"]:first-child { - margin-left: 0; - } - .row-fluid .span12 { - width: 99.999999993%; - *width: 99.9468085036383%; - } - .row-fluid .span11 { - width: 91.436464082%; - *width: 91.38327259263829%; - } - .row-fluid .span10 { - width: 82.87292817100001%; - *width: 82.8197366816383%; - } - .row-fluid .span9 { - width: 74.30939226%; - *width: 74.25620077063829%; - } - .row-fluid .span8 { - width: 65.74585634900001%; - *width: 65.6926648596383%; - } - .row-fluid .span7 { - width: 57.182320438000005%; - *width: 57.129128948638304%; - } - .row-fluid .span6 { - width: 48.618784527%; - *width: 48.5655930376383%; - } - .row-fluid .span5 { - width: 40.055248616%; - *width: 40.0020571266383%; - } - .row-fluid .span4 { - width: 31.491712705%; - *width: 31.4385212156383%; - } - .row-fluid .span3 { - width: 22.928176794%; - *width: 22.874985304638297%; - } - .row-fluid .span2 { - width: 14.364640883%; - *width: 14.311449393638298%; - } - .row-fluid .span1 { - width: 5.801104972%; - *width: 5.747913482638298%; - } - .row-fluid .offset12 { - margin-left: 105.524861871%; - *margin-left: 105.41847889227658%; - } - .row-fluid .offset12:first-child { - margin-left: 102.762430932%; - *margin-left: 102.65604795327658%; - } - .row-fluid .offset11 { - margin-left: 96.96132596%; - *margin-left: 96.85494298127658%; - } - .row-fluid .offset11:first-child { - margin-left: 94.198895021%; - *margin-left: 94.09251204227658%; - } - .row-fluid .offset10 { - margin-left: 88.39779004900001%; - *margin-left: 88.29140707027659%; - } - .row-fluid .offset10:first-child { - margin-left: 85.63535911000001%; - *margin-left: 85.5289761312766%; - } - .row-fluid .offset9 { - margin-left: 79.83425413799999%; - *margin-left: 79.72787115927657%; - } - .row-fluid .offset9:first-child { - margin-left: 77.071823199%; - *margin-left: 76.96544022027658%; - } - .row-fluid .offset8 { - margin-left: 71.270718227%; - *margin-left: 71.16433524827659%; - } - .row-fluid .offset8:first-child { - margin-left: 68.508287288%; - *margin-left: 68.40190430927659%; - } - .row-fluid .offset7 { - margin-left: 62.70718231600001%; - *margin-left: 62.600799337276605%; - } - .row-fluid .offset7:first-child { - margin-left: 59.944751377%; - *margin-left: 59.8383683982766%; - } - .row-fluid .offset6 { - margin-left: 54.143646405000005%; - *margin-left: 54.0372634262766%; - } - .row-fluid .offset6:first-child { - margin-left: 51.381215466%; - *margin-left: 51.2748324872766%; - } - .row-fluid .offset5 { - margin-left: 45.580110494%; - *margin-left: 45.4737275152766%; - } - .row-fluid .offset5:first-child { - margin-left: 42.817679555%; - *margin-left: 42.711296576276595%; - } - .row-fluid .offset4 { - margin-left: 37.016574583%; - *margin-left: 36.9101916042766%; - } - .row-fluid .offset4:first-child { - margin-left: 34.254143644%; - *margin-left: 34.1477606652766%; - } - .row-fluid .offset3 { - margin-left: 28.453038671999998%; - *margin-left: 28.346655693276595%; - } - .row-fluid .offset3:first-child { - margin-left: 25.690607733%; - *margin-left: 25.584224754276597%; - } - .row-fluid .offset2 { - margin-left: 19.889502761%; - *margin-left: 19.783119782276597%; - } - .row-fluid .offset2:first-child { - margin-left: 17.127071822%; - *margin-left: 17.0206888432766%; - } - .row-fluid .offset1 { - margin-left: 11.32596685%; - *margin-left: 11.219583871276598%; - } - .row-fluid .offset1:first-child { - margin-left: 8.563535911%; - *margin-left: 8.457152932276596%; - } - input, - textarea, - .uneditable-input { - margin-left: 0; - } - input.span12, - textarea.span12, - .uneditable-input.span12 { - width: 714px; - } - input.span11, - textarea.span11, - .uneditable-input.span11 { - width: 652px; - } - input.span10, - textarea.span10, - .uneditable-input.span10 { - width: 590px; - } - input.span9, - textarea.span9, - .uneditable-input.span9 { - width: 528px; - } - input.span8, - textarea.span8, - .uneditable-input.span8 { - width: 466px; - } - input.span7, - textarea.span7, - .uneditable-input.span7 { - width: 404px; - } - input.span6, - textarea.span6, - .uneditable-input.span6 { - width: 342px; - } - input.span5, - textarea.span5, - .uneditable-input.span5 { - width: 280px; - } - input.span4, - textarea.span4, - .uneditable-input.span4 { - width: 218px; - } - input.span3, - textarea.span3, - .uneditable-input.span3 { - width: 156px; - } - input.span2, - textarea.span2, - .uneditable-input.span2 { - width: 94px; - } - input.span1, - textarea.span1, - .uneditable-input.span1 { - width: 32px; + .visible-desktop { + display: none !important; } } @@ -871,6 +428,449 @@ } } +@media (min-width: 768px) and (max-width: 979px) { + .row { + margin-left: -20px; + *zoom: 1; + } + .row:before, + .row:after { + display: table; + content: ""; + } + .row:after { + clear: both; + } + [class*="span"] { + float: left; + margin-left: 20px; + } + .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 724px; + } + .span12 { + width: 724px; + } + .span11 { + width: 662px; + } + .span10 { + width: 600px; + } + .span9 { + width: 538px; + } + .span8 { + width: 476px; + } + .span7 { + width: 414px; + } + .span6 { + width: 352px; + } + .span5 { + width: 290px; + } + .span4 { + width: 228px; + } + .span3 { + width: 166px; + } + .span2 { + width: 104px; + } + .span1 { + width: 42px; + } + .offset12 { + margin-left: 764px; + } + .offset11 { + margin-left: 702px; + } + .offset10 { + margin-left: 640px; + } + .offset9 { + margin-left: 578px; + } + .offset8 { + margin-left: 516px; + } + .offset7 { + margin-left: 454px; + } + .offset6 { + margin-left: 392px; + } + .offset5 { + margin-left: 330px; + } + .offset4 { + margin-left: 268px; + } + .offset3 { + margin-left: 206px; + } + .offset2 { + margin-left: 144px; + } + .offset1 { + margin-left: 82px; + } + .row-fluid { + width: 100%; + *zoom: 1; + } + .row-fluid:before, + .row-fluid:after { + display: table; + content: ""; + } + .row-fluid:after { + clear: both; + } + .row-fluid [class*="span"] { + display: block; + float: left; + width: 100%; + min-height: 28px; + margin-left: 2.762430939%; + *margin-left: 2.709239449638298%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + } + .row-fluid [class*="span"]:first-child { + margin-left: 0; + } + .row-fluid .span12 { + width: 99.999999993%; + *width: 99.9468085036383%; + } + .row-fluid .span11 { + width: 91.436464082%; + *width: 91.38327259263829%; + } + .row-fluid .span10 { + width: 82.87292817100001%; + *width: 82.8197366816383%; + } + .row-fluid .span9 { + width: 74.30939226%; + *width: 74.25620077063829%; + } + .row-fluid .span8 { + width: 65.74585634900001%; + *width: 65.6926648596383%; + } + .row-fluid .span7 { + width: 57.182320438000005%; + *width: 57.129128948638304%; + } + .row-fluid .span6 { + width: 48.618784527%; + *width: 48.5655930376383%; + } + .row-fluid .span5 { + width: 40.055248616%; + *width: 40.0020571266383%; + } + .row-fluid .span4 { + width: 31.491712705%; + *width: 31.4385212156383%; + } + .row-fluid .span3 { + width: 22.928176794%; + *width: 22.874985304638297%; + } + .row-fluid .span2 { + width: 14.364640883%; + *width: 14.311449393638298%; + } + .row-fluid .span1 { + width: 5.801104972%; + *width: 5.747913482638298%; + } + .row-fluid .offset12 { + margin-left: 105.524861871%; + *margin-left: 105.41847889227658%; + } + .row-fluid .offset12:first-child { + margin-left: 102.762430932%; + *margin-left: 102.65604795327658%; + } + .row-fluid .offset11 { + margin-left: 96.96132596%; + *margin-left: 96.85494298127658%; + } + .row-fluid .offset11:first-child { + margin-left: 94.198895021%; + *margin-left: 94.09251204227658%; + } + .row-fluid .offset10 { + margin-left: 88.39779004900001%; + *margin-left: 88.29140707027659%; + } + .row-fluid .offset10:first-child { + margin-left: 85.63535911000001%; + *margin-left: 85.5289761312766%; + } + .row-fluid .offset9 { + margin-left: 79.83425413799999%; + *margin-left: 79.72787115927657%; + } + .row-fluid .offset9:first-child { + margin-left: 77.071823199%; + *margin-left: 76.96544022027658%; + } + .row-fluid .offset8 { + margin-left: 71.270718227%; + *margin-left: 71.16433524827659%; + } + .row-fluid .offset8:first-child { + margin-left: 68.508287288%; + *margin-left: 68.40190430927659%; + } + .row-fluid .offset7 { + margin-left: 62.70718231600001%; + *margin-left: 62.600799337276605%; + } + .row-fluid .offset7:first-child { + margin-left: 59.944751377%; + *margin-left: 59.8383683982766%; + } + .row-fluid .offset6 { + margin-left: 54.143646405000005%; + *margin-left: 54.0372634262766%; + } + .row-fluid .offset6:first-child { + margin-left: 51.381215466%; + *margin-left: 51.2748324872766%; + } + .row-fluid .offset5 { + margin-left: 45.580110494%; + *margin-left: 45.4737275152766%; + } + .row-fluid .offset5:first-child { + margin-left: 42.817679555%; + *margin-left: 42.711296576276595%; + } + .row-fluid .offset4 { + margin-left: 37.016574583%; + *margin-left: 36.9101916042766%; + } + .row-fluid .offset4:first-child { + margin-left: 34.254143644%; + *margin-left: 34.1477606652766%; + } + .row-fluid .offset3 { + margin-left: 28.453038671999998%; + *margin-left: 28.346655693276595%; + } + .row-fluid .offset3:first-child { + margin-left: 25.690607733%; + *margin-left: 25.584224754276597%; + } + .row-fluid .offset2 { + margin-left: 19.889502761%; + *margin-left: 19.783119782276597%; + } + .row-fluid .offset2:first-child { + margin-left: 17.127071822%; + *margin-left: 17.0206888432766%; + } + .row-fluid .offset1 { + margin-left: 11.32596685%; + *margin-left: 11.219583871276598%; + } + .row-fluid .offset1:first-child { + margin-left: 8.563535911%; + *margin-left: 8.457152932276596%; + } + input, + textarea, + .uneditable-input { + margin-left: 0; + } + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 714px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 652px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 590px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 528px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 466px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 404px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 342px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 280px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 218px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 156px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 94px; + } + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 32px; + } +} + +@media (max-width: 767px) { + body { + padding-right: 20px; + padding-left: 20px; + } + .navbar-fixed-top, + .navbar-fixed-bottom { + margin-right: -20px; + margin-left: -20px; + } + .container-fluid { + padding: 0; + } + .dl-horizontal dt { + float: none; + width: auto; + clear: none; + text-align: left; + } + .dl-horizontal dd { + margin-left: 0; + } + .container { + width: auto; + } + .row-fluid { + width: 100%; + } + .row, + .thumbnails { + margin-left: 0; + } + [class*="span"], + .row-fluid [class*="span"] { + display: block; + float: none; + width: auto; + margin-left: 0; + } + .input-large, + .input-xlarge, + .input-xxlarge, + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + display: block; + width: 100%; + min-height: 28px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + } + .input-prepend input, + .input-append input, + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + display: inline-block; + width: auto; + } +} + +@media (max-width: 480px) { + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); + } + .page-header h1 small { + display: block; + line-height: 18px; + } + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .form-horizontal .controls { + margin-left: 0; + } + .form-horizontal .control-list { + padding-top: 0; + } + .form-horizontal .form-actions { + padding-right: 10px; + padding-left: 10px; + } + .modal { + position: fixed; + top: 10px; + right: 10px; + left: 10px; + width: auto; + margin: 0; + } + .modal.fade.in { + top: auto; + } + .modal-header .close { + padding: 10px; + margin: -10px; + } + .carousel-caption { + position: static; + } +} + @media (max-width: 979px) { body { padding-top: 0; 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,17 +18,6 @@ .hidden-tablet { } .hidden-desktop { display: none !important; } -// Phones only -@media (max-width: 767px) { - // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior - // Hide - .hidden-phone { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } -} - // Tablets & small desktops only @media (min-width: 768px) and (max-width: 979px) { // Show @@ -39,3 +28,14 @@ .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important ; } } + +// Phones only +@media (max-width: 767px) { + // Show + .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior + // Hide + .hidden-phone { display: none !important; } + // Hide everything else + .hidden-desktop { display: inherit !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