You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

80 lines
1.6 KiB

10 years ago
  1. //
  2. // Progress bars
  3. // --------------------------------------------------
  4. // Bar animations
  5. // -------------------------
  6. // WebKit
  7. @-webkit-keyframes progress-bar-stripes {
  8. from { background-position: 40px 0; }
  9. to { background-position: 0 0; }
  10. }
  11. // Spec and IE10+
  12. @keyframes progress-bar-stripes {
  13. from { background-position: 40px 0; }
  14. to { background-position: 0 0; }
  15. }
  16. // Bar itself
  17. // -------------------------
  18. // Outer container
  19. .progress {
  20. overflow: hidden;
  21. height: @line-height-computed;
  22. margin-bottom: @line-height-computed;
  23. background-color: @progress-bg;
  24. border-radius: @border-radius-base;
  25. .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  26. }
  27. // Bar of progress
  28. .progress-bar {
  29. float: left;
  30. width: 0%;
  31. height: 100%;
  32. font-size: @font-size-small;
  33. line-height: @line-height-computed;
  34. color: @progress-bar-color;
  35. text-align: center;
  36. background-color: @progress-bar-bg;
  37. .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  38. .transition(width .6s ease);
  39. }
  40. // Striped bars
  41. .progress-striped .progress-bar {
  42. #gradient > .striped();
  43. background-size: 40px 40px;
  44. }
  45. // Call animation for the active one
  46. .progress.active .progress-bar {
  47. .animation(progress-bar-stripes 2s linear infinite);
  48. }
  49. // Variations
  50. // -------------------------
  51. .progress-bar-success {
  52. .progress-bar-variant(@progress-bar-success-bg);
  53. }
  54. .progress-bar-info {
  55. .progress-bar-variant(@progress-bar-info-bg);
  56. }
  57. .progress-bar-warning {
  58. .progress-bar-variant(@progress-bar-warning-bg);
  59. }
  60. .progress-bar-danger {
  61. .progress-bar-variant(@progress-bar-danger-bg);
  62. }