_progress.scss 1.1 KB

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