_progressbar.scss 650 B

12345678910111213141516171819202122232425262728
  1. .progress {
  2. border-radius: 1.2em;
  3. background-color: theme('colors.surface-button-hover');
  4. border: 1px solid theme('colors.surface-button-default');
  5. opacity: 0;
  6. &.active {
  7. @include transition(opacity 0.3s ease);
  8. opacity: 1;
  9. }
  10. .bar {
  11. @include transition(width 0.3s ease);
  12. border-radius: 1.5em;
  13. overflow: hidden;
  14. text-align: end;
  15. line-height: 1.2em;
  16. color: theme('colors.text-button');
  17. font-size: 0.85em;
  18. background-color: theme('colors.surface-button-default');
  19. height: 1.2em;
  20. padding-inline-end: 1em;
  21. @media (forced-colors: active) {
  22. background-color: ButtonText;
  23. }
  24. }
  25. }