progress-bars.less 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. //
  2. // Progress bars
  3. // --------------------------------------------------
  4. // ANIMATIONS
  5. // ----------
  6. // Webkit
  7. @-webkit-keyframes progress-bar-stripes {
  8. from { background-position: 40px 0; }
  9. to { background-position: 0 0; }
  10. }
  11. // Firefox
  12. @-moz-keyframes progress-bar-stripes {
  13. from { background-position: 40px 0; }
  14. to { background-position: 0 0; }
  15. }
  16. // IE9
  17. @-ms-keyframes progress-bar-stripes {
  18. from { background-position: 40px 0; }
  19. to { background-position: 0 0; }
  20. }
  21. // Opera
  22. @-o-keyframes progress-bar-stripes {
  23. from { background-position: 0 0; }
  24. to { background-position: 40px 0; }
  25. }
  26. // Spec
  27. @keyframes progress-bar-stripes {
  28. from { background-position: 40px 0; }
  29. to { background-position: 0 0; }
  30. }
  31. // THE BARS
  32. // --------
  33. // Outer container
  34. .progress {
  35. overflow: hidden;
  36. height: @baseLineHeight;
  37. margin-bottom: @baseLineHeight;
  38. #gradient > .vertical(#f5f5f5, #f9f9f9);
  39. .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  40. .border-radius(@baseBorderRadius);
  41. }
  42. // Bar of progress
  43. .progress .bar {
  44. width: 0%;
  45. height: 100%;
  46. color: @white;
  47. float: left;
  48. font-size: 12px;
  49. text-align: center;
  50. text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  51. #gradient > .vertical(#149bdf, #0480be);
  52. .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  53. .box-sizing(border-box);
  54. .transition(width .6s ease);
  55. }
  56. .progress .bar + .bar {
  57. .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
  58. }
  59. // Striped bars
  60. .progress-striped .bar {
  61. #gradient > .striped(#149bdf);
  62. .background-size(40px 40px);
  63. }
  64. // Call animation for the active one
  65. .progress.active .bar {
  66. -webkit-animation: progress-bar-stripes 2s linear infinite;
  67. -moz-animation: progress-bar-stripes 2s linear infinite;
  68. -ms-animation: progress-bar-stripes 2s linear infinite;
  69. -o-animation: progress-bar-stripes 2s linear infinite;
  70. animation: progress-bar-stripes 2s linear infinite;
  71. }
  72. // COLORS
  73. // ------
  74. // Danger (red)
  75. .progress-danger .bar, .progress .bar-danger {
  76. #gradient > .vertical(#ee5f5b, #c43c35);
  77. }
  78. .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
  79. #gradient > .striped(#ee5f5b);
  80. }
  81. // Success (green)
  82. .progress-success .bar, .progress .bar-success {
  83. #gradient > .vertical(#62c462, #57a957);
  84. }
  85. .progress-success.progress-striped .bar, .progress-striped .bar-success {
  86. #gradient > .striped(#62c462);
  87. }
  88. // Info (teal)
  89. .progress-info .bar, .progress .bar-info {
  90. #gradient > .vertical(#5bc0de, #339bb9);
  91. }
  92. .progress-info.progress-striped .bar, .progress-striped .bar-info {
  93. #gradient > .striped(#5bc0de);
  94. }
  95. // Warning (orange)
  96. .progress-warning .bar, .progress .bar-warning {
  97. #gradient > .vertical(lighten(@orange, 15%), @orange);
  98. }
  99. .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
  100. #gradient > .striped(lighten(@orange, 15%));
  101. }