From d170224457581b6ab7305b29b4e2a15cb50ab853 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 23:21:40 -0800 Subject: [PATCH 1/2] fix progress bars by removing border and negative margins --- bootstrap.css | 108 ++++------------------------------------- bootstrap.min.css | 8 +-- docs/components.html | 30 ++++++++++++ lib/progress-bars.less | 6 +-- 4 files changed, 45 insertions(+), 107 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ebb3cbe294..6417871fbc 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: 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 868cfcb659..db1393fb43 100644 --- 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 6fca1268f7..bd8753401a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -346,6 +346,16 @@
  • Section 3
    • +
    +<div class="tabbable tabs-bottom">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+

    Tabs on the left

    @@ -368,6 +378,16 @@
    +
    +<div class="tabbable tabs-left">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+

    Tabs on the right

    @@ -390,6 +410,16 @@
    +
    +<div class="tabbable tabs-right">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+
    diff --git a/lib/progress-bars.less b/lib/progress-bars.less index 28c56d131c..f5a8398340 100644 --- 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); From 3c2f82f469be4792e85eb73fd1e3b882dcadd48d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 23:31:00 -0800 Subject: [PATCH 2/2] recomment out the moz stuff for progress bars since less can't compile it right now --- bootstrap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 6417871fbc..2881afefde 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: Sat Jan 7 23:21:05 PST 2012 + * Date: Sat Jan 7 23:30:30 PST 2012 */ html, body { margin: 0;