progress-bars.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. //
  42. // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
  43. // `.progress-bar-striped` class, which you just add to an existing
  44. // `.progress-bar`.
  45. .progress-striped .progress-bar,
  46. .progress-bar-striped {
  47. #gradient > .striped();
  48. background-size: 40px 40px;
  49. }
  50. // Call animation for the active one
  51. //
  52. // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
  53. // `.progress-bar.active` approach.
  54. .progress.active .progress-bar,
  55. .progress-bar.active {
  56. .animation(progress-bar-stripes 2s linear infinite);
  57. }
  58. // Account for lower percentages
  59. .progress-bar {
  60. &[aria-valuenow="1"],
  61. &[aria-valuenow="2"] {
  62. min-width: 30px;
  63. }
  64. &[aria-valuenow="0"] {
  65. color: @gray-light;
  66. min-width: 30px;
  67. background-color: transparent;
  68. background-image: none;
  69. box-shadow: none;
  70. }
  71. }
  72. // Variations
  73. // -------------------------
  74. .progress-bar-success {
  75. .progress-bar-variant(@progress-bar-success-bg);
  76. }
  77. .progress-bar-info {
  78. .progress-bar-variant(@progress-bar-info-bg);
  79. }
  80. .progress-bar-warning {
  81. .progress-bar-variant(@progress-bar-warning-bg);
  82. }
  83. .progress-bar-danger {
  84. .progress-bar-variant(@progress-bar-danger-bg);
  85. }