@square/maker/components/Skeleton/styles.css.map

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA4CA,gBAGA,uDADA,YADA,UAOA,CAHA,+BACA,2DACA,CAGA,0BACA,cACA,aACA,CCKA,gBACA,iBAsBA,CApBA,2BACA,SACA,CAEA,uBAEA,eACA,CAEA,sBAQA,4DAHA,uDACA,2DAGA,WALA,WAHA,kBACA,QAKA,2BAJA,UAOA,CAGA,0BACA,cACA,aACA","sources":["webpack://@square/maker/./src/components/Skeleton/src/SkeletonBlock.vue","webpack://@square/maker/./src/components/Skeleton/src/SkeletonText.vue"],"sourcesContent":["<script>\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Toggled loaded state\n\t\t */\n\t\tloaded: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\trender(h) {\n\t\t/**\n\t\t * @slot loading content\n\t\t */\n\t\tif (this.$slots.default) {\n\t\t\treturn this.$slots.default;\n\t\t}\n\n\t\treturn h('div', {\n\t\t\tclass: [\n\t\t\t\tthis.$s.SkeletonBlock,\n\t\t\t\t{\n\t\t\t\t\t[this.$s.loading]: !this.loaded,\n\t\t\t\t},\n\t\t\t],\n\t\t\ton: this.$listeners,\n\t\t\tattrs: {\n\t\t\t\t...this.$attrs,\n\t\t\t\t'aria-hidden': !this.loaded ? 'true' : undefined,\n\t\t\t},\n\t\t});\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.SkeletonBlock {\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: $maker-color-neutral-20;\n\n\t&.loading {\n\t\tanimation: pulsing 0.5s ease-in-out infinite alternate;\n\t}\n}\n\n@keyframes pulsing {\n\t0% { opacity: 0.4; }\n\t100% { opacity: 1; }\n}\n</style>\n","<template>\n\t<div v-frag>\n\t\t<template v-if=\"loaded || children\">\n\t\t\t<!-- @slot loaded text -->\n\t\t\t<slot />\n\t\t</template>\n\t\t<template v-else>\n\t\t\t<div\n\t\t\t\tv-for=\"idx in linesNum\"\n\t\t\t\t:key=\"`skeleton-text-${idx}`\"\n\t\t\t\t:class=\"$s.SkeletonText\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t/>\n\t\t</template>\n\t</div>\n</template>\n\n<script>\nimport frag from 'vue-frag';\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tdirectives: {\n\t\tfrag,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * number of lines of skeleton text\n\t\t */\n\t\tlines: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: 1,\n\t\t},\n\t\t/**\n\t\t * Toggled loaded state\n\t\t */\n\t\tloaded: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tchildren() {\n\t\t\treturn this.$slots.default && this.$slots.default.find((v) => v.tag || v.text.trim());\n\t\t},\n\t\tlinesNum() {\n\t\t\treturn Number.parseInt(this.lines, 10);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.SkeletonText {\n\tposition: relative;\n\n\t&:last-child {\n\t\twidth: 66%;\n\t}\n\n\t&::before {\n\t\t/* fill line-height */\n\t\tcontent: '\\00a0';\n\t}\n\n\t&::after {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\twidth: 100%;\n\t\theight: 75%;\n\t\tbackground-color: $maker-color-neutral-20;\n\t\tborder-radius: $maker-shape-default-border-radius;\n\t\ttransform: translateY(-50%);\n\t\tanimation: pulsing 0.5s ease-in-out infinite alternate;\n\t\tcontent: \"\";\n\t}\n}\n\n@keyframes pulsing {\n\t0% { opacity: 0.4; }\n\t100% { opacity: 1; }\n}\n</style>\n"],"names":[],"sourceRoot":""}