From 756e7c8739266ec8594d545e7eec2a50ea06ce08 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 12:11:48 -0700 Subject: [PATCH] more tweaks to responsive --- bootstrap.css | 127 ++++++++++++++++++-------------------------- bootstrap.min.css | 2 +- lib/responsive.less | 5 +- 3 files changed, 56 insertions(+), 78 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index dffa6a8249..3c344e98b7 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sun Oct 16 11:34:52 PDT 2011 + * Date: Sun Oct 16 12:11:34 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -2380,83 +2380,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 768px; } } +/* +// LARGE DESKTOP & UP +// ------------------ + @media (min-width: 1170px) { - .container { - width: 1170px; - } - [class*="span"] { - margin-left: 30px; - } - .span1 { - width: 70px; - } - .span2 { - width: 170px; - } - .span3 { - width: 270px; - } - .span4 { - width: 370px; - } - .span5 { - width: 470px; - } - .span6 { - width: 570px; - } - .span7 { - width: 670px; - } - .span8 { - width: 770px; - } - .span9 { - width: 870px; - } - .span10 { - width: 970px; - } - .span11 { - width: 1070px; - } - .span12 { - width: 1170px; - } - .offset1 { - margin-left: 100px; - } - .offset2 { - margin-left: 200px; - } - .offset3 { - margin-left: 300px; - } - .offset4 { - margin-left: 400px; - } - .offset5 { - margin-left: 500px; - } - .offset6 { - margin-left: 600px; - } - .offset7 { - margin-left: 700px; - } - .offset8 { - margin-left: 800px; - } - .offset9 { - margin-left: 900px; + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } - .offset10 { - margin-left: 1000px; + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } - .offset11 { - margin-left: 1100px; + + .container { + width: @siteWidth; } - .offset12 { - margin-left: 1200px; + [class*="span"] { + margin-left: @gridGutterWidth; } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + } +*/ \ No newline at end of file diff --git a/bootstrap.min.css b/bootstrap.min.css index a6ef9baf53..e4dccdef93 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -322,4 +322,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .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-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .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-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/responsive.less b/lib/responsive.less index 5c8e0539e8..afd30f279e 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,7 +121,7 @@ } - +/* // LARGE DESKTOP & UP // ------------------ @@ -176,4 +176,5 @@ .offset11 { .offset(11); } .offset12 { .offset(12); } -} \ No newline at end of file +} +*/ \ No newline at end of file -- 2.47.2