mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Refactor colors and progress bars

Browse Source 
* Buttons and progress bars now make use of more semantic global @brand- colors
* Progress bars have been rewritten to reduce the number of possible selectors
* Instead of .progress .bar, it's .progress-bar for individual bars of color, ultimately making for less CSS
This commit is contained in:
Mark Otto
2013-02-01 16:21:38 -08:00
parent 2553d74b54
commit d53af49afe
5 changed files with 180 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/progress-bars.less
+34 -39
View File
@@ -3,8 +3,8 @@
// --------------------------------------------------
// ANIMATIONS
// ----------
// Bar animations
// -------------------------
// Webkit
@-webkit-keyframes progress-bar-stripes {
@@ -38,21 +38,21 @@
// THE BARS
// --------
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
height: @line-height-base;
margin-bottom: @line-height-base;
background-color: #f5f5f5;
background-color: @progress-bg;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
// Bar of progress
.progress .bar {
.progress-bar {
float: left;
width: 0%;
height: 100%;
@@ -60,21 +60,20 @@
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: #149bdf;
/*#gradient > .vertical(#149bdf, #0480be);*/
background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.box-sizing(border-box);
.transition(width .6s ease);
}
// Striped bars
.progress-striped .bar {
#gradient > .striped(#149bdf);
.progress-striped .progress-bar {
#gradient > .striped(@progress-bar-bg);
.background-size(40px 40px);
}
// Call animation for the active one
.progress.active .bar {
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
@@ -84,41 +83,37 @@
// COLORS
// ------
// Variations
// -------------------------
// Danger (red)
.progress-danger .bar, .progress .bar-danger {
background-color: #ee5f5b;
/*#gradient > .vertical(#ee5f5b, #c43c35);*/
}
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
#gradient > .striped(#ee5f5b);
.progress-bar-danger {
background-color: @progress-bar-danger-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-danger-bg);
}
}
// Success (green)
.progress-success .bar, .progress .bar-success {
background-color: #62c462;
/*#gradient > .vertical(#62c462, #57a957);*/
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
#gradient > .striped(#62c462);
}
// Info (teal)
.progress-info .bar, .progress .bar-info {
background-color: #5bc0de;
/*#gradient > .vertical(#5bc0de, #339bb9);*/
}
.progress-info.progress-striped .bar, .progress-striped .bar-info {
#gradient > .striped(#5bc0de);
.progress-bar-success {
background-color: @progress-bar-success-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-success-bg);
}
}
// Warning (orange)
.progress-warning .bar, .progress .bar-warning {
background-color: lighten(#f89406, 15%);
/*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/
.progress-bar-warning {
background-color: @progress-bar-warning-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-warning-bg);
}
}
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
#gradient > .striped(lighten(#f89406, 15%));
// Info (teal)
.progress-bar-info {
background-color: @progress-bar-info-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-info-bg);
}
}