overhaul the entire tabs component structure and docs; remove side nav and...

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

docs/assets/js/google-code-prettify/prettify.css

@@ -6,21 +6,13 @@
 .kwd, .linenums .tag { color: #1e347b; }
 .typ, .atn, .dec, .var { color: teal; }
 .pln { color: #48484c; }
-pre.prettyprint {
-  background-color: #fefbf3;
-  padding: 9px;
-  margin-bottom: 9px;
-}
-
-pre.prettyprint {
-  color: #ccc;
-  background-color: #252525;
-}
 
-pre.prettyprint {
+.prettyprint {
   padding: 8px;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
+}
+.prettyprint.linenums {
   -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
      -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
           box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;

docs/upgrading.html

@@ -113,6 +113,15 @@
       <li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li>
     </ul>
   </li>
+  <li>Navigation
+    <ul>
+      <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code></li>
+      <li>New nav list component added that uses the same base class, <code>.nav</code></li>
+      <li>Vertical tabs and pills have been added&mdash;just add <code>.stacked</code> to the <code>&lt;ul&gt;</code></li>
+      <li>Pills were restyled to be less rounded by default</li>
+      <li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
+    </ul>
+  </li>
 </ul>
 <!--
   <li>

lib/bootstrap.less

@@ -33,8 +33,7 @@
 
 // Components: Nav
 @import "navbar.less";
-@import "tabs-pills.less";
-@import "sidenav.less";
+@import "navs.less";
 @import "breadcrumbs.less";
 @import "pagination.less";
 

lib/dropdowns.less

-// Dropdown Menus
+// DROPDOWN MENUS
+// --------------
+
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
 .dropdown {
   position: relative;
@@ -71,6 +73,7 @@
       text-decoration: none;
       text-shadow: 0 -1px 0 rgba(0,0,0,.25);
       #gradient > .vertical(@blue, @blueDark);
+      #gradient > .vertical(@linkColor, darken(@linkColor, 5%));
       @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
       .box-shadow(@shadow);
     }

lib/forms.less

@@ -20,6 +20,7 @@ legend {
   line-height: @baseLineHeight * 2;
   color: @grayDark;
   border-bottom: 1px solid #eee;
+  -webkit-margin-collapse: separate;
 }
 
 // Set font for forms

lib/navbar.less

@@ -135,7 +135,7 @@
 
 // Nav for navbar and topbar
 // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-.nav {
+.navbar .nav {
   position: relative;
   left: 0;
   display: block;
@@ -146,7 +146,6 @@
     float: left;
   }
   a {
-    display: block;
     float: none;
     padding: 10px 10px 11px;
     line-height: 19px;
@@ -182,7 +181,7 @@
       border: 0;
     }
   }
-  // Dropdowns within the .nav
+/*  // Dropdowns within the .nav
   .dropdown-toggle:hover,
   .dropdown.open .dropdown-toggle {
     background: #444;
@@ -213,5 +212,5 @@
       background-color: #222;
       border-color: #444;
     }
-  }
+  }*/
 }

lib/tabs-pills.less → lib/navs.less

-// Tabs and Pills
+// NAVIGATIONS
+// -----------
+
+
+
+// BASE CLASS
+// ----------
+
+.nav {
+  margin-left: 0;
+  margin-bottom: @baseLineHeight;
+  list-style: none;
+}
+
+// Make links block level
+.nav > li > a {
+  display: block;
+}
+.nav > li > a:hover {
+  text-decoration: none;
+  background-color: #eee;
+}
+
+
+
+// NAV LIST
+// --------
+
+.nav.list {
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-bottom: 0;
+}
+.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,.5);
+}
+.nav.list .nav-header {
+  font-size: 11px;
+  font-weight: bold;
+  line-height: @baseLineHeight;
+  color: @grayLight;
+  text-transform: uppercase;
+}
+.nav.list > li + .nav-header {
+  margin-top: 9px;
+}
+.nav.list .active > a {
+  color: @white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+  background-color: @linkColor;
+}
+
+
+
+// TABS AND PILLS
+// -------------
+
+// Common styles
 .tabs,
 .pills {
-  padding: 0;
-  margin: 0 0 20px;
-  list-style: none;
   .clearfix();
-  > li {
-    float: left;
-    > a {
-      display: block;
-    }
+}
+.tabs > li,
+.pills > li {
+  float: left;
+}
+.tabs > li > a,
+.pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px; // keeps the overall height an even number
+}
+
+// TABS
+// ----
+
+// Give the tabs something to sit on
+.tabs {
+  border-bottom: 1px solid #ddd;
+}
+
+// Make the list-items overlay the bottom border
+.tabs > li {
+  margin-bottom: -1px;
+}
+
+// Actual tabs (as links)
+.tabs > li > a {
+  padding-top: 9px;
+  padding-bottom: 9px;
+  border: 1px solid transparent;
+  .border-radius(4px 4px 0 0);
+  &:hover {
+    border-color: #eee #eee #ddd;
   }
 }
+// Active state, and it's :hover to override normal :hover
+.tabs .active > a,
+.tabs .active > a:hover {
+  color: @gray;
+  background-color: @white;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+
+// PILLS
+// -----
+
+// Links rendered as pills
+.pills > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  .border-radius(5px);
+}
+
+// Active state
+.pills .active > a,
+.pills .active > a:hover {
+  color: @white;
+  background-color: @linkColor;
+}
+
+
+
+// STACKED NAV
+// -----------
+
+// Stacked tabs and pills
+.nav.stacked > li {
+  float: none;
+}
+.nav.stacked > li > a {
+  margin-right: 0; // no need for the gap between nav items
+}
 
 // Tabs
