12 lines
7.0 KiB
Plaintext
12 lines
7.0 KiB
Plaintext
{
|
|
"version": 3,
|
|
"file": "tiles.32985126.css",
|
|
"sources": [
|
|
"../../../../../../tiles.svelte"
|
|
],
|
|
"sourcesContent": [
|
|
"<script>\n import { onDestroy, onMount } from 'svelte'\n import DocHeader from '../../components/DocHeader.svelte'\n import Example from '../../components/Example.svelte'\n\n async function waitForDraggabilly() {\n return new Promise((resolve, reject) => {\n const interval = setInterval(() => {\n if (Draggabilly) {\n clearInterval(interval);\n resolve();\n }\n }, 250);\n });\n }\n\n onMount(async () => {\n const draggables = document.querySelectorAll('.tile.is-child');\n\n await waitForDraggabilly();\n\n for (const elm of draggables) {\n let drag = new Draggabilly(elm, { // .tile:not(.is-ancestor)\n containment: '.tile.is-ancestor',\n });\n }\n })\n</script>\n\n<style>\n.tile:not(.is-ancestor) {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:global(.is-dragging) {\n -webkit-transform: rotate(25deg);\n transform: rotate(25deg);\n cursor: move;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9yb3V0ZXMvYnVsbWEvdGlsZXMuc3ZlbHRlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQTtFQUNFLHlCQUFpQjtLQUFqQixzQkFBaUI7TUFBakIscUJBQWlCO1VBQWpCLGlCQUFpQjtBQUNuQjs7QUFFQTtFQUNFLGdDQUF3QjtVQUF4Qix3QkFBd0I7RUFDeEIsWUFBWTtBQUNkIiwiZmlsZSI6InNyYy9yb3V0ZXMvYnVsbWEvdGlsZXMuc3ZlbHRlIiwic291cmNlc0NvbnRlbnQiOlsiXG4udGlsZTpub3QoLmlzLWFuY2VzdG9yKSB7XG4gIHVzZXItc2VsZWN0OiBub25lO1xufVxuXG46Z2xvYmFsKC5pcy1kcmFnZ2luZykge1xuICB0cmFuc2Zvcm06IHJvdGF0ZSgyNWRlZyk7XG4gIGN1cnNvcjogbW92ZTtcbn1cbiJdfQ== */</style>\n\n<DocHeader title=\"Tiles\" subtitle=\"2D grids with flexbox\" />\n\n<Example code={`<script>\n import { onMount } from 'svelte'\n\n waitForDraggabilly() {\n return new Promise((resolve, reject) => {\n const interval = setInterval({\n if (Draggabilly) {\n clearInterval(interval);\n resolve();\n }\n }, 100);\n });\n }\n\n onMount(async () => {\n const draggables = document.querySelectorAll('.tile.is-child');\n\n await waitForDraggabilly();\n\n for (const elm of draggables) {\n let drag = new Draggabilly(elm, {\n containment: '.tile.is-ancestor',\n });\n }\n })\n</script>\n\n<style>\n.tile:not(.is-ancestor) {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n:global(.is-dragging) {\n -webkit-transform: rotate(25deg);\n transform: rotate(25deg);\n cursor: move;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9yb3V0ZXMvYnVsbWEvdGlsZXMuc3ZlbHRlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQTtFQUNFLHlCQUFpQjtLQUFqQixzQkFBaUI7TUFBakIscUJBQWlCO1VBQWpCLGlCQUFpQjtBQUNuQjs7QUFFQTtFQUNFLGdDQUF3QjtVQUF4Qix3QkFBd0I7RUFDeEIsWUFBWTtBQUNkIiwiZmlsZSI6InNyYy9yb3V0ZXMvYnVsbWEvdGlsZXMuc3ZlbHRlIiwic291cmNlc0NvbnRlbnQiOlsiXG4udGlsZTpub3QoLmlzLWFuY2VzdG9yKSB7XG4gIHVzZXItc2VsZWN0OiBub25lO1xufVxuXG46Z2xvYmFsKC5pcy1kcmFnZ2luZykge1xuICB0cmFuc2Zvcm06IHJvdGF0ZSgyNWRlZyk7XG4gIGN1cnNvcjogbW92ZTtcbn1cbiJdfQ== */</style>\n\n<script src=\"https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js\"></script>\n\n<div class=\"tile is-ancestor\">\n <div class=\"tile is-vertical is-8\">\n <div class=\"tile\">\n <div class=\"tile is-parent is-vertical\">\n <article class=\"tile is-child notification is-primary\">\n <p class=\"title\">Vertical...</p>\n <p class=\"subtitle\">Top tile</p>\n </article>\n <article class=\"tile is-child notification is-warning\">\n <p class=\"title\">...tiles</p>\n <p class=\"subtitle\">Bottom tile</p>\n </article>\n </div>\n <div class=\"tile is-parent\">\n <article class=\"tile is-child notification is-info\">\n <p class=\"title\">Middle tile</p>\n <p class=\"subtitle\">With an image</p>\n <figure class=\"image is-4by3\">\n <img src=\"https://bulma.io/images/placeholders/640x480.png\" />\n </figure>\n </article>\n </div>\n </div>\n <div class=\"tile is-parent\">\n <article class=\"tile is-child notification is-danger\">\n <p class=\"title\">Wide tile</p>\n <p class=\"subtitle\">Aligned with the right tile</p>\n <div class=\"content\">\n <!-- Content -->\n </div>\n </article>\n </div>\n </div>\n <div class=\"tile is-parent\">\n <article class=\"tile is-child notification is-success\">\n <div class=\"content\">\n <p class=\"title\">Tall tile</p>\n <p class=\"subtitle\">With even more content</p>\n <div class=\"content\">\n <!-- Content -->\n </div>\n </div>\n </article>\n </div>\n</div>`}>\n <div slot=\"preview\">\n <script src=\"https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js\"></script>\n\n <h5 class=\"title\">Click to drag tiles</h5>\n\n <div class=\"tile is-ancestor\">\n <div class=\"tile is-vertical is-8\">\n <div class=\"tile\">\n <div class=\"tile is-parent is-vertical\">\n <article class=\"tile is-child notification is-primary\">\n <p class=\"title\">Vertical...</p>\n <p class=\"subtitle\">Top tile</p>\n </article>\n <article class=\"tile is-child notification is-warning\">\n <p class=\"title\">...tiles</p>\n <p class=\"subtitle\">Bottom tile</p>\n </article>\n </div>\n <div class=\"tile is-parent\">\n <article class=\"tile is-child notification is-info\">\n <p class=\"title\">Middle tile</p>\n <p class=\"subtitle\">With an image</p>\n <figure class=\"image is-4by3\">\n <img src=\"https://bulma.io/images/placeholders/640x480.png\" alt=\"profile\" />\n </figure>\n </article>\n </div>\n </div>\n <div class=\"tile is-parent\">\n <article class=\"tile is-child notification is-danger\">\n <p class=\"title\">Wide tile</p>\n <p class=\"subtitle\">Aligned with the right tile</p>\n <div class=\"content\">\n <!-- Content -->\n </div>\n </article>\n </div>\n </div>\n <div class=\"tile is-parent\">\n <article class=\"tile is-child notification is-success\">\n <div class=\"content\">\n <p class=\"title\">Tall tile</p>\n <p class=\"subtitle\">With even more content</p>\n <div class=\"content\">\n <!-- Content -->\n </div>\n </div>\n </article>\n </div>\n </div>\n </div>\n</Example>\n"
|
|
],
|
|
"names": [],
|
|
"mappings": "AA8BA,oBAAK,KAAK,YAAY,CAAC,AAAC,CAAC,AACvB,mBAAmB,CAAE,IAAI,CACtB,gBAAgB,CAAE,IAAI,CACrB,eAAe,CAAE,IAAI,CACjB,WAAW,CAAE,IAAI,AAC3B,CAAC,AAEO,YAAY,AAAE,CAAC,AACrB,iBAAiB,CAAE,OAAO,KAAK,CAAC,CACxB,SAAS,CAAE,OAAO,KAAK,CAAC,CAChC,MAAM,CAAE,IAAI,AACd,CAAC"
|
|
} |