_progress-bars.scss 863 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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. }