Skip to content
GitLab
Commit ee9403e2 authored by Mark Otto's avatar Mark Otto
Browse files

flatten the progress bars

parent baa8c3ec
Hide whitespace changes
Inline Side-by-side
Showing
with 30 additions and 65 deletions
+30 -65
docs/assets/css/bootstrap.css
+ 16
- 53
View file @ ee9403e2
...@@ -4288,15 +4288,8 @@ a.badge:hover { ...@@ -4288,15 +4288,8 @@ a.badge:hover {
height: 20px; height: 20px;
margin-bottom: 20px; margin-bottom: 20px;
overflow: hidden; overflow: hidden;
background-color: #f9f9f9; background-color: #f5f5f5;
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;
border-radius: 4px; 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); -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); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
} }
...@@ -4309,14 +4302,9 @@ a.badge:hover { ...@@ -4309,14 +4302,9 @@ a.badge:hover {
color: #fff; color: #fff;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0480be; background-color: #149bdf;
background-image: -moz-linear-gradient(top, #149bdf, #0480be); /*#gradient > .vertical(#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);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -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); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -4328,11 +4316,6 @@ a.badge:hover { ...@@ -4328,11 +4316,6 @@ a.badge:hover {
transition: width 0.6s ease; 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 { .progress-striped .bar {
background-color: #149bdf; 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)); 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 { ...@@ -4356,14 +4339,9 @@ a.badge:hover {
.progress-danger .bar, .progress-danger .bar,
.progress .bar-danger { .progress .bar-danger {
background-color: #c43c35; background-color: #ee5f5b;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); /*#gradient > .vertical(#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);
} }
.progress-danger.progress-striped .bar, .progress-danger.progress-striped .bar,
...@@ -4378,14 +4356,9 @@ a.badge:hover { ...@@ -4378,14 +4356,9 @@ a.badge:hover {
.progress-success .bar, .progress-success .bar,
.progress .bar-success { .progress .bar-success {
background-color: #57a957; background-color: #62c462;
background-image: -moz-linear-gradient(top, #62c462, #57a957); /*#gradient > .vertical(#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);
} }
.progress-success.progress-striped .bar, .progress-success.progress-striped .bar,
...@@ -4400,14 +4373,9 @@ a.badge:hover { ...@@ -4400,14 +4373,9 @@ a.badge:hover {
.progress-info .bar, .progress-info .bar,
.progress .bar-info { .progress .bar-info {
background-color: #339bb9; background-color: #5bc0de;
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); /*#gradient > .vertical(#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);
} }
.progress-info.progress-striped .bar, .progress-info.progress-striped .bar,
...@@ -4422,14 +4390,9 @@ a.badge:hover { ...@@ -4422,14 +4390,9 @@ a.badge:hover {
.progress-warning .bar, .progress-warning .bar,
.progress .bar-warning { .progress .bar-warning {
background-color: #f89406; background-color: #fbb450;
background-image: -moz-linear-gradient(top, #fbb450, #f89406); /*#gradient > .vertical(lighten(#f89406, 15%), #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);
} }
.progress-warning.progress-striped .bar, .progress-warning.progress-striped .bar,
......
less/progress-bars.less
+ 14
- 12
View file @ ee9403e2
...@@ -46,28 +46,26 @@ ...@@ -46,28 +46,26 @@
overflow: hidden; overflow: hidden;
height: @line-height-base; height: @line-height-base;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
#gradient > .vertical(#f5f5f5, #f9f9f9); background-color: #f5f5f5;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
} }
// Bar of progress // Bar of progress
.progress .bar { .progress .bar {
float: left;
width: 0%; width: 0%;
height: 100%; height: 100%;
color: #fff;
float: left;
font-size: 12px; font-size: 12px;
color: #fff;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); 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-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.box-sizing(border-box); .box-sizing(border-box);
.transition(width .6s ease); .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 // Striped bars
.progress-striped .bar { .progress-striped .bar {
...@@ -91,7 +89,8 @@ ...@@ -91,7 +89,8 @@
// Danger (red) // Danger (red)
.progress-danger .bar, .progress .bar-danger { .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 { .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
#gradient > .striped(#ee5f5b); #gradient > .striped(#ee5f5b);
...@@ -99,7 +98,8 @@ ...@@ -99,7 +98,8 @@
// Success (green) // Success (green)
.progress-success .bar, .progress .bar-success { .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 { .progress-success.progress-striped .bar, .progress-striped .bar-success {
#gradient > .striped(#62c462); #gradient > .striped(#62c462);
...@@ -107,7 +107,8 @@ ...@@ -107,7 +107,8 @@
// Info (teal) // Info (teal)
.progress-info .bar, .progress .bar-info { .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 { .progress-info.progress-striped .bar, .progress-striped .bar-info {
#gradient > .striped(#5bc0de); #gradient > .striped(#5bc0de);
...@@ -115,7 +116,8 @@ ...@@ -115,7 +116,8 @@
// Warning (orange) // Warning (orange)
.progress-warning .bar, .progress .bar-warning { .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 { .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
#gradient > .striped(lighten(#f89406, 15%)); #gradient > .striped(lighten(#f89406, 15%));
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment