progress-bars.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. //
  2. // Progress bars
  3. // --------------------------------------------------
  4. .progress {
  5. height: 10px;
  6. padding: 1px;
  7. border: 1px solid @grayLight;
  8. .no-background;
  9. .box-shadow(none);
  10. .border-radius(0);
  11. }
  12. .progress .bar {
  13. .no-background;
  14. .box-shadow(none);
  15. background-color: #6188F5;
  16. }
  17. .progress-striped .bar {
  18. #gradient > .striped(#6188F5);
  19. .background-size(40px 40px);
  20. }
  21. .progress .bar + .bar {
  22. .box-shadow(none);
  23. }
  24. // COLORS
  25. // ------
  26. // Danger (red)
  27. .progress-danger .bar, .progress .bar-danger {
  28. background-color: #c13e2c;
  29. }
  30. .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
  31. #gradient > .striped(#ee5f5b);
  32. }
  33. // Success (green)
  34. .progress-success .bar, .progress .bar-success {
  35. background-color: #2f973f;
  36. }
  37. .progress-success.progress-striped .bar, .progress-striped .bar-success {
  38. #gradient > .striped(#2f973f);
  39. }
  40. // Info (teal)
  41. .progress-info .bar, .progress .bar-info {
  42. background-color: #53bddc;
  43. }
  44. .progress-info.progress-striped .bar, .progress-striped .bar-info {
  45. #gradient > .striped(#53bddc);
  46. }
  47. // Warning (orange)
  48. .progress-warning .bar, .progress .bar-warning {
  49. background-color: lighten(@orange, 15%);
  50. }
  51. .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
  52. #gradient > .striped(lighten(@orange, 15%));
  53. }