progress-bars.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /*
  2. * Component: Progress Bar
  3. * -----------------------
  4. */
  5. //General CSS
  6. .progress,
  7. .progress > .progress-bar {
  8. .box-shadow(none);
  9. &, .progress-bar {
  10. .border-radius(@progress-bar-border-radius);
  11. }
  12. }
  13. /* size variation */
  14. .progress.sm,
  15. .progress-sm {
  16. height: 10px;
  17. &, .progress-bar {
  18. .border-radius(@progress-bar-sm-border-radius);
  19. }
  20. }
  21. .progress.xs,
  22. .progress-xs {
  23. height: 7px;
  24. &, .progress-bar {
  25. .border-radius(@progress-bar-xs-border-radius);
  26. }
  27. }
  28. .progress.xxs,
  29. .progress-xxs {
  30. height: 3px;
  31. &, .progress-bar {
  32. .border-radius(@progress-bar-xs-border-radius);
  33. }
  34. }
  35. /* Vertical bars */
  36. .progress.vertical {
  37. position: relative;
  38. width: 30px;
  39. height: 200px;
  40. display: inline-block;
  41. margin-right: 10px;
  42. > .progress-bar {
  43. width: 100%;
  44. position: absolute;
  45. bottom: 0;
  46. }
  47. //Sizes
  48. &.sm,
  49. &.progress-sm {
  50. width: 20px;
  51. }
  52. &.xs,
  53. &.progress-xs {
  54. width: 10px;
  55. }
  56. &.xxs,
  57. &.progress-xxs {
  58. width: 3px;
  59. }
  60. }
  61. //Progress Groups
  62. .progress-group {
  63. .progress-text {
  64. font-weight: 600;
  65. }
  66. .progress-number {
  67. float: right;
  68. }
  69. }
  70. /* Remove margins from progress bars when put in a table */
  71. .table {
  72. tr > td .progress {
  73. margin: 0;
  74. }
  75. }
  76. // Variations
  77. // -------------------------
  78. .progress-bar-light-blue,
  79. .progress-bar-primary {
  80. .progress-bar-variant(@light-blue);
  81. }
  82. .progress-bar-green,
  83. .progress-bar-success {
  84. .progress-bar-variant(@green);
  85. }
  86. .progress-bar-aqua,
  87. .progress-bar-info {
  88. .progress-bar-variant(@aqua);
  89. }
  90. .progress-bar-yellow,
  91. .progress-bar-warning {
  92. .progress-bar-variant(@yellow);
  93. }
  94. .progress-bar-red,
  95. .progress-bar-danger {
  96. .progress-bar-variant(@red);
  97. }