UNPKG

vuestic-ui

Version:

Vue 3 UI Framework

vuestic.dev

epicmaxco/vuestic-ui

9 lines (8 loc) • 3.02 kB
1
2
3
4
5
6
7
8
9
import { _ as _sfc_main } from "./VaSkeleton.vue_vue_type_script_setup_true_lang.js"; import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js"; const _style_0 = ':root,\n:host {\n --va-skeleton-wave-color: rgb(100, 100, 100);\n --va-skeleton-wave-opacity: 0.2;\n --va-skeleton-border-radius: unset;\n --va-skeleton-animation-duration: 2.5s;\n}\n@keyframes pulse {\n0% {\n filter: brightness(1);\n}\n50% {\n filter: brightness(1);\n}\n75% {\n filter: brightness(0.9);\n}\n100% {\n filter: brightness(1);\n}\n}\n@keyframes wave {\n0% {\n left: -100%;\n}\n100% {\n left: 100%;\n}\n}\n.va-skeleton {\n background: var(--78c0d5d8);\n height: var(--5945500c);\n width: var(--4070c13b);\n border-radius: var(--52953c96);\n cursor: wait;\n}\n.va-skeleton--pulse {\n animation: var(--va-skeleton-animation-duration) ease-in-out 0s infinite normal none running pulse;\n}\n.va-skeleton--wave {\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n mask-image: -webkit-radial-gradient(white, black);\n}\n.va-skeleton--wave .va-skeleton__wave {\n position: absolute;\n overflow: hidden;\n left: 0;\n height: 100%;\n width: 100%;\n}\n.va-skeleton--wave .va-skeleton__wave::after {\n display: block;\n position: relative;\n content: "";\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: var(--va-skeleton-wave-opacity, 0.5);\n background: linear-gradient(90deg, transparent, var(--va-skeleton-wave-color), transparent);\n animation: var(--va-skeleton-animation-duration) linear 0s infinite normal none running wave;\n}\n.va-skeleton--hidden {\n position: absolute;\n overflow: hidden;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n.va-skeleton--lines {\n background: repeating-linear-gradient(180deg, var(--78c0d5d8), var(--78c0d5d8) calc(1em - var(--15391e8a) / 2), transparent calc(1em - var(--15391e8a) / 2), transparent 1em);\n}\n.va-skeleton--lines .va-skeleton__wave::after {\n -webkit-mask-image: repeating-linear-gradient(180deg, black, black calc(1em - var(--15391e8a) / 2), transparent calc(1em - var(--15391e8a) / 2), transparent 1em);\n mask-image: repeating-linear-gradient(180deg, black, black calc(1em - var(--15391e8a) / 2), transparent calc(1em - var(--15391e8a) / 2), transparent 1em);\n}\n.va-skeleton--text {\n width: 100%;\n -webkit-clip-path: polygon(0% 0%, 0% 100%, var(--6ca65284) 100%, var(--6ca65284) calc(100% - 1em), 100% calc(100% - 1em), 100% 100%, 1em 100%, var(--6ca65284) 100%, 100% 100%, 100% 0%);\n clip-path: polygon(0% 0%, 0% 100%, var(--6ca65284) 100%, var(--6ca65284) calc(100% - 1em), 100% calc(100% - 1em), 100% 100%, 1em 100%, var(--6ca65284) 100%, 100% 100%, 100% 0%);\n}\n.va-skeleton--circle {\n min-width: var(--4070c13b);\n min-height: var(--5945500c);\n}'; const _VaSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]); export { _VaSkeleton as _ }; //# sourceMappingURL=VaSkeleton.js.map