adding step nav to components

1 files changed, 43 insertions, 0 deletions

diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less
index 3ff08a676..7fc73f69c 100644
--- a/lib/tabs-pills.less
+++ b/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;
+  }
+}