_progress-bars.scss 817 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. }
  10. .progress-group {
  11. @extend .mb-2;
  12. }
  13. // size variation
  14. .progress-sm {
  15. height: 10px;
  16. }
  17. .progress-xs {
  18. height: 7px;
  19. }
  20. .progress-xxs {
  21. height: 3px;
  22. }
  23. // Vertical bars
  24. .progress.vertical {
  25. position: relative;
  26. width: 30px;
  27. height: 200px;
  28. display: inline-block;
  29. margin-right: 10px;
  30. > .progress-bar {
  31. width: 100%;
  32. position: absolute;
  33. bottom: 0;
  34. }
  35. //Sizes
  36. &.sm,
  37. &.progress-sm {
  38. width: 20px;
  39. }
  40. &.xs,
  41. &.progress-xs {
  42. width: 10px;
  43. }
  44. &.xxs,
  45. &.progress-xxs {
  46. width: 3px;
  47. }
  48. }
  49. // Remove margins from progress bars when put in a table
  50. .table {
  51. tr > td .progress {
  52. margin: 0;
  53. }
  54. }