123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- .skeleton-index {
- display: block;
- height: initial;
- }
- @import "../common/index.acss";
- .skeleton-index .van-skeleton {
- display: -webkit-flex;
- display: flex;
- box-sizing: border-box;
- width: 100%;
- padding: 0 16px;
- padding: var(--skeleton-padding, 0 16px);
- }
- .skeleton-index .van-skeleton__avatar {
- -webkit-flex-shrink: 0;
- flex-shrink: 0;
- margin-right: 16px;
- margin-right: var(--padding-md, 16px);
- background-color: #f2f3f5;
- background-color: var(--skeleton-avatar-background-color, #f2f3f5);
- }
- .skeleton-index .van-skeleton__avatar--round {
- border-radius: 100%;
- }
- .skeleton-index .van-skeleton__content {
- -webkit-flex: 1;
- flex: 1;
- }
- .skeleton-index .van-skeleton__avatar + .van-skeleton__content {
- padding-top: 8px;
- padding-top: var(--padding-xs, 8px);
- }
- .skeleton-index .van-skeleton__row,
- .skeleton-index .van-skeleton__title {
- height: 16px;
- height: var(--skeleton-row-height, 16px);
- background-color: #f2f3f5;
- background-color: var(--skeleton-row-background-color, #f2f3f5);
- }
- .skeleton-index .van-skeleton__title {
- margin: 0;
- }
- .skeleton-index .van-skeleton__row:not(:first-child) {
- margin-top: 12px;
- margin-top: var(--skeleton-row-margin-top, 12px);
- }
- .skeleton-index .van-skeleton__title + .van-skeleton__row {
- margin-top: 20px;
- }
- .skeleton-index .van-skeleton--animate {
- -webkit-animation: van-skeleton-blink 1.2s ease-in-out infinite;
- animation: van-skeleton-blink 1.2s ease-in-out infinite;
- }
- @-webkit-keyframes van-skeleton-blink {
- 50% {
- opacity: 0.6;
- }
- }
- @keyframes van-skeleton-blink {
- 50% {
- opacity: 0.6;
- }
- }
|