github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki 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

73
less/progress-bars.less
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);
}
}

39
less/variables.less
View File

@@ -9,26 +9,33 @@
// Grays
// -------------------------
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
// Brand colors
// -------------------------
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-info: #5bc0de;
// Scaffolding
// -------------------------
@body-background: #fff;
@text-color: @grayDark;
@body-background: #fff;
@text-color: @grayDark;
// Links
// -------------------------
@link-color: #428bca;
@link-color-hover: darken(@link-color, 15%);
@link-color: #428bca;
@link-color-hover: darken(@link-color, 15%);
// Typography
// -------------------------
@@ -78,19 +85,19 @@
@btn-background: #a7a9aa;
@btn-border: @btn-background;
@btn-background-primary: @link-color;
@btn-background-primary: @brand-primary;
@btn-border-primary: @btn-background-primary;
@btn-background-success: #5cb85c;
@btn-background-success: @brand-success;
@btn-border-success: @btn-background-success;
@btn-background-warning: #f0ad4e;
@btn-background-warning: @brand-warning;
@btn-border-warning: @btn-background-warning;
@btn-background-danger: #d9534f;
@btn-background-danger: @brand-danger;
@btn-border-danger: @btn-background-danger;
@btn-background-info: #5bc0de;
@btn-background-info: @brand-info;
@btn-border-info: @btn-background-info;
@@ -253,6 +260,16 @@
@popover-arrow-outer-color: rgba(0,0,0,.25);
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// Miscellaneous
// -------------------------