From: Mark Otto Date: Mon, 25 Jun 2012 23:25:50 +0000 (-0700) Subject: reorder media queries X-Git-Tag: v2.1.0~2^2~240 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=94a3d4eb14bc4674971617d6114c4fb7b08b3b7d;p=thirdparty%2Fbootstrap.git reorder media queries --- 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,120 +72,24 @@ } } -@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; - } - .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; + .visible-phone { + display: inherit !important; } - [class*="span"], - .row-fluid [class*="span"] { - display: block; - float: none; - width: auto; - margin-left: 0; + .hidden-phone { + display: none !important; } - .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; + .hidden-desktop { + display: inherit !important; } - .input-prepend input, - .input-append input, - .input-prepend input[class*="span"], - .input-append input[class*="span"] { - display: inline-block; - width: auto; + .visible-desktop { + display: none !important; } } -@media (min-width: 768px) and (max-width: 979px) { +@media (min-width: 1200px) { .row { - margin-left: -20px; + margin-left: -30px; *zoom: 1; } .row:before, @@ -213,84 +102,84 @@ } [class*="span"] { float: left; - margin-left: 20px; + margin-left: 30px; } .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { - width: 724px; + width: 1170px; } .span12 { - width: 724px; + width: 1170px; } .span11 { - width: 662px; + width: 1070px; } .span10 { - width: 600px; + width: 970px; } .span9 { - width: 538px; + width: 870px; } .span8 { - width: 476px; + width: 770px; } .span7 { - width: 414px; + width: 670px; } .span6 { - width: 352px; + width: 570px; } .span5 { - width: 290px; + width: 470px; } .span4 { - width: 228px; + width: 370px; } .span3 { - width: 166px; + width: 270px; } .span2 { - width: 104px; + width: 170px; } .span1 { - width: 42px; + width: 70px; } .offset12 { - margin-left: 764px; + margin-left: 1230px; } .offset11 { - margin-left: 702px; + margin-left: 1130px; } .offset10 { - margin-left: 640px; + margin-left: 1030px; } .offset9 { - margin-left: 578px; + margin-left: 930px; } .offset8 { - margin-left: 516px; + margin-left: 830px; } .offset7 { - margin-left: 454px; + margin-left: 730px; } .offset6 { - margin-left: 392px; + margin-left: 630px; } .offset5 { - margin-left: 330px; + margin-left: 530px; } .offset4 { - margin-left: 268px; + margin-left: 430px; } .offset3 { - margin-left: 206px; + margin-left: 330px; } .offset2 { - margin-left: 144px; + margin-left: 230px; } .offset1 { - margin-left: 82px; + margin-left: 130px; } .row-fluid { width: 100%; @@ -309,8 +198,8 @@ float: left; width: 100%; min-height: 28px; - margin-left: 2.762430939%; - *margin-left: 2.709239449638298%; + margin-left: 2.564102564%; + *margin-left: 2.510911074638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -320,148 +209,148 @@ margin-left: 0; } .row-fluid .span12 { - width: 99.999999993%; - *width: 99.9468085036383%; + width: 100%; + *width: 99.94680851063829%; } .row-fluid .span11 { - width: 91.436464082%; - *width: 91.38327259263829%; + width: 91.45299145300001%; + *width: 91.3997999636383%; } .row-fluid .span10 { - width: 82.87292817100001%; - *width: 82.8197366816383%; + width: 82.905982906%; + *width: 82.8527914166383%; } .row-fluid .span9 { - width: 74.30939226%; - *width: 74.25620077063829%; + width: 74.358974359%; + *width: 74.30578286963829%; } .row-fluid .span8 { - width: 65.74585634900001%; - *width: 65.6926648596383%; + width: 65.81196581200001%; + *width: 65.7587743226383%; } .row-fluid .span7 { - width: 57.182320438000005%; - *width: 57.129128948638304%; + width: 57.264957265%; + *width: 57.2117657756383%; } .row-fluid .span6 { - width: 48.618784527%; - *width: 48.5655930376383%; + width: 48.717948718%; + *width: 48.6647572286383%; } .row-fluid .span5 { - width: 40.055248616%; - *width: 40.0020571266383%; + width: 40.170940171000005%; + *width: 40.117748681638304%; } .row-fluid .span4 { - width: 31.491712705%; - *width: 31.4385212156383%; + width: 31.623931624%; + *width: 31.5707401346383%; } .row-fluid .span3 { - width: 22.928176794%; - *width: 22.874985304638297%; + width: 23.076923077%; + *width: 23.0237315876383%; } .row-fluid .span2 { - width: 14.364640883%; - *width: 14.311449393638298%; + width: 14.529914530000001%; + *width: 14.4767230406383%; } .row-fluid .span1 { - width: 5.801104972%; - *width: 5.747913482638298%; + width: 5.982905983%; + *width: 5.929714493638298%; } .row-fluid .offset12 { - margin-left: 105.524861871%; - *margin-left: 105.41847889227658%; + margin-left: 105.128205128%; + *margin-left: 105.02182214927659%; } .row-fluid .offset12:first-child { - margin-left: 102.762430932%; - *margin-left: 102.65604795327658%; + margin-left: 102.564102564%; + *margin-left: 102.45771958527658%; } .row-fluid .offset11 { - margin-left: 96.96132596%; - *margin-left: 96.85494298127658%; + margin-left: 96.58119658100001%; + *margin-left: 96.4748136022766%; } .row-fluid .offset11:first-child { - margin-left: 94.198895021%; - *margin-left: 94.09251204227658%; + margin-left: 94.017094017%; + *margin-left: 93.91071103827659%; } .row-fluid .offset10 { - margin-left: 88.39779004900001%; - *margin-left: 88.29140707027659%; + margin-left: 88.03418803400001%; + *margin-left: 87.9278050552766%; } .row-fluid .offset10:first-child { - margin-left: 85.63535911000001%; - *margin-left: 85.5289761312766%; + margin-left: 85.47008547%; + *margin-left: 85.36370249127658%; } .row-fluid .offset9 { - margin-left: 79.83425413799999%; - *margin-left: 79.72787115927657%; + margin-left: 79.487179487%; + *margin-left: 79.38079650827659%; } .row-fluid .offset9:first-child { - margin-left: 77.071823199%; - *margin-left: 76.96544022027658%; + margin-left: 76.923076923%; + *margin-left: 76.81669394427658%; } .row-fluid .offset8 { - margin-left: 71.270718227%; - *margin-left: 71.16433524827659%; + margin-left: 70.94017094000002%; + *margin-left: 70.8337879612766%; } .row-fluid .offset8:first-child { - margin-left: 68.508287288%; - *margin-left: 68.40190430927659%; + margin-left: 68.376068376%; + *margin-left: 68.26968539727659%; } .row-fluid .offset7 { - margin-left: 62.70718231600001%; - *margin-left: 62.600799337276605%; + margin-left: 62.393162393%; + *margin-left: 62.286779414276594%; } .row-fluid .offset7:first-child { - margin-left: 59.944751377%; - *margin-left: 59.8383683982766%; + margin-left: 59.829059829%; + *margin-left: 59.7226768502766%; } .row-fluid .offset6 { - margin-left: 54.143646405000005%; - *margin-left: 54.0372634262766%; + margin-left: 53.846153846%; + *margin-left: 53.7397708672766%; } .row-fluid .offset6:first-child { - margin-left: 51.381215466%; - *margin-left: 51.2748324872766%; + margin-left: 51.282051282000005%; + *margin-left: 51.1756683032766%; } .row-fluid .offset5 { - margin-left: 45.580110494%; - *margin-left: 45.4737275152766%; + margin-left: 45.299145299%; + *margin-left: 45.1927623202766%; } .row-fluid .offset5:first-child { - margin-left: 42.817679555%; - *margin-left: 42.711296576276595%; + margin-left: 42.73504273500001%; + *margin-left: 42.628659756276605%; } .row-fluid .offset4 { - margin-left: 37.016574583%; - *margin-left: 36.9101916042766%; + margin-left: 36.752136752%; + *margin-left: 36.645753773276596%; } .row-fluid .offset4:first-child { - margin-left: 34.254143644%; - *margin-left: 34.1477606652766%; + margin-left: 34.188034188%; + *margin-left: 34.0816512092766%; } .row-fluid .offset3 { - margin-left: 28.453038671999998%; - *margin-left: 28.346655693276595%; + margin-left: 28.205128205%; + *margin-left: 28.0987452262766%; } .row-fluid .offset3:first-child { - margin-left: 25.690607733%; - *margin-left: 25.584224754276597%; + margin-left: 25.641025641%; + *margin-left: 25.534642662276596%; } .row-fluid .offset2 { - margin-left: 19.889502761%; - *margin-left: 19.783119782276597%; + margin-left: 19.658119658%; + *margin-left: 19.551736679276598%; } .row-fluid .offset2:first-child { - margin-left: 17.127071822%; - *margin-left: 17.0206888432766%; + margin-left: 17.094017094%; + *margin-left: 16.9876341152766%; } .row-fluid .offset1 { - margin-left: 11.32596685%; - *margin-left: 11.219583871276598%; + margin-left: 11.111111111%; + *margin-left: 11.004728132276597%; } .row-fluid .offset1:first-child { - margin-left: 8.563535911%; - *margin-left: 8.457152932276596%; + margin-left: 8.547008547%; + *margin-left: 8.440625568276596%; } input, textarea, @@ -471,68 +360,77 @@ input.span12, textarea.span12, .uneditable-input.span12 { - width: 714px; + width: 1160px; } input.span11, textarea.span11, .uneditable-input.span11 { - width: 652px; + width: 1060px; } input.span10, textarea.span10, .uneditable-input.span10 { - width: 590px; + width: 960px; } input.span9, textarea.span9, .uneditable-input.span9 { - width: 528px; + width: 860px; } input.span8, textarea.span8, .uneditable-input.span8 { - width: 466px; + width: 760px; } input.span7, textarea.span7, .uneditable-input.span7 { - width: 404px; + width: 660px; } input.span6, textarea.span6, .uneditable-input.span6 { - width: 342px; + width: 560px; } input.span5, textarea.span5, .uneditable-input.span5 { - width: 280px; + width: 460px; } input.span4, textarea.span4, .uneditable-input.span4 { - width: 218px; + width: 360px; } input.span3, textarea.span3, .uneditable-input.span3 { - width: 156px; + width: 260px; } input.span2, textarea.span2, .uneditable-input.span2 { - width: 94px; + width: 160px; } input.span1, textarea.span1, .uneditable-input.span1 { - width: 32px; + width: 60px; + } + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } + .row-fluid .thumbnails { + margin-left: 0; } } -@media (min-width: 1200px) { +@media (min-width: 768px) and (max-width: 979px) { .row { - margin-left: -30px; + margin-left: -20px; *zoom: 1; } .row:before, @@ -545,84 +443,84 @@ } [class*="span"] { float: left; - margin-left: 30px; + margin-left: 20px; } .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { - width: 1170px; + width: 724px; } .span12 { - width: 1170px; + width: 724px; } .span11 { - width: 1070px; + width: 662px; } .span10 { - width: 970px; + width: 600px; } .span9 { - width: 870px; + width: 538px; } .span8 { - width: 770px; + width: 476px; } .span7 { - width: 670px; + width: 414px; } .span6 { - width: 570px; + width: 352px; } .span5 { - width: 470px; + width: 290px; } .span4 { - width: 370px; + width: 228px; } .span3 { - width: 270px; + width: 166px; } .span2 { - width: 170px; + width: 104px; } .span1 { - width: 70px; + width: 42px; } .offset12 { - margin-left: 1230px; + margin-left: 764px; } .offset11 { - margin-left: 1130px; + margin-left: 702px; } .offset10 { - margin-left: 1030px; + margin-left: 640px; } .offset9 { - margin-left: 930px; + margin-left: 578px; } .offset8 { - margin-left: 830px; + margin-left: 516px; } .offset7 { - margin-left: 730px; + margin-left: 454px; } .offset6 { - margin-left: 630px; + margin-left: 392px; } .offset5 { - margin-left: 530px; + margin-left: 330px; } .offset4 { - margin-left: 430px; + margin-left: 268px; } .offset3 { - margin-left: 330px; + margin-left: 206px; } .offset2 { - margin-left: 230px; + margin-left: 144px; } .offset1 { - margin-left: 130px; + margin-left: 82px; } .row-fluid { width: 100%; @@ -641,8 +539,8 @@ float: left; width: 100%; min-height: 28px; - margin-left: 2.564102564%; - *margin-left: 2.510911074638298%; + margin-left: 2.762430939%; + *margin-left: 2.709239449638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -652,148 +550,148 @@ margin-left: 0; } .row-fluid .span12 { - width: 100%; - *width: 99.94680851063829%; + width: 99.999999993%; + *width: 99.9468085036383%; } .row-fluid .span11 { - width: 91.45299145300001%; - *width: 91.3997999636383%; + width: 91.436464082%; + *width: 91.38327259263829%; } .row-fluid .span10 { - width: 82.905982906%; - *width: 82.8527914166383%; + width: 82.87292817100001%; + *width: 82.8197366816383%; } .row-fluid .span9 { - width: 74.358974359%; - *width: 74.30578286963829%; + width: 74.30939226%; + *width: 74.25620077063829%; } .row-fluid .span8 { - width: 65.81196581200001%; - *width: 65.7587743226383%; + width: 65.74585634900001%; + *width: 65.6926648596383%; } .row-fluid .span7 { - width: 57.264957265%; - *width: 57.2117657756383%; + width: 57.182320438000005%; + *width: 57.129128948638304%; } .row-fluid .span6 { - width: 48.717948718%; - *width: 48.6647572286383%; + width: 48.618784527%; + *width: 48.5655930376383%; } .row-fluid .span5 { - width: 40.170940171000005%; - *width: 40.117748681638304%; + width: 40.055248616%; + *width: 40.0020571266383%; } .row-fluid .span4 { - width: 31.623931624%; - *width: 31.5707401346383%; + width: 31.491712705%; + *width: 31.4385212156383%; } .row-fluid .span3 { - width: 23.076923077%; - *width: 23.0237315876383%; + width: 22.928176794%; + *width: 22.874985304638297%; } .row-fluid .span2 { - width: 14.529914530000001%; - *width: 14.4767230406383%; + width: 14.364640883%; + *width: 14.311449393638298%; } .row-fluid .span1 { - width: 5.982905983%; - *width: 5.929714493638298%; + width: 5.801104972%; + *width: 5.747913482638298%; } .row-fluid .offset12 { - margin-left: 105.128205128%; - *margin-left: 105.02182214927659%; + margin-left: 105.524861871%; + *margin-left: 105.41847889227658%; } .row-fluid .offset12:first-child { - margin-left: 102.564102564%; - *margin-left: 102.45771958527658%; + margin-left: 102.762430932%; + *margin-left: 102.65604795327658%; } .row-fluid .offset11 { - margin-left: 96.58119658100001%; - *margin-left: 96.4748136022766%; + margin-left: 96.96132596%; + *margin-left: 96.85494298127658%; } .row-fluid .offset11:first-child { - margin-left: 94.017094017%; - *margin-left: 93.91071103827659%; + margin-left: 94.198895021%; + *margin-left: 94.09251204227658%; } .row-fluid .offset10 { - margin-left: 88.03418803400001%; - *margin-left: 87.9278050552766%; + margin-left: 88.39779004900001%; + *margin-left: 88.29140707027659%; } .row-fluid .offset10:first-child { - margin-left: 85.47008547%; - *margin-left: 85.36370249127658%; + margin-left: 85.63535911000001%; + *margin-left: 85.5289761312766%; } .row-fluid .offset9 { - margin-left: 79.487179487%; - *margin-left: 79.38079650827659%; + margin-left: 79.83425413799999%; + *margin-left: 79.72787115927657%; } .row-fluid .offset9:first-child { - margin-left: 76.923076923%; - *margin-left: 76.81669394427658%; + margin-left: 77.071823199%; + *margin-left: 76.96544022027658%; } .row-fluid .offset8 { - margin-left: 70.94017094000002%; - *margin-left: 70.8337879612766%; + margin-left: 71.270718227%; + *margin-left: 71.16433524827659%; } .row-fluid .offset8:first-child { - margin-left: 68.376068376%; - *margin-left: 68.26968539727659%; + margin-left: 68.508287288%; + *margin-left: 68.40190430927659%; } .row-fluid .offset7 { - margin-left: 62.393162393%; - *margin-left: 62.286779414276594%; + margin-left: 62.70718231600001%; + *margin-left: 62.600799337276605%; } .row-fluid .offset7:first-child { - margin-left: 59.829059829%; - *margin-left: 59.7226768502766%; + margin-left: 59.944751377%; + *margin-left: 59.8383683982766%; } .row-fluid .offset6 { - margin-left: 53.846153846%; - *margin-left: 53.7397708672766%; + margin-left: 54.143646405000005%; + *margin-left: 54.0372634262766%; } .row-fluid .offset6:first-child { - margin-left: 51.282051282000005%; - *margin-left: 51.1756683032766%; + margin-left: 51.381215466%; + *margin-left: 51.2748324872766%; } .row-fluid .offset5 { - margin-left: 45.299145299%; - *margin-left: 45.1927623202766%; + margin-left: 45.580110494%; + *margin-left: 45.4737275152766%; } .row-fluid .offset5:first-child { - margin-left: 42.73504273500001%; - *margin-left: 42.628659756276605%; + margin-left: 42.817679555%; + *margin-left: 42.711296576276595%; } .row-fluid .offset4 { - margin-left: 36.752136752%; - *margin-left: 36.645753773276596%; + margin-left: 37.016574583%; + *margin-left: 36.9101916042766%; } .row-fluid .offset4:first-child { - margin-left: 34.188034188%; - *margin-left: 34.0816512092766%; + margin-left: 34.254143644%; + *margin-left: 34.1477606652766%; } .row-fluid .offset3 { - margin-left: 28.205128205%; - *margin-left: 28.0987452262766%; + margin-left: 28.453038671999998%; + *margin-left: 28.346655693276595%; } .row-fluid .offset3:first-child { - margin-left: 25.641025641%; - *margin-left: 25.534642662276596%; + margin-left: 25.690607733%; + *margin-left: 25.584224754276597%; } .row-fluid .offset2 { - margin-left: 19.658119658%; - *margin-left: 19.551736679276598%; + margin-left: 19.889502761%; + *margin-left: 19.783119782276597%; } .row-fluid .offset2:first-child { - margin-left: 17.094017094%; - *margin-left: 16.9876341152766%; + margin-left: 17.127071822%; + *margin-left: 17.0206888432766%; } .row-fluid .offset1 { - margin-left: 11.111111111%; - *margin-left: 11.004728132276597%; + margin-left: 11.32596685%; + *margin-left: 11.219583871276598%; } .row-fluid .offset1:first-child { - margin-left: 8.547008547%; - *margin-left: 8.440625568276596%; + margin-left: 8.563535911%; + *margin-left: 8.457152932276596%; } input, textarea, @@ -803,72 +701,174 @@ input.span12, textarea.span12, .uneditable-input.span12 { - width: 1160px; + width: 714px; } input.span11, textarea.span11, .uneditable-input.span11 { - width: 1060px; + width: 652px; } input.span10, textarea.span10, .uneditable-input.span10 { - width: 960px; + width: 590px; } input.span9, textarea.span9, .uneditable-input.span9 { - width: 860px; + width: 528px; } input.span8, textarea.span8, .uneditable-input.span8 { - width: 760px; + width: 466px; } input.span7, textarea.span7, .uneditable-input.span7 { - width: 660px; + width: 404px; } input.span6, textarea.span6, .uneditable-input.span6 { - width: 560px; + width: 342px; } input.span5, textarea.span5, .uneditable-input.span5 { - width: 460px; + width: 280px; } input.span4, textarea.span4, .uneditable-input.span4 { - width: 360px; + width: 218px; } input.span3, textarea.span3, .uneditable-input.span3 { - width: 260px; + width: 156px; } input.span2, textarea.span2, .uneditable-input.span2 { - width: 160px; + width: 94px; } input.span1, textarea.span1, .uneditable-input.span1 { - width: 60px; + 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: -30px; + margin-left: 0; } - .thumbnails > li { - margin-left: 30px; + [class*="span"], + .row-fluid [class*="span"] { + display: block; + float: none; + width: auto; + margin-left: 0; } - .row-fluid .thumbnails { + .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) { 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