remove alt tab styles for now, too complicated to accomplish both static and...

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

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;

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;}

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>

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;
       }