diff options
author | Mark Otto <markotto@twitter.com> | 2012-08-20 22:22:37 +0400 |
---|---|---|
committer | Mark Otto <markotto@twitter.com> | 2012-08-20 22:22:37 +0400 |
commit | 2fda6a45aa762f66e573a81c279f79e362f3593f (patch) | |
tree | 953f0aac0aa7550c90e8977fe93a519daf493f3e /docs | |
parent | 47697c5f352c08294fb8a077e1ab27dce7decdb9 (diff) |
bump up height of progress bars, give some extra depth with stacking bars, and then make the stacked bars actually work
Diffstat (limited to 'docs')
-rw-r--r-- | docs/assets/css/bootstrap.css | 37 | ||||
-rw-r--r-- | docs/components.html | 15 | ||||
-rw-r--r-- | docs/templates/pages/components.mustache | 17 |
3 files changed, 49 insertions, 20 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 @@ <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> <div class="bs-docs-example"> <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> </div> <pre class="prettyprint linenums"> <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> </pre> 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> </pre> + <h3>Stacked</h3> + <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> + <div class="bs-docs-example"> + <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> + </div> +<pre class="prettyprint linenums"> +<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> +</pre> + <hr class="bs-docs-separator"> |