UNPKG

monday-ui-react-core

Version:

Official monday.com UI resources for application development in React.js

github.com/mondaycom/vibe

mondaycom/vibe

3 lines (2 loc) • 2.4 kB
1
2
3
var n={skeleton:"skeleton",rectangle:"rectangle",shine:"shine",circle:"circle",text:"text",textH1:"textH1",textH2:"textH2",textH3:"textH3",textH4:"textH4",textH5:"textH5",textH6:"textH6",textSmall:"textSmall",textCustom:"textCustom",fullWidth:"fullWidth"};!function(n){const t="s_id-8df79849e8ff_2_149_4";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,e.firstChild?e.insertBefore(i,e.firstChild):e.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".skeleton {\n display: flex;\n}\n\n.rectangle {\n height: 160px;\n background: var(--ui-background-color);\n border-radius: var(--border-radius-small);\n overflow: hidden;\n animation-duration: 0.8s;\n animation-direction: alternate;\n animation-iteration-count: infinite;\n animation-name: shine;\n animation-timing-function: steps(10, end);\n}\n\n@keyframes shine {\n 0% {\n opacity: 0.3;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.circle {\n height: 40px;\n background: var(--ui-background-color);\n border-radius: 50%;\n overflow: hidden;\n animation-duration: 0.8s;\n animation-direction: alternate;\n animation-iteration-count: infinite;\n animation-name: shine;\n animation-timing-function: steps(10, end);\n}\n\n@keyframes shine {\n 0% {\n opacity: 0.3;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.text {\n background: var(--ui-background-color);\n border-radius: var(--border-radius-small);\n overflow: hidden;\n animation-duration: 0.8s;\n animation-direction: alternate;\n animation-iteration-count: infinite;\n animation-name: shine;\n animation-timing-function: steps(10, end);\n}\n\n@keyframes shine {\n 0% {\n opacity: 0.3;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.textH1 {\n height: 32px;\n}\n\n.textH2 {\n height: 24px;\n}\n\n.textH3 {\n height: 24px;\n}\n\n.textH4 {\n height: 21px;\n}\n\n.textH5 {\n height: 16px;\n}\n\n.textH6 {\n height: 12px;\n}\n\n.textSmall,\n.textCustom {\n height: 12px;\n}\n\n.fullWidth {\n width: 100%;\n}\n\n.skeleton:not(.fullWidth) .text {\n width: 162px;\n}\n\n.skeleton:not(.fullWidth) .circle {\n width: 40px;\n}\n\n.skeleton:not(.fullWidth) .rectangle {\n width: 160px;\n}");export{n as default}; //# sourceMappingURL=Skeleton.module.scss.js.map