You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

45 lines
716 B

3 months ago
  1. @use 'mixins/mixins' as *;
  2. @use 'common/var' as *;
  3. .#{$namespace}-icon-loading {
  4. animation: rotating 2s linear infinite;
  5. }
  6. .#{$namespace}-icon--right {
  7. margin-left: 5px;
  8. }
  9. .#{$namespace}-icon--left {
  10. margin-right: 5px;
  11. }
  12. @keyframes rotating {
  13. 0% {
  14. transform: rotateZ(0deg);
  15. }
  16. 100% {
  17. transform: rotateZ(360deg);
  18. }
  19. }
  20. @include b(icon) {
  21. --color: inherit;
  22. height: 1em;
  23. width: 1em;
  24. line-height: 1em;
  25. display: inline-flex;
  26. justify-content: center;
  27. align-items: center;
  28. position: relative;
  29. fill: currentColor;
  30. color: var(--color);
  31. font-size: inherit;
  32. @include when(loading) {
  33. animation: rotating 2s linear infinite;
  34. }
  35. svg {
  36. height: 1em;
  37. width: 1em;
  38. }
  39. }