adding step nav to components

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 Nov 29 23:48:09 PST 2011
+ * Date: Wed Nov 30 00:39:32 PST 2011
  */
 html, body {
   margin: 0;
@@ -2088,6 +2088,48 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .tab-content > .active, .pill-content > .active {
   display: block;
 }
+.step-nav {
+  position: relative;
+  margin: 0 0 18px;
+  list-style: none;
+  line-height: 30px;
+  text-align: center;
+  background-color: #f5f5f5;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+}
+.step-nav li {
+  display: inline;
+  color: #bfbfbf;
+}
+.step-nav .prev, .step-nav .next {
+  position: absolute;
+  top: 6px;
+}
+.step-nav .prev {
+  left: 15px;
+}
+.step-nav .next {
+  right: 15px;
+}
+.step-nav .dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 3px;
+  text-indent: -999em;
+  background-color: #bfbfbf;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.step-nav .dot:hover, .step-nav .active .dot {
+  background-color: #404040;
+}
 .breadcrumb {
   padding: 7px 14px;
   margin: 0 0 18px;

bootstrap.min.css

@@ -279,6 +279,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .pills-vertical>li{float:none;}
 .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
 .tab-content>.active,.pill-content>.active{display:block;}
+.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#bfbfbf;}
+.step-nav .prev,.step-nav .next{position:absolute;top:6px;}
+.step-nav .prev{left:15px;}
+.step-nav .next{right:15px;}
+.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);}
+.step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;}
 .breadcrumb{padding:7px 14px;margin:0 0 18px;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;}

docs/assets/css/docs.css

@@ -39,71 +39,6 @@ body > .navbar-fixed .brand:hover {
 }
 
 
-/* Github buttons
--------------------------------------------------- */
-.github-btn {
-  display: inline-block;
-  height: 20px;
-  overflow: hidden;
-}
-.github-btn .gh-btn,
-.github-btn .gh-count,
-.github-btn .gh-ico {
-  float: left;
-}
-.github-btn .gh-btn,
-.github-btn .gh-count {
-  padding: 1px 5px 1px 4px;
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 16px;
-  color: #666;
-  text-shadow: 0 1px 0 #fff;
-  cursor: pointer;
-}
-.github-btn .gh-btn {
-  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;
-  border: 1px solid #ccc;
-  border-bottom-color: #bbb;
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
-     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
-          box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
-}
-.github-btn .gh-btn:hover {
-  color: #333;
-  text-decoration: none;
-  background-position: 0 -10px;
-}
-.github-btn .gh-btn:active {
-  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
-     -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
-          box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
-}
-.github-btn .gh-ico {
-  margin-right: 4px;
-  opacity: .65;
-}
-.github-btn .gh-btn:hover .gh-ico {
-  opacity: .75;
-}
-.github-btn .gh-count {
-  display: inline-block;
-  margin-left: 2px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-}
-
-
 /* Jumbotrons
 -------------------------------------------------- */
 .jumbotron {
@@ -330,13 +265,6 @@ body > .navbar-fixed .brand:hover {
   margin-left: 10px;
 }
 
-/* scrollspy docs */
-
-.scrollspy-example {
-  overflow: auto;
-  height: 200px;
-  position: relative;
-}
 
 /* Popover docs
 -------------------------------------------------- */
@@ -499,19 +427,3 @@ h2 + table {
   }
 }
 
-#accordion dt a{
-  display:block;
-  padding: 9px 15px;
-  line-height: 1;
-  background-color: whiteSmoke;
-  border: 1px solid #EEE;
-  border-top-color: #fff;
-}
-
-#accordion dt:first-child a {
-  border-top-color:#eee;
-}
-
-#accordion dd p {
-  padding: 10px;
-}

docs/components.html

@@ -412,6 +412,28 @@
     </div>
   </div>
 
+  <!-- Step nav -->
+  <div class="row">
+    <div class="span3">
+      <h2>Step nav</h2>
+      <p>Placeholder for now!</p>
+    </div>
+    <div class="span9">
+      <br>
+      <ul class="step-nav">
+        <li class="prev"><a href="#">&laquo; Overview</a></li>
+        <li class="active"><a class="dot" href="#">1</a></li>
+        <li><a class="dot" href="#">2</a></li>
+        <li><a class="dot" href="#">3</a></li>
+        <li><a class="dot" href="#">4</a></li>
+        <li><a class="dot" href="#">5</a></li>
+        <li class="next"><a href="#">Base CSS &raquo;</a></li>
+      </ul>
+      <br>
+      <br>
+    </div>
+  </div>
+
   <!-- Pagination -->
   <div class="row">
     <div class="span3">

lib/tabs-pills.less

@@ -216,3 +216,46 @@
 .pill-content > .active {
   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;
+  }
+}