remove alt tab styles for now, too complicated to accomplish both static and tabble; fix up CSS a bit

4 files changed, 109 insertions, 70 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 2795e4251..163ee6bcd 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: Mon Oct 31 19:36:50 PDT 2011
+ * Date: Mon Oct 31 21:45:06 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1495,17 +1495,77 @@ table .headerSortUp.purple, table .headerSortDown.purple {
 .tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
   border-color: transparent #ddd #ddd #ddd;
 }
+.tabbable.tabs-left, .tabbable.tabs-right {
+  zoom: 1;
+}
+.tabbable.tabs-left:before,
+.tabbable.tabs-right:before,
+.tabbable.tabs-left:after,
+.tabbable.tabs-right:after {
+  display: table;
+  content: "";
+  zoom: 1;
+  *display: inline;
+}
+.tabbable.tabs-left:after, .tabbable.tabs-right:after {
+  clear: both;
+}
+.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs {
+  width: 100px;
+}
+.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li {
+  float: none;
+  margin-bottom: -1px;
+}
+.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a {
+  margin-bottom: 2px;
+}
+.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover {
+  border-color: transparent;
+}
+.tabbable.tabs-left .tab-content {
+  margin-left: 100px;
+}
 .tabbable.tabs-left .tabs {
   float: left;
 }
 .tabbable.tabs-left .tabs > li {
-  float: none;
+  margin-right: -1px;
+}
+.tabbable.tabs-left .tabs > li > a {
+  margin-right: 0;
+  -webkit-border-radius: 4px 0 0 4px;
+  -moz-border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px;
+}
+.tabbable.tabs-left .tabs > li > a:hover {
+  border-right-color: #ddd;
+}
+.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover {
+  border-color: #ddd;
+  border-right-color: transparent;
+}
+.tabbable.tabs-right .tab-content {
+  margin-right: 100px;
 }
 .tabbable.tabs-right .tabs {
   float: right;
 }
 .tabbable.tabs-right .tabs > li {
-  float: none;
+  margin-left: -1px;
+}
+.tabbable.tabs-right .tabs > li > a {
+  margin-left: 0;
+  -webkit-border-radius: 0 4px 4px 0;
+  -moz-border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0;
+}
+.tabbable.tabs-right .tabs > li > a:hover {
+  border-left-color: #ddd;
+}
+.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover {
+  border-color: #ddd;
+  border-left-color: transparent;
 }
 .tabs .menu-dropdown, .tabs .dropdown-menu {
   top: 35px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 35f8a9bcd..9e4565905 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -240,10 +240,15 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
 .tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
 .tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
 .tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;}
-.tabbable.tabs-left .tabs{float:left;}
-.tabbable.tabs-left .tabs>li{float:none;}
-.tabbable.tabs-right .tabs{float:right;}
-.tabbable.tabs-right .tabs>li{float:none;}
+.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;}
+.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;}
+.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;}
+.tabbable.tabs-left .tab-content{margin-left:100px;}
+.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;}
+.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;}
+.tabbable.tabs-right .tab-content{margin-right:100px;}
+.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;}
+.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;}
 .tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
 .tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
 .tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
diff --git a/docs/components.html b/docs/components.html
index c18d8c113..73a049298 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -245,39 +245,6 @@
   <li><a href="#">Contact</a></li>
 </ul>
 </pre>
-      <h3>Alternate tabs</h3>
-      <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
-      <div class="row">
-        <div class="span2">
-          <div class="clearfix">
-            <ul class="tabs tabs-left">
-              <li class="active"><a href="#">Active link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Linky link</a></li>
-              <li><a href="#">What up link</a></li>
-            </ul>
-          </div>
-        </div>
-        <div class="span2">
-          <div class="clearfix">
-            <ul class="tabs tabs-right">
-              <li class="active"><a href="#">Active link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Linky link</a></li>
-              <li><a href="#">What up link</a></li>
-            </ul>
-          </div>
-        </div>
-        <div class="span5">
-          <div class="clearfix">
-            <ul class="tabs tabs-bottom">
-              <li class="active"><a href="#">Active link</a></li>
-              <li><a href="#">Link</a></li>
-              <li><a href="#">Linky link</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
       <h3>Tabbable tabs</h3>
       <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs&mdash;default (top), right, bottom, left&mdash;with example tab areas.</p>
 
@@ -315,20 +282,20 @@
             <div class="tab-content" id="myTabContent2">
               <div class="tab-pane active" id="1">
                 <h4>Section 1</h4>
-                <p>Oh hai!</p>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
               <div class="tab-pane" id="2">
                 <h4>Section 2</h4>
-                <p>Oh hai!</p>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
               <div class="tab-pane" id="3">
                 <h4>Section 3</h4>
-                <p>Oh hai!</p>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
             </div>
           </div>
         </div>
-        <div class="span5">
+        <div class="span4 offset1">
           <div class="tabbable tabs-right">
             <ul class="tabs" data-tabs="tabs">
               <li class="active"><a href="#1">Section 1</a></li>
@@ -338,15 +305,15 @@
             <div class="tab-content" id="myTabContent3">
               <div class="tab-pane active" id="1">
                 <h4>Section 1</h4>
-                <p>Oh hai!</p>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
               <div class="tab-pane" id="2">
                 <h4>Section 2</h4>
-                <p>Oh hai!</p>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
               <div class="tab-pane" id="3">
                 <h4>Section 3</h4>
-                <p>Oh hai!</p>
+                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
             </div>
           </div>
diff --git a/lib/patterns.less b/lib/patterns.less
index 1db315831..367347e27 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -378,34 +378,48 @@
     border-color: transparent #ddd #ddd #ddd;
   }
 
-  // Tabs on left
-  &.tabs-left {
+  // Tabs on left and right
+  &.tabs-left,
+  &.tabs-right {
     .clearfix();
+    .tabs {
+      // Give a fixed width to avoid floating .tab-con
+      width: 100px;
+      // Unfloat them so they stack
+      > li {
+        float: none;
+        margin-bottom: -1px;
+        > a {
+          margin-bottom: 2px;
+          &:hover {
+            border-color: transparent;
+          }
+        }
+      }
+    }
+  }
 
+  // Tabs on left
+  &.tabs-left {
     .tab-content {
-      float: left;
+      margin-left: 100px;
     }
     .tabs {
       float: left;
-
       > li {
-        float: none;
-        margin-bottom: -1px;
         margin-right: -1px;
         > a {
           margin-right: 0;
-          margin-bottom: 2px;
           .border-radius(4px 0 0 4px);
 
           &:hover {
-            border-color: transparent;
             border-right-color: #ddd;
           }
         }
       }
-
-      > .active > a,
-      > .active > a:hover {
+      // Active state
+      .active > a,
+      .active > a:hover {
         border-color: #ddd;
         border-right-color: transparent;
       }
@@ -414,32 +428,25 @@
 
   // Tabs on right
   &.tabs-right {
-    .clearfix();
-
     .tab-content {
-      float: right;
+      margin-right: 100px;
     }
     .tabs {
       float: right;
-
       > li {
-        float: none;
-        margin-bottom: -1px;
         margin-left: -1px;
         > a {
           margin-left: 0;
-          margin-bottom: 2px;
-          .border-radius(4px 0 0 4px);
+          .border-radius(0 4px 4px 0);
 
           &:hover {
-            border-color: transparent;
             border-left-color: #ddd;
           }
         }
       }
-
-      > .active > a,
-      > .active > a:hover {
+      // Active state
+      .active > a,
+      .active > a:hover {
         border-color: #ddd;
         border-left-color: transparent;
       }