fix progress bars by removing border and negative margins

diff --git a/bootstrap.css b/bootstrap.css
index ebb3cbe294c0949fa0686b190b6b42044196ecbd..6417871fbc948f674e57fbc1155ff7aedc03f266 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: Sat Jan  7 22:06:30 PST 2012
+ * Date: Sat Jan  7 23:21:05 PST 2012
  */
 html, body {
   margin: 0;
@@ -1962,6 +1962,12 @@ i {
 .tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs {
   border-bottom: 0;
 }
+.tab-content > .tab-pane, .pill-content > .pill-pane {
+  display: none;
+}
+.tab-content > .active, .pill-content > .active {
+  display: block;
+}
 .tabs-below .tabs {
   border-top: 1px solid #ddd;
 }
@@ -2023,91 +2029,6 @@ i {
 .tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover {
   border-color: #ddd #ddd #ddd transparent;
 }
-/*
-.tabbable {
-
-  // 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 {
-      margin-left: 100px;
-    }
-    .tabs {
-      float: left;
-      > li {
-        margin-right: -1px;
-        > a {
-          margin-right: 0;
-          .border-radius(4px 0 0 4px);
-
-          &:hover {
-            border-right-color: #ddd;
-          }
-        }
-      }
-      // Active state
-      .active > a,
-      .active > a:hover {
-        border-color: #ddd;
-        border-right-color: transparent;
-      }
-    }
-  }
-
-  // Tabs on right
-  &.tabs-right {
-    .tab-content {
-      margin-right: 100px;
-    }
-    .tabs {
-      float: right;
-      > li {
-        margin-left: -1px;
-        > a {
-          margin-left: 0;
-          .border-radius(0 4px 4px 0);
-
-          &:hover {
-            border-left-color: #ddd;
-          }
-        }
-      }
-      // Active state
-      .active > a,
-      .active > a:hover {
-        border-color: #ddd;
-        border-left-color: transparent;
-      }
-    }
-  }
-}
-*/
-.tab-content > .tab-pane, .pill-content > .pill-pane {
-  display: none;
-}
-.tab-content > .active, .pill-content > .active {
-  display: block;
-}
 .breadcrumb {
   padding: 7px 14px;
   margin: 0 0 18px;
@@ -2963,25 +2884,14 @@ a.thumbnail:hover {
   background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
-  border: 1px solid #ddd;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 .progress .bar {
   width: 0%;
-  height: 20px;
-  margin: -1px;
-  background-color: #57a957;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
-  background-image: -moz-linear-gradient(top, #62c462, #57a957);
-  background-image: -ms-linear-gradient(top, #62c462, #57a957);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
-  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
-  background-image: -o-linear-gradient(top, #62c462, #57a957);
-  background-image: linear-gradient(top, #62c462, #57a957);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
+  height: 18px;
+  margin: ;
   background-color: #0480be;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));
   background-image: -moz-linear-gradient(top, #149bdf, #0480be);

diff --git a/bootstrap.min.css b/bootstrap.min.css
index 868cfcb6598e52cab307bfd01196fc93c17097ce..db1393fb43d4c707e926f4c2b0e18c9455126f33 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -374,6 +374,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;}
 .tabbable:after{clear:both;}
 .tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;}
+.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
+.tab-content>.active,.pill-content>.active{display:block;}
 .tabs-below .tabs{border-top:1px solid #ddd;}
 .tabs-below .tabs>li{margin-top:-1px;margin-bottom:0;}
 .tabs-below .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabs-below .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
@@ -388,8 +390,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .tabs-right .tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}
 .tabs-right .tabs>li>a:hover{border-color:#eee #eee #eee #ddd;}
 .tabs-right .tabs .active>a,.tabs-right .tabs .active>a:hover{border-color:#ddd #ddd #ddd transparent;}
-.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
-.tab-content>.active,.pill-content>.active{display:block;}
 .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
 .breadcrumb .divider{padding:0 5px;color:#999999;}
 .breadcrumb .active a{color:#333333;}
@@ -498,8 +498,8 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .label.success{background-color:#46a546;}
 .label.notice{background-color:#62cffc;}
 @-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
-.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);border:1px solid #ddd;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);}
-.progress .bar{width:0%;height:20px;margin:-1px;background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;}
+.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);}
+.progress .bar{width:0%;height:18px;margin:;background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;}
 .progress.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;}
 .progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;}
 .progress.danger .bar{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);}

diff --git a/docs/components.html b/docs/components.html
index 6fca1268f75fdc327c13160964493a1ba03df729..bd8753401a20f9e93c07403f8a9dfd0d15c04a47 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -346,6 +346,16 @@
           <li><a href="#C" data-toggle="tab">Section 3</a></li>
         </ul>
       </div> <!-- /tabbable -->
+<pre class="prettyprint linenums" style="margin-top: 11px;">
+&lt;div class="tabbable tabs-bottom"&gt;
+  &lt;ul class="nav tabs"&gt;
+    ...
+  &lt;/ul&gt;
+  &lt;div class="tab-content"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
     </div>
     <div class="span4">
       <h4>Tabs on the left</h4>
@@ -368,6 +378,16 @@
           </div>
         </div>
       </div> <!-- /tabbable -->
+<pre class="prettyprint linenums">
+&lt;div class="tabbable tabs-left"&gt;
+  &lt;ul class="nav tabs"&gt;
+    ...
+  &lt;/ul&gt;
+  &lt;div class="tab-content"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
     </div>
     <div class="span4">
       <h4>Tabs on the right</h4>
@@ -390,6 +410,16 @@
           </div>
         </div>
       </div> <!-- /tabbable -->
+<pre class="prettyprint linenums">
+&lt;div class="tabbable tabs-right"&gt;
+  &lt;ul class="nav tabs"&gt;
+    ...
+  &lt;/ul&gt;
+  &lt;div class="tab-content"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
     </div>
   </div>
 

diff --git a/lib/progress-bars.less b/lib/progress-bars.less
index 28c56d131c4b416e398984cd4fb93c91f8ad26e4..f5a83983409f7d66549cbbfa59f2aefaeca2d4e1 100644 (file)
--- a/lib/progress-bars.less
+++ b/lib/progress-bars.less
@@ -39,16 +39,14 @@
   height: 18px;
   margin-bottom: 18px;
   #gradient > .vertical(#f5f5f5, #f9f9f9);
-  border: 1px solid #ddd;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
 }
 
 // Bar of progress
 .progress .bar {
   width: 0%;
-  height: 20px;
-  margin: -1px;
-  #gradient > .vertical(#62c462, #57a957);
+  height: 18px;
+  margin: ;
   #gradient > .vertical(#149bdf, #0480be);
   .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
   .box-sizing(border-box);