vue-amazing-ui/lib/skeleton/Skeleton.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.skeleton-wrap[data-v-882c2f85]{display:table;width:100%}.skeleton-wrap .skeleton-button[data-v-882c2f85]{display:inline-block;vertical-align:top;background:#0000000f;border-radius:4px;width:64px;min-width:64px;height:32px;line-height:32px}.skeleton-wrap .button-sm[data-v-882c2f85]{width:48px;min-width:48px;height:24px;line-height:24px}.skeleton-wrap .button-lg[data-v-882c2f85]{width:80px;min-width:80px;height:40px;line-height:40px}.skeleton-wrap .button-round[data-v-882c2f85]{border-radius:var(--button-size)}.skeleton-wrap .button-circle[data-v-882c2f85]{width:var(--button-size);min-width:var(--button-size);border-radius:50%}.skeleton-wrap .button-block[data-v-882c2f85]{width:100%}.skeleton-wrap .skeleton-input[data-v-882c2f85]{display:inline-block;vertical-align:top;background:#0000000f;border-radius:4px;width:160px;min-width:160px;height:32px;line-height:32px}.skeleton-wrap .input-sm[data-v-882c2f85]{width:120px;min-width:120px;height:24px;line-height:24px}.skeleton-wrap .input-lg[data-v-882c2f85]{width:200px;min-width:200px;height:40px;line-height:40px}.skeleton-wrap .skeleton-image[data-v-882c2f85]{display:flex;align-items:center;justify-content:center;vertical-align:top;background:#0000000f;border-radius:4px;width:96px;height:96px;line-height:96px}.skeleton-wrap .skeleton-image .image-svg[data-v-882c2f85]{width:48px;height:48px;line-height:48px;max-width:192px;max-height:192px;color:#bfbfbf}.skeleton-wrap .skeleton-image .image-svg .svg-path[data-v-882c2f85]{fill:currentColor}.skeleton-wrap .skeleton-header[data-v-882c2f85]{display:table-cell;padding-right:16px;vertical-align:top}.skeleton-wrap .skeleton-header .skeleton-avatar[data-v-882c2f85]{display:inline-block;vertical-align:top;background:#0000000f;width:32px;height:32px;line-height:32px;border-radius:50%}.skeleton-wrap .skeleton-header .avatar-sm[data-v-882c2f85]{width:24px;height:24px;line-height:24px}.skeleton-wrap .skeleton-header .avatar-lg[data-v-882c2f85]{width:40px;height:40px;line-height:40px}.skeleton-wrap .skeleton-header .avatar-square[data-v-882c2f85]{border-radius:6px}.skeleton-wrap .skeleton-content[data-v-882c2f85]{display:table-cell;width:100%;vertical-align:top}.skeleton-wrap .skeleton-content .skeleton-title[data-v-882c2f85]{margin:0;height:16px;background:#0000000f;border-radius:4px}.skeleton-wrap .skeleton-content .skeleton-paragraph[data-v-882c2f85]{margin:0;padding:0}.skeleton-wrap .skeleton-content .skeleton-paragraph li[data-v-882c2f85]{height:16px;list-style:none;background:#0000000f;border-radius:4px}.skeleton-wrap .skeleton-content .skeleton-paragraph li[data-v-882c2f85]:not(:first-child){margin-top:16px}.skeleton-wrap .skeleton-content .skeleton-paragraph li[data-v-882c2f85]:last-child{width:61%}.skeleton-wrap .skeleton-content .mt24[data-v-882c2f85]{margin-top:24px}.skeleton-wrap .skeleton-content .mt28[data-v-882c2f85]{margin-top:28px}.skeleton-avatar .skeleton-content .skeleton-title[data-v-882c2f85]{margin-top:var(--title-top)}.skeleton-animated .skeleton-button[data-v-882c2f85],.skeleton-animated .skeleton-input[data-v-882c2f85],.skeleton-animated .skeleton-image[data-v-882c2f85],.skeleton-animated .skeleton-header .skeleton-avatar[data-v-882c2f85],.skeleton-animated .skeleton-content .skeleton-title[data-v-882c2f85],.skeleton-animated .skeleton-content .skeleton-paragraph li[data-v-882c2f85]{position:relative;z-index:0;overflow:hidden;background:transparent}.skeleton-animated .skeleton-button[data-v-882c2f85]:after,.skeleton-animated .skeleton-input[data-v-882c2f85]:after,.skeleton-animated .skeleton-image[data-v-882c2f85]:after,.skeleton-animated .skeleton-header .skeleton-avatar[data-v-882c2f85]:after,.skeleton-animated .skeleton-content .skeleton-title[data-v-882c2f85]:after,.skeleton-animated .skeleton-content .skeleton-paragraph li[data-v-882c2f85]:after{position:absolute;inset:0 -150%;background:linear-gradient(90deg,#0000000f 25%,#00000026 37%,#0000000f 63%);animation-name:skeletonLoading-882c2f85;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;content:""}@keyframes skeletonLoading-882c2f85{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}