_progress.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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. @include font-size($progress-font-size);
  17. background-color: $progress-bg;
  18. @include border-radius($progress-border-radius);
  19. @include box-shadow($progress-box-shadow);
  20. }
  21. .progress-bar {
  22. display: flex;
  23. flex-direction: column;
  24. justify-content: center;
  25. overflow: hidden;
  26. color: $progress-bar-color;
  27. text-align: center;
  28. white-space: nowrap;
  29. background-color: $progress-bar-bg;
  30. @include transition($progress-bar-transition);
  31. }
  32. .progress-bar-striped {
  33. @include gradient-striped();
  34. background-size: $progress-height $progress-height;
  35. }
  36. @if $enable-transitions {
  37. .progress-bar-animated {
  38. animation: progress-bar-stripes $progress-bar-animation-timing;
  39. @if $enable-prefers-reduced-motion-media-query {
  40. @media (prefers-reduced-motion: reduce) {
  41. animation: none;
  42. }
  43. }
  44. }
  45. }