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

An Amazing Vue3 UI Components Library, Using TypeScript.

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