From ec8619a9808b9b6e721334af8e6b5248ccbea8b5 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 17 Sep 2011 17:21:43 -0700
Subject: [PATCH 01/66] update docs to remove old stuff, update to all new
classes; no more backwards compatibility
---
bootstrap.css | 90 ++++-----------
bootstrap.min.css | 47 ++++----
docs/index.html | 236 +++++++++++++++++++++------------------
docs/javascript.html | 8 +-
js/bootstrap-dropdown.js | 4 +-
lib/patterns.less | 46 +-------
6 files changed, 180 insertions(+), 251 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 8b6fe3eb42..6d3c15390a 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: Fri Sep 16 14:07:03 PDT 2011
+ * Date: Sat Sep 17 17:21:25 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).
@@ -1238,16 +1238,13 @@ table .headerSortUp.purple, table .headerSortDown.purple {
color: #bfbfbf;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
-.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a {
+.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 h3 {
- position: relative;
-}
-.topbar h3 a, .topbar .brand {
+.topbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
@@ -1322,7 +1319,7 @@ 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-inner, .topbar .fill {
+.topbar-inner {
background-color: #222;
background-color: #222222;
background-repeat: repeat-x;
@@ -1338,92 +1335,59 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-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);
}
-.topbar div > ul, .nav {
+.nav {
display: block;
float: left;
margin: 0 10px 0 0;
position: relative;
left: 0;
}
-.topbar div > ul > li, .nav > li {
+.nav > li {
display: block;
float: left;
}
-.topbar div > ul a, .nav a {
+.nav a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
}
-.topbar div > ul a:hover, .nav a:hover {
+.nav a:hover {
color: #ffffff;
text-decoration: none;
}
-.topbar div > ul .active > a, .nav .active > a {
+.nav .active > a {
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
-.topbar div > ul.secondary-nav, .nav.secondary-nav {
+.nav.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
-.topbar div > ul.secondary-nav .menu-dropdown,
-.nav.secondary-nav .menu-dropdown,
-.topbar div > ul.secondary-nav .dropdown-menu,
.nav.secondary-nav .dropdown-menu {
right: 0;
border: 0;
}
-.topbar div > ul a.menu:hover,
-.nav a.menu:hover,
-.topbar div > ul li.open .menu,
-.nav li.open .menu,
-.topbar div > ul .dropdown-toggle:hover,
-.nav .dropdown-toggle:hover,
-.topbar div > ul .dropdown.open .dropdown-toggle,
-.nav .dropdown.open .dropdown-toggle {
+.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle {
background: #444;
background: rgba(255, 255, 255, 0.05);
}
-.topbar div > ul .menu-dropdown,
-.nav .menu-dropdown,
-.topbar div > ul .dropdown-menu,
.nav .dropdown-menu {
background-color: #333;
}
-.topbar div > ul .menu-dropdown a.menu,
-.nav .menu-dropdown a.menu,
-.topbar div > ul .dropdown-menu a.menu,
-.nav .dropdown-menu a.menu,
-.topbar div > ul .menu-dropdown .dropdown-toggle,
-.nav .menu-dropdown .dropdown-toggle,
-.topbar div > ul .dropdown-menu .dropdown-toggle,
.nav .dropdown-menu .dropdown-toggle {
color: #ffffff;
}
-.topbar div > ul .menu-dropdown a.menu.open,
-.nav .menu-dropdown a.menu.open,
-.topbar div > ul .dropdown-menu a.menu.open,
-.nav .dropdown-menu a.menu.open,
-.topbar div > ul .menu-dropdown .dropdown-toggle.open,
-.nav .menu-dropdown .dropdown-toggle.open,
-.topbar div > ul .dropdown-menu .dropdown-toggle.open,
.nav .dropdown-menu .dropdown-toggle.open {
background: #444;
background: rgba(255, 255, 255, 0.05);
}
-.topbar div > ul .menu-dropdown li a,
-.nav .menu-dropdown li a,
-.topbar div > ul .dropdown-menu li a,
.nav .dropdown-menu li a {
color: #999;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
-.topbar div > ul .menu-dropdown li a:hover,
-.nav .menu-dropdown li a:hover,
-.topbar div > ul .dropdown-menu li a:hover,
.nav .dropdown-menu li a:hover {
background-color: #191919;
background-repeat: repeat-x;
@@ -1437,26 +1401,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
color: #ffffff;
}
-.topbar div > ul .menu-dropdown .active a,
-.nav .menu-dropdown .active a,
-.topbar div > ul .dropdown-menu .active a,
.nav .dropdown-menu .active a {
color: #ffffff;
}
-.topbar div > ul .menu-dropdown .divider,
-.nav .menu-dropdown .divider,
-.topbar div > ul .dropdown-menu .divider,
.nav .dropdown-menu .divider {
background-color: #222;
border-color: #444;
}
-.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
+.topbar ul .dropdown-menu li a {
padding: 4px 15px;
}
-li.menu, .dropdown {
+.dropdown {
position: relative;
}
-a.menu:after, .dropdown-toggle:after {
+.dropdown-toggle:after {
width: 0;
height: 0;
display: inline-block;
@@ -1473,7 +1431,7 @@ a.menu:after, .dropdown-toggle:after {
-moz-opacity: 0.5;
opacity: 0.5;
}
-.menu-dropdown, .dropdown-menu {
+.dropdown-menu {
background-color: #ffffff;
float: left;
display: none;
@@ -1501,12 +1459,12 @@ a.menu:after, .dropdown-toggle:after {
-moz-background-clip: padding-box;
background-clip: padding-box;
}
-.menu-dropdown li, .dropdown-menu li {
+.dropdown-menu li {
float: none;
display: block;
background-color: none;
}
-.menu-dropdown .divider, .dropdown-menu .divider {
+.dropdown-menu .divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
@@ -1539,17 +1497,11 @@ a.menu:after, .dropdown-toggle:after {
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
}
-.open .menu,
-.dropdown.open .menu,
-.open .dropdown-toggle,
.dropdown.open .dropdown-toggle {
color: #ffffff;
background: #ccc;
background: rgba(0, 0, 0, 0.3);
}
-.open .menu-dropdown,
-.dropdown.open .menu-dropdown,
-.open .dropdown-menu,
.dropdown.open .dropdown-menu {
display: block;
}
@@ -1606,22 +1558,22 @@ a.menu:after, .dropdown-toggle:after {
border: 1px solid #ddd;
border-bottom-color: transparent;
}
-.tabs .menu-dropdown, .tabs .dropdown-menu {
+.tabs .dropdown-menu {
top: 35px;
border-width: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
-.tabs a.menu:after, .tabs .dropdown-toggle:after {
+.tabs .dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
-.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
+.tabs .open.dropdown .dropdown-toggle {
border-color: #999;
}
-.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
+.tabs .dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
.tab-content {
diff --git a/bootstrap.min.css b/bootstrap.min.css
index aabdf2428b..4a3b6485bb 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -209,9 +209,8 @@ table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
-.topbar h3 a:hover,.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 h3{position:relative;}
-.topbar h3 a,.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 .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;}
@@ -219,33 +218,33 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.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-inner,.topbar .fill{background-color:#222;background-color:#222222;background-repeat:repeat-x;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);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);}
-.topbar div>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar div>ul>li,.nav>li{display:block;float:left;}
-.topbar div>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar div>ul a:hover,.nav a:hover{color:#ffffff;text-decoration:none;}
-.topbar div>ul .active>a,.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
-.topbar div>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar div>ul.secondary-nav .menu-dropdown,.nav.secondary-nav .menu-dropdown,.topbar div>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;border:0;}
-.topbar div>ul a.menu:hover,.nav a.menu:hover,.topbar div>ul li.open .menu,.nav li.open .menu,.topbar div>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar div>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
-.topbar div>ul .menu-dropdown,.nav .menu-dropdown,.topbar div>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar div>ul .menu-dropdown a.menu,.nav .menu-dropdown a.menu,.topbar div>ul .dropdown-menu a.menu,.nav .dropdown-menu a.menu,.topbar div>ul .menu-dropdown .dropdown-toggle,.nav .menu-dropdown .dropdown-toggle,.topbar div>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.topbar div>ul .menu-dropdown a.menu.open,.nav .menu-dropdown a.menu.open,.topbar div>ul .dropdown-menu a.menu.open,.nav .dropdown-menu a.menu.open,.topbar div>ul .menu-dropdown .dropdown-toggle.open,.nav .menu-dropdown .dropdown-toggle.open,.topbar div>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
-.topbar div>ul .menu-dropdown li a,.nav .menu-dropdown li a,.topbar div>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar div>ul .menu-dropdown li a:hover,.nav .menu-dropdown li a:hover,.topbar div>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
-.topbar div>ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div>ul .dropdown-menu .active a,.nav .dropdown-menu .active a{color:#ffffff;}
-.topbar div>ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
-.topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a{padding:4px 15px;}
-li.menu,.dropdown{position:relative;}
-a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
-.menu-dropdown,.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.menu-dropdown li,.dropdown-menu li{float:none;display:block;background-color:none;}
-.menu-dropdown .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
+.topbar-inner{background-color:#222;background-color:#222222;background-repeat:repeat-x;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);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;}
+.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
+.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
+.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
+.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
+.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
+.nav .dropdown-menu .active a{color:#ffffff;}
+.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
+.topbar ul .dropdown-menu li a{padding:4px 15px;}
+.dropdown{position:relative;}
+.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
+.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
+.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
-.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
-.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
+.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
+.dropdown.open .dropdown-menu{display:block;}
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
-.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
-.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
-.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
-.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
+.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
+.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
+.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
+.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
.tab-content{clear:both;}
.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
diff --git a/docs/index.html b/docs/index.html
index f99b756fe1..5c5162471a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,7 +6,7 @@
<meta name="description" content="">
<meta name="author" content="">
- <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
@@ -37,22 +37,42 @@
<!-- Topbar
================================================== -->
- <div class="topbar" data-scrollspy="scrollspy" >
+ <div class="topbar" data-scrollspy="scrollspy">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">Bootstrap</a>
<ul class="nav">
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#about">About</a></li>
- <li><a href="#grid-system">Grid</a></li>
- <li><a href="#layouts">Layouts</a></li>
- <li><a href="#typography">Type</a></li>
- <li><a href="#media">Media</a></li>
- <li><a href="#tables">Tables</a></li>
- <li><a href="#forms">Forms</a></li>
- <li><a href="#navigation">Navigation</a></li>
- <li><a href="#alerts">Alerts</a></li>
- <li><a href="#popovers">Popovers</a></li>
+
+ <li class="dropdown" data-dropdown="dropdown">
+ <a href="#" class="dropdown-toggle">Scaffolding</a>
+ <ul class="dropdown-menu">
+ <li><a href="#grid-system">Grid</a></li>
+ <li><a href="#layouts">Layouts</a></li>
+ </ul>
+ </li>
+
+ <li class="dropdown" data-dropdown="dropdown">
+ <a href="#" class="dropdown-toggle">CSS</a>
+ <ul class="dropdown-menu">
+ <li><a href="#typography">Type</a></li>
+ <li><a href="#tables">Tables</a></li>
+ <li><a href="#forms">Forms</a></li>
+ </ul>
+ </li>
+
+ <li class="dropdown" data-dropdown="dropdown">
+ <a href="#" class="dropdown-toggle">Patterns</a>
+ <ul class="dropdown-menu">
+ <li><a href="#media">Media</a></li>
+ <li><a href="#navigation">Navigation</a></li>
+ <li><a href="#alerts">Alerts</a></li>
+ <li><a href="#popovers">Popovers</a></li>
+ </ul>
+ </li>
+
+
<li><a href="#javascript">Javascript</a></li>
<li><a href="#less">Less</a></li>
</ul>
@@ -718,102 +738,6 @@
-<!-- Media
-================================================== -->
-<section id="media">
- <div class="page-header">
- <h1>Media <small>Displaying images and videos</small></h1>
- </div>
- <!-- Table structure -->
- <div class="row">
- <div class="span4">
- <h2>Media grid</h2>
- <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
- </div>
- <div class="span12">
- <h3>Example thumbnails</h3>
- <p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
- <h4>Large</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- </ul>
- <h4>Medium</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- </ul>
- <h4>Small</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- </ul>
- <h4>Coding them</h4>
- <p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p>
-<pre class="prettyprint linenums">
-<ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
-</ul>
-</pre>
- </div>
- </div><!-- /row -->
-</section>
-
-
-
<!-- Tables
================================================== -->
<section id="tables">
@@ -1295,6 +1219,102 @@
+<!-- Media
+================================================== -->
+<section id="media">
+ <div class="page-header">
+ <h1>Media <small>Displaying images and videos</small></h1>
+ </div>
+ <!-- Table structure -->
+ <div class="row">
+ <div class="span4">
+ <h2>Media grid</h2>
+ <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
+ </div>
+ <div class="span12">
+ <h3>Example thumbnails</h3>
+ <p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
+ <h4>Large</h4>
+ <ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+ </ul>
+ <h4>Medium</h4>
+ <ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ </ul>
+ <h4>Small</h4>
+ <ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/90x90" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/90x90" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/90x90" alt="">
+ </a>
+ </li>
+ </ul>
+ <h4>Coding them</h4>
+ <p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p>
+<pre class="prettyprint linenums">
+<ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+</ul>
+</pre>
+ </div>
+ </div><!-- /row -->
+</section>
+
+
+
<!-- Navigation
================================================== -->
<section id="navigation">
@@ -1306,7 +1326,7 @@
<div class="topbar" data-dropdown="dropdown" >
<div class="topbar-inner">
<div class="container">
- <h3><a href="#">Project Name</a></h3>
+ <a class="brand" href="#">Project Name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
diff --git a/docs/javascript.html b/docs/javascript.html
index f001ad8083..dc35e4a374 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -39,11 +39,11 @@
<!-- Topbar
================================================== -->
- <div class="topbar" data-scrollspy="scrollspy" >
- <div class="fill">
+ <div class="topbar" data-scrollspy="scrollspy">
+ <div class="topbar-inner">
<div class="container">
- <h3><a href="#">Bootstrap JS</a></h3>
- <ul>
+ <a class="brand" href="#">Bootstrap JS</a>
+ <ul class="nav">
<li><a href="#overview">Overview</a></li>
<li><a href="#modal">Modals</a></li>
<li><a href="#dropdown">Dropdown</a></li>
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index ca2daf1f56..75320c0f87 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -20,7 +20,7 @@
(function( $ ){
- var d = 'a.menu, .dropdown-toggle'
+ var d = '.dropdown-toggle'
function clearMenus() {
$(d).parent('li').removeClass('open')
@@ -28,7 +28,7 @@
$(function () {
$('html').bind("click", clearMenus)
- $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
+ $('body').dropdown( '[data-dropdown] .dropdown-toggle' )
})
/* DROPDOWN PLUGIN DEFINITION
diff --git a/lib/patterns.less b/lib/patterns.less
index ce387614e9..1ba218c36b 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -23,8 +23,6 @@
}
// Hover and active states
- // h3 for backwards compatibility
- h3 a:hover,
.brand a:hover,
ul .active > a {
background-color: #333;
@@ -33,12 +31,7 @@
text-decoration: none;
}
- // Website name
- // h3 left for backwards compatibility
- h3 {
- position: relative;
- }
- h3 a,
+ // Website or project name
.brand {
float: left;
display: block;
@@ -112,9 +105,7 @@
}
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-// For backwards compatibility, include .topbar .fill
-.topbar-inner,
-.topbar .fill {
+.topbar-inner {
background-color: #222;
#gradient > .vertical(#333, #222);
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
@@ -127,8 +118,6 @@
// Topbar Nav
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-// For backwards compatibility, leave in .topbar div > ul
-.topbar div > ul,
.nav {
display: block;
float: left;
@@ -160,28 +149,19 @@
float: right;
margin-left: 10px;
margin-right: 0;
- // backwards compatibility
- .menu-dropdown,
.dropdown-menu {
right: 0;
border: 0;
}
}
// Dropdowns within the .nav
- // a.menu:hover and li.open .menu for backwards compatibility
- a.menu:hover,
- li.open .menu,
.dropdown-toggle:hover,
.dropdown.open .dropdown-toggle {
background: #444;
background: rgba(255,255,255,.05);
}
- // .menu-dropdown for backwards compatibility
- .menu-dropdown,
.dropdown-menu {
background-color: #333;
- // a.menu for backwards compatibility
- a.menu,
.dropdown-toggle {
color: @white;
&.open {
@@ -207,22 +187,16 @@
}
}
-// For backwards compatibility with new dropdowns, redeclare dropdown link padding
-.topbar ul .menu-dropdown li a,
.topbar ul .dropdown-menu li a {
padding: 4px 15px;
}
// Dropdown Menus
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
-// li.menu for backwards compatibility
-li.menu,
.dropdown {
position: relative;
}
// The link that is clicked to toggle the dropdown
-// a.menu for backwards compatibility
-a.menu:after,
.dropdown-toggle:after {
width: 0;
height: 0;
@@ -238,8 +212,6 @@ a.menu:after,
.opacity(50);
}
// The dropdown menu (ul)
-// .menu-dropdown for backwards compatibility
-.menu-dropdown,
.dropdown-menu {
background-color: @white;
float: left;
@@ -300,18 +272,12 @@ a.menu:after,
}
// Open state for the dropdown
-// .open for backwards compatibility
-.open,
.dropdown.open {
- // .menu for backwards compatibility
- .menu,
.dropdown-toggle {
color: @white;
background: #ccc;
background: rgba(0,0,0,.3);
}
- // .menu-dropdown for backwards compatibility
- .menu-dropdown,
.dropdown-menu {
display: block;
}
@@ -360,27 +326,19 @@ a.menu:after,
border-bottom-color: transparent;
}
}
- // first one for backwards compatibility
- .menu-dropdown,
.dropdown-menu {
top: 35px;
border-width: 1px;
.border-radius(0 6px 6px 6px);
}
- // first one for backwards compatibility
- a.menu:after,
.dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
- // first one for backwards compatibility
- li.open.menu .menu,
.open.dropdown .dropdown-toggle {
border-color: #999;
}
- // first one for backwards compatibility
- li.open a.menu:after,
.dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
--
GitLab
From b5acabe4fd7dd2bb14424a88944152bbebd2e07d Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 17 Sep 2011 22:55:29 -0700
Subject: [PATCH 02/66] fix broken topbars in javascript
---
docs/javascript.html | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/docs/javascript.html b/docs/javascript.html
index dc35e4a374..d16926186e 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -242,8 +242,8 @@ $('#my-modal').bind('hidden', function () {
<div id="topbar-example" class="topbar" data-dropdown="dropdown">
<div class="topbar-inner">
<div class="container">
- <h3><a href="#">Project Name</a></h3>
- <ul>
+ <a class="brand" href="#">Project Name</a>
+ <ul class="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
@@ -251,18 +251,18 @@ $('#my-modal').bind('hidden', function () {
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
- <li class="menu">
- <a href="#" class="menu">Dropdown 1</a>
- <ul class="menu-dropdown">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown 1</a>
+ <ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
- <li class="menu">
- <a href="#" class="menu">Dropdown 2</a>
- <ul class="menu-dropdown">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown 2</a>
+ <ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
--
GitLab
From 6d541a6066d46bff19833707deeca8f41279b180 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Wed, 28 Sep 2011 19:06:10 -0700
Subject: [PATCH 03/66] pulling out more stuff and fixing file name at top of
file
---
bootstrap.css | 4 ++--
docs/index.html | 18 ++++++------------
lib/mixins.less | 2 +-
lib/patterns.less | 6 ++----
4 files changed, 11 insertions(+), 19 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 6d3c15390a..babe50a210 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: Sat Sep 17 17:21:25 PDT 2011
+ * Date: Wed Sep 28 19:05:53 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).
@@ -173,7 +173,7 @@ textarea {
/* Variables.less
* Variables to customize the look and feel of Bootstrap
* ----------------------------------------------------- */
-/* Variables.less
+/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
/*
diff --git a/docs/index.html b/docs/index.html
index 5c5162471a..857af24486 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -84,14 +84,12 @@
================================================== -->
<header class="jumbotron masthead" id="overview">
<div class="inner">
- <div class="container">
- <h1>Bootstrap, from Twitter</h1>
- <p class="lead">
- Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br />
- It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
- </p>
- <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
- </div><!-- /container -->
+ <h1>Bootstrap, from Twitter</h1>
+ <p class="lead">
+ Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br />
+ It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
+ </p>
+ <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
</div>
</header>
@@ -140,10 +138,6 @@
<h3>History</h3>
<p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
<p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
- <p>
- <a href="http://twitter.com/twbootstrap" class="twitter-follow-button">Follow @twbootstrap</a>
- <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
- </p>
</div>
<div class="span-one-third">
<h3>Browser support</h3>
diff --git a/lib/mixins.less b/lib/mixins.less
index ca7893dafe..929618a409 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -1,4 +1,4 @@
-/* Variables.less
+/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
diff --git a/lib/patterns.less b/lib/patterns.less
index 1ba218c36b..eae09a5963 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -350,7 +350,7 @@
// Basic pill nav
.pills {
a {
- margin: 5px 3px 5px 0;
+ margin: 5px 3px 5px 0;
padding: 0 15px;
text-shadow: 0 1px 1px @white;
line-height: 30px;
@@ -376,7 +376,7 @@
.tab-content > .active,
.pill-content > .active {
- display:block;
+ display: block;
}
@@ -398,8 +398,6 @@
padding: 0 5px;
color: @grayLight;
}
- a {
- }
.active a {
color: @grayDark;
}
--
GitLab
From 1b21d5e321ec77c6381becae2e2d7d1c4ab14d9a Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Wed, 28 Sep 2011 19:15:31 -0700
Subject: [PATCH 04/66] updated forms.less to have better comments while
pulling out all the old classes for input elements
---
bootstrap.css | 35 ++++---------------
bootstrap.min.css | 13 ++++----
lib/forms.less | 85 +++++++++++++++++++++--------------------------
3 files changed, 51 insertions(+), 82 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index babe50a210..993533e110 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: Wed Sep 28 19:05:53 PDT 2011
+ * Date: Wed Sep 28 19:14:58 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).
@@ -747,45 +747,24 @@ form div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .inp
border-color: #c87872;
color: #b9554d;
}
-.input-mini,
-input.mini,
-textarea.mini,
-select.mini {
+.input-mini {
width: 60px;
}
-.input-small,
-input.small,
-textarea.small,
-select.small {
+.input-small {
width: 90px;
}
-.input-medium,
-input.medium,
-textarea.medium,
-select.medium {
+.input-medium {
width: 150px;
}
-.input-large,
-input.large,
-textarea.large,
-select.large {
+.input-large {
width: 210px;
}
-.input-xlarge,
-input.xlarge,
-textarea.xlarge,
-select.xlarge {
+.input-xlarge {
width: 270px;
}
-.input-xxlarge,
-input.xxlarge,
-textarea.xxlarge,
-select.xxlarge {
+.input-xxlarge {
width: 530px;
}
-textarea.xxlarge {
- overflow-y: auto;
-}
input.span1, textarea.span1, select.span1 {
display: inline-block;
float: none;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 4a3b6485bb..f290fbd325 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -128,13 +128,12 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado
form div.clearfix.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.clearfix.error>label,form div.clearfix.error span.help-inline,form div.clearfix.error span.help-block{color:#9d261d;}
form div.clearfix.error input,form div.clearfix.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.clearfix.error input:focus,form div.clearfix.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
form div.clearfix.error .input-prepend span.add-on,form div.clearfix.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
-.input-mini,input.mini,textarea.mini,select.mini{width:60px;}
-.input-small,input.small,textarea.small,select.small{width:90px;}
-.input-medium,input.medium,textarea.medium,select.medium{width:150px;}
-.input-large,input.large,textarea.large,select.large{width:210px;}
-.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
-.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
-textarea.xxlarge{overflow-y:auto;}
+.input-mini{width:60px;}
+.input-small{width:90px;}
+.input-medium{width:150px;}
+.input-large{width:210px;}
+.input-xlarge{width:270px;}
+.input-xxlarge{width:530px;}
input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}
diff --git a/lib/forms.less b/lib/forms.less
index 0da4037df7..91aca77fe7 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -3,8 +3,8 @@
* ------------------------------------------------------------- */
-// FORM STYLES
-// -----------
+// GENERAL STYLES
+// --------------
form {
margin-bottom: @baseline;
@@ -189,47 +189,17 @@ form div.clearfix.error {
}
}
-// Form element sizes
-// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
-.input-mini,
-input.mini,
-textarea.mini,
-select.mini {
- width: 60px;
-}
-.input-small,
-input.small,
-textarea.small,
-select.small {
- width: 90px;
-}
-.input-medium,
-input.medium,
-textarea.medium,
-select.medium {
- width: 150px;
-}
-.input-large,
-input.large,
-textarea.large,
-select.large {
- width: 210px;
-}
-.input-xlarge,
-input.xlarge,
-textarea.xlarge,
-select.xlarge {
- width: 270px;
-}
-.input-xxlarge,
-input.xxlarge,
-textarea.xxlarge,
-select.xxlarge {
- width: 530px;
-}
-textarea.xxlarge {
- overflow-y: auto;
-}
+
+// INPUT SIZES
+// -----------
+
+// General classes for quick sizes
+.input-mini { width: 60px; }
+.input-small { width: 90px; }
+.input-medium { width: 150px; }
+.input-large { width: 210px; }
+.input-xlarge { width: 270px; }
+.input-xxlarge { width: 530px; }
// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
@@ -261,6 +231,10 @@ select {
&.span16 { .formColumns(16); }
}
+
+// INPUT STATES
+// ------------
+
// Disabled and read-only inputs
input[disabled],
select[disabled],
@@ -292,7 +266,10 @@ textarea[readonly] {
}
}
-// Help Text
+
+// HELP TEXT
+// ---------
+
.help-inline,
.help-block {
font-size: @basefont - 2;
@@ -311,7 +288,10 @@ textarea[readonly] {
max-width: 600px;
}
-// Inline Fields (input fields that appear as inline objects
+
+// INLINE FIELDS
+// ---------
+
.inline-inputs {
color: @gray;
span, input {
@@ -328,6 +308,10 @@ textarea[readonly] {
}
}
+
+// INPUTS GROUPS
+// -------------
+
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
@@ -375,6 +359,10 @@ textarea[readonly] {
}
}
+
+// LISTS OF CONTROLS
+// -----------------
+
// Stacked options for forms (radio buttons or checkboxes)
.inputs-list {
margin: 0 0 5px;
@@ -417,7 +405,10 @@ textarea[readonly] {
}
}
-// Stacked forms
+
+// STACKED FORMS
+// -------------
+
.form-stacked {
padding-left: 20px;
fieldset {
@@ -462,4 +453,4 @@ textarea[readonly] {
margin-left: -20px;
padding-left: 20px;
}
-}
+}
\ No newline at end of file
--
GitLab
From 2d81d65533ded88c76712e787edbd745d38e403e Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Wed, 28 Sep 2011 20:21:09 -0700
Subject: [PATCH 05/66] initial idea for handling closing of modals from
whatever element you want with .js-dismiss class
---
docs/index.html | 4 ++--
docs/javascript.html | 6 +++---
js/bootstrap-modal.js | 2 +-
3 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 857af24486..b24999c623 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1644,7 +1644,7 @@
<!-- Modal -->
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
- <a href="#" class="close">×</a>
+ <a href="#" class="close js-dismiss">×</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
@@ -1652,7 +1652,7 @@
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Primary</a>
- <a href="#" class="btn secondary">Secondary</a>
+ <a href="#" class="btn">Secondary</a>
</div>
</div>
</div>
diff --git a/docs/javascript.html b/docs/javascript.html
index d16926186e..d5eb987392 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -182,15 +182,15 @@ $('#my-modal').bind('hidden', function () {
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
- <a href="#" class="close">×</a>
+ <a href="#" class="close js-dismiss">×</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
- <a href="#" class="btn primary">Primary</a>
- <a href="#" class="btn secondary">Secondary</a>
+ <a href="#" class="btn primary">Save changes</a>
+ <a href="#" class="btn js-dismiss">Close</a>
</div>
</div>
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index da67060731..5c38a7477b 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -55,7 +55,7 @@
var Modal = function ( content, options ) {
this.settings = $.extend({}, $.fn.modal.defaults)
this.$element = $(content)
- .delegate('.close', 'click.modal', $.proxy(this.hide, this))
+ .delegate('.js-dismiss', 'click.modal', $.proxy(this.hide, this))
if ( options ) {
$.extend( this.settings, options )
--
GitLab
From f919f6f94f3e8405d7653a5f16f8b3d587c47f4c Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 29 Sep 2011 01:40:27 -0700
Subject: [PATCH 06/66] huge update to forms, docs for the new forms, added a
new link for js example to tabs/pills, add some new mixins
---
bootstrap.css | 342 ++++++++++------------------
bootstrap.min.css | 116 +++++-----
docs/assets/css/docs.css | 10 +-
docs/index.html | 475 ++++++++++++++-------------------------
lib/forms.less | 325 +++++++++++----------------
lib/mixins.less | 92 +++++---
lib/reset.less | 2 +-
lib/type.less | 7 +-
lib/variables.less | 8 +-
9 files changed, 560 insertions(+), 817 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 993533e110..d3bb942cda 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,10 +6,10 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Sep 28 19:14:58 PDT 2011
+ * Date: Thu Sep 29 01:39:48 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).
+ * 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).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html, body {
margin: 0;
@@ -189,7 +189,7 @@ body {
font-size: 13px;
font-weight: normal;
line-height: 18px;
- color: #404040;
+ color: #333333;
}
.container {
width: 940px;
@@ -400,7 +400,7 @@ p {
}
p small {
font-size: 11px;
- color: #bfbfbf;
+ color: #777777;
}
h1,
h2,
@@ -409,7 +409,7 @@ h4,
h5,
h6 {
font-weight: bold;
- color: #404040;
+ color: #333333;
}
h1 small,
h2 small,
@@ -417,7 +417,7 @@ h3 small,
h4 small,
h5 small,
h6 small {
- color: #bfbfbf;
+ color: #777777;
}
h1 {
margin-bottom: 18px;
@@ -434,18 +434,16 @@ h2 {
h2 small {
font-size: 14px;
}
-h3,
-h4,
-h5,
-h6 {
- line-height: 36px;
-}
h3 {
+ line-height: 36px;
font-size: 18px;
}
h3 small {
font-size: 14px;
}
+h4, h5, h6 {
+ line-height: 18px;
+}
h4 {
font-size: 16px;
}
@@ -457,7 +455,7 @@ h5 {
}
h6 {
font-size: 13px;
- color: #bfbfbf;
+ color: #777777;
text-transform: uppercase;
}
ul, ol {
@@ -477,7 +475,7 @@ ol {
}
li {
line-height: 18px;
- color: #808080;
+ color: #555555;
}
ul.unstyled {
list-style: none;
@@ -510,7 +508,7 @@ em {
line-height: inherit;
}
.muted {
- color: #bfbfbf;
+ color: #777777;
}
blockquote {
margin-bottom: 18px;
@@ -528,7 +526,7 @@ blockquote small {
font-size: 12px;
font-weight: 300;
line-height: 18px;
- color: #bfbfbf;
+ color: #777777;
}
blockquote small:before {
content: '\2014 \00A0';
@@ -573,35 +571,14 @@ pre {
form {
margin-bottom: 18px;
}
-fieldset {
- margin-bottom: 18px;
- padding-top: 18px;
-}
-fieldset legend {
+legend {
display: block;
- padding-left: 150px;
+ width: 100%;
+ margin-bottom: 27px;
font-size: 19.5px;
- line-height: 1;
- color: #404040;
- *padding: 0 0 5px 145px;
- /* IE6-7 */
-
- *line-height: 1.5;
- /* IE6-7 */
-
-}
-form .clearfix {
- margin-bottom: 18px;
- zoom: 1;
-}
-form .clearfix:before, form .clearfix:after {
- display: table;
- content: "";
- zoom: 1;
- *display: inline;
-}
-form .clearfix:after {
- clear: both;
+ line-height: 36px;
+ color: #333333;
+ border-bottom: 1px solid #eee;
}
label,
input,
@@ -610,19 +587,12 @@ textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
- line-height: normal;
-}
-label {
- padding-top: 6px;
- font-size: 13px;
line-height: 18px;
- float: left;
- width: 130px;
- text-align: right;
- color: #404040;
}
-form .input {
- margin-left: 150px;
+label {
+ display: block;
+ margin-bottom: 5px;
+ color: #333333;
}
input[type=checkbox], input[type=radio] {
cursor: pointer;
@@ -637,13 +607,13 @@ select,
padding: 4px;
font-size: 13px;
line-height: 18px;
- color: #808080;
+ color: #555555;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
-/* mini reset for non-html5 file types */
+/* Mini reset for unique input types */
input[type=checkbox], input[type=radio] {
width: auto;
height: auto;
@@ -681,21 +651,6 @@ select[multiple] {
textarea {
height: auto;
}
-.uneditable-input {
- background-color: #ffffff;
- display: block;
- border-color: #eee;
- -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
- cursor: not-allowed;
-}
-:-moz-placeholder {
- color: #bfbfbf;
-}
-::-webkit-input-placeholder {
- color: #bfbfbf;
-}
input, textarea {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -719,34 +674,6 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
box-shadow: none;
outline: 1px dotted #666;
}
-form div.clearfix.error {
- background: #fae5e3;
- padding: 10px 0;
- margin: -10px 0 10px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-form div.clearfix.error > label, form div.clearfix.error span.help-inline, form div.clearfix.error span.help-block {
- color: #9d261d;
-}
-form div.clearfix.error input, form div.clearfix.error textarea {
- border-color: #c87872;
- -webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
- -moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
- box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
-}
-form div.clearfix.error input:focus, form div.clearfix.error textarea:focus {
- border-color: #b9554d;
- -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
- -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
- box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-}
-form div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .input-append span.add-on {
- background: #f4c8c5;
- border-color: #c87872;
- color: #b9554d;
-}
.input-mini {
width: 60px;
}
@@ -871,31 +798,63 @@ textarea[readonly] {
border-color: #ddd;
cursor: not-allowed;
}
-.actions {
- background: #f5f5f5;
+.has-error {
+ background: #f8dcda;
+ padding: 9px 0;
+ margin: -10px 0 10px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.has-error > label, .has-error span.help-inline, .has-error span.help-block {
+ color: #9d261d;
+}
+.has-error input, .has-error textarea, .has-error select {
+ border-color: #c87872;
+ -webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
+ -moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
+ box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
+}
+.has-error input:focus, .has-error textarea:focus, .has-error select:focus {
+ border-color: #b9554d;
+ -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
+ -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
+ box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
+}
+.has-error .input-prepend span.add-on, .has-error .input-append span.add-on {
+ background: #f4c8c5;
+ border-color: #c87872;
+ color: #b9554d;
+}
+.form-actions {
+ padding: 17px 20px 18px;
margin-top: 18px;
margin-bottom: 18px;
- padding: 17px 20px 18px 150px;
+ background-color: #f5f5f5;
border-top: 1px solid #ddd;
- -webkit-border-radius: 0 0 3px 3px;
- -moz-border-radius: 0 0 3px 3px;
- border-radius: 0 0 3px 3px;
}
-.actions .secondary-action {
- float: right;
+.uneditable-input {
+ background-color: #ffffff;
+ display: block;
+ border-color: #eee;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+ cursor: not-allowed;
}
-.actions .secondary-action a {
- line-height: 30px;
+:-moz-placeholder {
+ color: #777777;
}
-.actions .secondary-action a:hover {
- text-decoration: underline;
+::-webkit-input-placeholder {
+ color: #777777;
}
-.help-inline, .help-block {
- font-size: 11px;
- line-height: 18px;
- color: #bfbfbf;
+.help-text {
+ margin-top: 5px;
+ margin-bottom: 0;
+ color: #777777;
}
.help-inline {
+ display: inline;
padding-left: 5px;
*position: relative;
/* IE6-7 */
@@ -909,7 +868,7 @@ textarea[readonly] {
max-width: 600px;
}
.inline-inputs {
- color: #808080;
+ color: #555555;
}
.inline-inputs span, .inline-inputs input {
display: inline-block;
@@ -942,7 +901,7 @@ textarea[readonly] {
margin-right: -1px;
font-weight: normal;
line-height: 18px;
- color: #bfbfbf;
+ color: #777777;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
-webkit-border-radius: 3px 0 0 3px;
@@ -971,89 +930,36 @@ textarea[readonly] {
margin-right: 0;
margin-left: -1px;
}
-.inputs-list {
- margin: 0 0 5px;
- width: 100%;
-}
-.inputs-list li {
- display: block;
- padding: 0;
- width: 100%;
-}
-.inputs-list label {
- display: block;
- float: none;
- width: auto;
- padding: 0;
- line-height: 18px;
- text-align: left;
- white-space: normal;
-}
-.inputs-list label strong {
- color: #808080;
-}
-.inputs-list label small {
- font-size: 11px;
- font-weight: normal;
-}
-.inputs-list .inputs-list {
- margin-left: 25px;
- margin-bottom: 10px;
- padding-top: 0;
-}
-.inputs-list:first-child {
- padding-top: 6px;
-}
-.inputs-list li + li {
- padding-top: 2px;
-}
-.inputs-list input[type=radio], .inputs-list input[type=checkbox] {
- margin-bottom: 0;
-}
-.form-stacked {
- padding-left: 20px;
-}
-.form-stacked fieldset {
- padding-top: 9px;
-}
-.form-stacked legend {
- padding-left: 0;
+.control-group {
+ margin-bottom: 18px;
}
-.form-stacked label {
- display: block;
- float: none;
- width: auto;
+.control-group > label {
font-weight: bold;
- text-align: left;
- line-height: 20px;
- padding-top: 0;
-}
-.form-stacked .clearfix {
- margin-bottom: 9px;
}
-.form-stacked .clearfix div.input {
- margin-left: 0;
-}
-.form-stacked .inputs-list {
- margin-bottom: 0;
+.form-horizontal .control-group > label {
+ float: left;
+ width: 130px;
+ padding-top: 5px;
+ text-align: right;
}
-.form-stacked .inputs-list li {
- padding-top: 0;
+.form-horizontal .controls {
+ margin-left: 150px;
}
-.form-stacked .inputs-list li label {
- font-weight: normal;
- padding-top: 0;
+.form-horizontal .control-list {
+ padding-top: 6px;
}
-.form-stacked div.clearfix.error {
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- margin-top: 0;
- margin-left: -10px;
+.form-horizontal .form-actions {
+ padding-left: 150px;
}
-.form-stacked .actions {
- margin-left: -20px;
- padding-left: 20px;
+.radial-test {
+ background-color: #009900;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900));
+ background-image: -webkit-radial-gradient(circle, #990000, #009900);
+ background-image: -moz-radial-gradient(circle, #990000, #009900);
+ background-image: -ms-radial-gradient(circle, #990000, #009900);
+ background-repeat: no-repeat;
+ width: 100%;
+ height: 940px;
}
/*
* Tables.less
@@ -1214,7 +1120,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
overflow: visible;
}
.topbar a {
- color: #bfbfbf;
+ color: #777777;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.topbar .brand a:hover, .topbar ul .active > a {
@@ -1277,20 +1183,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
transition: none;
}
.topbar input:-moz-placeholder {
- color: #e6e6e6;
+ color: #cccccc;
}
.topbar input::-webkit-input-placeholder {
- color: #e6e6e6;
+ color: #cccccc;
}
.topbar input:hover {
- background-color: #bfbfbf;
+ background-color: #777777;
background-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
}
.topbar input:focus, .topbar input.focused {
outline: 0;
background-color: #ffffff;
- color: #404040;
+ color: #333333;
text-shadow: 0 1px 0 #ffffff;
border: 0;
padding: 5px 10px;
@@ -1301,7 +1207,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
.topbar-inner {
background-color: #222;
background-color: #222222;
- background-repeat: repeat-x;
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);
@@ -1309,6 +1214,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
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);
@@ -1369,7 +1275,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
}
.nav .dropdown-menu li a:hover {
background-color: #191919;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
background-image: -moz-linear-gradient(top, #292929, #191919);
background-image: -ms-linear-gradient(top, #292929, #191919);
@@ -1377,6 +1282,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
background-image: -webkit-linear-gradient(top, #292929, #191919);
background-image: -o-linear-gradient(top, #292929, #191919);
background-image: linear-gradient(top, #292929, #191919);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
color: #ffffff;
}
@@ -1456,12 +1362,11 @@ table .headerSortUp.purple, table .headerSortDown.purple {
clear: both;
font-weight: normal;
line-height: 18px;
- color: #808080;
+ color: #555555;
text-shadow: 0 1px 0 #ffffff;
}
.topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
background-color: #dddddd;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
@@ -1469,8 +1374,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(top, #eeeeee, #dddddd);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
- color: #404040;
+ color: #333333;
text-decoration: none;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
@@ -1532,7 +1438,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
border-color: #eee #eee #ddd;
}
.tabs > li.active > a {
- color: #808080;
+ color: #555555;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
@@ -1588,7 +1494,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
margin: 0 0 18px;
padding: 7px 14px;
background-color: #f5f5f5;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
@@ -1596,6 +1501,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
border: 1px solid #ddd;
-webkit-border-radius: 3px;
@@ -1611,10 +1517,10 @@ table .headerSortUp.purple, table .headerSortDown.purple {
}
.breadcrumb .divider {
padding: 0 5px;
- color: #bfbfbf;
+ color: #777777;
}
.breadcrumb .active a {
- color: #404040;
+ color: #333333;
}
.hero-unit {
background-color: #f5f5f5;
@@ -1673,7 +1579,6 @@ footer {
.btn.error,
.alert-message.error {
background-color: #c43c35;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
@@ -1681,6 +1586,7 @@ footer {
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #c43c35 #c43c35 #882a25;
@@ -1688,7 +1594,6 @@ footer {
}
.btn.success, .alert-message.success {
background-color: #57a957;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
@@ -1696,6 +1601,7 @@ footer {
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #57a957 #57a957 #3d773d;
@@ -1703,7 +1609,6 @@ footer {
}
.btn.info, .alert-message.info {
background-color: #339bb9;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
@@ -1711,6 +1616,7 @@ footer {
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #339bb9 #339bb9 #22697d;
@@ -1720,13 +1626,13 @@ footer {
cursor: pointer;
display: inline-block;
background-color: #e6e6e6;
- background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+ background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
@@ -1758,7 +1664,6 @@ footer {
.btn.primary {
color: #ffffff;
background-color: #0064cd;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
@@ -1766,6 +1671,7 @@ footer {
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
background-image: linear-gradient(top, #049cdb, #0064cd);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81;
@@ -1843,9 +1749,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
position: relative;
padding: 7px 15px;
margin-bottom: 18px;
- color: #404040;
+ color: #333333;
background-color: #eedc94;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
@@ -1853,6 +1758,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
background-image: -o-linear-gradient(top, #fceec1, #eedc94);
background-image: linear-gradient(top, #fceec1, #eedc94);
+ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652;
@@ -1905,13 +1811,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-bottom: 0;
}
.alert-message.block-message li {
- color: #404040;
+ color: #333333;
}
.alert-message.block-message .alert-actions {
margin-top: 5px;
}
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
- color: #404040;
+ color: #333333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert-message.block-message.error {
@@ -1962,7 +1868,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
}
.pagination .disabled a, .pagination .disabled a:hover {
background-color: transparent;
- color: #bfbfbf;
+ color: #777777;
}
.pagination .next a {
border: 0;
@@ -2232,7 +2138,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
}
.label {
padding: 1px 3px 2px;
- background-color: #bfbfbf;
+ background-color: #777777;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index f290fbd325..bb31375dd1 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -21,7 +21,7 @@ input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
html,body{background-color:#ffffff;}
-body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;}
+body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#333333;}
.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;}
@@ -76,20 +76,20 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.span-two-thirds{width:620px;}
.offset-one-third{margin-left:340px;}
.offset-two-thirds{margin-left:660px;}
-p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
-h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
+p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#777777;}
+h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#777777;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
-h3,h4,h5,h6{line-height:36px;}
-h3{font-size:18px;}h3 small{font-size:14px;}
+h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;}
+h4,h5,h6{line-height:18px;}
h4{font-size:16px;}h4 small{font-size:12px;}
h5{font-size:14px;}
-h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;}
+h6{font-size:13px;color:#777777;text-transform:uppercase;}
ul,ol{margin:0 0 18px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
ol{list-style:decimal;}
-li{line-height:18px;color:#808080;}
+li{line-height:18px;color:#555555;}
ul.unstyled{list-style:none;margin-left:0;}
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
dl dt{font-weight:bold;}
@@ -97,37 +97,28 @@ dl dd{margin-left:9px;}
hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
strong{font-style:inherit;font-weight:bold;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
-.muted{color:#bfbfbf;}
+.muted{color:#777777;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
-blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
+blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#777777;}blockquote small:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
form{margin-bottom:18px;}
-fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;color:#404040;*padding:0 0 5px 145px;*line-height:1.5;}
-form .clearfix{margin-bottom:18px;zoom:1;}form .clearfix:before,form .clearfix:after{display:table;content:"";zoom:1;*display:inline;}
-form .clearfix:after{clear:both;}
-label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
-label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
-form .input{margin-left:150px;}
+legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;}
+label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
+label{display:block;margin-bottom:5px;color:#333333;}
input[type=checkbox],input[type=radio]{cursor:pointer;}
-input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
select[multiple]{height:inherit;}
textarea{height:auto;}
-.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
-:-moz-placeholder{color:#bfbfbf;}
-::-webkit-input-placeholder{color:#bfbfbf;}
input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
-form div.clearfix.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.clearfix.error>label,form div.clearfix.error span.help-inline,form div.clearfix.error span.help-block{color:#9d261d;}
-form div.clearfix.error input,form div.clearfix.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.clearfix.error input:focus,form div.clearfix.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
-form div.clearfix.error .input-prepend span.add-on,form div.clearfix.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
.input-mini{width:60px;}
.input-small{width:90px;}
.input-medium{width:150px;}
@@ -151,34 +142,33 @@ input.span14,textarea.span14,select.span14{display:inline-block;float:none;width
input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
-.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
-.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
-.help-inline{padding-left:5px;*position:relative;*top:-5px;}
+.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
+.has-error input,.has-error textarea,.has-error select{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}.has-error input:focus,.has-error textarea:focus,.has-error select:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
+.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
+.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
+.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
+:-moz-placeholder{color:#777777;}
+::-webkit-input-placeholder{color:#777777;}
+.help-text{margin-top:5px;margin-bottom:0;color:#777777;}
+.help-inline{display:inline;padding-left:5px;*position:relative;*top:-5px;}
.help-block{display:block;max-width:600px;}
-.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}
+.inline-inputs{color:#555555;}.inline-inputs span,.inline-inputs input{display:inline-block;}
.inline-inputs input.mini{width:60px;}
.inline-inputs input.small{width:90px;}
.inline-inputs span{padding:0 2px 0 1px;}
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
-.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#777777;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
-.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}
-.inputs-list label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list label strong{color:#808080;}
-.inputs-list label small{font-size:11px;font-weight:normal;}
-.inputs-list .inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;}
-.inputs-list:first-child{padding-top:6px;}
-.inputs-list li+li{padding-top:2px;}
-.inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;}
-.form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;}
-.form-stacked legend{padding-left:0;}
-.form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;}
-.form-stacked .clearfix{margin-bottom:9px;}.form-stacked .clearfix div.input{margin-left:0;}
-.form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;}
-.form-stacked div.clearfix.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;}
-.form-stacked .actions{margin-left:-20px;padding-left:20px;}
+.control-group{margin-bottom:18px;}
+.control-group>label{font-weight:bold;}
+.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
+.form-horizontal .controls{margin-left:150px;}
+.form-horizontal .control-list{padding-top:6px;}
+.form-horizontal .form-actions{padding-left:150px;}
+.radial-test{background-color:#009900;background-image:-webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900));background-image:-webkit-radial-gradient(circle, #990000, #009900);background-image:-moz-radial-gradient(circle, #990000, #009900);background-image:-ms-radial-gradient(circle, #990000, #009900);background-repeat:no-repeat;width:100%;height:940px;}
table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
table td{vertical-align:top;}
@@ -207,24 +197,24 @@ table .orange{color:#f89406;border-bottom-color:#f89406;}
table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
-.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
+.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#777777;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
.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-inner{background-color:#222;background-color:#222222;background-repeat:repeat-x;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);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);}
+.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:#cccccc;}
+.topbar input::-webkit-input-placeholder{color:#cccccc;}
+.topbar input:hover{background-color:#777777;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
+.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#333333;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-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;}
.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
-.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
+.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
.nav .dropdown-menu .active a{color:#ffffff;}
.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
.topbar ul .dropdown-menu li a{padding:4px 15px;}
@@ -232,14 +222,14 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
-.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
+.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#333333;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
.dropdown.open .dropdown-menu{display:block;}
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
-.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
+.tabs>li.active>a{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
@@ -249,20 +239,20 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.tab-content>*,.pill-content>*{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}
-.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
-.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
-.breadcrumb .active a{color:#404040;}
+.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
+.breadcrumb .divider{padding:0 5px;color:#777777;}
+.breadcrumb .active a{color:#333333;}
.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
-.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
+.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
.btn:focus{outline:1px dotted #666;}
-.btn.primary{color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
@@ -271,16 +261,16 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
-.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
+.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}
.alert-message p{margin-bottom:0;}
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
.alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
.alert-message.block-message ul{margin-bottom:0;}
-.alert-message.block-message li{color:#404040;}
+.alert-message.block-message li{color:#333333;}
.alert-message.block-message .alert-actions{margin-top:5px;}
-.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
@@ -288,7 +278,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.pagination li{display:inline;}
.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
-.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
+.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#777777;}
.pagination .next a{border:0;}
.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
@@ -317,7 +307,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
-.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
+.label{padding:1px 3px 2px;background-color:#777777;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
.label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fb727a900a..a17fd5692b 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -310,8 +310,16 @@ img.large-bird {
opacity: .1;
}
+
/* Pretty Print
-------------------------------------------------- */
pre.prettyprint {
overflow: hidden;
-}
\ No newline at end of file
+}
+
+
+/* Wells
+-------------------------------------------------- */
+.well form {
+ margin-bottom: 0;
+}
diff --git a/docs/index.html b/docs/index.html
index b24999c623..75a18ea409 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -884,331 +884,198 @@
<div class="page-header">
<h1>Forms</h1>
</div>
+ <div class="row">
+ <div class="span-one-third">
+ <h3>Four types of forms</h3>
+ <p>With 2.0, we now have four types of forms to choose from:</p>
+ <ul>
+ <li>Search form for a super-rounded input and optional button</li>
+ <li>Inline form for a series of elements on one line</li>
+ <li>Horizontal form for left-aligned labels</li>
+ <li>Vertical form for stacked labels and inputs</li>
+ </ul>
+ </div>
+ <div class="span-one-third">
+ <h3></h3>
+ </div>
+ </div>
<div class="row">
<div class="span4">
- <h2>Default styles</h2>
- <p>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</p>
+ <h2>Search form</h2>
</div>
<div class="span12">
- <form>
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix">
- <label for="xlInput">X-Large input</label>
- <div class="input">
- <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="normalSelect">Select</label>
- <div class="input">
- <select name="normalSelect" id="normalSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="mediumSelect">Select</label>
- <div class="input">
- <select class="medium" name="mediumSelect" id="mediumSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="multiSelect">Multiple select</label>
- <div class="input">
- <select class="medium" multiple="multiple" name="multiSelect" id="multiSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label>Uneditable input</label>
- <div class="input">
- <span class="uneditable-input">Some value here</span>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="disabledInput">Disabled input</label>
- <div class="input">
- <input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="disabledInput">Disabled textarea</label>
- <div class="input">
- <textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix error">
- <label for="xlInput2">X-Large input</label>
- <div class="input">
- <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
- <span class="help-inline">Small snippet of help text</span>
- </div>
- </div><!-- /clearfix -->
- </fieldset>
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix">
- <label for="prependedInput">Prepended text</label>
- <div class="input">
- <div class="input-prepend">
- <span class="add-on">@</span>
- <input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
- </div>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="prependedInput2">Prepended checkbox</label>
- <div class="input">
- <div class="input-prepend">
- <label class="add-on"><input type="checkbox" name="" id="" value="" /></label>
- <input class="mini" id="prependedInput2" name="prependedInput2" size="16" type="text" />
- </div>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="appendedInput">Appended checkbox</label>
- <div class="input">
- <div class="input-append">
- <input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
- <label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label>
- </div>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="fileInput">File input</label>
- <div class="input">
- <input class="input-file" id="fileInput" name="fileInput" type="file" />
- </div>
- </div><!-- /clearfix -->
- </fieldset>
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix">
- <label id="optionsCheckboxes">List of options</label>
- <div class="input">
- <ul class="inputs-list">
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option1" />
- <span>Option one is this and that—be sure to include why it’s great</span>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option2" />
- <span>Option two can also be checked and included in form results</span>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option2" />
- <span>Option three can—yes, you guessed it—also be checked and included in form results</span>
- </label>
- </li>
- <li>
- <label class="disabled">
- <input type="checkbox" name="optionsCheckboxes" value="option2" disabled />
- <span>Option four cannot be checked as it is disabled.</span>
- </label>
- </li>
- </ul>
- <span class="help-block">
- <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
- </span>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label>Date range</label>
- <div class="input">
- <div class="inline-inputs">
- <input class="small" type="text" value="May 1, 2011" />
- <input class="mini" type="text" value="12:00am" />
- to
- <input class="small" type="text" value="May 8, 2011" />
- <input class="mini" type="text" value="11:59pm" />
- <span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span>
- </div>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="textarea">Textarea</label>
- <div class="input">
- <textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
- <span class="help-block">
- Block of help text to describe the field above if need be.
- </span>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label id="optionsRadio">List of options</label>
- <div class="input">
- <ul class="inputs-list">
- <li>
- <label>
- <input type="radio" checked name="optionsRadios" value="option1" />
- <span>Option one is this and that—be sure to include why it’s great</span>
- </label>
- </li>
- <li>
- <label>
- <input type="radio" name="optionsRadios" value="option2" />
- <span>Option two can is something else and selecting it will deselect options 1</span>
- </label>
- </li>
- </ul>
- </div>
- </div><!-- /clearfix -->
- <div class="actions">
- <input type="submit" class="btn primary" value="Save changes"> <button type="reset" class="btn">Cancel</button>
- </div>
- </fieldset>
- </form>
+ <div class="well">
+ <form class="form-search">
+ <input type="text" class="search-query">
+ <button type="submit" class="btn">Search</button>
+ </form>
+ </div><!--/well-->
</div>
- </div><!-- /row -->
-
- <br />
-
+ </div>
<div class="row">
<div class="span4">
- <h2>Stacked forms</h2>
- <p>Add <code>.form-stacked</code> to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</p>
+ <h2>Inline form</h2>
</div>
<div class="span12">
- <form action="" class="form-stacked">
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix">
- <label for="xlInput3">X-Large input</label>
- <div class="input">
- <input class="xlarge" id="xlInput3" name="xlInput3" size="30" type="text" />
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label for="stackedSelect">Select</label>
- <div class="input">
- <select name="stackedSelect" id="stackedSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </div><!-- /clearfix -->
- </fieldset>
- <fieldset>
- <legend>Example form legend</legend>
- <div class="clearfix error">
- <label for="xlInput4">X-Large input</label>
- <div class="input">
- <input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" />
- <span class="help-inline">Small snippet of help text</span>
- </div>
- </div><!-- /clearfix -->
- <div class="clearfix">
- <label id="optionsCheckboxes">List of options</label>
- <div class="input">
- <ul class="inputs-list">
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option1" />
- <span>Option one is this and that—be sure to include why it’s great</span>
- </label>
- </li>
- <li>
- <label>
- <input type="checkbox" name="optionsCheckboxes" value="option2" />
- <span>Option two can also be checked and included in form results</span>
- </label>
- </li>
- </ul>
- <span class="help-block">
- <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
- </span>
- </div>
- </div><!-- /clearfix -->
- </fieldset>
- <div class="actions">
- <button type="submit" class="btn primary">Save changes</button> <button type="reset" class="btn">Cancel</button>
- </div>
- </form>
+ <div class="well">
+ <form class="form-inline">
+ <h4>Some directional text</h4>
+ <p>And maybe some kind of optional supporting text right here.</p>
+ <input type="text" class="input-medium">
+ <input type="text" class="input-medium">
+ <input type="text" class="input-medium">
+ <button type="submit" class="btn">Search</button>
+ </form>
+ </div><!--/well-->
</div>
- </div><!-- /row -->
-
+ </div>
<div class="row">
<div class="span4">
- <h2>Form field sizes</h2>
- <p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p>
- <p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p>
+ <h2>Horizontal form</h2>
</div>
<div class="span12">
- <form action="">
- <div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div>
- <div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div>
- <div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div>
- <div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div>
- <div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div>
- <div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div>
- <div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div>
- <div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div>
- <div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div>
- <div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div>
- <div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div>
+ <form class="form-horizontal">
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="input01">Text input</label>
+ <div class="controls">
+ <input type="text" class="xlarge" name="input01">
+ <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="select01">Select list</label>
+ <div class="controls">
+ <select name="select01">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="multiSelect">Multi-select</label>
+ <div class="controls">
+ <select multiple="multiple" name="multiSelect">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ </fieldset>
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="fileInput">File input</label>
+ <div class="controls">
+ <input class="input-file" id="fileInput" name="fileInput" type="file" />
+ </div>
+ </fieldset>
+ <fieldset class="control-group has-error">
+ <label class="control-label" for="inputError">Input with error</label>
+ <div class="controls">
+ <input type="text" name="inputError">
+ </div>
+ </fieldset>
+ <fieldset class="control-group has-error">
+ <label class="control-label" for="textareaError">Textarea with error</label>
+ <div class="controls">
+ <textarea class="input-xxlarge" rows="3"></textarea>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
+ <div class="controls">
+ <div class="control-list">
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option1">
+ Option one is this and that—be sure to include why it’s great
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option2">
+ Option two can also be checked and included in form results
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option3">
+ Option three can—yes, you guessed it—also be checked and included in form results
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option4">
+ Option four cannot be checked as it is disabled
+ </label>
+ </div>
+ <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="optionsRadios">Radio buttons</label>
+ <div class="controls">
+ <div class="control-list">
+ <label>
+ <input type="radio" checked name="optionsRadios" value="option1" />
+ <span>Option one is this and that—be sure to include why it’s great</span>
+ </label>
+ <label>
+ <input type="radio" name="optionsRadios" value="option2" />
+ <span>Option two can is something else and selecting it will deselect options 1</span>
+ </label>
+ </div>
+ <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
+ </div>
+ </fieldset>
+ <fieldset class="form-actions">
+ <button type="submit" class="btn primary">Save changes</button>
+ <button type="reset" class="btn">Cancel</button>
+ </fieldset>
</form>
</div>
</div>
-
<div class="row">
<div class="span4">
- <h2>Buttons</h2>
- <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
- <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
+ <h2>Vertical form</h2>
</div>
<div class="span12">
- <h3>Example buttons</h3>
- <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
- <div class="well" style="padding: 14px 19px;">
- <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button>
- </div>
- <h3>Alternate sizes</h3>
- <p>Fancy larger or smaller buttons? Have at it!</p>
- <div class="well">
- <a href="#" class="btn large primary">Primary action</a>
- <a href="#" class="btn large">Action</a>
- </div>
- <div class="well" style="padding: 16px 19px;">
- <a href="#" class="btn small primary">Primary action</a>
- <a href="#" class="btn small">Action</a>
- </div>
- <h3>Disabled state</h3>
- <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
- <h4>Links</h4>
- <div class="well">
- <a href="#" class="btn large primary disabled">Primary action</a>
- <a href="#" class="btn large disabled">Action</a>
- </div>
- <h4>Buttons</h4>
- <div class="well">
- <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
- </div>
+ <form class="form-vertical">
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="input01">Label</label>
+ <div class="controls">
+ <input type="text" class="xlarge" name="input01">
+ <p class="help-text">Be sure to fill this out like so, or else!</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="select01">Label</label>
+ <div class="controls">
+ <select name="select01"></select>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="input02">Label</label>
+ <div class="controls">
+ <div class="control-list">
+ <label class="checkbox">
+ <input type="checkbox"> Something something something something something
+ </label>
+ <label class="checkbox">
+ <input type="checkbox"> Something something something something
+ </label>
+ <label class="checkbox">
+ <input type="checkbox"> Something something something
+ </label>
+ </div>
+ </div>
+ </fieldset>
+ <fieldset class="form-actions">
+ <button type="submit" class="btn primary">Save changes</button>
+ <button type="reset" class="btn">Cancel</button>
+ </fieldset>
+ </form>
</div>
- </div><!-- /row -->
+ </div>
</section>
@@ -1378,6 +1245,7 @@
<h2>Tabs and pills</h2>
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
+ <p><a class="btn js-btn" href="./javascript.html#tabs">Get the javascript »</a></p>
</div>
<div class="span12">
<ul class="tabs">
@@ -1929,6 +1797,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</section>
+<div class="radial-test"></div>
</div><!-- /container -->
diff --git a/lib/forms.less b/lib/forms.less
index 91aca77fe7..fd46fc71e8 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -6,29 +6,20 @@
// GENERAL STYLES
// --------------
+// Make all forms have space below them
form {
margin-bottom: @baseline;
}
// Groups of fields with labels on top (legends)
-fieldset {
- margin-bottom: @baseline;
- padding-top: @baseline;
- legend {
- display: block;
- padding-left: 150px;
- font-size: @basefont * 1.5;
- line-height: 1;
- color: @grayDark;
- *padding: 0 0 5px 145px; /* IE6-7 */
- *line-height: 1.5; /* IE6-7 */
- }
-}
-
-// Parent element that clears floats and wraps labels and fields together
-form .clearfix {
- margin-bottom: @baseline;
- .clearfix()
+legend {
+ display: block;
+ width: 100%;
+ margin-bottom: @baseline * 1.5;
+ font-size: @basefont * 1.5;
+ line-height: @baseline * 2;
+ color: @grayDark;
+ border-bottom: 1px solid #eee;
}
// Set font for forms
@@ -36,25 +27,16 @@ label,
input,
select,
textarea {
- #font > .sans-serif(normal,13px,normal);
+ #font > .sans-serif(normal,@basefont,@baseline);
}
-// Float labels left
+// Identify controls by their labels
label {
- padding-top: 6px;
- font-size: @basefont;
- line-height: @baseline;
- float: left;
- width: 130px;
- text-align: right;
+ display: block;
+ margin-bottom: 5px;
color: @grayDark;
}
-// Shift over the inside div to align all label's relevant content
-form .input {
- margin-left: 150px;
-}
-
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
@@ -77,7 +59,7 @@ select,
.border-radius(3px);
}
-/* mini reset for non-html5 file types */
+/* Mini reset for unique input types */
input[type=checkbox],
input[type=radio] {
width: auto;
@@ -89,6 +71,7 @@ input[type=radio] {
border: none;
}
+// Reset the file input to browser defaults
input[type=file] {
background-color: @white;
padding: initial;
@@ -97,6 +80,7 @@ input[type=file] {
.box-shadow(none);
}
+// Help out input buttons
input[type=button],
input[type=reset],
input[type=submit] {
@@ -120,24 +104,11 @@ textarea {
height: auto;
}
-// For text that needs to appear as an input but should not be an input
-.uneditable-input {
- background-color: @white;
- display: block;
- border-color: #eee;
- .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
- cursor: not-allowed;
-}
-// Placeholder text gets special styles; can't be bundled together though for some reason
-:-moz-placeholder {
- color: @grayLight;
-}
-::-webkit-input-placeholder {
- color: @grayLight;
-}
-// Focus states
+// FOCUS STATE
+// -----------
+
input,
textarea {
@transition: border linear .2s, box-shadow linear .2s;
@@ -158,36 +129,6 @@ select:focus {
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
}
-// Error styles
-form div.clearfix.error {
- background: lighten(@red, 57%);
- padding: 10px 0;
- margin: -10px 0 10px;
- .border-radius(4px);
- @error-text: desaturate(lighten(@red, 25%), 25%);
- > label,
- span.help-inline,
- span.help-block {
- color: @red;
- }
- input,
- textarea {
- border-color: @error-text;
- .box-shadow(0 0 3px rgba(171,41,32,.25));
- &:focus {
- border-color: darken(@error-text, 10%);
- .box-shadow(0 0 6px rgba(171,41,32,.5));
- }
- }
- .input-prepend,
- .input-append {
- span.add-on {
- background: lighten(@red, 50%);
- border-color: @error-text;
- color: darken(@error-text, 10%);
- }
- }
-}
// INPUT SIZES
@@ -232,8 +173,9 @@ select {
}
-// INPUT STATES
-// ------------
+
+// DISABLED STATE
+// --------------
// Disabled and read-only inputs
input[disabled],
@@ -247,36 +189,89 @@ textarea[readonly] {
cursor: not-allowed;
}
-// Actions (the buttons)
-.actions {
- background: #f5f5f5;
+
+
+// ERROR STATE
+// -----------
+
+// Set color of error text
+@error-text: desaturate(lighten(@red, 25%), 25%);
+
+// Style the background of control-groups with errors
+.has-error {
+ background: lighten(@red, 55%);
+ padding: (@baseline / 2) 0;
+ margin: -10px 0 10px;
+ .border-radius(4px);
+ > label,
+ span.help-inline,
+ span.help-block {
+ color: @red;
+ }
+ input,
+ textarea,
+ select {
+ border-color: @error-text;
+ .box-shadow(0 0 3px rgba(171,41,32,.25));
+ &:focus {
+ border-color: darken(@error-text, 10%);
+ .box-shadow(0 0 6px rgba(171,41,32,.5));
+ }
+ }
+ .input-prepend,
+ .input-append {
+ span.add-on {
+ background: lighten(@red, 50%);
+ border-color: @error-text;
+ color: darken(@error-text, 10%);
+ }
+ }
+}
+
+
+
+// FORM ACTIONS
+// ------------
+
+.form-actions {
+ padding: (@baseline - 1) 20px @baseline;
margin-top: @baseline;
margin-bottom: @baseline;
- padding: (@baseline - 1) 20px @baseline 150px;
+ background-color: #f5f5f5;
border-top: 1px solid #ddd;
- .border-radius(0 0 3px 3px);
- .secondary-action {
- float: right;
- a {
- line-height: 30px;
- &:hover {
- text-decoration: underline;
- }
- }
- }
}
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+ background-color: @white;
+ display: block;
+ border-color: #eee;
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+ cursor: not-allowed;
+}
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+:-moz-placeholder {
+ color: @grayLight;
+}
+::-webkit-input-placeholder {
+ color: @grayLight;
+}
+
+
+
// HELP TEXT
// ---------
-.help-inline,
-.help-block {
- font-size: @basefont - 2;
- line-height: @baseline;
+.help-text {
+ margin-top: 5px;
+ margin-bottom: 0;
color: @grayLight;
}
+
.help-inline {
+ display: inline;
padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */
@@ -290,7 +285,7 @@ textarea[readonly] {
// INLINE FIELDS
-// ---------
+// -------------
.inline-inputs {
color: @gray;
@@ -309,8 +304,8 @@ textarea[readonly] {
}
-// INPUTS GROUPS
-// -------------
+// INPUT GROUPS
+// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
@@ -360,97 +355,49 @@ textarea[readonly] {
}
-// LISTS OF CONTROLS
+
+
+// HORIZONTAL & VERTICAL FORMS
+// ---------------------------
+
+
+// Common properties
// -----------------
-// Stacked options for forms (radio buttons or checkboxes)
-.inputs-list {
- margin: 0 0 5px;
- width: 100%;
- li {
- display: block;
- padding: 0;
- width: 100%;
- }
- label {
- display: block;
- float: none;
- width: auto;
- padding: 0;
- line-height: @baseline;
- text-align: left;
- white-space: normal;
- strong {
- color: @gray;
- }
- small {
- font-size: @basefont - 2;
- font-weight: normal;
- }
- }
- .inputs-list {
- margin-left: 25px;
- margin-bottom: 10px;
- padding-top: 0;
- }
- &:first-child {
- padding-top: 6px;
- }
- li + li {
- padding-top: 2px;
- }
- input[type=radio],
- input[type=checkbox] {
- margin-bottom: 0;
- }
+// Margin to space out fieldsets
+.control-group {
+ margin-bottom: @baseline;
}
+// Bold the labels so they stand out
+.control-group > label {
+ font-weight: bold;
+}
-// STACKED FORMS
-// -------------
+// Lists of controls (checkboxes and radios)
+.control-list {
+}
-.form-stacked {
- padding-left: 20px;
- fieldset {
- padding-top: @baseline / 2;
- }
- legend {
- padding-left: 0;
- }
- label {
- display: block;
- float: none;
- width: auto;
- font-weight: bold;
- text-align: left;
- line-height: 20px;
- padding-top: 0;
- }
- .clearfix {
- margin-bottom: @baseline / 2;
- div.input {
- margin-left: 0;
- }
- }
- .inputs-list {
- margin-bottom: 0;
- li {
- padding-top: 0;
- label {
- font-weight: normal;
- padding-top: 0;
- }
- }
- }
- div.clearfix.error {
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- margin-top: 0;
- margin-left: -10px;
- }
- .actions {
- margin-left: -20px;
- padding-left: 20px;
- }
-}
\ No newline at end of file
+
+// Horizontal-specific styles
+// --------------------------
+
+// Float the labels left
+.form-horizontal .control-group > label {
+ float: left;
+ width: 130px;
+ padding-top: 5px;
+ text-align: right;
+}
+// Move over all input controls and content
+.form-horizontal .controls {
+ margin-left: 150px;
+}
+// Move the options list down to align with labels
+.form-horizontal .control-list {
+ padding-top: 6px; // has to be padding because margin collaspes
+}
+// Move over buttons in .form-actions to align with .controls
+.form-horizontal .form-actions {
+ padding-left: 150px;
+}
diff --git a/lib/mixins.less b/lib/mixins.less
index 929618a409..b0ecf03d37 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -6,32 +6,32 @@
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
- &:before,
+ &:before,
&:after {
display: table;
content: "";
zoom: 1;
*display: inline;
- }
- &:after {
+ }
+ &:after {
clear: both;
- }
+ }
}
// Center-align a block level element
.center-block() {
- display: block;
+ display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
- height: @height;
- width: @width;
+ height: @height;
+ width: @width;
}
.square(@size: 5px) {
- .size(@size, @size);
+ .size(@size, @size);
}
// Input placeholder text
@@ -112,27 +112,40 @@
// Transitions
.transition(@transition) {
- -webkit-transition: @transition;
- -moz-transition: @transition;
- -ms-transition: @transition;
- -o-transition: @transition;
- transition: @transition;
+ -webkit-transition: @transition;
+ -moz-transition: @transition;
+ -ms-transition: @transition;
+ -o-transition: @transition;
+ transition: @transition;
+}
+
+// Transform for scale and rotate
+// translate, rotate, scale -- need to finalize
+.rotation(@degrees: 5deg) {
+ -webkit-transform: rotate(@degrees);
+ -moz-transform: rotate(@degrees);
+ transform: rotate(@degrees);
+}
+.scale(@value: 1.5) {
+ -webkit-transform: scale(@value);
+ -moz-transform: scale(@value);
+ transform: scale(@value);
}
// Background clipping
.background-clip(@clip) {
- -webkit-background-clip: @clip;
- -moz-background-clip: @clip;
- background-clip: @clip;
+ -webkit-background-clip: @clip;
+ -moz-background-clip: @clip;
+ background-clip: @clip;
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
- -webkit-column-count: @columnCount;
- -moz-column-count: @columnCount;
+ -webkit-column-count: @columnCount;
+ -moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
- -moz-column-gap: @columnGap;
+ -moz-column-gap: @columnGap;
column-gap: @columnGap;
}
@@ -140,11 +153,11 @@
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- }
- .border(@color: @white, @alpha: 1) {
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- background-clip: padding-box;
- }
+ }
+ .border(@color: @white, @alpha: 1) {
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+ background-clip: padding-box;
+ }
}
// Gradient Bar Colors for buttons and allerts
@@ -157,9 +170,8 @@
// Gradients
#gradient {
- .horizontal (@startColor: #555, @endColor: #333) {
+ .horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
@@ -167,11 +179,11 @@
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+ background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
- .vertical (@startColor: #555, @endColor: #333) {
+ .vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor;
- background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
@@ -179,9 +191,10 @@
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
@@ -192,15 +205,24 @@
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: @endColor;
- background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}
+ .radial(@centerColor: #555, @outsideColor: #333) {
+ background-color: @outsideColor;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor));
+ background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor);
+ background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor);
+ background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor);
+ background-repeat: no-repeat;
+ // Opera cannot do radial gradients yet
+ }
}
// Reset filters for IE
@@ -210,8 +232,8 @@
// Opacity
.opacity(@opacity: 100) {
- filter: e(%("alpha(opacity=%d)", @opacity));
- -khtml-opacity: @opacity / 100;
- -moz-opacity: @opacity / 100;
- opacity: @opacity / 100;
+ filter: e(%("alpha(opacity=%d)", @opacity));
+ -khtml-opacity: @opacity / 100;
+ -moz-opacity: @opacity / 100;
+ opacity: @opacity / 100;
}
\ No newline at end of file
diff --git a/lib/reset.less b/lib/reset.less
index 6be76fdba6..983f14f3dc 100644
--- a/lib/reset.less
+++ b/lib/reset.less
@@ -1,5 +1,5 @@
/* 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).
+ * 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).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
diff --git a/lib/type.less b/lib/type.less
index 077ae9d8f7..88b320459f 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -41,15 +41,16 @@ h2 {
font-size: 14px;
}
}
-h3, h4, h5, h6 {
- line-height: @baseline * 2;
-}
h3 {
+ line-height: @baseline * 2;
font-size: 18px;
small {
font-size: 14px;
}
}
+h4, h5, h6 {
+ line-height: @baseline;
+}
h4 {
font-size: 16px;
small {
diff --git a/lib/variables.less b/lib/variables.less
index 34000d0669..dcb0a8ebf0 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -9,10 +9,10 @@
// Grays
@black: #000;
-@grayDark: lighten(@black, 25%);
-@gray: lighten(@black, 50%);
-@grayLight: lighten(@black, 75%);
-@grayLighter: lighten(@black, 90%);
+@grayDark: #333;
+@gray: #555;
+@grayLight: #777;
+@grayLighter: #ccc;
@white: #fff;
// Accent Colors
--
GitLab
From ecdba931ec4a6eced099026c1aeab503567a4e0a Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 29 Sep 2011 01:41:03 -0700
Subject: [PATCH 07/66] remove that test gradient
---
docs/index.html | 3 ---
1 file changed, 3 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 75a18ea409..d24bb1afda 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1796,9 +1796,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</section>
-
-<div class="radial-test"></div>
-
</div><!-- /container -->
<footer class="footer">
--
GitLab
From 4e9849966d0f7b18cd4b8a22f6ef98c6900a2099 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 29 Sep 2011 01:43:14 -0700
Subject: [PATCH 08/66] update topbar dropdown arrow to match link and hover
colors
---
bootstrap.css | 28 ++++++++++++----------------
bootstrap.min.css | 4 ++--
lib/patterns.less | 7 +++++--
3 files changed, 19 insertions(+), 20 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index d3bb942cda..33cc011f94 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: Thu Sep 29 01:39:48 PDT 2011
+ * Date: Thu Sep 29 01:42: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).
@@ -951,16 +951,6 @@ textarea[readonly] {
.form-horizontal .form-actions {
padding-left: 150px;
}
-.radial-test {
- background-color: #009900;
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900));
- background-image: -webkit-radial-gradient(circle, #990000, #009900);
- background-image: -moz-radial-gradient(circle, #990000, #009900);
- background-image: -ms-radial-gradient(circle, #990000, #009900);
- background-repeat: no-repeat;
- width: 100%;
- height: 940px;
-}
/*
* Tables.less
* Tables for, you guessed it, tabular data
@@ -1307,14 +1297,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
- margin-left: 4px;
+ margin-left: 6px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ffffff;
- filter: alpha(opacity=50);
- -khtml-opacity: 0.5;
- -moz-opacity: 0.5;
- opacity: 0.5;
+ filter: alpha(opacity=30);
+ -khtml-opacity: 0.3;
+ -moz-opacity: 0.3;
+ opacity: 0.3;
+}
+.dropdown:hover .dropdown-toggle:after {
+ filter: alpha(opacity=100);
+ -khtml-opacity: 1;
+ -moz-opacity: 1;
+ opacity: 1;
}
.dropdown-menu {
background-color: #ffffff;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index bb31375dd1..ef0f69f1f0 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -168,7 +168,6 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.form-horizontal .controls{margin-left:150px;}
.form-horizontal .control-list{padding-top:6px;}
.form-horizontal .form-actions{padding-left:150px;}
-.radial-test{background-color:#009900;background-image:-webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900));background-image:-webkit-radial-gradient(circle, #990000, #009900);background-image:-moz-radial-gradient(circle, #990000, #009900);background-image:-ms-radial-gradient(circle, #990000, #009900);background-repeat:no-repeat;width:100%;height:940px;}
table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
table td{vertical-align:top;}
@@ -219,7 +218,8 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
.topbar ul .dropdown-menu li a{padding:4px 15px;}
.dropdown{position:relative;}
-.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
+.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;}
+.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#333333;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
diff --git a/lib/patterns.less b/lib/patterns.less
index eae09a5963..ec40641d39 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -205,11 +205,14 @@
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
- margin-left: 4px;
+ margin-left: 6px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @white;
- .opacity(50);
+ .opacity(30);
+}
+.dropdown:hover .dropdown-toggle:after {
+ .opacity(100);
}
// The dropdown menu (ul)
.dropdown-menu {
--
GitLab
From 00204a80cf1c45cb9d7d80986756401d304a3944 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 29 Sep 2011 01:44:51 -0700
Subject: [PATCH 09/66] change h4 back to lineheight * 2
---
bootstrap.css | 8 ++++----
bootstrap.min.css | 7 +++----
lib/type.less | 6 +++---
3 files changed, 10 insertions(+), 11 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 33cc011f94..acc05c7174 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: Thu Sep 29 01:42:34 PDT 2011
+ * Date: Thu Sep 29 01:44:42 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).
@@ -441,20 +441,20 @@ h3 {
h3 small {
font-size: 14px;
}
-h4, h5, h6 {
- line-height: 18px;
-}
h4 {
font-size: 16px;
+ line-height: 36px;
}
h4 small {
font-size: 12px;
}
h5 {
font-size: 14px;
+ line-height: 18px;
}
h6 {
font-size: 13px;
+ line-height: 18px;
color: #777777;
text-transform: uppercase;
}
diff --git a/bootstrap.min.css b/bootstrap.min.css
index ef0f69f1f0..5be71dd4a4 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -81,10 +81,9 @@ h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;}h1 small,h2 small,h3 small,h4
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;}
-h4,h5,h6{line-height:18px;}
-h4{font-size:16px;}h4 small{font-size:12px;}
-h5{font-size:14px;}
-h6{font-size:13px;color:#777777;text-transform:uppercase;}
+h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
+h5{font-size:14px;line-height:18px;}
+h6{font-size:13px;line-height:18px;color:#777777;text-transform:uppercase;}
ul,ol{margin:0 0 18px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
diff --git a/lib/type.less b/lib/type.less
index 88b320459f..ea1f289e72 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -48,20 +48,20 @@ h3 {
font-size: 14px;
}
}
-h4, h5, h6 {
- line-height: @baseline;
-}
h4 {
font-size: 16px;
+ line-height: @baseline * 2;
small {
font-size: 12px;
}
}
h5 {
font-size: 14px;
+ line-height: @baseline;
}
h6 {
font-size: 13px;
+ line-height: @baseline;
color: @grayLight;
text-transform: uppercase;
}
--
GitLab
From f54568fa31396556a0df7bf8e2b180885e2b1c3f Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 29 Sep 2011 01:47:55 -0700
Subject: [PATCH 10/66] round the corners on the search form inputs like a boss
---
bootstrap.css | 7 ++++++-
bootstrap.min.css | 1 +
lib/forms.less | 9 +++++++++
3 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/bootstrap.css b/bootstrap.css
index acc05c7174..6758ea7eb9 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: Thu Sep 29 01:44:42 PDT 2011
+ * Date: Thu Sep 29 01:47:26 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).
@@ -930,6 +930,11 @@ textarea[readonly] {
margin-right: 0;
margin-left: -1px;
}
+.form-search .search-query {
+ -webkit-border-radius: 14px;
+ -moz-border-radius: 14px;
+ border-radius: 14px;
+}
.control-group {
margin-bottom: 18px;
}
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 5be71dd4a4..cf290c8e1e 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -161,6 +161,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
+.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
.control-group{margin-bottom:18px;}
.control-group>label{font-weight:bold;}
.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
diff --git a/lib/forms.less b/lib/forms.less
index fd46fc71e8..56325daa9c 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -357,6 +357,15 @@ textarea[readonly] {
+// SEARCH FORM
+// -----------
+
+.form-search .search-query {
+ .border-radius(14px);
+}
+
+
+
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
--
GitLab
From 0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 29 Sep 2011 02:21:02 -0700
Subject: [PATCH 11/66] adding button groups and toolbars like a boss
---
bootstrap.css | 58 +++++++++++++++++++++++++++++++-
bootstrap.min.css | 8 +++++
docs/index.html | 85 ++++++++++++++++++++++++++++++++++++++++++++---
lib/mixins.less | 17 ++++++++++
lib/patterns.less | 48 ++++++++++++++++++++++++++
5 files changed, 210 insertions(+), 6 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 6758ea7eb9..92da336f65 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: Thu Sep 29 01:47:26 PDT 2011
+ * Date: Thu Sep 29 02:20: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).
@@ -1726,6 +1726,62 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
+.btn-toolbar {
+ zoom: 1;
+}
+.btn-toolbar:before, .btn-toolbar:after {
+ display: table;
+ content: "";
+ zoom: 1;
+ *display: inline;
+}
+.btn-toolbar:after {
+ clear: both;
+}
+.btn-toolbar .btn-group {
+ float: left;
+ margin-right: 10px;
+}
+.btn-group {
+ zoom: 1;
+}
+.btn-group:before, .btn-group:after {
+ display: table;
+ content: "";
+ zoom: 1;
+ *display: inline;
+}
+.btn-group:after {
+ clear: both;
+}
+.btn-group .btn {
+ position: relative;
+ float: left;
+ margin-left: -1px;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+.btn-group .btn:first-child {
+ margin-left: 0;
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-left-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-left-radius: 4px;
+}
+.btn-group .btn:last-child {
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-bottom-right-radius: 4px;
+}
+.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active {
+ z-index: 2;
+}
.close {
float: right;
color: #000000;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index cf290c8e1e..a6052c7666 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -260,6 +260,14 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
+.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;content:"";zoom:1;*display:inline;}
+.btn-toolbar:after{clear:both;}
+.btn-toolbar .btn-group{float:left;margin-right:10px;}
+.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;}
+.btn-group:after{clear:both;}
+.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
+.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
+.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}
diff --git a/docs/index.html b/docs/index.html
index d24bb1afda..137144991f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -898,7 +898,7 @@
<div class="span-one-third">
<h3></h3>
</div>
- </div>
+ </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Search form</h2>
@@ -911,7 +911,7 @@
</form>
</div><!--/well-->
</div>
- </div>
+ </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Inline form</h2>
@@ -928,7 +928,7 @@
</form>
</div><!--/well-->
</div>
- </div>
+ </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Horizontal form</h2>
@@ -1032,7 +1032,7 @@
</fieldset>
</form>
</div>
- </div>
+ </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Vertical form</h2>
@@ -1075,7 +1075,82 @@
</fieldset>
</form>
</div>
- </div>
+ </div><!-- /row -->
+
+ <div class="row">
+ <div class="span4">
+ <h2>Buttons</h2>
+ <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
+ <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
+ </div>
+ <div class="span12">
+ <h3>Example buttons</h3>
+ <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
+ <div class="well" style="padding: 14px 19px;">
+ <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button>
+ </div>
+ <h3>Alternate sizes</h3>
+ <p>Fancy larger or smaller buttons? Have at it!</p>
+ <div class="well">
+ <a href="#" class="btn large primary">Primary action</a>
+ <a href="#" class="btn large">Action</a>
+ </div>
+ <div class="well" style="padding: 16px 19px;">
+ <a href="#" class="btn small primary">Primary action</a>
+ <a href="#" class="btn small">Action</a>
+ </div>
+ <h3>Disabled state</h3>
+ <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
+ <h4>Links</h4>
+ <div class="well">
+ <a href="#" class="btn large primary disabled">Primary action</a>
+ <a href="#" class="btn large disabled">Action</a>
+ </div>
+ <h4>Buttons</h4>
+ <div class="well">
+ <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
+ </div>
+ </div>
+ </div><!-- /row -->
+
+ <div class="row">
+ <div class="span4">
+ <h2>Button groups</h2>
+ </div>
+ <div class="span12">
+ <h3>Example</h3>
+ <div class="well">
+ <div class="btn-group">
+ <a class="btn" href="#">Left</a>
+ <a class="btn" href="#">Middle</a>
+ <a class="btn" href="#">Right</a>
+ </div>
+ </div>
+ <div class="well">
+ <div class="btn-toolbar">
+ <div class="btn-group">
+ <a class="btn" href="#">1</a>
+ <a class="btn" href="#">2</a>
+ <a class="btn" href="#">3</a>
+ <a class="btn" href="#">4</a>
+ <a class="btn" href="#">5</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">6</a>
+ <a class="btn" href="#">7</a>
+ <a class="btn" href="#">8</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">9</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">10</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+
</section>
diff --git a/lib/mixins.less b/lib/mixins.less
index b0ecf03d37..131d142783 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -102,6 +102,23 @@
-moz-border-radius: @radius;
border-radius: @radius;
}
+.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) {
+ -webkit-border-top-left-radius: @topLeft;
+ -moz-border-radius-topleft: @topLeft;
+ border-top-left-radius: @topLeft;
+ -webkit-border-top-right-radius: @topRight;
+ -moz-border-radius-topright: @topRight;
+ border-top-right-radius: @topRight;
+ -webkit-border-bottom-right-radius: @bottomRight;
+ -moz-border-radius-bottomright: @bottomRight;
+ border-bottom-right-radius: @bottomRight;
+ -webkit-border-bottom-left-radius: @bottomLeft;
+ -moz-border-radius-bottomleft: @bottomLeft;
+ border-bottom-left-radius: @bottomLeft;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
diff --git a/lib/patterns.less b/lib/patterns.less
index ec40641d39..8add82c166 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -565,6 +565,54 @@ input[type=submit].btn {
}
}
+// Button groups
+// -------------
+
+// Group multiple button groups together for a toolbar
+.btn-toolbar {
+ .clearfix();
+ .btn-group {
+ float: left;
+ margin-right: 10px;
+ }
+}
+
+// Clear the float
+.btn-group {
+ .clearfix();
+}
+// Float them, remove border radius, then re-add to first and last elements
+.btn-group .btn {
+ position: relative;
+ float: left;
+ margin-left: -1px;
+ .border-radius(0);
+ &:first-child {
+ margin-left: 0;
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-left-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ &:last-child {
+ -webkit-border-top-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-bottom-right-radius: 4px;
+ }
+}
+// On hover/focus/active, bring the proper btn to front
+.btn-group .btn:hover,
+.btn-group .btn:focus,
+.btn-group .btn:active {
+ z-index: 2;
+}
+
+
// CLOSE ICONS
// -----------
--
GitLab
From 96dd7a2903aa5213ddb364b385660e26396dc670 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 4 Oct 2011 00:20:38 -0700
Subject: [PATCH 12/66] update variables to inlude @baseFontSize,
@baseFontFamily, @baseLineHeight for easier customization; added placeholder
for @primaryButtonColor, but didn't implement
---
bootstrap.css | 69 ++++++++++++++++++++++----------------------
bootstrap.min.css | 60 +++++++++++++++++++-------------------
lib/forms.less | 30 +++++++++----------
lib/mixins.less | 10 +++----
lib/patterns.less | 34 +++++++++++-----------
lib/scaffolding.less | 4 ++-
lib/tables.less | 6 ++--
lib/type.less | 50 +++++++++++++++++---------------
lib/variables.less | 49 +++++++++++++++++++------------
9 files changed, 164 insertions(+), 148 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 92da336f65..75928c7490 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: Thu Sep 29 02:20:34 PDT 2011
+ * Date: Tue Oct 4 00:16:55 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).
@@ -187,9 +187,8 @@ body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
- font-weight: normal;
line-height: 18px;
- color: #333333;
+ color: #404040;
}
.container {
width: 940px;
@@ -393,14 +392,14 @@ a:hover {
* Headings, body text, lists, code, and more for a versatile and durable typography system
* ---------------------------------------------------------------------------------------- */
p {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
- font-weight: normal;
line-height: 18px;
margin-bottom: 9px;
}
p small {
font-size: 11px;
- color: #777777;
+ color: #bfbfbf;
}
h1,
h2,
@@ -409,7 +408,7 @@ h4,
h5,
h6 {
font-weight: bold;
- color: #333333;
+ color: #404040;
}
h1 small,
h2 small,
@@ -417,7 +416,7 @@ h3 small,
h4 small,
h5 small,
h6 small {
- color: #777777;
+ color: #bfbfbf;
}
h1 {
margin-bottom: 18px;
@@ -455,7 +454,7 @@ h5 {
h6 {
font-size: 13px;
line-height: 18px;
- color: #777777;
+ color: #bfbfbf;
text-transform: uppercase;
}
ul, ol {
@@ -475,7 +474,7 @@ ol {
}
li {
line-height: 18px;
- color: #555555;
+ color: #808080;
}
ul.unstyled {
list-style: none;
@@ -508,7 +507,7 @@ em {
line-height: inherit;
}
.muted {
- color: #777777;
+ color: #bfbfbf;
}
blockquote {
margin-bottom: 18px;
@@ -526,7 +525,7 @@ blockquote small {
font-size: 12px;
font-weight: 300;
line-height: 18px;
- color: #777777;
+ color: #bfbfbf;
}
blockquote small:before {
content: '\2014 \00A0';
@@ -538,7 +537,7 @@ address {
}
code, pre {
padding: 0 3px 2px;
- font-family: Monaco, Andale Mono, Courier New, monospace;
+ font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@@ -577,7 +576,7 @@ legend {
margin-bottom: 27px;
font-size: 19.5px;
line-height: 36px;
- color: #333333;
+ color: #404040;
border-bottom: 1px solid #eee;
}
label,
@@ -592,7 +591,7 @@ textarea {
label {
display: block;
margin-bottom: 5px;
- color: #333333;
+ color: #404040;
}
input[type=checkbox], input[type=radio] {
cursor: pointer;
@@ -607,7 +606,7 @@ select,
padding: 4px;
font-size: 13px;
line-height: 18px;
- color: #555555;
+ color: #808080;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@@ -843,15 +842,15 @@ textarea[readonly] {
cursor: not-allowed;
}
:-moz-placeholder {
- color: #777777;
+ color: #bfbfbf;
}
::-webkit-input-placeholder {
- color: #777777;
+ color: #bfbfbf;
}
.help-text {
margin-top: 5px;
margin-bottom: 0;
- color: #777777;
+ color: #bfbfbf;
}
.help-inline {
display: inline;
@@ -868,7 +867,7 @@ textarea[readonly] {
max-width: 600px;
}
.inline-inputs {
- color: #555555;
+ color: #808080;
}
.inline-inputs span, .inline-inputs input {
display: inline-block;
@@ -901,7 +900,7 @@ textarea[readonly] {
margin-right: -1px;
font-weight: normal;
line-height: 18px;
- color: #777777;
+ color: #bfbfbf;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
-webkit-border-radius: 3px 0 0 3px;
@@ -1115,7 +1114,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
overflow: visible;
}
.topbar a {
- color: #777777;
+ color: #bfbfbf;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.topbar .brand a:hover, .topbar ul .active > a {
@@ -1178,20 +1177,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
transition: none;
}
.topbar input:-moz-placeholder {
- color: #cccccc;
+ color: #e6e6e6;
}
.topbar input::-webkit-input-placeholder {
- color: #cccccc;
+ color: #e6e6e6;
}
.topbar input:hover {
- background-color: #777777;
+ 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: #333333;
+ color: #404040;
text-shadow: 0 1px 0 #ffffff;
border: 0;
padding: 5px 10px;
@@ -1363,7 +1362,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
clear: both;
font-weight: normal;
line-height: 18px;
- color: #555555;
+ color: #808080;
text-shadow: 0 1px 0 #ffffff;
}
.topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
@@ -1377,7 +1376,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
background-image: linear-gradient(top, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
- color: #333333;
+ color: #404040;
text-decoration: none;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
@@ -1439,7 +1438,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
border-color: #eee #eee #ddd;
}
.tabs > li.active > a {
- color: #555555;
+ color: #808080;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
@@ -1518,10 +1517,10 @@ table .headerSortUp.purple, table .headerSortDown.purple {
}
.breadcrumb .divider {
padding: 0 5px;
- color: #777777;
+ color: #bfbfbf;
}
.breadcrumb .active a {
- color: #333333;
+ color: #404040;
}
.hero-unit {
background-color: #f5f5f5;
@@ -1806,7 +1805,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
position: relative;
padding: 7px 15px;
margin-bottom: 18px;
- color: #333333;
+ color: #404040;
background-color: #eedc94;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
@@ -1868,13 +1867,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-bottom: 0;
}
.alert-message.block-message li {
- color: #333333;
+ color: #404040;
}
.alert-message.block-message .alert-actions {
margin-top: 5px;
}
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
- color: #333333;
+ color: #404040;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert-message.block-message.error {
@@ -1925,7 +1924,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
}
.pagination .disabled a, .pagination .disabled a:hover {
background-color: transparent;
- color: #777777;
+ color: #bfbfbf;
}
.pagination .next a {
border: 0;
@@ -2195,7 +2194,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
}
.label {
padding: 1px 3px 2px;
- background-color: #777777;
+ background-color: #bfbfbf;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index a6052c7666..4ba50158e6 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -21,7 +21,7 @@ input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
html,body{background-color:#ffffff;}
-body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#333333;}
+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;}
@@ -76,19 +76,19 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.span-two-thirds{width:620px;}
.offset-one-third{margin-left:340px;}
.offset-two-thirds{margin-left:660px;}
-p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#777777;}
-h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#777777;}
+p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
+h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;}
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
h5{font-size:14px;line-height:18px;}
-h6{font-size:13px;line-height:18px;color:#777777;text-transform:uppercase;}
+h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;}
ul,ol{margin:0 0 18px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
ol{list-style:decimal;}
-li{line-height:18px;color:#555555;}
+li{line-height:18px;color:#808080;}
ul.unstyled{list-style:none;margin-left:0;}
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
dl dt{font-weight:bold;}
@@ -96,19 +96,19 @@ dl dd{margin-left:9px;}
hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
strong{font-style:inherit;font-weight:bold;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
-.muted{color:#777777;}
+.muted{color:#bfbfbf;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
-blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#777777;}blockquote small:before{content:'\2014 \00A0';}
+blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
-code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
form{margin-bottom:18px;}
-legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;}
+legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
-label{display:block;margin-bottom:5px;color:#333333;}
+label{display:block;margin-bottom:5px;color:#404040;}
input[type=checkbox],input[type=radio]{cursor:pointer;}
-input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
@@ -146,17 +146,17 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
-:-moz-placeholder{color:#777777;}
-::-webkit-input-placeholder{color:#777777;}
-.help-text{margin-top:5px;margin-bottom:0;color:#777777;}
+:-moz-placeholder{color:#bfbfbf;}
+::-webkit-input-placeholder{color:#bfbfbf;}
+.help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;}
.help-inline{display:inline;padding-left:5px;*position:relative;*top:-5px;}
.help-block{display:block;max-width:600px;}
-.inline-inputs{color:#555555;}.inline-inputs span,.inline-inputs input{display:inline-block;}
+.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}
.inline-inputs input.mini{width:60px;}
.inline-inputs input.small{width:90px;}
.inline-inputs span{padding:0 2px 0 1px;}
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
-.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#777777;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
@@ -196,16 +196,16 @@ table .orange{color:#f89406;border-bottom-color:#f89406;}
table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
-.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#777777;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
+.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
.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:#cccccc;}
-.topbar input::-webkit-input-placeholder{color:#cccccc;}
-.topbar input:hover{background-color:#777777;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
-.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#333333;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 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-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;}
@@ -222,14 +222,14 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
-.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#333333;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
+.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
.dropdown.open .dropdown-menu{display:block;}
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
-.tabs>li.active>a{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
+.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
@@ -240,8 +240,8 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.tab-content>*,.pill-content>*{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}
.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
-.breadcrumb .divider{padding:0 5px;color:#777777;}
-.breadcrumb .active a{color:#333333;}
+.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
+.breadcrumb .active a{color:#404040;}
.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
@@ -269,16 +269,16 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
-.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
+.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}
.alert-message p{margin-bottom:0;}
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
.alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
.alert-message.block-message ul{margin-bottom:0;}
-.alert-message.block-message li{color:#333333;}
+.alert-message.block-message li{color:#404040;}
.alert-message.block-message .alert-actions{margin-top:5px;}
-.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
@@ -286,7 +286,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.pagination li{display:inline;}
.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
-.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#777777;}
+.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
.pagination .next a{border:0;}
.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
@@ -315,7 +315,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
-.label{padding:1px 3px 2px;background-color:#777777;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
+.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
.label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;}
diff --git a/lib/forms.less b/lib/forms.less
index 56325daa9c..b657e53d65 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -8,16 +8,16 @@
// Make all forms have space below them
form {
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
}
// Groups of fields with labels on top (legends)
legend {
display: block;
width: 100%;
- margin-bottom: @baseline * 1.5;
- font-size: @basefont * 1.5;
- line-height: @baseline * 2;
+ margin-bottom: @baseLineHeight * 1.5;
+ font-size: @baseFontSize * 1.5;
+ line-height: @baseLineHeight * 2;
color: @grayDark;
border-bottom: 1px solid #eee;
}
@@ -27,7 +27,7 @@ label,
input,
select,
textarea {
- #font > .sans-serif(normal,@basefont,@baseline);
+ #font > .sans-serif(normal,@baseFontSize,@baseLineHeight);
}
// Identify controls by their labels
@@ -50,10 +50,10 @@ select,
.uneditable-input {
display: inline-block;
width: 210px;
- height: @baseline;
+ height: @baseLineHeight;
padding: 4px;
- font-size: @basefont;
- line-height: @baseline;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
color: @gray;
border: 1px solid #ccc;
.border-radius(3px);
@@ -90,8 +90,8 @@ input[type=submit] {
select,
input[type=file] {
- height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
- line-height: @baseline * 1.5;
+ height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
+ line-height: @baseLineHeight * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
}
@@ -200,7 +200,7 @@ textarea[readonly] {
// Style the background of control-groups with errors
.has-error {
background: lighten(@red, 55%);
- padding: (@baseline / 2) 0;
+ padding: (@baseLineHeight / 2) 0;
margin: -10px 0 10px;
.border-radius(4px);
> label,
@@ -234,9 +234,9 @@ textarea[readonly] {
// ------------
.form-actions {
- padding: (@baseline - 1) 20px @baseline;
- margin-top: @baseline;
- margin-bottom: @baseline;
+ padding: (@baseLineHeight - 1) 20px @baseLineHeight;
+ margin-top: @baseLineHeight;
+ margin-bottom: @baseLineHeight;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
@@ -375,7 +375,7 @@ textarea[readonly] {
// Margin to space out fieldsets
.control-group {
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
}
// Bold the labels so they stand out
diff --git a/lib/mixins.less b/lib/mixins.less
index 131d142783..c43f166328 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -46,25 +46,25 @@
// Font Stacks
#font {
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ .shorthand(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ .sans-serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
- .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ .serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
font-family: "Georgia", Times New Roman, Times, serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
- .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
- font-family: "Monaco", Courier New, monospace;
+ .monospace(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
+ font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
diff --git a/lib/patterns.less b/lib/patterns.less
index 8add82c166..1b27b71847 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -313,7 +313,7 @@
> a {
padding: 0 15px;
margin-right: 2px;
- line-height: @baseline * 2;
+ line-height: @baseLineHeight * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
@@ -387,7 +387,7 @@
// -----------
.breadcrumb {
- margin: 0 0 @baseline;
+ margin: 0 0 @baseLineHeight;
padding: 7px 14px;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
@@ -424,12 +424,12 @@
p {
font-size: 18px;
font-weight: 200;
- line-height: @baseline * 1.5;
+ line-height: @baseLineHeight * 1.5;
}
}
footer {
- margin-top: @baseline - 1;
- padding-top: @baseline - 1;
+ margin-top: @baseLineHeight - 1;
+ padding-top: @baseLineHeight - 1;
border-top: 1px solid #eee;
}
@@ -438,11 +438,11 @@ footer {
// ------------
.page-header {
- margin-bottom: @baseline - 1;
+ margin-bottom: @baseLineHeight - 1;
border-bottom: 1px solid #ddd;
.box-shadow(0 1px 0 rgba(255,255,255,.5));
h1 {
- margin-bottom: (@baseline / 2) - 1px;
+ margin-bottom: (@baseLineHeight / 2) - 1px;
}
}
@@ -488,7 +488,7 @@ footer {
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
color: #333;
- font-size: @basefont;
+ font-size: @baseFontSize;
line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
@@ -540,14 +540,14 @@ footer {
// Button Sizes
&.large {
- font-size: @basefont + 2px;
+ font-size: @baseFontSize + 2px;
line-height: normal;
padding: 9px 14px 9px;
.border-radius(6px);
}
&.small {
padding: 7px 9px 7px;
- font-size: @basefont - 2px;
+ font-size: @baseFontSize - 2px;
}
}
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
@@ -621,7 +621,7 @@ input[type=submit].btn {
color: @black;
font-size: 20px;
font-weight: bold;
- line-height: @baseline * .75;
+ line-height: @baseLineHeight * .75;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
&:hover {
@@ -639,7 +639,7 @@ input[type=submit].btn {
.alert-message {
position: relative;
padding: 7px 15px;
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
color: @grayDark;
.gradientBar(#fceec1, #eedc94); // warning by default
text-shadow: 0 1px 0 rgba(255,255,255,.5);
@@ -655,7 +655,7 @@ input[type=submit].btn {
// Remove extra margin from content
h5 {
- line-height: @baseline;
+ line-height: @baseLineHeight;
}
p {
margin-bottom: 0;
@@ -715,8 +715,8 @@ input[type=submit].btn {
// ----------
.pagination {
- height: @baseline * 2;
- margin: @baseline 0;
+ height: @baseLineHeight * 2;
+ margin: @baseLineHeight 0;
ul {
float: left;
margin: 0;
@@ -731,7 +731,7 @@ input[type=submit].btn {
a {
float: left;
padding: 0 14px;
- line-height: (@baseline * 2) - 2;
+ line-height: (@baseLineHeight * 2) - 2;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
@@ -972,7 +972,7 @@ input[type=submit].btn {
.label {
padding: 1px 3px 2px;
background-color: @grayLight;
- font-size: @basefont * .75;
+ font-size: @baseFontSize * .75;
font-weight: bold;
color: @white;
text-transform: uppercase;
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 26bb0cc059..b6852535c9 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -12,7 +12,9 @@ html, body {
}
body {
margin: 0;
- #font > .sans-serif(normal,@basefont,@baseline);
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
color: @grayDark;
}
diff --git a/lib/tables.less b/lib/tables.less
index 988483f0ef..8a786ffd2a 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -9,16 +9,16 @@
table {
width: 100%;
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
padding: 0;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
- font-size: @basefont;
+ font-size: @baseFontSize;
border: 1px solid #ddd;
.border-radius(4px);
th, td {
padding: 10px 10px 9px;
- line-height: @baseline;
+ line-height: @baseLineHeight;
text-align: left;
}
th {
diff --git a/lib/type.less b/lib/type.less
index ea1f289e72..4232a24dff 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -7,10 +7,12 @@
// ---------
p {
- #font > .shorthand(normal,@basefont,@baseline);
- margin-bottom: @baseline / 2;
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ margin-bottom: @baseLineHeight / 2;
small {
- font-size: @basefont - 2;
+ font-size: @baseFontSize - 2;
color: @grayLight;
}
}
@@ -27,22 +29,22 @@ h1, h2, h3, h4, h5, h6 {
}
}
h1 {
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
font-size: 30px;
- line-height: @baseline * 2;
+ line-height: @baseLineHeight * 2;
small {
font-size: 18px;
}
}
h2 {
font-size: 24px;
- line-height: @baseline * 2;
+ line-height: @baseLineHeight * 2;
small {
font-size: 14px;
}
}
h3 {
- line-height: @baseline * 2;
+ line-height: @baseLineHeight * 2;
font-size: 18px;
small {
font-size: 14px;
@@ -50,18 +52,18 @@ h3 {
}
h4 {
font-size: 16px;
- line-height: @baseline * 2;
+ line-height: @baseLineHeight * 2;
small {
font-size: 12px;
}
}
h5 {
font-size: 14px;
- line-height: @baseline;
+ line-height: @baseLineHeight;
}
h6 {
font-size: 13px;
- line-height: @baseline;
+ line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
@@ -72,7 +74,7 @@ h6 {
// Unordered and Ordered lists
ul, ol {
- margin: 0 0 @baseline 25px;
+ margin: 0 0 @baseLineHeight 25px;
}
ul ul,
ul ol,
@@ -87,7 +89,7 @@ ol {
list-style: decimal;
}
li {
- line-height: @baseline;
+ line-height: @baseLineHeight;
color: @gray;
}
ul.unstyled {
@@ -97,15 +99,15 @@ ul.unstyled {
// Description Lists
dl {
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
dt, dd {
- line-height: @baseline;
+ line-height: @baseLineHeight;
}
dt {
font-weight: bold;
}
dd {
- margin-left: @baseline / 2;
+ margin-left: @baseLineHeight / 2;
}
}
@@ -135,16 +137,16 @@ em {
// Blockquotes
blockquote {
- margin-bottom: @baseline;
+ margin-bottom: @baseLineHeight;
border-left: 5px solid #eee;
padding-left: 15px;
p {
- #font > .shorthand(300,14px,@baseline);
+ #font > .shorthand(300,14px,@baseLineHeight);
margin-bottom: 0;
}
small {
display: block;
- #font > .shorthand(300,12px,@baseline);
+ #font > .shorthand(300,12px,@baseLineHeight);
color: @grayLight;
&:before {
content: '\2014 \00A0';
@@ -155,14 +157,14 @@ blockquote {
// Addresses
address {
display: block;
- line-height: @baseline;
- margin-bottom: @baseline;
+ line-height: @baseLineHeight;
+ margin-bottom: @baseLineHeight;
}
// Inline and block code styles
code, pre {
padding: 0 3px 2px;
- font-family: Monaco, Andale Mono, Courier New, monospace;
+ font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
font-size: 12px;
.border-radius(3px);
}
@@ -174,9 +176,9 @@ code {
pre {
background-color: #f5f5f5;
display: block;
- padding: (@baseline - 1) / 2;
- margin: 0 0 @baseline;
- line-height: @baseline;
+ padding: (@baseLineHeight - 1) / 2;
+ margin: 0 0 @baseLineHeight;
+ line-height: @baseLineHeight;
font-size: 12px;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
diff --git a/lib/variables.less b/lib/variables.less
index dcb0a8ebf0..864dbe8c03 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -3,19 +3,27 @@
* ----------------------------------------------------- */
-// Links
+// LINK COLORS
+// -----------
+
@linkColor: #0069d6;
@linkColorHover: darken(@linkColor, 15);
-// Grays
+
+// GRAYS
+// -----
+
@black: #000;
-@grayDark: #333;
-@gray: #555;
-@grayLight: #777;
-@grayLighter: #ccc;
+@grayDark: lighten(@black, 25%);
+@gray: lighten(@black, 50%);
+@grayLight: lighten(@black, 75%);
+@grayLighter: lighten(@black, 90%);
@white: #fff;
-// Accent Colors
+
+// ACCENT COLORS
+// -------------
+
@blue: #049CDB;
@blueDark: #0064CD;
@green: #46a546;
@@ -25,11 +33,10 @@
@pink: #c3325f;
@purple: #7a43b6;
-// Baseline grid
-@basefont: 13px;
-@baseline: 18px;
-// Griditude
+// GRID
+// ----
+
// Modify the grid styles in mixins.less
@gridColumns: 16;
@gridColumnWidth: 40px;
@@ -37,7 +44,10 @@
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-// Color Scheme
+
+// COLOR SCHEME
+// ------------
+
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
@baseColor: @blue; // Set a base color
@complement: spin(@baseColor, 180); // Determine a complementary color
@@ -51,10 +61,13 @@
@analog2: spin(@baseColor, -22);
+// THEME VARIABLES
+// ---------------
+
+// Typography
+@baseFontSize: 13px;
+@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@baseLineHeight: 18px;
-// More variables coming soon:
-// - @basefont to @baseFontSize
-// - @baseline to @baseLineHeight
-// - @baseFontFamily
-// - @primaryButtonColor
-// - anything else? File an issue on GitHub
\ No newline at end of file
+// Visuals
+@primaryButtonColor: @blue;
--
GitLab
From cde17c94919ef26093145e5412c6d425d3199d9f Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 4 Oct 2011 00:48:31 -0700
Subject: [PATCH 13/66] adding placeholder font-face mixin which doesn't work
yet
---
bootstrap.css | 2 +-
lib/mixins.less | 14 ++++++++++++++
2 files changed, 15 insertions(+), 1 deletion(-)
diff --git a/bootstrap.css b/bootstrap.css
index 75928c7490..2b0e88c86d 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 00:16:55 PDT 2011
+ * Date: Tue Oct 4 00:48:20 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).
diff --git a/lib/mixins.less b/lib/mixins.less
index c43f166328..47eb1a1c38 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -71,6 +71,20 @@
}
}
+// Font face generator
+.font-face(@fontFamily, @fileName, @style, @weight) {
+ @font-face {
+ font-family: @fontFamily;
+ font-style: @style;
+ font-weight: @weight;
+ src: url('@{fileName}.eot');
+ src: url('@{fileName}.eot?#iefix') format('embedded-opentype'),
+ url('@{fileName}.woff') format('woff'),
+ url('@{fileName}.ttf') format('truetype'),
+ url('@{fileName}.svg#@{fontFamily}') format('svg');
+ }
+}
+
// Grid System
.fixed-container() {
width: @siteWidth;
--
GitLab
From bdbc35206630645e6cc6655ec9e50aa70081a2fb Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 4 Oct 2011 00:55:35 -0700
Subject: [PATCH 14/66] adding new mixins
---
lib/mixins.less | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/lib/mixins.less b/lib/mixins.less
index 47eb1a1c38..9c27346c2a 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -155,13 +155,24 @@
.rotation(@degrees: 5deg) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
+ -ms-transform: rotate(@degrees);
+ -o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@value: 1.5) {
-webkit-transform: scale(@value);
-moz-transform: scale(@value);
+ -ms-transform: scale(@value);
+ -o-transform: scale(@value);
transform: scale(@value);
}
+.translate(@x: 0, @y: 0) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ -o-transform: translate(@x, @y);
+ transform: translate(@x, @y);
+}
// Background clipping
.background-clip(@clip) {
--
GitLab
From 913338f930736a1b186178469c6eafb55c1dbea8 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 4 Oct 2011 01:15:31 -0700
Subject: [PATCH 15/66] fixing multi select on chromium ubuntu by setting
background color explicitly
---
bootstrap.css | 3 ++-
bootstrap.min.css | 2 +-
lib/forms.less | 1 +
3 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 2b0e88c86d..ab96f6c7c6 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 00:48:20 PDT 2011
+ * Date: Tue Oct 4 01:15:08 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).
@@ -645,6 +645,7 @@ select, input[type=file] {
}
select[multiple] {
+ background-color: #ffffff;
height: inherit;
}
textarea {
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 4ba50158e6..9a241d80d0 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -113,7 +113,7 @@ input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3
input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
-select[multiple]{height:inherit;}
+select[multiple]{background-color:#ffffff;height:inherit;}
textarea{height:auto;}
input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
diff --git a/lib/forms.less b/lib/forms.less
index b657e53d65..4bdddc3a2e 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -97,6 +97,7 @@ input[type=file] {
// Make multiple select elements height not fixed
select[multiple] {
+ background-color: @white; // Fixes Chromium bug?
height: inherit;
}
--
GitLab
From a91a407bd60a266f928b5fea70d3c4332394b3c8 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Tue, 4 Oct 2011 21:48:53 -0700
Subject: [PATCH 16/66] start updating to data- driven js
---
js/bootstrap-alerts.js | 6 ++--
js/bootstrap-dropdown.js | 27 ++++++++-------
js/bootstrap-modal.js | 71 +++++++++++++++++++++++++---------------
js/bootstrap-popover.js | 6 ++--
js/bootstrap-tabs.js | 18 ++++++----
js/bootstrap-twipsy.js | 4 +--
6 files changed, 80 insertions(+), 52 deletions(-)
diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js
index 82bcac5246..4498270cb9 100644
--- a/js/bootstrap-alerts.js
+++ b/js/bootstrap-alerts.js
@@ -53,7 +53,7 @@
var Alert = function ( content, selector ) {
this.$element = $(content)
- .delegate(selector || '.close', 'click', this.close)
+ .delegate('[data-alert-dismiss]', 'click', this.close)
}
Alert.prototype = {
@@ -62,6 +62,8 @@
var $element = $(this).parent('.alert-message')
e && e.preventDefault()
+ e && e.stopPropagation()
+
$element.removeClass('in')
function removeElement () {
@@ -98,7 +100,7 @@
}
$(document).ready(function () {
- new Alert($('body'), '.alert-message[data-alert] .close')
+ new Alert($('body'))
})
})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index 75320c0f87..6379653c56 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -20,23 +20,14 @@
(function( $ ){
- var d = '.dropdown-toggle'
-
- function clearMenus() {
- $(d).parent('li').removeClass('open')
- }
-
- $(function () {
- $('html').bind("click", clearMenus)
- $('body').dropdown( '[data-dropdown] .dropdown-toggle' )
- })
+ var d = '[data-dropdown]'
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
- $.fn.dropdown = function ( selector ) {
+ $.fn.dropdown = function () {
return this.each(function () {
- $(this).delegate(selector || d, 'click', function (e) {
+ $(this).delegate(d, 'click', function (e) {
var li = $(this).parent('li')
, isActive = li.hasClass('open')
@@ -47,4 +38,16 @@
})
}
+ /* APPLY TO STANDARD DROPDOWN ELEMENTS
+ * =================================== */
+
+ function clearMenus() {
+ $(d).parent('li').removeClass('open')
+ }
+
+ $(function () {
+ $('html').bind("click", clearMenus)
+ $('body').dropdown()
+ })
+
})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 5c38a7477b..c8d41a50b2 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -18,7 +18,7 @@
* ========================================================= */
-(function( $ ){
+!function( $ ){
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
@@ -53,16 +53,12 @@
* ============================= */
var Modal = function ( content, options ) {
- this.settings = $.extend({}, $.fn.modal.defaults)
+ this.settings = $.extend({}, $.fn.modal.defaults, options)
this.$element = $(content)
- .delegate('.js-dismiss', 'click.modal', $.proxy(this.hide, this))
+ .delegate('[data-modal-dismiss]', $.proxy(this.hide, this))
- if ( options ) {
- $.extend( this.settings, options )
-
- if ( options.show ) {
- this.show()
- }
+ if ( this.settings.show ) {
+ this.show()
}
return this
@@ -81,15 +77,23 @@
escape.call(this)
backdrop.call(this, function () {
+ var transition = $.support.transition && that.$element.hasClass('fade')
+
that.$element
.appendTo(document.body)
.show()
- setTimeout(function () {
- that.$element
- .addClass('in')
- .trigger('shown')
- }, 1)
+ if (transition) {
+ that.$element[0].offsetWidth // force reflow
+ }
+
+ that.$element
+ .addClass('in')
+
+ transition ?
+ that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
+ that.$element.trigger('shown')
+
})
return this
@@ -98,6 +102,10 @@
, hide: function (e) {
e && e.preventDefault()
+ if ( !this.isShown ) {
+ return this
+ }
+
var that = this
this.isShown = false
@@ -132,16 +140,25 @@
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if ( this.isShown && this.settings.backdrop ) {
+ var doAnimate = $.support.transition && animate
+
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
- .click($.proxy(this.hide, this))
.appendTo(document.body)
- setTimeout(function () {
- that.$backdrop && that.$backdrop.addClass('in')
- $.support.transition && that.$backdrop.hasClass('fade') ?
- that.$backdrop.one(transitionEnd, callback) :
- callback()
- })
+ if ( this.settings.backdrop != 'static' ) {
+ this.$backdrop.click($.proxy(this.hide, this))
+ }
+
+ if ( doAnimate ) {
+ this.$backdrop[0].offsetWidth // force reflow
+ }
+
+ this.$backdrop.addClass('in')
+
+ doAnimate ?
+ this.$backdrop.one(transitionEnd, callback) :
+ callback()
+
} else if ( !this.isShown && this.$backdrop ) {
this.$backdrop.removeClass('in')
@@ -161,13 +178,13 @@
function escape() {
var that = this
if ( this.isShown && this.settings.keyboard ) {
- $('body').bind('keyup.modal', function ( e ) {
+ $(document).bind('keyup.modal', function ( e ) {
if ( e.which == 27 ) {
that.hide()
}
})
} else if ( !this.isShown ) {
- $('body').unbind('keyup.modal')
+ $(document).unbind('keyup.modal')
}
}
@@ -209,12 +226,12 @@
$.fn.modal.defaults = {
backdrop: false
, keyboard: false
- , show: true
+ , show: false
}
- /* MODAL DATA- IMPLEMENTATION
- * ========================== */
+ /* MODAL DATA-IMPLEMENTATION
+ * ========================= */
$(document).ready(function () {
$('body').delegate('[data-controls-modal]', 'click', function (e) {
@@ -224,4 +241,4 @@
})
})
-})( window.jQuery || window.ender )
\ No newline at end of file
+}( window.jQuery || window.ender );
\ No newline at end of file
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index e41090a3b3..1cf4b8917a 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -18,7 +18,7 @@
* =========================================================== */
-(function( $ ) {
+!function( $ ) {
var Popover = function ( element, options ) {
this.$element = $(element)
@@ -40,7 +40,7 @@
}
, getContent: function () {
- var contentvar
+ var content
, $e = this.$element
, o = this.options
@@ -74,4 +74,4 @@
$.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'})
-})( window.jQuery || window.ender )
\ No newline at end of file
+}( window.jQuery || window.ender );
\ No newline at end of file
diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
index 807b366a35..b94adfc25d 100644
--- a/js/bootstrap-tabs.js
+++ b/js/bootstrap-tabs.js
@@ -18,30 +18,36 @@
* ======================================================== */
-(function( $ ){
+!function( $ ){
function activate ( element, container ) {
- container.find('.active').removeClass('active')
+ container.find('> .active').removeClass('active')
element.addClass('active')
}
function tab( e ) {
var $this = $(this)
+ , $ul = $this.closest('ul')
, href = $this.attr('href')
- , $ul = $(e.liveFired)
- , $controlled
+ , previous
if (/^#\w+/.test(href)) {
e.preventDefault()
- if ($this.hasClass('active')) {
+ if ($this.parent('li').hasClass('active')) {
return
}
+ previous = $ul.find('.active a')[0]
$href = $(href)
activate($this.parent('li'), $ul)
activate($href, $href.parent())
+
+ $this.trigger({
+ type: 'change'
+ , relatedTarget: previous
+ })
}
}
@@ -59,4 +65,4 @@
$('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
})
-})( window.jQuery || window.ender )
\ No newline at end of file
+}( window.jQuery || window.ender );
\ No newline at end of file
diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js
index bc92f97fe1..0144c48158 100644
--- a/js/bootstrap-twipsy.js
+++ b/js/bootstrap-twipsy.js
@@ -19,7 +19,7 @@
* ========================================================== */
-(function( $ ) {
+!function( $ ) {
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
@@ -304,4 +304,4 @@
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
}
-})( window.jQuery || window.ender )
\ No newline at end of file
+}( window.jQuery || window.ender );
\ No newline at end of file
--
GitLab
From c9669be1ec2862b88ffdb296191e82fed79f56a4 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Wed, 5 Oct 2011 00:14:55 -0700
Subject: [PATCH 17/66] get modal working with new data-attrs
---
docs/javascript.html | 21 +++++++++------------
js/bootstrap-modal.js | 2 +-
2 files changed, 10 insertions(+), 13 deletions(-)
diff --git a/docs/javascript.html b/docs/javascript.html
index d5eb987392..9f2b138763 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -12,7 +12,7 @@
<![endif]-->
<!-- Le javascript -->
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+ <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-modal.js"></script>
@@ -182,7 +182,7 @@ $('#my-modal').bind('hidden', function () {
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
- <a href="#" class="close js-dismiss">×</a>
+ <a href="#" class="close" data-modal-dismiss="true" >×</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
@@ -190,12 +190,10 @@ $('#my-modal').bind('hidden', function () {
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Save changes</a>
- <a href="#" class="btn js-dismiss">Close</a>
+ <a href="#" class="btn" data-modal-dismiss="true" >Close</a>
</div>
</div>
-
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
-
</div>
</div>
</section>
@@ -221,7 +219,7 @@ $('#my-modal').bind('hidden', function () {
<pre class="prettyprint linenums">
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
- <li class="dropdown" data-dropdown="dropdown" >
+ <li class="dropdown" data-dropdown="true" >
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
@@ -231,7 +229,6 @@ $('#my-modal').bind('hidden', function () {
</ul>
</li>
</ul></pre>
- <p><span class="label notice">Notice</span> If your ui has several dropdowns, consider adding the <code>data-dropdown</code> attribute to a more significant container element like <code>.tabs</code> or <code>.topbar</code>.
<h3>Methods</h3>
<h4>$().dropdown()</h4>
<p>
@@ -239,7 +236,7 @@ $('#my-modal').bind('hidden', function () {
</p>
<h3>Demo</h3>
<div class="topbar-wrapper">
- <div id="topbar-example" class="topbar" data-dropdown="dropdown">
+ <div id="topbar-example" class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">Project Name</a>
@@ -252,7 +249,7 @@ $('#my-modal').bind('hidden', function () {
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown 1</a>
+ <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
@@ -261,7 +258,7 @@ $('#my-modal').bind('hidden', function () {
</ul>
</li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown 2</a>
+ <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
@@ -645,11 +642,11 @@ $('#my-modal').bind('hidden', function () {
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
<h3>Demo</h3>
<div class="alert-message warning fade in" data-alert="alert" >
- <a class="close" href="#">×</a>
+ <a class="close" data-alert-dismiss="true" href="#">×</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
<div class="alert-message block-message error fade in" data-alert="alert" >
- <a class="close" href="#">×</a>
+ <a class="close" data-alert-dismiss="true" href="#">×</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index c8d41a50b2..60b83d58fd 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -55,7 +55,7 @@
var Modal = function ( content, options ) {
this.settings = $.extend({}, $.fn.modal.defaults, options)
this.$element = $(content)
- .delegate('[data-modal-dismiss]', $.proxy(this.hide, this))
+ .delegate('[data-modal-dismiss]', 'click', $.proxy(this.hide, this))
if ( this.settings.show ) {
this.show()
--
GitLab
From f61fe3c4746ec09ff64756797fe6314be5f53b30 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 9 Oct 2011 21:13:26 -0700
Subject: [PATCH 18/66] 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;
-}
-.topbar form.pull-right {
- float: right;
+ margin-top: 5px;
+ margin-bottom: 0;
}
-.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 @@
</ul>
</li>
</ul>
- <form class="pull-left" action="">
+ <form class="form-search pull-left" action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
new file mode 100644
index 0000000000..7c13a44530
--- /dev/null
+++ b/examples/fluid-reverse.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <style type="text/css">
+ body {
+ padding-top: 60px;
+ }
+ </style>
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+ </head>
+
+ <body>
+
+ <div class="topbar">
+ <div class="topbar-inner">
+ <div class="fluid-container">
+ <a class="brand" href="#">Project name</a>
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ <p class="pull-right">Logged in as <a href="#">username</a></p>
+ </div>
+ </div>
+ </div>
+
+ <div class="fluid-container reverse">
+ <div class="fluid-sidebar-right">
+ <div class="well">
+ <h5>Sidebar</h5>
+ <ul>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ <h5>Sidebar</h5>
+ <ul>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ <h5>Sidebar</h5>
+ <ul>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="fluid-content">
+ <!-- Main hero unit for a primary marketing message or call to action -->
+ <div class="hero-unit">
+ <h1>Hello, world!</h1>
+ <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p><a class="btn primary large">Learn more »</a></p>
+ </div>
+
+ <!-- Example row of columns -->
+ <div class="row">
+ <div class="span6">
+ <h2>Heading</h2>
+ <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ </div>
+
+ <hr>
+
+ <!-- Example row of columns -->
+ <div class="row">
+ <div class="span6">
+ <h2>Heading</h2>
+ <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+ <p><a class="btn" href="#">View details »</a></p>
+ </div>
+ </div>
+
+ <footer>
+ <p>© Company 2011</p>
+ </footer>
+ </div>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/examples/fluid.html b/examples/fluid.html
index eacb5c3d2d..c6387846b6 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -30,7 +30,7 @@
<div class="topbar">
<div class="topbar-inner">
- <div class="container-fluid">
+ <div class="fluid-container">
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
@@ -42,8 +42,8 @@
</div>
</div>
- <div class="container-fluid">
- <div class="sidebar">
+ <div class="fluid-container">
+ <div class="fluid-sidebar-left">
<div class="well">
<h5>Sidebar</h5>
<ul>
@@ -68,7 +68,7 @@
</ul>
</div>
</div>
- <div class="content">
+ <div class="fluid-content">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
diff --git a/lib/patterns.less b/lib/patterns.less
index 1b27b71847..8ceffaa996 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -54,54 +54,53 @@
}
// Search Form
- form {
- float: left;
- margin: 5px 0 0 0;
+ .form-search {
position: relative;
- .opacity(100);
+ margin-top: 5px;
+ margin-bottom: 0;
+ input {
+ background-color: #444;
+ background-color: rgba(255,255,255,.3);
+ #font > .sans-serif(13px, normal, 1);
+ padding: 4px 9px;
+ color: @white;
+ color: rgba(255,255,255,.75);
+ border: 1px solid #111;
+ .border-radius(4px);
+ @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
+ .box-shadow(@shadow);
+ .transition(none);
+
+ // Placeholder text gets special styles; can't be bundled together though for some reason
+ &:-moz-placeholder {
+ color: @grayLighter;
+ }
+ &::-webkit-input-placeholder {
+ color: @grayLighter;
+ }
+ // Hover states
+ &:hover {
+ background-color: @grayLight;
+ background-color: rgba(255,255,255,.5);
+ color: @white;
+ }
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
+ &:focus,
+ &.focused {
+ outline: 0;
+ background-color: @white;
+ color: @grayDark;
+ text-shadow: 0 1px 0 @white;
+ border: 0;
+ padding: 5px 10px;
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
+ }
+ }
}
// Todo: remove from v2.0 when ready, added for legacy
- form.pull-right {
+ .pull-right {
float: right;
}
- input {
- background-color: #444;
- background-color: rgba(255,255,255,.3);
- #font > .sans-serif(13px, normal, 1);
- padding: 4px 9px;
- color: @white;
- color: rgba(255,255,255,.75);
- border: 1px solid #111;
- .border-radius(4px);
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
- .box-shadow(@shadow);
- .transition(none);
-
- // Placeholder text gets special styles; can't be bundled together though for some reason
- &:-moz-placeholder {
- color: @grayLighter;
- }
- &::-webkit-input-placeholder {
- color: @grayLighter;
- }
- // Hover states
- &:hover {
- background-color: @grayLight;
- background-color: rgba(255,255,255,.5);
- color: @white;
- }
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
- &:focus,
- &.focused {
- outline: 0;
- background-color: @white;
- color: @grayDark;
- text-shadow: 0 1px 0 @white;
- border: 0;
- padding: 5px 10px;
- .box-shadow(0 0 3px rgba(0,0,0,.15));
- }
- }
}
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index b6852535c9..00a8ee3b35 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -24,20 +24,28 @@ body {
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.container-fluid {
+.fluid-container {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
.clearfix();
- > .sidebar {
- float: left;
- width: 220px;
- }
- // TODO in v2: rename this and .popover .content to be more specific
- > .content {
- margin-left: 240px;
- }
+}
+// Sidebars (left and right options)
+.fluid-sidebar-left,
+.fluid-sidebar-right {
+ width: 220px;
+}
+.fluid-sidebar-left { float: left; }
+.fluid-sidebar-right { float: right; }
+// The main content area
+.fluid-content {
+ margin-left: 240px;
+}
+// Reverse layout for sidebar on right
+.fluid-container.reverse .fluid-content {
+ margin-left: 0;
+ margin-right: 240px;
}
--
GitLab
From dd1efdf0d5ec2469978a65c845cc5dfd16b74899 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 9 Oct 2011 21:25:28 -0700
Subject: [PATCH 19/66] update input prepend and append to use baseline
variable
---
bootstrap.css | 2 +-
lib/forms.less | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 8022cf2a00..cd74091985 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 9 21:12:03 PDT 2011
+ * Date: Sun Oct 9 21:24:37 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).
diff --git a/lib/forms.less b/lib/forms.less
index 4bdddc3a2e..4b2bb80166 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -323,11 +323,11 @@ textarea[readonly] {
display: block;
width: auto;
min-width: 16px;
- height: 18px;
+ height: @baseLineHeight;
padding: 4px 4px 4px 5px;
margin-right: -1px;
font-weight: normal;
- line-height: 18px;
+ line-height: @baseLineHeight;
color: @grayLight;
text-align: center;
text-shadow: 0 1px 0 @white;
--
GitLab
From 8ba005d38dd7a79ea3e90efb6efc7ac9ebcadc26 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 11 Oct 2011 09:44:51 -0700
Subject: [PATCH 20/66] new navbar introduced to replace topbar
---
bootstrap.css | 84 +++++++++++++----------
bootstrap.min.css | 23 ++++---
docs/index.html | 90 +++++++++++++------------
docs/javascript.html | 68 ++++++++++---------
lib/patterns.less | 154 ++++++++++++++++++++++++-------------------
5 files changed, 224 insertions(+), 195 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index cd74091985..728590ba26 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 9 21:24:37 PDT 2011
+ * Date: Tue Oct 11 09:43:00 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).
@@ -1114,26 +1114,37 @@ table .headerSortUp.purple, table .headerSortDown.purple {
/* Patterns.less
* Repeatable UI elements outside the base styles provided from the scaffolding
* ---------------------------------------------------------------------------- */
-.topbar {
+.navbar {
height: 40px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 10000;
overflow: visible;
}
-.topbar a {
+.navbar-inner {
+ background-color: #222222;
+ 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);
+}
+.navbar a {
color: #bfbfbf;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
-.topbar .brand a:hover, .topbar ul .active > a {
- background-color: #333;
+.navbar .brand a:hover, .navbar ul .active > a {
+ background-color: #333333;
background-color: rgba(255, 255, 255, 0.05);
color: #ffffff;
text-decoration: none;
}
-.topbar .brand {
+.navbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
@@ -1143,20 +1154,21 @@ table .headerSortUp.purple, table .headerSortDown.purple {
font-weight: 200;
line-height: 1;
}
-.topbar p {
+.navbar p {
margin: 0;
line-height: 40px;
}
-.topbar p a:hover {
+.navbar p a:hover {
background-color: transparent;
color: #ffffff;
}
-.topbar .form-search {
+.navbar-search {
position: relative;
margin-top: 5px;
margin-bottom: 0;
+ float: left;
}
-.topbar .form-search input {
+.navbar-search input {
background-color: #444;
background-color: rgba(255, 255, 255, 0.3);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -1179,18 +1191,18 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-o-transition: none;
transition: none;
}
-.topbar .form-search input:-moz-placeholder {
+.navbar-search input:-moz-placeholder {
color: #e6e6e6;
}
-.topbar .form-search input::-webkit-input-placeholder {
+.navbar-search input::-webkit-input-placeholder {
color: #e6e6e6;
}
-.topbar .form-search input:hover {
+.navbar-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 {
+.navbar-search input:focus, .navbar-search input.focused {
outline: 0;
background-color: #ffffff;
color: #404040;
@@ -1201,24 +1213,24 @@ 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;
+.navbar-static {
+ margin-bottom: 18px;
}
-.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);
+.navbar-static .navbar-inner {
+ margin-left: -20px;
+ margin-right: -20px;
+ padding-left: 20px;
+ padding-right: 20px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.navbar-fixed {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 10000;
}
.nav {
display: block;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 325c50e92b..0e949c6038 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -199,16 +199,19 @@ table .orange{color:#f89406;border-bottom-color:#f89406;}
table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
-.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
-.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-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);}
+.navbar{height:40px;overflow:visible;}
+.navbar-inner{background-color:#222222;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);}
+.navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
+.navbar .brand a:hover,.navbar ul .active>a{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
+.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
+.navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;}
+.navbar-search{position:relative;margin-top:5px;margin-bottom:0;float:left;}.navbar-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;}.navbar-search input:-moz-placeholder{color:#e6e6e6;}
+.navbar-search input::-webkit-input-placeholder{color:#e6e6e6;}
+.navbar-search input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
+.navbar-search input:focus,.navbar-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);}
+.navbar-static{margin-bottom:18px;}
+.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;}
.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;}
.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
diff --git a/docs/index.html b/docs/index.html
index 194111b780..7e9d6c1d06 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,24 +37,24 @@
<!-- Topbar
================================================== -->
- <div class="topbar" data-scrollspy="scrollspy">
- <div class="topbar-inner">
+ <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
+ <div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Bootstrap</a>
<ul class="nav">
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#about">About</a></li>
- <li class="dropdown" data-dropdown="dropdown">
- <a href="#" class="dropdown-toggle">Scaffolding</a>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-dropdown="true">Scaffolding</a>
<ul class="dropdown-menu">
<li><a href="#grid-system">Grid</a></li>
<li><a href="#layouts">Layouts</a></li>
</ul>
</li>
- <li class="dropdown" data-dropdown="dropdown">
- <a href="#" class="dropdown-toggle">CSS</a>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-dropdown="true">CSS</a>
<ul class="dropdown-menu">
<li><a href="#typography">Type</a></li>
<li><a href="#tables">Tables</a></li>
@@ -62,8 +62,8 @@
</ul>
</li>
- <li class="dropdown" data-dropdown="dropdown">
- <a href="#" class="dropdown-toggle">Patterns</a>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
<ul class="dropdown-menu">
<li><a href="#media">Media</a></li>
<li><a href="#navigation">Navigation</a></li>
@@ -1258,44 +1258,42 @@
<h1>Navigation</h1>
</div>
<h2>Fixed topbar</h2>
- <div class="topbar-wrapper" style="z-index: 5;">
- <div class="topbar" data-dropdown="dropdown" >
- <div class="topbar-inner">
- <div class="container">
- <a class="brand" href="#">Project Name</a>
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- </ul>
- <form class="form-search pull-left" action="">
- <input type="text" placeholder="Search" />
- </form>
- <ul class="nav secondary-nav">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div><!-- /topbar-inner -->
- </div><!-- /topbar -->
- </div><!-- /topbar-wrapper -->
+ <div class="navbar navbar-static" data-dropdown="dropdown">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="#">Project Name</a>
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="form-search navbar-search pull-left" action="">
+ <input type="text" placeholder="Search">
+ </form>
+ <ul class="nav secondary-nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div><!-- /topbar-inner -->
+ </div><!-- /topbar -->
<div class="row">
<div class="span5">
diff --git a/docs/javascript.html b/docs/javascript.html
index 9f2b138763..dd4c2d03a3 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -39,8 +39,8 @@
<!-- Topbar
================================================== -->
- <div class="topbar" data-scrollspy="scrollspy">
- <div class="topbar-inner">
+ <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
+ <div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Bootstrap JS</a>
<ul class="nav">
@@ -235,39 +235,37 @@ $('#my-modal').bind('hidden', function () {
A programatic api for activating menus for a given topbar or tabbed navigation.
</p>
<h3>Demo</h3>
- <div class="topbar-wrapper">
- <div id="topbar-example" class="topbar">
- <div class="topbar-inner">
- <div class="container">
- <a class="brand" href="#">Project Name</a>
- <ul class="nav">
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- </ul>
- <form action="">
- <input type="text" placeholder="Search" />
- </form>
- <ul class="nav secondary-nav">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- </ul>
- </div>
+ <div id="topbar-example" class="navbar navbar-static">
+ <div class="navbar-inner">
+ <div class="container" style="width: auto;">
+ <a class="brand" href="#">Project Name</a>
+ <ul class="nav">
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ <form action="" class="search-form navbar-search">
+ <input type="text" placeholder="Search">
+ </form>
+ <ul class="nav secondary-nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
</div>
</div>
</div>
diff --git a/lib/patterns.less b/lib/patterns.less
index 8ceffaa996..a82e2856d5 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -3,34 +3,41 @@
* ---------------------------------------------------------------------------- */
-// TOPBAR
-// ------
+// NAVBAR (FIXED AND STATIC)
+// -------------------------
-// Topbar for Branding and Nav
-.topbar {
- height: 40px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 10000;
- overflow: visible;
+// Navbar variables
+@navBarHeight: 40px;
+@navBarBgStart: #333;
+@navBarBgEnd: #222;
- // Links get text shadow
+// Common styles
+.navbar {
+ height: @navBarHeight;
+ overflow: visible;
+}
+// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+.navbar-inner {
+ background-color: @navBarBgEnd;
+ #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
+ @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+ .box-shadow(@shadow);
+}
+// Text and links
+.navbar {
+ // Links get text-shadow
a {
color: @grayLight;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
-
// Hover and active states
.brand a:hover,
ul .active > a {
- background-color: #333;
+ background-color: @navBarBgStart;
background-color: rgba(255,255,255,.05);
color: @white;
text-decoration: none;
}
-
// Website or project name
.brand {
float: left;
@@ -42,7 +49,6 @@
font-weight: 200;
line-height: 1;
}
-
// Plain text in topbar
p {
margin: 0;
@@ -52,70 +58,82 @@
color: @white;
}
}
+}
- // Search Form
- .form-search {
- position: relative;
- margin-top: 5px;
- margin-bottom: 0;
- input {
- background-color: #444;
- background-color: rgba(255,255,255,.3);
- #font > .sans-serif(13px, normal, 1);
- padding: 4px 9px;
- color: @white;
- color: rgba(255,255,255,.75);
- border: 1px solid #111;
- .border-radius(4px);
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
- .box-shadow(@shadow);
- .transition(none);
+// Navbar search
+.navbar-search {
+ position: relative;
+ margin-top: 5px;
+ margin-bottom: 0;
+ float: left;
+ input {
+ background-color: #444;
+ background-color: rgba(255,255,255,.3);
+ #font > .sans-serif(13px, normal, 1);
+ padding: 4px 9px;
+ color: @white;
+ color: rgba(255,255,255,.75);
+ border: 1px solid #111;
+ .border-radius(4px);
+ @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
+ .box-shadow(@shadow);
+ .transition(none);
- // Placeholder text gets special styles; can't be bundled together though for some reason
- &:-moz-placeholder {
- color: @grayLighter;
- }
- &::-webkit-input-placeholder {
- color: @grayLighter;
- }
- // Hover states
- &:hover {
- background-color: @grayLight;
- background-color: rgba(255,255,255,.5);
- color: @white;
- }
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
- &:focus,
- &.focused {
- outline: 0;
- background-color: @white;
- color: @grayDark;
- text-shadow: 0 1px 0 @white;
- border: 0;
- padding: 5px 10px;
- .box-shadow(0 0 3px rgba(0,0,0,.15));
- }
+ // Placeholder text gets special styles; can't be bundled together though for some reason
+ &:-moz-placeholder {
+ color: @grayLighter;
+ }
+ &::-webkit-input-placeholder {
+ color: @grayLighter;
+ }
+ // Hover states
+ &:hover {
+ background-color: @grayLight;
+ background-color: rgba(255,255,255,.5);
+ color: @white;
+ }
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
+ &:focus,
+ &.focused {
+ outline: 0;
+ background-color: @white;
+ color: @grayDark;
+ text-shadow: 0 1px 0 @white;
+ border: 0;
+ padding: 5px 10px;
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
}
- }
- // Todo: remove from v2.0 when ready, added for legacy
- .pull-right {
- float: right;
}
}
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-.topbar-inner {
- background-color: #222;
- #gradient > .vertical(#333, #222);
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
- .box-shadow(@shadow);
+
+// Static navbar
+.navbar-static {
+ margin-bottom: @baseLineHeight;
+}
+.navbar-static .navbar-inner {
+ margin-left: -20px;
+ margin-right: -20px;
+ padding-left: 20px;
+ padding-right: 20px;
+ .border-radius(4px);
+}
+
+// Fixed navbar
+.navbar-fixed {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 10000;
}
+
// NAVIGATION
// ----------
-// Topbar Nav
+// Nav for navbar and topbar
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
.nav {
display: block;
--
GitLab
From 8c2bb99085816617704b5d537b9c901e26e03569 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 11 Oct 2011 09:46:02 -0700
Subject: [PATCH 21/66] share new navbar in examples
---
examples/container-app.html | 6 +++---
examples/fluid-reverse.html | 4 ++--
examples/fluid.html | 4 ++--
examples/hero.html | 4 ++--
4 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/examples/container-app.html b/examples/container-app.html
index 75328e645f..28807bb05e 100644
--- a/examples/container-app.html
+++ b/examples/container-app.html
@@ -75,8 +75,8 @@
<body>
- <div class="topbar">
- <div class="fill">
+ <div class="navbar">
+ <div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<ul class="nav">
@@ -84,7 +84,7 @@
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
- <form action="" class="pull-right">
+ <form action="" class="form-search navbar-form pull-right">
<input class="input-small" type="text" placeholder="Username">
<input class="input-small" type="password" placeholder="Password">
<button class="btn" type="submit">Sign in</button>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
index 7c13a44530..a32291d46c 100644
--- a/examples/fluid-reverse.html
+++ b/examples/fluid-reverse.html
@@ -28,8 +28,8 @@
<body>
- <div class="topbar">
- <div class="topbar-inner">
+ <div class="navbar">
+ <div class="navbar-inner">
<div class="fluid-container">
<a class="brand" href="#">Project name</a>
<ul class="nav">
diff --git a/examples/fluid.html b/examples/fluid.html
index c6387846b6..3b8bb46a8d 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -28,8 +28,8 @@
<body>
- <div class="topbar">
- <div class="topbar-inner">
+ <div class="navbar">
+ <div class="navbar-inner">
<div class="fluid-container">
<a class="brand" href="#">Project name</a>
<ul class="nav">
diff --git a/examples/hero.html b/examples/hero.html
index 6ded6e1e95..d84eb88434 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -28,8 +28,8 @@
<body>
- <div class="topbar">
- <div class="fill">
+ <div class="navbar">
+ <div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<ul class="nav">
--
GitLab
From b6443905411dcdcec54d7eaad2f998a582271728 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 11 Oct 2011 09:52:50 -0700
Subject: [PATCH 22/66] update navbar search form
---
bootstrap.css | 23 ++++++++++-------------
bootstrap.min.css | 8 ++++----
docs/index.html | 7 +------
docs/javascript.html | 4 ++--
lib/patterns.less | 7 +++----
5 files changed, 20 insertions(+), 29 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 728590ba26..0da6a96ec8 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 11 09:43:00 PDT 2011
+ * Date: Tue Oct 11 09:52:07 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).
@@ -1164,11 +1164,11 @@ table .headerSortUp.purple, table .headerSortDown.purple {
}
.navbar-search {
position: relative;
- margin-top: 5px;
+ margin-top: 6px;
margin-bottom: 0;
float: left;
}
-.navbar-search input {
+.navbar-search .search-query {
background-color: #444;
background-color: rgba(255, 255, 255, 0.3);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -1179,30 +1179,27 @@ table .headerSortUp.purple, table .headerSortDown.purple {
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-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
-.navbar-search input:-moz-placeholder {
+.navbar-search .search-query:-moz-placeholder {
color: #e6e6e6;
}
-.navbar-search input::-webkit-input-placeholder {
+.navbar-search .search-query::-webkit-input-placeholder {
color: #e6e6e6;
}
-.navbar-search input:hover {
+.navbar-search .search-query:hover {
background-color: #bfbfbf;
background-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
}
-.navbar-search input:focus, .navbar-search input.focused {
+.navbar-search .search-query:focus, .navbar-search .search-query.focused {
outline: 0;
background-color: #ffffff;
color: #404040;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 0e949c6038..45277ae40f 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -205,10 +205,10 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.navbar .brand a:hover,.navbar ul .active>a{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
.navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;}
-.navbar-search{position:relative;margin-top:5px;margin-bottom:0;float:left;}.navbar-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;}.navbar-search input:-moz-placeholder{color:#e6e6e6;}
-.navbar-search input::-webkit-input-placeholder{color:#e6e6e6;}
-.navbar-search input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
-.navbar-search input:focus,.navbar-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);}
+.navbar-search{position:relative;margin-top:6px;margin-bottom:0;float:left;}.navbar-search .search-query{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-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;}
+.navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;}
+.navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
+.navbar-search .search-query:focus,.navbar-search .search-query.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);}
.navbar-static{margin-bottom:18px;}
.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;}
diff --git a/docs/index.html b/docs/index.html
index 7e9d6c1d06..ced0c658fb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -44,7 +44,6 @@
<ul class="nav">
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#about">About</a></li>
-
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-dropdown="true">Scaffolding</a>
<ul class="dropdown-menu">
@@ -52,7 +51,6 @@
<li><a href="#layouts">Layouts</a></li>
</ul>
</li>
-
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-dropdown="true">CSS</a>
<ul class="dropdown-menu">
@@ -61,7 +59,6 @@
<li><a href="#forms">Forms</a></li>
</ul>
</li>
-
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
<ul class="dropdown-menu">
@@ -71,8 +68,6 @@
<li><a href="#popovers">Popovers</a></li>
</ul>
</li>
-
-
<li><a href="#javascript">Javascript</a></li>
<li><a href="#less">Less</a></li>
</ul>
@@ -1278,7 +1273,7 @@
</li>
</ul>
<form class="form-search navbar-search pull-left" action="">
- <input type="text" placeholder="Search">
+ <input type="text" class="search-query" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
diff --git a/docs/javascript.html b/docs/javascript.html
index dd4c2d03a3..66caad10b4 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -243,8 +243,8 @@ $('#my-modal').bind('hidden', function () {
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
- <form action="" class="search-form navbar-search">
- <input type="text" placeholder="Search">
+ <form class="form-search navbar-search pull-left" action="">
+ <input type="text" class="search-query" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
diff --git a/lib/patterns.less b/lib/patterns.less
index a82e2856d5..f2a0b7f0e5 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -63,10 +63,10 @@
// Navbar search
.navbar-search {
position: relative;
- margin-top: 5px;
+ margin-top: 6px;
margin-bottom: 0;
float: left;
- input {
+ .search-query {
background-color: #444;
background-color: rgba(255,255,255,.3);
#font > .sans-serif(13px, normal, 1);
@@ -74,8 +74,7 @@
color: @white;
color: rgba(255,255,255,.75);
border: 1px solid #111;
- .border-radius(4px);
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
+ @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
.box-shadow(@shadow);
.transition(none);
--
GitLab
From fa8b1dc12dcfe993f1e4185f95ebe0981fbeb0f0 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 11 Oct 2011 19:31:25 -0700
Subject: [PATCH 23/66] remove color scheme variables, remove font-face mixin
---
bootstrap.css | 107 ++++++++++++++++++++++++++++++++++++++++++++-
bootstrap.min.css | 70 ++++++++++++++---------------
lib/mixins.less | 17 ++-----
lib/variables.less | 16 -------
4 files changed, 144 insertions(+), 66 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 0da6a96ec8..d40c50c841 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 11 09:52:07 PDT 2011
+ * Date: Tue Oct 11 19:31:11 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).
@@ -551,6 +551,9 @@ code, pre {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
code {
background-color: #fee9cc;
@@ -569,6 +572,9 @@ pre {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
@@ -620,6 +626,9 @@ select,
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
/* Mini reset for unique input types */
input[type=checkbox], input[type=radio] {
@@ -814,6 +823,9 @@ textarea[readonly] {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.has-error > label, .has-error span.help-inline, .has-error span.help-block {
color: #9d261d;
@@ -895,6 +907,9 @@ textarea[readonly] {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.input-prepend .add-on, .input-append .add-on {
position: relative;
@@ -916,6 +931,9 @@ textarea[readonly] {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.input-prepend .active, .input-append .active {
background: #a9dba9;
@@ -931,11 +949,17 @@ textarea[readonly] {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.input-append .add-on {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
margin-right: 0;
margin-left: -1px;
}
@@ -943,6 +967,9 @@ textarea[readonly] {
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.control-group {
margin-bottom: 18px;
@@ -982,6 +1009,9 @@ table {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
table th, table td {
padding: 10px 10px 9px;
@@ -1007,21 +1037,33 @@ table tbody tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
table tbody tr:first-child td:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
table tbody tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
table tbody tr:last-child td:last-child {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.zebra-striped tbody tr:nth-child(odd) td {
background-color: #f9f9f9;
@@ -1221,6 +1263,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.navbar-fixed {
position: fixed;
@@ -1352,6 +1397,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -1446,6 +1494,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.tabs > li > a:hover {
text-decoration: none;
@@ -1464,6 +1515,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.tabs .dropdown-toggle:after {
border-top-color: #999;
@@ -1487,6 +1541,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.pills a:hover {
background: #00438a;
@@ -1522,6 +1579,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
@@ -1544,6 +1604,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.hero-unit h1 {
margin-bottom: 0;
@@ -1659,6 +1722,9 @@ footer {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -1728,6 +1794,9 @@ footer {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.btn.small {
padding: 7px 9px 7px;
@@ -1775,6 +1844,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.btn-group .btn:first-child {
margin-left: 0;
@@ -1840,6 +1912,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
@@ -1915,6 +1990,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -1954,6 +2032,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -1996,6 +2077,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
@@ -2031,6 +2115,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
@@ -2110,6 +2197,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.twipsy-arrow {
position: absolute;
@@ -2170,6 +2260,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
@@ -2181,6 +2274,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
border-bottom: 1px solid #eee;
}
.popover .content {
@@ -2190,6 +2286,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ -webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
@@ -2217,6 +2316,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.label.important {
background-color: #c43c35;
@@ -2255,6 +2357,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
-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);
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 45277ae40f..d0662829a3 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -103,15 +103,15 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
-code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
-pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
+pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
form{margin-bottom:18px;}
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
label{display:block;margin-bottom:5px;color:#404040;}
input[type=checkbox],input[type=radio]{cursor:pointer;}
-input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
@@ -144,7 +144,7 @@ input.span14,textarea.span14,select.span14{display:inline-block;float:none;width
input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
-.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
+.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
.has-error input,.has-error textarea,.has-error select{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}.has-error input:focus,.has-error textarea:focus,.has-error select:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
@@ -158,28 +158,28 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.inline-inputs input.mini{width:60px;}
.inline-inputs input.small{width:90px;}
.inline-inputs span{padding:0 2px 0 1px;}
-.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
-.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
.input-prepend .add-on{*margin-top:1px;}
-.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
-.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
-.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
+.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin-right:0;margin-left:-1px;}
+.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.control-group{margin-bottom:18px;}
.control-group>label{font-weight:bold;}
.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
.form-horizontal .controls{margin-left:150px;}
.form-horizontal .control-list{padding-top:6px;}
.form-horizontal .form-actions{padding-left:150px;}
-table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
+table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
table td{vertical-align:top;}
table th+th,table td+td{border-left:1px solid #ddd;}
table tr+tr td{border-top:1px solid #ddd;}
-table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
-table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
+table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
.zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
@@ -210,7 +210,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
.navbar-search .search-query:focus,.navbar-search .search-query.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);}
.navbar-static{margin-bottom:18px;}
-.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;}
.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;}
@@ -225,7 +225,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.dropdown{position:relative;}
.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;}
.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
-.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
+.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
@@ -233,21 +233,21 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
-.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
+.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
-.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
+.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
.tab-content{clear:both;}
-.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
+.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.tab-content>*,.pill-content>*{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}
-.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
+.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
.breadcrumb .active a{color:#404040;}
-.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
+.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
@@ -255,13 +255,13 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
+.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
.btn:focus{outline:1px dotted #666;}
.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
-.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
+.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
@@ -270,11 +270,11 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.btn-toolbar .btn-group{float:left;margin-right:10px;}
.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;}
.btn-group:after{clear:both;}
-.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
+.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
-.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
+.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}
.alert-message p{margin-bottom:0;}
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
@@ -287,21 +287,21 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
-.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
+.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
.pagination li{display:inline;}
.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
.pagination .next a{border:0;}
-.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
+.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
-.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
+.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
.modal.fade.in{top:50%;}
.modal-header{border-bottom:1px solid #eee;padding:5px 15px;}
.modal-body{padding:15px;}
-.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;}
+.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;}
.modal-footer:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;}
.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
@@ -309,23 +309,23 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
-.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
.twipsy-arrow{position:absolute;width:0;height:0;}
.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.popover .arrow{position:absolute;width:0;height:0;}
-.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
-.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
-.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
+.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
+.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;border-bottom:1px solid #eee;}
+.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
-.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
+.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.label.important{background-color:#c43c35;}
.label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;}
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
.media-grid:after{clear:both;}
.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{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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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);}
diff --git a/lib/mixins.less b/lib/mixins.less
index 9c27346c2a..22a30a1c86 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -71,20 +71,6 @@
}
}
-// Font face generator
-.font-face(@fontFamily, @fileName, @style, @weight) {
- @font-face {
- font-family: @fontFamily;
- font-style: @style;
- font-weight: @weight;
- src: url('@{fileName}.eot');
- src: url('@{fileName}.eot?#iefix') format('embedded-opentype'),
- url('@{fileName}.woff') format('woff'),
- url('@{fileName}.ttf') format('truetype'),
- url('@{fileName}.svg#@{fontFamily}') format('svg');
- }
-}
-
// Grid System
.fixed-container() {
width: @siteWidth;
@@ -115,6 +101,9 @@
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) {
-webkit-border-top-left-radius: @topLeft;
diff --git a/lib/variables.less b/lib/variables.less
index 864dbe8c03..f85e0ec859 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -45,22 +45,6 @@
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-// COLOR SCHEME
-// ------------
-
-// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
-@baseColor: @blue; // Set a base color
-@complement: spin(@baseColor, 180); // Determine a complementary color
-@split1: spin(@baseColor, 158); // Split complements
-@split2: spin(@baseColor, -158);
-@triad1: spin(@baseColor, 135); // Triads colors
-@triad2: spin(@baseColor, -135);
-@tetra1: spin(@baseColor, 90); // Tetra colors
-@tetra2: spin(@baseColor, -90);
-@analog1: spin(@baseColor, 22); // Analogs colors
-@analog2: spin(@baseColor, -22);
-
-
// THEME VARIABLES
// ---------------
--
GitLab
From f4fc56b1b3827254dd771536dcb2b711919f3867 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Wed, 12 Oct 2011 08:31:16 -0700
Subject: [PATCH 24/66] first pass at moving over the new tabs stuff to 2.0
---
bootstrap.css | 77 ++++++++++++++++++-----
bootstrap.min.css | 29 ++++++---
docs/index.html | 147 ++++++++++++++++++++++++++++++++++++++++++-
docs/javascript.html | 38 +++++------
lib/patterns.less | 106 +++++++++++++++++++++++++------
5 files changed, 332 insertions(+), 65 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index d40c50c841..abf43ed3d8 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 11 19:31:11 PDT 2011
+ * Date: Tue Oct 11 23:51:38 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).
@@ -1478,13 +1478,13 @@ table .headerSortUp.purple, table .headerSortDown.purple {
display: block;
}
.tabs {
- float: left;
- width: 100%;
- border-bottom: 1px solid #ddd;
+ border-color: #ddd;
+ border-style: solid;
+ border-width: 0 0 1px;
}
.tabs > li {
position: relative;
- top: 1px;
+ margin-bottom: -1px;
}
.tabs > li > a {
padding: 0 15px;
@@ -1503,13 +1503,56 @@ table .headerSortUp.purple, table .headerSortDown.purple {
background-color: #eee;
border-color: #eee #eee #ddd;
}
-.tabs > li.active > a {
+.tabs .active > a, .tabs .active > a:hover {
color: #808080;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
+ cursor: default;
+}
+.tabbable {
+ margin-bottom: 18px;
+}
+.tabbable .tabs {
+ margin-bottom: 0;
+ border-bottom: 0;
+}
+.tabbable .tab-content {
+ padding: 19px;
+ border: 1px solid #ddd;
+}
+.tabbable.tabs-bottom .tabs > li {
+ margin-top: -1px;
+ margin-bottom: 0;
+}
+.tabbable.tabs-bottom .tabs > li > a {
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+}
+.tabbable.tabs-bottom .tabs > li > a:hover {
+ border-bottom-color: transparent;
+ border-top-color: #ddd;
+}
+.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
+ border-color: transparent #ddd #ddd #ddd;
+}
+.tabbable.tabs-left .tabs {
+ float: left;
+}
+.tabbable.tabs-left .tabs > li {
+ float: none;
+}
+.tabbable.tabs-right .tabs {
+ float: right;
+}
+.tabbable.tabs-right .tabs > li {
+ float: none;
}
-.tabs .dropdown-menu {
+.tabs .menu-dropdown, .tabs .dropdown-menu {
top: 35px;
border-width: 1px;
-webkit-border-radius: 0 6px 6px 6px;
@@ -1519,25 +1562,22 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-moz-background-clip: padding;
background-clip: padding-box;
}
-.tabs .dropdown-toggle:after {
+.tabs a.menu:after, .tabs .dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
-.tabs .open.dropdown .dropdown-toggle {
+.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
border-color: #999;
}
-.tabs .dropdown.open .dropdown-toggle:after {
+.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
-.tab-content {
- clear: both;
-}
.pills a {
margin: 5px 3px 5px 0;
padding: 0 15px;
- text-shadow: 0 1px 1px #ffffff;
line-height: 30px;
+ text-shadow: 0 1px 1px #ffffff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
@@ -1546,17 +1586,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
background-clip: padding-box;
}
.pills a:hover {
- background: #00438a;
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+ background-color: #00438a;
}
.pills .active a {
- background: #0069d6;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+ background-color: #0069d6;
+}
+.pills-vertical > li {
+ float: none;
}
-.tab-content > *, .pill-content > * {
+.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
}
.tab-content > .active, .pill-content > .active {
diff --git a/bootstrap.min.css b/bootstrap.min.css
index d0662829a3..62be2279a3 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -233,16 +233,25 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
-.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
-.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
-.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
-.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
-.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
-.tab-content{clear:both;}
-.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
-.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
-.tab-content>*,.pill-content>*{display:none;}
+.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
+.tabs .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}
+.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;}
+.tabbable .tab-content{padding:19px;border:1px solid #ddd;}
+.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
+.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
+.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;}
+.tabbable.tabs-left .tabs{float:left;}
+.tabbable.tabs-left .tabs>li{float:none;}
+.tabbable.tabs-right .tabs{float:right;}
+.tabbable.tabs-right .tabs>li{float:none;}
+.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
+.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
+.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
+.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;}
+.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;}
+.pills-vertical>li{float:none;}
+.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}
.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
diff --git a/docs/index.html b/docs/index.html
index ced0c658fb..0d46084c18 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1313,9 +1313,10 @@
<h2>Tabs and pills</h2>
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
- <p><a class="btn js-btn" href="./javascript.html#tabs">Get the javascript »</a></p>
</div>
<div class="span12">
+ <h3>Basic tabs example</h3>
+ <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@@ -1341,6 +1342,141 @@
<li><a href="#">Contact</a></li>
</ul>
</pre>
+ <h3>Alternate tabs</h3>
+ <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
+ <div class="row">
+ <div class="span3">
+ <div class="clearfix">
+ <ul class="tabs tabs-left">
+ <li class="active"><a href="#">Active link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Linky link</a></li>
+ <li><a href="#">What up link</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="span3">
+ <div class="clearfix">
+ <ul class="tabs tabs-right">
+ <li class="active"><a href="#">Active link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Linky link</a></li>
+ <li><a href="#">What up link</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="span6">
+ <div class="clearfix">
+ <ul class="tabs tabs-bottom">
+ <li class="active"><a href="#">Active link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Linky link</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <h3>Tabbable tabs</h3>
+ <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p>
+
+ <div class="tabbable">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ <li><a href="#4">Section 4</a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="1">
+ <p>Oh hai #1!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <p>Oh hai #2!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <p>Oh hai #3!</p>
+ </div>
+ <div class="tab-pane" id="4">
+ <p>Oh hai #4!</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <div class="tabbable tabs-left">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ </ul>
+ <div class="tab-content" id="myTabContent2">
+ <div class="tab-pane active" id="1">
+ <h4>Section 1</h4>
+ <p>Oh hai!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <h4>Section 2</h4>
+ <p>Oh hai!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <h4>Section 3</h4>
+ <p>Oh hai!</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span6">
+ <div class="tabbable tabs-right">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ </ul>
+ <div class="tab-content" id="myTabContent3">
+ <div class="tab-pane active" id="1">
+ <h4>Section 1</h4>
+ <p>Oh hai!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <h4>Section 2</h4>
+ <p>Oh hai!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <h4>Section 3</h4>
+ <p>Oh hai!</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="tabbable tabs-bottom">
+ <div class="tab-content">
+ <div class="tab-pane active" id="1">
+ <p>Oh hai #1!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <p>Oh hai #2!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <p>Oh hai #3!</p>
+ </div>
+ <div class="tab-pane" id="4">
+ <p>Oh hai #4!</p>
+ </div>
+ </div>
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ <li><a href="#4">Section 4</a></li>
+ </ul>
+ </div>
+
+
+ <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
+ <hr>
+ <h3>Basic pills example</h3>
<ul class="pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@@ -1357,6 +1493,15 @@
<li><a href="#">Contact</a></li>
</ul>
</pre>
+ <h3>Vertical pill nav</h3>
+ <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
+ <ul class="pills pills-vertical span4">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
</div>
</div><!-- /row -->
diff --git a/docs/javascript.html b/docs/javascript.html
index 66caad10b4..b130511c3d 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -353,24 +353,26 @@ $('#my-modal').bind('hidden', function () {
</script></pre>
</p>
<h3>Demo</h3>
- <ul class="tabs" data-tabs="tabs" >
- <li class="active"><a href="#home">Home</a></li>
- <li><a href="#profile">Profile</a></li>
- <li><a href="#messages">Messages</a></li>
- <li><a href="#settings">Settings</a></li>
- </ul>
- <div id="my-tab-content" class="tab-content">
- <div class="active" id="home">
- <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
- </div>
- <div id="profile">
- <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
- </div>
- <div id="messages">
- <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p>
- </div>
- <div id="settings">
- <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p>
+ <div class="tabbable">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#home">Home</a></li>
+ <li><a href="#profile">Profile</a></li>
+ <li><a href="#messages">Messages</a></li>
+ <li><a href="#settings">Settings</a></li>
+ </ul>
+ <div class="tab-content" id="myTabContent">
+ <div class="tab-pane active" id="home">
+ <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+ </div>
+ <div class="tab-pane" id="profile">
+ <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
+ </div>
+ <div class="tab-pane" id="messages">
+ <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p>
+ </div>
+ <div class="tab-pane" id="settings">
+ <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p>
+ </div>
</div>
</div>
</div>
diff --git a/lib/patterns.less b/lib/patterns.less
index f2a0b7f0e5..af898a5614 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -318,14 +318,14 @@
}
}
-// Basic Tabs
+// Tabs
.tabs {
- float: left;
- width: 100%;
- border-bottom: 1px solid #ddd;
+ border-color: #ddd;
+ border-style: solid;
+ border-width: 0 0 1px;
> li {
position: relative; // For the dropdowns mostly
- top: 1px;
+ margin-bottom: -1px;
> a {
padding: 0 15px;
margin-right: 2px;
@@ -338,61 +338,129 @@
border-color: #eee #eee #ddd;
}
}
- &.active > a {
- color: @gray;
- background-color: @white;
- border: 1px solid #ddd;
+ }
+ // Active state, and it's :hover to override normal :hover
+ .active > a,
+ .active > a:hover {
+ color: @gray;
+ background-color: @white;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ cursor: default;
+ }
+}
+
+.tabbable {
+ margin-bottom: @baseLineHeight;
+
+ // Tabs on top
+ .tabs {
+ margin-bottom: 0;
+ border-bottom: 0;
+ }
+ .tab-content {
+ padding: 19px;
+ border: 1px solid #ddd;
+ }
+
+ // Tabs on bottom
+ &.tabs-bottom .tabs > li {
+ margin-top: -1px;
+ margin-bottom: 0;
+ }
+ &.tabs-bottom .tabs > li > a {
+ .border-radius(0 0 4px 4px);
+ &:hover {
border-bottom-color: transparent;
+ border-top-color: #ddd;
}
}
+ &.tabs-bottom .tabs > .active > a,
+ &.tabs-bottom .tabs > .active > a:hover {
+ border-color: transparent #ddd #ddd #ddd;
+ }
+
+ // Tabs on left
+ &.tabs-left .tabs {
+ float: left;
+ }
+ &.tabs-left .tabs > li {
+ float: none;
+ }
+
+ // Tabs on right
+ &.tabs-right .tabs {
+ float: right;
+ }
+ &.tabs-right .tabs > li {
+ float: none;
+ }
+}
+
+
+// Dropdowns in tabs
+.tabs {
+ // first one for backwards compatibility
+ .menu-dropdown,
.dropdown-menu {
top: 35px;
border-width: 1px;
.border-radius(0 6px 6px 6px);
}
+ // first one for backwards compatibility
+ a.menu:after,
.dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
+ // first one for backwards compatibility
+ li.open.menu .menu,
.open.dropdown .dropdown-toggle {
border-color: #999;
}
+ // first one for backwards compatibility
+ li.open a.menu:after,
.dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
}
-.tab-content {
- clear: both;
-}
-// Basic pill nav
+// Pills
.pills {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
- text-shadow: 0 1px 1px @white;
line-height: 30px;
+ text-shadow: 0 1px 1px @white;
.border-radius(15px);
&:hover {
- background: @linkColorHover;
color: @white;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
+ background-color: @linkColorHover;
}
}
.active a {
- background: @linkColor;
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
+ background-color: @linkColor;
}
}
-.tab-content > *,
-.pill-content > * {
- display: none;
+// Stacked pills
+.pills-vertical > li {
+ float: none;
}
+// Tabbable areas
+.tab-content,
+.pill-content {
+}
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+ display: none;
+}
.tab-content > .active,
.pill-content > .active {
display: block;
--
GitLab
From fbe22f05800a3ce4ae3a880914d8e03cb1e01d1b Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 15 Oct 2011 17:21:39 -0700
Subject: [PATCH 25/66] updated index of docs to use html5 self closing tags,
add responsive shell to bootstrap file
---
bootstrap.css | 8 +++++++-
bootstrap.min.css | 1 +
docs/index.html | 22 +++++++++++-----------
lib/bootstrap.less | 5 ++++-
4 files changed, 23 insertions(+), 13 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index abf43ed3d8..60cc8213f3 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 11 23:51:38 PDT 2011
+ * Date: Sat Oct 15 17:19:53 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).
@@ -2416,3 +2416,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
+/* Responsive.less
+ * For phone and tablet devices
+ * ------------------------------------------------------------- */
+@media (max-width: 480px) {
+
+}
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 62be2279a3..770bd1dc66 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -338,3 +338,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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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){}
diff --git a/docs/index.html b/docs/index.html
index 0d46084c18..4dd45f5f96 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -81,8 +81,8 @@
<div class="inner">
<h1>Bootstrap, from Twitter</h1>
<p class="lead">
- Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br />
- It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
+ Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br>
+ It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br>
</p>
<p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
</div>
@@ -491,15 +491,15 @@
<div class="row">
<div class="span4">
<address>
- <strong>Twitter, Inc.</strong><br />
- 795 Folsom Ave, Suite 600<br />
- San Francisco, CA 94107<br />
+ <strong>Twitter, Inc.</strong><br>
+ 795 Folsom Ave, Suite 600<br>
+ San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
</div>
<div class="span4">
<address>
- <strong>Full Name</strong><br />
+ <strong>Full Name</strong><br>
<a mailto="">first.last@gmail.com</a>
</address>
</div>
@@ -966,7 +966,7 @@
<fieldset class="control-group">
<label class="control-label" for="fileInput">File input</label>
<div class="controls">
- <input class="input-file" id="fileInput" name="fileInput" type="file" />
+ <input class="input-file" id="fileInput" name="fileInput" type="file">
</div>
</fieldset>
<fieldset class="control-group has-error">
@@ -1010,11 +1010,11 @@
<div class="controls">
<div class="control-list">
<label>
- <input type="radio" checked name="optionsRadios" value="option1" />
+ <input type="radio" checked name="optionsRadios" value="option1">
<span>Option one is this and that—be sure to include why it’s great</span>
</label>
<label>
- <input type="radio" name="optionsRadios" value="option2" />
+ <input type="radio" name="optionsRadios" value="option2">
<span>Option two can is something else and selecting it will deselect options 1</span>
</label>
</div>
@@ -1306,7 +1306,7 @@
</div>
<p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p>
- <br />
+ <br>
<div class="row">
<div class="span4">
@@ -2015,7 +2015,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<div class="container">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>
- Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
</div>
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index 62f2ce916d..9665306fd5 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -23,4 +23,7 @@
@import "type.less";
@import "forms.less";
@import "tables.less";
-@import "patterns.less";
\ No newline at end of file
+@import "patterns.less";
+
+// Responsive
+@import "responsive.less";
\ No newline at end of file
--
GitLab
From 9e9109469e5c86c4232cc744639b286bcd9ef0ba Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 03:00:58 -0700
Subject: [PATCH 26/66] biiiiiig update coming for responsiveness
---
bootstrap.css | 422 ++++++++++++++++++++-------------------
bootstrap.min.css | 172 ++++++++--------
docs/assets/css/docs.css | 71 ++++---
docs/index.html | 215 ++++++++------------
lib/mixins.less | 3 -
lib/scaffolding.less | 27 +--
lib/variables.less | 4 +-
7 files changed, 433 insertions(+), 481 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 60cc8213f3..482d2878c8 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: Sat Oct 15 17:19:53 PDT 2011
+ * Date: Sun Oct 16 02:59:54 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).
@@ -261,7 +261,6 @@ a:hover {
}
.row {
zoom: 1;
- margin-left: -20px;
}
.row:before, .row:after {
display: table;
@@ -277,125 +276,77 @@ a:hover {
float: left;
margin-left: 20px;
}
+.row > [class*="span"]:first-child {
+ margin-left: 0;
+}
.span1 {
- width: 40px;
+ width: 60px;
}
.span2 {
- width: 100px;
+ width: 140px;
}
.span3 {
- width: 160px;
+ width: 220px;
}
.span4 {
- width: 220px;
+ width: 300px;
}
.span5 {
- width: 280px;
+ width: 380px;
}
.span6 {
- width: 340px;
+ width: 460px;
}
.span7 {
- width: 400px;
+ width: 540px;
}
.span8 {
- width: 460px;
+ width: 620px;
}
.span9 {
- width: 520px;
+ width: 700px;
}
.span10 {
- width: 580px;
+ width: 780px;
}
.span11 {
- width: 640px;
+ width: 860px;
}
.span12 {
- width: 700px;
-}
-.span13 {
- width: 760px;
-}
-.span14 {
- width: 820px;
-}
-.span15 {
- width: 880px;
-}
-.span16 {
width: 940px;
}
-.span17 {
- width: 1000px;
-}
-.span18 {
- width: 1060px;
-}
-.span19 {
- width: 1120px;
-}
-.span20 {
- width: 1180px;
-}
-.span21 {
- width: 1240px;
-}
-.span22 {
- width: 1300px;
-}
-.span23 {
- width: 1360px;
-}
-.span24 {
- width: 1420px;
-}
.offset1 {
- margin-left: 80px;
+ margin-left: 100px;
}
.offset2 {
- margin-left: 140px;
+ margin-left: 180px;
}
.offset3 {
- margin-left: 200px;
+ margin-left: 260px;
}
.offset4 {
- margin-left: 260px;
+ margin-left: 340px;
}
.offset5 {
- margin-left: 320px;
+ margin-left: 420px;
}
.offset6 {
- margin-left: 380px;
+ margin-left: 500px;
}
.offset7 {
- margin-left: 440px;
+ margin-left: 580px;
}
.offset8 {
- margin-left: 500px;
+ margin-left: 660px;
}
.offset9 {
- margin-left: 560px;
+ margin-left: 740px;
}
.offset10 {
- margin-left: 620px;
+ margin-left: 820px;
}
.offset11 {
- margin-left: 680px;
-}
-.offset12 {
- margin-left: 740px;
-}
-.span-one-third {
- width: 300px;
-}
-.span-two-thirds {
- width: 620px;
-}
-.offset-one-third {
- margin-left: 340px;
-}
-.offset-two-thirds {
- margin-left: 660px;
+ margin-left: 900px;
}
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
@@ -551,9 +502,6 @@ code, pre {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
code {
background-color: #fee9cc;
@@ -572,9 +520,6 @@ pre {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
@@ -626,9 +571,6 @@ select,
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
/* Mini reset for unique input types */
input[type=checkbox], input[type=radio] {
@@ -713,97 +655,97 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
input.span1, textarea.span1, select.span1 {
display: inline-block;
float: none;
- width: 30px;
+ width: 50px;
margin-left: 0;
}
input.span2, textarea.span2, select.span2 {
display: inline-block;
float: none;
- width: 90px;
+ width: 150px;
margin-left: 0;
}
input.span3, textarea.span3, select.span3 {
display: inline-block;
float: none;
- width: 150px;
+ width: 250px;
margin-left: 0;
}
input.span4, textarea.span4, select.span4 {
display: inline-block;
float: none;
- width: 210px;
+ width: 350px;
margin-left: 0;
}
input.span5, textarea.span5, select.span5 {
display: inline-block;
float: none;
- width: 270px;
+ width: 450px;
margin-left: 0;
}
input.span6, textarea.span6, select.span6 {
display: inline-block;
float: none;
- width: 330px;
+ width: 550px;
margin-left: 0;
}
input.span7, textarea.span7, select.span7 {
display: inline-block;
float: none;
- width: 390px;
+ width: 650px;
margin-left: 0;
}
input.span8, textarea.span8, select.span8 {
display: inline-block;
float: none;
- width: 450px;
+ width: 750px;
margin-left: 0;
}
input.span9, textarea.span9, select.span9 {
display: inline-block;
float: none;
- width: 510px;
+ width: 850px;
margin-left: 0;
}
input.span10, textarea.span10, select.span10 {
display: inline-block;
float: none;
- width: 570px;
+ width: 950px;
margin-left: 0;
}
input.span11, textarea.span11, select.span11 {
display: inline-block;
float: none;
- width: 630px;
+ width: 1050px;
margin-left: 0;
}
input.span12, textarea.span12, select.span12 {
display: inline-block;
float: none;
- width: 690px;
+ width: 1150px;
margin-left: 0;
}
input.span13, textarea.span13, select.span13 {
display: inline-block;
float: none;
- width: 750px;
+ width: 1250px;
margin-left: 0;
}
input.span14, textarea.span14, select.span14 {
display: inline-block;
float: none;
- width: 810px;
+ width: 1350px;
margin-left: 0;
}
input.span15, textarea.span15, select.span15 {
display: inline-block;
float: none;
- width: 870px;
+ width: 1450px;
margin-left: 0;
}
input.span16, textarea.span16, select.span16 {
display: inline-block;
float: none;
- width: 930px;
+ width: 1550px;
margin-left: 0;
}
input[disabled],
@@ -823,9 +765,6 @@ textarea[readonly] {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.has-error > label, .has-error span.help-inline, .has-error span.help-block {
color: #9d261d;
@@ -907,9 +846,6 @@ textarea[readonly] {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.input-prepend .add-on, .input-append .add-on {
position: relative;
@@ -931,9 +867,6 @@ textarea[readonly] {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.input-prepend .active, .input-append .active {
background: #a9dba9;
@@ -949,17 +882,11 @@ textarea[readonly] {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.input-append .add-on {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
margin-right: 0;
margin-left: -1px;
}
@@ -967,9 +894,6 @@ textarea[readonly] {
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.control-group {
margin-bottom: 18px;
@@ -1009,9 +933,6 @@ table {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
table th, table td {
padding: 10px 10px 9px;
@@ -1037,33 +958,21 @@ table tbody tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
table tbody tr:first-child td:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
table tbody tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
table tbody tr:last-child td:last-child {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.zebra-striped tbody tr:nth-child(odd) td {
background-color: #f9f9f9;
@@ -1263,9 +1172,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.navbar-fixed {
position: fixed;
@@ -1397,9 +1303,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -1494,9 +1397,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.tabs > li > a:hover {
text-decoration: none;
@@ -1529,9 +1429,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.tabbable.tabs-bottom .tabs > li > a:hover {
border-bottom-color: transparent;
@@ -1558,9 +1455,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.tabs a.menu:after, .tabs .dropdown-toggle:after {
border-top-color: #999;
@@ -1581,9 +1475,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.pills a:hover {
color: #ffffff;
@@ -1622,9 +1513,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
@@ -1647,9 +1535,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.hero-unit h1 {
margin-bottom: 0;
@@ -1765,9 +1650,6 @@ footer {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -1837,9 +1719,6 @@ footer {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.btn.small {
padding: 7px 9px 7px;
@@ -1887,9 +1766,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.btn-group .btn:first-child {
margin-left: 0;
@@ -1955,9 +1831,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
@@ -2033,9 +1906,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -2075,9 +1945,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -2120,9 +1987,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
@@ -2158,9 +2022,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
@@ -2240,9 +2101,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.twipsy-arrow {
position: absolute;
@@ -2303,9 +2161,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
@@ -2317,9 +2172,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
border-bottom: 1px solid #eee;
}
.popover .content {
@@ -2329,9 +2181,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
- -webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
@@ -2359,9 +2208,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.label.important {
background-color: #c43c35;
@@ -2400,9 +2246,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
-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);
@@ -2420,5 +2263,184 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
* For phone and tablet devices
* ------------------------------------------------------------- */
@media (max-width: 480px) {
-
+ .container {
+ width: auto;
+ padding: 0 10px;
+ }
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ }
+}
+@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: 28px;
+ }
+ .span2 {
+ width: 76px;
+ }
+ .span3 {
+ width: 124px;
+ }
+ .span4 {
+ width: 172px;
+ }
+ .span5 {
+ width: 220px;
+ }
+ .span6 {
+ width: 268px;
+ }
+ .span7 {
+ width: 316px;
+ }
+ .span8 {
+ width: 364px;
+ }
+ .span9 {
+ width: 412px;
+ }
+ .span10 {
+ width: 460px;
+ }
+ .span11 {
+ width: 508px;
+ }
+ .span12 {
+ width: 556px;
+ }
+ .offset1 {
+ margin-left: 68px;
+ }
+ .offset2 {
+ margin-left: 116px;
+ }
+ .offset3 {
+ margin-left: 164px;
+ }
+ .offset4 {
+ margin-left: 212px;
+ }
+ .offset5 {
+ margin-left: 260px;
+ }
+ .offset6 {
+ margin-left: 308px;
+ }
+ .offset7 {
+ margin-left: 356px;
+ }
+ .offset8 {
+ margin-left: 404px;
+ }
+ .offset9 {
+ margin-left: 452px;
+ }
+ .offset10 {
+ margin-left: 500px;
+ }
+ .offset11 {
+ margin-left: 548px;
+ }
+ .offset12 {
+ margin-left: 596px;
+ }
+}
+@media (min-width: 1170px) {
+ .container {
+ width: 1170px;
+ }
+ [class*="span"] {
+ display: inline;
+ float: left;
+ margin-left: 20px;
+ }
+ .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: 130px;
+ }
+ .offset2 {
+ margin-left: 230px;
+ }
+ .offset3 {
+ margin-left: 330px;
+ }
+ .offset4 {
+ margin-left: 430px;
+ }
+ .offset5 {
+ margin-left: 530px;
+ }
+ .offset6 {
+ margin-left: 630px;
+ }
+ .offset7 {
+ margin-left: 730px;
+ }
+ .offset8 {
+ margin-left: 830px;
+ }
+ .offset9 {
+ margin-left: 930px;
+ }
+ .offset10 {
+ margin-left: 1030px;
+ }
+ .offset11 {
+ margin-left: 1130px;
+ }
+ .offset12 {
+ margin-left: 1230px;
+ }
}
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 770bd1dc66..04a992e322 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -36,49 +36,33 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.pull-left{float:left;}
.hide{display:none;}
.show{display:block;}
-.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
+.row{zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
.row:after{clear:both;}
[class*="span"]{display:inline;float:left;margin-left:20px;}
-.span1{width:40px;}
-.span2{width:100px;}
-.span3{width:160px;}
-.span4{width:220px;}
-.span5{width:280px;}
-.span6{width:340px;}
-.span7{width:400px;}
-.span8{width:460px;}
-.span9{width:520px;}
-.span10{width:580px;}
-.span11{width:640px;}
-.span12{width:700px;}
-.span13{width:760px;}
-.span14{width:820px;}
-.span15{width:880px;}
-.span16{width:940px;}
-.span17{width:1000px;}
-.span18{width:1060px;}
-.span19{width:1120px;}
-.span20{width:1180px;}
-.span21{width:1240px;}
-.span22{width:1300px;}
-.span23{width:1360px;}
-.span24{width:1420px;}
-.offset1{margin-left:80px;}
-.offset2{margin-left:140px;}
-.offset3{margin-left:200px;}
-.offset4{margin-left:260px;}
-.offset5{margin-left:320px;}
-.offset6{margin-left:380px;}
-.offset7{margin-left:440px;}
-.offset8{margin-left:500px;}
-.offset9{margin-left:560px;}
-.offset10{margin-left:620px;}
-.offset11{margin-left:680px;}
-.offset12{margin-left:740px;}
-.span-one-third{width:300px;}
-.span-two-thirds{width:620px;}
-.offset-one-third{margin-left:340px;}
-.offset-two-thirds{margin-left:660px;}
+.row>[class*="span"]:first-child{margin-left:0;}
+.span1{width:60px;}
+.span2{width:140px;}
+.span3{width:220px;}
+.span4{width:300px;}
+.span5{width:380px;}
+.span6{width:460px;}
+.span7{width:540px;}
+.span8{width:620px;}
+.span9{width:700px;}
+.span10{width:780px;}
+.span11{width:860px;}
+.span12{width:940px;}
+.offset1{margin-left:100px;}
+.offset2{margin-left:180px;}
+.offset3{margin-left:260px;}
+.offset4{margin-left:340px;}
+.offset5{margin-left:420px;}
+.offset6{margin-left:500px;}
+.offset7{margin-left:580px;}
+.offset8{margin-left:660px;}
+.offset9{margin-left:740px;}
+.offset10{margin-left:820px;}
+.offset11{margin-left:900px;}
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
@@ -103,15 +87,15 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
-code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
-pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
+pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
form{margin-bottom:18px;}
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
label{display:block;margin-bottom:5px;color:#404040;}
input[type=checkbox],input[type=radio]{cursor:pointer;}
-input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
@@ -127,24 +111,24 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado
.input-large{width:210px;}
.input-xlarge{width:270px;}
.input-xxlarge{width:530px;}
-input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
-input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
-input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}
-input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;}
-input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;}
-input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;}
-input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;}
-input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;}
-input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;}
-input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;}
-input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;}
-input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;}
-input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;}
-input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;}
-input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
-input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
+input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:50px;margin-left:0;}
+input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:150px;margin-left:0;}
+input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:250px;margin-left:0;}
+input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:350px;margin-left:0;}
+input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:450px;margin-left:0;}
+input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:550px;margin-left:0;}
+input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:650px;margin-left:0;}
+input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:750px;margin-left:0;}
+input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:850px;margin-left:0;}
+input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:950px;margin-left:0;}
+input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:1050px;margin-left:0;}
+input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:1150px;margin-left:0;}
+input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:1250px;margin-left:0;}
+input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:1350px;margin-left:0;}
+input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:1450px;margin-left:0;}
+input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:1550px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
-.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
+.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
.has-error input,.has-error textarea,.has-error select{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}.has-error input:focus,.has-error textarea:focus,.has-error select:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
@@ -158,28 +142,28 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.inline-inputs input.mini{width:60px;}
.inline-inputs input.small{width:90px;}
.inline-inputs span{padding:0 2px 0 1px;}
-.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
+.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
.input-prepend .add-on{*margin-top:1px;}
-.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin-right:0;margin-left:-1px;}
-.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
+.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
.control-group{margin-bottom:18px;}
.control-group>label{font-weight:bold;}
.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
.form-horizontal .controls{margin-left:150px;}
.form-horizontal .control-list{padding-top:6px;}
.form-horizontal .form-actions{padding-left:150px;}
-table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
+table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
table td{vertical-align:top;}
table th+th,table td+td{border-left:1px solid #ddd;}
table tr+tr td{border-top:1px solid #ddd;}
-table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
+table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
+table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
+table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
.zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
@@ -210,7 +194,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
.navbar-search .search-query:focus,.navbar-search .search-query.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);}
.navbar-static{margin-bottom:18px;}
-.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;}
.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;}
@@ -225,7 +209,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.dropdown{position:relative;}
.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;}
.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
-.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
+.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
@@ -233,30 +217,30 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
-.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
+.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
.tabs .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}
.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;}
.tabbable .tab-content{padding:19px;border:1px solid #ddd;}
.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
-.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
+.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;}
.tabbable.tabs-left .tabs{float:left;}
.tabbable.tabs-left .tabs>li{float:none;}
.tabbable.tabs-right .tabs{float:right;}
.tabbable.tabs-right .tabs>li{float:none;}
-.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
-.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;}
+.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;}
.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;}
.pills-vertical>li{float:none;}
.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}
-.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
+.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
.breadcrumb .active a{color:#404040;}
-.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
+.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
@@ -264,13 +248,13 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
+.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
.btn:focus{outline:1px dotted #666;}
.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
-.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
@@ -279,11 +263,11 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.btn-toolbar .btn-group{float:left;margin-right:10px;}
.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;}
.btn-group:after{clear:both;}
-.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
+.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
-.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
+.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}
.alert-message p{margin-bottom:0;}
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
@@ -296,21 +280,21 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
-.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
+.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
.pagination li{display:inline;}
.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
.pagination .next a{border:0;}
-.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
+.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
-.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
+.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
.modal.fade.in{top:50%;}
.modal-header{border-bottom:1px solid #eee;padding:5px 15px;}
.modal-body{padding:15px;}
-.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;}
+.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;}
.modal-footer:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;}
.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
@@ -318,24 +302,24 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
-.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.twipsy-arrow{position:absolute;width:0;height:0;}
.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.popover .arrow{position:absolute;width:0;height:0;}
-.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
-.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;border-bottom:1px solid #eee;}
-.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
+.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
+.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
+.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
-.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.label.important{background-color:#c43c35;}
+.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
.label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;}
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
.media-grid:after{clear:both;}
.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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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{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){}
+@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;}}@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:28px;} .span2{width:76px;} .span3{width:124px;} .span4{width:172px;} .span5{width:220px;} .span6{width:268px;} .span7{width:316px;} .span8{width:364px;} .span9{width:412px;} .span10{width:460px;} .span11{width:508px;} .span12{width:556px;} .offset1{margin-left:68px;} .offset2{margin-left:116px;} .offset3{margin-left:164px;} .offset4{margin-left:212px;} .offset5{margin-left:260px;} .offset6{margin-left:308px;} .offset7{margin-left:356px;} .offset8{margin-left:404px;} .offset9{margin-left:452px;} .offset10{margin-left:500px;} .offset11{margin-left:548px;} .offset12{margin-left:596px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{display:inline;float:left;margin-left:20px;} .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:130px;} .offset2{margin-left:230px;} .offset3{margin-left:330px;} .offset4{margin-left:430px;} .offset5{margin-left:530px;} .offset6{margin-left:630px;} .offset7{margin-left:730px;} .offset8{margin-left:830px;} .offset9{margin-left:930px;} .offset10{margin-left:1030px;} .offset11{margin-left:1130px;} .offset12{margin-left:1230px;}}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a17fd5692b..52714d1991 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -8,8 +8,9 @@
/* Body and structure
-------------------------------------------------- */
body {
- background-color: #fff;
position: relative;
+ padding-top: 40px;
+ background-color: #fff;
}
section {
padding-top: 60px;
@@ -21,22 +22,29 @@ section > .row {
/* Jumbotrons
-------------------------------------------------- */
+.jumbotron,
+.jumbotron .inner {
+ -webkit-border-radius: 0 0 6px 6px;
+ -moz-border-radius: 0 0 6px 6px;
+ border-radius: 0 0 6px 6px;
+}
.jumbotron {
- min-width: 940px;
- padding-top: 40px;
+ margin-bottom: 40px;
+ -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
+ -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
+ box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
}
.jumbotron .inner {
background: transparent url(../img/grid-18px.png) top center;
- padding: 45px 0;
- -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
- -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
-/* box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
-*/}
+ padding: 36px 60px;
+ -webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
+ -moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
+ box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
+}
.jumbotron h1,
.jumbotron p {
margin-bottom: 9px;
color: #fff;
- text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.jumbotron h1 {
@@ -46,6 +54,7 @@ section > .row {
}
.jumbotron p {
font-weight: 300;
+ margin-right: 25%;
}
.jumbotron .lead {
font-size: 20px;
@@ -60,14 +69,14 @@ section > .row {
------------------------- */
/* main docs page */
.masthead {
- background-color: #049cd9;
+ background-color: #004d9f;
background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
- background-image: -webkit-linear-gradient(#004D9F, #049cd9);
- background-image: -moz-linear-gradient(#004D9F, #049cd9);
- background-image: -o-linear-gradient(top, #004D9F, #049cd9);
- background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f));
+ background-image: -webkit-linear-gradient(#048ccd, #004d9f);
+ background-image: -moz-linear-gradient(#048ccd, #004d9f);
+ background-image: -o-linear-gradient(top, #048ccd, #004d9f);
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f));
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */
}
/* supporting docs pages */
.subhead {
@@ -98,15 +107,9 @@ section > .row {
/* Footer
-------------------------------------------------- */
.footer {
- background-color: #eee;
- min-width: 940px;
padding: 30px 0;
- text-shadow: 0 1px 0 #fff;
border-top: 1px solid #e5e5e5;
- -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
- -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
-/* box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
-*/}
+}
.footer p {
color: #555;
}
@@ -323,3 +326,25 @@ pre.prettyprint {
.well form {
margin-bottom: 0;
}
+
+
+/* Responsive Docs
+-------------------------------------------------- */
+
+/* Tablet to Medium Desktop
+------------------------- */
+
+@media (min-width: 768px) and (max-width: 900px) {
+
+ .footer,
+ .jumbotron {
+ min-width: 748px;
+ }
+ .jumbotron .inner h1,
+ .jumbotron .inner p {
+ margin-left: 40px;
+ margin-right: 40px;
+ }
+
+}
+
diff --git a/docs/index.html b/docs/index.html
index 4dd45f5f96..2db9719d1a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -75,40 +75,40 @@
</div>
</div>
- <!-- Masthead (blueprinty thing)
- ================================================== -->
- <header class="jumbotron masthead" id="overview">
- <div class="inner">
- <h1>Bootstrap, from Twitter</h1>
- <p class="lead">
- Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br>
- It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br>
- </p>
- <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
- </div>
- </header>
+ <div class="container">
+
+ <div id="overview">
+ <!-- Masthead (blueprinty thing)
+ ================================================== -->
+ <header class="jumbotron masthead">
+ <div class="inner">
+ <h1>Bootstrap, from Twitter</h1>
+ <a href="#" class="btn btn-large pull-right">Download on GitHub</a>
+ <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
+ <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed with modern browsers in mind.</p>
+ </div>
+ </header>
- <!-- Quickstart options
- ================================================== -->
- <div class="quickstart">
- <div class="container">
+ <!-- Quickstart options
+ ================================================== -->
+ <div class="quickstart" style="display: none;">
<div class="row">
- <div class="span5">
+ <div class="span4">
<h6>Hotlink the CSS</h6>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<form>
<textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
</form>
</div>
- <div class="span5">
+ <div class="span4">
<h6>Use it with Less</h6>
<p>A fan of using Less? No problem, just clone the repo and add these lines:</p>
<form>
<textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script></textarea>
+ <script src="/path/to/less.js"></script></textarea>
</form>
</div>
- <div class="span5">
+ <div class="span4">
<h6>Fork on GitHub</h6>
<p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
@@ -116,51 +116,40 @@
</div>
</div><!-- /row -->
</div>
- </div>
- <div class="container">
-
-
-
-<!-- About Bootstrap
-================================================== -->
-<section id="about">
- <div class="page-header">
- <h1>About Bootstrap <small>Brief history, browser support, and more</small></h1>
- </div>
- <div class="row">
- <div class="span-one-third">
- <h3>History</h3>
- <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
- <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
- </div>
- <div class="span-one-third">
- <h3>Browser support</h3>
- <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
- <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
- <ul>
- <li>Latest Safari</li>
- <li>Latest Google Chrome</li>
- <li>Firefox 4+</li>
- <li>Internet Explorer 7+</li>
- <li>Opera 11</li>
- </ul>
- </div>
- <div class="span-one-third">
- <h3>What's included</h3>
- <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
- <ul>
- <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
- <li>All original .less files</li>
- <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
- <li>Complete styleguide documentation</li>
- <li>Three example pages with different layouts</li>
- </ul>
- </div>
- </div><!-- /row -->
+ <!-- About Bootstrap
+ ================================================== -->
+ <div class="row">
+ <div class="span4">
+ <h2>Built for and by nerds</h2>
+ <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
+ <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
+ </div>
+ <div class="span4">
+ <h2>Cross-everything</h2>
+ <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
+ <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
+ <ul>
+ <li>Latest Safari</li>
+ <li>Latest Google Chrome</li>
+ <li>Firefox 4+</li>
+ <li>Internet Explorer 7+</li>
+ <li>Opera 11</li>
+ </ul>
+ </div>
+ <div class="span4">
+ <h2>What's included</h2>
+ <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
+ <ul>
+ <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
+ <li>All original .less files</li>
+ <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
+ <li>Complete styleguide documentation</li>
+ <li>Three example pages with different layouts</li>
+ </ul>
+ </div>
+ </div><!-- /row -->
- <div class="row">
- <div class="span12">
<h3>Quick-start examples</h3>
<p>Need some quick templates? Check out these basic examples we've put together:</p>
<ul class="media-grid">
@@ -174,10 +163,8 @@
<a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
</li>
</ul>
- </div>
- </div><!-- /row -->
-</section>
+ </div><!-- /#overview -->
<!-- Grid system
@@ -187,11 +174,11 @@
<h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
</div>
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Default grid</h2>
<p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Example grid markup</h3>
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
<pre class="prettyprint linenums">
@@ -206,11 +193,7 @@
</pre>
</div>
</div><!-- /row -->
- <div class="row show-grid" title="16 column layout">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
+ <div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
@@ -223,56 +206,23 @@
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
- </div><!-- /row -->
- <div class="row show-grid" title="8 column layout">
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- <div class="span2">2</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Example uncommon layout">
- <div class="span3">3</div>
- <div class="span3">3</div>
- <div class="span3">3</div>
- <div class="span3">3</div>
- <div class="span3">3</div>
- <div class="span1 column">1</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Four column layout">
- <div class="span4">4</div>
+ </div>
+ <div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Default three column layout">
- <div class="span-one-third">1/3</div>
- <div class="span-one-third">1/3</div>
- <div class="span-one-third">1/3</div>
- </div><!-- /row -->
- <div class="row show-grid" title="One-third and two-thirds layout">
- <div class="span-one-third">1/3</div>
- <div class="span-two-thirds">2/3</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Irregular three column layout">
+ </div>
+ <div class="row show-grid">
<div class="span4">4</div>
+ <div class="span8">8</div>
+ </div>
+ <div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Half and half">
- <div class="span8">8</div>
- <div class="span8">8</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Example uncommon two-column layout">
- <div class="span5">5</div>
- <div class="span11">11</div>
- </div><!-- /row -->
- <div class="row show-grid" title="Unnecessary single column layout">
- <div class="span16">16</div>
- </div><!-- /row -->
+ </div>
+ <div class="row show-grid">
+ <div class="span12">12</div>
+ </div>
<br>
@@ -282,18 +232,11 @@
<div class="span8 offset4">8 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span-one-third offset-two-thirds">1/3 offset 2/3s</div>
+ <div class="span3 offset3">3 offset 3</div>
+ <div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span4 offset4">4 offset 4</div>
- <div class="span4 offset4">4 offset 4</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span5 offset3">5 offset 3</div>
- <div class="span5 offset3">5 offset 3</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span10 offset6">10 offset 6</div>
+ <div class="span8 offset4">8 offset 4</div>
</div><!-- /row -->
<br>
@@ -978,7 +921,7 @@
<fieldset class="control-group has-error">
<label class="control-label" for="textareaError">Textarea with error</label>
<div class="controls">
- <textarea class="input-xxlarge" rows="3"></textarea>
+ <textarea class="input-xlarge" rows="3"></textarea>
</div>
</fieldset>
<fieldset class="control-group">
@@ -2009,17 +1952,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</section>
- </div><!-- /container -->
<footer class="footer">
- <div class="container">
- <p class="pull-right"><a href="#">Back to top</a></p>
- <p>
- Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
- Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
- </p>
- </div>
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
+ Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+ </p>
</footer>
+ </div><!-- /container -->
+
+
</body>
</html>
diff --git a/lib/mixins.less b/lib/mixins.less
index 22a30a1c86..16ea91ba41 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -101,9 +101,6 @@
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
}
.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) {
-webkit-border-top-left-radius: @topLeft;
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 00a8ee3b35..01fcd9e772 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -84,10 +84,8 @@ a {
// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
-
.row {
.clearfix();
- margin-left: -1 * @gridGutterWidth;
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
@@ -95,6 +93,10 @@ a {
[class*="span"] {
.gridColumn();
}
+// Kill the margin on the first column
+.row > [class*="span"]:first-child {
+ margin-left: 0;
+}
// Default columns
.span1 { .columns(1); }
@@ -109,20 +111,6 @@ a {
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
-.span13 { .columns(13); }
-.span14 { .columns(14); }
-.span15 { .columns(15); }
-.span16 { .columns(16); }
-
-// For optional 24-column grid
-.span17 { .columns(17); }
-.span18 { .columns(18); }
-.span19 { .columns(19); }
-.span20 { .columns(20); }
-.span21 { .columns(21); }
-.span22 { .columns(22); }
-.span23 { .columns(23); }
-.span24 { .columns(24); }
// Offset column options
.offset1 { .offset(1); }
@@ -136,10 +124,3 @@ a {
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
-.offset12 { .offset(12); }
-
-// Unique column sizes for 16-column grid
-.span-one-third { width: 300px; }
-.span-two-thirds { width: 620px; }
-.offset-one-third { margin-left: 340px; }
-.offset-two-thirds { margin-left: 660px; }
diff --git a/lib/variables.less b/lib/variables.less
index f85e0ec859..24eb8b45a3 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -38,8 +38,8 @@
// ----
// Modify the grid styles in mixins.less
-@gridColumns: 16;
-@gridColumnWidth: 40px;
+@gridColumns: 12;
+@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
--
GitLab
From be926a04bc7d1fec228b9cbd4c6d0bb0c75c30cd Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 03:08:14 -0700
Subject: [PATCH 27/66] fix uber size in responsive; remove @extraspace
variable by changing grid to use :first-child over negative margin
---
bootstrap.css | 52 ++++++++++++++++++++++------------------------
bootstrap.min.css | 24 ++++++++++-----------
lib/mixins.less | 2 +-
lib/variables.less | 1 -
4 files changed, 38 insertions(+), 41 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 482d2878c8..887dbdd011 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 02:59:54 PDT 2011
+ * Date: Sun Oct 16 03:07:49 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).
@@ -316,37 +316,37 @@ a:hover {
width: 940px;
}
.offset1 {
- margin-left: 100px;
+ margin-left: 80px;
}
.offset2 {
- margin-left: 180px;
+ margin-left: 160px;
}
.offset3 {
- margin-left: 260px;
+ margin-left: 240px;
}
.offset4 {
- margin-left: 340px;
+ margin-left: 320px;
}
.offset5 {
- margin-left: 420px;
+ margin-left: 400px;
}
.offset6 {
- margin-left: 500px;
+ margin-left: 480px;
}
.offset7 {
- margin-left: 580px;
+ margin-left: 560px;
}
.offset8 {
- margin-left: 660px;
+ margin-left: 640px;
}
.offset9 {
- margin-left: 740px;
+ margin-left: 720px;
}
.offset10 {
- margin-left: 820px;
+ margin-left: 800px;
}
.offset11 {
- margin-left: 900px;
+ margin-left: 880px;
}
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
@@ -2367,9 +2367,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
width: 1170px;
}
[class*="span"] {
- display: inline;
- float: left;
- margin-left: 20px;
+ margin-left: 30px;
}
.span1 {
width: 70px;
@@ -2408,39 +2406,39 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
width: 1170px;
}
.offset1 {
- margin-left: 130px;
+ margin-left: 100px;
}
.offset2 {
- margin-left: 230px;
+ margin-left: 200px;
}
.offset3 {
- margin-left: 330px;
+ margin-left: 300px;
}
.offset4 {
- margin-left: 430px;
+ margin-left: 400px;
}
.offset5 {
- margin-left: 530px;
+ margin-left: 500px;
}
.offset6 {
- margin-left: 630px;
+ margin-left: 600px;
}
.offset7 {
- margin-left: 730px;
+ margin-left: 700px;
}
.offset8 {
- margin-left: 830px;
+ margin-left: 800px;
}
.offset9 {
- margin-left: 930px;
+ margin-left: 900px;
}
.offset10 {
- margin-left: 1030px;
+ margin-left: 1000px;
}
.offset11 {
- margin-left: 1130px;
+ margin-left: 1100px;
}
.offset12 {
- margin-left: 1230px;
+ margin-left: 1200px;
}
}
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 04a992e322..9c59687997 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -52,17 +52,17 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.span10{width:780px;}
.span11{width:860px;}
.span12{width:940px;}
-.offset1{margin-left:100px;}
-.offset2{margin-left:180px;}
-.offset3{margin-left:260px;}
-.offset4{margin-left:340px;}
-.offset5{margin-left:420px;}
-.offset6{margin-left:500px;}
-.offset7{margin-left:580px;}
-.offset8{margin-left:660px;}
-.offset9{margin-left:740px;}
-.offset10{margin-left:820px;}
-.offset11{margin-left:900px;}
+.offset1{margin-left:80px;}
+.offset2{margin-left:160px;}
+.offset3{margin-left:240px;}
+.offset4{margin-left:320px;}
+.offset5{margin-left:400px;}
+.offset6{margin-left:480px;}
+.offset7{margin-left:560px;}
+.offset8{margin-left:640px;}
+.offset9{margin-left:720px;}
+.offset10{margin-left:800px;}
+.offset11{margin-left:880px;}
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
@@ -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;}}@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:28px;} .span2{width:76px;} .span3{width:124px;} .span4{width:172px;} .span5{width:220px;} .span6{width:268px;} .span7{width:316px;} .span8{width:364px;} .span9{width:412px;} .span10{width:460px;} .span11{width:508px;} .span12{width:556px;} .offset1{margin-left:68px;} .offset2{margin-left:116px;} .offset3{margin-left:164px;} .offset4{margin-left:212px;} .offset5{margin-left:260px;} .offset6{margin-left:308px;} .offset7{margin-left:356px;} .offset8{margin-left:404px;} .offset9{margin-left:452px;} .offset10{margin-left:500px;} .offset11{margin-left:548px;} .offset12{margin-left:596px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{display:inline;float:left;margin-left:20px;} .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:130px;} .offset2{margin-left:230px;} .offset3{margin-left:330px;} .offset4{margin-left:430px;} .offset5{margin-left:530px;} .offset6{margin-left:630px;} .offset7{margin-left:730px;} .offset8{margin-left:830px;} .offset9{margin-left:930px;} .offset10{margin-left:1030px;} .offset11{margin-left:1130px;} .offset12{margin-left:1230px;}}
+@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;}}@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:28px;} .span2{width:76px;} .span3{width:124px;} .span4{width:172px;} .span5{width:220px;} .span6{width:268px;} .span7{width:316px;} .span8{width:364px;} .span9{width:412px;} .span10{width:460px;} .span11{width:508px;} .span12{width:556px;} .offset1{margin-left:68px;} .offset2{margin-left:116px;} .offset3{margin-left:164px;} .offset4{margin-left:212px;} .offset5{margin-left:260px;} .offset6{margin-left:308px;} .offset7{margin-left:356px;} .offset8{margin-left:404px;} .offset9{margin-left:452px;} .offset10{margin-left:500px;} .offset11{margin-left:548px;} .offset12{margin-left:596px;}}@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;}}
diff --git a/lib/mixins.less b/lib/mixins.less
index 16ea91ba41..47857f1faf 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -82,7 +82,7 @@
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
diff --git a/lib/variables.less b/lib/variables.less
index 24eb8b45a3..92d09de709 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -41,7 +41,6 @@
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
-@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
--
GitLab
From 3a4760637f3acca9cbd8af2819d163848852a23a Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 03:15:17 -0700
Subject: [PATCH 28/66] tweak navbar styles for static version to not cause
problems on responsive layouts
---
bootstrap.css | 4 +-
bootstrap.min.css | 2 +-
docs/index.html | 136 +++++++++++++++++++++++-----------------------
lib/patterns.less | 2 -
4 files changed, 70 insertions(+), 74 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 887dbdd011..8b487fb7e3 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 03:07:49 PDT 2011
+ * Date: Sun Oct 16 03:14:23 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).
@@ -1165,8 +1165,6 @@ table .headerSortUp.purple, table .headerSortDown.purple {
margin-bottom: 18px;
}
.navbar-static .navbar-inner {
- margin-left: -20px;
- margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
-webkit-border-radius: 4px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 9c59687997..cfec72ec12 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -194,7 +194,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
.navbar-search .search-query:focus,.navbar-search .search-query.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);}
.navbar-static{margin-bottom:18px;}
-.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;}
.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 2db9719d1a..0e49e9cbd2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -242,20 +242,20 @@
<br>
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Nesting columns</h2>
<p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h4>Example of nested columns</h4>
<div class="row show-grid">
- <div class="span12">
+ <div class="span9">
Level 1 of column
<div class="row show-grid">
- <div class="span6">
+ <div class="span4">
Level 2
</div>
- <div class="span6">
+ <div class="span5">
Level 2
</div>
</div>
@@ -282,11 +282,11 @@
<br>
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Roll your own grid</h2>
<p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Inside the grid</h3>
<p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
<table class="zebra-striped">
@@ -341,7 +341,7 @@
</div>
<div class="row">
- <div class="span8">
+ <div class="span6">
<h2>Fixed layout</h2>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
<div class="mini-layout">
@@ -355,7 +355,7 @@
</body>
</pre>
</div><!-- /col -->
- <div class="span8">
+ <div class="span6">
<h2>Fluid layout</h2>
<p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
<div class="mini-layout fluid">
@@ -403,7 +403,7 @@
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
- <div class="span8">
+ <div class="span4">
<h3>Example paragraph</h3>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h1>Example heading <small>Has sub-heading…</small></h1>
@@ -412,7 +412,7 @@
<!-- Misc Elements -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Misc. elements</h2>
<p>Using emphasis, addresses, & abbreviations</p>
<p>
@@ -422,7 +422,7 @@
<code><abbr></code>
</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>When to use</h3>
<p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</p>
<h3>Emphasis in a paragraph</h3>
@@ -456,7 +456,7 @@
<!-- Blockquotes -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Blockquotes</h2>
<p>
<code><blockquote></code>
@@ -464,7 +464,7 @@
<code><small></code>
</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>How to quote</h3>
<p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
<blockquote>
@@ -482,7 +482,7 @@
<h2>Lists</h2>
<div class="row">
- <div class="span4">
+ <div class="span3">
<h4>Unordered <code><ul></code></h4>
<ul>
<li>Lorem ipsum dolor sit amet</li>
@@ -502,7 +502,7 @@
<li>Eget porttitor lorem</li>
</ul>
</div>
- <div class="span4">
+ <div class="span3">
<h4>Unstyled <code><ul.unstyled></code></h4>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
@@ -522,7 +522,7 @@
<li>Eget porttitor lorem</li>
</ul>
</div>
- <div class="span4">
+ <div class="span3">
<h4>Ordered <code><ol></code></h4>
<ol>
<li>Lorem ipsum dolor sit amet</li>
@@ -535,7 +535,7 @@
<li>Eget porttitor lorem</li>
</ol>
</div>
- <div class="span4">
+ <div class="span3">
<h4>Description <code>dl</code></h4>
<dl>
<dt>Description lists</dt>
@@ -552,7 +552,7 @@
<!-- Code -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Code</h2>
<p>
<code><code></code>
@@ -560,7 +560,7 @@
</p>
<p>Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Presenting code</h3>
<p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code><pre></code> element. For inline code, use the <code><code></code> element.</p>
<table class="zebra-striped">
@@ -603,14 +603,14 @@
<!-- Labels -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Inline labels</h2>
<p>
<code><span class="label"></code>
</p>
<p>Call attention to or flag any phrase in your body text.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Label anything</h3>
<p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
<table class="zebra-striped">
@@ -678,7 +678,7 @@
</div>
<!-- Table structure -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Building tables</h2>
<p>
<code><table></code>
@@ -694,7 +694,7 @@
<p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p>
<p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Example: Default table styles</h3>
<p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
<table>
@@ -823,7 +823,7 @@
<h1>Forms</h1>
</div>
<div class="row">
- <div class="span-one-third">
+ <div class="span4">
<h3>Four types of forms</h3>
<p>With 2.0, we now have four types of forms to choose from:</p>
<ul>
@@ -833,15 +833,15 @@
<li>Vertical form for stacked labels and inputs</li>
</ul>
</div>
- <div class="span-one-third">
+ <div class="span4">
<h3></h3>
</div>
</div><!-- /row -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Search form</h2>
</div>
- <div class="span12">
+ <div class="span9">
<div class="well">
<form class="form-search">
<input type="text" class="search-query">
@@ -851,10 +851,10 @@
</div>
</div><!-- /row -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Inline form</h2>
</div>
- <div class="span12">
+ <div class="span9">
<div class="well">
<form class="form-inline">
<h4>Some directional text</h4>
@@ -868,10 +868,10 @@
</div>
</div><!-- /row -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Horizontal form</h2>
</div>
- <div class="span12">
+ <div class="span9">
<form class="form-horizontal">
<legend>Example form</legend>
<fieldset class="control-group">
@@ -972,10 +972,10 @@
</div>
</div><!-- /row -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Vertical form</h2>
</div>
- <div class="span12">
+ <div class="span9">
<form class="form-vertical">
<legend>Example form</legend>
<fieldset class="control-group">
@@ -1016,12 +1016,12 @@
</div><!-- /row -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Example buttons</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
<div class="well" style="padding: 14px 19px;">
@@ -1052,10 +1052,10 @@
</div><!-- /row -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Button groups</h2>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Example</h3>
<div class="well">
<div class="btn-group">
@@ -1101,11 +1101,11 @@
</div>
<!-- Table structure -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Media grid</h2>
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Example thumbnails</h3>
<p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
<h4>Large</h4>
@@ -1234,15 +1234,15 @@
</div><!-- /topbar -->
<div class="row">
- <div class="span5">
+ <div class="span4">
<h4>What is it</h4>
<p>Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
</div>
- <div class="span5">
+ <div class="span4">
<h4>Customizable</h4>
<p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
</div>
- <div class="span6">
+ <div class="span4">
<h4>Dropdowns included</h4>
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>li</code> tags also support <code>.active</code> for showing current page selection.</p>
</div>
@@ -1252,12 +1252,12 @@
<br>
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Tabs and pills</h2>
<p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>Basic tabs example</h3>
<p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
<ul class="tabs">
@@ -1288,7 +1288,7 @@
<h3>Alternate tabs</h3>
<p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
<div class="row">
- <div class="span3">
+ <div class="span2">
<div class="clearfix">
<ul class="tabs tabs-left">
<li class="active"><a href="#">Active link</a></li>
@@ -1298,7 +1298,7 @@
</ul>
</div>
</div>
- <div class="span3">
+ <div class="span2">
<div class="clearfix">
<ul class="tabs tabs-right">
<li class="active"><a href="#">Active link</a></li>
@@ -1308,7 +1308,7 @@
</ul>
</div>
</div>
- <div class="span6">
+ <div class="span5">
<div class="clearfix">
<ul class="tabs tabs-bottom">
<li class="active"><a href="#">Active link</a></li>
@@ -1345,7 +1345,7 @@
</div>
<div class="row">
- <div class="span6">
+ <div class="span4">
<div class="tabbable tabs-left">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
@@ -1368,7 +1368,7 @@
</div>
</div>
</div>
- <div class="span6">
+ <div class="span5">
<div class="tabbable tabs-right">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
@@ -1450,11 +1450,11 @@
<!-- Breadcrumbs -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Breadcrumbs</h2>
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
</div>
- <div class="span12">
+ <div class="span9">
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
@@ -1486,11 +1486,11 @@
<!-- Pagination -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Pagination</h2>
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
</div>
- <div class="span12">
+ <div class="span9">
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">← Previous</a></li>
@@ -1560,13 +1560,13 @@
</div>
<!-- Basic alert messages -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Basic alerts</h2>
<p><code>.alert-message</code></p>
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
</div>
- <div class="span12">
+ <div class="span9">
<div class="alert-message warning">
<a class="close" href="#">×</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
@@ -1595,13 +1595,13 @@
</div><!-- /row -->
<!-- Block messages -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Block messages</h2>
<p><code>.alert-message.block-message</code></p>
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
</div>
- <div class="span12">
+ <div class="span9">
<div class="alert-message block-message warning">
<a class="close" href="#">×</a>
<p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
@@ -1658,12 +1658,12 @@
<h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
</div>
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Modals</h2>
<p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
<p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
</div>
- <div class="span12">
+ <div class="span9">
<div class="well" style="background-color: #888; border: none; padding: 40px;">
<!-- Modal -->
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
@@ -1685,12 +1685,12 @@
<!-- Tooltips -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Tooltips</h2>
<p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
<p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
</div>
- <div class="span12">
+ <div class="span9">
<div class="twipsies well">
<div style="position: relative">
<p class="muted" style="margin-bottom: 0">
@@ -1703,12 +1703,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<!-- Popovers -->
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Popovers</h2>
<p>Use popovers to provide subtextual information to a page without affecting layout.</p>
<p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
</div>
- <div class="span12">
+ <div class="span9">
<div class="well popover-well">
<div class="popover-wrapper">
<div class="popover left">
@@ -1736,12 +1736,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
</div>
<div class="row">
- <div class="span4">
+ <div class="span3">
<h2>Getting started</h2>
<p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
<p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p>
</div>
- <div class="span12">
+ <div class="span9">
<h3>What's included</h3>
<p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
<table class="zebra-striped">
@@ -1797,11 +1797,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
</div>
<div class="row">
- <div class="span4">
+ <div class="span3">
<p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p>
<p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p>
</div>
- <div class="span12">
+ <div class="span9">
<h2>How to use it</h2>
<p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
<pre class="prettyprint linenums">
diff --git a/lib/patterns.less b/lib/patterns.less
index af898a5614..950ac2feb9 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -111,8 +111,6 @@
margin-bottom: @baseLineHeight;
}
.navbar-static .navbar-inner {
- margin-left: -20px;
- margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
.border-radius(4px);
--
GitLab
From d1d38079589f2cda2b28cc9f5a3da86cbfabbf25 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 03:15:36 -0700
Subject: [PATCH 29/66] add responsive.less file
---
lib/responsive.less | 147 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 147 insertions(+)
create mode 100644 lib/responsive.less
diff --git a/lib/responsive.less b/lib/responsive.less
new file mode 100644
index 0000000000..ee974d3e18
--- /dev/null
+++ b/lib/responsive.less
@@ -0,0 +1,147 @@
+/* Responsive.less
+ * For phone and tablet devices
+ * ------------------------------------------------------------- */
+
+
+@media (max-width: 480px) {
+ // Remove width from containers
+ .container {
+ width: auto;
+ padding: 0 10px;
+ }
+ // Make all columns even
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ }
+}
+
+
+@media (min-width: 480px) and (max-width: 768px) {
+ // Remove width from containers
+ .container {
+ width: auto;
+ padding: 0 10px;
+ }
+ // Make all columns even
+ [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ margin: 0;
+ }
+}
+
+
+// TABLET TO MEDIUM DESKTOP
+// ------------------------
+
+@media (min-width: 768px) and (max-width: 940px) {
+
+ // Reset grid variables
+ @gridColumns: 16;
+ @gridColumnWidth: 28px;
+ @gridGutterWidth: 20px;
+ @siteWidth: 748px;
+ @extraSpace: (@gridGutterWidth * 2);
+
+ // Bring grid mixins to recalculate widths
+ .columns(@columnSpan: 1) {
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+ }
+ .offset(@columnOffset: 1) {
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+ }
+
+ // 16cols at 30px wide with 16px gutters
+ .container {
+ width: @siteWidth;
+ }
+
+ // 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); }
+
+}
+
+
+// LARGE DESKTOP
+// -------------
+
+@media (min-width: 1170px) {
+
+ // 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));
+ }
+ .offset(@columnOffset: 1) {
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+ }
+
+ .container {
+ width: @siteWidth;
+ }
+ [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
--
GitLab
From 6f44a90edbfc897082dd69630983391bf6e57ba7 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 11:35:24 -0700
Subject: [PATCH 30/66] tweak line-height of h2 and h3 to not be gihugeous,
updated responsive to improve tablet grid and phone styles
---
bootstrap.css | 74 +++++++++++++++++++++++++---------------
bootstrap.min.css | 6 ++--
docs/assets/css/docs.css | 25 +++++++-------
docs/index.html | 2 +-
lib/responsive.less | 46 +++++++++++++++++++++----
lib/type.less | 4 +--
6 files changed, 104 insertions(+), 53 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 8b487fb7e3..dffa6a8249 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 03:14:23 PDT 2011
+ * Date: Sun Oct 16 11:34:52 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).
@@ -388,13 +388,13 @@ h1 small {
}
h2 {
font-size: 24px;
- line-height: 36px;
+ line-height: 27px;
}
h2 small {
font-size: 14px;
}
h3 {
- line-height: 36px;
+ line-height: 27px;
font-size: 18px;
}
h3 small {
@@ -2269,6 +2269,26 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
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) {
@@ -2288,76 +2308,76 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
width: 748px;
}
.span1 {
- width: 28px;
+ width: 44px;
}
.span2 {
- width: 76px;
+ width: 108px;
}
.span3 {
- width: 124px;
+ width: 172px;
}
.span4 {
- width: 172px;
+ width: 236px;
}
.span5 {
- width: 220px;
+ width: 300px;
}
.span6 {
- width: 268px;
+ width: 364px;
}
.span7 {
- width: 316px;
+ width: 428px;
}
.span8 {
- width: 364px;
+ width: 492px;
}
.span9 {
- width: 412px;
+ width: 556px;
}
.span10 {
- width: 460px;
+ width: 620px;
}
.span11 {
- width: 508px;
+ width: 684px;
}
.span12 {
- width: 556px;
+ width: 748px;
}
.offset1 {
- margin-left: 68px;
+ margin-left: 64px;
}
.offset2 {
- margin-left: 116px;
+ margin-left: 128px;
}
.offset3 {
- margin-left: 164px;
+ margin-left: 192px;
}
.offset4 {
- margin-left: 212px;
+ margin-left: 256px;
}
.offset5 {
- margin-left: 260px;
+ margin-left: 320px;
}
.offset6 {
- margin-left: 308px;
+ margin-left: 384px;
}
.offset7 {
- margin-left: 356px;
+ margin-left: 448px;
}
.offset8 {
- margin-left: 404px;
+ margin-left: 512px;
}
.offset9 {
- margin-left: 452px;
+ margin-left: 576px;
}
.offset10 {
- margin-left: 500px;
+ margin-left: 640px;
}
.offset11 {
- margin-left: 548px;
+ margin-left: 704px;
}
.offset12 {
- margin-left: 596px;
+ margin-left: 768px;
}
}
@media (min-width: 1170px) {
diff --git a/bootstrap.min.css b/bootstrap.min.css
index cfec72ec12..a6ef9baf53 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -66,8 +66,8 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
-h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
-h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;}
+h2{font-size:24px;line-height:27px;}h2 small{font-size:14px;}
+h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
h5{font-size:14px;line-height:18px;}
h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;}
@@ -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;}}@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:28px;} .span2{width:76px;} .span3{width:124px;} .span4{width:172px;} .span5{width:220px;} .span6{width:268px;} .span7{width:316px;} .span8{width:364px;} .span9{width:412px;} .span10{width:460px;} .span11{width:508px;} .span12{width:556px;} .offset1{margin-left:68px;} .offset2{margin-left:116px;} .offset3{margin-left:164px;} .offset4{margin-left:212px;} .offset5{margin-left:260px;} .offset6{margin-left:308px;} .offset7{margin-left:356px;} .offset8{margin-left:404px;} .offset9{margin-left:452px;} .offset10{margin-left:500px;} .offset11{margin-left:548px;} .offset12{margin-left:596px;}}@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;}}@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;}}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 52714d1991..fb7482edc7 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -231,7 +231,7 @@ section > .row {
.mini-layout .mini-layout-body {
background-color: #dceaf4;
margin: 0 auto;
- width: 240px;
+ width: 70%;
height: 240px;
}
.mini-layout.fluid .mini-layout-sidebar,
@@ -241,11 +241,11 @@ section > .row {
}
.mini-layout.fluid .mini-layout-sidebar {
background-color: #bbd8e9;
- width: 90px;
+ width: 20%;
height: 240px;
}
.mini-layout.fluid .mini-layout-body {
- width: 300px;
+ width: 60%;
margin-left: 10px;
}
@@ -328,23 +328,22 @@ pre.prettyprint {
}
+.browser-support {
+ max-width: 100%;
+}
+
/* Responsive Docs
-------------------------------------------------- */
-
-/* Tablet to Medium Desktop
-------------------------- */
+@media (max-width: 480px) {
+ .large-bird {
+ display: none;
+ }
+}
@media (min-width: 768px) and (max-width: 900px) {
-
.footer,
.jumbotron {
min-width: 748px;
}
- .jumbotron .inner h1,
- .jumbotron .inner p {
- margin-left: 40px;
- margin-right: 40px;
- }
-
}
diff --git a/docs/index.html b/docs/index.html
index 0e49e9cbd2..b9004e6bfd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -128,7 +128,7 @@
<div class="span4">
<h2>Cross-everything</h2>
<p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
- <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
+ <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
<ul>
<li>Latest Safari</li>
<li>Latest Google Chrome</li>
diff --git a/lib/responsive.less b/lib/responsive.less
index ee974d3e18..5c8e0539e8 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -3,6 +3,9 @@
* ------------------------------------------------------------- */
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
@media (max-width: 480px) {
// Remove width from containers
.container {
@@ -14,10 +17,40 @@
float: none;
display: block;
width: auto;
+ margin: 0;
+ }
+ // Resize modals
+ .modal {
+ width: auto;
+ margin: 0;
}
+
+ // 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: 0;
+ }
+
}
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
@media (min-width: 480px) and (max-width: 768px) {
// Remove width from containers
.container {
@@ -34,24 +67,23 @@
}
-// TABLET TO MEDIUM DESKTOP
-// ------------------------
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
@media (min-width: 768px) and (max-width: 940px) {
// Reset grid variables
@gridColumns: 16;
- @gridColumnWidth: 28px;
+ @gridColumnWidth: 44px;
@gridGutterWidth: 20px;
@siteWidth: 748px;
- @extraSpace: (@gridGutterWidth * 2);
// Bring grid mixins to recalculate widths
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
}
// 16cols at 30px wide with 16px gutters
@@ -90,8 +122,8 @@
}
-// LARGE DESKTOP
-// -------------
+// LARGE DESKTOP & UP
+// ------------------
@media (min-width: 1170px) {
diff --git a/lib/type.less b/lib/type.less
index 4232a24dff..7cf9e6ccd9 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -38,13 +38,13 @@ h1 {
}
h2 {
font-size: 24px;
- line-height: @baseLineHeight * 2;
+ line-height: @baseLineHeight * 1.5;
small {
font-size: 14px;
}
}
h3 {
- line-height: @baseLineHeight * 2;
+ line-height: @baseLineHeight * 1.5;
font-size: 18px;
small {
font-size: 14px;
--
GitLab
From 756e7c8739266ec8594d545e7eec2a50ea06ce08 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 12:11:48 -0700
Subject: [PATCH 31/66] 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
--
GitLab
From 2a82b38cff142ec86a6e1dc4f9366205260d262d Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 18:01:05 -0700
Subject: [PATCH 32/66] tweak the h2s again for better spacing, adjust docs,
remove white bg if possible on file input, few other tweaks
---
bootstrap.css | 11 ++---
bootstrap.min.css | 9 ++--
docs/assets/css/docs.css | 99 +++++++++++++++++++++++++---------------
docs/index.html | 57 +++++++++++++++++------
lib/forms.less | 8 +---
lib/type.less | 4 +-
6 files changed, 117 insertions(+), 71 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 3c344e98b7..3af3c1be78 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 12:11:34 PDT 2011
+ * Date: Sun Oct 16 18:00:58 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).
@@ -388,7 +388,7 @@ h1 small {
}
h2 {
font-size: 24px;
- line-height: 27px;
+ line-height: 36px;
}
h2 small {
font-size: 14px;
@@ -434,7 +434,7 @@ ol {
}
li {
line-height: 18px;
- color: #808080;
+ color: #404040;
}
ul.unstyled {
list-style: none;
@@ -553,9 +553,6 @@ label {
margin-bottom: 5px;
color: #404040;
}
-input[type=checkbox], input[type=radio] {
- cursor: pointer;
-}
input,
textarea,
select,
@@ -583,9 +580,11 @@ input[type=checkbox], input[type=radio] {
line-height: normal;
border: none;
+ cursor: pointer;
}
input[type=file] {
background-color: #ffffff;
+ background-color: initial;
padding: initial;
border: initial;
line-height: initial;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index e4dccdef93..39bb7b8194 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -66,7 +66,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
-h2{font-size:24px;line-height:27px;}h2 small{font-size:14px;}
+h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
h5{font-size:14px;line-height:18px;}
@@ -75,7 +75,7 @@ ul,ol{margin:0 0 18px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
ol{list-style:decimal;}
-li{line-height:18px;color:#808080;}
+li{line-height:18px;color:#404040;}
ul.unstyled{list-style:none;margin-left:0;}
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
dl dt{font-weight:bold;}
@@ -94,10 +94,9 @@ form{margin-bottom:18px;}
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
label{display:block;margin-bottom:5px;color:#404040;}
-input[type=checkbox],input[type=radio]{cursor:pointer;}
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
-input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
-input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;}
+input[type=file]{background-color:#ffffff;background-color:initial;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
select[multiple]{background-color:#ffffff;height:inherit;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fb7482edc7..01b6f3cd7e 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -9,7 +9,7 @@
-------------------------------------------------- */
body {
position: relative;
- padding-top: 40px;
+ padding-top: 100px;
background-color: #fff;
}
section {
@@ -19,65 +19,88 @@ section > .row {
margin-bottom: 10px;
}
+/* Tweak topbar brand link to be super sleek
+-------------------------------------------------- */
+.navbar .brand {
+ float: right;
+ font-weight: bold;
+ color: #000;
+ text-shadow: 0 1px 0 rgba(255,255,255,.1);
+}
+.navbar .brand:hover {
+ text-decoration: none;
+}
/* Jumbotrons
-------------------------------------------------- */
-.jumbotron,
-.jumbotron .inner {
- -webkit-border-radius: 0 0 6px 6px;
- -moz-border-radius: 0 0 6px 6px;
- border-radius: 0 0 6px 6px;
-}
.jumbotron {
- margin-bottom: 40px;
- -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
- -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
- box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25);
-}
-.jumbotron .inner {
- background: transparent url(../img/grid-18px.png) top center;
- padding: 36px 60px;
- -webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
- -moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
- box-shadow: inset 0 -15px 30px rgba(0,0,0,.1);
+ position: relative;
+ padding-bottom: 58px;
+ margin-bottom: 50px;
+ border-bottom: 2px solid #eee;
}
.jumbotron h1,
.jumbotron p {
- margin-bottom: 9px;
- color: #fff;
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
+ margin-bottom: 10px;
+ text-shadow: 0 1px 0 #fff;
}
.jumbotron h1 {
- font-size: 54px;
+ font-size: 90px;
line-height: 1;
- text-shadow: 0 1px 2px rgba(0,0,0,.5);
+ margin-right: 40%;
+ letter-spacing: -1px;
}
.jumbotron p {
font-weight: 300;
- margin-right: 25%;
+ margin-right: 32%;
}
.jumbotron .lead {
- font-size: 20px;
- line-height: 27px;
+ margin-bottom: 20px;
+ font-size: 25px;
+ line-height: 35px;
}
.jumbotron p a {
- color: #fff;
font-weight: bold;
}
+.jumbotron .btn {
+ font-size: 20px;
+ padding: 12px 24px;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+}
+.benefits {
+ width: 250px;
+ position: absolute;
+ right: 0;
+ bottom: 60px;
+}
+.benefits ul {
+ list-style: none;
+ margin: 0;
+}
+.benefits li {
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 40px;
+ color: #555;
+}
+.benefits li + li {
+ border-top: 1px solid #f5f5f5;
+}
+.benefits h4 {
+ color: #555;
+}
+.benefits span {
+ position: relative;
+ top: -2px;
+ padding-right: 5px;
+ color: #999;
+}
+
/* Specific jumbotrons
------------------------- */
-/* main docs page */
-.masthead {
- background-color: #004d9f;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f));
- background-image: -webkit-linear-gradient(#048ccd, #004d9f);
- background-image: -moz-linear-gradient(#048ccd, #004d9f);
- background-image: -o-linear-gradient(top, #048ccd, #004d9f);
- background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */
-}
/* supporting docs pages */
.subhead {
background-color: #767d80;
diff --git a/docs/index.html b/docs/index.html
index b9004e6bfd..f7818d7f55 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,16 +16,6 @@
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
- <!-- Le javascript -->
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
- <script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
- <script src="assets/js/application.js"></script>
-
<!-- Le fav and touch icons -->
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
@@ -49,6 +39,7 @@
<ul class="dropdown-menu">
<li><a href="#grid-system">Grid</a></li>
<li><a href="#layouts">Layouts</a></li>
+ <li><a href="#responsive">Resposive</a></li>
</ul>
</li>
<li class="dropdown">
@@ -62,14 +53,17 @@
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
<ul class="dropdown-menu">
- <li><a href="#media">Media</a></li>
<li><a href="#navigation">Navigation</a></li>
+ <li><a href="#media">Media</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#popovers">Popovers</a></li>
+ <li><a href="#autocomplete">Autocomplete</a></li>
+ <li><a href="#accordion">Accordion</a></li>
+ <li><a href="#datepicker">Datepicker</a></li>
</ul>
</li>
<li><a href="#javascript">Javascript</a></li>
- <li><a href="#less">Less</a></li>
+ <li><a href="#less">Using Less</a></li>
</ul>
</div>
</div>
@@ -82,10 +76,21 @@
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
+ <div class="benefits pull-right">
+ <h4>Feature highlights</h4>
+ <ul>
+ <li><span>×</span> Built on LESS</li>
+ <li><span>×</span> Complete styleguide</li>
+ <li><span>×</span> Fully responsive design</li>
+ <li><span>×</span> Small footprint (7kb gzipped)</li>
+ <li><span>×</span> Support for IE7 and up</li>
+ <li><span>×</span> Custom jQuery plugins</li>
+ <li><span>×</span> Dozens of components</li>
+ </ul>
+ </div>
<h1>Bootstrap, from Twitter</h1>
- <a href="#" class="btn btn-large pull-right">Download on GitHub</a>
<p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
- <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed with modern browsers in mind.</p>
+ <a href="#" class="btn primary btn-large">Download on GitHub</a>
</div>
</header>
@@ -164,6 +169,19 @@
</li>
</ul>
+<!--
+ Quick links:
+ GitHub
+ Twitter
+ Roadmap
+ Changelog
+
+ Authors:
+ @mdo
+ @fat
+
+ -->
+
</div><!-- /#overview -->
@@ -1964,5 +1982,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div><!-- /container -->
+
+ <!-- Le javascript -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+
</body>
</html>
diff --git a/lib/forms.less b/lib/forms.less
index 4b2bb80166..6edf29e536 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -37,12 +37,6 @@ label {
color: @grayDark;
}
-// Checkboxs and radio buttons
-input[type=checkbox],
-input[type=radio] {
- cursor: pointer;
-}
-
// Inputs, Textareas, Selects
input,
textarea,
@@ -69,11 +63,13 @@ input[type=radio] {
*margin-top: 0; /* IE6-7 */
line-height: normal;
border: none;
+ cursor: pointer;
}
// Reset the file input to browser defaults
input[type=file] {
background-color: @white;
+ background-color: initial;
padding: initial;
border: initial;
line-height: initial;
diff --git a/lib/type.less b/lib/type.less
index 7cf9e6ccd9..c746a58af8 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -38,7 +38,7 @@ h1 {
}
h2 {
font-size: 24px;
- line-height: @baseLineHeight * 1.5;
+ line-height: @baseLineHeight * 2;
small {
font-size: 14px;
}
@@ -90,7 +90,7 @@ ol {
}
li {
line-height: @baseLineHeight;
- color: @gray;
+ color: @grayDark;
}
ul.unstyled {
list-style: none;
--
GitLab
From 1888511d676ced8f30743cc5b540f02257314bde Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 18:45:11 -0700
Subject: [PATCH 33/66] updated docs to include quick links and twitter
buttons, added updated blueprint pattern to background
---
docs/assets/css/docs.css | 51 ++++++++++++++++++++------
docs/assets/img/grid-18px-masked.png | Bin 0 -> 1621 bytes
docs/index.html | 53 ++++++++++++++++-----------
3 files changed, 71 insertions(+), 33 deletions(-)
create mode 100644 docs/assets/img/grid-18px-masked.png
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 01b6f3cd7e..ee0b9c8a33 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -9,8 +9,10 @@
-------------------------------------------------- */
body {
position: relative;
- padding-top: 100px;
+ padding-top: 90px;
background-color: #fff;
+ background-image: url(../img/grid-18px-masked.png);
+ background-repeat: repeat-x;
}
section {
padding-top: 60px;
@@ -35,9 +37,6 @@ section > .row {
-------------------------------------------------- */
.jumbotron {
position: relative;
- padding-bottom: 58px;
- margin-bottom: 50px;
- border-bottom: 2px solid #eee;
}
.jumbotron h1,
.jumbotron p {
@@ -57,23 +56,22 @@ section > .row {
.jumbotron .lead {
margin-bottom: 20px;
font-size: 25px;
- line-height: 35px;
-}
-.jumbotron p a {
- font-weight: bold;
+ line-height: 36px;
}
.jumbotron .btn {
font-size: 20px;
- padding: 12px 24px;
+ padding: 14px 24px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
+
+/* Benefits list in masthead */
.benefits {
width: 250px;
position: absolute;
right: 0;
- bottom: 60px;
+ bottom: 0;
}
.benefits ul {
list-style: none;
@@ -82,7 +80,7 @@ section > .row {
.benefits li {
font-size: 16px;
font-weight: 300;
- line-height: 40px;
+ line-height: 35px;
color: #555;
}
.benefits li + li {
@@ -127,6 +125,37 @@ section > .row {
}
+/* Quick links
+-------------------------------------------------- */
+.quick-links {
+ padding: 5px 20px;
+ margin: 60px 0;
+ list-style: none;
+ text-align: center;
+ background-color: #eee;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.quick-links li {
+ display: inline;
+ margin: 0 5px;
+ line-height: 30px;
+}
+.quick-links .divider {
+ color: #999;
+}
+.quick-links strong {
+ font-weight: normal;
+ color: #999;
+}
+.quick-links .tweet-btn,
+.quick-links .follow-btn {
+ position: relative;
+ top: 5px;
+}
+
+
/* Footer
-------------------------------------------------- */
.footer {
diff --git a/docs/assets/img/grid-18px-masked.png b/docs/assets/img/grid-18px-masked.png
new file mode 100644
index 0000000000000000000000000000000000000000..e531d5bc47b957b0ec8618482b27c1df0563188c
GIT binary patch
literal 1621
zcmcIkZA=?=96kzTIPKz$!2#KJ=|mHty}Q2OjWSAKpg;+MCU(_0kM?LgxEJpZT8bbq
z5wZlf5Orb8GSQhB!)8#L=!CH?WI-asHX6-f0w#+?l;MYk8E2gTD=#w<_Rah9e|w(i
z_xxUR$15v}<-0O>K@cQ&lvu04>Vcpnby_OeMZy#9V95||Zn2uJ6+<LXL1rIYL%|N3
z^ix$7>1%p@lFEmm<mZDfx9E136JC~9krGA~ra8cdp!~yOj`Y@1B3wiHgN#YBGIB)$
z2Yn{ROFAd&<SbMmSQ6o>>PUsl8>#c+KE>ezI6q7P0h$s?I84_w0ueST61oJ~OV@}3
zPC&#ulVZ)3+gS-)Se}A)Dpcu3^%$(zsxU2zYw<i-jbbQ*sS(tm#85(KAW#fm{}dn^
z@2e%MtoHR-;ABz+M3Ey9Boqp%LK+pz`w<MsaRgN(YPAv|ltL3Dl3^ty9NbW_Qi7Kc
za$=BWU`dgzVH-q~0yteuf#x=48DYIlpkPRt<Pc1SN-1psozBNYX?hbah*i`hzgr3m
zt|pE`swjbN;Ju)6wFjk89AV)pQe=4-%hqpHu`<AltPo&1*ix-iVX%|*1{vul!EibW
z2P23i<E0!{lLBa{f<Yf)G2#}DUZ=LBMjeLPP_q_CZAGZYhNDGA8ogzMYh}F+G{uM;
zT;C(EW?QZ_3^WHKTPZ%+NcrqMOT&qziQpDqbUL%$XtiP6>aBBqTX<RLZl4DN%pg*0
z|JCY^D=<IOc5`sSVRQ5;2FyDT2D^WRazl`8!eKSL!ZW}97%$Dmp6!bFeD5iJ@b^m2
zlF>Xm_*Tu&hPRI#2xpOdLbErEzj2jbQXOS&gCSa+9u!(vCQV<bWNHKLsq)OEKujjj
zj23pL2V#fV9DUxW^={dnz58na`#kXOqJR8@LVaGl(6d`3aZ-Ds1k5vFeo`BVmEI1y
zJ8ll8Ok>1ULRKq_4eUq+QpN_%xqb37H0#t=+}@ob2b4}bln?=L5-9sK@`>8<XN(hz
z==p?PTEY}~lOkQT>hrEW#@bg8#RF4a+1!aZX_s;t*wdCO1qHr9nx5l-?fxHQcV+j>
z%NEY|6;Irn?K!t|$C=T+ckkKjys_c;o-)iVLhBi}14j>EX?Z8?XqlVu`{jnJckEgm
zw--OBnQ{MKlO~nq?uARk!mWV8Gg$QCPAU_PCxP2v3!)!|+L!bTqi<YJK6*tsFT8qo
z_+rNLk#10-#l;Kv?@jlvPF6CY1qB&j#u-qr)yde4<0TE_e9nAU`WGi>P2YVSH?%gM
z$XLGqbo7j+`SS&P=iH5*y?yWd4N~`__v6W9#^&;4Vq5xR>)^{Be@>h(nEL63Q=vnR
ztKVX`@%=f=f3!rqOJ#}9&H2yG(aZK^HBl%vUS=w9$mQH)1(%DNW0B$Unfa@D!BBtv
z&DQ-xDG^H{a3(cjZAxVF$cG+NbJD)0vbH3M_t}0JIemRZ`q4XV71mFRUhDV={me)y
literal 0
HcmV?d00001
diff --git a/docs/index.html b/docs/index.html
index f7818d7f55..5002d9d46e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -90,10 +90,33 @@
</div>
<h1>Bootstrap, from Twitter</h1>
<p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
- <a href="#" class="btn primary btn-large">Download on GitHub</a>
+ <p class="download-info">
+ <a href="#" class="btn primary btn-large">Download on GitHub</a>
+ Currently v2.0.0
+ </p>
</div>
</header>
+ <ul class="quick-links">
+ <li><strong>Quick links</strong></li>
+ <li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
+ <li class="divider">·</li>
+ <li><strong>Authors</strong></li>
+ <li><a href="http://twitter.com/mdo">@mdo</a></li>
+ <li><a href="http://twitter.com/fat">@fat</a></li>
+ <li class="divider">·</li>
+ <li class="follow-btn">
+ <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </li>
+ <li class="tweet-btn">
+ <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+ </li>
+ </ul>
+
+
<!-- Quickstart options
================================================== -->
<div class="quickstart" style="display: none;">
@@ -169,19 +192,6 @@
</li>
</ul>
-<!--
- Quick links:
- GitHub
- Twitter
- Roadmap
- Changelog
-
- Authors:
- @mdo
- @fat
-
- -->
-
</div><!-- /#overview -->
@@ -1971,18 +1981,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</section>
- <footer class="footer">
- <p class="pull-right"><a href="#">Back to top</a></p>
- <p>
- Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
- Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
- </p>
- </footer>
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
+ Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+ </p>
+ </footer>
</div><!-- /container -->
-
<!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
--
GitLab
From c62a0239bd30a12e9f0d8c1e45f5818460e9df90 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 19:12:33 -0700
Subject: [PATCH 34/66] update to responsive to fix new masthead
---
bootstrap.css | 129 +++++++++++++++++++++++----------------
bootstrap.min.css | 2 +-
docs/assets/css/docs.css | 109 ++++++++++-----------------------
docs/index.html | 14 ++---
lib/responsive.less | 4 +-
5 files changed, 117 insertions(+), 141 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 3af3c1be78..32ffc61205 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 18:00:58 PDT 2011
+ * Date: Sun Oct 16 19:08:43 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).
@@ -2379,60 +2379,83 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-left: 768px;
}
}
-/*
-// LARGE DESKTOP & UP
-// ------------------
-
-@media (min-width: 1170px) {
-
- // 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));
- }
- .offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
- }
-
+@media (min-width: 1210px) {
.container {
- width: @siteWidth;
+ width: 1170px;
}
[class*="span"] {
- margin-left: @gridGutterWidth;
+ 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;
}
-
- // 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 39bb7b8194..6851a6cc2b 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -321,4 +321,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 (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: 1210px){.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;}}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ee0b9c8a33..7d36946dbb 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -37,34 +37,34 @@ section > .row {
-------------------------------------------------- */
.jumbotron {
position: relative;
-}
-.jumbotron h1,
-.jumbotron p {
- margin-bottom: 10px;
text-shadow: 0 1px 0 #fff;
}
.jumbotron h1 {
- font-size: 90px;
- line-height: 1;
margin-right: 40%;
+ margin-bottom: 10px;
+ font-size: 90px;
letter-spacing: -1px;
+ line-height: 1;
}
.jumbotron p {
- font-weight: 300;
margin-right: 32%;
-}
-.jumbotron .lead {
margin-bottom: 20px;
font-size: 25px;
+ font-weight: 300;
line-height: 36px;
}
.jumbotron .btn {
font-size: 20px;
padding: 14px 24px;
+ margin-right: 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
+.jumbotron .download-info {
+ font-size: 16px;
+ color: #999;
+}
/* Benefits list in masthead */
.benefits {
@@ -133,9 +133,9 @@ section > .row {
list-style: none;
text-align: center;
background-color: #eee;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
.quick-links li {
display: inline;
@@ -167,71 +167,6 @@ section > .row {
}
-/* Quickstart section for getting le code
--------------------------------------------------- */
-.quickstart {
- background-color: #f5f5f5;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
- background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5));
- background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -o-linear-gradient(#f9f9f9, #f5f5f5);
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)";
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0);
- background-image: linear-gradient(#f9f9f9, #f5f5f5);
- border-top: 1px solid #fff;
- border-bottom: 1px solid #eee;
-}
-.quickstart .container {
- margin-bottom: 0;
-}
-.quickstart .row {
- margin: 0 -20px;
- -webkit-box-shadow: 1px 0 0 #f9f9f9;
- -moz-box-shadow: 1px 0 0 #f9f9f9;
- box-shadow: 1px 0 0 #f9f9f9;
-}
-.quickstart [class*="span"] {
- width: 285px;
- height: 117px;
- margin-left: 0;
- padding: 17px 20px 26px;
- border-left: 1px solid #eee;
- -webkit-box-shadow: inset 1px 0 0 #f9f9f9;
- -moz-box-shadow: inset 1px 0 0 #f9f9f9;
- box-shadow: inset 1px 0 0 #f9f9f9;
-}
-.quickstart [class*="span"]:last-child {
- border-right: 1px solid #eee;
- width: 286px;
-}
-.quickstart h6,
-.quickstart p {
- line-height: 18px;
- text-align: center;
- margin-bottom: 9px;
- color: #333;
-}
-.quickstart .current-version,
-.quickstart .current-version a {
- color: #999;
-}
-.quickstart h6 {
- color: #999;
-}
-.quickstart textarea {
- display: block;
- width: 275px;
- height: auto;
- margin: 0 0 9px;
- line-height: 21px;
- white-space: nowrap;
- overflow: hidden;
-}
-
-
/* Special grid styles
-------------------------------------------------- */
.show-grid {
@@ -387,9 +322,29 @@ pre.prettyprint {
/* Responsive Docs
-------------------------------------------------- */
@media (max-width: 480px) {
+
+ body > .navbar-fixed .nav {
+ display: none;
+ }
+
.large-bird {
display: none;
}
+
+ .jumbotron h1 {
+ font-size: 36px;
+ margin-right: 0;
+ }
+ .jumbotron p {
+ margin-right: 0;
+ font-size: 18px;
+ line-height: 24px;
+ }
+ .jumbotron .benefits {
+ position: relative;
+ width: auto;
+ margin: 36px 0;
+ }
}
@media (min-width: 768px) and (max-width: 900px) {
diff --git a/docs/index.html b/docs/index.html
index 5002d9d46e..3bc72751e6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -76,7 +76,13 @@
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
- <div class="benefits pull-right">
+ <h1>Bootstrap,<br> from Twitter</h1>
+ <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
+ <p class="download-info">
+ <a href="#" class="btn primary btn-large">Download on GitHub</a>
+ Currently v2.0.0
+ </p>
+ <div class="benefits">
<h4>Feature highlights</h4>
<ul>
<li><span>×</span> Built on LESS</li>
@@ -88,12 +94,6 @@
<li><span>×</span> Dozens of components</li>
</ul>
</div>
- <h1>Bootstrap, from Twitter</h1>
- <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
- <p class="download-info">
- <a href="#" class="btn primary btn-large">Download on GitHub</a>
- Currently v2.0.0
- </p>
</div>
</header>
diff --git a/lib/responsive.less b/lib/responsive.less
index afd30f279e..900df4c751 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -121,11 +121,10 @@
}
-/*
// LARGE DESKTOP & UP
// ------------------
-@media (min-width: 1170px) {
+@media (min-width: 1210px) {
// Reset grid variables
@gridColumns: 12;
@@ -177,4 +176,3 @@
.offset12 { .offset(12); }
}
-*/
\ No newline at end of file
--
GitLab
From e7d2218b2043742f21c368d074d97a4bde275730 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 23:04:31 -0700
Subject: [PATCH 35/66] few tweaks to responsive stuff, updated docs for grid
system (still needs copy editing)
---
bootstrap.css | 159 ++++++++++++++++---------------------
bootstrap.min.css | 29 ++++---
docs/assets/css/docs.css | 14 ++--
docs/index.html | 165 ++++++++++++++++++---------------------
lib/mixins.less | 9 ++-
lib/patterns.less | 6 +-
lib/responsive.less | 2 +
lib/scaffolding.less | 5 +-
8 files changed, 177 insertions(+), 212 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 32ffc61205..89d55199e5 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 19:08:43 PDT 2011
+ * Date: Sun Oct 16 23:04: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).
@@ -260,6 +260,7 @@ a:hover {
display: block;
}
.row {
+ margin-left: -20px;
zoom: 1;
}
.row:before, .row:after {
@@ -276,9 +277,6 @@ a:hover {
float: left;
margin-left: 20px;
}
-.row > [class*="span"]:first-child {
- margin-left: 0;
-}
.span1 {
width: 60px;
}
@@ -316,37 +314,37 @@ a:hover {
width: 940px;
}
.offset1 {
- margin-left: 80px;
+ margin-left: 100px;
}
.offset2 {
- margin-left: 160px;
+ margin-left: 180px;
}
.offset3 {
- margin-left: 240px;
+ margin-left: 260px;
}
.offset4 {
- margin-left: 320px;
+ margin-left: 340px;
}
.offset5 {
- margin-left: 400px;
+ margin-left: 420px;
}
.offset6 {
- margin-left: 480px;
+ margin-left: 500px;
}
.offset7 {
- margin-left: 560px;
+ margin-left: 580px;
}
.offset8 {
- margin-left: 640px;
+ margin-left: 660px;
}
.offset9 {
- margin-left: 720px;
+ margin-left: 740px;
}
.offset10 {
- margin-left: 800px;
+ margin-left: 820px;
}
.offset11 {
- margin-left: 880px;
+ margin-left: 900px;
}
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
@@ -1550,14 +1548,14 @@ footer {
border-top: 1px solid #eee;
}
.page-header {
- margin-bottom: 17px;
- border-bottom: 1px solid #ddd;
+ margin-bottom: 27px;
+ border-bottom: 1px solid #eee;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.page-header h1 {
- margin-bottom: 8px;
+ margin-bottom: 13.5px;
}
.btn.danger,
.alert-message.danger,
@@ -2379,83 +2377,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-left: 768px;
}
}
+/*
+// LARGE DESKTOP & UP
+// ------------------
+
@media (min-width: 1210px) {
- .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 6851a6cc2b..31d1699bed 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -36,10 +36,9 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.pull-left{float:left;}
.hide{display:none;}
.show{display:block;}
-.row{zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
+.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
.row:after{clear:both;}
[class*="span"]{display:inline;float:left;margin-left:20px;}
-.row>[class*="span"]:first-child{margin-left:0;}
.span1{width:60px;}
.span2{width:140px;}
.span3{width:220px;}
@@ -52,17 +51,17 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.span10{width:780px;}
.span11{width:860px;}
.span12{width:940px;}
-.offset1{margin-left:80px;}
-.offset2{margin-left:160px;}
-.offset3{margin-left:240px;}
-.offset4{margin-left:320px;}
-.offset5{margin-left:400px;}
-.offset6{margin-left:480px;}
-.offset7{margin-left:560px;}
-.offset8{margin-left:640px;}
-.offset9{margin-left:720px;}
-.offset10{margin-left:800px;}
-.offset11{margin-left:880px;}
+.offset1{margin-left:100px;}
+.offset2{margin-left:180px;}
+.offset3{margin-left:260px;}
+.offset4{margin-left:340px;}
+.offset5{margin-left:420px;}
+.offset6{margin-left:500px;}
+.offset7{margin-left:580px;}
+.offset8{margin-left:660px;}
+.offset9{margin-left:740px;}
+.offset10{margin-left:820px;}
+.offset11{margin-left:900px;}
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
@@ -242,7 +241,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
-.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
+.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:13.5px;}
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
@@ -321,4 +320,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: 1210px){.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/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 7d36946dbb..300eb38f55 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -17,19 +17,16 @@ body {
section {
padding-top: 60px;
}
-section > .row {
- margin-bottom: 10px;
-}
/* Tweak topbar brand link to be super sleek
-------------------------------------------------- */
-.navbar .brand {
+body > .navbar-fixed .brand {
float: right;
font-weight: bold;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,.1);
}
-.navbar .brand:hover {
+body > .navbar-fixed .brand:hover {
text-decoration: none;
}
@@ -136,6 +133,9 @@ section > .row {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
+ -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
+ box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
.quick-links li {
display: inline;
@@ -171,10 +171,10 @@ section > .row {
-------------------------------------------------- */
.show-grid {
margin-top: 10px;
- margin-bottom: 10px;
+ margin-bottom: 20px;
}
.show-grid [class*="span"] {
- background: #eee;
+ background-color: #eee;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
diff --git a/docs/index.html b/docs/index.html
index 3bc72751e6..eeb0f4f0df 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -86,7 +86,7 @@
<h4>Feature highlights</h4>
<ul>
<li><span>×</span> Built on LESS</li>
- <li><span>×</span> Complete styleguide</li>
+ <li><span>×</span> Complete styleguide docs</li>
<li><span>×</span> Fully responsive design</li>
<li><span>×</span> Small footprint (7kb gzipped)</li>
<li><span>×</span> Support for IE7 and up</li>
@@ -199,28 +199,10 @@
================================================== -->
<section id="grid-system">
<div class="page-header">
- <h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
+ <h1>Grid system <small>12 columns with a responsive twist</small></h1>
</div>
- <div class="row">
- <div class="span3">
- <h2>Default grid</h2>
- <p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
- </div>
- <div class="span9">
- <h3>Example grid markup</h3>
- <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
-<pre class="prettyprint linenums">
-<div class="row">
- <div class="span6">
- ...
- </div>
- <div class="span10">
- ...
- </div>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
+
+ <h2>Default 940px grid</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
@@ -252,12 +234,28 @@
<div class="span12">12</div>
</div>
- <br>
+ <div class="row">
+ <div class="span4">
+ <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
+ <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
+ </div>
+ <div class="span4">
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span4">...</div>
+ <div class="span8">...</div>
+</div>
+</pre>
+ </div>
+ <div class="span4">
+ <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
+ </div>
+ </div><!-- /row -->
<h2>Offsetting columns</h2>
<div class="row show-grid">
<div class="span4">4</div>
- <div class="span8 offset4">8 offset 4</div>
+ <div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span3 offset3">3 offset 3</div>
@@ -269,37 +267,33 @@
<br>
+ <h2>Nesting columns</h2>
<div class="row">
- <div class="span3">
- <h2>Nesting columns</h2>
- <p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
- </div>
- <div class="span9">
- <h4>Example of nested columns</h4>
+ <div class="span6">
+ <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
+ <h4>Example</h4>
<div class="row show-grid">
- <div class="span9">
+ <div class="span6">
Level 1 of column
<div class="row show-grid">
- <div class="span4">
+ <div class="span3">
Level 2
</div>
- <div class="span5">
+ <div class="span3">
Level 2
</div>
</div>
</div>
</div>
+ </div>
+ <div class="span6">
<pre class="prettyprint linenums">
<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
- <div class="span6">
- Level 2
- </div>
- <div class="span6">
- Level 2
- </div>
+ <div class="span6">Level 2</div>
+ <div class="span6">Level 2</div>
</div>
</div>
</div>
@@ -307,56 +301,53 @@
</div>
</div>
- <br>
-
+ <h2>Grid customization</h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>Variable</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>@gridColumns</code></td>
+ <td>16</td>
+ <td>The number of columns within the grid</td>
+ </tr>
+ <tr>
+ <td><code>@gridColumnWidth</code></td>
+ <td>40px</td>
+ <td>The width of each column within the grid</td>
+ </tr>
+ <tr>
+ <td><code>@gridGutterWidth</code></td>
+ <td>20px</td>
+ <td>The negative space between each column</td>
+ </tr>
+ <tr>
+ <td><code>@siteWidth</code></td>
+ <td><em>Computed sum of all columns and gutters</em></td>
+ <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
+ </tr>
+ </tbody>
+ </table>
<div class="row">
- <div class="span3">
- <h2>Roll your own grid</h2>
- <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p>
+ <div class="span4">
+ <h3>Variables in LESS</h3>
+ <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
</div>
- <div class="span9">
- <h3>Inside the grid</h3>
- <p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>Variable</th>
- <th>Default value</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>@gridColumns</code></td>
- <td>16</td>
- <td>The number of columns within the grid</td>
- </tr>
- <tr>
- <td><code>@gridColumnWidth</code></td>
- <td>40px</td>
- <td>The width of each column within the grid</td>
- </tr>
- <tr>
- <td><code>@gridGutterWidth</code></td>
- <td>20px</td>
- <td>The negative space between each column</td>
- </tr>
- <tr>
- <td><code>@siteWidth</code></td>
- <td><em>Computed sum of all columns and gutters</em></td>
- <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
- </tr>
- </tbody>
- </table>
- <h3>Now to customize</h3>
- <p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p>
- <p>Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.</p>
- <pre class="prettyprint linenums">@gridColumns: 24;
-@gridColumnWidth: 20px;
-@gridGutterWidth: 20px;</pre>
- <p>Once recompiled, you'll be set!</p>
+ <div class="span4">
+ <h3>How to customize</h3>
+ <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p>
</div>
- </div>
+ <div class="span4">
+ <h3>Staying responsive</h3>
+ <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
+ </div>
+ </div><!-- /row -->
+
</section>
@@ -1928,7 +1919,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
}
</pre>
- <h2>Compiling Less</h2>
+ <h2 id="compiling">Compiling Less</h2>
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
<h3>Ways to compile</h3>
<table class="zebra-striped">
diff --git a/lib/mixins.less b/lib/mixins.less
index 47857f1faf..5b05654d50 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -78,12 +78,13 @@
margin-right: auto;
.clearfix();
}
-.columns(@columnSpan: 1) {
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+.columns(@columns: 1) {
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
-.offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+.offset(@columns: 1) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
+
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
display: inline;
diff --git a/lib/patterns.less b/lib/patterns.less
index 950ac2feb9..f1badc46d4 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -520,11 +520,11 @@ footer {
// ------------
.page-header {
- margin-bottom: @baseLineHeight - 1;
- border-bottom: 1px solid #ddd;
+ margin-bottom: @baseLineHeight * 1.5;
+ border-bottom: 1px solid #eee;
.box-shadow(0 1px 0 rgba(255,255,255,.5));
h1 {
- margin-bottom: (@baseLineHeight / 2) - 1px;
+ margin-bottom: @baseLineHeight * .75;
}
}
diff --git a/lib/responsive.less b/lib/responsive.less
index 900df4c751..a1a33164fe 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -121,6 +121,7 @@
}
+/*
// LARGE DESKTOP & UP
// ------------------
@@ -176,3 +177,4 @@
.offset12 { .offset(12); }
}
+*/
\ No newline at end of file
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 01fcd9e772..f15f6853cf 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -85,6 +85,7 @@ a {
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
.row {
+ margin-left: -@gridGutterWidth;
.clearfix();
}
@@ -93,10 +94,6 @@ a {
[class*="span"] {
.gridColumn();
}
-// Kill the margin on the first column
-.row > [class*="span"]:first-child {
- margin-left: 0;
-}
// Default columns
.span1 { .columns(1); }
--
GitLab
From 6d2e39950d98dafbb82e94f00b3c99b82d0ba1c1 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 17 Oct 2011 00:03:52 -0700
Subject: [PATCH 36/66] updated js docs page to new 12 column layout, fix
subhead jumbotron styles to match new front page
---
bootstrap.css | 2 +-
docs/assets/css/docs.css | 18 ++-------
docs/index.html | 4 +-
docs/javascript.html | 80 ++++++++++++++++++----------------------
4 files changed, 42 insertions(+), 62 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 89d55199e5..ac242d3b81 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 23:04:03 PDT 2011
+ * Date: Mon Oct 17 00:03:30 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).
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 300eb38f55..2af7764e65 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -98,28 +98,16 @@ body > .navbar-fixed .brand:hover {
------------------------- */
/* supporting docs pages */
.subhead {
- background-color: #767d80;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
- background-image: -webkit-linear-gradient(#565d60, #767d80);
- background-image: -moz-linear-gradient(#565d60, #767d80);
- background-image: -o-linear-gradient(top, #565d60, #767d80);
- background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */
-}
-.subhead .inner {
- padding: 36px 0 27px;
+ padding-bottom: 18px;
+ border-bottom: 3px solid #eee;
}
.subhead h1,
.subhead p {
- text-align: left;
+ margin-right: 0;
}
.subhead h1 {
font-size: 40px;
}
-.subhead p a {
- font-weight: normal;
-}
/* Quick links
diff --git a/docs/index.html b/docs/index.html
index eeb0f4f0df..f3ef344637 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -30,7 +30,7 @@
<div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner">
<div class="container">
- <a class="brand" href="#">Bootstrap</a>
+ <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#about">About</a></li>
@@ -1235,7 +1235,7 @@
</li>
</ul>
<form class="form-search navbar-search pull-left" action="">
- <input type="text" class="search-query" placeholder="Search">
+ <input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
diff --git a/docs/javascript.html b/docs/javascript.html
index b130511c3d..da623c2f8f 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -11,18 +11,6 @@
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
- <!-- Le javascript -->
- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-modal.js"></script>
- <script src="../js/bootstrap-alerts.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-popover.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
- <script src="../js/bootstrap-tabs.js"></script>
-
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
@@ -42,7 +30,7 @@
<div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner">
<div class="container">
- <a class="brand" href="#">Bootstrap JS</a>
+ <a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li><a href="#overview">Overview</a></li>
<li><a href="#modal">Modals</a></li>
@@ -57,21 +45,14 @@
</div>
</div>
+ <div class="container">
<!-- Masthead (blueprinty thing)
================================================== -->
<header class="jumbotron subhead" id="overview">
- <div class="inner">
- <div class="container">
- <h1>Javascript for Bootstrap</h1>
- <p class="lead">
- Bring Bootstrap's components to life with new, custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.
- </p>
- <p><a href="./index.html">← Back to Bootstrap home</a></p>
- </div><!-- /container -->
- </div>
+ <h1>Javascript for Bootstrap</h1>
+ <p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p>
</header>
- <div class="container">
<!-- Modal
================================================== -->
@@ -81,11 +62,11 @@
<h1>Modals <small>bootstrap-modal.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.</p>
<a href="../js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using bootstrap-modal</h3>
<pre class="prettyprint linenums">$('#my-modal').modal(options)</pre>
<h3>Options</h3>
@@ -207,11 +188,11 @@ $('#my-modal').bind('hidden', function () {
<h1>Dropdown <small>bootstrap-dropdown.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</p>
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using boostrap-dropdown.js</h3>
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
<h3>Markup</h3>
@@ -244,7 +225,7 @@ $('#my-modal').bind('hidden', function () {
<li><a href="#">Link</a></li>
</ul>
<form class="form-search navbar-search pull-left" action="">
- <input type="text" class="search-query" placeholder="Search">
+ <input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
@@ -281,11 +262,11 @@ $('#my-modal').bind('hidden', function () {
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p>
<a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h2>Using boostrap-scrollspy.js</h2>
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
<h3>Markup</h3>
@@ -316,11 +297,11 @@ $('#my-modal').bind('hidden', function () {
<h1>Tabs <small>bootstrap-tabs.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>This plugin adds quick, dynamic tab and pill functionality.</p>
<a href="../js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using boostrap-tabs.js</h3>
<pre class="prettyprint linenums">$('.tabs').tabs()</pre>
<h3>Markup</h3>
@@ -387,11 +368,11 @@ $('#my-modal').bind('hidden', function () {
<h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p>
<a href="../js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using bootstrap-twipsy.js</h3>
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
<h3>Options</h3>
@@ -504,11 +485,11 @@ $('#my-modal').bind('hidden', function () {
<h1>Popovers <small>bootstrap-popover.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p>
<a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using boostrap-popover.js</h3>
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>Options</h3>
@@ -625,11 +606,11 @@ $('#my-modal').bind('hidden', function () {
<h1>Alerts <small>bootstrap-alerts.js</small></h1>
</div>
<div class="row">
- <div class="span4 columns">
+ <div class="span3 columns">
<p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
<a href="../js/bootstrap-alerts.js" target="_blank" class="btn primary">Download</a>
</div>
- <div class="span12 columns">
+ <div class="span9 columns">
<h3>Using bootstrap-alerts.js</h3>
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
<h3>Markup</h3>
@@ -657,17 +638,28 @@ $('#my-modal').bind('hidden', function () {
</section>
- </div><!-- /container -->
-
- <footer class="footer">
- <div class="container">
+ <footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>
Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
</p>
- </div>
- </footer>
+ </footer>
+
+ </div><!-- /container -->
+
+
+ <!-- Le javascript -->
+ <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-modal.js"></script>
+ <script src="../js/bootstrap-alerts.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-popover.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="../js/bootstrap-tabs.js"></script>
</body>
</html>
--
GitLab
From f48baceeda7dc18e1fdf78f89c55b3de40a3357e Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 17 Oct 2011 12:45:09 -0700
Subject: [PATCH 37/66] remove bottom margin from h1
---
bootstrap.css | 3 +--
bootstrap.min.css | 2 +-
lib/type.less | 1 -
3 files changed, 2 insertions(+), 4 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index ac242d3b81..3731eaf0ba 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: Mon Oct 17 00:03:30 PDT 2011
+ * Date: Mon Oct 17 12:44:52 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).
@@ -377,7 +377,6 @@ h6 small {
color: #bfbfbf;
}
h1 {
- margin-bottom: 18px;
font-size: 30px;
line-height: 36px;
}
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 31d1699bed..4fca75703e 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -64,7 +64,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.offset11{margin-left:900px;}
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
-h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
+h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;}
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
diff --git a/lib/type.less b/lib/type.less
index c746a58af8..28d893fb9e 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -29,7 +29,6 @@ h1, h2, h3, h4, h5, h6 {
}
}
h1 {
- margin-bottom: @baseLineHeight;
font-size: 30px;
line-height: @baseLineHeight * 2;
small {
--
GitLab
From d035fa731ab6b846c98b2f2b6f5e82c1b11c6791 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 17 Oct 2011 12:59:03 -0700
Subject: [PATCH 38/66] update all code elements in docs
---
docs/index.html | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index f3ef344637..ab33ea23cf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -411,7 +411,7 @@
<div class="span4">
<h2>Headings & copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
- <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@basefont</code> and <code>@baseline</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
+ <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
<p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
</div>
<div class="span4">
@@ -467,7 +467,7 @@
</div>
</div>
- <p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br /></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p>
+ <p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p>
<h3>Abbreviations</h3>
<p>For abbreviations and acronyms, use the <code><abbr></code> tag (<code><acronym></code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
</div>
@@ -522,7 +522,7 @@
</ul>
</div>
<div class="span3">
- <h4>Unstyled <code><ul.unstyled></code></h4>
+ <h4>Unstyled <code><.unstyled></code></h4>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@@ -555,7 +555,7 @@
</ol>
</div>
<div class="span3">
- <h4>Description <code>dl</code></h4>
+ <h4>Description <code><dl></code></h4>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
@@ -592,7 +592,7 @@
<tbody>
<tr>
<td><code><code></code></td>
- <td>In a line of text like this, your wrapped code will look like this <code>>html<</code> element.</td>
+ <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td>
</tr>
<tr>
<td><code><pre></code></td>
@@ -1263,10 +1263,10 @@
</div>
<div class="span4">
<h4>Dropdowns included</h4>
- <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>li</code> tags also support <code>.active</code> for showing current page selection.</p>
+ <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
</div>
</div>
- <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p>
+ <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
<br>
--
GitLab
From 27cbe7f63a13fad987dc2547ef5b6f526ceb268c Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 17 Oct 2011 14:17:29 -0700
Subject: [PATCH 39/66] add abbr styles, overhaul type docs section to remove
lots of verbose text and put emphasis on tables and more scannable content
---
bootstrap.css | 11 +-
bootstrap.min.css | 5 +-
docs/assets/css/docs.css | 5 +
docs/index.html | 349 ++++++++++++++++++++-------------------
lib/type.less | 11 +-
5 files changed, 210 insertions(+), 171 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 3731eaf0ba..f3ff894d1a 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: Mon Oct 17 12:44:52 PDT 2011
+ * Date: Mon Oct 17 14:16:58 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).
@@ -367,6 +367,7 @@ h5,
h6 {
font-weight: bold;
color: #404040;
+ text-rendering: optimizelegibility;
}
h1 small,
h2 small,
@@ -388,7 +389,7 @@ h2 {
line-height: 36px;
}
h2 small {
- font-size: 14px;
+ font-size: 18px;
}
h3 {
line-height: 27px;
@@ -466,6 +467,12 @@ em {
.muted {
color: #bfbfbf;
}
+abbr {
+ font-size: 90%;
+ text-transform: uppercase;
+ border-bottom: 1px dotted #ddd;
+ cursor: help;
+}
blockquote {
margin-bottom: 18px;
border-left: 5px solid #eee;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 4fca75703e..86b68e44a7 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -63,9 +63,9 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.offset10{margin-left:820px;}
.offset11{margin-left:900px;}
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
-h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
+h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;}
-h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
+h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;}
h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
h5{font-size:14px;line-height:18px;}
@@ -83,6 +83,7 @@ hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
strong{font-style:inherit;font-weight:bold;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
.muted{color:#bfbfbf;}
+abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 2af7764e65..bbf71ab778 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -307,6 +307,11 @@ pre.prettyprint {
max-width: 100%;
}
+/* Make tables spaced out a bit more */
+h2 + table {
+ margin-top: 10px;
+}
+
/* Responsive Docs
-------------------------------------------------- */
@media (max-width: 480px) {
diff --git a/docs/index.html b/docs/index.html
index ab33ea23cf..2e0036bb09 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -406,90 +406,130 @@
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
+ <h2>Headings & body copy</h2>
+
<!-- Headings & Paragraph Copy -->
<div class="row">
<div class="span4">
- <h2>Headings & copy</h2>
- <p>A standard typographic hierarchy for structuring your webpages.</p>
+ <h3>Typographic scale</h3>
<p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
<p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
</div>
<div class="span4">
- <h1>h1. Heading 1</h1>
- <h2>h2. Heading 2</h2>
- <h3>h3. Heading 3</h3>
- <h4>h4. Heading 4</h4>
- <h5>h5. Heading 5</h5>
- <h6>h6. Heading 6</h6>
+ <h3>Example body text</h3>
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
</div>
<div class="span4">
- <h3>Example paragraph</h3>
- <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <h1>Example heading <small>Has sub-heading…</small></h1>
+ <div class="well">
+ <h1>h1. Heading 1</h1>
+ <h2>h2. Heading 2</h2>
+ <h3>h3. Heading 3</h3>
+ <h4>h4. Heading 4</h4>
+ <h5>h5. Heading 5</h5>
+ <h6>h6. Heading 6</h6>
+ </div>
</div>
</div>
<!-- Misc Elements -->
+ <h2>Emphasis, address, and abbreviation</h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>Element</th>
+ <th>Description</th>
+ <th>Usage</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code><strong></code>
+ </td>
+ <td>
+ For emphasizing a snippet of text with <strong>important</strong>
+ </td>
+ <td>
+ <span class="muted">None</span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><em></code>
+ </td>
+ <td>
+ For emphasizing a snippet of text with <em>stress</em>
+ </td>
+ <td>
+ <span class="muted">None</span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><abbr></code>
+ </td>
+ <td>
+ Wraps abbreviations and acronyms to show the expanded version on hover
+ </td>
+ <td>
+ Include optional <code>title</code> for expanded text
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><address></code>
+ </td>
+ <td>
+ For contact information for its nearest ancestor or the entire body of work
+ </td>
+ <td>
+ Preserve formatting by ending all lines with <code><br></code>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
<div class="row">
- <div class="span3">
- <h2>Misc. elements</h2>
- <p>Using emphasis, addresses, & abbreviations</p>
- <p>
- <code><strong></code>
- <code><em></code>
- <code><address></code>
- <code><abbr></code>
- </p>
- </div>
- <div class="span9">
- <h3>When to use</h3>
- <p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</p>
- <h3>Emphasis in a paragraph</h3>
+ <div class="span4">
+ <h3>Using emphasis</h3>
<p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
- <p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <code><b></code> is meant to highlight words or phrases without conveying additional importance, while <code><i></code> is mostly for voice, technical terms, etc.</p>
- <h3>Addresses</h3>
- <p>The <code><address></code> element is used for contact information for its nearest ancestor, or the entire body of work. Here are two examples of how it could be used:</p>
-
- <div class="row">
- <div class="span4">
- <address>
- <strong>Twitter, Inc.</strong><br>
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
- <abbr title="Phone">P:</abbr> (123) 456-7890
- </address>
- </div>
- <div class="span4">
- <address>
- <strong>Full Name</strong><br>
- <a mailto="">first.last@gmail.com</a>
- </address>
- </div>
- </div>
-
- <p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p>
- <h3>Abbreviations</h3>
- <p>For abbreviations and acronyms, use the <code><abbr></code> tag (<code><acronym></code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
+ <p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
</div>
- </div><!-- /row -->
+ <div class="span4">
+ <h3>Example addresses</h3>
+ <p>Here are two examples of how the <code><address></code> tag can be used:</p>
+ <address>
+ <strong>Twitter, Inc.</strong><br>
+ 795 Folsom Ave, Suite 600<br>
+ San Francisco, CA 94107<br>
+ <abbr title="Phone">P:</abbr> (123) 456-7890
+ </address>
+ <address>
+ <strong>Full Name</strong><br>
+ <a mailto="#">first.last@gmail.com</a>
+ </address>
+ </div>
+ <div class="span4">
+ <h3>Example abbreviations</h3>
+ <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
+ <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
+ <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+ </div>
+ </div>
+
<!-- Blockquotes -->
+ <h2>Blockquotes</h2>
<div class="row">
- <div class="span3">
- <h2>Blockquotes</h2>
- <p>
- <code><blockquote></code>
- <code><p></code>
- <code><small></code>
- </p>
- </div>
- <div class="span9">
- <h3>How to quote</h3>
+ <div class="span5">
<p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<small>Dr. Julius Hibbert</small>
</blockquote>
+ </div>
+ <div class="span7">
<pre class="prettyprint linenums">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
@@ -497,8 +537,9 @@
</blockquote>
</pre>
</div>
- </div><!-- /row -->
+ </div>
+ <!-- Lists -->
<h2>Lists</h2>
<div class="row">
<div class="span3">
@@ -522,7 +563,7 @@
</ul>
</div>
<div class="span3">
- <h4>Unstyled <code><.unstyled></code></h4>
+ <h4>Unstyled <code><ul.unstyled></code></h4>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@@ -570,120 +611,96 @@
<!-- Code -->
- <div class="row">
- <div class="span3">
- <h2>Code</h2>
- <p>
- <code><code></code>
- <code><pre></code>
- </p>
- <p>Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.</p>
- </div>
- <div class="span9">
- <h3>Presenting code</h3>
- <p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code><pre></code> element. For inline code, use the <code><code></code> element.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 190px;">Element</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code><code></code></td>
- <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td>
- </tr>
- <tr>
- <td><code><pre></code></td>
- <td>
+
+ <h2>Code <small>Inline and block</small></h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th style="width: 190px;">Element</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code><code></code></td>
+ <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td>
+ </tr>
+ <tr>
+ <td><code><pre></code></td>
+ <td>
<pre><div>
<h1>Heading</h1>
<p>Something right here...</p>
</div></pre>
- <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
- </td>
- </tr>
- <tr>
- <td><code><pre class="prettyprint"></code></td>
- <td>
- <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p>
+ <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code><pre class="prettyprint"></code></td>
+ <td>
+ <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p>
<pre class="prettyprint"><div>
<h1>Heading</h1>
<p>Something right here...</p>
</div></pre>
- <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div><!-- /row -->
+ <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
<!-- Labels -->
- <div class="row">
- <div class="span3">
- <h2>Inline labels</h2>
- <p>
- <code><span class="label"></code>
- </p>
- <p>Call attention to or flag any phrase in your body text.</p>
- </div>
- <div class="span9">
- <h3>Label anything</h3>
- <p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 50%;">Label</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code><span class="label">Default</span></code>
- </td>
- <td>
- <span class="label">Default</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><span class="label success">New</span></code>
- </td>
- <td>
- <span class="label success">New</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><span class="label warning">Warning</span></code>
- </td>
- <td>
- <span class="label warning">Warning</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><span class="label important">Important</span></code>
- </td>
- <td>
- <span class="label important">Important</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><span class="label notice">Notice</span></code>
- </td>
- <td>
- <span class="label notice">Notice</span>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div><!-- /row -->
+ <h2>Inline labels <small>for special attention</small></h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th style="width: 190px;">Labels</th>
+ <th>Markup</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <span class="label">Default</span>
+ </td>
+ <td>
+ <code><span class="label">Default</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label success">New</span>
+ </td>
+ <td>
+ <code><span class="label success">New</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label warning">Warning</span>
+ </td>
+ <td>
+ <code><span class="label warning">Warning</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label important">Important</span>
+ </td>
+ <td>
+ <code><span class="label important">Important</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label notice">Notice</span>
+ </td>
+ <td>
+ <code><span class="label notice">Notice</span></code>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</section>
diff --git a/lib/type.less b/lib/type.less
index 28d893fb9e..4978dd7869 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -24,6 +24,7 @@ p {
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: @grayDark;
+ text-rendering: optimizelegibility;
small {
color: @grayLight;
}
@@ -39,7 +40,7 @@ h2 {
font-size: 24px;
line-height: @baseLineHeight * 2;
small {
- font-size: 14px;
+ font-size: 18px;
}
}
h3 {
@@ -134,6 +135,14 @@ em {
color: @grayLight;
}
+// Abbreviations and acronyms
+abbr {
+ font-size: 90%;
+ text-transform: uppercase;
+ border-bottom: 1px dotted #ddd;
+ cursor: help;
+}
+
// Blockquotes
blockquote {
margin-bottom: @baseLineHeight;
--
GitLab
From b91d210a3cdb29d022f20646ed61e663ceea18dd Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 17 Oct 2011 14:43:43 -0700
Subject: [PATCH 40/66] overhauled tables section of docs to minize copy and
emphasize code
---
docs/index.html | 279 ++++++++++++++++++++++++++++++------------------
1 file changed, 178 insertions(+), 101 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 2e0036bb09..68cdd4a2cf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -638,10 +638,14 @@
<tr>
<td><code><pre class="prettyprint"></code></td>
<td>
- <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p>
+ <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<pre class="prettyprint"><div>
<h1>Heading</h1>
<p>Something right here...</p>
+</div></pre>
+<pre class="prettyprint linenums"><div>
+ <h1>Heading</h1>
+ <p>Something right here...</p>
</div></pre>
<p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
</td>
@@ -712,130 +716,204 @@
<div class="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
- <!-- Table structure -->
+
+ <h2>Table markup</h2>
<div class="row">
- <div class="span3">
- <h2>Building tables</h2>
- <p>
- <code><table></code>
- <code><thead></code>
- <code><tbody></code>
- <code><tr></code>
- <code><th></code>
- <code><td></code>
- <code><colspan></code>
- <code><caption></code>
- </p>
- <p>Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.</p>
- <p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p>
- <p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p>
- </div>
- <div class="span9">
- <h3>Example: Default table styles</h3>
- <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
- <table>
+ <div class="span8">
+ <table class="zebra-striped">
<thead>
<tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
+ <th>Tag</th>
+ <th>Description</th>
</tr>
</thead>
<tbody>
<tr>
- <td>1</td>
- <td>Some</td>
- <td>One</td>
- <td>English</td>
+ <td>
+ <code><table></code>
+ </td>
+ <td>
+ Wrapping element for displaying data in a tabular format
+ </td>
</tr>
<tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
+ <td>
+ <code><thead></code>
+ </td>
+ <td>
+ Container element for table header rows (<code><tr></code>) to label table columns
+ </td>
</tr>
<tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
+ <td>
+ <code><tbody></code>
+ </td>
+ <td>
+ Container element for table rows (<code><tr></code>) in the body of the table
+ </td>
</tr>
- </tbody>
- </table>
-<pre class="prettyprint linenums">
-<table>
- ...
-</table></pre>
- <h3>Example: Zebra-striped</h3>
- <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
- <table class="zebra-striped">
- <thead>
<tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
+ <td>
+ <code><tr></code>
+ </td>
+ <td>
+ Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
+ </td>
</tr>
- </thead>
- <tbody>
<tr>
- <td>1</td>
- <td>Some</td>
- <td>One</td>
- <td>English</td>
+ <td>
+ <code><td></code>
+ </td>
+ <td>
+ Default table cell
+ </td>
</tr>
<tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
+ <td>
+ <code><th></code>
+ </td>
+ <td>
+ Special table cell for column (or row, depending on scope and placement) labels<br>
+ Must be used within a <code><thead></code>
+ </td>
</tr>
<tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
+ <td>
+ <code><caption></code>
+ </td>
+ <td>
+ Description or summary of what the table holds, especially useful for screen readers
+ </td>
</tr>
</tbody>
</table>
- <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
+ </div>
+ <div class="span4">
+<pre class="prettyprint linenums">
+<table>
+ <thead>
+ <tr>
+ <th>...</th>
+ <th>...</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ </tr>
+ </tbody>
+</table>
+</pre>
+ </div>
+ </div>
+
+ <h2>Example tables</h2>
+ <h3>1. Default table styles</h3>
+ <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
+ <table>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+<table>
+ ...
+</table></pre>
+ <h3>2. Zebra-striped</h3>
+ <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+ <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
<pre class="prettyprint linenums">
<table class="zebra-striped">
...
</table></pre>
- <h3>Example: Zebra-striped w/ TableSorter.js</h3>
- <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
- <table class="zebra-striped" id="sortTableExample">
- <thead>
- <tr>
- <th>#</th>
- <th class="yellow">First Name</th>
- <th class="blue">Last Name</th>
- <th class="green">Language</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Your</td>
- <td>One</td>
- <td>English</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
- </tr>
- </tbody>
- </table>
+ <h3>3. Zebra-striped w/ TableSorter.js</h3>
+ <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
+ <table class="zebra-striped" id="sortTableExample">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th class="yellow">First Name</th>
+ <th class="blue">Last Name</th>
+ <th class="green">Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Your</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
<pre class="prettyprint linenums">
<script src="js/jquery/jquery.tablesorter.min.js"></script>
<script >
@@ -846,8 +924,7 @@
<table class="zebra-striped">
...
</table></pre>
- </div>
- </div><!-- /row -->
+
</section>
--
GitLab
From ae5c5e10635049c65d73454ca9486539bdf324d4 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 17 Oct 2011 20:44:52 -0700
Subject: [PATCH 41/66] update docs to change topbar to navbar
---
docs/index.html | 18 +++++++++---------
docs/javascript.html | 24 ++++++++++++------------
2 files changed, 21 insertions(+), 21 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 68cdd4a2cf..7fe5ce1ca7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -25,7 +25,7 @@
<body>
- <!-- Topbar
+ <!-- Navbar
================================================== -->
<div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner">
@@ -1308,7 +1308,7 @@
<div class="page-header">
<h1>Navigation</h1>
</div>
- <h2>Fixed topbar</h2>
+ <h2>Fixed navbar</h2>
<div class="navbar navbar-static" data-dropdown="dropdown">
<div class="navbar-inner">
<div class="container">
@@ -1343,24 +1343,24 @@
</li>
</ul>
</div>
- </div><!-- /topbar-inner -->
- </div><!-- /topbar -->
+ </div><!-- /navbar-inner -->
+ </div><!-- /navbar -->
<div class="row">
<div class="span4">
<h4>What is it</h4>
- <p>Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
+ <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
</div>
<div class="span4">
<h4>Customizable</h4>
- <p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
+ <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
</div>
<div class="span4">
<h4>Dropdowns included</h4>
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
</div>
</div>
- <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
+ <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
<br>
@@ -1875,11 +1875,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr>
<tr>
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
- <td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
+ <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td>
</tr>
<tr>
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
- <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
+ <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td>
</tr>
<tr>
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
diff --git a/docs/javascript.html b/docs/javascript.html
index da623c2f8f..68a3d0cd46 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -25,7 +25,7 @@
<body id="bootstrap-js">
- <!-- Topbar
+ <!-- Navbar
================================================== -->
<div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner">
@@ -189,12 +189,12 @@ $('#my-modal').bind('hidden', function () {
</div>
<div class="row">
<div class="span3 columns">
- <p>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</p>
+ <p>This plugin is for adding dropdown interaction to the Bootstrap navbar or tabbed navigations.</p>
<a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span9 columns">
<h3>Using boostrap-dropdown.js</h3>
- <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
+ <pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
<h3>Markup</h3>
<p>To quickly add dropdown functionality to any nav element, use the <code>data-dropdown</code> attribute. Any valid bootstrap dropdown will automatically be activated.</p>
<pre class="prettyprint linenums">
@@ -213,10 +213,10 @@ $('#my-modal').bind('hidden', function () {
<h3>Methods</h3>
<h4>$().dropdown()</h4>
<p>
- A programatic api for activating menus for a given topbar or tabbed navigation.
+ A programatic api for activating menus for a given navbar or tabbed navigation.
</p>
<h3>Demo</h3>
- <div id="topbar-example" class="navbar navbar-static">
+ <div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
@@ -263,28 +263,28 @@ $('#my-modal').bind('hidden', function () {
</div>
<div class="row">
<div class="span3 columns">
- <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p>
+ <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap navbar.</p>
<a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span9 columns">
<h2>Using boostrap-scrollspy.js</h2>
- <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
+ <pre class="prettyprint linenums">$('#navbar').dropdown()</pre>
<h3>Markup</h3>
- <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.topbar</code>.
- <pre class="prettyprint linenums"><div class="topbar" data-scrollspy="scrollspy" >...</div></pre>
+ <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.navbar</code>.
+ <pre class="prettyprint linenums"><div class="navbar" data-scrollspy="scrollspy" >...</div></pre>
<h3>Methods</h3>
<h4>$().scrollspy()</h4>
<p>
Auto activates navigation buttons by users scroll position.
</p>
- <pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre>
- <p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
+ <pre class="prettyprint linenums">$('body > .navbar').scrollSpy()</pre>
+ <p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.
</p>
<h4>.scrollspy('refresh')</h4>
<p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p>
<pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre>
<h3>Demo</h3>
- <p>Checkout the the topbar navigation on this page.</p>
+ <p>Checkout the the navbar navigation on this page.</p>
</div>
</div>
</section>
--
GitLab
From 369b9720c6090985c678076eebb59c080c0ed27c Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 17 Oct 2011 23:45:35 -0700
Subject: [PATCH 42/66] adding responsive stuff to docs to stub that out,
updated type to make ul and ol margins match p tags
---
bootstrap.css | 4 +-
bootstrap.min.css | 2 +-
docs/assets/css/docs.css | 17 +++-
docs/assets/img/responsive-illustrations.png | Bin 0 -> 2249 bytes
docs/index.html | 80 +++++++++++++++++++
lib/type.less | 2 +-
6 files changed, 100 insertions(+), 5 deletions(-)
create mode 100644 docs/assets/img/responsive-illustrations.png
diff --git a/bootstrap.css b/bootstrap.css
index f3ff894d1a..0f6d58ae06 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: Mon Oct 17 14:16:58 PDT 2011
+ * Date: Mon Oct 17 23:44:56 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).
@@ -416,7 +416,7 @@ h6 {
text-transform: uppercase;
}
ul, ol {
- margin: 0 0 18px 25px;
+ margin: 0 0 9px 25px;
}
ul ul,
ul ol,
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 86b68e44a7..31912f2933 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -70,7 +70,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
h5{font-size:14px;line-height:18px;}
h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;}
-ul,ol{margin:0 0 18px 25px;}
+ul,ol{margin:0 0 9px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
ol{list-style:decimal;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index bbf71ab778..2d0b87fe21 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -309,7 +309,7 @@ pre.prettyprint {
/* Make tables spaced out a bit more */
h2 + table {
- margin-top: 10px;
+ margin-top: 5px;
}
/* Responsive Docs
@@ -347,3 +347,18 @@ h2 + table {
}
}
+
+
+.supported-devices {
+ margin-bottom: 9px;
+ color: #777;
+}
+.supported-devices strong {
+ display: block;
+ font-size: 14px;
+ line-height: 18px;
+}
+.supported-devices small {
+ font-size: 12px;
+}
+
diff --git a/docs/assets/img/responsive-illustrations.png b/docs/assets/img/responsive-illustrations.png
new file mode 100644
index 0000000000000000000000000000000000000000..c980da77addecefd57a8294a828fdae2370d1d2e
GIT binary patch
literal 2249
zcma)8c~nz(77h_C$T|h7Kq(<;MOl&;2#{dFkVTLQO#|9U5EGI|2$;Mq4+zL26tG$>
zN~^ZYa$--FRnY;e8IopT3W~Cd^oWB+S+pQ^1*{wMf?(&&q0@PPeDD75yWhRv{oVV=
z+s}^LV!g_F6$*v2jtHl7P$&~`#6E1k62Xl4!er#-1T(mBG?WOZ3zQ&=DuNO~OoUV*
z205TWl%co`ZbG3}td+!YVJ_>hWFaK=6&PcD)lxaaMxi!^s^tP<3J7BoK(Rzd!9Mu=
z4_J&uM8SSSWZ_wI8ki&r&s2iZnNcyq%oHI>gbfYBY*Lev1X2(dVARsxG8I`(!7k(_
zBev0v!(tXf;1mk>jVLaQjiEtG5JU9E`v~y?04BiS7x2fE{7K#z0v^EQ00Isl=mX%%
z#6U70z$`vkq?%HcNaoO)i?xsw1)BuJaxxB=o}TWT?&k|B#W;XOBH{1^9D(42MEIyO
zWUxT(BU5=SWuSv9p;97;C6Ekb%qU2JQeg@fQTnC@sr+qPnQHNxkPE}91#%qVi#N8k
z6v$%z?@+1qZL|vJfWPZqHnA!uLk{9NpbAP=3X#DjdKgQ|$uuP>fFWfJ1npkBMRpPd
zL#iZ5j-f>peE|$hAe6|Ao&^SrMUIfEV1Y~sM$jo(B!{m=A|eMcf&hPlAB_nF1_A&B
zA4DZF836<)HGs*aGZ@4rE*%o4N<kUC#1;L{rT-z<xC~M`Qkf1aC263Dsf47Mg{H}p
zWwe9^(P#jj0U-JOm)G)!D_Ta&BA4)oTpS_>XB_Q+jC#q1?2plWyST{V?dpRvWZ#v@
zVsHFxnu<c11xL`SG3ufF!(EZCpR9RjB*Hq3dI58kyEdO~hqhjaVE@5G{QdC9-a9Wo
zcDq+&x2n(~OtZrgTbT9@LxXYnv@p!QHrBqlk+<63A22Q0ORxHc^b=tHEcM_;H}OQq
z2t&8AJG<xE=+%pUs*i?SGW;wv!?NE?_MCs8^AJB!&fYavDYmz_*K+t!;iPS9=)l(v
zSb*|dj?3K7s-cg+FlZfXqP@boV!c~*zQK8L<tjr?T&bZZX@yy@#%$c&d+*w^kb5ri
zQq4A2R8(@lljB|k+K#&bD72*=7lF-ulLavMMl5r0RG!%aU>Xn$0aM2XKq#h;o3qOX
z(VeZq%pZ1isngYd-knwJ2kP0jVLCSP`ll^oij9Rv@tihnOB}qPt2d?Pct02><(VB+
z_{5wJXld?l*@w1t=5sCkr!|I?yEoRiC_Fqot|u#8yPmhjuPbmouhZ3Ape_6H6iU5?
zjfKgAfZ6j!W@nSy$3LvE+J+Mn+R*R6i~c{f{%NC|`4W@=>hDiE%U;gp*i-7yUze2)
zxEic1M-Fy3plq%ce~ZsEvu@OCk9YO-h^MBeZcI!hc78O@Sn;~Ojjhti3ZB#W)D>Ob
z-HCI*4qy9hXl5*R-M}%;8D3ldN^V@7!}j$mpMgV8j{b($*4A^mr*%4ti<=ux6dEsl
zRqIo9)c9qzql9>SEX0n>7V~(#8?&>`%(6HJ-{kV*gqOzbS=!gvcfbF;$bGMi{f6^S
zeJ-A<B&kkib{{vOV`HsqnwpyK|MukWmX(9dssl$4Ul7M0YOb!X_Q?J4jNsLoZ4L$~
zmYt<2N+k~b$SxnEo~)R7q2P2^P)_W;Aa|ddob0UFlu<gY+Y`v!v17wDrkydT4p+aJ
zou-Mo^95wL$-C^7+3a`EAARus-6yYtoOC+fjqxkTYAw5@Qt9=QM^k#eo?|oi>&ZRo
z>2rtu>O5~9cpCj;J~Fq^Ih-FHYBN)Nduz|g$cVng*2*ddn(Z*jBLcwTmtR)3bv+Ec
zqNO<qa>J?LaY%!sFLT2$#X~73GmYoYDe5}@!rk`)=VsL82EF@_ITI5T{#*E~(~7PO
zs`?vSTFSbvUKN#mK&i=b4Q)SrMVr&K=T1_VOJiHmwd~yT<}WjOv9UFd!O0ZGSGtYO
z_OT^SgYgeU!O(`U@?~u^iNw+ApQ_6dAH_nNQh7U!e}uQyy*K589d~@NvbR}(toOE;
zc^!F8coOgClU{V*x`xt+8h0B1NOYY2R;l}*OAW4{r|dG_F32h!39xl(7Ao4d=51S3
zxt{FRl5{WG5qdfo<6^pf^3I(Z{>hsmvS-N?MMu!JcKWES#Cv6RL({h!9uKomJIC;b
zauRytj{i;Q+1K`uosXUtLA2~dPus!b6ZU##bx-9t?}bMtNAaiQHowd^sp#NVspno-
zT1g_cihmgnd>^Nfjz-QGX=7(;t!m8^xN6SwaaPWyI&o9YuCVNHt<U=CxysYUd8=(J
z?_AdGDtsR7HMsxSBSN_wt*by=dND}5dj6M?&a_)W|IDB7ODH+@xMF9C?aTEBR7;vy
Ud-sVBh4JSif)PbO6UNW~H==`gcmMzZ
literal 0
HcmV?d00001
diff --git a/docs/index.html b/docs/index.html
index 7fe5ce1ca7..aafea76621 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -399,6 +399,86 @@
+
+<!-- Responsive design
+================================================== -->
+<section id="responsive">
+ <div class="page-header">
+ <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
+ </div>
+ <!-- Supported devices -->
+ <div class="row">
+ <div class="span4">
+ <img src="assets/img/responsive-illustrations.png" alt="Responsive devices">
+ </div>
+ <div class="span8">
+ <h2>Supported devices</h2>
+ <table class="supported-devices">
+ <tbody>
+ <tr>
+ <td>
+ <strong>Under 480px</strong>
+ <small>Smartphones</small>
+ </td>
+ <td>
+ <strong>480px to 768px</strong>
+ <small>Portrait tablet</small>
+ </td>
+ <td>
+ <strong>768px to 940px</strong>
+ <small>Landscape tablet</small>
+ </td>
+ <td>
+ <strong>940px and up</strong>
+ <small>Default</small>
+ </td>
+ <td>
+ <strong>1170px and up</strong>
+ <small>Large screens</small>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <p>With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.</p>
+ </div>
+ </div>
+
+ <br>
+
+ <!-- Media query code -->
+ <h2>Using the media queries</h2>
+ <div class="row">
+ <div class="span4">
+ <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
+ <ol>
+ <li>Use the compiled responsive version, bootstrap.reponsive.css</li>
+ <li>Add @import "responsive.less" and recompile Bootstrap</li>
+ <li>Compile responsive.less as a separate file and include that</li>
+ </ol>
+ <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
+ </div>
+ <div class="span8">
+<pre class="prettyprint linenums">
+ // Landscape phones and down
+ @media (max-width: 480px) { ... }
+
+ // Landscape phone to portrait tablet
+ @media (min-width: 480px) and (max-width: 768px) { ... }
+
+ // Portrait tablet to landscape and desktop
+ @media (min-width: 768px) and (max-width: 940px) { ... }
+
+ // Large desktop
+ @media (min-width: 1210px) { .. }
+</pre>
+ </div>
+ </div>
+
+</section>
+
+
+
+
<!-- Typography
================================================== -->
<section id="typography">
diff --git a/lib/type.less b/lib/type.less
index 4978dd7869..a490bf5fa1 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -74,7 +74,7 @@ h6 {
// Unordered and Ordered lists
ul, ol {
- margin: 0 0 @baseLineHeight 25px;
+ margin: 0 0 @baseLineHeight / 2 25px;
}
ul ul,
ul ol,
--
GitLab
From a5d2450e88693de5e96d9a9f3f4e82853723f764 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 18 Oct 2011 08:11:18 -0700
Subject: [PATCH 43/66] refinement to the responsive section
---
docs/assets/css/docs.css | 16 ---------
docs/index.html | 70 ++++++++++++++++++++++++++--------------
2 files changed, 46 insertions(+), 40 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 2d0b87fe21..c1c43b1d88 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -346,19 +346,3 @@ h2 + table {
min-width: 748px;
}
}
-
-
-
-.supported-devices {
- margin-bottom: 9px;
- color: #777;
-}
-.supported-devices strong {
- display: block;
- font-size: 14px;
- line-height: 18px;
-}
-.supported-devices small {
- font-size: 12px;
-}
-
diff --git a/docs/index.html b/docs/index.html
index aafea76621..3908552bd0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -413,33 +413,55 @@
</div>
<div class="span8">
<h2>Supported devices</h2>
- <table class="supported-devices">
+ <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>Label</th>
+ <th>Layout width</th>
+ <th>Column width</th>
+ <th>Gutter width</th>
+ </tr>
+ </thead>
<tbody>
<tr>
- <td>
- <strong>Under 480px</strong>
- <small>Smartphones</small>
- </td>
- <td>
- <strong>480px to 768px</strong>
- <small>Portrait tablet</small>
- </td>
- <td>
- <strong>768px to 940px</strong>
- <small>Landscape tablet</small>
- </td>
- <td>
- <strong>940px and up</strong>
- <small>Default</small>
- </td>
- <td>
- <strong>1170px and up</strong>
- <small>Large screens</small>
- </td>
+ <td>Smartphones</td>
+ <td>480px and below</td>
+ <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+ </tr>
+ <tr>
+ <td>Portrait tablets</td>
+ <td>480px to 768px</td>
+ <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+ </tr>
+ <tr>
+ <td>Landscape tablets</td>
+ <td>768px to 940px</td>
+ <td>44px</td>
+ <td>20px</td>
+ </tr>
+ <tr>
+ <td>Default</td>
+ <td>940px and up</td>
+ <td>60px</td>
+ <td>20px</td>
+ </tr>
+ <tr>
+ <td>Large display</td>
+ <td>1210px and up</td>
+ <td>70px</td>
+ <td>30px</td>
</tr>
</tbody>
</table>
- <p>With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.</p>
+
+ <h3>What they do</h3>
+ <p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
+ <ul>
+ <li>Modify the width of column in our grid</li>
+ <li>Stack elements instead of float wherever necessary</li>
+ <li>Resize headings and text to be more appropriate for devices</li>
+ </ul>
</div>
</div>
@@ -448,7 +470,7 @@
<!-- Media query code -->
<h2>Using the media queries</h2>
<div class="row">
- <div class="span4">
+ <div class="span5">
<p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
<ol>
<li>Use the compiled responsive version, bootstrap.reponsive.css</li>
@@ -457,7 +479,7 @@
</ol>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
</div>
- <div class="span8">
+ <div class="span7">
<pre class="prettyprint linenums">
// Landscape phones and down
@media (max-width: 480px) { ... }
--
GitLab
From 8545fe97877dc275df40ab98d408f21ce9a362cf Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Wed, 19 Oct 2011 21:56:06 -0700
Subject: [PATCH 44/66] greatly simply js plugins - remove js api where
reasonable
---
docs/assets/js/application.js | 2 +-
js/bootstrap-accordion.js | 41 ++++++++++++++++++
js/bootstrap-alerts.js | 80 +++++-----------------------------
js/bootstrap-dropdown.js | 28 ++++--------
js/bootstrap-modal.js | 81 ++++++++++++-----------------------
js/bootstrap-popover.js | 1 -
js/bootstrap-scrollspy.js | 25 +----------
js/bootstrap-tabs.js | 10 +----
js/bootstrap-transitions.js | 45 +++++++++++++++++++
js/bootstrap-twipsy.js | 31 +-------------
10 files changed, 138 insertions(+), 206 deletions(-)
create mode 100644 js/bootstrap-accordion.js
create mode 100644 js/bootstrap-transitions.js
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 16a20e068e..74024caa1d 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -1,4 +1,4 @@
-$(document).ready(function(){
+$(function(){
// table sort example
// ==================
diff --git a/js/bootstrap-accordion.js b/js/bootstrap-accordion.js
new file mode 100644
index 0000000000..b88057691d
--- /dev/null
+++ b/js/bootstrap-accordion.js
@@ -0,0 +1,41 @@
+/* =============================================================
+ * bootstrap-accordion.js v1.3.0
+ * http://twitter.github.com/bootstrap/javascript.html#accordion
+ * =============================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+(function( $ ){
+
+ var Accordion = function ( element, options ) {}
+
+ Accordion.prototype = {}
+
+ /* ALERT PLUGIN DEFINITION
+ * ======================= */
+
+ $.fn.accordion = function ( options ) {
+
+ if ( options === true ) {
+ return this.data('accordion')
+ }
+
+ return this.each(function () {
+ new Accordion(this, options)
+ })
+ }
+
+
+})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js
index 4498270cb9..bac92deb8a 100644
--- a/js/bootstrap-alerts.js
+++ b/js/bootstrap-alerts.js
@@ -17,90 +17,32 @@
* limitations under the License.
* ========================================================== */
-
(function( $ ){
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
- * ======================================================= */
-
- var transitionEnd
-
- $(document).ready(function () {
-
- $.support.transition = (function () {
- var thisBody = document.body || document.documentElement
- , thisStyle = thisBody.style
- , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
- return support
- })()
-
- // set CSS transition event type
- if ( $.support.transition ) {
- transitionEnd = "TransitionEnd"
- if ( $.browser.webkit ) {
- transitionEnd = "webkitTransitionEnd"
- } else if ( $.browser.mozilla ) {
- transitionEnd = "transitionend"
- } else if ( $.browser.opera ) {
- transitionEnd = "oTransitionEnd"
- }
- }
-
- })
-
/* ALERT CLASS DEFINITION
* ====================== */
- var Alert = function ( content, selector ) {
- this.$element = $(content)
- .delegate('[data-alert-dismiss]', 'click', this.close)
- }
-
- Alert.prototype = {
-
- close: function (e) {
- var $element = $(this).parent('.alert-message')
+ function close(e) {
+ var $element = $(this).parent('.alert-message')
- e && e.preventDefault()
- e && e.stopPropagation()
+ e && e.preventDefault()
+ $element.removeClass('in')
- $element.removeClass('in')
-
- function removeElement () {
- $element.remove()
- }
-
- $.support.transition && $element.hasClass('fade') ?
- $element.bind(transitionEnd, removeElement) :
- removeElement()
+ function removeElement () {
+ $element.remove()
}
+ $.support.transition && $element.hasClass('fade') ?
+ $element.bind($.support.transition.end, removeElement) :
+ removeElement()
}
/* ALERT PLUGIN DEFINITION
* ======================= */
- $.fn.alert = function ( options ) {
-
- if ( options === true ) {
- return this.data('alert')
- }
-
- return this.each(function () {
- var $this = $(this)
-
- if ( typeof options == 'string' ) {
- return $this.data('alert')[options]()
- }
-
- $(this).data('alert', new Alert( this ))
-
- })
- }
-
- $(document).ready(function () {
- new Alert($('body'))
+ $(function () {
+ $('body').delegate('[data-alert-dismiss]', 'click', close)
})
})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index 6379653c56..6d9430b391 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -20,34 +20,22 @@
(function( $ ){
- var d = '[data-dropdown]'
-
- /* DROPDOWN PLUGIN DEFINITION
- * ========================== */
-
- $.fn.dropdown = function () {
- return this.each(function () {
- $(this).delegate(d, 'click', function (e) {
- var li = $(this).parent('li')
- , isActive = li.hasClass('open')
-
- clearMenus()
- !isActive && li.toggleClass('open')
- return false
- })
- })
- }
-
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
function clearMenus() {
- $(d).parent('li').removeClass('open')
+ $(selector).parent('li').removeClass('open')
}
$(function () {
$('html').bind("click", clearMenus)
- $('body').dropdown()
+ $('body').delegate('[data-dropdown]', 'click', function (e) {
+ var li = $(this).parent('li')
+ , isActive = li.hasClass('open')
+ clearMenus()
+ !isActive && li.toggleClass('open')
+ return false
+ })
})
})( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 60b83d58fd..02f8b23827 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -20,35 +20,6 @@
!function( $ ){
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
- * ======================================================= */
-
- var transitionEnd
-
- $(document).ready(function () {
-
- $.support.transition = (function () {
- var thisBody = document.body || document.documentElement
- , thisStyle = thisBody.style
- , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
- return support
- })()
-
- // set CSS transition event type
- if ( $.support.transition ) {
- transitionEnd = "TransitionEnd"
- if ( $.browser.webkit ) {
- transitionEnd = "webkitTransitionEnd"
- } else if ( $.browser.mozilla ) {
- transitionEnd = "transitionend"
- } else if ( $.browser.opera ) {
- transitionEnd = "oTransitionEnd"
- }
- }
-
- })
-
-
/* MODAL PUBLIC CLASS DEFINITION
* ============================= */
@@ -76,25 +47,7 @@
this.$element.trigger('show')
escape.call(this)
- backdrop.call(this, function () {
- var transition = $.support.transition && that.$element.hasClass('fade')
-
- that.$element
- .appendTo(document.body)
- .show()
-
- if (transition) {
- that.$element[0].offsetWidth // force reflow
- }
-
- that.$element
- .addClass('in')
-
- transition ?
- that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
- that.$element.trigger('shown')
-
- })
+ backdrop.call(this)
return this
}
@@ -124,7 +77,7 @@
}
$.support.transition && this.$element.hasClass('fade') ?
- this.$element.one(transitionEnd, removeElement) :
+ this.$element.one($.support.transition.end, removeElement) :
removeElement()
return this
@@ -136,9 +89,11 @@
/* MODAL PRIVATE METHODS
* ===================== */
- function backdrop ( callback ) {
+ function backdrop () {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
+ , callback = $.proxy(show, this)
+
if ( this.isShown && this.settings.backdrop ) {
var doAnimate = $.support.transition && animate
@@ -156,7 +111,7 @@
this.$backdrop.addClass('in')
doAnimate ?
- this.$backdrop.one(transitionEnd, callback) :
+ this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if ( !this.isShown && this.$backdrop ) {
@@ -168,13 +123,33 @@
}
$.support.transition && this.$element.hasClass('fade')?
- this.$backdrop.one(transitionEnd, removeElement) :
+ this.$backdrop.one($.support.transition.end, removeElement) :
removeElement()
} else if ( callback ) {
callback()
}
}
+ function show() {
+ var transition = $.support.transition && that.$element.hasClass('fade')
+ , that = this
+
+ this.$element
+ .appendTo(document.body)
+ .show()
+
+ if (transition) {
+ this.$element[0].offsetWidth // force reflow
+ }
+
+ this.$element
+ .addClass('in')
+
+ transition ?
+ this.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
+ this.$element.trigger('shown')
+ }
+
function escape() {
var that = this
if ( this.isShown && this.settings.keyboard ) {
@@ -233,7 +208,7 @@
/* MODAL DATA-IMPLEMENTATION
* ========================= */
- $(document).ready(function () {
+ $(function () {
$('body').delegate('[data-controls-modal]', 'click', function (e) {
e.preventDefault()
var $this = $(this).data('show', true)
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index 1cf4b8917a..22db98fd9b 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -62,7 +62,6 @@
})
-
/* POPOVER PLUGIN DEFINITION
* ======================= */
diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js
index 4b146e5809..23bdf59e9c 100644
--- a/js/bootstrap-scrollspy.js
+++ b/js/bootstrap-scrollspy.js
@@ -75,30 +75,7 @@
}
- /* SCROLLSPY PLUGIN DEFINITION
- * =========================== */
-
- $.fn.scrollSpy = function( options ) {
- var scrollspy = this.data('scrollspy')
-
- if (!scrollspy) {
- return this.each(function () {
- $(this).data('scrollspy', new ScrollSpy( this, options ))
- })
- }
-
- if ( options === true ) {
- return scrollspy
- }
-
- if ( typeof options == 'string' ) {
- scrollspy[options]()
- }
-
- return this
- }
-
- $(document).ready(function () {
+ $(function () {
$('body').scrollSpy('[data-scrollspy] li > a')
})
diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
index b94adfc25d..6ee80429c7 100644
--- a/js/bootstrap-tabs.js
+++ b/js/bootstrap-tabs.js
@@ -55,14 +55,8 @@
/* TABS/PILLS PLUGIN DEFINITION
* ============================ */
- $.fn.tabs = $.fn.pills = function ( selector ) {
- return this.each(function () {
- $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
- })
- }
-
- $(document).ready(function () {
- $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
+ $(function () {
+ $('body').delegate('ul[data-tabs] > li > a, ul[data-pills] > li > a', 'click', tab)
})
}( window.jQuery || window.ender );
\ No newline at end of file
diff --git a/js/bootstrap-transitions.js b/js/bootstrap-transitions.js
new file mode 100644
index 0000000000..49b5338a8f
--- /dev/null
+++ b/js/bootstrap-transitions.js
@@ -0,0 +1,45 @@
+/* ===================================================
+ * bootstrap-transitions.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html
+ * ===================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+$(function () {
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+ * ======================================================= */
+
+ $.support.transition = (function () {
+ var thisBody = document.body || document.documentElement
+ , thisStyle = thisBody.style
+ , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+
+ return support && {
+ end: (function () {
+ var transitionEnd = "TransitionEnd"
+ if ( $.browser.webkit ) {
+ transitionEnd = "webkitTransitionEnd"
+ } else if ( $.browser.mozilla ) {
+ transitionEnd = "transitionend"
+ } else if ( $.browser.opera ) {
+ transitionEnd = "oTransitionEnd"
+ }
+ return transitionEnd
+ })()
+ }
+ })()
+
+})
\ No newline at end of file
diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js
index 0144c48158..c44395e08e 100644
--- a/js/bootstrap-twipsy.js
+++ b/js/bootstrap-twipsy.js
@@ -21,35 +21,6 @@
!function( $ ) {
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
- * ======================================================= */
-
- var transitionEnd
-
- $(document).ready(function () {
-
- $.support.transition = (function () {
- var thisBody = document.body || document.documentElement
- , thisStyle = thisBody.style
- , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
- return support
- })()
-
- // set CSS transition event type
- if ( $.support.transition ) {
- transitionEnd = "TransitionEnd"
- if ( $.browser.webkit ) {
- transitionEnd = "webkitTransitionEnd"
- } else if ( $.browser.mozilla ) {
- transitionEnd = "transitionend"
- } else if ( $.browser.opera ) {
- transitionEnd = "oTransitionEnd"
- }
- }
-
- })
-
-
/* TWIPSY PUBLIC CLASS DEFINITION
* ============================== */
@@ -131,7 +102,7 @@
}
$.support.transition && this.$tip.hasClass('fade') ?
- $tip.bind(transitionEnd, removeElement) :
+ $tip.bind($.support.transition.end, removeElement) :
removeElement()
}
--
GitLab
From 523e02f7df3bb706654b43cf604e61c9396212e1 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Wed, 19 Oct 2011 23:12:50 -0700
Subject: [PATCH 45/66] fix scrollspy simplify stuff more - break everything.
---
docs/index.html | 65 ++++++++++++++++++++-------------------
js/bootstrap-accordion.js | 2 +-
js/bootstrap-alerts.js | 2 +-
js/bootstrap-dropdown.js | 5 +--
js/bootstrap-modal.js | 2 +-
js/bootstrap-popover.js | 2 +-
js/bootstrap-scrollspy.js | 33 ++++++++++++--------
js/bootstrap-tabs.js | 21 +++++++++----
js/bootstrap-twipsy.js | 2 +-
js/tests/index.html | 1 +
10 files changed, 78 insertions(+), 57 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index aafea76621..255d1684fb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -53,8 +53,8 @@
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
<ul class="dropdown-menu">
- <li><a href="#navigation">Navigation</a></li>
<li><a href="#media">Media</a></li>
+ <li><a href="#navigation">Navigation</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#popovers">Popovers</a></li>
<li><a href="#autocomplete">Autocomplete</a></li>
@@ -147,36 +147,38 @@
<!-- About Bootstrap
================================================== -->
- <div class="row">
- <div class="span4">
- <h2>Built for and by nerds</h2>
- <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
- <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
- </div>
- <div class="span4">
- <h2>Cross-everything</h2>
- <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
- <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
- <ul>
- <li>Latest Safari</li>
- <li>Latest Google Chrome</li>
- <li>Firefox 4+</li>
- <li>Internet Explorer 7+</li>
- <li>Opera 11</li>
- </ul>
- </div>
- <div class="span4">
- <h2>What's included</h2>
- <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
- <ul>
- <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
- <li>All original .less files</li>
- <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
- <li>Complete styleguide documentation</li>
- <li>Three example pages with different layouts</li>
- </ul>
- </div>
- </div><!-- /row -->
+ <section id="about">
+ <div class="row">
+ <div class="span4">
+ <h2>Built for and by nerds</h2>
+ <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
+ <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
+ </div>
+ <div class="span4">
+ <h2>Cross-everything</h2>
+ <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
+ <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
+ <ul>
+ <li>Latest Safari</li>
+ <li>Latest Google Chrome</li>
+ <li>Firefox 4+</li>
+ <li>Internet Explorer 7+</li>
+ <li>Opera 11</li>
+ </ul>
+ </div>
+ <div class="span4">
+ <h2>What's included</h2>
+ <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
+ <ul>
+ <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
+ <li>All original .less files</li>
+ <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
+ <li>Complete styleguide documentation</li>
+ <li>Three example pages with different layouts</li>
+ </ul>
+ </div>
+ </div><!-- /row -->
+ </section>
<h3>Quick-start examples</h3>
<p>Need some quick templates? Check out these basic examples we've put together:</p>
@@ -2162,6 +2164,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
diff --git a/js/bootstrap-accordion.js b/js/bootstrap-accordion.js
index b88057691d..9a24b5ddfc 100644
--- a/js/bootstrap-accordion.js
+++ b/js/bootstrap-accordion.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-accordion.js v1.3.0
+ * bootstrap-accordion.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#accordion
* =============================================================
* Copyright 2011 Twitter, Inc.
diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js
index bac92deb8a..4f1acfa3d0 100644
--- a/js/bootstrap-alerts.js
+++ b/js/bootstrap-alerts.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-alerts.js v1.3.0
+ * bootstrap-alerts.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2011 Twitter, Inc.
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index 6d9430b391..d12fe48cb6 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -1,5 +1,5 @@
/* ============================================================
- * bootstrap-dropdown.js v1.3.0
+ * bootstrap-dropdown.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#dropdown
* ============================================================
* Copyright 2011 Twitter, Inc.
@@ -22,6 +22,7 @@
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
+ var selector = '[data-dropdown]'
function clearMenus() {
$(selector).parent('li').removeClass('open')
@@ -29,7 +30,7 @@
$(function () {
$('html').bind("click", clearMenus)
- $('body').delegate('[data-dropdown]', 'click', function (e) {
+ $('body').delegate(selector, 'click', function (e) {
var li = $(this).parent('li')
, isActive = li.hasClass('open')
clearMenus()
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 02f8b23827..984b091d61 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -1,5 +1,5 @@
/* =========================================================
- * bootstrap-modal.js v1.3.0
+ * bootstrap-modal.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#modal
* =========================================================
* Copyright 2011 Twitter, Inc.
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index 22db98fd9b..3fdde19b51 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -1,5 +1,5 @@
/* ===========================================================
- * bootstrap-popover.js v1.3.0
+ * bootstrap-popover.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#popover
* ===========================================================
* Copyright 2011 Twitter, Inc.
diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js
index 23bdf59e9c..1269d91ecb 100644
--- a/js/bootstrap-scrollspy.js
+++ b/js/bootstrap-scrollspy.js
@@ -1,5 +1,5 @@
/* =============================================================
- * bootstrap-scrollspy.js v1.3.0
+ * bootstrap-scrollspy.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2011 Twitter, Inc.
@@ -22,14 +22,14 @@
var $window = $(window)
- function ScrollSpy( topbar, selector ) {
- var processScroll = $.proxy(this.processScroll, this)
- this.$topbar = $(topbar)
- this.selector = selector || 'li > a'
+ function ScrollSpy() {
+ var process = $.proxy(this.process, this)
+ this.$topbar = $('body')
+ this.selector = '[data-scrollspy] li > a'
this.refresh()
- this.$topbar.delegate(this.selector, 'click', processScroll)
- $window.scroll(processScroll)
- this.processScroll()
+ this.$topbar.delegate(this.selector, 'click', process)
+ $window.scroll(process)
+ this.process()
}
ScrollSpy.prototype = {
@@ -45,7 +45,7 @@
})
}
- , processScroll: function () {
+ , process: function () {
var scrollTop = $window.scrollTop() + 10
, offsets = this.offsets
, targets = this.targets
@@ -56,27 +56,34 @@
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
- && this.activateButton( targets[i] )
+ && this.activate( targets[i] )
}
}
- , activateButton: function (target) {
+ , activate: function (target) {
+ var active
+
this.activeTarget = target
this.$topbar
.find(this.selector).parent('.active')
.removeClass('active')
- this.$topbar
+ active = this.$topbar
.find(this.selector + '[href="' + target + '"]')
.parent('li')
.addClass('active')
+
+ if ( active.parent('.dropdown-menu') ) {
+ active.closest('li.dropdown').addClass('active')
+ }
+
}
}
$(function () {
- $('body').scrollSpy('[data-scrollspy] li > a')
+ new ScrollSpy()
})
}( window.jQuery || window.ender )
\ No newline at end of file
diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
index 6ee80429c7..86bd4784f3 100644
--- a/js/bootstrap-tabs.js
+++ b/js/bootstrap-tabs.js
@@ -1,5 +1,5 @@
/* ========================================================
- * bootstrap-tabs.js v1.3.0
+ * bootstrap-tabs.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2011 Twitter, Inc.
@@ -21,24 +21,33 @@
!function( $ ){
function activate ( element, container ) {
- container.find('> .active').removeClass('active')
+ container
+ .find('> .active')
+ .removeClass('active')
+ .find('> .dropdown-menu > .active')
+ .removeClass('active')
+
element.addClass('active')
+
+ if ( element.parent('.dropdown-menu') ) {
+ element.closest('li.dropdown').addClass('active')
+ }
}
function tab( e ) {
var $this = $(this)
- , $ul = $this.closest('ul')
+ , $ul = $this.closest('ul:not(.dropdown-menu)')
, href = $this.attr('href')
, previous
- if (/^#\w+/.test(href)) {
+ if ( /^#\w+/.test(href) ) {
e.preventDefault()
- if ($this.parent('li').hasClass('active')) {
+ if ( $this.parent('li').hasClass('active') ) {
return
}
- previous = $ul.find('.active a')[0]
+ previous = $ul.find('.active a').last()[0]
$href = $(href)
activate($this.parent('li'), $ul)
diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js
index c44395e08e..7c195fbc78 100644
--- a/js/bootstrap-twipsy.js
+++ b/js/bootstrap-twipsy.js
@@ -1,5 +1,5 @@
/* ==========================================================
- * bootstrap-twipsy.js v1.3.0
+ * bootstrap-twipsy.js v2.0.0
* http://twitter.github.com/bootstrap/javascript.html#twipsy
* Adapted from the original jQuery.tipsy by Jason Frame
* ==========================================================
diff --git a/js/tests/index.html b/js/tests/index.html
index 2ca94102ad..617fcd92ab 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -11,6 +11,7 @@
<script src="vendor/qunit.js"></script>
<!-- plugin sources -->
+ <script src="../../js/bootstrap-transitions.js"></script>
<script src="../../js/bootstrap-alerts.js"></script>
<script src="../../js/bootstrap-dropdown.js"></script>
<script src="../../js/bootstrap-modal.js"></script>
--
GitLab
From 2c0a60a777d85c9223abf245be56308b8c62804c Mon Sep 17 00:00:00 2001
From: Jeff Adams <jeff@tinyfly.com>
Date: Fri, 21 Oct 2011 11:56:13 -0500
Subject: [PATCH 46/66] remove negative margin on .row so we don't hang off the
left edge of the screen
---
bootstrap.css | 8 +++++++-
bootstrap.min.css | 2 +-
lib/responsive.less | 12 ++++++++++++
3 files changed, 20 insertions(+), 2 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 0f6d58ae06..7eef72feef 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: Mon Oct 17 23:44:56 PDT 2011
+ * Date: Fri Oct 21 11:54:44 CDT 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).
@@ -2268,6 +2268,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
width: auto;
padding: 0 10px;
}
+ .row {
+ margin-left: 0;
+ }
[class*="span"] {
float: none;
display: block;
@@ -2299,6 +2302,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
width: auto;
padding: 0 10px;
}
+ .row {
+ margin-left: 0;
+ }
[class*="span"] {
float: none;
display: block;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 31912f2933..e35f0d2234 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -321,4 +321,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 (max-width: 480px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [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;} .row{margin-left:0;} [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 a1a33164fe..1a84245a1d 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -12,6 +12,12 @@
width: auto;
padding: 0 10px;
}
+
+ // remove negative margin so we don't hang off the screen
+ .row {
+ margin-left: 0;
+ }
+
// Make all columns even
[class*="span"] {
float: none;
@@ -57,6 +63,12 @@
width: auto;
padding: 0 10px;
}
+
+ // remove negative margin so we don't hang off the screen
+ .row {
+ margin-left: 0;
+ }
+
// Make all columns even
[class*="span"] {
float: none;
--
GitLab
From d4675bf4ef8019fc80e3b6816d3597c07cde81df Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 22 Oct 2011 15:49:42 -0700
Subject: [PATCH 47/66] updating the docs to include more responsive fixes,
adding rows to the responsive changes as well to undo negative margin
---
bootstrap.css | 8 +++++++-
bootstrap.min.css | 2 +-
docs/assets/css/docs.css | 16 ++++++++++++----
lib/responsive.less | 8 ++++++++
4 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 0f6d58ae06..256ab096bb 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: Mon Oct 17 23:44:56 PDT 2011
+ * Date: Sat Oct 22 15:49:12 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).
@@ -2268,6 +2268,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
width: auto;
padding: 0 10px;
}
+ .row {
+ margin-left: 0;
+ }
[class*="span"] {
float: none;
display: block;
@@ -2299,6 +2302,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
width: auto;
padding: 0 10px;
}
+ .row {
+ margin-left: 0;
+ }
[class*="span"] {
float: none;
display: block;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 31912f2933..e35f0d2234 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -321,4 +321,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 (max-width: 480px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [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;} .row{margin-left:0;} [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/docs/assets/css/docs.css b/docs/assets/css/docs.css
index c1c43b1d88..b618c44b87 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -340,9 +340,17 @@ h2 + table {
}
}
-@media (min-width: 768px) and (max-width: 900px) {
- .footer,
- .jumbotron {
- min-width: 748px;
+@media (min-width: 768px) and (max-width: 940px) {
+
+ /* Scale down the jumbotron content */
+ .jumbotron h1 {
+ font-size: 72px;
+ }
+
+ /* Provide enough space on right-hand side for benefits list */
+ .jumbotron h1,
+ .jumbotron p {
+ margin-right: 40%;
}
}
+
diff --git a/lib/responsive.less b/lib/responsive.less
index a1a33164fe..6cacccad99 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -12,6 +12,10 @@
width: auto;
padding: 0 10px;
}
+ // Undo negative margin on rows
+ .row {
+ margin-left: 0;
+ }
// Make all columns even
[class*="span"] {
float: none;
@@ -57,6 +61,10 @@
width: auto;
padding: 0 10px;
}
+ // Undo negative margin on rows
+ .row {
+ margin-left: 0;
+ }
// Make all columns even
[class*="span"] {
float: none;
--
GitLab
From b4c0d2a6b2fe1bc92c3635cda71b63ee08a05be4 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 22 Oct 2011 22:49:37 -0700
Subject: [PATCH 48/66] tweaks to the responsive layout to improve type
---
bootstrap.css | 12 ++++--------
bootstrap.min.css | 4 ++--
docs/assets/css/docs.css | 30 +++++++++++++++++++++++++++---
docs/index.html | 6 +++---
lib/responsive.less | 2 +-
lib/type.less | 7 +++----
6 files changed, 40 insertions(+), 21 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index aebabeecca..c055a79c93 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,11 +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.
-<<<<<<< HEAD
- * Date: Sat Oct 22 15:49:12 PDT 2011
-=======
- * Date: Fri Oct 21 11:54:44 CDT 2011
->>>>>>> 2e09ffe3832106fab60dc01cc3159c13029bdf68
+ * Date: Sat Oct 22 22:49:01 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).
@@ -520,7 +516,7 @@ pre {
background-color: #f5f5f5;
display: block;
padding: 8.5px;
- margin: 0 0 18px;
+ margin: 0 0 9px;
line-height: 18px;
font-size: 12px;
border: 1px solid #ccc;
@@ -530,7 +526,7 @@ pre {
border-radius: 3px;
white-space: pre;
white-space: pre-wrap;
- word-wrap: break-word;
+ word-break: break-all;
}
/* Forms.less
* Base styles for various input types, form layouts, and states
@@ -2270,7 +2266,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
@media (max-width: 480px) {
.container {
width: auto;
- padding: 0 10px;
+ padding: 0 15px;
}
.row {
margin-left: 0;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index e35f0d2234..0aa8892072 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -89,7 +89,7 @@ blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;c
address{display:block;line-height:18px;margin-bottom:18px;}
code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
-pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
+pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}
form{margin-bottom:18px;}
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
@@ -321,4 +321,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;} .row{margin-left:0;} [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;} .row{margin-left:0;} [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 (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [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;} .row{margin-left:0;} [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/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b618c44b87..0a31ac9984 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -21,6 +21,8 @@ section {
/* Tweak topbar brand link to be super sleek
-------------------------------------------------- */
body > .navbar-fixed .brand {
+ padding-right: 0;
+ padding-left: 0;
float: right;
font-weight: bold;
color: #000;
@@ -316,16 +318,24 @@ h2 + table {
-------------------------------------------------- */
@media (max-width: 480px) {
+ /* Hide the nav for now */
body > .navbar-fixed .nav {
display: none;
}
- .large-bird {
- display: none;
+ /* Change up some type stuff */
+ h1 small {
+ display: block;
+ line-height: 20px;
}
+ /* Adjust the jumbotron */
+ .jumbotron h1,
+ .jumbotron p {
+ margin-right: 0;
+ }
.jumbotron h1 {
- font-size: 36px;
+ font-size: 45px;
margin-right: 0;
}
.jumbotron p {
@@ -338,6 +348,20 @@ h2 + table {
width: auto;
margin: 36px 0;
}
+ .jumbotron .btn {
+ font-size: 18px;
+ padding: 10px 14px;
+ }
+
+ /* Popovers */
+ .large-bird {
+ display: none;
+ }
+ .popover-well .popover-wrapper {
+ margin-left: 0;
+ }
+
+
}
@media (min-width: 768px) and (max-width: 940px) {
diff --git a/docs/index.html b/docs/index.html
index 49e6d04310..2cb5eb8e40 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -630,7 +630,7 @@
<p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
- <small>Dr. Julius Hibbert</small>
+ <small>Someone famous</small>
</blockquote>
</div>
<div class="span7">
@@ -2140,7 +2140,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<td>Javascript</td>
<td>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
-<pre class="prettyprint linenums">
+<pre class="prettyprint">
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
</pre>
@@ -2156,7 +2156,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</td>
</tr>
<tr>
- <td>Less Mac app</td>
+ <td>Mac app</td>
<td>
<p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
<p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
diff --git a/lib/responsive.less b/lib/responsive.less
index 6cacccad99..75c33b1a8e 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -10,7 +10,7 @@
// Remove width from containers
.container {
width: auto;
- padding: 0 10px;
+ padding: 0 15px;
}
// Undo negative margin on rows
.row {
diff --git a/lib/type.less b/lib/type.less
index a490bf5fa1..d092b203da 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -24,7 +24,7 @@ p {
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: @grayDark;
- text-rendering: optimizelegibility;
+ text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
color: @grayLight;
}
@@ -185,7 +185,7 @@ pre {
background-color: #f5f5f5;
display: block;
padding: (@baseLineHeight - 1) / 2;
- margin: 0 0 @baseLineHeight;
+ margin: 0 0 @baseLineHeight / 2;
line-height: @baseLineHeight;
font-size: 12px;
border: 1px solid #ccc;
@@ -193,6 +193,5 @@ pre {
.border-radius(3px);
white-space: pre;
white-space: pre-wrap;
- word-wrap: break-word;
-
+ word-break: break-all;
}
\ No newline at end of file
--
GitLab
From e616026d678239104b93cafca9a77ea74a4c0ddf Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Wed, 26 Oct 2011 21:04:14 -0700
Subject: [PATCH 49/66] update to docs to cleanup pagination for smartphones,
fix some pagination inconsistencies
---
bootstrap.css | 8 +++-----
bootstrap.min.css | 4 ++--
docs/assets/css/docs.css | 24 ++++++++++++++++++++++++
docs/index.html | 21 ++++++---------------
lib/type.less | 4 ++--
5 files changed, 37 insertions(+), 24 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index c055a79c93..0baa88d110 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: Sat Oct 22 22:49:01 PDT 2011
+ * Date: Wed Oct 26 21:03:54 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).
@@ -479,15 +479,13 @@ blockquote {
padding-left: 15px;
}
blockquote p {
- font-size: 14px;
+ font-size: 16px;
font-weight: 300;
- line-height: 18px;
+ line-height: 22.5px;
margin-bottom: 0;
}
blockquote small {
display: block;
- font-size: 12px;
- font-weight: 300;
line-height: 18px;
color: #bfbfbf;
}
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 0aa8892072..b443f02e39 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -84,8 +84,8 @@ strong{font-style:inherit;font-weight:bold;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
.muted{color:#bfbfbf;}
abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
-blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
-blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
+blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:16px;font-weight:300;line-height:22.5px;margin-bottom:0;}
+blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0a31ac9984..59c64e4a7b 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -328,10 +328,18 @@ h2 + table {
display: block;
line-height: 20px;
}
+ /* More space between sections */
+ h2 {
+ margin-top: 27px;
+ }
+ h3 {
+ margin-top: 18px;
+ }
/* Adjust the jumbotron */
.jumbotron h1,
.jumbotron p {
+ text-align: center;
margin-right: 0;
}
.jumbotron h1 {
@@ -349,8 +357,15 @@ h2 + table {
margin: 36px 0;
}
.jumbotron .btn {
+ display: block;
font-size: 18px;
padding: 10px 14px;
+ margin: 0 auto 10px;
+ }
+
+ /* Don't space out quick links so much */
+ .quick-links {
+ margin: 40px 0 0;
}
/* Popovers */
@@ -361,6 +376,15 @@ h2 + table {
margin-left: 0;
}
+ /* Space out the show-grid examples */
+ .show-grid [class*="span"] {
+ margin-bottom: 5px;
+ }
+
+ /* Unfloat the back to top link in footer */
+ .footer .pull-right {
+ float: none;
+ }
}
diff --git a/docs/index.html b/docs/index.html
index 2cb5eb8e40..cf3b8b8052 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1715,38 +1715,29 @@
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="next"><a href="#">Next »</a></li>
+ <li class="next"><a href="#">Next →</a></li>
</ul>
</div>
<div class="pagination">
<ul>
- <li class="prev"><a href="#">← Previous</a></li>
+ <li class="prev"><a href="#">←</a></li>
<li class="active"><a href="#">10</a></li>
<li><a href="#">11</a></li>
- <li><a href="#">12</a></li>
<li class="disabled"><a href="#">…</a></li>
- <li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
- <li class="next"><a href="#">Next »</a></li>
+ <li class="next"><a href="#">→</a></li>
</ul>
</div>
<div class="pagination">
<ul>
- <li class="prev"><a href="#">← Previous</a></li>
+ <li class="prev"><a href="#">←</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
- <li><a href="#">12</a></li>
+ <li class="active"><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
- <li class="active"><a href="#">15</a></li>
- <li><a href="#">16</a></li>
- <li><a href="#">17</a></li>
- <li><a href="#">18</a></li>
- <li><a href="#">19</a></li>
- <li><a href="#">20</a></li>
- <li class="next"><a href="#">Next »</a></li>
+ <li class="next"><a href="#">→</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
diff --git a/lib/type.less b/lib/type.less
index d092b203da..7f8044cd81 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -149,12 +149,12 @@ blockquote {
border-left: 5px solid #eee;
padding-left: 15px;
p {
- #font > .shorthand(300,14px,@baseLineHeight);
+ #font > .shorthand(300,16px,@baseLineHeight * 1.25);
margin-bottom: 0;
}
small {
display: block;
- #font > .shorthand(300,12px,@baseLineHeight);
+ line-height: @baseLineHeight;
color: @grayLight;
&:before {
content: '\2014 \00A0';
--
GitLab
From 648c4689273647c321dd6e3979d910282e9a9339 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Wed, 26 Oct 2011 23:11:56 -0700
Subject: [PATCH 50/66] breaking down the main page into subpages for easier,
more comprehensive documentation
---
docs/assets/css/docs.css | 11 +-
docs/base-css.html | 885 ++++++++++++++++
docs/components.html | 705 ++++++++++++
docs/index.html | 2181 ++------------------------------------
docs/javascript.html | 120 ++-
docs/less.html | 242 +++++
docs/scaffolding.html | 383 +++++++
lib/mixins.less | 7 +
8 files changed, 2426 insertions(+), 2108 deletions(-)
create mode 100644 docs/base-css.html
create mode 100644 docs/components.html
create mode 100644 docs/less.html
create mode 100644 docs/scaffolding.html
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 59c64e4a7b..8ed81e713a 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -14,9 +14,6 @@ body {
background-image: url(../img/grid-18px-masked.png);
background-repeat: repeat-x;
}
-section {
- padding-top: 60px;
-}
/* Tweak topbar brand link to be super sleek
-------------------------------------------------- */
@@ -40,7 +37,7 @@ body > .navbar-fixed .brand:hover {
}
.jumbotron h1 {
margin-right: 40%;
- margin-bottom: 10px;
+ margin-bottom: 9px;
font-size: 90px;
letter-spacing: -1px;
line-height: 1;
@@ -100,15 +97,15 @@ body > .navbar-fixed .brand:hover {
------------------------- */
/* supporting docs pages */
.subhead {
- padding-bottom: 18px;
- border-bottom: 3px solid #eee;
+ padding-bottom: 14px;
+ border-bottom: 3px solid #e5e5e5;
}
.subhead h1,
.subhead p {
margin-right: 0;
}
.subhead h1 {
- font-size: 40px;
+ font-size: 45px;
}
diff --git a/docs/base-css.html b/docs/base-css.html
new file mode 100644
index 0000000000..e3b3782c0a
--- /dev/null
+++ b/docs/base-css.html
@@ -0,0 +1,885 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li class="active"><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Base CSS</h1>
+ <p class="lead">The core typography, form, and table styles of Bootstrap</p>
+ </header>
+
+
+<!-- Typography
+================================================== -->
+<section id="typography">
+ <div class="page-header">
+ <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
+ </div>
+
+ <h2>Headings & body copy</h2>
+
+ <!-- Headings & Paragraph Copy -->
+ <div class="row">
+ <div class="span4">
+ <h3>Typographic scale</h3>
+ <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
+ <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
+ </div>
+ <div class="span4">
+ <h3>Example body text</h3>
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
+ </div>
+ <div class="span4">
+ <div class="well">
+ <h1>h1. Heading 1</h1>
+ <h2>h2. Heading 2</h2>
+ <h3>h3. Heading 3</h3>
+ <h4>h4. Heading 4</h4>
+ <h5>h5. Heading 5</h5>
+ <h6>h6. Heading 6</h6>
+ </div>
+ </div>
+ </div>
+
+ <!-- Misc Elements -->
+ <h2>Emphasis, address, and abbreviation</h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>Element</th>
+ <th>Description</th>
+ <th>Usage</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code><strong></code>
+ </td>
+ <td>
+ For emphasizing a snippet of text with <strong>important</strong>
+ </td>
+ <td>
+ <span class="muted">None</span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><em></code>
+ </td>
+ <td>
+ For emphasizing a snippet of text with <em>stress</em>
+ </td>
+ <td>
+ <span class="muted">None</span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><abbr></code>
+ </td>
+ <td>
+ Wraps abbreviations and acronyms to show the expanded version on hover
+ </td>
+ <td>
+ Include optional <code>title</code> for expanded text
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><address></code>
+ </td>
+ <td>
+ For contact information for its nearest ancestor or the entire body of work
+ </td>
+ <td>
+ Preserve formatting by ending all lines with <code><br></code>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <div class="row">
+ <div class="span4">
+ <h3>Using emphasis</h3>
+ <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
+ <p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
+ </div>
+ <div class="span4">
+ <h3>Example addresses</h3>
+ <p>Here are two examples of how the <code><address></code> tag can be used:</p>
+ <address>
+ <strong>Twitter, Inc.</strong><br>
+ 795 Folsom Ave, Suite 600<br>
+ San Francisco, CA 94107<br>
+ <abbr title="Phone">P:</abbr> (123) 456-7890
+ </address>
+ <address>
+ <strong>Full Name</strong><br>
+ <a mailto="#">first.last@gmail.com</a>
+ </address>
+ </div>
+ <div class="span4">
+ <h3>Example abbreviations</h3>
+ <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
+ <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
+ <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+ </div>
+ </div>
+
+
+ <!-- Blockquotes -->
+ <h2>Blockquotes</h2>
+ <div class="row">
+ <div class="span5">
+ <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+ <small>Someone famous</small>
+ </blockquote>
+ </div>
+ <div class="span7">
+<pre class="prettyprint linenums">
+<blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+ <small>Dr. Julius Hibbert</small>
+</blockquote>
+</pre>
+ </div>
+ </div>
+
+ <!-- Lists -->
+ <h2>Lists</h2>
+ <div class="row">
+ <div class="span3">
+ <h4>Unordered <code><ul></code></h4>
+ <ul>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h4>Unstyled <code><ul.unstyled></code></h4>
+ <ul class="unstyled">
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ul>
+ </div>
+ <div class="span3">
+ <h4>Ordered <code><ol></code></h4>
+ <ol>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit</li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ol>
+ </div>
+ <div class="span3">
+ <h4>Description <code><dl></code></h4>
+ <dl>
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+ </dl>
+ </div>
+ </div><!-- /row -->
+
+
+ <!-- Code -->
+
+ <h2>Code <small>Inline and block</small></h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th style="width: 190px;">Element</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code><code></code></td>
+ <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td>
+ </tr>
+ <tr>
+ <td><code><pre></code></td>
+ <td>
+<pre><div>
+ <h1>Heading</h1>
+ <p>Something right here...</p>
+</div></pre>
+ <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code><pre class="prettyprint"></code></td>
+ <td>
+ <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
+<pre class="prettyprint"><div>
+ <h1>Heading</h1>
+ <p>Something right here...</p>
+</div></pre>
+<pre class="prettyprint linenums"><div>
+ <h1>Heading</h1>
+ <p>Something right here...</p>
+</div></pre>
+ <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- Labels -->
+ <h2>Inline labels <small>for special attention</small></h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th style="width: 190px;">Labels</th>
+ <th>Markup</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <span class="label">Default</span>
+ </td>
+ <td>
+ <code><span class="label">Default</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label success">New</span>
+ </td>
+ <td>
+ <code><span class="label success">New</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label warning">Warning</span>
+ </td>
+ <td>
+ <code><span class="label warning">Warning</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label important">Important</span>
+ </td>
+ <td>
+ <code><span class="label important">Important</span></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span class="label notice">Notice</span>
+ </td>
+ <td>
+ <code><span class="label notice">Notice</span></code>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+</section>
+
+
+
+<!-- Tables
+================================================== -->
+<section id="tables">
+ <div class="page-header">
+ <h1>Tables <small>For, you guessed it, tabular data</small></h1>
+ </div>
+
+ <h2>Table markup</h2>
+ <div class="row">
+ <div class="span8">
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>Tag</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code><table></code>
+ </td>
+ <td>
+ Wrapping element for displaying data in a tabular format
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><thead></code>
+ </td>
+ <td>
+ Container element for table header rows (<code><tr></code>) to label table columns
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><tbody></code>
+ </td>
+ <td>
+ Container element for table rows (<code><tr></code>) in the body of the table
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><tr></code>
+ </td>
+ <td>
+ Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><td></code>
+ </td>
+ <td>
+ Default table cell
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><th></code>
+ </td>
+ <td>
+ Special table cell for column (or row, depending on scope and placement) labels<br>
+ Must be used within a <code><thead></code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><caption></code>
+ </td>
+ <td>
+ Description or summary of what the table holds, especially useful for screen readers
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="span4">
+<pre class="prettyprint linenums">
+<table>
+ <thead>
+ <tr>
+ <th>...</th>
+ <th>...</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ </tr>
+ </tbody>
+</table>
+</pre>
+ </div>
+ </div>
+
+ <h2>Example tables</h2>
+ <h3>1. Default table styles</h3>
+ <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
+ <table>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+<table>
+ ...
+</table></pre>
+ <h3>2. Zebra-striped</h3>
+ <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+ <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
+<pre class="prettyprint linenums">
+<table class="zebra-striped">
+...
+</table></pre>
+ <h3>3. Zebra-striped w/ TableSorter.js</h3>
+ <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
+ <table class="zebra-striped" id="sortTableExample">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th class="yellow">First Name</th>
+ <th class="blue">Last Name</th>
+ <th class="green">Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Your</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+<script src="js/jquery/jquery.tablesorter.min.js"></script>
+<script >
+ $(function() {
+ $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
+ });
+</script>
+<table class="zebra-striped">
+ ...
+</table></pre>
+
+</section>
+
+
+
+<!-- Forms
+================================================== -->
+<section id="forms">
+ <div class="page-header">
+ <h1>Forms</h1>
+ </div>
+ <div class="row">
+ <div class="span4">
+ <h3>Four types of forms</h3>
+ <p>With 2.0, we now have four types of forms to choose from:</p>
+ <ul>
+ <li>Search form for a super-rounded input and optional button</li>
+ <li>Inline form for a series of elements on one line</li>
+ <li>Horizontal form for left-aligned labels</li>
+ <li>Vertical form for stacked labels and inputs</li>
+ </ul>
+ </div>
+ <div class="span4">
+ <h3></h3>
+ </div>
+ </div><!-- /row -->
+ <div class="row">
+ <div class="span3">
+ <h2>Search form</h2>
+ </div>
+ <div class="span9">
+ <div class="well">
+ <form class="form-search">
+ <input type="text" class="search-query">
+ <button type="submit" class="btn">Search</button>
+ </form>
+ </div><!--/well-->
+ </div>
+ </div><!-- /row -->
+ <div class="row">
+ <div class="span3">
+ <h2>Inline form</h2>
+ </div>
+ <div class="span9">
+ <div class="well">
+ <form class="form-inline">
+ <h4>Some directional text</h4>
+ <p>And maybe some kind of optional supporting text right here.</p>
+ <input type="text" class="input-medium">
+ <input type="text" class="input-medium">
+ <input type="text" class="input-medium">
+ <button type="submit" class="btn">Search</button>
+ </form>
+ </div><!--/well-->
+ </div>
+ </div><!-- /row -->
+ <div class="row">
+ <div class="span3">
+ <h2>Horizontal form</h2>
+ </div>
+ <div class="span9">
+ <form class="form-horizontal">
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="input01">Text input</label>
+ <div class="controls">
+ <input type="text" class="xlarge" name="input01">
+ <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="select01">Select list</label>
+ <div class="controls">
+ <select name="select01">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="multiSelect">Multi-select</label>
+ <div class="controls">
+ <select multiple="multiple" name="multiSelect">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ </fieldset>
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="fileInput">File input</label>
+ <div class="controls">
+ <input class="input-file" id="fileInput" name="fileInput" type="file">
+ </div>
+ </fieldset>
+ <fieldset class="control-group has-error">
+ <label class="control-label" for="inputError">Input with error</label>
+ <div class="controls">
+ <input type="text" name="inputError">
+ </div>
+ </fieldset>
+ <fieldset class="control-group has-error">
+ <label class="control-label" for="textareaError">Textarea with error</label>
+ <div class="controls">
+ <textarea class="input-xlarge" rows="3"></textarea>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
+ <div class="controls">
+ <div class="control-list">
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option1">
+ Option one is this and that—be sure to include why it’s great
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option2">
+ Option two can also be checked and included in form results
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option3">
+ Option three can—yes, you guessed it—also be checked and included in form results
+ </label>
+ <label class="checkbox">
+ <input type="checkbox" name="optionsCheckboxes" value="option4">
+ Option four cannot be checked as it is disabled
+ </label>
+ </div>
+ <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="optionsRadios">Radio buttons</label>
+ <div class="controls">
+ <div class="control-list">
+ <label>
+ <input type="radio" checked name="optionsRadios" value="option1">
+ <span>Option one is this and that—be sure to include why it’s great</span>
+ </label>
+ <label>
+ <input type="radio" name="optionsRadios" value="option2">
+ <span>Option two can is something else and selecting it will deselect options 1</span>
+ </label>
+ </div>
+ <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
+ </div>
+ </fieldset>
+ <fieldset class="form-actions">
+ <button type="submit" class="btn primary">Save changes</button>
+ <button type="reset" class="btn">Cancel</button>
+ </fieldset>
+ </form>
+ </div>
+ </div><!-- /row -->
+ <div class="row">
+ <div class="span3">
+ <h2>Vertical form</h2>
+ </div>
+ <div class="span9">
+ <form class="form-vertical">
+ <legend>Example form</legend>
+ <fieldset class="control-group">
+ <label class="control-label" for="input01">Label</label>
+ <div class="controls">
+ <input type="text" class="xlarge" name="input01">
+ <p class="help-text">Be sure to fill this out like so, or else!</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="select01">Label</label>
+ <div class="controls">
+ <select name="select01"></select>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
+ <label class="control-label" for="input02">Label</label>
+ <div class="controls">
+ <div class="control-list">
+ <label class="checkbox">
+ <input type="checkbox"> Something something something something something
+ </label>
+ <label class="checkbox">
+ <input type="checkbox"> Something something something something
+ </label>
+ <label class="checkbox">
+ <input type="checkbox"> Something something something
+ </label>
+ </div>
+ </div>
+ </fieldset>
+ <fieldset class="form-actions">
+ <button type="submit" class="btn primary">Save changes</button>
+ <button type="reset" class="btn">Cancel</button>
+ </fieldset>
+ </form>
+ </div>
+ </div><!-- /row -->
+
+ <div class="row">
+ <div class="span3">
+ <h2>Buttons</h2>
+ <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
+ <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
+ </div>
+ <div class="span9">
+ <h3>Example buttons</h3>
+ <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
+ <div class="well" style="padding: 14px 19px;">
+ <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button>
+ </div>
+ <h3>Alternate sizes</h3>
+ <p>Fancy larger or smaller buttons? Have at it!</p>
+ <div class="well">
+ <a href="#" class="btn large primary">Primary action</a>
+ <a href="#" class="btn large">Action</a>
+ </div>
+ <div class="well" style="padding: 16px 19px;">
+ <a href="#" class="btn small primary">Primary action</a>
+ <a href="#" class="btn small">Action</a>
+ </div>
+ <h3>Disabled state</h3>
+ <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
+ <h4>Links</h4>
+ <div class="well">
+ <a href="#" class="btn large primary disabled">Primary action</a>
+ <a href="#" class="btn large disabled">Action</a>
+ </div>
+ <h4>Buttons</h4>
+ <div class="well">
+ <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
+ </div>
+ </div>
+ </div><!-- /row -->
+
+ <div class="row">
+ <div class="span3">
+ <h2>Button groups</h2>
+ </div>
+ <div class="span9">
+ <h3>Example</h3>
+ <div class="well">
+ <div class="btn-group">
+ <a class="btn" href="#">Left</a>
+ <a class="btn" href="#">Middle</a>
+ <a class="btn" href="#">Right</a>
+ </div>
+ </div>
+ <div class="well">
+ <div class="btn-toolbar">
+ <div class="btn-group">
+ <a class="btn" href="#">1</a>
+ <a class="btn" href="#">2</a>
+ <a class="btn" href="#">3</a>
+ <a class="btn" href="#">4</a>
+ <a class="btn" href="#">5</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">6</a>
+ <a class="btn" href="#">7</a>
+ <a class="btn" href="#">8</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">9</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">10</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+
+</section>
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
+ Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+ </p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/docs/components.html b/docs/components.html
new file mode 100644
index 0000000000..0e3f0a223f
--- /dev/null
+++ b/docs/components.html
@@ -0,0 +1,705 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li class="active"><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Components</h1>
+ <p class="lead">Reusable patterns for navigation, alerts, popovers, and much more</p>
+ </header>
+
+
+<!-- Media
+================================================== -->
+<section id="media">
+ <div class="page-header">
+ <h1>Media <small>Displaying images and videos</small></h1>
+ </div>
+ <!-- Table structure -->
+ <div class="row">
+ <div class="span3">
+ <h2>Media grid</h2>
+ <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
+ </div>
+ <div class="span9">
+ <h3>Example thumbnails</h3>
+ <p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
+ <h4>Large</h4>
+ <ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+ </ul>
+ <h4>Medium</h4>
+ <ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ </ul>
+ <h4>Small</h4>
+ <ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/90x90" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/90x90" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/90x90" alt="">
+ </a>
+ </li>
+ </ul>
+ <h4>Coding them</h4>
+ <p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p>
+<pre class="prettyprint linenums">
+<ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+</ul>
+</pre>
+ </div>
+ </div><!-- /row -->
+</section>
+
+
+
+<!-- Navigation
+================================================== -->
+<section id="navigation">
+ <div class="page-header">
+ <h1>Navigation</h1>
+ </div>
+ <h2>Fixed navbar</h2>
+ <div class="navbar navbar-static" data-dropdown="dropdown">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="#">Project Name</a>
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="form-search navbar-search pull-left" action="">
+ <input type="text" class="search-query span2" placeholder="Search">
+ </form>
+ <ul class="nav secondary-nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div><!-- /navbar-inner -->
+ </div><!-- /navbar -->
+
+ <div class="row">
+ <div class="span4">
+ <h4>What is it</h4>
+ <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
+ </div>
+ <div class="span4">
+ <h4>Customizable</h4>
+ <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
+ </div>
+ <div class="span4">
+ <h4>Dropdowns included</h4>
+ <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
+ </div>
+ </div>
+ <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
+
+ <br>
+
+ <div class="row">
+ <div class="span3">
+ <h2>Tabs and pills</h2>
+ <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
+ <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
+ </div>
+ <div class="span9">
+ <h3>Basic tabs example</h3>
+ <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
+ <ul class="tabs">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+ <li class="dropdown" data-dropdown="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
+ </ul>
+<pre class="prettyprint linenums">
+<ul class="tabs">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+</ul>
+</pre>
+ <h3>Alternate tabs</h3>
+ <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
+ <div class="row">
+ <div class="span2">
+ <div class="clearfix">
+ <ul class="tabs tabs-left">
+ <li class="active"><a href="#">Active link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Linky link</a></li>
+ <li><a href="#">What up link</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="span2">
+ <div class="clearfix">
+ <ul class="tabs tabs-right">
+ <li class="active"><a href="#">Active link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Linky link</a></li>
+ <li><a href="#">What up link</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="span5">
+ <div class="clearfix">
+ <ul class="tabs tabs-bottom">
+ <li class="active"><a href="#">Active link</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Linky link</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <h3>Tabbable tabs</h3>
+ <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p>
+
+ <div class="tabbable">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ <li><a href="#4">Section 4</a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="1">
+ <p>Oh hai #1!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <p>Oh hai #2!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <p>Oh hai #3!</p>
+ </div>
+ <div class="tab-pane" id="4">
+ <p>Oh hai #4!</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+ <div class="tabbable tabs-left">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ </ul>
+ <div class="tab-content" id="myTabContent2">
+ <div class="tab-pane active" id="1">
+ <h4>Section 1</h4>
+ <p>Oh hai!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <h4>Section 2</h4>
+ <p>Oh hai!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <h4>Section 3</h4>
+ <p>Oh hai!</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span5">
+ <div class="tabbable tabs-right">
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ </ul>
+ <div class="tab-content" id="myTabContent3">
+ <div class="tab-pane active" id="1">
+ <h4>Section 1</h4>
+ <p>Oh hai!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <h4>Section 2</h4>
+ <p>Oh hai!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <h4>Section 3</h4>
+ <p>Oh hai!</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="tabbable tabs-bottom">
+ <div class="tab-content">
+ <div class="tab-pane active" id="1">
+ <p>Oh hai #1!</p>
+ </div>
+ <div class="tab-pane" id="2">
+ <p>Oh hai #2!</p>
+ </div>
+ <div class="tab-pane" id="3">
+ <p>Oh hai #3!</p>
+ </div>
+ <div class="tab-pane" id="4">
+ <p>Oh hai #4!</p>
+ </div>
+ </div>
+ <ul class="tabs" data-tabs="tabs">
+ <li class="active"><a href="#1">Section 1</a></li>
+ <li><a href="#2">Section 2</a></li>
+ <li><a href="#3">Section 3</a></li>
+ <li><a href="#4">Section 4</a></li>
+ </ul>
+ </div>
+
+
+ <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
+ <hr>
+ <h3>Basic pills example</h3>
+ <ul class="pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+<pre class="prettyprint linenums">
+<ul class="pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+</ul>
+</pre>
+ <h3>Vertical pill nav</h3>
+ <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
+ <ul class="pills pills-vertical span4">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div>
+ </div><!-- /row -->
+
+ <!-- Breadcrumbs -->
+ <div class="row">
+ <div class="span3">
+ <h2>Breadcrumbs</h2>
+ <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
+ </div>
+ <div class="span9">
+ <ul class="breadcrumb">
+ <li class="active">Home</li>
+ </ul>
+ <ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li class="active">Middle page</li>
+ </ul>
+ <ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li><a href="#">Middle page</a> <span class="divider">/</span></li>
+ <li class="active">Another one</li>
+ </ul>
+ <ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li><a href="#">Middle page</a> <span class="divider">/</span></li>
+ <li><a href="#">Another one</a> <span class="divider">/</span></li>
+ <li class="active">You are here</li>
+ </ul>
+<pre class="prettyprint linenums">
+<ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li><a href="#">Middle page</a> <span class="divider">/</span></li>
+ <li><a href="#">Another one</a> <span class="divider">/</span></li>
+ <li class="active">You are here</li>
+</ul>
+</pre>
+ </div>
+ </div>
+
+ <!-- Pagination -->
+ <div class="row">
+ <div class="span3">
+ <h2>Pagination</h2>
+ <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
+ </div>
+ <div class="span9">
+ <div class="pagination">
+ <ul>
+ <li class="prev disabled"><a href="#">← Previous</a></li>
+ <li class="active"><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ <li class="next"><a href="#">Next →</a></li>
+ </ul>
+ </div>
+ <div class="pagination">
+ <ul>
+ <li class="prev"><a href="#">←</a></li>
+ <li class="active"><a href="#">10</a></li>
+ <li><a href="#">11</a></li>
+ <li class="disabled"><a href="#">…</a></li>
+ <li><a href="#">20</a></li>
+ <li><a href="#">21</a></li>
+ <li class="next"><a href="#">→</a></li>
+ </ul>
+ </div>
+ <div class="pagination">
+ <ul>
+ <li class="prev"><a href="#">←</a></li>
+ <li><a href="#">10</a></li>
+ <li><a href="#">11</a></li>
+ <li class="active"><a href="#">12</a></li>
+ <li><a href="#">13</a></li>
+ <li><a href="#">14</a></li>
+ <li class="next"><a href="#">→</a></li>
+ </ul>
+ </div>
+<pre class="prettyprint linenums">
+<div class="pagination">
+ <ul>
+ <li class="prev disabled"><a href="#">&larr; Previous</a></li>
+ <li class="active"><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ <li><a href="#">5</a></li>
+ <li class="next"><a href="#">Next &rarr;</a></li>
+ </ul>
+</div>
+</pre>
+ </div>
+ </div><!-- /row -->
+
+</section>
+
+
+
+<!-- Alerts & Messages
+================================================== -->
+<section id="alerts">
+ <div class="page-header">
+ <h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
+ </div>
+ <!-- Basic alert messages -->
+ <div class="row">
+ <div class="span3">
+ <h2>Basic alerts</h2>
+ <p><code>.alert-message</code></p>
+ <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
+ <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="alert-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+ </div>
+ <div class="alert-message error">
+ <a class="close" href="#">×</a>
+ <p><strong>Oh snap!</strong> Change this and that and try again.</p>
+ </div>
+ <div class="alert-message success">
+ <a class="close" href="#">×</a>
+ <p><strong>Well done!</strong> You successfully read this alert message.</p>
+ </div>
+ <div class="alert-message info">
+ <a class="close" href="#">×</a>
+ <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
+ </div>
+
+ <h4>Example code</h4>
+<pre class="prettyprint linenums">
+<div class="alert-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+</div>
+</pre>
+ </div>
+ </div><!-- /row -->
+ <!-- Block messages -->
+ <div class="row">
+ <div class="span3">
+ <h2>Block messages</h2>
+ <p><code>.alert-message.block-message</code></p>
+ <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
+ <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="alert-message block-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+ </div>
+ <div class="alert-message block-message error">
+ <a class="close" href="#">×</a>
+ <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p>
+ <ul>
+ <li>Duis mollis est non commodo luctus</li>
+ <li>Nisi erat porttitor ligula</li>
+ <li>Eget lacinia odio sem nec elit</li>
+ </ul>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+ </div>
+ <div class="alert-message block-message success">
+ <a class="close" href="#">×</a>
+ <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+ </div>
+ <div class="alert-message block-message info">
+ <a class="close" href="#">×</a>
+ <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+ </div>
+
+ <h4>Example code</h4>
+<pre class="prettyprint linenums">
+<div class="alert-message block-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+</div>
+</pre>
+ </div>
+ </div><!-- /row -->
+</section>
+
+
+<!-- Popovers
+================================================== -->
+<section id="popovers">
+ <div class="page-header">
+ <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
+ </div>
+ <div class="row">
+ <div class="span3">
+ <h2>Modals</h2>
+ <p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
+ <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="well" style="background-color: #888; border: none; padding: 40px;">
+ <!-- Modal -->
+ <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
+ <div class="modal-header">
+ <a href="#" class="close js-dismiss">×</a>
+ <h3>Modal Heading</h3>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn primary">Primary</a>
+ <a href="#" class="btn">Secondary</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+
+ <!-- Tooltips -->
+ <div class="row">
+ <div class="span3">
+ <h2>Tooltips</h2>
+ <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
+ <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="twipsies well">
+ <div style="position: relative">
+ <p class="muted" style="margin-bottom: 0">
+Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+
+ <!-- Popovers -->
+ <div class="row">
+ <div class="span3">
+ <h2>Popovers</h2>
+ <p>Use popovers to provide subtextual information to a page without affecting layout.</p>
+ <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
+ </div>
+ <div class="span9">
+ <div class="well popover-well">
+ <div class="popover-wrapper">
+ <div class="popover left">
+ <div class="arrow"></div>
+ <div class="inner">
+ <h3 class="title">Popover Title</h3>
+ <div class="content">
+ <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+ </div>
+ </div>
+ </div>
+ <img class="large-bird" src="assets/img/bird.png" >
+ </div>
+ </div>
+ </div>
+ </div><!-- /row -->
+</section>
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
+ Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+ </p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/docs/index.html b/docs/index.html
index cf3b8b8052..64947dc15e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -32,6 +32,14 @@
<div class="container">
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
+ <li class="active"><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
+
+<!--
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
@@ -64,2103 +72,116 @@
</li>
<li><a href="#javascript">Javascript</a></li>
<li><a href="#less">Using Less</a></li>
+-->
</ul>
</div>
</div>
</div>
- <div class="container">
-
- <div id="overview">
- <!-- Masthead (blueprinty thing)
- ================================================== -->
- <header class="jumbotron masthead">
- <div class="inner">
- <h1>Bootstrap,<br> from Twitter</h1>
- <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
- <p class="download-info">
- <a href="#" class="btn primary btn-large">Download on GitHub</a>
- Currently v2.0.0
- </p>
- <div class="benefits">
- <h4>Feature highlights</h4>
- <ul>
- <li><span>×</span> Built on LESS</li>
- <li><span>×</span> Complete styleguide docs</li>
- <li><span>×</span> Fully responsive design</li>
- <li><span>×</span> Small footprint (7kb gzipped)</li>
- <li><span>×</span> Support for IE7 and up</li>
- <li><span>×</span> Custom jQuery plugins</li>
- <li><span>×</span> Dozens of components</li>
- </ul>
- </div>
- </div>
- </header>
-
- <ul class="quick-links">
- <li><strong>Quick links</strong></li>
- <li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li>
- <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
- <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
- <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
- <li class="divider">·</li>
- <li><strong>Authors</strong></li>
- <li><a href="http://twitter.com/mdo">@mdo</a></li>
- <li><a href="http://twitter.com/fat">@fat</a></li>
- <li class="divider">·</li>
- <li class="follow-btn">
- <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
- </li>
- <li class="tweet-btn">
- <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
- </li>
- </ul>
-
-
- <!-- Quickstart options
- ================================================== -->
- <div class="quickstart" style="display: none;">
- <div class="row">
- <div class="span4">
- <h6>Hotlink the CSS</h6>
- <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
- <form>
- <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
- </form>
- </div>
- <div class="span4">
- <h6>Use it with Less</h6>
- <p>A fan of using Less? No problem, just clone the repo and add these lines:</p>
- <form>
- <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
- <script src="/path/to/less.js"></script></textarea>
- </form>
- </div>
- <div class="span4">
- <h6>Fork on GitHub</h6>
- <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
- <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
- <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v1.3.0</a></p>
- </div>
- </div><!-- /row -->
- </div>
-
- <!-- About Bootstrap
- ================================================== -->
- <section id="about">
- <div class="row">
- <div class="span4">
- <h2>Built for and by nerds</h2>
- <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
- <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
- </div>
- <div class="span4">
- <h2>Cross-everything</h2>
- <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
- <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
- <ul>
- <li>Latest Safari</li>
- <li>Latest Google Chrome</li>
- <li>Firefox 4+</li>
- <li>Internet Explorer 7+</li>
- <li>Opera 11</li>
- </ul>
- </div>
- <div class="span4">
- <h2>What's included</h2>
- <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
- <ul>
- <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
- <li>All original .less files</li>
- <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
- <li>Complete styleguide documentation</li>
- <li>Three example pages with different layouts</li>
- </ul>
- </div>
- </div><!-- /row -->
- </section>
-
- <h3>Quick-start examples</h3>
- <p>Need some quick templates? Check out these basic examples we've put together:</p>
- <ul class="media-grid">
- <li>
- <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a>
- </li>
- <li>
- <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a>
- </li>
- <li>
- <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
- </li>
- </ul>
-
- </div><!-- /#overview -->
-
-
-<!-- Grid system
-================================================== -->
-<section id="grid-system">
- <div class="page-header">
- <h1>Grid system <small>12 columns with a responsive twist</small></h1>
- </div>
-
- <h2>Default 940px grid</h2>
- <div class="row show-grid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- <div class="row show-grid">
- <div class="span4">4</div>
- <div class="span4">4</div>
- <div class="span4">4</div>
- </div>
- <div class="row show-grid">
- <div class="span4">4</div>
- <div class="span8">8</div>
- </div>
- <div class="row show-grid">
- <div class="span6">6</div>
- <div class="span6">6</div>
- </div>
- <div class="row show-grid">
- <div class="span12">12</div>
- </div>
-
- <div class="row">
- <div class="span4">
- <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
- <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
- </div>
- <div class="span4">
-<pre class="prettyprint linenums">
-<div class="row">
- <div class="span4">...</div>
- <div class="span8">...</div>
-</div>
-</pre>
- </div>
- <div class="span4">
- <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
- </div>
- </div><!-- /row -->
-
- <h2>Offsetting columns</h2>
- <div class="row show-grid">
- <div class="span4">4</div>
- <div class="span4 offset4">4 offset 4</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span3 offset3">3 offset 3</div>
- <div class="span3 offset3">3 offset 3</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span8 offset4">8 offset 4</div>
- </div><!-- /row -->
-
- <br>
-
- <h2>Nesting columns</h2>
- <div class="row">
- <div class="span6">
- <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
- <h4>Example</h4>
- <div class="row show-grid">
- <div class="span6">
- Level 1 of column
- <div class="row show-grid">
- <div class="span3">
- Level 2
- </div>
- <div class="span3">
- Level 2
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="span6">
-<pre class="prettyprint linenums">
-<div class="row">
- <div class="span12">
- Level 1 of column
- <div class="row">
- <div class="span6">Level 2</div>
- <div class="span6">Level 2</div>
- </div>
- </div>
-</div>
-</pre>
- </div>
- </div>
-
- <h2>Grid customization</h2>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>Variable</th>
- <th>Default value</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>@gridColumns</code></td>
- <td>16</td>
- <td>The number of columns within the grid</td>
- </tr>
- <tr>
- <td><code>@gridColumnWidth</code></td>
- <td>40px</td>
- <td>The width of each column within the grid</td>
- </tr>
- <tr>
- <td><code>@gridGutterWidth</code></td>
- <td>20px</td>
- <td>The negative space between each column</td>
- </tr>
- <tr>
- <td><code>@siteWidth</code></td>
- <td><em>Computed sum of all columns and gutters</em></td>
- <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
- </tr>
- </tbody>
- </table>
- <div class="row">
- <div class="span4">
- <h3>Variables in LESS</h3>
- <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
- </div>
- <div class="span4">
- <h3>How to customize</h3>
- <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p>
- </div>
- <div class="span4">
- <h3>Staying responsive</h3>
- <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
- </div>
- </div><!-- /row -->
-
-</section>
-
-
-
-<!-- Layouts (Default and fluid)
-================================================== -->
-<section id="layouts">
- <div class="page-header">
- <h1>Layouts <small>Basic templates to create webpages</small></h1>
- </div>
-
- <div class="row">
- <div class="span6">
- <h2>Fixed layout</h2>
- <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
- <div class="mini-layout">
- <div class="mini-layout-body"></div>
- </div>
-<pre class="prettyprint linenums">
-<body>
- <div class="container">
- ...
- </div>
-</body>
-</pre>
- </div><!-- /col -->
- <div class="span6">
- <h2>Fluid layout</h2>
- <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
- <div class="mini-layout fluid">
- <div class="mini-layout-sidebar"></div>
- <div class="mini-layout-body"></div>
- </div>
-<pre class="prettyprint linenums">
-<body>
- <div class="container-fluid">
- <div class="sidebar">
- ...
- </div>
- <div class="content">
- ...
- </div>
- </div>
-</body>
-</pre>
- </div><!-- /col -->
- </div><!-- /row -->
-</section>
-
-
-
-
-<!-- Responsive design
-================================================== -->
-<section id="responsive">
- <div class="page-header">
- <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
- </div>
- <!-- Supported devices -->
- <div class="row">
- <div class="span4">
- <img src="assets/img/responsive-illustrations.png" alt="Responsive devices">
- </div>
- <div class="span8">
- <h2>Supported devices</h2>
- <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>Label</th>
- <th>Layout width</th>
- <th>Column width</th>
- <th>Gutter width</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Smartphones</td>
- <td>480px and below</td>
- <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
- </tr>
- <tr>
- <td>Portrait tablets</td>
- <td>480px to 768px</td>
- <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
- </tr>
- <tr>
- <td>Landscape tablets</td>
- <td>768px to 940px</td>
- <td>44px</td>
- <td>20px</td>
- </tr>
- <tr>
- <td>Default</td>
- <td>940px and up</td>
- <td>60px</td>
- <td>20px</td>
- </tr>
- <tr>
- <td>Large display</td>
- <td>1210px and up</td>
- <td>70px</td>
- <td>30px</td>
- </tr>
- </tbody>
- </table>
-
- <h3>What they do</h3>
- <p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
- <ul>
- <li>Modify the width of column in our grid</li>
- <li>Stack elements instead of float wherever necessary</li>
- <li>Resize headings and text to be more appropriate for devices</li>
- </ul>
- </div>
- </div>
-
- <br>
-
- <!-- Media query code -->
- <h2>Using the media queries</h2>
- <div class="row">
- <div class="span5">
- <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
- <ol>
- <li>Use the compiled responsive version, bootstrap.reponsive.css</li>
- <li>Add @import "responsive.less" and recompile Bootstrap</li>
- <li>Compile responsive.less as a separate file and include that</li>
- </ol>
- <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
- </div>
- <div class="span7">
-<pre class="prettyprint linenums">
- // Landscape phones and down
- @media (max-width: 480px) { ... }
-
- // Landscape phone to portrait tablet
- @media (min-width: 480px) and (max-width: 768px) { ... }
-
- // Portrait tablet to landscape and desktop
- @media (min-width: 768px) and (max-width: 940px) { ... }
-
- // Large desktop
- @media (min-width: 1210px) { .. }
-</pre>
- </div>
- </div>
-
-</section>
-
-
-
-
-<!-- Typography
-================================================== -->
-<section id="typography">
- <div class="page-header">
- <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
- </div>
-
- <h2>Headings & body copy</h2>
-
- <!-- Headings & Paragraph Copy -->
- <div class="row">
- <div class="span4">
- <h3>Typographic scale</h3>
- <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
- <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
- </div>
- <div class="span4">
- <h3>Example body text</h3>
- <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
- </div>
- <div class="span4">
- <div class="well">
- <h1>h1. Heading 1</h1>
- <h2>h2. Heading 2</h2>
- <h3>h3. Heading 3</h3>
- <h4>h4. Heading 4</h4>
- <h5>h5. Heading 5</h5>
- <h6>h6. Heading 6</h6>
- </div>
- </div>
- </div>
-
- <!-- Misc Elements -->
- <h2>Emphasis, address, and abbreviation</h2>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>Element</th>
- <th>Description</th>
- <th>Usage</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code><strong></code>
- </td>
- <td>
- For emphasizing a snippet of text with <strong>important</strong>
- </td>
- <td>
- <span class="muted">None</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><em></code>
- </td>
- <td>
- For emphasizing a snippet of text with <em>stress</em>
- </td>
- <td>
- <span class="muted">None</span>
- </td>
- </tr>
- <tr>
- <td>
- <code><abbr></code>
- </td>
- <td>
- Wraps abbreviations and acronyms to show the expanded version on hover
- </td>
- <td>
- Include optional <code>title</code> for expanded text
- </td>
- </tr>
- <tr>
- <td>
- <code><address></code>
- </td>
- <td>
- For contact information for its nearest ancestor or the entire body of work
- </td>
- <td>
- Preserve formatting by ending all lines with <code><br></code>
- </td>
- </tr>
- </tbody>
- </table>
-
- <div class="row">
- <div class="span4">
- <h3>Using emphasis</h3>
- <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
- <p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
- </div>
- <div class="span4">
- <h3>Example addresses</h3>
- <p>Here are two examples of how the <code><address></code> tag can be used:</p>
- <address>
- <strong>Twitter, Inc.</strong><br>
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
- <abbr title="Phone">P:</abbr> (123) 456-7890
- </address>
- <address>
- <strong>Full Name</strong><br>
- <a mailto="#">first.last@gmail.com</a>
- </address>
- </div>
- <div class="span4">
- <h3>Example abbreviations</h3>
- <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
- <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
- <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
- </div>
- </div>
-
-
- <!-- Blockquotes -->
- <h2>Blockquotes</h2>
- <div class="row">
- <div class="span5">
- <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
- <small>Someone famous</small>
- </blockquote>
- </div>
- <div class="span7">
-<pre class="prettyprint linenums">
-<blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
- <small>Dr. Julius Hibbert</small>
-</blockquote>
-</pre>
- </div>
- </div>
-
- <!-- Lists -->
- <h2>Lists</h2>
- <div class="row">
- <div class="span3">
- <h4>Unordered <code><ul></code></h4>
- <ul>
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ul>
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ul>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ul>
- </div>
- <div class="span3">
- <h4>Unstyled <code><ul.unstyled></code></h4>
- <ul class="unstyled">
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ul>
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ul>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ul>
- </div>
- <div class="span3">
- <h4>Ordered <code><ol></code></h4>
- <ol>
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit</li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ol>
- </div>
- <div class="span3">
- <h4>Description <code><dl></code></h4>
- <dl>
- <dt>Description lists</dt>
- <dd>A description list is perfect for defining terms.</dd>
- <dt>Euismod</dt>
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
- <dt>Malesuada porta</dt>
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
- </dl>
- </div>
- </div><!-- /row -->
-
-
- <!-- Code -->
-
- <h2>Code <small>Inline and block</small></h2>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 190px;">Element</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code><code></code></td>
- <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td>
- </tr>
- <tr>
- <td><code><pre></code></td>
- <td>
-<pre><div>
- <h1>Heading</h1>
- <p>Something right here...</p>
-</div></pre>
- <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
- </td>
- </tr>
- <tr>
- <td><code><pre class="prettyprint"></code></td>
- <td>
- <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
-<pre class="prettyprint"><div>
- <h1>Heading</h1>
- <p>Something right here...</p>
-</div></pre>
-<pre class="prettyprint linenums"><div>
- <h1>Heading</h1>
- <p>Something right here...</p>
-</div></pre>
- <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
- </td>
- </tr>
- </tbody>
- </table>
-
- <!-- Labels -->
- <h2>Inline labels <small>for special attention</small></h2>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 190px;">Labels</th>
- <th>Markup</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <span class="label">Default</span>
- </td>
- <td>
- <code><span class="label">Default</span></code>
- </td>
- </tr>
- <tr>
- <td>
- <span class="label success">New</span>
- </td>
- <td>
- <code><span class="label success">New</span></code>
- </td>
- </tr>
- <tr>
- <td>
- <span class="label warning">Warning</span>
- </td>
- <td>
- <code><span class="label warning">Warning</span></code>
- </td>
- </tr>
- <tr>
- <td>
- <span class="label important">Important</span>
- </td>
- <td>
- <code><span class="label important">Important</span></code>
- </td>
- </tr>
- <tr>
- <td>
- <span class="label notice">Notice</span>
- </td>
- <td>
- <code><span class="label notice">Notice</span></code>
- </td>
- </tr>
- </tbody>
- </table>
-
-</section>
-
-
-
-<!-- Tables
-================================================== -->
-<section id="tables">
- <div class="page-header">
- <h1>Tables <small>For, you guessed it, tabular data</small></h1>
- </div>
-
- <h2>Table markup</h2>
- <div class="row">
- <div class="span8">
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>Tag</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code><table></code>
- </td>
- <td>
- Wrapping element for displaying data in a tabular format
- </td>
- </tr>
- <tr>
- <td>
- <code><thead></code>
- </td>
- <td>
- Container element for table header rows (<code><tr></code>) to label table columns
- </td>
- </tr>
- <tr>
- <td>
- <code><tbody></code>
- </td>
- <td>
- Container element for table rows (<code><tr></code>) in the body of the table
- </td>
- </tr>
- <tr>
- <td>
- <code><tr></code>
- </td>
- <td>
- Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
- </td>
- </tr>
- <tr>
- <td>
- <code><td></code>
- </td>
- <td>
- Default table cell
- </td>
- </tr>
- <tr>
- <td>
- <code><th></code>
- </td>
- <td>
- Special table cell for column (or row, depending on scope and placement) labels<br>
- Must be used within a <code><thead></code>
- </td>
- </tr>
- <tr>
- <td>
- <code><caption></code>
- </td>
- <td>
- Description or summary of what the table holds, especially useful for screen readers
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="span4">
-<pre class="prettyprint linenums">
-<table>
- <thead>
- <tr>
- <th>...</th>
- <th>...</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>...</td>
- <td>...</td>
- </tr>
- </tbody>
-</table>
-</pre>
- </div>
- </div>
-
- <h2>Example tables</h2>
- <h3>1. Default table styles</h3>
- <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
- <table>
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Some</td>
- <td>One</td>
- <td>English</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
- </tr>
- </tbody>
- </table>
-<pre class="prettyprint linenums">
-<table>
- ...
-</table></pre>
- <h3>2. Zebra-striped</h3>
- <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Some</td>
- <td>One</td>
- <td>English</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
- </tr>
- </tbody>
- </table>
- <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
-<pre class="prettyprint linenums">
-<table class="zebra-striped">
-...
-</table></pre>
- <h3>3. Zebra-striped w/ TableSorter.js</h3>
- <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
- <table class="zebra-striped" id="sortTableExample">
- <thead>
- <tr>
- <th>#</th>
- <th class="yellow">First Name</th>
- <th class="blue">Last Name</th>
- <th class="green">Language</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Your</td>
- <td>One</td>
- <td>English</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
- </tr>
- </tbody>
- </table>
-<pre class="prettyprint linenums">
-<script src="js/jquery/jquery.tablesorter.min.js"></script>
-<script >
- $(function() {
- $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
- });
-</script>
-<table class="zebra-striped">
- ...
-</table></pre>
-
-</section>
-
-
-
-<!-- Forms
-================================================== -->
-<section id="forms">
- <div class="page-header">
- <h1>Forms</h1>
- </div>
- <div class="row">
- <div class="span4">
- <h3>Four types of forms</h3>
- <p>With 2.0, we now have four types of forms to choose from:</p>
- <ul>
- <li>Search form for a super-rounded input and optional button</li>
- <li>Inline form for a series of elements on one line</li>
- <li>Horizontal form for left-aligned labels</li>
- <li>Vertical form for stacked labels and inputs</li>
- </ul>
- </div>
- <div class="span4">
- <h3></h3>
- </div>
- </div><!-- /row -->
- <div class="row">
- <div class="span3">
- <h2>Search form</h2>
- </div>
- <div class="span9">
- <div class="well">
- <form class="form-search">
- <input type="text" class="search-query">
- <button type="submit" class="btn">Search</button>
- </form>
- </div><!--/well-->
- </div>
- </div><!-- /row -->
- <div class="row">
- <div class="span3">
- <h2>Inline form</h2>
- </div>
- <div class="span9">
- <div class="well">
- <form class="form-inline">
- <h4>Some directional text</h4>
- <p>And maybe some kind of optional supporting text right here.</p>
- <input type="text" class="input-medium">
- <input type="text" class="input-medium">
- <input type="text" class="input-medium">
- <button type="submit" class="btn">Search</button>
- </form>
- </div><!--/well-->
- </div>
- </div><!-- /row -->
- <div class="row">
- <div class="span3">
- <h2>Horizontal form</h2>
- </div>
- <div class="span9">
- <form class="form-horizontal">
- <legend>Example form</legend>
- <fieldset class="control-group">
- <label class="control-label" for="input01">Text input</label>
- <div class="controls">
- <input type="text" class="xlarge" name="input01">
- <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
- </div>
- </fieldset>
- <fieldset class="control-group">
- <label class="control-label" for="select01">Select list</label>
- <div class="controls">
- <select name="select01">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </fieldset>
- <fieldset class="control-group">
- <label class="control-label" for="multiSelect">Multi-select</label>
- <div class="controls">
- <select multiple="multiple" name="multiSelect">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
- </fieldset>
- <legend>Example form</legend>
- <fieldset class="control-group">
- <label class="control-label" for="fileInput">File input</label>
- <div class="controls">
- <input class="input-file" id="fileInput" name="fileInput" type="file">
- </div>
- </fieldset>
- <fieldset class="control-group has-error">
- <label class="control-label" for="inputError">Input with error</label>
- <div class="controls">
- <input type="text" name="inputError">
- </div>
- </fieldset>
- <fieldset class="control-group has-error">
- <label class="control-label" for="textareaError">Textarea with error</label>
- <div class="controls">
- <textarea class="input-xlarge" rows="3"></textarea>
- </div>
- </fieldset>
- <fieldset class="control-group">
- <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
- <div class="controls">
- <div class="control-list">
- <label class="checkbox">
- <input type="checkbox" name="optionsCheckboxes" value="option1">
- Option one is this and that—be sure to include why it’s great
- </label>
- <label class="checkbox">
- <input type="checkbox" name="optionsCheckboxes" value="option2">
- Option two can also be checked and included in form results
- </label>
- <label class="checkbox">
- <input type="checkbox" name="optionsCheckboxes" value="option3">
- Option three can—yes, you guessed it—also be checked and included in form results
- </label>
- <label class="checkbox">
- <input type="checkbox" name="optionsCheckboxes" value="option4">
- Option four cannot be checked as it is disabled
- </label>
- </div>
- <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
- </div>
- </fieldset>
- <fieldset class="control-group">
- <label class="control-label" for="optionsRadios">Radio buttons</label>
- <div class="controls">
- <div class="control-list">
- <label>
- <input type="radio" checked name="optionsRadios" value="option1">
- <span>Option one is this and that—be sure to include why it’s great</span>
- </label>
- <label>
- <input type="radio" name="optionsRadios" value="option2">
- <span>Option two can is something else and selecting it will deselect options 1</span>
- </label>
- </div>
- <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
- </div>
- </fieldset>
- <fieldset class="form-actions">
- <button type="submit" class="btn primary">Save changes</button>
- <button type="reset" class="btn">Cancel</button>
- </fieldset>
- </form>
- </div>
- </div><!-- /row -->
- <div class="row">
- <div class="span3">
- <h2>Vertical form</h2>
- </div>
- <div class="span9">
- <form class="form-vertical">
- <legend>Example form</legend>
- <fieldset class="control-group">
- <label class="control-label" for="input01">Label</label>
- <div class="controls">
- <input type="text" class="xlarge" name="input01">
- <p class="help-text">Be sure to fill this out like so, or else!</p>
- </div>
- </fieldset>
- <fieldset class="control-group">
- <label class="control-label" for="select01">Label</label>
- <div class="controls">
- <select name="select01"></select>
- </div>
- </fieldset>
- <fieldset class="control-group">
- <label class="control-label" for="input02">Label</label>
- <div class="controls">
- <div class="control-list">
- <label class="checkbox">
- <input type="checkbox"> Something something something something something
- </label>
- <label class="checkbox">
- <input type="checkbox"> Something something something something
- </label>
- <label class="checkbox">
- <input type="checkbox"> Something something something
- </label>
+ <div class="container">
+
+ <div id="overview">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron masthead">
+ <div class="inner">
+ <h1>Bootstrap,<br> from Twitter</h1>
+ <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
+ <p class="download-info">
+ <a href="#" class="btn primary btn-large">Download on GitHub</a>
+ Currently v2.0.0
+ </p>
+ <div class="benefits">
+ <h4>Feature highlights</h4>
+ <ul>
+ <li><span>×</span> Built on LESS</li>
+ <li><span>×</span> Complete styleguide docs</li>
+ <li><span>×</span> Fully responsive design</li>
+ <li><span>×</span> Small footprint (7kb gzipped)</li>
+ <li><span>×</span> Support for IE7 and up</li>
+ <li><span>×</span> Custom jQuery plugins</li>
+ <li><span>×</span> Dozens of components</li>
+ </ul>
</div>
</div>
- </fieldset>
- <fieldset class="form-actions">
- <button type="submit" class="btn primary">Save changes</button>
- <button type="reset" class="btn">Cancel</button>
- </fieldset>
- </form>
- </div>
- </div><!-- /row -->
-
- <div class="row">
- <div class="span3">
- <h2>Buttons</h2>
- <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
- <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
- </div>
- <div class="span9">
- <h3>Example buttons</h3>
- <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
- <div class="well" style="padding: 14px 19px;">
- <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button>
- </div>
- <h3>Alternate sizes</h3>
- <p>Fancy larger or smaller buttons? Have at it!</p>
- <div class="well">
- <a href="#" class="btn large primary">Primary action</a>
- <a href="#" class="btn large">Action</a>
- </div>
- <div class="well" style="padding: 16px 19px;">
- <a href="#" class="btn small primary">Primary action</a>
- <a href="#" class="btn small">Action</a>
- </div>
- <h3>Disabled state</h3>
- <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
- <h4>Links</h4>
- <div class="well">
- <a href="#" class="btn large primary disabled">Primary action</a>
- <a href="#" class="btn large disabled">Action</a>
- </div>
- <h4>Buttons</h4>
- <div class="well">
- <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
- </div>
- </div>
- </div><!-- /row -->
-
- <div class="row">
- <div class="span3">
- <h2>Button groups</h2>
- </div>
- <div class="span9">
- <h3>Example</h3>
- <div class="well">
- <div class="btn-group">
- <a class="btn" href="#">Left</a>
- <a class="btn" href="#">Middle</a>
- <a class="btn" href="#">Right</a>
- </div>
- </div>
- <div class="well">
- <div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn" href="#">1</a>
- <a class="btn" href="#">2</a>
- <a class="btn" href="#">3</a>
- <a class="btn" href="#">4</a>
- <a class="btn" href="#">5</a>
- </div>
- <div class="btn-group">
- <a class="btn" href="#">6</a>
- <a class="btn" href="#">7</a>
- <a class="btn" href="#">8</a>
- </div>
- <div class="btn-group">
- <a class="btn" href="#">9</a>
- </div>
- <div class="btn-group">
- <a class="btn" href="#">10</a>
- </div>
- </div>
- </div>
- </div>
- </div><!-- /row -->
-
-</section>
-
-
-
-<!-- Media
-================================================== -->
-<section id="media">
- <div class="page-header">
- <h1>Media <small>Displaying images and videos</small></h1>
- </div>
- <!-- Table structure -->
- <div class="row">
- <div class="span3">
- <h2>Media grid</h2>
- <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
- </div>
- <div class="span9">
- <h3>Example thumbnails</h3>
- <p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
- <h4>Large</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- </ul>
- <h4>Medium</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- </ul>
- <h4>Small</h4>
- <ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/90x90" alt="">
- </a>
- </li>
- </ul>
- <h4>Coding them</h4>
- <p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p>
-<pre class="prettyprint linenums">
-<ul class="media-grid">
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="thumbnail" src="http://placehold.it/330x230" alt="">
- </a>
- </li>
-</ul>
-</pre>
- </div>
- </div><!-- /row -->
-</section>
-
-
-
-<!-- Navigation
-================================================== -->
-<section id="navigation">
- <div class="page-header">
- <h1>Navigation</h1>
- </div>
- <h2>Fixed navbar</h2>
- <div class="navbar navbar-static" data-dropdown="dropdown">
- <div class="navbar-inner">
- <div class="container">
- <a class="brand" href="#">Project Name</a>
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
+ </header>
+
+ <ul class="quick-links">
+ <li><strong>Quick links</strong></li>
+ <li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
+ <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
+ <li class="divider">·</li>
+ <li><strong>Authors</strong></li>
+ <li><a href="http://twitter.com/mdo">@mdo</a></li>
+ <li><a href="http://twitter.com/fat">@fat</a></li>
+ <li class="divider">·</li>
+ <li class="follow-btn">
+ <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</li>
- </ul>
- <form class="form-search navbar-search pull-left" action="">
- <input type="text" class="search-query span2" placeholder="Search">
- </form>
- <ul class="nav secondary-nav">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
+ <li class="tweet-btn">
+ <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</li>
</ul>
- </div>
- </div><!-- /navbar-inner -->
- </div><!-- /navbar -->
- <div class="row">
- <div class="span4">
- <h4>What is it</h4>
- <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
- </div>
- <div class="span4">
- <h4>Customizable</h4>
- <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
- </div>
- <div class="span4">
- <h4>Dropdowns included</h4>
- <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
- </div>
- </div>
- <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
-
- <br>
-
- <div class="row">
- <div class="span3">
- <h2>Tabs and pills</h2>
- <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
- <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
- </div>
- <div class="span9">
- <h3>Basic tabs example</h3>
- <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
- <ul class="tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
- <li class="dropdown" data-dropdown="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
- <ul class="dropdown-menu">
- <li><a href="#">Secondary link</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </li>
- </ul>
-<pre class="prettyprint linenums">
-<ul class="tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
-</ul>
-</pre>
- <h3>Alternate tabs</h3>
- <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
- <div class="row">
- <div class="span2">
- <div class="clearfix">
- <ul class="tabs tabs-left">
- <li class="active"><a href="#">Active link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Linky link</a></li>
- <li><a href="#">What up link</a></li>
- </ul>
- </div>
- </div>
- <div class="span2">
- <div class="clearfix">
- <ul class="tabs tabs-right">
- <li class="active"><a href="#">Active link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Linky link</a></li>
- <li><a href="#">What up link</a></li>
- </ul>
- </div>
- </div>
- <div class="span5">
- <div class="clearfix">
- <ul class="tabs tabs-bottom">
- <li class="active"><a href="#">Active link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Linky link</a></li>
- </ul>
- </div>
- </div>
- </div>
- <h3>Tabbable tabs</h3>
- <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p>
- <div class="tabbable">
- <ul class="tabs" data-tabs="tabs">
- <li class="active"><a href="#1">Section 1</a></li>
- <li><a href="#2">Section 2</a></li>
- <li><a href="#3">Section 3</a></li>
- <li><a href="#4">Section 4</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="1">
- <p>Oh hai #1!</p>
- </div>
- <div class="tab-pane" id="2">
- <p>Oh hai #2!</p>
- </div>
- <div class="tab-pane" id="3">
- <p>Oh hai #3!</p>
- </div>
- <div class="tab-pane" id="4">
- <p>Oh hai #4!</p>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="span4">
- <div class="tabbable tabs-left">
- <ul class="tabs" data-tabs="tabs">
- <li class="active"><a href="#1">Section 1</a></li>
- <li><a href="#2">Section 2</a></li>
- <li><a href="#3">Section 3</a></li>
- </ul>
- <div class="tab-content" id="myTabContent2">
- <div class="tab-pane active" id="1">
- <h4>Section 1</h4>
- <p>Oh hai!</p>
- </div>
- <div class="tab-pane" id="2">
- <h4>Section 2</h4>
- <p>Oh hai!</p>
- </div>
- <div class="tab-pane" id="3">
- <h4>Section 3</h4>
- <p>Oh hai!</p>
- </div>
+ <!-- About Bootstrap
+ ================================================== -->
+ <section id="about">
+ <div class="row">
+ <div class="span4">
+ <h2>Built for and by nerds</h2>
+ <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
+ <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
</div>
- </div>
- </div>
- <div class="span5">
- <div class="tabbable tabs-right">
- <ul class="tabs" data-tabs="tabs">
- <li class="active"><a href="#1">Section 1</a></li>
- <li><a href="#2">Section 2</a></li>
- <li><a href="#3">Section 3</a></li>
- </ul>
- <div class="tab-content" id="myTabContent3">
- <div class="tab-pane active" id="1">
- <h4>Section 1</h4>
- <p>Oh hai!</p>
- </div>
- <div class="tab-pane" id="2">
- <h4>Section 2</h4>
- <p>Oh hai!</p>
- </div>
- <div class="tab-pane" id="3">
- <h4>Section 3</h4>
- <p>Oh hai!</p>
- </div>
+ <div class="span4">
+ <h2>Cross-everything</h2>
+ <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
+ <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
+ <ul>
+ <li>Latest Safari</li>
+ <li>Latest Google Chrome</li>
+ <li>Firefox 4+</li>
+ <li>Internet Explorer 7+</li>
+ <li>Opera 11</li>
+ </ul>
</div>
- </div>
- </div>
- </div>
-
- <div class="tabbable tabs-bottom">
- <div class="tab-content">
- <div class="tab-pane active" id="1">
- <p>Oh hai #1!</p>
- </div>
- <div class="tab-pane" id="2">
- <p>Oh hai #2!</p>
- </div>
- <div class="tab-pane" id="3">
- <p>Oh hai #3!</p>
- </div>
- <div class="tab-pane" id="4">
- <p>Oh hai #4!</p>
- </div>
- </div>
- <ul class="tabs" data-tabs="tabs">
- <li class="active"><a href="#1">Section 1</a></li>
- <li><a href="#2">Section 2</a></li>
- <li><a href="#3">Section 3</a></li>
- <li><a href="#4">Section 4</a></li>
- </ul>
- </div>
-
-
- <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
- <hr>
- <h3>Basic pills example</h3>
- <ul class="pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
-<pre class="prettyprint linenums">
-<ul class="pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
-</ul>
-</pre>
- <h3>Vertical pill nav</h3>
- <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
- <ul class="pills pills-vertical span4">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div>
- </div><!-- /row -->
-
- <!-- Breadcrumbs -->
- <div class="row">
- <div class="span3">
- <h2>Breadcrumbs</h2>
- <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
- </div>
- <div class="span9">
- <ul class="breadcrumb">
- <li class="active">Home</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li class="active">Middle page</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li><a href="#">Middle page</a> <span class="divider">/</span></li>
- <li class="active">Another one</li>
- </ul>
- <ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li><a href="#">Middle page</a> <span class="divider">/</span></li>
- <li><a href="#">Another one</a> <span class="divider">/</span></li>
- <li class="active">You are here</li>
- </ul>
-<pre class="prettyprint linenums">
-<ul class="breadcrumb">
- <li><a href="#">Home</a> <span class="divider">/</span></li>
- <li><a href="#">Middle page</a> <span class="divider">/</span></li>
- <li><a href="#">Another one</a> <span class="divider">/</span></li>
- <li class="active">You are here</li>
-</ul>
-</pre>
- </div>
- </div>
-
- <!-- Pagination -->
- <div class="row">
- <div class="span3">
- <h2>Pagination</h2>
- <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
- </div>
- <div class="span9">
- <div class="pagination">
- <ul>
- <li class="prev disabled"><a href="#">← Previous</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li class="next"><a href="#">Next →</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
- <li class="prev"><a href="#">←</a></li>
- <li class="active"><a href="#">10</a></li>
- <li><a href="#">11</a></li>
- <li class="disabled"><a href="#">…</a></li>
- <li><a href="#">20</a></li>
- <li><a href="#">21</a></li>
- <li class="next"><a href="#">→</a></li>
- </ul>
- </div>
- <div class="pagination">
- <ul>
- <li class="prev"><a href="#">←</a></li>
- <li><a href="#">10</a></li>
- <li><a href="#">11</a></li>
- <li class="active"><a href="#">12</a></li>
- <li><a href="#">13</a></li>
- <li><a href="#">14</a></li>
- <li class="next"><a href="#">→</a></li>
- </ul>
- </div>
-<pre class="prettyprint linenums">
-<div class="pagination">
- <ul>
- <li class="prev disabled"><a href="#">&larr; Previous</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="next"><a href="#">Next &rarr;</a></li>
- </ul>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
-
-</section>
-
-
-
-<!-- Alerts & Messages
-================================================== -->
-<section id="alerts">
- <div class="page-header">
- <h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
- </div>
- <!-- Basic alert messages -->
- <div class="row">
- <div class="span3">
- <h2>Basic alerts</h2>
- <p><code>.alert-message</code></p>
- <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
- <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
- </div>
- <div class="span9">
- <div class="alert-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
- </div>
- <div class="alert-message error">
- <a class="close" href="#">×</a>
- <p><strong>Oh snap!</strong> Change this and that and try again.</p>
- </div>
- <div class="alert-message success">
- <a class="close" href="#">×</a>
- <p><strong>Well done!</strong> You successfully read this alert message.</p>
- </div>
- <div class="alert-message info">
- <a class="close" href="#">×</a>
- <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
- </div>
-
- <h4>Example code</h4>
-<pre class="prettyprint linenums">
-<div class="alert-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
- <!-- Block messages -->
- <div class="row">
- <div class="span3">
- <h2>Block messages</h2>
- <p><code>.alert-message.block-message</code></p>
- <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
- <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
- </div>
- <div class="span9">
- <div class="alert-message block-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
- <div class="alert-message block-message error">
- <a class="close" href="#">×</a>
- <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p>
- <ul>
- <li>Duis mollis est non commodo luctus</li>
- <li>Nisi erat porttitor ligula</li>
- <li>Eget lacinia odio sem nec elit</li>
- </ul>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
- <div class="alert-message block-message success">
- <a class="close" href="#">×</a>
- <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
- <div class="alert-message block-message info">
- <a class="close" href="#">×</a>
- <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
-
- <h4>Example code</h4>
-<pre class="prettyprint linenums">
-<div class="alert-message block-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
-</section>
-
-
-<!-- Popovers
-================================================== -->
-<section id="popovers">
- <div class="page-header">
- <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
- </div>
- <div class="row">
- <div class="span3">
- <h2>Modals</h2>
- <p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
- <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
- </div>
- <div class="span9">
- <div class="well" style="background-color: #888; border: none; padding: 40px;">
- <!-- Modal -->
- <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
- <div class="modal-header">
- <a href="#" class="close js-dismiss">×</a>
- <h3>Modal Heading</h3>
- </div>
- <div class="modal-body">
- <p>One fine body…</p>
- </div>
- <div class="modal-footer">
- <a href="#" class="btn primary">Primary</a>
- <a href="#" class="btn">Secondary</a>
- </div>
- </div>
- </div>
- </div>
- </div><!-- /row -->
-
- <!-- Tooltips -->
- <div class="row">
- <div class="span3">
- <h2>Tooltips</h2>
- <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
- <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
- </div>
- <div class="span9">
- <div class="twipsies well">
- <div style="position: relative">
- <p class="muted" style="margin-bottom: 0">
-Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
- </p>
- </div>
- </div>
- </div>
- </div><!-- /row -->
-
- <!-- Popovers -->
- <div class="row">
- <div class="span3">
- <h2>Popovers</h2>
- <p>Use popovers to provide subtextual information to a page without affecting layout.</p>
- <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
- </div>
- <div class="span9">
- <div class="well popover-well">
- <div class="popover-wrapper">
- <div class="popover left">
- <div class="arrow"></div>
- <div class="inner">
- <h3 class="title">Popover Title</h3>
- <div class="content">
- <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
- </div>
+ <div class="span4">
+ <h2>What's included</h2>
+ <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
+ <ul>
+ <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
+ <li>All original .less files</li>
+ <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
+ <li>Complete styleguide documentation</li>
+ <li>Three example pages with different layouts</li>
+ </ul>
</div>
- </div>
- <img class="large-bird" src="assets/img/bird.png" >
- </div>
- </div>
- </div>
- </div><!-- /row -->
-</section>
-
-
-<!-- Using Javascript w/ Bootstrap
- ================================================== -->
-
- <section id="javascript">
- <div class="page-header">
- <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
- </div>
- <div class="row">
- <div class="span3">
- <h2>Getting started</h2>
- <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
- <p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p>
- </div>
- <div class="span9">
- <h3>What's included</h3>
- <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 150px;">File</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
- <td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td>
- <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
- <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
- <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
- <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
- <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
- </tr>
- <tr>
- <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
- <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
- </tr>
- </tbody>
- </table>
- <h3>Is javascript necessary?</h3>
- <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
- <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p>
- <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>
- </div>
- </div>
-
-
-<!-- Using Bootstrap w/ Less
-================================================== -->
-<section id="less">
-<div class="page-header">
- <h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
-</div>
-<div class="row">
- <div class="span3">
- <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p>
- <p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p>
- </div>
- <div class="span9">
- <h2>How to use it</h2>
- <p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
-<pre class="prettyprint linenums">
-<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
-<script src="js/less-1.1.3.min.js"></script></pre>
-<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the Less Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p>
-
- <h2>What’s included</h2>
- <p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
- <h3>Variables</h3>
- <p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p>
-<pre class="prettyprint linenums">
-// Links
-@linkColor: #8b59c2;
-@linkColorHover: darken(@linkColor, 10);
-
-// Grays
-@black: #000;
-@grayDark: lighten(@black, 25%);
-@gray: lighten(@black, 50%);
-@grayLight: lighten(@black, 70%);
-@grayLighter: lighten(@black, 90%);
-@white: #fff;
-
-// Accent Colors
-@blue: #08b5fb;
-@green: #46a546;
-@red: #9d261d;
-@yellow: #ffc40d;
-@orange: #f89406;
-@pink: #c3325f;
-@purple: #7a43b6;
-
-// Baseline grid
-@basefont: 13px;
-@baseline: 18px;
-</pre>
-
-<h3>Commenting</h3>
-<p>Less also provides another style of commenting in addition to CSS’s normal <code>/* ... */</code> syntax.</p>
-<pre class="prettyprint linenums">
-// This is a comment
-/* This is also a comment */
-</pre>
-
-<h3>Mixins up the wazoo</h3>
-<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
-<h4>Font stacks</h4>
-<pre class="prettyprint linenums">
-#font {
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- ...
-}
-</pre>
-<h4>Gradients</h4>
-<pre class="prettyprint linenums">
-#gradient {
- ...
- .vertical (@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
- background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(@startColor, @endColor); // The standard
- }
- ...
-}
-</pre>
-
-<h3>Operations</h3>
-<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
-<pre class="prettyprint linenums">
-// Griditude
-@gridColumns: 16;
-@gridColumnWidth: 40px;
-@gridGutterWidth: 20px;
-@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Make some columns
-.columns(@columnSpan: 1) {
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-}
-</pre>
-
- <h2 id="compiling">Compiling Less</h2>
- <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
- <h3>Ways to compile</h3>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th style="width: 120px;">Method</th>
- <th>Steps</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Node with makefile</td>
- <td>
- <p>Install the less command line compiler with npm by running the following command:</p>
- <pre>$ npm install lessc</pre>
- <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
- <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
- </td>
- </tr>
- <td>Javascript</td>
- <td>
- <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
-<pre class="prettyprint">
-<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script>
-</pre>
- <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
- </td>
- </tr>
- <tr>
- <td>Command line</td>
- <td>
- <p>If you already have the less command line tool installed, simply run the following command:</p>
- <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
- <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
- </td>
- </tr>
- <tr>
- <td>Mac app</td>
- <td>
- <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
- <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
-</div>
+ </div><!-- /row -->
+ </section>
+
+ <h3>Quick-start examples</h3>
+ <p>Need some quick templates? Check out these basic examples we've put together:</p>
+ <ul class="media-grid">
+ <li>
+ <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a>
+ </li>
+ <li>
+ <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a>
+ </li>
+ <li>
+ <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
+ </li>
+ </ul>
-</section>
+ </div><!-- /#overview -->
+ <!-- Footer
+ ================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>
@@ -2168,11 +189,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
</footer>
-
</div><!-- /container -->
-
<!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
@@ -2182,6 +202,5 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
-
</body>
</html>
diff --git a/docs/javascript.html b/docs/javascript.html
index 68a3d0cd46..c9ac7e21da 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -27,7 +27,24 @@
<!-- Navbar
================================================== -->
- <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li class="active"><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+<!--
+ <div class="navbar navbar-fixed" data-scrollspy="scrollspy">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./index.html">Bootstrap</a>
@@ -44,14 +61,78 @@
</div>
</div>
</div>
-
- <div class="container">
- <!-- Masthead (blueprinty thing)
- ================================================== -->
- <header class="jumbotron subhead" id="overview">
- <h1>Javascript for Bootstrap</h1>
- <p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p>
- </header>
+ -->
+
+ <div class="container">
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Javascript for Bootstrap</h1>
+ <p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a></p>
+ </header>
+
+
+<!-- Using Javascript w/ Bootstrap
+ ================================================== -->
+
+ <section id="javascript">
+ <div class="page-header">
+ <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
+ </div>
+ <div class="row">
+ <div class="span3">
+ <h2>Getting started</h2>
+ <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
+ <p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p>
+ </div>
+ <div class="span9">
+ <h3>What's included</h3>
+ <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">File</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
+ <td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td>
+ <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
+ <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
+ <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
+ <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
+ <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
+ </tr>
+ <tr>
+ <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
+ <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
+ </tr>
+ </tbody>
+ </table>
+ <h3>Is javascript necessary?</h3>
+ <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
+ <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p>
+ <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>
+ </div>
+ </div>
+</section>
<!-- Modal
@@ -638,28 +719,27 @@ $('#my-modal').bind('hidden', function () {
</section>
+ <!-- Footer
+ ================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>
- Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
- Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
+ Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
</footer>
-
</div><!-- /container -->
-
<!-- Le javascript -->
- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-modal.js"></script>
- <script src="../js/bootstrap-alerts.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-popover.js"></script>
+ <script src="../js/bootstrap-transitions.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
- <script src="../js/bootstrap-tabs.js"></script>
-
+ <script src="assets/js/application.js"></script>
</body>
</html>
diff --git a/docs/less.html b/docs/less.html
new file mode 100644
index 0000000000..806c2eedec
--- /dev/null
+++ b/docs/less.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li class="active"><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Using LESS</h1>
+ <p class="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p>
+ </header>
+
+
+<!-- Using Bootstrap w/ Less
+================================================== -->
+<section id="less">
+<div class="page-header">
+ <h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
+</div>
+<div class="row">
+ <div class="span3">
+ <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p>
+ <p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p>
+ </div>
+ <div class="span9">
+ <h2>How to use it</h2>
+ <p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
+<pre class="prettyprint linenums">
+<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
+<script src="js/less-1.1.3.min.js"></script></pre>
+<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the Less Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p>
+
+ <h2>What’s included</h2>
+ <p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
+ <h3>Variables</h3>
+ <p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p>
+<pre class="prettyprint linenums">
+// Links
+@linkColor: #8b59c2;
+@linkColorHover: darken(@linkColor, 10);
+
+// Grays
+@black: #000;
+@grayDark: lighten(@black, 25%);
+@gray: lighten(@black, 50%);
+@grayLight: lighten(@black, 70%);
+@grayLighter: lighten(@black, 90%);
+@white: #fff;
+
+// Accent Colors
+@blue: #08b5fb;
+@green: #46a546;
+@red: #9d261d;
+@yellow: #ffc40d;
+@orange: #f89406;
+@pink: #c3325f;
+@purple: #7a43b6;
+
+// Baseline grid
+@basefont: 13px;
+@baseline: 18px;
+</pre>
+
+<h3>Commenting</h3>
+<p>Less also provides another style of commenting in addition to CSS’s normal <code>/* ... */</code> syntax.</p>
+<pre class="prettyprint linenums">
+// This is a comment
+/* This is also a comment */
+</pre>
+
+<h3>Mixins up the wazoo</h3>
+<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
+<h4>Font stacks</h4>
+<pre class="prettyprint linenums">
+#font {
+ .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ ...
+}
+</pre>
+<h4>Gradients</h4>
+<pre class="prettyprint linenums">
+#gradient {
+ ...
+ .vertical (@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
+ background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(@startColor, @endColor); // The standard
+ }
+ ...
+}
+</pre>
+
+<h3>Operations</h3>
+<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
+<pre class="prettyprint linenums">
+// Griditude
+@gridColumns: 16;
+@gridColumnWidth: 40px;
+@gridGutterWidth: 20px;
+@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Make some columns
+.columns(@columnSpan: 1) {
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+}
+</pre>
+
+ <h2 id="compiling">Compiling Less</h2>
+ <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
+ <h3>Ways to compile</h3>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th style="width: 120px;">Method</th>
+ <th>Steps</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Node with makefile</td>
+ <td>
+ <p>Install the less command line compiler with npm by running the following command:</p>
+ <pre>$ npm install lessc</pre>
+ <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
+ <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
+ </td>
+ </tr>
+ <td>Javascript</td>
+ <td>
+ <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
+<pre class="prettyprint">
+<link rel="stylesheet/less" href="/path/to/bootstrap.less">
+<script src="/path/to/less.js"></script>
+</pre>
+ <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>Command line</td>
+ <td>
+ <p>If you already have the less command line tool installed, simply run the following command:</p>
+ <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
+ <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
+ </td>
+ </tr>
+ <tr>
+ <td>Mac app</td>
+ <td>
+ <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
+ <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+</section>
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
+ Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+ </p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
new file mode 100644
index 0000000000..9334e830c1
--- /dev/null
+++ b/docs/scaffolding.html
@@ -0,0 +1,383 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap, from Twitter</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le styles -->
+ <link href="../bootstrap.css" rel="stylesheet">
+ <link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
+ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
+ </head>
+
+ <body>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-fixed">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="./index.html">Bootstrap</a>
+ <ul class="nav">
+ <li><a href="./index.html">Overview</a></li>
+ <li class="active"><a href="./scaffolding.html">Scaffolding</a></li>
+ <li><a href="./base-css.html">Base CSS</a></li>
+ <li><a href="./components.html">Components</a></li>
+ <li><a href="./javascript.html">Javascript plugins</a></li>
+ <li><a href="./less.html">Using LESS</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <!-- Masthead
+ ================================================== -->
+ <header class="jumbotron subhead" id="overview">
+ <h1>Scaffolding</h1>
+ <p class="lead">Responsive 12-column grid and fixed- and fluid-width layouts</p>
+ </header>
+
+
+<!-- Grid system
+================================================== -->
+<section id="grid-system">
+ <div class="page-header">
+ <h1>Grid system <small>12 columns with a responsive twist</small></h1>
+ </div>
+
+ <h2>Default 940px grid</h2>
+ <div class="row show-grid">
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span4">4</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span4">4</div>
+ <div class="span8">8</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span6">6</div>
+ <div class="span6">6</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span12">12</div>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+ <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
+ <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
+ </div>
+ <div class="span4">
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span4">...</div>
+ <div class="span8">...</div>
+</div>
+</pre>
+ </div>
+ <div class="span4">
+ <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
+ </div>
+ </div><!-- /row -->
+
+ <h2>Offsetting columns</h2>
+ <div class="row show-grid">
+ <div class="span4">4</div>
+ <div class="span4 offset4">4 offset 4</div>
+ </div><!-- /row -->
+ <div class="row show-grid">
+ <div class="span3 offset3">3 offset 3</div>
+ <div class="span3 offset3">3 offset 3</div>
+ </div><!-- /row -->
+ <div class="row show-grid">
+ <div class="span8 offset4">8 offset 4</div>
+ </div><!-- /row -->
+
+ <br>
+
+ <h2>Nesting columns</h2>
+ <div class="row">
+ <div class="span6">
+ <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
+ <h4>Example</h4>
+ <div class="row show-grid">
+ <div class="span6">
+ Level 1 of column
+ <div class="row show-grid">
+ <div class="span3">
+ Level 2
+ </div>
+ <div class="span3">
+ Level 2
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span6">
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span12">
+ Level 1 of column
+ <div class="row">
+ <div class="span6">Level 2</div>
+ <div class="span6">Level 2</div>
+ </div>
+ </div>
+</div>
+</pre>
+ </div>
+ </div>
+
+ <h2>Grid customization</h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>Variable</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>@gridColumns</code></td>
+ <td>16</td>
+ <td>The number of columns within the grid</td>
+ </tr>
+ <tr>
+ <td><code>@gridColumnWidth</code></td>
+ <td>40px</td>
+ <td>The width of each column within the grid</td>
+ </tr>
+ <tr>
+ <td><code>@gridGutterWidth</code></td>
+ <td>20px</td>
+ <td>The negative space between each column</td>
+ </tr>
+ <tr>
+ <td><code>@siteWidth</code></td>
+ <td><em>Computed sum of all columns and gutters</em></td>
+ <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="row">
+ <div class="span4">
+ <h3>Variables in LESS</h3>
+ <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
+ </div>
+ <div class="span4">
+ <h3>How to customize</h3>
+ <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p>
+ </div>
+ <div class="span4">
+ <h3>Staying responsive</h3>
+ <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
+ </div>
+ </div><!-- /row -->
+
+</section>
+
+
+
+<!-- Layouts (Default and fluid)
+================================================== -->
+<section id="layouts">
+ <div class="page-header">
+ <h1>Layouts <small>Basic templates to create webpages</small></h1>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>Fixed layout</h2>
+ <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
+ <div class="mini-layout">
+ <div class="mini-layout-body"></div>
+ </div>
+<pre class="prettyprint linenums">
+<body>
+ <div class="container">
+ ...
+ </div>
+</body>
+</pre>
+ </div><!-- /col -->
+ <div class="span6">
+ <h2>Fluid layout</h2>
+ <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
+ <div class="mini-layout fluid">
+ <div class="mini-layout-sidebar"></div>
+ <div class="mini-layout-body"></div>
+ </div>
+<pre class="prettyprint linenums">
+<body>
+ <div class="container-fluid">
+ <div class="sidebar">
+ ...
+ </div>
+ <div class="content">
+ ...
+ </div>
+ </div>
+</body>
+</pre>
+ </div><!-- /col -->
+ </div><!-- /row -->
+</section>
+
+
+
+
+<!-- Responsive design
+================================================== -->
+<section id="responsive">
+ <div class="page-header">
+ <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
+ </div>
+ <!-- Supported devices -->
+ <div class="row">
+ <div class="span4">
+ <img src="assets/img/responsive-illustrations.png" alt="Responsive devices">
+ </div>
+ <div class="span8">
+ <h2>Supported devices</h2>
+ <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>Label</th>
+ <th>Layout width</th>
+ <th>Column width</th>
+ <th>Gutter width</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Smartphones</td>
+ <td>480px and below</td>
+ <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+ </tr>
+ <tr>
+ <td>Portrait tablets</td>
+ <td>480px to 768px</td>
+ <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+ </tr>
+ <tr>
+ <td>Landscape tablets</td>
+ <td>768px to 940px</td>
+ <td>44px</td>
+ <td>20px</td>
+ </tr>
+ <tr>
+ <td>Default</td>
+ <td>940px and up</td>
+ <td>60px</td>
+ <td>20px</td>
+ </tr>
+ <tr>
+ <td>Large display</td>
+ <td>1210px and up</td>
+ <td>70px</td>
+ <td>30px</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h3>What they do</h3>
+ <p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
+ <ul>
+ <li>Modify the width of column in our grid</li>
+ <li>Stack elements instead of float wherever necessary</li>
+ <li>Resize headings and text to be more appropriate for devices</li>
+ </ul>
+ </div>
+ </div>
+
+ <br>
+
+ <!-- Media query code -->
+ <h2>Using the media queries</h2>
+ <div class="row">
+ <div class="span5">
+ <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
+ <ol>
+ <li>Use the compiled responsive version, bootstrap.reponsive.css</li>
+ <li>Add @import "responsive.less" and recompile Bootstrap</li>
+ <li>Compile responsive.less as a separate file and include that</li>
+ </ol>
+ <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
+ </div>
+ <div class="span7">
+<pre class="prettyprint linenums">
+ // Landscape phones and down
+ @media (max-width: 480px) { ... }
+
+ // Landscape phone to portrait tablet
+ @media (min-width: 480px) and (max-width: 768px) { ... }
+
+ // Portrait tablet to landscape and desktop
+ @media (min-width: 768px) and (max-width: 940px) { ... }
+
+ // Large desktop
+ @media (min-width: 1210px) { .. }
+</pre>
+ </div>
+ </div>
+</section>
+
+
+
+ <!-- Footer
+ ================================================== -->
+ <footer class="footer">
+ <p class="pull-right"><a href="#">Back to top</a></p>
+ <p>
+ Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
+ Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+ </p>
+ </footer>
+ </div><!-- /container -->
+
+ <!-- Le javascript -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+ <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script>$(function () { prettyPrint() })</script>
+ <script src="../js/bootstrap-transitions.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="assets/js/application.js"></script>
+ </body>
+</html>
diff --git a/lib/mixins.less b/lib/mixins.less
index 5b05654d50..6d034cbcc6 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -162,12 +162,19 @@
}
// Background clipping
+// Heads up: FF 3.6 and under need padding instead of padding-box
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
+// Resize anything
+.resizable(@direction: both) {
+ resize: @direction; // Options: horizontal, vertical, both
+ overflow: auto; // Safari fix
+}
+
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
-webkit-column-count: @columnCount;
--
GitLab
From b4c894961c0b75361ead496f1686eb3cf41c5c97 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Wed, 26 Oct 2011 23:24:22 -0700
Subject: [PATCH 51/66] address issue #414 and fix up a number of docs loose
ends
---
docs/assets/css/docs.css | 58 +++++++++-------------------------------
docs/base-css.html | 14 ++++++----
docs/components.html | 2 +-
docs/less.html | 2 +-
docs/scaffolding.html | 2 +-
5 files changed, 24 insertions(+), 54 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 8ed81e713a..3a4dcff1c3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -15,7 +15,7 @@ body {
background-repeat: repeat-x;
}
-/* Tweak topbar brand link to be super sleek
+/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
body > .navbar-fixed .brand {
padding-right: 0;
@@ -29,6 +29,12 @@ body > .navbar-fixed .brand:hover {
text-decoration: none;
}
+/* Space out sub-sections more
+-------------------------------------------------- */
+.page-header {
+ margin-top: 36px;
+}
+
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
@@ -92,12 +98,12 @@ body > .navbar-fixed .brand:hover {
color: #999;
}
-
/* Specific jumbotrons
------------------------- */
/* supporting docs pages */
.subhead {
padding-bottom: 14px;
+ margin-bottom: 45px;
border-bottom: 3px solid #e5e5e5;
}
.subhead h1,
@@ -224,46 +230,6 @@ body > .navbar-fixed .brand:hover {
}
-/* Topbar special styles
--------------------------------------------------- */
-.topbar-wrapper {
- position: relative;
- height: 40px;
- margin: 5px 0 15px;
-}
-.topbar-wrapper .topbar {
- position: absolute;
- margin: 0 -20px;
-}
-.topbar-wrapper .topbar .topbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-
-/* Topbar in js docs
-------------------------- */
-#bootstrap-js .topbar-wrapper {
- z-index: 1;
-}
-#bootstrap-js .topbar-wrapper .topbar {
- position: absolute;
- margin: 0 -20px;
-}
-#bootstrap-js .topbar-wrapper .topbar .topbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-#bootstrap-js .topbar-wrapper .container {
- width: auto;
-}
-
-
/* Popover docs
-------------------------------------------------- */
.popover-well {
@@ -288,15 +254,13 @@ img.large-bird {
}
-/* Pretty Print
+/* Misc
-------------------------------------------------- */
+
pre.prettyprint {
overflow: hidden;
}
-
-/* Wells
--------------------------------------------------- */
.well form {
margin-bottom: 0;
}
@@ -311,6 +275,7 @@ h2 + table {
margin-top: 5px;
}
+
/* Responsive Docs
-------------------------------------------------- */
@media (max-width: 480px) {
@@ -385,6 +350,7 @@ h2 + table {
}
+
@media (min-width: 768px) and (max-width: 940px) {
/* Scale down the jumbotron content */
diff --git a/docs/base-css.html b/docs/base-css.html
index e3b3782c0a..47dff40e72 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -197,7 +197,8 @@
<h2>Lists</h2>
<div class="row">
<div class="span3">
- <h4>Unordered <code><ul></code></h4>
+ <h4>Unordered</h4>
+ <p><code><ul></code></p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@@ -217,7 +218,8 @@
</ul>
</div>
<div class="span3">
- <h4>Unstyled <code><ul.unstyled></code></h4>
+ <h4>Unstyled</h4>
+ <p><code><ul class="unstyled"></code></p>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@@ -237,7 +239,8 @@
</ul>
</div>
<div class="span3">
- <h4>Ordered <code><ol></code></h4>
+ <h4>Ordered</h4>
+ <p><code><ol></code></p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@@ -250,7 +253,8 @@
</ol>
</div>
<div class="span3">
- <h4>Description <code><dl></code></h4>
+ <h4>Description</h4>
+ <p><code><dl></code></p>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
@@ -286,7 +290,7 @@
<h1>Heading</h1>
<p>Something right here...</p>
</div></pre>
- <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
+ <p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
</td>
</tr>
<tr>
diff --git a/docs/components.html b/docs/components.html
index 0e3f0a223f..59273ac195 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -548,7 +548,7 @@
<div class="row">
<div class="span3">
<h2>Block messages</h2>
- <p><code>.alert-message.block-message</code></p>
+ <p><code><div class="alert-message block-message"></code></p>
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
</div>
diff --git a/docs/less.html b/docs/less.html
index 806c2eedec..d5a467bfa2 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -185,7 +185,7 @@
</tr>
<td>Javascript</td>
<td>
- <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
+ <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p>
<pre class="prettyprint">
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 9334e830c1..2a5ae8bc63 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -234,7 +234,7 @@
</div><!-- /col -->
<div class="span6">
<h2>Fluid layout</h2>
- <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
+ <p><code><div class="fluid-container"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
--
GitLab
From 19feb1b1ff56db21bc36106e3b57943ca490a912 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Wed, 26 Oct 2011 23:25:57 -0700
Subject: [PATCH 52/66] fix new navbar in components
---
docs/components.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/components.html b/docs/components.html
index 59273ac195..c18d8c113e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -158,7 +158,7 @@
<h2>Fixed navbar</h2>
<div class="navbar navbar-static" data-dropdown="dropdown">
<div class="navbar-inner">
- <div class="container">
+ <div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
--
GitLab
From 20b9390a9e3a94dae86af388821aa8f458ba057f Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 27 Oct 2011 09:35:58 -0700
Subject: [PATCH 53/66] update docs for responsive
---
docs/assets/css/docs.css | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 3a4dcff1c3..7238badb35 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -351,6 +351,21 @@ h2 + table {
}
+@media (min-width: 480px) and (max-width: 768px) {
+
+ /* Scale down the jumbotron content */
+ .jumbotron h1 {
+ font-size: 54px;
+ }
+
+ .jumbotron h1,
+ .jumbotron p {
+ margin-right: 40%;
+ }
+
+}
+
+
@media (min-width: 768px) and (max-width: 940px) {
/* Scale down the jumbotron content */
--
GitLab
From cb13f010e2dd1eb8f37048b5664ff455b60eba05 Mon Sep 17 00:00:00 2001
From: Bulat Shakirzyanov <mallluhuct@gmail.com>
Date: Thu, 27 Oct 2011 18:51:49 -0700
Subject: [PATCH 54/66] implement left and right tabs styles
---
lib/patterns.less | 72 ++++++++++++++++++++++++++++++++++++++++-------
1 file changed, 62 insertions(+), 10 deletions(-)
diff --git a/lib/patterns.less b/lib/patterns.less
index f1badc46d4..1db3158313 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -379,19 +379,71 @@
}
// Tabs on left
- &.tabs-left .tabs {
- float: left;
- }
- &.tabs-left .tabs > li {
- float: none;
+ &.tabs-left {
+ .clearfix();
+
+ .tab-content {
+ float: left;
+ }
+ .tabs {
+ float: left;
+
+ > li {
+ float: none;
+ margin-bottom: -1px;
+ margin-right: -1px;
+ > a {
+ margin-right: 0;
+ margin-bottom: 2px;
+ .border-radius(4px 0 0 4px);
+
+ &:hover {
+ border-color: transparent;
+ border-right-color: #ddd;
+ }
+ }
+ }
+
+ > .active > a,
+ > .active > a:hover {
+ border-color: #ddd;
+ border-right-color: transparent;
+ }
+ }
}
// Tabs on right
- &.tabs-right .tabs {
- float: right;
- }
- &.tabs-right .tabs > li {
- float: none;
+ &.tabs-right {
+ .clearfix();
+
+ .tab-content {
+ float: right;
+ }
+ .tabs {
+ float: right;
+
+ > li {
+ float: none;
+ margin-bottom: -1px;
+ margin-left: -1px;
+ > a {
+ margin-left: 0;
+ margin-bottom: 2px;
+ .border-radius(4px 0 0 4px);
+
+ &:hover {
+ border-color: transparent;
+ border-left-color: #ddd;
+ }
+ }
+ }
+
+ > .active > a,
+ > .active > a:hover {
+ border-color: #ddd;
+ border-left-color: transparent;
+ }
+ }
}
}
--
GitLab
From f3128d0fa1f1f14104b7c4ffab54f083b99a108e Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 27 Oct 2011 23:00:09 -0700
Subject: [PATCH 55/66] overhauled the front page to feel a bit more
marketing-like, added the awesome glyphicons to bring some life to the docs
---
bootstrap.css | 2 +-
docs/assets/css/docs.css | 35 +++++++-
.../img/glyphicons/glyphicons_009_magic.png | Bin 0 -> 1426 bytes
.../img/glyphicons/glyphicons_042_group.png | Bin 0 -> 1386 bytes
.../img/glyphicons/glyphicons_079_podium.png | Bin 0 -> 1328 bytes
.../glyphicons/glyphicons_082_roundabout.png | Bin 0 -> 1516 bytes
.../glyphicons_155_show_thumbnails.png | Bin 0 -> 1179 bytes
.../img/glyphicons/glyphicons_163_iphone.png | Bin 0 -> 1235 bytes
.../glyphicons_214_resize_small.png | Bin 0 -> 1406 bytes
.../glyphicons/glyphicons_266_book_open.png | Bin 0 -> 1405 bytes
docs/index.html | 85 ++++++++++++++++--
11 files changed, 112 insertions(+), 10 deletions(-)
create mode 100644 docs/assets/img/glyphicons/glyphicons_009_magic.png
create mode 100644 docs/assets/img/glyphicons/glyphicons_042_group.png
create mode 100644 docs/assets/img/glyphicons/glyphicons_079_podium.png
create mode 100644 docs/assets/img/glyphicons/glyphicons_082_roundabout.png
create mode 100644 docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png
create mode 100644 docs/assets/img/glyphicons/glyphicons_163_iphone.png
create mode 100644 docs/assets/img/glyphicons/glyphicons_214_resize_small.png
create mode 100644 docs/assets/img/glyphicons/glyphicons_266_book_open.png
diff --git a/bootstrap.css b/bootstrap.css
index 0baa88d110..ed0556b3d8 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: Wed Oct 26 21:03:54 PDT 2011
+ * Date: Thu Oct 27 12:48:41 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).
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 7238badb35..66e87fdf9e 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -5,6 +5,7 @@
Special styles for presenting Bootstrap's documentation and examples
*/
+
/* Body and structure
-------------------------------------------------- */
body {
@@ -15,6 +16,7 @@ body {
background-repeat: repeat-x;
}
+
/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
body > .navbar-fixed .brand {
@@ -29,12 +31,14 @@ body > .navbar-fixed .brand:hover {
text-decoration: none;
}
+
/* Space out sub-sections more
-------------------------------------------------- */
.page-header {
margin-top: 36px;
}
+
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
@@ -119,7 +123,7 @@ body > .navbar-fixed .brand:hover {
-------------------------------------------------- */
.quick-links {
padding: 5px 20px;
- margin: 60px 0;
+ margin: 45px 0;
list-style: none;
text-align: center;
background-color: #eee;
@@ -149,13 +153,40 @@ body > .navbar-fixed .brand:hover {
}
+/* Marketing section of Overview
+-------------------------------------------------- */
+.marketing .row {
+ margin-bottom: 18px;
+}
+.marketing h1 {
+ margin-bottom: 18px;
+}
+.marketing h2,
+.marketing h3 {
+ font-weight: 300;
+ color: #000;
+}
+.marketing h2 {
+ margin-bottom: 9px;
+}
+.marketing p {
+ margin-right: 10px;
+}
+.marketing img {
+ float: left;
+ margin: 7px 10px 0 0;
+}
+
+
/* Footer
-------------------------------------------------- */
.footer {
- padding: 30px 0;
+ margin-top: 45px;
+ padding: 35px 0 36px;
border-top: 1px solid #e5e5e5;
}
.footer p {
+ margin-bottom: 0;
color: #555;
}
diff --git a/docs/assets/img/glyphicons/glyphicons_009_magic.png b/docs/assets/img/glyphicons/glyphicons_009_magic.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef048aaaae38a1a4758df72aaaf87f33d13e2be5
GIT binary patch
literal 1426
zcmaJ>ZEVzJ9Pbzz8;nI3h|HZy?IggmyFTsh+Ph{4-g<ZLCO7Bp(94iO*FJYw)@y6q
z<L(xnyeNtAL6(5QNCGjyhb;`1AdZ>Mmqb9~%OFugd|77H4`>#3iPI0pr?<PY4}>Od
zpXcfC_xr#1weGGbSFe0zC5B<EBOSpQdat+d>MHb{&iUujtHBB-tR5|C<pcv_0ZHqF
zcqAjFU<?XU;f3q44Z|w`mg5O45#7d#TE->V7*{@{BQ}P$ZO!X~*bgnd52j?*Pt1-_
z61Xh+iRU~~5Y>5@mOBOv*fY=-7YF)9pG0ikg16;4B#?oYfaf!cYI1o$QPkzo+CC-;
zya=)S{ltP(iD);@YX-zUF5naa18|0NQSMfjWm|9>P=Ew9NzqP<<=iv}0A9KXWX+J0
zTr3za*+M%%k+v+IBgtGY=gPTVnvo(YpU-D&(6kdFoMu6_guGKVo5~77Xo`lcTe7C&
zwxZCdWi3B}JY5JOqer8Q!m3$H6iOMH7j%+x0Wy=Z<0_&}D+cemabL6<FX)hrK~u{b
zBC1ESsZ2(>d$6H0P!bn$de%^iaY`Zy6_|mlWg@4jqDRPc?rB3t1r(H^CT8ugk)WT*
zW@U+EJR!#I1B{p9!xR;44=^D*==HLED8RS30@gNW3oIp~6PJXzfMt0P@VMK(Zib>l
zz#E{$K?;Q23;;}k36!}J)wBdvgtk$eE8pYN59D&Z0R>Al;+m$ETcta#S(=&Fbe!+;
z;88)8ReNvOvE(T<<h@V|8(Ic07J`%SXP@!{iegcOGzy-gykUk82RuFx<8B3Xm?lbG
zX-UG$aff*p<!T8Rc->)&_3^05*bs0NByvU)IZL(_SnAM#VwF~kY<CH#2x<zY!zsa}
zkX0;VOG+u|X<5`%bC;PB6lIqr82xRe-HeKixW(0i47o(Sc)X;0%Sbd5_HuC+(PnX)
zp^8S>K(oqR`J)rVDyT>>5YOK^vwhW?PeASWpt~lttX>C>+7-w5y%Jep*IePKtvS7q
z4@5pVcDM7^xedA5_lM>-v`&8M`}QnGn^zo9to^8dZR$+L{M(J!9_EfDn4P_KQx`YA
z^kdUM>)zS1`9w!cXm?{%ZtlGIr?0zf9JQPOeBFgVdhnW<xH%F8hkv+w;^g3L^3btQ
z9XoH-dm9E1R1bev{onpyhF=~3ysvIgeY0_Ngs3Teclu=IDbN!covB)veebB_t8Ehx
zO{AW>*wHaK(>yxHH|*e<Tf<Ym*D2%NvLn89XZogm_tNseu1XiiDC6<T<^R5WJN@#r
zH}-U$O+FL7G(Yz9@2BR@zxm=fU%c`BWwTCk7Df;EO?OSKXq>CMeQ;*`osT8+(63G7
pBU7tdl;1vdPH%eb!q8=`65AMit9Sq2p}75*jD)&^qwTv7{10K9<ZA!`
literal 0
HcmV?d00001
diff --git a/docs/assets/img/glyphicons/glyphicons_042_group.png b/docs/assets/img/glyphicons/glyphicons_042_group.png
new file mode 100644
index 0000000000000000000000000000000000000000..29393dda1da3e71e88b4b44f2acc77a634076590
GIT binary patch
literal 1386
zcmaJ>eQ4Zd7|&LxUAu~tQoDgJq&S%FE^m@vau<7@_m%dhsr7nb9UU`G-n+}1FO&Cr
zABwo@lwlR845cWd7R3*SIGAXs(=x@*4fltjj{3)NL(w|t7aK#IZ?1P;{}>A-dEO__
z@ArIX&)`5`Tg&<uf*{(`{mBe|cj3FE`C9zkYTeq0U+Yk67!BDuR8m|>#58*pl4(=P
z!wgik%7b&Thaj5H>)By6EZ;4vwi#4>n_$^=Fq$BGwv-)39fOD*g?ZhIQoqj}rbu0j
zQul>qAUg?I(EF<{9I6gv)#{iU(WouGWKUVd1SUiZSvC#J6U$Mm#w%jkSJM<(GeKif
zYB8u`d5}!lE+j)i5KsXRNS+BYT(=+yn@JWhfCenhumMI8IaUOKtX~xN=4v@Hla%Vd
z@F_|a5OPGCE|p5b5*M`HJk3NR5ubx)1K1+qRV<{G1D4m-U`Rqwb#({nwnh4k%BWpL
zQ3^-8n1boZ@)EJ-)eD77Mwb<bW`ck=O+T-iwTCkBau`>%_OcZR(i!O4MOVfB$aOWq
zxOP`})G*Z4B|E3+8nrw%m4*g1p@lpg6jO@`M=svu>bQZ5k+jvK|23VAQpKXKiF_!<
za}mIY`GmwU$#{%UvB_{)NTgzkcsCGyXFkDlAl3vmj15bm8vtI4hq(m9q(C^vN=XK!
zI38<be5`>@TOLv@75YwntbQ4rx++#oxKKg1o3(ADF)D)v8`)mLcF4p~h?EsoxBRo;
z$9kmD)yJVGxwc8x8X@Xe@DG?UU>E^s$l~M~CM@x+6bnT{Jl73aiKXgTZCSw@c}oca
z*J>FSggJ>3A_+WXLJDvcjf2rt5$VW)^$Cp`s4f}0KP94}Sb1EIfCh6)(Lhvh-l#YQ
zU9~N5hi58=u|rebu^!qVMnlKgnzTqmFC(w1mrZZO60d|WF6|;dENwHi@Cv(lSK-T_
zy-N@)R;QD(Z29EEzNgksfHhCN)e0uMK)i2P8)}l2_P(E+*X>%n^X=cZKRz|RDtd@3
zUAp;T<>A#M#-a1_(<e3`eYNM_3+6kXMf@?jASf>pKaM{Z`*rZn=brrOnfZs(Cr8$I
ze%b!$)=vJWeS22Wxyk!C^xoci_LC#R4?}l^u6uv9bK&oQH@)~uS^oCe_vHKw7q0(h
z?zFgVd{*xJ^SFHGyA5Fc#A{N!wsF;|{pZxYx4Zh)-Z##)w;Vr4&3t}on!o7YWluiB
zfAR5Ot^Y`~=bDL)M8^#Wa!qf>uQ|GD=X-M(`{!Ffz44pfr%z4I-7+x!`nG0k_W6!n
u$I64Zg+7{kw)*vge)xm@f8fa3m1~FtliO!FIP#(Y_e-Y+lKbNiO#Bax<<`vr
literal 0
HcmV?d00001
diff --git a/docs/assets/img/glyphicons/glyphicons_079_podium.png b/docs/assets/img/glyphicons/glyphicons_079_podium.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5544545182313acaad4c785762642963b357ac8
GIT binary patch
literal 1328
zcmaJ>Ux?du9FNy=%wro98SLc1m=mY4Hoqio(uV8RG=Hvz>+S4ScAMgwCckTQ%|DZ0
zZSQd6rUQ%OtWUnl3c?{G^KIZj1%245=N?3554r~t-^N66h%kTYwYNTu1(N)JzkEKQ
z@Beg{mlh6AJvK!U#KB@gDdYDHzK`sm#Lwp^-hC0jrjfdeR=hRT)&odLrdNYx(b4O$
z40Utk<!f+`AY%Vml~uG_S`-b>N$3$K(Q$mtCWyIQ$JdP}L}U%tEjLTu`uq!uw9G7Z
zGF1X4Uxp2<uo=LW&83R5*)%dHm76E$IwBTuAkxW>W4oc)$x;Jd5wD|Tnj!}f)XY-5
zPOX-fN!be^nM#1T0eC?2OoHK(f*>3xS-=1qur$NQ8A0S&5dd;{QP^5wu8Czu8`{FV
zEY(2B7iqfPZYSDY!VBs&lgVTv4VH~#L_FMZk=}{B;p|93fuRvtKC(QQj1={n*Fsqe
zd%7Ef<CjW%!frTB6iyl4(S4dp0NQb)xCZDDmEk=%?u!m98$P7VF!Wl1f$On0J0j!U
zJ=o9)Xc~JszZKYnI8B3wHguqiLhKYX@CbV@o(L>lK;2e6qZNHEDp{)4vP_XrsXUhf
ze43XvhEehoud+%yEy$`Q=aWE)j70+DM0}DkF_+B<a!Sf``E)YLFe*q(tfnwP<#+&i
ziI+y)q8lRJHDF{k;#&8(>;t)?96%j;LB;dzQL8LBJmiH9&nM-T6j{;@%Z>I?9fzL6
zz<LFmTHrb4pb(;UANznw1BMZBge(r8VbU7UYEmkb;<+SXHI^E3&9Q`y;?`sV=W2`#
z(wxQ!85uX3paPDfu`{M2A`97Y*rAe*hAZ2Ox<s^fw~o^hH{qJzvJo|3w>SKTWq59Q
zCUkV$K4a=ZbB>Oh(Y7#mu-cWO$HWK6W8FJK;*p4!d$Wi)d(#YEJi-B<)$XaM96aYg
z6cwq`xl#M??%iDMv)6k)hA2$meD1GD8ZYJMxevCi>BGN0VIF!k8=u|Iub-ZrIIe7+
zI`QnU7tihcGT--}o?LwL^dAc!U%dS9d;30gsOqJu>z_=%di#6jn`-5u+H3jl+ZWza
zq|~>C?K?kSe&-ik+W&X&edp-8JGn#GN|o)0J8|XYmG0sjLT~-j;}_<YpKdK|HD-Ti
z`~BDpGj6|pwfDQcer)Dw=ezSC{n^*nzh2uhs?D1dv1GyOo|V*NThGLrJJ)aIuR!v^
a;VN<V&0y!N1M2PQA68VCluz^3^Zx^<@v~_F
literal 0
HcmV?d00001
diff --git a/docs/assets/img/glyphicons/glyphicons_082_roundabout.png b/docs/assets/img/glyphicons/glyphicons_082_roundabout.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbda0935c54e2601092be9ad2619ecb658b8dcef
GIT binary patch
literal 1516
zcmaJ>TWr%-7<OnWgS8rn4RO&X<BGuwiI1JcNlXGbHyR+NN<vpvNZ{HhiC4!qwnLLj
zn<%hN3@Y&gOh^pSn9wGHs%_8-Cg^}saT%i9G#G=83f>qnE`p6+*l|co9}t#opL6_u
z-+%Xp=B9;p<ED<oFsv@t7*3$~H0yq$20eRzyuS>+rkIgdGpVM{PF{x?C#vlbkLCCb
zOh8^Nt~v$%7*_RAO0}A;@g=OF<{Z3*aTIbIVq=(penI1f4rt=-Fe51e;`ZUA1TKjI
z;!SrP#I+F2N{wAQOm;P;gsu+3Cld4L;r;@P1ai>i@j^~k47Ly;O1dmsTgN1Ummp?G
zfOz6mYrGi`sXD~n4qz7m18|0NP)?V}<C%lgfC40-Ns6{p9@a^-0N~||K-P3I%_hRp
zvMsa=5LwgISd#4Q>~wTG9jcxoDWA`0Y0$JCA?!v`G5LaBG3qM{VQ2`tq?wYc;Fcoa
zuI9}EfjoT@LQadvhlLfRoG6qsvcPL3<p5+ZXT?=Q8)gDNb>o?6BURKOnSh3x*9BCM
zbbW=4a`${g6`&{#<Fvdkm*Nx!63Q?K71KaYQ6-O%=j>8lLIvdIuqx!Oud#4|$mb=I
zW!w?Q=>v?H2}LO?9ORe?9rk)Xp$HcWx`4+rW(kZWq7#RRxFHwE(ZNV4=yka$DgwM5
z9Su_;;$#3|IEJfmV~Sz&iU2L67FT-84L+C4hIGiAs-99+xzZ}lS=CgHtg7Lmq#KX(
zf}~h`tBz$)p)Re4VpLaic&QMq^bGre@&bzTpa^LcJVkk<3?1d%J~!iZ0Xj+(Wv)0P
zVU@U}ArH#c2rlqCqm;)NLQUq004G5rXGDQDB~ymw4&`LCypkoWOIVp#GAJE(5vKXP
zY!dS_a#71lf~puRj2th^D@0!J@RL?E$`az1R!?Ne5#pue5#3usqLHwc!?TDs!_y2E
zG{QQX)$|SgIEL9a#==~xaOumfgR9no+V|?VJrviORflZ#AJ(y>uI#G6PIoWN&b7%4
z=Gtyn@0sYmyW{H1(}k-2xBpvTeP-v3Gh4SDXz_8g2Qqhe)=X)B>GLIlBR^a|H<Q(_
zZCcnn=4z6RGu2<rp1yqBjEmfNzfAo5->OFo23vM#A77Yrrfu?{$yiU}_2T{4YI_py
zESBHhoTy)s{gqgg`Ny$*7B{dD^lgo#4t{gu{K;b5K>t)%gOF@%q_=;v{p+2<-Y(6?
z%n9#3JM{6pwQqqNjA!!keHTvMyVUdcwT@-K|MA&_f_ui|b7}3;&}HYHwaUJucmCS-
z{Q<K2(Ad7j`~FwP`oCIxWZR?bXKyyx`r0?#!8#sKU|!st{y91GY-3<9cX7J^ynW5y
zQ`D$bZ~V%}fh||BRG-*jE?!_0zdgOQb`!RTpU}PMMD@m59#{7wzin{Zr#0JG2I~74
z*N(sa#vndnQgMi?J$UQbweHo&*dv>Pa`^P<4~E7c9{r&I<mMd@C$;>x?AB1*m>usV
eU;U}mR)c-CsNvrFp5-^J|8FeP6y6_Px%PkgwiJ*6
literal 0
HcmV?d00001
diff --git a/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png b/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png
new file mode 100644
index 0000000000000000000000000000000000000000..1062f4844e326ad2ebe81ee5eb0edab6d99d6c3e
GIT binary patch
literal 1179
zcmaJ>J#5oJ7&YQYs8S_ZkU#>AD>f3}*@>N)rmbtoG!iLQ8i{W0)xIQ0ZJ)6(#O+j7
zVqijIVnAYJgoTZPr9xt%J1a9F7GOXscWF{GpjxthcYg1E|9-Nvd}n&<%9JEY(~Tv!
z#ow32ef}JO?!OIh^VeloUt_DZ!v-kDk{!@ZEH@(5#Vw42?S~)ntR$WOMcQj@t$Ek-
zX;ef4Q_Q1;vn6SEK2MOpg_*pGyCkkD-`~AgWD?Yr`{gERCJyeArJWS7?ku<coh`o_
zDD!jjY;JLZ2s0$-Q5a`dUQ>p;7GH~FRgs4fwpCM(oLXzH$PP`hTrPrw4-6n1un6^%
zX_~iW4M3m*O@&$knwG9v0LY_D;nvciW3^mwWQ*@=N{_L`Qq{p=P#ow*ns!xKtyYDG
zrWH7%kZs2d<%Kw#87sIr^HY*ALStDdqD|UoHHCY66hf3Vo5#X&HcAvvnVO?Sg+-u7
zk%()E&R7fobK}40ti7FJwS_a<PkmmG&diw1b9b_#F);9taY;W7hj9kJibEXXm}T54
zIP{2nZrw`>FCYqC>i5OhhFeqmeG*tkxo+rHU{nmpgV0^Hjk@MmDyCDnoy8I`g)t#8
zN#rNRfOAX0HVkN&7As{P!aAtfn&(1L*9`y++px#nMw~Ge`&bwiT=I{rpUAbG6eC8{
zHl^XXRaSbG(X2-k*;y^iP2`hU>_r_%p5l}|!hx64NFEl#BLA@uU<E*E@(48^JcJd`
z&^)_bEgO0XXr88wxWPoi#&LU&$#XTq1r^<cX4T<MX4ZkOsN9*rw-{j|9(AZ4ve7Ce
zqD!n0#a*6`LV!D{A2MaG8*V2(;?p==&mt6t>j6r)W>wLQA>rKN>PSYN5FZ{-bnh6+
zM?x%*XOVA?ry0k5gi}7N&p$o>$>-c^xOO}Lycuk4{65${`{(fR<waN5v}ZRD_7`Tr
x1MqdabLPXh3)zpJb*-G2u0DPB1re~YdrErq;>PvHUdb1~i$;CfeZ9D`_ZP-jb4&mL
literal 0
HcmV?d00001
diff --git a/docs/assets/img/glyphicons/glyphicons_163_iphone.png b/docs/assets/img/glyphicons/glyphicons_163_iphone.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbb71dceb17f06c6de5a51ae65d0f8dd3af28174
GIT binary patch
literal 1235
zcmaJ>&u`OK9QOdhR1GwQR0@ag$xIv=iQjW-JF${d$Bt<vQo1w}y|pj)Yhr5qdG^ba
z_Amj{#5Re)VTXysI3TzoF$9N-pW9*A?XYUwangh|!~vx8oF;7!sFrNM_x$;MzQ6t5
z{M`A&V<*Q1K{#BUwd(wRgx?b%9^}vGPky<?Unf{)kuA^_*2OUq43{<us0O%2>IA!M
zUpym4LD>J=Yb>(G+6CRAK^CW&Y%hp7TM&xpdJ%S32?I^i^1_n%-~ERo@Z6GkNvXkF
zWRkWwyB?E;^|^+#zUmZQ@!T{h_H-@~5Qaf7@WVv!mBhZT&e!R&B!WJKt(L@Xrxt7T
zz@#w&N)~1us6wEkEXqx3nsye*5J3sb5|T4W({r*8AsAdDw-&oAdfl=Iw)n0jwi%0b
zN$PgH*={aN<CcU9g+i(!%NdTyBx@nVy-b*#8Y);MabhoG9t}aNh?}&-N+S1kJA@#r
z)pmr#WRNJHGO33n31y)a1ZiA-bi(Rn*Nyk0lg3&^q&i7xCw6!}R!$AcJa>B=8UkHs
z2N!i>zaOXTNW>=r30cCOLVb_8=laFi;|0XNMV(IiwQ7~bPRDa~RjH`C0#x&=X(MEn
z4YeX$`MhRU46{51wbWQDFiPYnS(kHV%}^CvM&-PsAXI^QL$)mhD>)TH)liKgw;Co4
zhYm@Nrd)5A3-{#eW=t@naf4ES*edgF%4pK25il1NP{WQFru(#x15ZipeMww9rUB>|
zLigTdAEG=&NaGR8Ja~liwkq3(Qc%>~6qIdQ9B|!{gbm}iO^xSjgbVXI8)*fTH<?y}
zIZ@)yxQ@;|=958(8a^AWd@t=1-N#{zrz7K%72NTeINkEsqPFMIFj-0h?E6bDj#rCP
z+Kj%(x&76)j5H$NKOX7cA(D?oy4;yXzS)^(67ms_`K*3(x%xey^SEjmjo$Cg=JN8L
zLw~)VdHcic+sRwkKdnW-UYIFgxyrz!jhWNSM)S?lpIXPh1%EvL{Kk(buRpNI|Nr;e
zf$7Z`|J?I`7B<G_ZycZf?cV0r*48J+#Kz;BFZYkXJYd`QS05j|d-v(ruQorM{PXWK
clOOE+NTA2H6GxsFAEv*VYGuy4U0%NS4g%4SdjJ3c
literal 0
HcmV?d00001
diff --git a/docs/assets/img/glyphicons/glyphicons_214_resize_small.png b/docs/assets/img/glyphicons/glyphicons_214_resize_small.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ecaa72b2f363bd51d4f83670acce3fd30aed692
GIT binary patch
literal 1406
zcmaJ>duZHr98bGzk(PC<o33*kgcKZO-sN$<<SzEs<??7xceT5gTIXX;lV7i~c`f<f
z?ykaChhq<>J4FO>!X^$xbU2h@eJcoVqJxRxYMC2!D8gQ#Or$=3x!!gCV=R#5_xt7h
z`Fua$R}S>`b}wzZuL;AjrRg3ii{5R)eODuTUMwX4La)_O9)kVOC@iQRzy#eH0eIR{
zb07;;y|m*r=)|xkH;sWIIF#AKYmOCB1Di<EauFKCI=hOls*MAPkAR$ECy8qxe@@_r
zo+KWPWvGlRf-$3K!UO#iy#w0BxR%g~u1$Dnkw*j;fGS?JOxx#+Nut8bqjhjh5_rV~
zjwgwEQA3$NTy#8u$0Af%qgV=O=?ER|;5hC9oS|rnq!^NB!ZgQ68J?o>>O~-Lo<7QF
zC8g>M?UKY8gf35#g+d`xh(;VQN79KzBH&<{FtP~yB^#>6u<f_k7$o3pp5a2nvGIUW
z9dYt7Ng$>3Ay{rEvp{V7)kL9`kww)d=?FzyRuEUk+J{+iOU7-j{ehAT$Sm-kyr-dh
zjJDUnD0g>uR5R4I1v@wInUy$ojRYpJfDL^limoU^%K1k;0~Js;B}dB#U(-^O$mb26
zXJaxOO;Bu{6&0G6QUWV8QasLyvLL29C@ydo5G)3wlZcM6ObWs1sE~@Y6iv%iTwoN5
zrsOC~QLMlUHEi1Up=xU&a2jBZTiC=MvApO36*}I4<CwKp=^JyP<BvHmF80UpjH(%S
zun+23RSG;~C(sqovG7VEc;hzyDLRfcb0|Uv1y9p)g=G{WmWZ*@4vJA2qKefQC9D>=
zB628Ki?CEYs?c0QL`}xYRFoi*7+vF`0ZmZtP{D-Nm1zWB!kem{L+J?XU{uYUkl2(n
zOYWGVIkvyuw^Y;IuB+a7CmA%OX&`K6HBUn>BCi}T>fV|q8i`=JFpFrjFwMY5BkZAB
zUAqs@VOZU|v?L4^r#~3H)Vc>>*?9K9Q_tF)*Zg$<`No*g-jTAinc+3RHBN{AxOlX@
zqP%Ly&2<N_eYUK4c-e+ukGyHVe6AVZbF}X2s@D3GlY`iqy*D;aZiGzBhQ1{V=9hQN
z<@#r2TwXi-#0%{W-?x0VdTRf7<*9e-e|a45`eyxXlYQ*f-6Jp7f7(5HeEIb&|9tY%
z^4ZG=Lx=x9GJD|exzLv8<gt^3b%S{CjouaM2d{s<FSPQ~z3<h{h|lf(_T9$};(hM5
z{Us@UzGvn`q6Fa9wjaMt5pTV8>Y;KeG;wJ1irjtHZfX1B%%P`SU-@}X9&SiH^@Vuh
zZRYh|t@!U(;kFZ7pNySryWDVLYHlXJzCqc%Z7+X%<l)9**YUaMOU)D(*QVe2cUS1o
P;E$M=d!-Yp;XVHY3r^Ts
literal 0
HcmV?d00001
diff --git a/docs/assets/img/glyphicons/glyphicons_266_book_open.png b/docs/assets/img/glyphicons/glyphicons_266_book_open.png
new file mode 100644
index 0000000000000000000000000000000000000000..de084d47227396df76e176a105008f69a94bdb78
GIT binary patch
literal 1405
zcmaJ>TWs4@7<N0_P2DQC3A92-<+|);CGj~<V<%qHk;E~}w6vuSZ3<|eYo8`oe8YA~
zT8ikphiOpS4Iw~W_A*Tx9h>?Fh)G+;E+AEc7o=$#5`zbXrm6^#CIJ;3r%Bg`X_joC
zbNqeZfA@*Lp68mIo@^orqB(Uy=*RCCeDB)Qh@U&!=Y06}gqzH|1Ll}pl59l86mt}j
zDP78;ek3X5uY8Ll1hMI!n#sD^^dVk0b-(0c{AJz3Y=VgFFI$paKrT6oa;g!fR=&DS
zk*X4<hJtC3wh}0>9+<Gvz(h|*o+!v+h1%auM#?-E(2*;VWnD8Iz8s}0x;$Qc$23J&
zAZ{T_tvQuV_mK(HMr6<rd@^7G$wEI2ba5Q_49NfpXu!~r@j;FcFgyTc^`fvfTN&f~
z1+i)i@1j)RbuFHzOQn*(6!4pNj)viI*wbJbA4d3`al@6$KEvs#DG11sZPjvB(;z)X
zY1AybQ3`vy7J_c2)9b>9Q%w|38C{kv8u|gP>t0+HwBz=p`))iC?PSI+ME4`dEZQ=z
z$5=;=jC1#JLp7ixuj8zutySVwWEyEmM~3TQr(ne+>^a|StGIxYCYW;3`<fD>RI#Wk
zJR3~1fiPf0Y(j)kh{xC@BZNX+A{k4>y8!1I^8_{$@rhr-++>i2@va0H53z9wlOPmh
zL;-?ifCYe!v9TIAWjL;6$jCG5an<`=_Mu!pVI#>k?Tl$^wN~lNo382PO^Zwn1j)1{
ztA@At>R9y@+3KrE5p7c^D}~_I2iONN1R&&agbWTI!jQ-^Vk{UAvVktZhzwQbDjO13
zi(5=^I9D6EAQTWG7f#?N<B}ji(byS9=3Uj*P_;v2np<6Is@EmFCK)-L4xfU?q@w0h
z-8pUC%B!+zI3tcOY1)V)*@X!0HKV3tZe_J5LvIkT9B=5}8WN9$w_Kk^yjh=SWZ)6D
z@vNR}o4iX9b-PnSEK|O9d+@F1>1Vesr-{~Y8kzczg}RP~`qtkX7mkMNLUr1d{>SXQ
zTW{PDp8x35?!VezUk)A)ehp3*u741q+t2*Ey3coW@6aRUJJA30hl_8Y3e=Ow&Dl=K
zJpTUE$F8>*XLg>yyTaP7SKGLQnH|}pvi-`){M_gEzGIu)TV90SD?i>oLA-S5pQ(FW
zeLwxu^j)WwZ7>F3n_s=qcJtun^P8RFRrAr=|DKvWG{yB^5@z08o!fIX=>N2pDH%(P
zUq=5N`a*74VLHDLTqN#%0-CPv6yH3vy|8#8^6z6?n#GsTPA?6gy_#xBMJ78>w|qSO
z+1~u}@8TwTPuu*Ae)1N(>kWc>A(lROg!y~&N@$6-(d6ON_1lQv<GS&KZ}6J;Lrf)m
Kgp2Vb)Bgke)zRYs
literal 0
HcmV?d00001
diff --git a/docs/index.html b/docs/index.html
index 64947dc15e..4524b79506 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -127,10 +127,82 @@
</ul>
+ <div class="marketing">
+ <div class="row">
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_042_group.png">
+ <h2>Built for and by nerds</h2>
+ <p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.</p>
+ </div>
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_079_podium.png">
+ <h2>For all skill levels</h2>
+ <p>Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
+ </div>
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_163_iphone.png">
+ <h2>Cross-everything</h2>
+ <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
+ </div>
+ </div><!--/row-->
+ <div class="row">
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+ <h2>12-column grid</h2>
+ <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
+ </div>
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_214_resize_small.png">
+ <h2>Responsive design</h2>
+ <p>With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.</p>
+ </div>
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_266_book_open.png">
+ <h2>Styleguide docs</h2>
+ <p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p>
+ </div>
+ </div><!--/row-->
+ <div class="row">
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_082_roundabout.png">
+ <h2>Growing library</h2>
+ <p>Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p>
+ </div>
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_009_magic.png">
+ <h2>Custom jQuery plugins</h2>
+ <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
+ </div>
+ <div class="span4">
+ <img src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+ <h2>Built on LESS</h2>
+ <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
+ </div>
+ </div><!--/row-->
+ <div class="row">
+ <div class="span3">
+ <h3>HTML5</h3>
+ <p>Built to support new HTML5 elements and syntax.</p>
+ </div>
+ <div class="span3">
+ <h3>CSS3</h3>
+ <p>Progressively enhanced components for ultimate style.</p>
+ </div>
+ <div class="span3">
+ <h3>Open-source</h3>
+ <p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p>
+ </div>
+ <div class="span3">
+ <h3>Made at Twitter</h3>
+ <p>Brought to you by experienced engineers and designers.</p>
+ </div>
+ </div><!--/row-->
+ </div>
+
<!-- About Bootstrap
================================================== -->
- <section id="about">
+ <section id="about" style="display: none;">
<div class="row">
<div class="span4">
<h2>Built for and by nerds</h2>
@@ -163,7 +235,7 @@
</div><!-- /row -->
</section>
- <h3>Quick-start examples</h3>
+<!-- <h3>Quick-start examples</h3>
<p>Need some quick templates? Check out these basic examples we've put together:</p>
<ul class="media-grid">
<li>
@@ -176,7 +248,7 @@
<a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
</li>
</ul>
-
+ -->
</div><!-- /#overview -->
@@ -184,10 +256,9 @@
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
- <p>
- Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br>
- Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
- </p>
+ <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
--
GitLab
From 9fd4e459fe829454c811118c64aa32eafd6e8b97 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Thu, 27 Oct 2011 23:34:48 -0700
Subject: [PATCH 56/66] adding more icons for the homepage for open source,
twitter, and html5/css3
---
docs/assets/css/docs.css | 6 +++++-
docs/assets/img/icon-css3.png | Bin 0 -> 1145 bytes
docs/assets/img/icon-github.png | Bin 0 -> 1191 bytes
docs/assets/img/icon-html5.png | Bin 0 -> 1230 bytes
docs/assets/img/icon-twitter.png | Bin 0 -> 1096 bytes
docs/index.html | 22 +++++++++++++---------
6 files changed, 18 insertions(+), 10 deletions(-)
create mode 100644 docs/assets/img/icon-css3.png
create mode 100644 docs/assets/img/icon-github.png
create mode 100644 docs/assets/img/icon-html5.png
create mode 100644 docs/assets/img/icon-twitter.png
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 66e87fdf9e..79c9047743 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -172,10 +172,14 @@ body > .navbar-fixed .brand:hover {
.marketing p {
margin-right: 10px;
}
-.marketing img {
+.marketing .icon {
float: left;
margin: 7px 10px 0 0;
}
+.marketing .small-icon {
+ float: left;
+ margin: 4px 5px 0 0;
+}
/* Footer
diff --git a/docs/assets/img/icon-css3.png b/docs/assets/img/icon-css3.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb3651bacd68575d4a5be5bd3e098031f3e4aed3
GIT binary patch
literal 1145
zcmaJ>O=uKX9G@g+l@O^$V?GY@n3TF=cD}N++ZnS-HaolSiWAn!f=fYkcIG8JP3FUy
zm+mGWk|sH%U=KMoo(hXlsyW0`q?Zy6lpfRs{J4lh{lJ6Zp?H%j=$n|09^4Mhy!Zb6
ze!u_cn;)`6$96Y$HW37|JCl|aytd$X|E>W3&RjH)<D~;7^Jv%}K_%6NL|nHE5M)es
z6e>{FC(qr4y#&$lrIE{{ynI5`Y?D%b3{^HA%qEE5{<5QLV-SG?95t*M`R|`MNMPtO
z@)R#KvXg*CBR%E9;i;jVHZ`URI@#X`ddngfFd<Sw*&Me#u^b~ebw#}Q%`^!%A!sZ{
zeh4ZrXF<YtA>b({q%jc|M8XssW`wZN4LF8nXqKayXozJ*J}NRS*m_9p&DBRlMM`b?
z!lxKnM92|ox>PDrr5?(5M`>0N1e)P!jtgN#$eXl~S`JxWS5-lRp5_`3GHeU@ifX~0
zKrs?W`XL3=*_O4utuo<)(Ph=4S&H#fssd&C|DmS2jrNcNKgRo6VJ|o7Kw5#GJ>hD&
zaU)&6D@RPYP(`+zv+eO}6|+Sf*<R6hKw_AuSRkvKVfmI#hAfL2%R{QA!Hg6mu?A%r
zy4Vxuqwz%Y>y*H=ESqHFe3Tz#qv4)-G8~U{Qk5&&+Jp%$RORX)xk62@KMbaWJxkCv
zzJq$owN0>@v}n|hB~nvwi>ud;C0dh9<6vmNwV$-QYQpp5Z?^{*AGSvyT6o@FJlM+@
zuP@_E@iHUDbLEGHoT3yefwO~!(fU`@+^Zw{+=au=oko4GImo=|{yqNHz<Rp=pC4}n
z<@>tG)x~{xE@fBG%)IW~$Jci*yyH%GRTl5>y;8T@x{+*t9{7WbwEaysK1q?yPj?oC
z;G4ERkLNq)$N!UCPJ12Swm$%&Yi}bv7dC!te^U3;quGOfU~P7!;fp<o5^VY|2bKcQ
z9I&+3s)4ocVDNRva=KIAn_h2S2vrVLe*O9IKyTZ^^z4rI#amt3Z;m%S3l?WC%^l6Q
zQGXp+x{z;*9K3w$US(z8xIRM%+KrQg$_}EwnfN7@gsF3x^Zw5ulN^#(2G7pE2hk92
AO8@`>
literal 0
HcmV?d00001
diff --git a/docs/assets/img/icon-github.png b/docs/assets/img/icon-github.png
new file mode 100644
index 0000000000000000000000000000000000000000..8afcce9cbad95d92521ac14da65ded7f6d8aa232
GIT binary patch
literal 1191
zcmeAS@N?(olHy`uVBq!ia0vp^LO?9S!3HE7rssMADajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_cg49qH-ArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8
zNvY|XdA3ULckfqH$V{<S3ODsN@GWpo&B*kqDoPEm@(W3>%1*XSQL?vFu&J;D8jzb>
zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XP}#GU}mUbW};_k
zVqj@vsiR<IU}&IkXrymou4`yuWom9^V5k5EN<iC+Qqrt~T-=~`0eQAc86_nJR{Hwo
z<>h+i#(Mch>H3D2mX`VkM*2oZx<D1W#g%y_i50qe#mX=fTvCgZi!uvJGV}8kKqe+8
z<(HP&Dgj*z@j`9^+}ONgXfOc-Our(rK;KZ$0OTc@LSJ9}N^^7Js*6j4QW5UOYH)E#
zWkITbP-=00X;CsT;?k5sRuxz|7o{ea<QIkH=jXseF(4zqB)>Q#zd*q`*i_F@!8b8E
zGY=#J*5T`G<(XGpl9-pA>gi&u1T;f0Gc(1?$k4#d($Uq>&C=A!(9qSu(bU}3$<W-y
z*wNL*(b32Srq?AuximL5uLPzy1)<jnr(RHE$SnZc?2=lPS(cjOR+OKs0QR(1CQi4w
zxZyMpsy79<TMTgO)dxC89~8AnQ4JFUrXLU!o^XL2c+yYJ1E%*PV8T}P)y`&MV3hQ9
zaSW-rwI!sHx5+?&<uSuu2e$;4ISzLj%oAA53Rv6}{2p*z<&<DFUlCuV>b_94*UYl>
z?ftL&{^n=(c>Xh;vOp-K@#BJx%kFi`u-bZjyUmrg;On(h6FfW}LsK?)vAmwp(Y9J?
zQdy_O^s1BHwi6P?r7v(w9qc{eXY`0S{aJ_J+^UBYYGX9c8oKg^n(q>IV(SwsSbNOi
zX40kz%|ntA>ux?c|M+y3^iIDFcJrI;PJNq`6|D;o=zX8+6#ht!^J;U`VwrGRE9rGv
zu3yb}9%_1}8NI`CzpmQS#T^rpH}dazH0{L6g||+f4=z~t>Ta^1Yt+%D`NugwZmxSQ
z_CeM(?kRhGLsDvLx#0HA*BkE3yXQIUU5dBes?W&A(71ngd$V%cY*5kR>FVdQ&MBb@
E09?P6761SM
literal 0
HcmV?d00001
diff --git a/docs/assets/img/icon-html5.png b/docs/assets/img/icon-html5.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9066c67268f25a393cfb2add703aaaac755c09c
GIT binary patch
literal 1230
zcmeAS@N?(olHy`uVBq!ia0vp^LO?9S!3HE7rssMADajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_cg49qH-ArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8
zNvY|XdA3ULckfqH$V{<S3ODsN@GWpo&B*kqDoPEm@(W3>%1*XSQL?vFu&J;D8jzb>
zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XP}#GU}mUbW};_k
zVqj@vsiR<IU}&IkXrymou4`yuWom9^V5k5EN<iC+Qqrt~T-=~`0eQAc86_nJR{Hwo
z<>h+i#(Mch>H3D2mX`VkM*2oZx<D1W#g%y_i50qe#mX=fTvCgZi!uvJGV}8kKqe+8
z<(HP&Dgj*z@j`9^+}ONgXfOc-Our(rK;KZ$0OTc@LSJ9}N^^7Js*6j4QW5UOYH)E#
zWkITbP-=00X;CsT;?k5sRuxz|7o{ea<QIkH=jXseF(4zqB)>Q#zd*q`*i_F@!8b8E
zGY=#J*5T`G<(XGpl9-pA>gi&u1T;f0Gc(1?#L3*k+}Op`&C=As(9qSu(bU}3$<W-y
z*wNL*(b32Srq?AuximL5uLPzy1)<jrr(RHE$SnZc?2=lPS(cjOR+OKs0QR(1CT_PF
z<1`PdHwCv_OmOPe2RcR{6tzfE4HE*U9}p9saDg0n(of9;ruQOX!gksE_9+7cql2f5
zV@SoVq>!K>t1|}<Bph~-v^d0~5@#I17uU>F<;dC`w_(A~7a{`j3PGD01!gNsx4c=@
z>=5I&#Br|&+g>+*<v^i5%8l<#Q^Y-;GwT%oIe1Ad-0i{PRnPM1{gNY6dg6@@mI9j}
zUfjcd^3iggfZO$srkskJdwdRv{t1wJ^69;ffj!eknJXK91~hME47fCduU8~(Mz#aX
znFZGanjIbph8S^myuHX1)sP~<JSmP%O+{RB`O-*-8ky)f3EfpC;tQ9nPDqTO5W~7D
zL2}xcwxkQ(I-GCq1hzXF?mO~BYPzFvg9S@RIrB%m06|7kc2QG5hc{heZytP+@)71R
zXZmQp<w(~=iNc*6vK)e^<P@4B0|ErZ<Zd_qPz(v0*pN11`g5j2!!0io6IjHy?g-M=
p*k-dpf~Cyiqg_VMB8CPAW`;jseEc<!orngNFrKb{F6*2UngECum7o9s
literal 0
HcmV?d00001
diff --git a/docs/assets/img/icon-twitter.png b/docs/assets/img/icon-twitter.png
new file mode 100644
index 0000000000000000000000000000000000000000..98241d098d9f021642f1ecda4b115bb411a4a70c
GIT binary patch
literal 1096
zcmaJ=OH9;27%r>=t`LZiM2(SJj0fZP#TIPCx>>f1EK-8YCX#ru+YV6KcDn807NQAJ
z58_2*;v*h>#e*lso6#7Jaxoq}C?3$0CMG5(#0Q2biqnN%J-9ZR&di_x`~KHA6TLlq
z>Vlhs1VPj#JLMGK*Wk6TrV9VZFPL3;+lUhVs1FXHyy^fVro#*%lcqWdQb5&5b5B7V
zK?JrL>3-C&bW0jEY1Q|kJ=4Z$f@q6+wyF&SL}tLCVMVCf`wuD7&?D4-L17g;4u*`*
zF$eUG^`y12VNKMj=x(yjlQ4k^kV<-H)^a5;LKS!=eD=)@MHXDpaD-Y)s$c0P<In-5
zK(ir@ZQ;n4FwKQoF)Z#Rd6r`tj%V1`5XVYFtHg5T@<-uljy@oz<c{T7_!gmt5V9qP
z$>;NQzL|#3Aj65G$gn)a^C9dJaz`zsdLhegDl*8x)f~e{2DC_@QO&>+6rpgYOC^|g
ziPmzL+k_j&c&g2CH0zgCbX1i8yP9Un+eInxC*OY(yXjFIFe%`|5l6#=8)))F*;3pA
zDuPZL!fdgNy+aT|cL>^KyicGxQc*R-@+}2~qDV>0MXIHNq#U6z2W=R-#B*$m7?b4=
zQQ$c)!N!DEp`B|DH^&m;Sd5p8SQ%;~Ca_QutN+0!%3^&nm^O|q1IIWF^bQA_WT9xu
zD4$DvS-xegUOtz2SuBH-Vf@klHR_@X>&HKqgo`gF=>rSv-NC~CwfOl1eiZkTaxCr5
zWEK_|qXB_f8#qTy*HSBMh+MScc6FxuNHBIb=+%n#Q&)+j^;328wO!*o-qeGp<5f2|
z^OsLQpZwVwoDJlNm%{9w4PP6tJexFjoqp1A5mfcA-Zx&c<#kRy^L@qk%@unOWoO=<
zdhkWQ_r7iGfmdsdhOUp_v}AOZd}4YmTXCdu)7+1V+K+R0AE$^*k4{cptISrh*FUYl
uYCLXK7AhMWSG=veTX`-we|}H8xrTg1#7+33J8)yff7{7Kk9@2B;IZF)A7U^7
literal 0
HcmV?d00001
diff --git a/docs/index.html b/docs/index.html
index 4524b79506..e712f6ed05 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -130,69 +130,73 @@
<div class="marketing">
<div class="row">
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_042_group.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png">
<h2>Built for and by nerds</h2>
<p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.</p>
</div>
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_079_podium.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
<h2>For all skill levels</h2>
<p>Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
</div>
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_163_iphone.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
<h2>Cross-everything</h2>
<p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
<h2>12-column grid</h2>
<p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
</div>
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_214_resize_small.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
<h2>Responsive design</h2>
<p>With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.</p>
</div>
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_266_book_open.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<h2>Styleguide docs</h2>
<p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_082_roundabout.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
<h2>Growing library</h2>
<p>Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p>
</div>
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_009_magic.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
<h2>Custom jQuery plugins</h2>
<p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
</div>
<div class="span4">
- <img src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+ <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
<h2>Built on LESS</h2>
<p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span3">
+ <img class="small-icon" src="assets/img/icon-html5.png">
<h3>HTML5</h3>
<p>Built to support new HTML5 elements and syntax.</p>
</div>
<div class="span3">
+ <img class="small-icon" src="assets/img/icon-css3.png">
<h3>CSS3</h3>
<p>Progressively enhanced components for ultimate style.</p>
</div>
<div class="span3">
+ <img class="small-icon" src="assets/img/icon-github.png">
<h3>Open-source</h3>
<p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p>
</div>
<div class="span3">
+ <img class="small-icon" src="assets/img/icon-twitter.png">
<h3>Made at Twitter</h3>
<p>Brought to you by experienced engineers and designers.</p>
</div>
--
GitLab
From 2764cfda6dbda56b4a50561fb8cd2a8be86dc096 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Fri, 28 Oct 2011 18:38:06 -0700
Subject: [PATCH 57/66] remove html from body background
---
bootstrap.css | 6 ++----
bootstrap.min.css | 3 +--
docs/scaffolding.html | 1 +
lib/scaffolding.less | 4 +---
4 files changed, 5 insertions(+), 9 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index ed0556b3d8..ec9217a21b 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: Thu Oct 27 12:48:41 PDT 2011
+ * Date: Fri Oct 28 18:37:59 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).
@@ -180,10 +180,8 @@ textarea {
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */
-html, body {
- background-color: #ffffff;
-}
body {
+ background-color: #ffffff;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index b443f02e39..7eb8efe2fa 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -20,8 +20,7 @@ button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:poin
input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
-html,body{background-color:#ffffff;}
-body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;}
+body{background-color:#ffffff;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;}
.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;}
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 2a5ae8bc63..de612a0746 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -53,6 +53,7 @@
</header>
+
<!-- Grid system
================================================== -->
<section id="grid-system">
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index f15f6853cf..7b8aa369a4 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -7,10 +7,8 @@
// STRUCTURAL LAYOUT
// -----------------
-html, body {
- background-color: @white;
-}
body {
+ background-color: @white;
margin: 0;
font-family: @baseFontFamily;
font-size: @baseFontSize;
--
GitLab
From 0218d079ad83ce5f8fd08e9f68b6f661855a27a9 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 29 Oct 2011 18:11:17 -0700
Subject: [PATCH 58/66] fix some of the docs styles at 480 to 768
---
docs/assets/css/docs.css | 24 ++++++++++++++++++------
1 file changed, 18 insertions(+), 6 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 79c9047743..52738d808b 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -348,11 +348,6 @@ h2 + table {
font-size: 18px;
line-height: 24px;
}
- .jumbotron .benefits {
- position: relative;
- width: auto;
- margin: 36px 0;
- }
.jumbotron .btn {
display: block;
font-size: 18px;
@@ -365,6 +360,23 @@ h2 + table {
margin: 40px 0 0;
}
+}
+
+
+@media (max-width: 768px) {
+
+ /* Hide the nav for now */
+ body > .navbar-fixed .nav {
+ display: none;
+ }
+
+ /* Adjust the jumbotron */
+ .jumbotron .benefits {
+ position: relative;
+ width: auto;
+ margin: 36px 0;
+ }
+
/* Popovers */
.large-bird {
display: none;
@@ -395,7 +407,7 @@ h2 + table {
.jumbotron h1,
.jumbotron p {
- margin-right: 40%;
+ margin-right: 0;
}
}
--
GitLab
From 3f512adf953da3a3fbbfca18b138fb6659f2b77f Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 30 Oct 2011 20:14:27 -0700
Subject: [PATCH 59/66] updated docs and type styles for blockquotes and a few
fixes for type
---
bootstrap.css | 8 ++++-
bootstrap.min.css | 1 +
docs/assets/css/docs.css | 3 +-
docs/base-css.html | 68 ++++++++++++++++++++++++++++++++------
docs/index.html | 70 +---------------------------------------
docs/scaffolding.html | 2 +-
lib/type.less | 9 ++++++
7 files changed, 78 insertions(+), 83 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index ec9217a21b..ca2bfe0b19 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: Fri Oct 28 18:37:59 PDT 2011
+ * Date: Sun Oct 30 20:12:53 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).
@@ -490,6 +490,12 @@ blockquote small {
blockquote small:before {
content: '\2014 \00A0';
}
+blockquote.pull-right {
+ float: right;
+}
+blockquote.pull-right p, blockquote.pull-right small {
+ text-align: right;
+}
address {
display: block;
line-height: 18px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 7eb8efe2fa..776cb6e7bb 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -85,6 +85,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:16px;font-weight:300;line-height:22.5px;margin-bottom:0;}
blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
+blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
address{display:block;line-height:18px;margin-bottom:18px;}
code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 52738d808b..185f381e92 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -164,7 +164,6 @@ body > .navbar-fixed .brand:hover {
.marketing h2,
.marketing h3 {
font-weight: 300;
- color: #000;
}
.marketing h2 {
margin-bottom: 9px;
@@ -175,6 +174,7 @@ body > .navbar-fixed .brand:hover {
.marketing .icon {
float: left;
margin: 7px 10px 0 0;
+ opacity: .8;
}
.marketing .small-icon {
float: left;
@@ -300,7 +300,6 @@ pre.prettyprint {
margin-bottom: 0;
}
-
.browser-support {
max-width: 100%;
}
diff --git a/docs/base-css.html b/docs/base-css.html
index 47dff40e72..750bbd2b3b 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -92,8 +92,8 @@
<thead>
<tr>
<th>Element</th>
- <th>Description</th>
<th>Usage</th>
+ <th>Optional</th>
</tr>
</thead>
<tbody>
@@ -175,24 +175,72 @@
<!-- Blockquotes -->
<h2>Blockquotes</h2>
+ <table class="bordered-table">
+ <thead>
+ <tr>
+ <th>Element</th>
+ <th>Usage</th>
+ <th>Optional</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code><blockquote></code>
+ </td>
+ <td>
+ Block-level element for quoting content from another source
+ </td>
+ <td>
+ <p>Add <code>cite</code> attribute for source URL</p>
+ Use <code>.pull-left</code> and <code>.pull-right</code> classes for floated options
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code><small></code>
+ </td>
+ <td>
+ Optional element for adding a user-facing citation, typically an author with title of work
+ </td>
+ <td>
+ Place the <code><cite></code> around the title or name of source
+ </td>
+ </tr>
+ </tbody>
+ </table>
<div class="row">
- <div class="span5">
- <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
- <small>Someone famous</small>
- </blockquote>
+ <div class="span4">
+ <p>To include a blockquote, wrap <code><blockquote></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code><p></code>.</p>
+ <p>Include an optional <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it for styling purposes.</p>
</div>
- <div class="span7">
+ <div class="span8">
<pre class="prettyprint linenums">
<blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
- <small>Dr. Julius Hibbert</small>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
+ <small>Someone famous</small>
</blockquote>
</pre>
</div>
+ </div><!--/row-->
+
+ <h3>Example blockquotes</h3>
+ <div class="row">
+ <div class="span6">
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
+ <small>Someone famous</small>
+ </blockquote>
+ </div>
+ <div class="span6">
+ <blockquote class="pull-right">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
+ <small>Someone famous</small>
+ </blockquote>
+ </div>
</div>
+
<!-- Lists -->
<h2>Lists</h2>
<div class="row">
diff --git a/docs/index.html b/docs/index.html
index e712f6ed05..7b91315029 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -38,41 +38,6 @@
<li><a href="./components.html">Components</a></li>
<li><a href="./javascript.html">Javascript plugins</a></li>
<li><a href="./less.html">Using LESS</a></li>
-
-<!--
- <li class="active"><a href="#overview">Overview</a></li>
- <li><a href="#about">About</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-dropdown="true">Scaffolding</a>
- <ul class="dropdown-menu">
- <li><a href="#grid-system">Grid</a></li>
- <li><a href="#layouts">Layouts</a></li>
- <li><a href="#responsive">Resposive</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-dropdown="true">CSS</a>
- <ul class="dropdown-menu">
- <li><a href="#typography">Type</a></li>
- <li><a href="#tables">Tables</a></li>
- <li><a href="#forms">Forms</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
- <ul class="dropdown-menu">
- <li><a href="#media">Media</a></li>
- <li><a href="#navigation">Navigation</a></li>
- <li><a href="#alerts">Alerts</a></li>
- <li><a href="#popovers">Popovers</a></li>
- <li><a href="#autocomplete">Autocomplete</a></li>
- <li><a href="#accordion">Accordion</a></li>
- <li><a href="#datepicker">Datepicker</a></li>
- </ul>
- </li>
- <li><a href="#javascript">Javascript</a></li>
- <li><a href="#less">Using Less</a></li>
--->
</ul>
</div>
</div>
@@ -204,40 +169,7 @@
</div>
- <!-- About Bootstrap
- ================================================== -->
- <section id="about" style="display: none;">
- <div class="row">
- <div class="span4">
- <h2>Built for and by nerds</h2>
- <p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
- <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
- </div>
- <div class="span4">
- <h2>Cross-everything</h2>
- <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
- <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
- <ul>
- <li>Latest Safari</li>
- <li>Latest Google Chrome</li>
- <li>Firefox 4+</li>
- <li>Internet Explorer 7+</li>
- <li>Opera 11</li>
- </ul>
- </div>
- <div class="span4">
- <h2>What's included</h2>
- <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
- <ul>
- <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
- <li>All original .less files</li>
- <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
- <li>Complete styleguide documentation</li>
- <li>Three example pages with different layouts</li>
- </ul>
- </div>
- </div><!-- /row -->
- </section>
+
<!-- <h3>Quick-start examples</h3>
<p>Need some quick templates? Check out these basic examples we've put together:</p>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index de612a0746..4a5aa9a0b0 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -221,7 +221,7 @@
<div class="row">
<div class="span6">
<h2>Fixed layout</h2>
- <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
+ <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
diff --git a/lib/type.less b/lib/type.less
index 7f8044cd81..421d666a47 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -160,6 +160,15 @@ blockquote {
content: '\2014 \00A0';
}
}
+
+ // Float right with text-align: right
+ &.pull-right {
+ float: right;
+ p,
+ small {
+ text-align: right;
+ }
+ }
}
// Addresses
--
GitLab
From ba597ef8458de4593b7a0269b0dd794f9ca89818 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 31 Oct 2011 16:32:13 -0700
Subject: [PATCH 60/66] updating table documentation, jumping to dev to bring
over new table styles from there
---
docs/base-css.html | 45 +++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 43 insertions(+), 2 deletions(-)
diff --git a/docs/base-css.html b/docs/base-css.html
index 750bbd2b3b..2872fbb997 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -227,15 +227,17 @@
<h3>Example blockquotes</h3>
<div class="row">
<div class="span6">
+ <p>Default blockquotes are styled as such:</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
- <small>Someone famous</small>
+ <small>Someone famous in <cite title="">Body of work</cite></small>
</blockquote>
</div>
<div class="span6">
+ <p>To float your blockquote to the right, add <code>class="pull-right"</code>:</p>
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
- <small>Someone famous</small>
+ <small>Someone famous in <cite title="">Body of work</cite></small>
</blockquote>
</div>
</div>
@@ -514,6 +516,45 @@
</div>
</div>
+ <h2>Table options</h2>
+ <table class="striped-table">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Default</td>
+ <td class="muted">None</td>
+ <td>Only horizontal lines between rows</td>
+ </tr>
+ <tr>
+ <td>Bordered</td>
+ <td>
+ <code>.bordered-table</code>
+ </td>
+ <td>Rounds corners and adds outter border</td>
+ </tr>
+ <tr>
+ <td>Zebra-stripe</td>
+ <td>
+ <code>.striped-table</code>
+ </td>
+ <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td>
+ </tr>
+ <tr>
+ <td>Condensed</td>
+ <td>
+ <code>.condensed-table</code>
+ </td>
+ <td>Cuts padding in half, from 10px to 5px, within all <code>td</code> and <code>th</code> elements</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Example tables</h2>
<h3>1. Default table styles</h3>
<p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
--
GitLab
From 02bf27592c8eec51795ac806390bc57db501926d Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 31 Oct 2011 19:37:10 -0700
Subject: [PATCH 61/66] overhaul the table styles and update those everywhere
in the docs, update the button docs, spec out the forms docs
---
bootstrap.css | 109 +++++++++++++++-----
bootstrap.min.css | 49 ++++++---
docs/base-css.html | 228 ++++++++++++++++++++++++++++--------------
docs/javascript.html | 10 +-
docs/less.html | 2 +-
docs/scaffolding.html | 4 +-
lib/tables.less | 95 ++++++++++++++----
7 files changed, 350 insertions(+), 147 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index ca2bfe0b19..2795e42513 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 30 20:12:53 PDT 2011
+ * Date: Mon Oct 31 19:36:50 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).
@@ -927,17 +927,10 @@ textarea[readonly] {
* ---------------------------------------- */
table {
width: 100%;
- margin-bottom: 18px;
padding: 0;
- border-collapse: separate;
- *border-collapse: collapse;
- /* IE7, collapse table to remove spacing */
-
+ margin-bottom: 18px;
font-size: 13px;
- border: 1px solid #ddd;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ border-collapse: collapse;
}
table th, table td {
padding: 10px 10px 9px;
@@ -948,47 +941,109 @@ table th {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
- border-bottom: 1px solid #ddd;
}
table td {
vertical-align: top;
+ border-top: 1px solid #ddd;
}
-table th + th, table td + td {
- border-left: 1px solid #ddd;
-}
-table tr + tr td {
+table tbody th {
border-top: 1px solid #ddd;
+ vertical-align: top;
+}
+.condensed-table th, .condensed-table td {
+ padding: 5px 5px 4px;
+}
+.bordered-table {
+ border: 1px solid #ddd;
+ border-collapse: separate;
+ *border-collapse: collapse;
+ /* IE7, collapse table to remove spacing */
+
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
}
-table tbody tr:first-child td:first-child {
+.bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
+ border-left: 1px solid #ddd;
+}
+.bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
}
-table tbody tr:first-child td:last-child {
+.bordered-table thead:first-child tr:first-child th:last-child, .bordered-table tbody:first-child tr:first-child td:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
}
-table tbody tr:last-child td:first-child {
+.bordered-table tbody tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}
-table tbody tr:last-child td:last-child {
+.bordered-table tbody tr:last-child td:last-child {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
}
-.zebra-striped tbody tr:nth-child(odd) td {
+table .span1 {
+ width: 40px;
+}
+table .span2 {
+ width: 120px;
+}
+table .span3 {
+ width: 200px;
+}
+table .span4 {
+ width: 280px;
+}
+table .span5 {
+ width: 360px;
+}
+table .span6 {
+ width: 440px;
+}
+table .span7 {
+ width: 520px;
+}
+table .span8 {
+ width: 600px;
+}
+table .span9 {
+ width: 680px;
+}
+table .span10 {
+ width: 760px;
+}
+table .span11 {
+ width: 840px;
+}
+table .span12 {
+ width: 920px;
+}
+table .span13 {
+ width: 1000px;
+}
+table .span14 {
+ width: 1080px;
+}
+table .span15 {
+ width: 1160px;
+}
+table .span16 {
+ width: 1240px;
+}
+.striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
-.zebra-striped tbody tr:hover td {
+.striped-table tbody tr:hover td, .striped-table tbody tr:hover th {
background-color: #f5f5f5;
}
-.zebra-striped .header {
+table .header {
cursor: pointer;
}
-.zebra-striped .header:after {
+table .header:after {
content: "";
float: right;
margin-top: 7px;
@@ -997,21 +1052,21 @@ table tbody tr:last-child td:last-child {
border-color: #000 transparent;
visibility: hidden;
}
-.zebra-striped .headerSortUp, .zebra-striped .headerSortDown {
+table .headerSortUp, table .headerSortDown {
background-color: rgba(141, 192, 219, 0.25);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
-.zebra-striped .header:hover:after {
+table .header:hover:after {
visibility: visible;
}
-.zebra-striped .headerSortDown:after, .zebra-striped .headerSortDown:hover:after {
+table .headerSortDown:after, table .headerSortDown:hover:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
-.zebra-striped .headerSortUp:after {
+table .headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 776cb6e7bb..35f8a9bcd7 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -154,22 +154,39 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.form-horizontal .controls{margin-left:150px;}
.form-horizontal .control-list{padding-top:6px;}
.form-horizontal .form-actions{padding-left:150px;}
-table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
-table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
-table td{vertical-align:top;}
-table th+th,table td+td{border-left:1px solid #ddd;}
-table tr+tr td{border-top:1px solid #ddd;}
-table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
-table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
-.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
-.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
-.zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
-.zebra-striped .headerSortUp,.zebra-striped .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
-.zebra-striped .header:hover:after{visibility:visible;}
-.zebra-striped .headerSortDown:after,.zebra-striped .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
-.zebra-striped .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
+table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
+table th{padding-top:9px;font-weight:bold;vertical-align:middle;}
+table td{vertical-align:top;border-top:1px solid #ddd;}
+table tbody th{border-top:1px solid #ddd;vertical-align:top;}
+.condensed-table th,.condensed-table td{padding:5px 5px 4px;}
+.bordered-table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td{border-left:1px solid #ddd;}
+.bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
+.bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
+.bordered-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
+.bordered-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
+table .span1{width:40px;}
+table .span2{width:120px;}
+table .span3{width:200px;}
+table .span4{width:280px;}
+table .span5{width:360px;}
+table .span6{width:440px;}
+table .span7{width:520px;}
+table .span8{width:600px;}
+table .span9{width:680px;}
+table .span10{width:760px;}
+table .span11{width:840px;}
+table .span12{width:920px;}
+table .span13{width:1000px;}
+table .span14{width:1080px;}
+table .span15{width:1160px;}
+table .span16{width:1240px;}
+.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
+.striped-table tbody tr:hover td,.striped-table tbody tr:hover th{background-color:#f5f5f5;}
+table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
+table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
+table .header:hover:after{visibility:visible;}
+table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
+table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
table .blue{color:#049cdb;border-bottom-color:#049cdb;}
table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;}
table .green{color:#46a546;border-bottom-color:#46a546;}
diff --git a/docs/base-css.html b/docs/base-css.html
index 2872fbb997..6d3d92a171 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -88,7 +88,7 @@
<!-- Misc Elements -->
<h2>Emphasis, address, and abbreviation</h2>
- <table class="zebra-striped">
+ <table class="bordered-table striped-table">
<thead>
<tr>
<th>Element</th>
@@ -175,7 +175,7 @@
<!-- Blockquotes -->
<h2>Blockquotes</h2>
- <table class="bordered-table">
+ <table class="bordered-table striped-table">
<thead>
<tr>
<th>Element</th>
@@ -321,7 +321,7 @@
<!-- Code -->
<h2>Code <small>Inline and block</small></h2>
- <table class="zebra-striped">
+ <table class="bordered-table striped-table">
<thead>
<tr>
<th style="width: 190px;">Element</th>
@@ -363,7 +363,7 @@
<!-- Labels -->
<h2>Inline labels <small>for special attention</small></h2>
- <table class="zebra-striped">
+ <table class="bordered-table striped-table">
<thead>
<tr>
<th style="width: 190px;">Labels</th>
@@ -428,7 +428,7 @@
<h2>Table markup</h2>
<div class="row">
<div class="span8">
- <table class="zebra-striped">
+ <table class="bordered-table striped-table">
<thead>
<tr>
<th>Tag</th>
@@ -517,7 +517,7 @@
</div>
<h2>Table options</h2>
- <table class="striped-table">
+ <table class="bordered-table striped-table">
<thead>
<tr>
<th>Name</th>
@@ -592,9 +592,9 @@
<table>
...
</table></pre>
- <h3>2. Zebra-striped</h3>
- <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
- <table class="zebra-striped">
+ <h3>2. Striped table</h3>
+ <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p>
+ <table class="striped-table">
<thead>
<tr>
<th>#</th>
@@ -626,12 +626,12 @@
</table>
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
<pre class="prettyprint linenums">
-<table class="zebra-striped">
+<table class="striped-table">
...
</table></pre>
- <h3>3. Zebra-striped w/ TableSorter.js</h3>
+ <h3>3. Striped table w/ TableSorter.js</h3>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
- <table class="zebra-striped" id="sortTableExample">
+ <table class="striped-table" id="sortTableExample">
<thead>
<tr>
<th>#</th>
@@ -668,7 +668,7 @@
$("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
});
</script>
-<table class="zebra-striped">
+<table class="striped-table">
...
</table></pre>
@@ -682,19 +682,49 @@
<div class="page-header">
<h1>Forms</h1>
</div>
+
+ <h2>Four types of forms</h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>Vertical (default)</th>
+ <td><code>.vertical-form</code> <span class="muted">(not required)</span></td>
+ <td>Stacked, left-aligned labels over controls</td>
+ </tr>
+ <tr>
+ <th>Horiztonal</th>
+ <td><code>.horizontal-form</code></td>
+ <td>Float left, right-aligned labels on same line as controls</td>
+ </tr>
+ <tr>
+ <th>Inline</th>
+ <td><code>.inline-form</code></td>
+ <td>Left-aligned label and inline-block controls for compact style</td>
+ </tr>
+ <tr>
+ <th>Search</th>
+ <td><code>.search-form</code></td>
+ <td>Extra-rounded text input for a typical search aesthetic</td>
+ </tr>
+ </tbody>
+ </table>
+
+
<div class="row">
<div class="span4">
- <h3>Four types of forms</h3>
- <p>With 2.0, we now have four types of forms to choose from:</p>
- <ul>
- <li>Search form for a super-rounded input and optional button</li>
- <li>Inline form for a series of elements on one line</li>
- <li>Horizontal form for left-aligned labels</li>
- <li>Vertical form for stacked labels and inputs</li>
- </ul>
+ <h3>Why four types</h3>
+ <p>With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.</p>
</div>
<div class="span4">
- <h3></h3>
+ <h3>Vertical or horizontal</h3>
+ <p>Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. <strong>They share the same exact markup; just swap the class.</strong></p>
</div>
</div><!-- /row -->
<div class="row">
@@ -875,79 +905,123 @@
</div>
</div><!-- /row -->
+
+
+ <h2>Buttons</h2>
+ <table class="bordered-table striped-table">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Preview</th>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>Default</th>
+ <td><a class="btn" href="#">Button</a></td>
+ <td><code>.btn</code></td>
+ <td>Standard gray button with gradient</td>
+ </tr>
+ <tr>
+ <th>Primary</th>
+ <td><a class="btn primary" href="#">Button</a></td>
+ <td><code>.primary</code></td>
+ <td>Makes button blue for more visual weight to indicate the primary action in a set of buttons</td>
+ </tr>
+ <tr>
+ <th>Info</th>
+ <td><a class="btn info" href="#">Button</a></td>
+ <td><code>.info</code></td>
+ <td>Used as an alternate to the default styles</td>
+ </tr>
+ <tr>
+ <th>Success</th>
+ <td><a class="btn success" href="#">Button</a></td>
+ <td><code>.success</code></td>
+ <td>Used to indicate a successful or positive action will be taken</td>
+ </tr>
+ <tr>
+ <th>Danger</th>
+ <td><a class="btn danger" href="#">Button</a></td>
+ <td><code>.danger</code></td>
+ <td>Used to indicate a dangerous or potentially negative action will be taken</td>
+ </tr>
+ </tbody>
+ </table>
+
<div class="row">
- <div class="span3">
- <h2>Buttons</h2>
- <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
- <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
+ <div class="span4">
+ <h3>Buttons for actions</h3>
+ <p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
</div>
- <div class="span9">
- <h3>Example buttons</h3>
- <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
- <div class="well" style="padding: 14px 19px;">
- <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button>
- </div>
- <h3>Alternate sizes</h3>
+ <div class="span4">
+ <h3>For anchors and forms</h3>
+ <p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you’ll want to apply these to only <code><a></code> and <code><button></code> elements.</p>
+ </div>
+ <div class="span4">
+ <p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code><button></code> and <code><a></code> elements for consistency.</p>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+ <h3>Multiple sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p>
- <div class="well">
+ <p>
<a href="#" class="btn large primary">Primary action</a>
<a href="#" class="btn large">Action</a>
- </div>
- <div class="well" style="padding: 16px 19px;">
+ </p>
+ <p>
<a href="#" class="btn small primary">Primary action</a>
<a href="#" class="btn small">Action</a>
- </div>
+ </p>
+ </div>
+ <div class="span8">
<h3>Disabled state</h3>
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
- <h4>Links</h4>
- <div class="well">
+ <p>
<a href="#" class="btn large primary disabled">Primary action</a>
<a href="#" class="btn large disabled">Action</a>
- </div>
- <h4>Buttons</h4>
- <div class="well">
+ </p>
+ <p>
<button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
- </div>
+ </p>
</div>
- </div><!-- /row -->
+ </div>
- <div class="row">
- <div class="span3">
- <h2>Button groups</h2>
+ <h2>Button groups</h2>
+
+ <div class="well">
+ <div class="btn-group">
+ <a class="btn" href="#">Left</a>
+ <a class="btn" href="#">Middle</a>
+ <a class="btn" href="#">Right</a>
</div>
- <div class="span9">
- <h3>Example</h3>
- <div class="well">
- <div class="btn-group">
- <a class="btn" href="#">Left</a>
- <a class="btn" href="#">Middle</a>
- <a class="btn" href="#">Right</a>
- </div>
+ </div>
+ <div class="well">
+ <div class="btn-toolbar">
+ <div class="btn-group">
+ <a class="btn" href="#">1</a>
+ <a class="btn" href="#">2</a>
+ <a class="btn" href="#">3</a>
+ <a class="btn" href="#">4</a>
+ <a class="btn" href="#">5</a>
</div>
- <div class="well">
- <div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn" href="#">1</a>
- <a class="btn" href="#">2</a>
- <a class="btn" href="#">3</a>
- <a class="btn" href="#">4</a>
- <a class="btn" href="#">5</a>
- </div>
- <div class="btn-group">
- <a class="btn" href="#">6</a>
- <a class="btn" href="#">7</a>
- <a class="btn" href="#">8</a>
- </div>
- <div class="btn-group">
- <a class="btn" href="#">9</a>
- </div>
- <div class="btn-group">
- <a class="btn" href="#">10</a>
- </div>
- </div>
+ <div class="btn-group">
+ <a class="btn" href="#">6</a>
+ <a class="btn" href="#">7</a>
+ <a class="btn" href="#">8</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">9</a>
+ </div>
+ <div class="btn-group">
+ <a class="btn" href="#">10</a>
</div>
</div>
- </div><!-- /row -->
+ </div>
</section>
diff --git a/docs/javascript.html b/docs/javascript.html
index c9ac7e21da..3175d261e5 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -88,7 +88,7 @@
<div class="span9">
<h3>What's included</h3>
<p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 150px;">File</th>
@@ -151,7 +151,7 @@
<h3>Using bootstrap-modal</h3>
<pre class="prettyprint linenums">$('#my-modal').modal(options)</pre>
<h3>Options</h3>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -209,7 +209,7 @@ $('#my-modal').modal({
<p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
<h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 150px;">Event</th>
@@ -457,7 +457,7 @@ $('#my-modal').bind('hidden', function () {
<h3>Using bootstrap-twipsy.js</h3>
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
<h3>Options</h3>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@@ -574,7 +574,7 @@ $('#my-modal').bind('hidden', function () {
<h3>Using boostrap-popover.js</h3>
<pre class="prettyprint linenums">$('#example').popover(options)</pre>
<h3>Options</h3>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
diff --git a/docs/less.html b/docs/less.html
index d5a467bfa2..4fa0f0bdd2 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -166,7 +166,7 @@
<h2 id="compiling">Compiling Less</h2>
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
<h3>Ways to compile</h3>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th style="width: 120px;">Method</th>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 4a5aa9a0b0..de50caf8d8 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -161,7 +161,7 @@
</div>
<h2>Grid customization</h2>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th>Variable</th>
@@ -273,7 +273,7 @@
<div class="span8">
<h2>Supported devices</h2>
<p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
- <table class="zebra-striped">
+ <table class="striped-table">
<thead>
<tr>
<th>Label</th>
diff --git a/lib/tables.less b/lib/tables.less
index 8a786ffd2a..b02087fbd2 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -9,14 +9,12 @@
table {
width: 100%;
- margin-bottom: @baseLineHeight;
padding: 0;
- border-collapse: separate; // Done so we can round those corners!
- *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+ margin-bottom: @baseLineHeight;
font-size: @baseFontSize;
- border: 1px solid #ddd;
- .border-radius(4px);
- th, td {
+ border-collapse: collapse;
+ th,
+ td {
padding: 10px 10px 9px;
line-height: @baseLineHeight;
text-align: left;
@@ -25,22 +23,49 @@ table {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
- border-bottom: 1px solid #ddd;
}
td {
vertical-align: top;
+ border-top: 1px solid #ddd;
+ }
+ // When scoped to row, fix th in tbody
+ tbody th {
+ border-top: 1px solid #ddd;
+ vertical-align: top;
+ }
+}
+
+
+// CONDENSED VERSION
+// -----------------
+
+.condensed-table {
+ th,
+ td {
+ padding: 5px 5px 4px;
}
+}
+
+
+// BORDERED VERSION
+// ----------------
+
+.bordered-table {
+ border: 1px solid #ddd;
+ border-collapse: separate; // Done so we can round those corners!
+ *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+ .border-radius(4px);
th + th,
- td + td {
+ td + td,
+ th + td {
border-left: 1px solid #ddd;
}
- tr + tr td {
- border-top: 1px solid #ddd;
- }
- tbody tr:first-child td:first-child {
+ thead:first-child tr:first-child th:first-child,
+ tbody:first-child tr:first-child td:first-child {
.border-radius(4px 0 0 0);
}
- tbody tr:first-child td:last-child {
+ thead:first-child tr:first-child th:last-child,
+ tbody:first-child tr:first-child td:last-child {
.border-radius(0 4px 0 0);
}
tbody tr:last-child td:first-child {
@@ -52,20 +77,55 @@ table {
}
+// ----------------
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+.tableColumns(@columnSpan: 1) {
+ width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
+}
+table {
+ // Default columns
+ .span1 { .tableColumns(1); }
+ .span2 { .tableColumns(2); }
+ .span3 { .tableColumns(3); }
+ .span4 { .tableColumns(4); }
+ .span5 { .tableColumns(5); }
+ .span6 { .tableColumns(6); }
+ .span7 { .tableColumns(7); }
+ .span8 { .tableColumns(8); }
+ .span9 { .tableColumns(9); }
+ .span10 { .tableColumns(10); }
+ .span11 { .tableColumns(11); }
+ .span12 { .tableColumns(12); }
+ .span13 { .tableColumns(13); }
+ .span14 { .tableColumns(14); }
+ .span15 { .tableColumns(15); }
+ .span16 { .tableColumns(16); }
+}
+
+
// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.zebra-striped {
+.striped-table {
tbody {
- tr:nth-child(odd) td {
+ tr:nth-child(odd) td,
+ tr:nth-child(odd) th {
background-color: #f9f9f9;
}
- tr:hover td {
+ tr:hover td,
+ tr:hover th {
background-color: #f5f5f5;
}
}
+}
+
+// TABLESORTER
+// -----------
+
+table {
// Tablesorting styles w/ jQuery plugin
.header {
cursor: pointer;
@@ -111,9 +171,6 @@ table {
.opacity(60);
}
}
-}
-
-table {
// Blue Table Headings
.blue {
color: @blue;
--
GitLab
From 27b8e5e4fce71ccc5ebd56230dedd9c2403239eb Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 31 Oct 2011 21:24:57 -0700
Subject: [PATCH 62/66] small docs tweak
---
docs/base-css.html | 1 -
1 file changed, 1 deletion(-)
diff --git a/docs/base-css.html b/docs/base-css.html
index 6d3d92a171..f6030ace1f 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -992,7 +992,6 @@
</div>
<h2>Button groups</h2>
-
<div class="well">
<div class="btn-group">
<a class="btn" href="#">Left</a>
--
GitLab
From 31ea00304626ea68b758def41769606d4c049671 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 31 Oct 2011 21:45:46 -0700
Subject: [PATCH 63/66] remove alt tab styles for now, too complicated to
accomplish both static and tabble; fix up CSS a bit
---
bootstrap.css | 66 ++++++++++++++++++++++++++++++++++++++++++--
bootstrap.min.css | 13 ++++++---
docs/components.html | 47 +++++--------------------------
lib/patterns.less | 53 ++++++++++++++++++++---------------
4 files changed, 109 insertions(+), 70 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 2795e42513..163ee6bcd8 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: Mon Oct 31 19:36:50 PDT 2011
+ * Date: Mon Oct 31 21:45:06 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).
@@ -1495,17 +1495,77 @@ table .headerSortUp.purple, table .headerSortDown.purple {
.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
+.tabbable.tabs-left, .tabbable.tabs-right {
+ zoom: 1;
+}
+.tabbable.tabs-left:before,
+.tabbable.tabs-right:before,
+.tabbable.tabs-left:after,
+.tabbable.tabs-right:after {
+ display: table;
+ content: "";
+ zoom: 1;
+ *display: inline;
+}
+.tabbable.tabs-left:after, .tabbable.tabs-right:after {
+ clear: both;
+}
+.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs {
+ width: 100px;
+}
+.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li {
+ float: none;
+ margin-bottom: -1px;
+}
+.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a {
+ margin-bottom: 2px;
+}
+.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover {
+ border-color: transparent;
+}
+.tabbable.tabs-left .tab-content {
+ margin-left: 100px;
+}
.tabbable.tabs-left .tabs {
float: left;
}
.tabbable.tabs-left .tabs > li {
- float: none;
+ margin-right: -1px;
+}
+.tabbable.tabs-left .tabs > li > a {
+ margin-right: 0;
+ -webkit-border-radius: 4px 0 0 4px;
+ -moz-border-radius: 4px 0 0 4px;
+ border-radius: 4px 0 0 4px;
+}
+.tabbable.tabs-left .tabs > li > a:hover {
+ border-right-color: #ddd;
+}
+.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover {
+ border-color: #ddd;
+ border-right-color: transparent;
+}
+.tabbable.tabs-right .tab-content {
+ margin-right: 100px;
}
.tabbable.tabs-right .tabs {
float: right;
}
.tabbable.tabs-right .tabs > li {
- float: none;
+ margin-left: -1px;
+}
+.tabbable.tabs-right .tabs > li > a {
+ margin-left: 0;
+ -webkit-border-radius: 0 4px 4px 0;
+ -moz-border-radius: 0 4px 4px 0;
+ border-radius: 0 4px 4px 0;
+}
+.tabbable.tabs-right .tabs > li > a:hover {
+ border-left-color: #ddd;
+}
+.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover {
+ border-color: #ddd;
+ border-left-color: transparent;
}
.tabs .menu-dropdown, .tabs .dropdown-menu {
top: 35px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 35f8a9bcd7..9e45659050 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -240,10 +240,15 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;}
-.tabbable.tabs-left .tabs{float:left;}
-.tabbable.tabs-left .tabs>li{float:none;}
-.tabbable.tabs-right .tabs{float:right;}
-.tabbable.tabs-right .tabs>li{float:none;}
+.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;}
+.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;}
+.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;}
+.tabbable.tabs-left .tab-content{margin-left:100px;}
+.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;}
+.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;}
+.tabbable.tabs-right .tab-content{margin-right:100px;}
+.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;}
+.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;}
.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
diff --git a/docs/components.html b/docs/components.html
index c18d8c113e..73a0492989 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -245,39 +245,6 @@
<li><a href="#">Contact</a></li>
</ul>
</pre>
- <h3>Alternate tabs</h3>
- <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
- <div class="row">
- <div class="span2">
- <div class="clearfix">
- <ul class="tabs tabs-left">
- <li class="active"><a href="#">Active link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Linky link</a></li>
- <li><a href="#">What up link</a></li>
- </ul>
- </div>
- </div>
- <div class="span2">
- <div class="clearfix">
- <ul class="tabs tabs-right">
- <li class="active"><a href="#">Active link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Linky link</a></li>
- <li><a href="#">What up link</a></li>
- </ul>
- </div>
- </div>
- <div class="span5">
- <div class="clearfix">
- <ul class="tabs tabs-bottom">
- <li class="active"><a href="#">Active link</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Linky link</a></li>
- </ul>
- </div>
- </div>
- </div>
<h3>Tabbable tabs</h3>
<p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p>
@@ -315,20 +282,20 @@
<div class="tab-content" id="myTabContent2">
<div class="tab-pane active" id="1">
<h4>Section 1</h4>
- <p>Oh hai!</p>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="tab-pane" id="2">
<h4>Section 2</h4>
- <p>Oh hai!</p>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="tab-pane" id="3">
<h4>Section 3</h4>
- <p>Oh hai!</p>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
</div>
- <div class="span5">
+ <div class="span4 offset1">
<div class="tabbable tabs-right">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
@@ -338,15 +305,15 @@
<div class="tab-content" id="myTabContent3">
<div class="tab-pane active" id="1">
<h4>Section 1</h4>
- <p>Oh hai!</p>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="tab-pane" id="2">
<h4>Section 2</h4>
- <p>Oh hai!</p>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="tab-pane" id="3">
<h4>Section 3</h4>
- <p>Oh hai!</p>
+ <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
diff --git a/lib/patterns.less b/lib/patterns.less
index 1db3158313..367347e270 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -378,34 +378,48 @@
border-color: transparent #ddd #ddd #ddd;
}
- // Tabs on left
- &.tabs-left {
+ // Tabs on left and right
+ &.tabs-left,
+ &.tabs-right {
.clearfix();
+ .tabs {
+ // Give a fixed width to avoid floating .tab-con
+ width: 100px;
+ // Unfloat them so they stack
+ > li {
+ float: none;
+ margin-bottom: -1px;
+ > a {
+ margin-bottom: 2px;
+ &:hover {
+ border-color: transparent;
+ }
+ }
+ }
+ }
+ }
+ // Tabs on left
+ &.tabs-left {
.tab-content {
- float: left;
+ margin-left: 100px;
}
.tabs {
float: left;
-
> li {
- float: none;
- margin-bottom: -1px;
margin-right: -1px;
> a {
margin-right: 0;
- margin-bottom: 2px;
.border-radius(4px 0 0 4px);
&:hover {
- border-color: transparent;
border-right-color: #ddd;
}
}
}
-
- > .active > a,
- > .active > a:hover {
+ // Active state
+ .active > a,
+ .active > a:hover {
border-color: #ddd;
border-right-color: transparent;
}
@@ -414,32 +428,25 @@
// Tabs on right
&.tabs-right {
- .clearfix();
-
.tab-content {
- float: right;
+ margin-right: 100px;
}
.tabs {
float: right;
-
> li {
- float: none;
- margin-bottom: -1px;
margin-left: -1px;
> a {
margin-left: 0;
- margin-bottom: 2px;
- .border-radius(4px 0 0 4px);
+ .border-radius(0 4px 4px 0);
&:hover {
- border-color: transparent;
border-left-color: #ddd;
}
}
}
-
- > .active > a,
- > .active > a:hover {
+ // Active state
+ .active > a,
+ .active > a:hover {
border-color: #ddd;
border-left-color: transparent;
}
--
GitLab
From f459f826af827735f8bfea2e850dba1151b19efc Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 31 Oct 2011 21:46:45 -0700
Subject: [PATCH 64/66] recompiling and pushing just to be sure
---
bootstrap.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/bootstrap.css b/bootstrap.css
index 163ee6bcd8..2c35362d00 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: Mon Oct 31 21:45:06 PDT 2011
+ * Date: Mon Oct 31 21:46:38 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).
--
GitLab
From ab1bf122975c500ad5bf9d0b42dc12d6ca2291ad Mon Sep 17 00:00:00 2001
From: Tom Blobaum <tblobaum@gmail.com>
Date: Fri, 4 Nov 2011 07:02:02 -0500
Subject: [PATCH 65/66] Added more buttons and colors
---
docs/base-css.html | 19 +++++++++++++++++++
lib/patterns.less | 24 ++++++++++++++++++++----
lib/variables.less | 11 ++++++++++-
3 files changed, 49 insertions(+), 5 deletions(-)
diff --git a/docs/base-css.html b/docs/base-css.html
index f6030ace1f..13a5cf9785 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -948,6 +948,25 @@
<td><code>.danger</code></td>
<td>Used to indicate a dangerous or potentially negative action will be taken</td>
</tr>
+
+ <tr>
+ <th>Brown</th>
+ <td><a class="btn brown" href="#">Button</a></td>
+ <td><code>.brown</code></td>
+ <td>Used to indicate a brown action will be taken</td>
+ </tr>
+ <tr>
+ <th>Purple</th>
+ <td><a class="btn purple" href="#">Button</a></td>
+ <td><code>.purple</code></td>
+ <td>Used to indicate a purple action will be taken</td>
+ </tr>
+ <tr>
+ <th>Other Blue</th>
+ <td><a class="btn blue" href="#">Button</a></td>
+ <td><code>.blue</code></td>
+ <td>Used to indicate a blue action will be taken</td>
+ </tr>
</tbody>
</table>
diff --git a/lib/patterns.less b/lib/patterns.less
index 367347e270..fe1209caef 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -602,7 +602,13 @@ footer {
&.success,
&.success:hover,
&.info,
- &.info:hover {
+ &.info:hover,
+ &.brown,
+ &.brown:hover,
+ &.purple,
+ &.purple:hover,
+ &.blue,
+ &.blue:hover {
color: @white
}
// Danger and error appear as red
@@ -612,12 +618,22 @@ footer {
}
// Success appears as green
&.success {
- .gradientBar(#62c462, #57a957);
+ .gradientBar(@greenLight, @green);
}
// Info appears as a neutral blue
&.info {
.gradientBar(#5bc0de, #339bb9);
}
+
+ &.brown {
+ .gradientBar(@brownLight, @brown);
+ }
+ &.purple {
+ .gradientBar(@purpleLight, @purple);
+ }
+ &.blue {
+ .gradientBar(@blueLight, @blue);
+ }
}
// Base .btn styles
@@ -841,8 +857,8 @@ input[type=submit].btn {
border-color: lighten(#f56a66, 20%);
}
&.success {
- background-color: lighten(#62c462, 30%);
- border-color: lighten(#62c462, 25%);
+ background-color: lighten(@greenLight, 30%);
+ border-color: lighten(@greenLight, 25%);
}
&.info {
background-color: lighten(#6bd0ee, 25%);
diff --git a/lib/variables.less b/lib/variables.less
index 92d09de709..5a1ce1a4bf 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -24,14 +24,23 @@
// ACCENT COLORS
// -------------
+@blueLight: #63AFFF;
@blue: #049CDB;
@blueDark: #0064CD;
-@green: #46a546;
+
+@greenLight: #62c462;
+@green: #57a957;
+@greenDark: #1F8511;
+@brownLight: #C7A383;
+@brown: #B3774D;
+
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
+
@pink: #c3325f;
@purple: #7a43b6;
+@purpleLight: #BB91FF;
// GRID
--
GitLab
From 46066a90fc4ccd7a2feb00b4236a6f1c52ebcdd2 Mon Sep 17 00:00:00 2001
From: Tom Blobaum <tblobaum@gmail.com>
Date: Fri, 4 Nov 2011 07:10:18 -0500
Subject: [PATCH 66/66] updated bundled css
---
bootstrap.css | 73 +++++++++++++++++++++++++++++++++++++++++------
bootstrap.min.css | 13 +++++----
2 files changed, 73 insertions(+), 13 deletions(-)
diff --git a/bootstrap.css b/bootstrap.css
index 2c35362d00..8535c67874 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: Mon Oct 31 21:46:38 PDT 2011
+ * Date:
*/
/* 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).
@@ -874,8 +874,8 @@ textarea[readonly] {
border-radius: 3px 0 0 3px;
}
.input-prepend .active, .input-append .active {
- background: #a9dba9;
- border-color: #46a546;
+ background: #bcddbc;
+ border-color: #57a957;
}
.input-prepend .add-on {
*margin-top: 1px;
@@ -1088,11 +1088,11 @@ table .headerSortUp.blue, table .headerSortDown.blue {
background-color: #ade6fe;
}
table .green {
- color: #46a546;
- border-bottom-color: #46a546;
+ color: #57a957;
+ border-bottom-color: #57a957;
}
table .headerSortUp.green, table .headerSortDown.green {
- background-color: #cdeacd;
+ background-color: #deeede;
}
table .red {
color: #9d261d;
@@ -1695,7 +1695,19 @@ footer {
.btn.info,
.alert-message.info,
.btn.info:hover,
-.alert-message.info:hover {
+.alert-message.info:hover,
+.btn.brown,
+.alert-message.brown,
+.btn.brown:hover,
+.alert-message.brown:hover,
+.btn.purple,
+.alert-message.purple,
+.btn.purple:hover,
+.alert-message.purple:hover,
+.btn.blue,
+.alert-message.blue,
+.btn.blue:hover,
+.alert-message.blue:hover {
color: #ffffff;
}
.btn.danger,
@@ -1746,6 +1758,51 @@ footer {
border-color: #339bb9 #339bb9 #22697d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
+.btn.brown, .alert-message.brown {
+ background-color: #b3774d;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#c7a383), to(#b3774d));
+ background-image: -moz-linear-gradient(top, #c7a383, #b3774d);
+ background-image: -ms-linear-gradient(top, #c7a383, #b3774d);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c7a383), color-stop(100%, #b3774d));
+ background-image: -webkit-linear-gradient(top, #c7a383, #b3774d);
+ background-image: -o-linear-gradient(top, #c7a383, #b3774d);
+ background-image: linear-gradient(top, #c7a383, #b3774d);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c7a383', endColorstr='#b3774d', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #b3774d #b3774d #7e5336;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+.btn.purple, .alert-message.purple {
+ background-color: #7a43b6;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#bb91ff), to(#7a43b6));
+ background-image: -moz-linear-gradient(top, #bb91ff, #7a43b6);
+ background-image: -ms-linear-gradient(top, #bb91ff, #7a43b6);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bb91ff), color-stop(100%, #7a43b6));
+ background-image: -webkit-linear-gradient(top, #bb91ff, #7a43b6);
+ background-image: -o-linear-gradient(top, #bb91ff, #7a43b6);
+ background-image: linear-gradient(top, #bb91ff, #7a43b6);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb91ff', endColorstr='#7a43b6', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #7a43b6 #7a43b6 #552e7e;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+.btn.blue, .alert-message.blue {
+ background-color: #049cdb;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#63afff), to(#049cdb));
+ background-image: -moz-linear-gradient(top, #63afff, #049cdb);
+ background-image: -ms-linear-gradient(top, #63afff, #049cdb);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #63afff), color-stop(100%, #049cdb));
+ background-image: -webkit-linear-gradient(top, #63afff, #049cdb);
+ background-image: -o-linear-gradient(top, #63afff, #049cdb);
+ background-image: linear-gradient(top, #63afff, #049cdb);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63afff', endColorstr='#049cdb', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #049cdb #049cdb #036690;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
.btn {
cursor: pointer;
display: inline-block;
@@ -2334,7 +2391,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-color: #f89406;
}
.label.success {
- background-color: #46a546;
+ background-color: #57a957;
}
.label.notice {
background-color: #62cffc;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 9e45659050..674d7cf0c5 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -143,7 +143,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.inline-inputs span{padding:0 2px 0 1px;}
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
-.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
+.input-prepend .active,.input-append .active{background:#bcddbc;border-color:#57a957;}
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
@@ -189,8 +189,8 @@ table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible
table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
table .blue{color:#049cdb;border-bottom-color:#049cdb;}
table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;}
-table .green{color:#46a546;border-bottom-color:#46a546;}
-table .headerSortUp.green,table .headerSortDown.green{background-color:#cdeacd;}
+table .green{color:#57a957;border-bottom-color:#57a957;}
+table .headerSortUp.green,table .headerSortDown.green{background-color:#deeede;}
table .red{color:#9d261d;border-bottom-color:#9d261d;}
table .headerSortUp.red,table .headerSortDown.red{background-color:#f4c8c5;}
table .yellow{color:#ffc40d;border-bottom-color:#ffc40d;}
@@ -265,10 +265,13 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:13.5px;}
-.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
+.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover,.btn.brown,.alert-message.brown,.btn.brown:hover,.alert-message.brown:hover,.btn.purple,.alert-message.purple,.btn.purple:hover,.alert-message.purple:hover,.btn.blue,.alert-message.blue,.btn.blue:hover,.alert-message.blue:hover{color:#ffffff;}
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.brown,.alert-message.brown{background-color:#b3774d;background-image:-khtml-gradient(linear, left top, left bottom, from(#c7a383), to(#b3774d));background-image:-moz-linear-gradient(top, #c7a383, #b3774d);background-image:-ms-linear-gradient(top, #c7a383, #b3774d);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #c7a383), color-stop(100%, #b3774d));background-image:-webkit-linear-gradient(top, #c7a383, #b3774d);background-image:-o-linear-gradient(top, #c7a383, #b3774d);background-image:linear-gradient(top, #c7a383, #b3774d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c7a383', endColorstr='#b3774d', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#b3774d #b3774d #7e5336;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.purple,.alert-message.purple{background-color:#7a43b6;background-image:-khtml-gradient(linear, left top, left bottom, from(#bb91ff), to(#7a43b6));background-image:-moz-linear-gradient(top, #bb91ff, #7a43b6);background-image:-ms-linear-gradient(top, #bb91ff, #7a43b6);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #bb91ff), color-stop(100%, #7a43b6));background-image:-webkit-linear-gradient(top, #bb91ff, #7a43b6);background-image:-o-linear-gradient(top, #bb91ff, #7a43b6);background-image:linear-gradient(top, #bb91ff, #7a43b6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb91ff', endColorstr='#7a43b6', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#7a43b6 #7a43b6 #552e7e;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.blue,.alert-message.blue{background-color:#049cdb;background-image:-khtml-gradient(linear, left top, left bottom, from(#63afff), to(#049cdb));background-image:-moz-linear-gradient(top, #63afff, #049cdb);background-image:-ms-linear-gradient(top, #63afff, #049cdb);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #63afff), color-stop(100%, #049cdb));background-image:-webkit-linear-gradient(top, #63afff, #049cdb);background-image:-o-linear-gradient(top, #63afff, #049cdb);background-image:linear-gradient(top, #63afff, #049cdb);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63afff', endColorstr='#049cdb', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#049cdb #049cdb #036690;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
.btn:focus{outline:1px dotted #666;}
.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
@@ -336,7 +339,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
.label.warning{background-color:#f89406;}
-.label.success{background-color:#46a546;}
+.label.success{background-color:#57a957;}
.label.notice{background-color:#62cffc;}
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
.media-grid:after{clear:both;}
--
GitLab