_progress.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. // Disable animation if transitions are disabled
  2. @if $enable-transitions {
  3. @keyframes progress-bar-stripes {
  4. from {
  5. background-position: $progress-height 0;
  6. }
  7. to {
  8. background-position: 0 0;
  9. }
  10. }
  11. }
  12. .progress {
  13. display: flex;
  14. height: $progress-height;
  15. overflow: hidden; // force rounded corners by cropping it
  16. line-height: 0;
  17. @include font-size($progress-font-size);
  18. background-color: $progress-bg;
  19. @include border-radius($progress-border-radius);
  20. @include box-shadow($progress-box-shadow);
  21. }
  22. .progress-bar {
  23. display: flex;
  24. flex-direction: column;
  25. justify-content: center;
  26. overflow: hidden;
  27. color: $progress-bar-color;
  28. text-align: center;
  29. white-space: nowrap;
  30. background-color: $progress-bar-bg;
  31. @include transition($progress-bar-transition);
  32. }
  33. .progress-bar-striped {
  34. @include gradient-striped();
  35. background-size: $progress-height $progress-height;
  36. }
  37. @if $enable-transitions {
  38. .progress-bar-animated {
  39. animation: $progress-bar-animation-timing progress-bar-stripes;
  40. @if $enable-prefers-reduced-motion-media-query {
  41. @media (prefers-reduced-motion: reduce) {
  42. animation: none;
  43. }
  44. }
  45. }
  46. }