-.tabs {
+.tabs.stacked {
+  border-bottom: 0;
+}
+.tabs.stacked > li > a {
+  border: 1px solid #ddd;
+  .border-radius(0);
+}
+.tabs.stacked > li:first-child > a {
+  .border-radius(4px 4px 0 0);
+}
+.tabs.stacked > li:last-child > a {
+  .border-radius(0 0 4px 4px);
+}
+.tabs.stacked > li > a:hover {
   border-color: #ddd;
-  border-style: solid;
-  border-width: 0 0 1px;
-  > li {
-    position: relative; // For the dropdowns mostly
-    margin-bottom: -1px;
-    > a {
-      padding: 0 15px;
-      margin-right: 2px;
-      line-height: @baseLineHeight * 2;
-      border: 1px solid transparent;
-      .border-radius(4px 4px 0 0);
-      &:hover {
-        text-decoration: none;
-        background-color: #eee;
-        border-color: #eee #eee #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;
-  }
+  z-index: 2;
+}
+
+// Pills
+.pills.stacked > li > a {
+  margin-bottom: 3px;
+}
+.pills.stacked > li:last-child > a {
+  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
+}
+
+
+
+// DROPDOWNS
+// ---------
+
+// Position the menu
+.tabs .dropdown-menu,
+.pills .dropdown-menu {
+  top: 33px;
+  border-width: 1px;
 }
+.pills .dropdown-menu {
+  .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;
+  .opacity(100);
+}
+
+
+
+// TABBABLE
+// --------
 
 .tabbable {
   margin-bottom: @baseLineHeight;
@@ -152,51 +310,10 @@
 }
 
 
-// Dropdowns in tabs
-.tabs {
-  .dropdown-menu {
-    top: 37px;
-    border-width: 1px;
-  }
-  .dropdown-toggle .caret {
-    margin-top: 15px;
-    margin-left: 5px;
-  }
-  .open .dropdown-toggle {
-    border-color: #999;
-  }
-  .open .dropdown-toggle .caret {
-    border-top-color: #fff;
-    .opacity(100);
-  }
-}
 
-// Pills
-.pills {
-  > li > a {
-    padding: 0 15px;
-    margin: 5px 3px 5px 0;
-    line-height: 30px;
-    text-shadow: 0 1px 1px @white;
-    .border-radius(15px);
-    &:hover {
-      color: @white;
-      text-decoration: none;
-      text-shadow: 0 1px 1px rgba(0,0,0,.25);
-      background-color: @linkColorHover;
-    }
-  }
-  .active > a {
-    color: @white;
-    text-shadow: 0 1px 1px rgba(0,0,0,.25);
-    background-color: @linkColor;
-  }
-}
 
-// Stacked pills
-.pills-vertical > li {
-  float: none;
-}
+
+
 
 // Tabbable areas
 .tab-content > .tab-pane,
@@ -208,78 +325,3 @@
   display: block;
 }
 
-
-// Step nav
-.step-nav {
-  position: relative; // for prev/next links
-  margin: 0 0 @baseLineHeight;
-  list-style: none;
-  line-height: 30px;
-  text-align: center;
-  background-color: #f5f5f5;
-  .border-radius(15px);
-  li {
-    display: inline;
-    color: @grayLight;
-  }
-  // prev/next links
-  .prev,
-  .next {
-    position: absolute;
-    top: 6px;
-  }
-  .prev {
-    left: 15px;
-  }
-  .next {
-    right: 15px;
-  }
-  // indicators for each step/page/item/etc
-  .dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    margin: 0 3px;
-    text-indent: -999em;
-    background-color: @grayLight;
-    .border-radius(5px);
-    .box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
-  }
-  .dot:hover,
-  .active .dot {
-    background-color: @grayDark;
-  }
-}
-
-
-// Subnav
-// STILL A WIP
-.subnav {
-  #gradient > .vertical(#f5f5f5, #eeeeee);
-  @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5);
-  .box-shadow(@shadow);
-  a {
-    padding: 8px 10px;
-    font-size: 12px;
-    color: @linkColor;
-    text-shadow: 0 1px 0 #fff;
-    border-left: 1px solid #f9f9f9;
-    border-right: 1px solid #e5e5e5;
-    &:hover {
-      color: @linkColorHover;
-      background-color: #eee;
-    }
-  }
-  li:first-child a {
-    border-left: 0;
-    .border-radius(6px 0 0 6px);
-  }
-  li:last-child a {
-    border-right: 0;
-    .border-radius(0 6px 6px 0);
-  }
-  ul .active > a {
-    color: @grayDark;
-    background-color: #eee;
-  }
-}
\ No newline at end of file

lib/sidenav.less

-// SIDE NAV
-// --------
-
-
-.side-nav {
-  padding: @baseLineHeight / 2 0;
-}
-.side-nav .nav-label,
-.side-nav .nav-item {
-  display: block;
-  padding: 3px 15px;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-}
-.side-nav .nav-label {
-  font-size: 11px;
-  line-height: @baseLineHeight;
-  color: @grayLight;
-  text-transform: uppercase;
-}
-.side-nav .nav-group {
-  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;
-}
-.side-nav .nav-item i {
-  vertical-align: -2px;
-}
-.side-nav .nav-item:hover {
-  text-decoration: none;
-}
-.side-nav .active .nav-item {
-  color: #fff;
-  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);
-}
\ No newline at end of file

lib/type.less

@@ -201,7 +201,7 @@ pre {
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.15);
-  .border-radius(3px);
+  .border-radius(4px);
   white-space: pre;
   white-space: pre-wrap;
   word-break: break-all;