_progress-bars.scss 954 B

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