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.

51 lines
859 B

7 months ago
  1. .placeholder {
  2. display: inline-block;
  3. min-height: 1em;
  4. vertical-align: middle;
  5. cursor: wait;
  6. background-color: currentcolor;
  7. opacity: $placeholder-opacity-max;
  8. &.btn::before {
  9. display: inline-block;
  10. content: "";
  11. }
  12. }
  13. // Sizing
  14. .placeholder-xs {
  15. min-height: .6em;
  16. }
  17. .placeholder-sm {
  18. min-height: .8em;
  19. }
  20. .placeholder-lg {
  21. min-height: 1.2em;
  22. }
  23. // Animation
  24. .placeholder-glow {
  25. .placeholder {
  26. animation: placeholder-glow 2s ease-in-out infinite;
  27. }
  28. }
  29. @keyframes placeholder-glow {
  30. 50% {
  31. opacity: $placeholder-opacity-min;
  32. }
  33. }
  34. .placeholder-wave {
  35. mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
  36. mask-size: 200% 100%;
  37. animation: placeholder-wave 2s linear infinite;
  38. }
  39. @keyframes placeholder-wave {
  40. 100% {
  41. mask-position: -200% 0%;
  42. }
  43. }