_progress-bars.scss 863 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /*
  2. * Component: Progress Bar
  3. * -----------------------
  4. */
  5. //General CSS
  6. .progress {
  7. @include box-shadow(none);
  8. @include border-radius($progress-bar-border-radius);
  9. // Vertical bars
  10. &.vertical {
  11. display: inline-block;
  12. height: 200px;
  13. margin-right: 10px;
  14. position: relative;
  15. width: 30px;
  16. > .progress-bar {
  17. bottom: 0;
  18. position: absolute;
  19. width: 100%;
  20. }
  21. //Sizes
  22. &.sm,
  23. &.progress-sm {
  24. width: 20px;
  25. }
  26. &.xs,
  27. &.progress-xs {
  28. width: 10px;
  29. }
  30. &.xxs,
  31. &.progress-xxs {
  32. width: 3px;
  33. }
  34. }
  35. }
  36. .progress-group {
  37. @extend .mb-2;
  38. }
  39. // size variation
  40. .progress-sm {
  41. height: 10px;
  42. }
  43. .progress-xs {
  44. height: 7px;
  45. }
  46. .progress-xxs {
  47. height: 3px;
  48. }
  49. // Remove margins from progress bars when put in a table
  50. .table {
  51. tr > td .progress {
  52. margin: 0;
  53. }
  54. }