From f61fe3c4746ec09ff64756797fe6314be5f53b30 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2011 21:13:26 -0700 Subject: [PATCH 01/25] refactor fluid layout to be more specific to not interfere with modal content while adding right sidebar option --- bootstrap.css | 49 +++++++------- bootstrap.min.css | 22 ++++--- docs/index.html | 2 +- examples/fluid-reverse.html | 126 ++++++++++++++++++++++++++++++++++++ examples/fluid.html | 8 +-- lib/patterns.less | 85 ++++++++++++------------ lib/scaffolding.less | 26 +++++--- 7 files changed, 229 insertions(+), 89 deletions(-) create mode 100644 examples/fluid-reverse.html diff --git a/bootstrap.css b/bootstrap.css index ab96f6c7c6..8022cf2a00 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: Tue Oct 4 01:15:08 PDT 2011 + * Date: Sun Oct 9 21:12:03 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). @@ -205,29 +205,38 @@ body { .container:after { clear: both; } -.container-fluid { +.fluid-container { position: relative; min-width: 940px; padding-left: 20px; padding-right: 20px; zoom: 1; } -.container-fluid:before, .container-fluid:after { +.fluid-container:before, .fluid-container:after { display: table; content: ""; zoom: 1; *display: inline; } -.container-fluid:after { +.fluid-container:after { clear: both; } -.container-fluid > .sidebar { - float: left; +.fluid-sidebar-left, .fluid-sidebar-right { width: 220px; } -.container-fluid > .content { +.fluid-sidebar-left { + float: left; +} +.fluid-sidebar-right { + float: right; +} +.fluid-content { margin-left: 240px; } +.fluid-container.reverse .fluid-content { + margin-left: 0; + margin-right: 240px; +} a { color: #0069d6; text-decoration: none; @@ -1142,19 +1151,12 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-color: transparent; color: #ffffff; } -.topbar form { - float: left; - margin: 5px 0 0 0; +.topbar .form-search { position: relative; - filter: alpha(opacity=100); - -khtml-opacity: 1; - -moz-opacity: 1; - opacity: 1; + margin-top: 5px; + margin-bottom: 0; } -.topbar form.pull-right { - float: right; -} -.topbar input { +.topbar .form-search input { background-color: #444; background-color: rgba(255, 255, 255, 0.3); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -1177,18 +1179,18 @@ table .headerSortUp.purple, table .headerSortDown.purple { -o-transition: none; transition: none; } -.topbar input:-moz-placeholder { +.topbar .form-search input:-moz-placeholder { color: #e6e6e6; } -.topbar input::-webkit-input-placeholder { +.topbar .form-search input::-webkit-input-placeholder { color: #e6e6e6; } -.topbar input:hover { +.topbar .form-search input:hover { background-color: #bfbfbf; background-color: rgba(255, 255, 255, 0.5); color: #ffffff; } -.topbar input:focus, .topbar input.focused { +.topbar .form-search input:focus, .topbar .form-search input.focused { outline: 0; background-color: #ffffff; color: #404040; @@ -1199,6 +1201,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } +.topbar .pull-right { + float: right; +} .topbar-inner { background-color: #222; background-color: #222222; diff --git a/bootstrap.min.css b/bootstrap.min.css index 9a241d80d0..325c50e92b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -24,10 +24,13 @@ html,body{background-color:#ffffff;} body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;} .container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} .container:after{clear:both;} -.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;} -.container-fluid:after{clear:both;} -.container-fluid>.sidebar{float:left;width:220px;} -.container-fluid>.content{margin-left:240px;} +.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";zoom:1;*display:inline;} +.fluid-container:after{clear:both;} +.fluid-sidebar-left,.fluid-sidebar-right{width:220px;} +.fluid-sidebar-left{float:left;} +.fluid-sidebar-right{float:right;} +.fluid-content{margin-left:240px;} +.fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;} a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;} .pull-right{float:right;} .pull-left{float:left;} @@ -200,12 +203,11 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .topbar .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} .topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} .topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;color:#ffffff;} -.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} -.topbar form.pull-right{float:right;} -.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;} -.topbar input::-webkit-input-placeholder{color:#e6e6e6;} -.topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} -.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);} +.topbar .form-search{position:relative;margin-top:5px;margin-bottom:0;}.topbar .form-search input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar .form-search input:-moz-placeholder{color:#e6e6e6;} +.topbar .form-search input::-webkit-input-placeholder{color:#e6e6e6;} +.topbar .form-search input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} +.topbar .form-search input:focus,.topbar .form-search input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);} +.topbar .pull-right{float:right;} .topbar-inner{background-color:#222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);} .nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav a:hover{color:#ffffff;text-decoration:none;} diff --git a/docs/index.html b/docs/index.html index 137144991f..194111b780 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1278,7 +1278,7 @@ -
+