index.acss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. .skeleton-index {
  2. display: block;
  3. height: initial;
  4. }
  5. @import "../common/index.acss";
  6. .skeleton-index .van-skeleton {
  7. display: -webkit-flex;
  8. display: flex;
  9. box-sizing: border-box;
  10. width: 100%;
  11. padding: 0 16px;
  12. padding: var(--skeleton-padding, 0 16px);
  13. }
  14. .skeleton-index .van-skeleton__avatar {
  15. -webkit-flex-shrink: 0;
  16. flex-shrink: 0;
  17. margin-right: 16px;
  18. margin-right: var(--padding-md, 16px);
  19. background-color: #f2f3f5;
  20. background-color: var(--skeleton-avatar-background-color, #f2f3f5);
  21. }
  22. .skeleton-index .van-skeleton__avatar--round {
  23. border-radius: 100%;
  24. }
  25. .skeleton-index .van-skeleton__content {
  26. -webkit-flex: 1;
  27. flex: 1;
  28. }
  29. .skeleton-index .van-skeleton__avatar + .van-skeleton__content {
  30. padding-top: 8px;
  31. padding-top: var(--padding-xs, 8px);
  32. }
  33. .skeleton-index .van-skeleton__row,
  34. .skeleton-index .van-skeleton__title {
  35. height: 16px;
  36. height: var(--skeleton-row-height, 16px);
  37. background-color: #f2f3f5;
  38. background-color: var(--skeleton-row-background-color, #f2f3f5);
  39. }
  40. .skeleton-index .van-skeleton__title {
  41. margin: 0;
  42. }
  43. .skeleton-index .van-skeleton__row:not(:first-child) {
  44. margin-top: 12px;
  45. margin-top: var(--skeleton-row-margin-top, 12px);
  46. }
  47. .skeleton-index .van-skeleton__title + .van-skeleton__row {
  48. margin-top: 20px;
  49. }
  50. .skeleton-index .van-skeleton--animate {
  51. -webkit-animation: van-skeleton-blink 1.2s ease-in-out infinite;
  52. animation: van-skeleton-blink 1.2s ease-in-out infinite;
  53. }
  54. @-webkit-keyframes van-skeleton-blink {
  55. 50% {
  56. opacity: 0.6;
  57. }
  58. }
  59. @keyframes van-skeleton-blink {
  60. 50% {
  61. opacity: 0.6;
  62. }
  63. }