bootstrap-progressbar-2.x.x.less 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. @progressbarVerticalWidth: @baseLineHeight;
  2. @progressbarFontSize: 12px;
  3. // bootstrap-progressbar global styles
  4. // -----------------------------------
  5. .progress {
  6. position: relative;
  7. }
  8. .progress .bar {
  9. position: absolute;
  10. overflow: hidden;
  11. line-height: @baseLineHeight;
  12. }
  13. .progress .progressbar-back-text {
  14. position: absolute;
  15. width: 100%;
  16. height: 100%;
  17. font-size: @progressbarFontSize;
  18. line-height: @baseLineHeight;
  19. text-align: center;
  20. }
  21. .progress .progressbar-front-text {
  22. display: block;
  23. width: 100%;
  24. font-size: @progressbarFontSize;
  25. line-height: @baseLineHeight;
  26. text-align: center;
  27. }
  28. // bootstrap-progressbar horizontal styles
  29. // ---------------------------------------
  30. .progress.right .bar {
  31. right: 0;
  32. }
  33. .progress.right .progressbar-front-text {
  34. position: absolute;
  35. right: 0;
  36. }
  37. // bootstrap-progressbar vertical styles
  38. // -------------------------------------
  39. .progress.vertical {
  40. width: @progressbarVerticalWidth;
  41. height: 100%;
  42. float: left;
  43. margin-right: @progressbarVerticalWidth;
  44. #gradient > .vertical(#f5f5f5, #f9f9f9);
  45. background-repeat: repeat;
  46. }
  47. .progress.vertical.bottom {
  48. position: relative;
  49. }
  50. .progress.vertical.bottom .progressbar-front-text {
  51. position: absolute;
  52. bottom: 0;
  53. }
  54. .progress.vertical .bar {
  55. width: 100%;
  56. height: 0;
  57. .transition(height .6s ease);
  58. background-repeat: repeat;
  59. }
  60. .progress.vertical.bottom .bar {
  61. position: absolute;
  62. bottom: 0;
  63. }
  64. // Danger (red)
  65. .progress-danger.vertical .bar,
  66. .progress.vertical .bar-danger {
  67. #gradient > .vertical(#ee5f5b, #c43c35);
  68. background-repeat: repeat;
  69. }
  70. .progress-danger.progress-striped.vertical .bar,
  71. .progress.progress-striped.vertical .bar-danger {
  72. #gradient > .striped(#ee5f5b);
  73. }
  74. // Success (green)
  75. .progress-success.vertical .bar,
  76. .progress.vertical .bar-success {
  77. #gradient > .vertical(#62c462, #57a957);
  78. background-repeat: repeat;
  79. }
  80. .progress-success.progress-striped.vertical .bar,
  81. .progress.progress-striped.vertical .bar-success {
  82. #gradient > .striped(#62c462);
  83. }
  84. // Info (teal)
  85. .progress-info.vertical .bar,
  86. .progress.vertical .bar-info {
  87. #gradient > .vertical(#5bc0de, #339bb9);
  88. background-repeat: repeat;
  89. }
  90. .progress-info.progress-striped.vertical .bar,
  91. .progress.progress-striped.vertical .bar-info {
  92. #gradient > .striped(#5bc0de);
  93. }
  94. // Warning (orange)
  95. .progress-warning.vertical .bar,
  96. .progress.vertical .bar-warning {
  97. #gradient > .vertical(lighten(@orange, 15%), @orange);
  98. background-repeat: repeat;
  99. }
  100. .progress-warning.progress-striped.vertical .bar,
  101. .progress.progress-striped.vertical .bar-warning {
  102. #gradient > .striped(lighten(@orange, 15%));
  103. }