rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

flatten the progress bars

Browse Source
This commit is contained in:
Mark Otto 2013-01-16 15:19:55 -08:00
parent baa8c3ec9e
commit ee9403e2d2
2 changed files with 30 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
docs/assets/css/bootstrap.css vendored
View File

@ -4288,15 +4288,8 @@ a.badge:hover {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f9f9f9;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
background-color: #f5f5f5;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
@ -4309,14 +4302,9 @@ a.badge:hover {
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0480be;
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-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
background-color: #149bdf;
/*#gradient > .vertical(#149bdf, #0480be);*/
-webkit-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;
@ -4328,11 +4316,6 @@ 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);
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));
@ -4356,14 +4339,9 @@ a.badge:hover {
.progress-danger .bar,
.progress .bar-danger {
background-color: #c43c35;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
background-color: #ee5f5b;
/*#gradient > .vertical(#ee5f5b, #c43c35);*/
}
.progress-danger.progress-striped .bar,
@ -4378,14 +4356,9 @@ a.badge:hover {
.progress-success .bar,
.progress .bar-success {
background-color: #57a957;
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(to bottom, #62c462, #57a957);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
background-color: #62c462;
/*#gradient > .vertical(#62c462, #57a957);*/
}
.progress-success.progress-striped .bar,
@ -4400,14 +4373,9 @@ a.badge:hover {
.progress-info .bar,
.progress .bar-info {
background-color: #339bb9;
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
background-color: #5bc0de;
/*#gradient > .vertical(#5bc0de, #339bb9);*/
}
.progress-info.progress-striped .bar,
@ -4422,14 +4390,9 @@ a.badge:hover {
.progress-warning .bar,
.progress .bar-warning {
background-color: #f89406;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
background-color: #fbb450;
/*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/
}
.progress-warning.progress-striped .bar,

26
less/progress-bars.less
View File

@ -46,28 +46,26 @@
overflow: hidden;
height: @line-height-base;
margin-bottom: @line-height-base;
#gradient > .vertical(#f5f5f5, #f9f9f9);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
background-color: #f5f5f5;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
// Bar of progress
.progress .bar {
float: left;
width: 0%;
height: 100%;
color: #fff;
float: left;
font-size: 12px;
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
#gradient > .vertical(#149bdf, #0480be);
background-color: #149bdf;
/*#gradient > .vertical(#149bdf, #0480be);*/
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.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 {
@ -91,7 +89,8 @@
// Danger (red)
.progress-danger .bar, .progress .bar-danger {
#gradient > .vertical(#ee5f5b, #c43c35);
background-color: #ee5f5b;
/*#gradient > .vertical(#ee5f5b, #c43c35);*/
}
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
#gradient > .striped(#ee5f5b);
@ -99,7 +98,8 @@
// Success (green)
.progress-success .bar, .progress .bar-success {
#gradient > .vertical(#62c462, #57a957);
background-color: #62c462;
/*#gradient > .vertical(#62c462, #57a957);*/
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
#gradient > .striped(#62c462);
@ -107,7 +107,8 @@
// Info (teal)
.progress-info .bar, .progress .bar-info {
#gradient > .vertical(#5bc0de, #339bb9);
background-color: #5bc0de;
/*#gradient > .vertical(#5bc0de, #339bb9);*/
}
.progress-info.progress-striped .bar, .progress-striped .bar-info {
#gradient > .striped(#5bc0de);
@ -115,7 +116,8 @@
// Warning (orange)
.progress-warning .bar, .progress .bar-warning {
#gradient > .vertical(lighten(#f89406, 15%), #f89406);
background-color: lighten(#f89406, 15%);
/*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/
}
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
#gradient > .striped(lighten(#f89406, 15%));