{
  "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"
}