From 2fda6a45aa762f66e573a81c279f79e362f3593f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Aug 2012 11:22:37 -0700 Subject: [PATCH] bump up height of progress bars, give some extra depth with stacking bars, and then make the stacked bars actually work --- docs/assets/css/bootstrap.css | 37 +++++++++++++++++------- docs/components.html | 15 ++++------ docs/templates/pages/components.mustache | 17 +++++++++++ less/progress-bars.less | 7 +++-- 4 files changed, 54 insertions(+), 22 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 412e05e79b..364509ecae 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -5254,8 +5254,8 @@ a.badge:hover { } .progress { - height: 18px; - margin-bottom: 18px; + height: 20px; + margin-bottom: 20px; overflow: hidden; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); @@ -5274,6 +5274,7 @@ a.badge:hover { } .progress .bar { + float: left; width: 0; height: 100%; font-size: 12px; @@ -5281,11 +5282,11 @@ a.badge:hover { text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; + background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be); - background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); @@ -5300,6 +5301,12 @@ a.badge:hover { transition: width 0.6s ease; } +.progress .bar + .bar { + -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); +} + .progress-striped .bar { background-color: #149bdf; 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)); @@ -5321,7 +5328,8 @@ a.badge:hover { animation: progress-bar-stripes 2s linear infinite; } -.progress-danger .bar { +.progress-danger .bar, +.progress .bar-danger { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); @@ -5332,7 +5340,8 @@ a.badge:hover { filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } -.progress-danger.progress-striped .bar { +.progress-danger.progress-striped .bar, +.progress-striped .bar-danger { background-color: #ee5f5b; 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); @@ -5341,7 +5350,8 @@ a.badge:hover { 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); } -.progress-success .bar { +.progress-success .bar, +.progress .bar-success { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); @@ -5352,7 +5362,8 @@ a.badge:hover { filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } -.progress-success.progress-striped .bar { +.progress-success.progress-striped .bar, +.progress-striped .bar-success { 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); @@ -5361,7 +5372,8 @@ a.badge:hover { 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); } -.progress-info .bar { +.progress-info .bar, +.progress .bar-info { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); @@ -5372,7 +5384,8 @@ a.badge:hover { filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } -.progress-info.progress-striped .bar { +.progress-info.progress-striped .bar, +.progress-striped .bar-info { background-color: #5bc0de; 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); @@ -5381,7 +5394,8 @@ a.badge:hover { 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); } -.progress-warning .bar { +.progress-warning .bar, +.progress .bar-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); @@ -5392,7 +5406,8 @@ a.badge:hover { filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } -.progress-warning.progress-striped .bar { +.progress-warning.progress-striped .bar, +.progress-striped .bar-warning { background-color: #fbb450; 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); diff --git a/docs/components.html b/docs/components.html index 0eb929d836..ce90be5790 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2071,19 +2071,16 @@

Place multiple bars into the same .progress to stack them.

-
-
-
+
+
+ 
 <div class="progress">
-  <div class="bar-success"
-       style="width: 35%;"></div>
-  <div class="bar-warning"
-       style="width: 20%;"></div>
-  <div class="bar-danger"
-       style="width: 10%;"></div>
+  <div class="bar bar-success" style="width: 35%;"></div>
+  <div class="bar bar-warning" style="width: 20%;"></div>
+  <div class="bar bar-danger" style="width: 10%;"></div>
 </div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index df1fa6774f..c14619c95e 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1996,6 +1996,23 @@ </div> +

Stacked

+

Place multiple bars into the same .progress to stack them.

+
+
+
+
+
+
+
+
+<div class="progress">
+  <div class="bar bar-success" style="width: 35%;"></div>
+  <div class="bar bar-warning" style="width: 20%;"></div>
+  <div class="bar bar-danger" style="width: 10%;"></div>
+</div>
+
+
diff --git a/less/progress-bars.less b/less/progress-bars.less index c3de308ebf..36744d89c7 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -44,8 +44,8 @@ // Outer container .progress { overflow: hidden; - height: 18px; - margin-bottom: 18px; + height: @baseLineHeight; + margin-bottom: @baseLineHeight; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .border-radius(4px); @@ -65,6 +65,9 @@ .box-sizing(border-box); .transition(width .6s ease); } +.progress .bar + .bar { + .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); +} // Striped bars .progress-striped .bar {