index.css 1.4 KB

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