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

diff --git a/bootstrap.css b/bootstrap.css
index 2795e42513eef35f35cd96af74b158d2a7701a53..163ee6bcd847a11e757d37351e3960d370d17ccc 100644 (file)
--- 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 35f8a9bcd7ecd391686a3da2ff556ebd8440bc4e..9e456590509e5000f27e139a4e50a55ae7044dfe 100644 (file)
--- 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 c18d8c113edcbeead0280c196c616b942a565028..73a049298973d5d498e01fd913f889859fcf4852 100644 (file)
--- 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 1db3158313b4eb9e152f1381594598f815856b94..367347e2709d6aa346c49108b589845a12605d01 100644 (file)
--- 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;
       }