first pass at moving over the new tabs stuff to 2.0

1 files changed, 87 insertions, 19 deletions

diff --git a/lib/patterns.less b/lib/patterns.less
index f2a0b7f0e..af898a561 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;