overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class

1 files changed, 180 insertions, 122 deletions

diff --git a/bootstrap.css b/bootstrap.css
index f6dd39226..5c9d4aa97 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 Jan  7 15:52:40 PST 2012
+ * Date: Sat Jan  7 20:25:41 PST 2012
  */
 html, body {
   margin: 0;
@@ -516,9 +516,9 @@ pre {
   background-color: #f5f5f5;
   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-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
   white-space: pre;
   white-space: pre-wrap;
   word-break: break-all;
@@ -541,6 +541,7 @@ legend {
   line-height: 36px;
   color: #333333;
   border-bottom: 1px solid #eee;
+  -webkit-margin-collapse: separate;
 }
 label,
 input,
@@ -1502,6 +1503,16 @@ i {
   background-image: linear-gradient(top, #049cdb, #0064cd);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
+  background-color: #0077b3;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -ms-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(top, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);
   -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
   -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
@@ -1692,19 +1703,51 @@ i {
   left: 0;
   z-index: 1010;
 }
-.nav {
+.navbar .nav {
   position: relative;
   left: 0;
   display: block;
   float: left;
   margin: 0 10px 0 0;
+  /*  // Dropdowns within the .nav
+  .dropdown-toggle:hover,
+  .dropdown.open .dropdown-toggle {
+    background: #444;
+    background: rgba(255,255,255,.05);
+  }
+  .dropdown-menu {
+    background-color: #333;
+    .dropdown-toggle {
+      color: @white;
+      &.open {
+        background: #444;
+        background: rgba(255,255,255,.05);
+      }
+    }
+    li a {
+      padding: 4px 15px;
+      color: #999;
+      text-shadow: 0 1px 0 rgba(0,0,0,.5);
+      &:hover {
+        #gradient > .vertical(#292929,#191919);
+        color: @white;
+      }
+    }
+    .active a {
+      color: @white;
+    }
+    .divider {
+      background-color: #222;
+      border-color: #444;
+    }
+  }*/
+
 }
-.nav > li {
+.navbar .nav > li {
   display: block;
   float: left;
 }
-.nav a {
-  display: block;
+.navbar .nav a {
   float: none;
   padding: 10px 10px 11px;
   line-height: 19px;
@@ -1712,15 +1755,15 @@ i {
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
-.nav a:hover {
+.navbar .nav a:hover {
   color: #ffffff;
   text-decoration: none;
 }
-.nav .active > a {
+.navbar .nav .active > a {
   background-color: #222;
   background-color: rgba(0, 0, 0, 0.5);
 }
-.nav .vertical-divider {
+.navbar .nav .vertical-divider {
   height: 40px;
   width: 1px;
   margin: 0 5px;
@@ -1728,58 +1771,55 @@ i {
   background-color: #222;
   border-right: 1px solid #444;
 }
-.nav.secondary-nav {
+.navbar .nav.secondary-nav {
   float: right;
   margin-left: 10px;
   margin-right: 0;
 }
-.nav.secondary-nav .dropdown-menu {
+.navbar .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 {
+  margin-left: 0;
+  margin-bottom: 18px;
+  list-style: none;
 }
-.nav .dropdown-menu {
-  background-color: #333;
+.nav > li > a {
+  display: block;
 }
-.nav .dropdown-menu .dropdown-toggle {
-  color: #ffffff;
+.nav > li > a:hover {
+  text-decoration: none;
+  background-color: #eee;
 }
-.nav .dropdown-menu .dropdown-toggle.open {
-  background: #444;
-  background: rgba(255, 255, 255, 0.05);
-}
-.nav .dropdown-menu li a {
-  padding: 4px 15px;
-  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.list {
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-bottom: 0;
 }
-.nav .dropdown-menu .active a {
-  color: #ffffff;
+.nav.list > li > a, .nav.list .nav-header {
+  display: block;
+  padding: 3px 15px;
+  margin-left: -15px;
+  margin-right: -15px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
-.nav .dropdown-menu .divider {
-  background-color: #222;
-  border-color: #444;
+.nav.list .nav-header {
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #999999;
+  text-transform: uppercase;
+}
+.nav.list > li + .nav-header {
+  margin-top: 9px;
+}
+.nav.list .active > a {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  background-color: #0088cc;
 }
 .tabs, .pills {
-  padding: 0;
-  margin: 0 0 20px;
-  list-style: none;
   zoom: 1;
 }
 .tabs:before,
@@ -1798,29 +1838,26 @@ i {
   float: left;
 }
 .tabs > li > a, .pills > li > a {
-  display: block;
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px;
 }
 .tabs {
-  border-color: #ddd;
-  border-style: solid;
-  border-width: 0 0 1px;
+  border-bottom: 1px solid #ddd;
 }
 .tabs > li {
-  position: relative;
   margin-bottom: -1px;
 }
 .tabs > li > a {
-  padding: 0 15px;
-  margin-right: 2px;
-  line-height: 36px;
+  padding-top: 9px;
+  padding-bottom: 9px;
   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 {
@@ -1830,6 +1867,76 @@ i {
   border-bottom-color: transparent;
   cursor: default;
 }
+.pills > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.pills .active > a, .pills .active > a:hover {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+.nav.stacked > li {
+  float: none;
+}
+.nav.stacked > li > a {
+  margin-right: 0;
+}
+.tabs.stacked {
+  border-bottom: 0;
+}
+.tabs.stacked > li > a {
+  border: 1px solid #ddd;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.tabs.stacked > li:first-child > a {
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.tabs.stacked > li:last-child > a {
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+.tabs.stacked > li > a:hover {
+  border-color: #ddd;
+  z-index: 2;
+}
+.pills.stacked > li > a {
+  margin-bottom: 3px;
+}
+.pills.stacked > li:last-child > a {
+  margin-bottom: 1px;
+}
+.tabs .dropdown-menu, .pills .dropdown-menu {
+  top: 33px;
+  border-width: 1px;
+}
+.pills .dropdown-menu {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
+  margin-top: 6px;
+}
+.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle {
+  background-color: #999;
+  border-color: #999;
+}
+.tabs .open .caret, .pills .open .caret {
+  border-top-color: #fff;
+  filter: alpha(opacity=100);
+  -moz-opacity: 1;
+  opacity: 1;
+}
 .tabbable {
   margin-bottom: 18px;
 }
@@ -1929,46 +2036,6 @@ i {
   border-color: #ddd;
   border-left-color: transparent;
 }
-.tabs .dropdown-menu {
-  top: 37px;
-  border-width: 1px;
-}
-.tabs .dropdown-toggle .caret {
-  margin-top: 15px;
-  margin-left: 5px;
-}
-.tabs .open .dropdown-toggle {
-  border-color: #999;
-}
-.tabs .open .dropdown-toggle .caret {
-  border-top-color: #fff;
-  filter: alpha(opacity=100);
-  -moz-opacity: 1;
-  opacity: 1;
-}
-.pills > li > a {
-  padding: 0 15px;
-  margin: 5px 3px 5px 0;
-  line-height: 30px;
-  text-shadow: 0 1px 1px #ffffff;
-  -webkit-border-radius: 15px;
-  -moz-border-radius: 15px;
-  border-radius: 15px;
-}
-.pills > li > a:hover {
-  color: #ffffff;
-  text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-  background-color: #005580;
-}
-.pills .active > a {
-  color: #ffffff;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-  background-color: #0088cc;
-}
-.pills-vertical > li {
-  float: none;
-}
 .tab-content > .tab-pane, .pill-content > .pill-pane {
   display: none;
 }
@@ -2060,27 +2127,29 @@ i {
   color: #333333;
   background-color: #eee;
 }
-.side-nav {
-  padding: 9px 0;
+/*.side-nav {
+  padding: @baseLineHeight / 2 0;
 }
-.side-nav .nav-label, .side-nav .nav-item {
+.side-nav .nav-label,
+.side-nav .nav-item {
   display: block;
   padding: 3px 15px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
 .side-nav .nav-label {
   font-size: 11px;
-  line-height: 18px;
-  color: #999999;
+  line-height: @baseLineHeight;
+  color: @grayLight;
   text-transform: uppercase;
 }
 .side-nav .nav-group {
-  margin: 0;
+  margin: 0; // clear default ul margins
   list-style: none;
 }
 .side-nav .nav-group + .nav-label {
   margin-top: 9px;
 }
+
 .side-nav .nav-item {
   font-weight: bold;
 }
@@ -2092,22 +2161,11 @@ i {
 }
 .side-nav .active .nav-item {
   color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
-  background-color: #999999;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
-  background-image: -moz-linear-gradient(top, #cccccc, #999999);
-  background-image: -ms-linear-gradient(top, #cccccc, #999999);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));
-  background-image: -webkit-linear-gradient(top, #cccccc, #999999);
-  background-image: -o-linear-gradient(top, #cccccc, #999999);
-  background-image: linear-gradient(top, #cccccc, #999999);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);
-  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-}
-.breadcrumb {
+  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+  #gradient > .vertical(#ccc, #999);
+  @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
+  .box-shadow(@shadow);
+}*/.breadcrumb {
   padding: 7px 14px;
   margin: 0 0 18px;
   background-color: #f5f5f5;