From dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 21:48:46 -0800 Subject: moving structure around + more work on builder... --- less/progress-bars.less | 99 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 less/progress-bars.less (limited to 'less/progress-bars.less') diff --git a/less/progress-bars.less b/less/progress-bars.less new file mode 100644 index 000000000..ff754b817 --- /dev/null +++ b/less/progress-bars.less @@ -0,0 +1,99 @@ +// PROGRESS BARS +// ------------- + + +// ANIMATIONS +// ---------- + +// Webkit +@-webkit-keyframes progress-bar-stripes { + from { background-position: 0 0; } + to { background-position: 40px 0; } +} + +// Temporarily commented out since LESS won't compile with this +// @-moz-keyframes progress-bar-stripes { +// from { background-position: 0 0; } +// to { background-position: 40px 0; } +// } + +// Spec +@keyframes progress-bar-stripes { + from { background-position: 0 0; } + to { background-position: 40px 0; } +} + + + +// THE BARS +// -------- + +// Common styles +.progress, +.progress .bar { + .border-radius(4px); +} + +// Outer container +.progress { + height: 18px; + margin-bottom: 18px; + #gradient > .vertical(#f5f5f5, #f9f9f9); + .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); +} + +// Bar of progress +.progress .bar { + width: 0%; + height: 18px; + color: @white; + font-size: 12px; + text-align: center; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(#149bdf, #0480be); + .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(#62c462); + .background-size(40px 40px); +} + +// Call animation for the active one +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + + + +// COLORS +// ------ + +// Danger (red) +.progress.danger .bar { + #gradient > .vertical(#ee5f5b, #c43c35); +} +.progress.danger.striped .bar { + #gradient > .striped(#ee5f5b); +} + +// Success (green) +.progress.success .bar { + #gradient > .vertical(#62c462, #57a957); +} +.progress.success.striped .bar { + #gradient > .striped(#62c462); +} + +// Info (teal) +.progress.info .bar { + #gradient > .vertical(#5bc0de, #339bb9); +} +.progress.info.striped .bar { + #gradient > .striped(#5bc0de); +} -- cgit v1.2.3 From 4e191c423d2d1e834a4cb57ae246d03a82272ee4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 20:17:03 -0800 Subject: update progress bars to have a solid edge until 100% filled --- less/progress-bars.less | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'less/progress-bars.less') diff --git a/less/progress-bars.less b/less/progress-bars.less index ff754b817..228972f2c 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -28,18 +28,14 @@ // THE BARS // -------- -// Common styles -.progress, -.progress .bar { - .border-radius(4px); -} - // Outer container .progress { + overflow: hidden; height: 18px; margin-bottom: 18px; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); + .border-radius(4px); } // Bar of progress -- cgit v1.2.3 From 2bfda031cebcde7361797dd54badeb91d4cb98cf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 12:43:19 -0800 Subject: darken buttons, uncomment out firefox keyframes from progress bars --- less/progress-bars.less | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'less/progress-bars.less') diff --git a/less/progress-bars.less b/less/progress-bars.less index 228972f2c..cfca78d68 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -11,11 +11,10 @@ to { background-position: 40px 0; } } -// Temporarily commented out since LESS won't compile with this -// @-moz-keyframes progress-bar-stripes { -// from { background-position: 0 0; } -// to { background-position: 40px 0; } -// } +@-moz-keyframes progress-bar-stripes { + from { background-position: 0 0; } + to { background-position: 40px 0; } +} // Spec @keyframes progress-bar-stripes { -- cgit v1.2.3 From d96c0c781d49ae87b51221e4aefe025c2c1f3c5a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 14:20:27 -0800 Subject: comment for progress bars firefox keyframes --- less/progress-bars.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less/progress-bars.less') diff --git a/less/progress-bars.less b/less/progress-bars.less index cfca78d68..eeb14eef7 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -11,6 +11,7 @@ to { background-position: 40px 0; } } +// Firefox @-moz-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } -- cgit v1.2.3 From 487dbfdda4692e3212f13d5e6282d7818b4c9934 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:14:51 -0800 Subject: namespace progress bars and labels classes --- less/progress-bars.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'less/progress-bars.less') diff --git a/less/progress-bars.less b/less/progress-bars.less index eeb14eef7..ac820c610 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -71,25 +71,25 @@ // ------ // Danger (red) -.progress.danger .bar { +.progress-danger .bar { #gradient > .vertical(#ee5f5b, #c43c35); } -.progress.danger.striped .bar { +.progress-danger.progress-striped .bar { #gradient > .striped(#ee5f5b); } // Success (green) -.progress.success .bar { +.progress-success .bar { #gradient > .vertical(#62c462, #57a957); } -.progress.success.striped .bar { +.progress-success.progress-striped .bar { #gradient > .striped(#62c462); } // Info (teal) -.progress.info .bar { +.progress-info .bar { #gradient > .vertical(#5bc0de, #339bb9); } -.progress.info.striped .bar { +.progress-info.progress-striped .bar { #gradient > .striped(#5bc0de); } -- cgit v1.2.3 From 9fa8bde44d9bb6f26b16c7633a01bbe5ce7b20a4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:15:38 -0800 Subject: fix animated/striped gradients in progress bars --- less/progress-bars.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/progress-bars.less') diff --git a/less/progress-bars.less b/less/progress-bars.less index ac820c610..c3144e1bd 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -53,7 +53,7 @@ } // Striped bars -.progress.striped .bar { +.progress-striped .bar { #gradient > .striped(#62c462); .background-size(40px 40px); } -- cgit v1.2.3