progressbar.less 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. .enable_progressbar() when(@enable-progressbar = true) {
  2. //progressbar
  3. @progress-bg: #e9e9e9;
  4. .progress {
  5. .border-radius(0);
  6. .box-shadow(none);
  7. background: @progress-bg;
  8. height: 18px;
  9. .progress-bar {
  10. .box-shadow(none);
  11. line-height:18px;
  12. }
  13. &[data-percent] {
  14. &:after {
  15. display: inline-block;
  16. content: attr(data-percent);
  17. color: #FFF;
  18. position: absolute;
  19. left: 0;
  20. right: 0;
  21. top: 0;
  22. bottom: 0;
  23. line-height: 16px;
  24. text-align: center;
  25. font-size: @base-font-size - 1;
  26. //font-family: Verdana;
  27. }
  28. }
  29. &.progress-yellow[data-percent]:after {
  30. color: #996633;
  31. }
  32. &.progress-small {
  33. height: 12px;
  34. .progress-bar {
  35. line-height: 10px;
  36. font-size: @base-font-size - 2;
  37. }
  38. &[data-percent]:after {
  39. line-height: 10px;
  40. font-size: @base-font-size - 2;
  41. }
  42. }
  43. &.progress-mini {
  44. height: 9px;
  45. .progress-bar {
  46. line-height: 8px;
  47. font-size: @base-font-size - 2;
  48. }
  49. &[data-percent]:after {
  50. line-height: 8px;
  51. font-size: @base-font-size - 2;
  52. }
  53. }
  54. }
  55. .progress-bar {
  56. .progress-bar-variant(@progress-color);
  57. }
  58. .progress-bar-danger {
  59. .progress-bar-variant(@progress-danger);
  60. }
  61. .progress-bar-success {
  62. .progress-bar-variant(@progress-success);
  63. }
  64. .progress-bar-warning {
  65. .progress-bar-variant(@progress-warning);
  66. }
  67. .progress-bar-pink {
  68. .progress-bar-variant(@progress-pink);
  69. }
  70. .progress-bar-purple {
  71. .progress-bar-variant(@progress-purple);
  72. }
  73. .progress-bar-yellow {
  74. .progress-bar-variant(@progress-yellow);
  75. }
  76. .progress-bar-inverse {
  77. .progress-bar-variant(@progress-inverse);
  78. }
  79. .progress-bar-grey {
  80. .progress-bar-variant(@progress-grey);
  81. }
  82. /**
  83. .progress {
  84. position: relative;
  85. }
  86. .progress:before {
  87. display: inline-block;
  88. content: "";
  89. position: absolute;
  90. left: 0;
  91. right: 0;
  92. top: 0;
  93. bottom: 0;
  94. background: radial-gradient(9px 9px 0deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
  95. }
  96. */
  97. }
  98. .enable_progressbar();