qa-tools
Version:
QA tools is a package to provide developers with tools to assure the quality of their layouts. Simple install with yarn or NPM.
3 lines (2 loc) • 1.31 kB
JavaScript
;var t;Object.defineProperty(exports,"__esModule",{value:!0});var e=function(t){return void 0===t&&(t="div"),document.createElement(t)},a=function(t){if("g"==t.key){var e=document.querySelector('[data-qa-tools="grid"]');e.style.opacity="1"===getComputedStyle(e).opacity?"0":"1"}};exports.gridOverlay=function(d){var i,r;t=d||{},document.body.append(((r=e()).setAttribute("data-qa-tools","grid"),r.style.position="fixed",r.style.top="0",r.style.bottom="0",r.style.left="0",r.style.right="0",r.style.display="flex",r.style.justifyContent="center",r.style.pointerEvents="none",r.style.opacity="0",r.style.zIndex="999",r.style.transition="opacity 250ms linear",r.append(((i=e()).setAttribute("data-qa-tools","grid-wrapper"),i.style.display="grid",i.style.columnGap=t.gridGap||"var(--grid-gap)",i.style.gridTemplate="1fr / repeat("+(t.gridColumns||"var(--grid-columns)")+", 1fr)",i.style.width="100%",i.style.maxWidth=t.maxWidth||"var(--grid-max-width)",i.style.paddingInlineStart=t.padding||"var(--grid-padding)",i.style.paddingInlineEnd=t.padding||"var(--grid-padding)",i.style.opacity="0.2",function(a){for(var d=0;d<20;d++){var i=e("span");i.style.background=t.color||"tomato",a.appendChild(i)}}(i),i)),r)),window.addEventListener("keydown",a)};
//# sourceMappingURL=qa-tools.cjs.production.min.js.map