index.less 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. @import '../style/var';
  2. .van-skeleton {
  3. display: flex;
  4. padding: 0 @padding-md;
  5. &__avatar {
  6. flex-shrink: 0;
  7. width: @skeleton-avatar-size;
  8. height: @skeleton-avatar-size;
  9. margin-right: @padding-md;
  10. background-color: @skeleton-avatar-background-color;
  11. &--round {
  12. border-radius: @border-radius-max;
  13. }
  14. }
  15. &__content {
  16. width: 100%;
  17. }
  18. &__avatar + &__content {
  19. padding-top: @padding-xs;
  20. }
  21. &__row,
  22. &__title {
  23. height: @skeleton-row-height;
  24. background-color: @skeleton-row-background-color;
  25. }
  26. &__title {
  27. width: @skeleton-title-width;
  28. margin: 0;
  29. }
  30. &__row {
  31. &:not(:first-child) {
  32. margin-top: @skeleton-row-margin-top;
  33. }
  34. }
  35. &__title + &__row {
  36. margin-top: 20px;
  37. }
  38. &--animate {
  39. animation: van-skeleton-blink @skeleton-animation-duration ease-in-out
  40. infinite;
  41. }
  42. &--round {
  43. .van-skeleton__row,
  44. .van-skeleton__title {
  45. border-radius: @border-radius-max;
  46. }
  47. }
  48. }
  49. @keyframes van-skeleton-blink {
  50. 50% {
  51. opacity: 0.6;
  52. }
  53. }