From 477f2d7716caa12a4cb98169ea3b13f5d212ac25 Mon Sep 17 00:00:00 2001 From: liabru Date: Sun, 2 Jul 2017 23:56:24 +0100 Subject: [PATCH] upgraded matter-tools --- demo/lib/matter-tools.demo.js | 33 ++++++++++++++++++++++-------- demo/lib/matter-tools.gui.js | 22 +++++++++++++------- demo/lib/matter-tools.inspector.js | 17 +++++++++------ 3 files changed, 50 insertions(+), 22 deletions(-) diff --git a/demo/lib/matter-tools.demo.js b/demo/lib/matter-tools.demo.js index 17caa6d..cde684d 100644 --- a/demo/lib/matter-tools.demo.js +++ b/demo/lib/matter-tools.demo.js @@ -1,15 +1,15 @@ /*! - * matter-tools 0.9.1 by Liam Brummitt 2017-01-26 + * matter-tools 0.11.1 by Liam Brummitt 2017-07-02 * https://github.com/liabru/matter-tools * License MIT */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("Matter"), require("MatterTools")); + module.exports = factory(require("matter-js"), require("matter-tools")); else if(typeof define === 'function' && define.amd) - define(["Matter", "MatterTools"], factory); + define(["matter-js", "matter-tools"], factory); else if(typeof exports === 'object') - exports["Demo"] = factory(require("Matter"), require("MatterTools")); + exports["Demo"] = factory(require("matter-js"), require("matter-tools")); else root["MatterTools"] = root["MatterTools"] || {}, root["MatterTools"]["Demo"] = factory(root["Matter"], root["MatterTools"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) { @@ -92,6 +92,8 @@ return /******/ (function(modules) { // webpackBootstrap resetOnOrientation: false, preventZoom: false, inline: false, + startExample: true, + appendTo: document.body, toolbar: { title: null, url: null, @@ -130,10 +132,18 @@ return /******/ (function(modules) { // webpackBootstrap demo.dom = Demo._createDom(demo); Demo._bindDom(demo); - if (options.inline) { + if (demo.inline) { demo.dom.root.classList.add('matter-demo-inline'); } + if (demo.appendTo) { + demo.appendTo.appendChild(demo.dom.root); + } + + if (demo.startExample) { + Demo.start(demo, demo.startExample); + } + return demo; }; @@ -145,7 +155,7 @@ return /******/ (function(modules) { // webpackBootstrap * @param {string} [initalExampleId] example to start (defaults to first) */ Demo.start = function (demo, initalExampleId) { - initalExampleId = initalExampleId || demo.examples[0].id; + initalExampleId = typeof initalExampleId === 'string' ? initalExampleId : demo.examples[0].id; if (window.location.hash.length > 0) { initalExampleId = window.location.hash.slice(1); @@ -421,7 +431,7 @@ return /******/ (function(modules) { // webpackBootstrap var preventZoomClass = options.preventZoom && Demo._isIOS ? 'prevent-zoom-ios' : ''; - root.innerHTML = '\n
\n
\n
\n
\n

\n ' + options.toolbar.title + ' \u2197︎\n

\n
\n
\n \n
\n \n { }\n \n \n \n
\n \n \u25B2\u25CF\u25A0\n \n
\n
\n
\n
\n '; + root.innerHTML = '\n
\n
\n
\n
\n

\n \n ' + options.toolbar.title + '\n \n \n \n \n \n

\n
\n
\n \n \n \n \n \n
\n \n { }\n \n \n \n
\n \n \n \n
\n
\n
\n
\n '; var dom = { root: root.firstElementChild, @@ -501,7 +511,12 @@ return /******/ (function(modules) { // webpackBootstrap root.innerHTML = ''; var lastStyle = document.head.querySelector('style:last-of-type'); - Common.domInsertBefore(root.firstElementChild, lastStyle); + + if (lastStyle) { + Common.domInsertBefore(root.firstElementChild, lastStyle); + } else { + document.head.appendChild(root.firstElementChild); + } }; Common.injectScript = function (url, id, callback) { @@ -531,7 +546,7 @@ return /******/ (function(modules) { // webpackBootstrap /* 4 */ /***/ function(module, exports) { - module.exports = "/*\n*\tMatterTools.Demo\n*/\n\n.matter-demo {\n font-family: Helvetica, Arial, sans-serif;\n display: flex;\n background: #14151f;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n height: 100vh;\n}\n\n.matter-demo canvas {\n border-radius: 8px;\n max-width: 100%;\n max-height: 100%;\n}\n\n.matter-demo.matter-demo-inline canvas {\n max-height: calc(100% - 50px);\n}\n\n@media screen and (min-width: 900px) and (min-height: 600px) {\n .matter-demo.matter-demo-inline canvas {\n max-height: calc(100% - 100px);\n }\n}\n\n.matter-is-fullscreen .matter-demo {\n width: 100%;\n}\n\n.matter-is-fullscreen .dg.ac,\n.matter-is-fullscreen .ins-container {\n display: none;\n}\n\n.matter-header-outer {\n position: fixed;\n z-index: 100;\n top: 0;\n left: 0;\n right: 0;\n background: rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 400ms ease;\n}\n\n.matter-header-outer:hover {\n background: rgba(0, 0, 0, 0.7);\n}\n\n.matter-demo-inline .matter-header-outer {\n position: static;\n background: transparent;\n z-index: 0;\n width: 100%;\n}\n\n.matter-header {\n width: 100%;\n padding: 10px 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.matter-demo-inline .matter-header {\n padding: 10px;\n}\n\nbody .ins-container,\nbody .dg .dg.main,\nbody .dg .dg.main.a {\n padding-top: 52px;\n}\n\n@media screen and (min-width: 500px) {\n .matter-header {\n padding: 12px 20px;\n }\n\n .matter-demo-inline .matter-header {\n padding: 10px 30px 16px 30px;\n }\n}\n\n@media screen and (min-width: 900px) and (min-height: 600px) {\n .matter-demo-inline .matter-header {\n padding: 10px 30px 36px 30px;\n }\n}\n\n.matter-header-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n max-width: 960px;\n width: 100%;\n}\n\n.matter-header h1 {\n display: none;\n margin: 0;\n width: 18px;\n overflow: hidden;\n}\n\n.matter-header h1 a {\n color: #f2f2f5;\n font-size: 15px;\n font-weight: 400;\n font-family: Helvetica, Arial, sans-serif;\n display: block;\n text-decoration: none;\n margin: 7px 0 0 0;\n padding: 0 0 2px 0;\n border-bottom: 2px solid transparent;\n white-space: nowrap;\n float: right;\n}\n\n@media screen and (min-width: 300px) {\n .matter-header h1 {\n display: inline;\n }\n}\n\n@media screen and (min-width: 600px) {\n .matter-header h1 {\n width: auto;\n overflow: visible;\n }\n}\n\n.btn-home {\n display: none;\n}\n\n.matter-header h1 a:hover {\n border-bottom: 2px solid #F5B862;\n}\n\n.matter-link {\n font-family: Helvetica, Arial, sans-serif;\n text-decoration: none;\n line-height: 13px;\n transform: translate(0, 3px) scale(0.8);\n}\n\n@media screen and (min-width: 500px) {\n .matter-link {\n transform: none;\n }\n}\n\n.matter-link i {\n transition: transform 400ms ease;\n}\n\n.matter-link:hover i {\n transition: transform 400ms ease;\n}\n\n.matter-link:hover i:nth-child(1) {\n transform: rotate(-26deg) translate3d(-4px, -7px, 0);\n}\n\n.matter-link i:nth-child(2) {\n transform: translate3d(0, 1px, 0);\n}\n\n.matter-link:hover i:nth-child(2) {\n transition-delay: 80ms;\n transform: translate3d(3px, -5px, 0);\n}\n\n.matter-link:hover i:nth-child(3) {\n transition-delay: 180ms;\n transform: translate3d(9px, 0, 0);\n}\n\n.matter-link i:nth-child(1) {\n display: inline-block;\n color: #76F09B;\n font-size: 30px;\n}\n\n.matter-link i:nth-child(2) {\n color: #F5B862;\n font-size: 16px;\n padding: 0 2px 0 0;\n display: inline-block;\n}\n\n.matter-link i:nth-child(3) {\n display: inline-block;\n color: #F55F5F; \n font-size: 46px;\n}\n\n.matter-toolbar {\n flex-grow: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: -6px 0 0 0;\n}\n\n.matter-select {\n background: transparent;\n color: #fff;\n font-size: 14px;\n height: 30px;\n width: 100%;\n outline: none;\n padding: 0 7px;\n margin: 0 0 -6px 0;\n border: 0;\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n border-radius: 0;\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.prevent-zoom-ios .matter-select {\n font-size: 16px;\n}\n\n.matter-demo-inline .matter-select {\n border-bottom: 2px solid #3a3a3a;\n}\n\n.matter-select:hover {\n border-bottom-color: #F5B862;\n}\n\n.matter-select-wrapper {\n width: 20%;\n min-width: 100px;\n max-width: 200px;\n position: relative;\n display: inline-block;\n margin: 0 6% 0 0;\n}\n\n.matter-select-wrapper:hover:after {\n color: #fff;\n}\n\n.matter-select-wrapper:after {\n content: '▾';\n display: block;\n pointer-events: none;\n color: #cecece;\n font-size: 14px;\n position: absolute;\n top: 6px;\n right: 5px;\n}\n\n.prevent-zoom-ios .matter-select-wrapper:after {\n top: 4px;\n}\n\n.matter-btn {\n font-family: Helvetica, Arial, sans-serif;\n border: 0;\n background: rgba(0,0,0,0.1);\n padding: 2px 0 0 0;\n width: 40px;\n height: 33px;\n border-radius: 2px;\n margin: 0 0 -6px 0;\n display: inline-block;\n font-size: 16px;\n line-height: 1;\n color: #c2cad4;\n text-decoration: none;\n text-align: center;\n}\n\n.matter-demo-inline .matter-btn {\n background: #0f0f13;\n}\n\n.matter-btn:focus {\n outline: 0;\n}\n\n.matter-btn:hover {\n transform: translate(0px, -1px);\n}\n\n.matter-btn:active {\n transform: translate(0px, 1px);\n}\n\n.matter-btn:hover {\n background: #212a3a;\n}\n\n.matter-btn-reset:active {\n color: #76F09B;\n}\n\n.matter-btn-tools {\n display: none;\n font-size: 15px;\n padding-right: 3px;\n}\n\n.matter-gui-active .matter-btn-tools {\n color: #F55F5F;\n}\n\n.matter-btn-inspect {\n display: none;\n}\n\n.matter-inspect-active .matter-btn-inspect {\n color: #fff036;\n}\n\n.matter-btn-source {\n display: none;\n font-size: 12px;\n text-align: center;\n line-height: 31px;\n}\n\n.matter-btn-source:active {\n color: #F5B862;\n}\n\n.matter-btn-fullscreen {\n font-size: 20px;\n}\n\n.matter-btn-source:active {\n color: #F5B862;\n}\n\n.matter-is-fullscreen .matter-btn-tools,\n.matter-is-fullscreen .matter-btn-inspect {\n display: none;\n}\n\n.matter-is-fullscreen .matter-btn-fullscreen {\n color: #76F09B;\n}\n\n.ins-container,\nbody .dg {\n display: none;\n}\n\n@media screen and (min-width: 500px) {\n .ins-container,\n body .dg,\n .matter-btn-tools,\n .matter-btn-inspect,\n .matter-btn-source {\n display: block;\n }\n}" + module.exports = "/*\n*\tMatterTools.Demo\n*/\n\n.matter-demo {\n font-family: Helvetica, Arial, sans-serif;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n background: #14151f;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100vh;\n}\n\n.matter-demo canvas {\n border-radius: 8px;\n max-width: 100%;\n max-height: 100%;\n}\n\n.matter-demo.matter-demo-inline canvas {\n max-height: calc(100% - 50px);\n}\n\n@media screen and (min-width: 900px) and (min-height: 600px) {\n .matter-demo.matter-demo-inline canvas {\n max-height: calc(100% - 100px);\n }\n}\n\n.matter-is-fullscreen .matter-demo {\n width: 100%;\n}\n\n.matter-is-fullscreen .dg.ac,\n.matter-is-fullscreen .ins-container {\n display: none;\n}\n\n.matter-header-outer {\n position: fixed;\n z-index: 100;\n top: 0;\n left: 0;\n right: 0;\n background: rgba(0, 0, 0, 0.2);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-transition: background 400ms ease;\n -o-transition: background 400ms ease;\n transition: background 400ms ease;\n}\n\n.matter-header-outer:hover {\n background: rgba(0, 0, 0, 0.7);\n}\n\n.matter-demo-inline .matter-header-outer {\n position: static;\n background: transparent;\n z-index: 0;\n width: 100%;\n}\n\n.matter-header {\n width: 100%;\n padding: 7px 20px 8px 20px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.matter-demo-inline .matter-header {\n padding: 10px;\n}\n\nbody .ins-container,\nbody .dg .dg.main,\nbody .dg .dg.main.a {\n padding-top: 52px;\n}\n\n@media screen and (min-width: 500px) {\n .matter-demo-inline .matter-header {\n padding: 10px 30px 16px 30px;\n }\n}\n\n@media screen and (min-width: 900px) and (min-height: 600px) {\n .matter-demo-inline .matter-header {\n padding: 10px 30px 36px 30px;\n }\n}\n\n.matter-header-inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n max-width: 960px;\n width: 100%;\n}\n\n.matter-header h1 {\n display: none;\n margin: 0;\n width: 18px;\n overflow: hidden;\n}\n\n.matter-header h1 a {\n color: #f2f2f5;\n font-size: 15px;\n font-weight: 400;\n font-family: Helvetica, Arial, sans-serif;\n display: block;\n text-decoration: none;\n padding: 8px 0 3px 0;\n border-bottom: 2px solid transparent;\n white-space: nowrap;\n float: right;\n}\n\n@media screen and (min-width: 300px) {\n .matter-header h1 {\n display: inline;\n }\n}\n\n@media screen and (min-width: 600px) {\n .matter-header h1 {\n width: auto;\n overflow: visible;\n }\n}\n\n.btn-home {\n display: none;\n}\n\n.matter-demo-title svg {\n fill: #fff;\n width: 16px;\n height: 16px;\n margin: 0px 0 -2px 4px;\n}\n\n.matter-header h1 a:hover {\n border-bottom: 2px solid #F5B862;\n}\n\n.matter-link {\n font-family: Helvetica, Arial, sans-serif;\n text-decoration: none;\n line-height: 13px;\n margin: 0 -10px 0 0;\n}\n\n.matter-logo {\n height: 33px;\n width: 52px;\n}\n\n.matter-logo #m-triangle {\n -webkit-transform-origin: 14px 856px;\n -ms-transform-origin: 14px 856px;\n transform-origin: 14px 856px;\n -webkit-transition: -webkit-transform 400ms ease;\n transition: -webkit-transform 400ms ease;\n -o-transition: transform 400ms ease;\n transition: transform 400ms ease;\n transition: transform 400ms ease, -webkit-transform 400ms ease;\n}\n\n.matter-logo:hover #m-triangle {\n -webkit-transform: rotate(-30deg) translate(-98px, -25px);\n -ms-transform: rotate(-30deg) translate(-98px, -25px);\n transform: rotate(-30deg) translate(-98px, -25px);\n}\n\n.matter-logo #m-circle {\n -webkit-transition: -webkit-transform 200ms ease;\n transition: -webkit-transform 200ms ease;\n -o-transition: transform 200ms ease;\n transition: transform 200ms ease;\n transition: transform 200ms ease, -webkit-transform 200ms ease;\n -webkit-transition-delay: 300ms;\n -o-transition-delay: 300ms;\n transition-delay: 300ms;\n}\n\n.matter-logo #m-square {\n -webkit-transition: -webkit-transform 150ms ease;\n transition: -webkit-transform 150ms ease;\n -o-transition: transform 150ms ease;\n transition: transform 150ms ease;\n transition: transform 150ms ease, -webkit-transform 150ms ease;\n -webkit-transition-delay: 400ms;\n -o-transition-delay: 400ms;\n transition-delay: 400ms;\n}\n\n.matter-logo:hover #m-circle {\n -webkit-transform: translate(18px, -33px);\n -ms-transform: translate(18px, -33px);\n transform: translate(18px, -33px);\n}\n\n.matter-logo:hover #m-square {\n -webkit-transform: translate(47px, -2px);\n -ms-transform: translate(47px, -2px);\n transform: translate(47px, -2px);\n}\n\n.matter-toolbar {\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.matter-select {\n background: transparent;\n color: #fff;\n font-size: 15px;\n height: 30px;\n width: 100%;\n outline: none;\n padding: 0 7px;\n margin: 0;\n border: 0;\n border-radius: 0;\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.prevent-zoom-ios .matter-select {\n font-size: 16px;\n}\n\n.matter-select-wrapper {\n width: 20%;\n min-width: 100px;\n max-width: 200px;\n position: relative;\n display: inline-block;\n margin: 1px 6% 0 0;\n}\n\n.matter-select-wrapper:hover:after svg {\n fill: #fff;\n}\n\n.matter-select-wrapper svg {\n display: block;\n pointer-events: none;\n fill: #cecece;\n width: 22px;\n height: 22px;\n position: absolute;\n top: 4px;\n right: 5px;\n}\n\n.prevent-zoom-ios .matter-select-wrapper:after {\n top: 4px;\n}\n\n.matter-btn {\n font-family: Helvetica, Arial, sans-serif;\n border: 0;\n background: rgba(0,0,0,0.1);\n padding: 2px 0 0 0;\n width: 40px;\n height: 33px;\n border-radius: 2px;\n display: inline-block;\n font-size: 16px;\n line-height: 1;\n color: #c2cad4;\n text-decoration: none;\n text-align: center;\n}\n\n.matter-btn svg {\n fill: #fff;\n width: 16px;\n height: 16px;\n margin: 2px 0 0 0;\n}\n\n.matter-demo-inline .matter-btn {\n background: #0f0f13;\n}\n\n.matter-btn:focus {\n outline: 0;\n}\n\n.matter-btn:hover {\n -webkit-transform: translate(0px, -1px);\n -ms-transform: translate(0px, -1px);\n transform: translate(0px, -1px);\n}\n\n.matter-btn:active {\n -webkit-transform: translate(0px, 1px);\n -ms-transform: translate(0px, 1px);\n transform: translate(0px, 1px);\n}\n\n.matter-btn:hover {\n background: #212a3a;\n}\n\n.matter-btn-reset:active svg {\n fill: #76F09B;\n}\n\n.matter-btn-tools {\n display: none;\n font-size: 15px;\n padding-right: 3px;\n}\n\n.matter-gui-active .matter-btn-tools svg {\n fill: #F55F5F;\n}\n\n.matter-btn-inspect {\n display: none;\n}\n\n.matter-inspect-active .matter-btn-inspect svg {\n fill: #fff036;\n}\n\n.matter-btn-source {\n display: none;\n font-size: 12px;\n text-align: center;\n line-height: 31px;\n}\n\n.matter-btn-source:active {\n color: #F5B862;\n}\n\n.matter-btn-fullscreen {\n font-size: 18px;\n}\n\n.matter-btn-source:active svg {\n fill: #F5B862;\n}\n\n.matter-is-fullscreen .matter-btn-tools,\n.matter-is-fullscreen .matter-btn-inspect {\n display: none;\n}\n\n.matter-is-fullscreen .matter-btn-fullscreen svg {\n fill: #76F09B;\n}\n\n.ins-container,\nbody .dg {\n display: none;\n}\n\n@media screen and (min-width: 500px) {\n .ins-container,\n body .dg,\n .matter-btn-tools,\n .matter-btn-inspect,\n .matter-btn-source {\n display: block;\n }\n}" /***/ } /******/ ]) diff --git a/demo/lib/matter-tools.gui.js b/demo/lib/matter-tools.gui.js index 4d90a20..ada592a 100644 --- a/demo/lib/matter-tools.gui.js +++ b/demo/lib/matter-tools.gui.js @@ -1,15 +1,15 @@ /*! - * matter-tools 0.9.1 by Liam Brummitt 2017-01-26 + * matter-tools 0.11.1 by Liam Brummitt 2017-07-02 * https://github.com/liabru/matter-tools * License MIT */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("Matter"), require("MatterTools")); + module.exports = factory(require("matter-js"), require("matter-tools")); else if(typeof define === 'function' && define.amd) - define(["Matter", "MatterTools"], factory); + define(["matter-js", "matter-tools"], factory); else if(typeof exports === 'object') - exports["Gui"] = factory(require("Matter"), require("MatterTools")); + exports["Gui"] = factory(require("matter-js"), require("matter-tools")); else root["MatterTools"] = root["MatterTools"] || {}, root["MatterTools"]["Gui"] = factory(root["Matter"], root["MatterTools"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) { @@ -92,7 +92,7 @@ return /******/ (function(modules) { // webpackBootstrap dat.GUI.TEXT_CLOSED = '▲'; dat.GUI.TEXT_OPEN = '▼'; - var datGui = new dat.GUI(); + var datGui = new dat.GUI({ autoPlace: false }); var gui = { engine: engine, @@ -170,6 +170,7 @@ return /******/ (function(modules) { // webpackBootstrap * @param {gui} gui */ Gui.destroy = function (gui) { + gui.datGui.domElement.parentElement.removeChild(gui.datGui.domElement); gui.datGui.destroy(); }; @@ -291,6 +292,8 @@ return /******/ (function(modules) { // webpackBootstrap render.add(gui.render.options, 'enabled'); render.open(); } + + document.body.appendChild(gui.datGui.domElement); }; var _addBody = function _addBody(gui) { @@ -416,7 +419,12 @@ return /******/ (function(modules) { // webpackBootstrap root.innerHTML = ''; var lastStyle = document.head.querySelector('style:last-of-type'); - Common.domInsertBefore(root.firstElementChild, lastStyle); + + if (lastStyle) { + Common.domInsertBefore(root.firstElementChild, lastStyle); + } else { + document.head.appendChild(root.firstElementChild); + } }; Common.injectScript = function (url, id, callback) { @@ -454,7 +462,7 @@ return /******/ (function(modules) { // webpackBootstrap /* 6 */ /***/ function(module, exports) { - module.exports = "/*\n*\tMatterTools.Gui\n*/\n\nbody .dg .c,\nbody .dg .cr.function,\nbody .dg .c select,\nbody .dg .property-name,\nbody .dg .title {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\nbody .dg.main {\n z-index: 10;\n box-shadow: 0 0 30px rgba(0,0,0,0.2);\n height: 100%;\n background: rgb(28, 29, 47);\n position: fixed;\n top: 0;\n right: 0;\n}\n\nbody .dg.ac {\n position: static;\n top: inherit;\n left: inherit;\n bottom: inherit;\n right: inherit;\n}\n\n@media only screen and (max-width : 1500px) {\n body .dg.main {\n transform: translate(230px, 0);\n }\n\n body .dg.main:hover {\n transform: translate(0, 0);\n }\n\n body .dg.main {\n -webkit-transition: transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -moz-transition: transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -o-transition: transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition: transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);\n\n -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -moz-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);\n \n transition-delay: 2s;\n -webkit-transition-delay: 2s;\n }\n\n body .dg.main:hover {\n -webkit-transition: transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -moz-transition: transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -o-transition: transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition: transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);\n\n -webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -moz-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);\n\n transition-delay: 0;\n -webkit-transition-delay: 0;\n }\n}\n\nbody .dg.main .close-button {\n display: none;\n}\n\nbody .dg.main::-webkit-scrollbar {\n background: #1c1c25;\n width: 12px;\n}\n\nbody .dg.main::-webkit-scrollbar-thumb {\n background: transparent;\n width: 5px;\n border-left: 5px solid transparent;\n border-right: 6px solid #2a2a31;\n border-radius: 0;\n}\n \nbody .dg {\n color: #9196ad;\n text-shadow: none !important;\n}\n\nbody .dg li:not(.folder) {\n height: 28px;\n background: #1c1c25;\n border-bottom: 0px;\n padding: 0 0 0 12px;\n}\n \nbody .dg li.save-row .button {\n text-shadow: none !important;\n}\n\nbody .dg li.title {\n padding-left: 22px;\n color: #6f7388;\n border-bottom: 1px solid #29292d;\n background: #0d0f1b url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 10px 10px no-repeat;\n}\n\nbody .dg .cr.boolean:hover {\n background: #232431;\n}\n\nbody .dg .cr.function {\n background: #262731;\n color: #6d7082;\n border-bottom: 1px solid #222535;\n border-top: 1px solid #3c3e48;\n}\n\nbody .dg .cr.function:hover {\n background: #30313e;\n}\n\nbody .dg .cr.function:active {\n transform: translateY(1px);\n}\n\nbody .dg .c,\nbody .dg .property-name {\n width: 50%;\n}\n\nbody .dg .c select {\n margin-top: 2px;\n margin-left: -5px;\n padding: 3px 5px;\n}\n\nbody .dg .c select,\nbody .dg .c input[type=text],\nbody .dg .cr.number input[type=text] {\n text-align: right;\n background: #191a23;\n color: #686c7b;\n border: 0;\n font-size: 10px;\n}\n\nbody .dg .cr.number,\nbody .dg .cr.boolean,\nbody .dg .cr.function {\n border-left: 0;\n}\n\nbody .dg .c select,\nbody .dg .c select:focus {\n width: 88px;\n outline: 0;\n}\n \nbody .dg .c input[type=text]:hover {\n background: #1c1d2f;\n}\n \nbody .dg .c input[type=text]:focus {\n background: #1c1d2f;\n color: #fff;\n}\n\nbody .dg .c input[type=checkbox] {\n margin-top: 9px;\n border: none;\n border-radius: 3px;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background: #35363e;\n display: block;\n width: 10px;\n height: 10px;\n float: right;\n}\n\nbody .dg .c input[type=checkbox]:checked {\n background: #5b5e6b;\n}\n\nbody .dg .c input[type=checkbox]:focus {\n outline: none;\n}\n \nbody .dg .c .slider {\n background: #252731;\n border-radius: 0;\n box-shadow: none;\n padding: 0;\n}\n\nbody .dg .c .slider:hover {\n background: #282b3a;\n}\n\nbody .dg .c .slider-fg {\n background: #32364a;\n border-radius: 0;\n margin-left: 0;\n padding-right: 0;\n}\n\nbody .dg .c .slider-fg:after {\n display: none;\n}\n\nbody .dg .c .slider:hover .slider-fg {\n background: #4d526b;\n}\n\nbody .dg li.folder {\n border-left: 0;\n}\n\nbody .dg.a {\n margin-right: 0;\n}" + module.exports = "/*\n*\tMatterTools.Gui\n*/\n\nbody .dg .c,\nbody .dg .cr.function,\nbody .dg .c select,\nbody .dg .property-name,\nbody .dg .title {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\nbody .dg.main {\n z-index: 10;\n -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.2);\n box-shadow: 0 0 30px rgba(0,0,0,0.2);\n height: 100%;\n background: rgb(28, 29, 47);\n position: fixed;\n overflow-y: scroll;\n top: 0;\n right: 0;\n padding: 50px 0 0 0;\n}\n\nbody .dg.ac {\n position: static;\n top: inherit;\n left: inherit;\n bottom: inherit;\n right: inherit;\n}\n\n@media only screen and (max-width : 1500px) {\n body .dg.main {\n -webkit-transform: translate(230px, 0);\n -ms-transform: translate(230px, 0);\n transform: translate(230px, 0);\n }\n\n body .dg.main:hover {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n }\n\n body .dg.main {\n -webkit-transition: transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -o-transition: transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -webkit-transition: -webkit-transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition: -webkit-transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition: transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition: transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415), -webkit-transform 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);\n\n -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);\n \n -o-transition-delay: 2s;\n \n transition-delay: 2s;\n -webkit-transition-delay: 2s;\n }\n\n body .dg.main:hover {\n -webkit-transition: transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -o-transition: transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -webkit-transition: -webkit-transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition: -webkit-transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition: transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition: transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835), -webkit-transform 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);\n\n -webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);\n\n -o-transition-delay: 0;\n\n transition-delay: 0;\n -webkit-transition-delay: 0;\n }\n}\n\nbody .dg.main .close-button {\n display: none;\n}\n\nbody .dg.main::-webkit-scrollbar {\n background: #1c1c25;\n width: 12px;\n}\n\nbody .dg.main::-webkit-scrollbar-thumb {\n background: transparent;\n width: 5px;\n border-left: 5px solid transparent;\n border-right: 6px solid #2a2a31;\n border-radius: 0;\n}\n \nbody .dg {\n color: #9196ad;\n text-shadow: none !important;\n}\n\nbody .dg li:not(.folder) {\n height: 28px;\n background: #1c1c25;\n border-bottom: 0px;\n padding: 0 0 0 12px;\n}\n \nbody .dg li.save-row .button {\n text-shadow: none !important;\n}\n\nbody .dg li.title {\n padding-left: 22px;\n color: #6f7388;\n border-bottom: 1px solid #29292d;\n background: #0d0f1b url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 10px 10px no-repeat;\n}\n\nbody .dg .cr.boolean:hover {\n background: #232431;\n}\n\nbody .dg .cr.function {\n background: #262731;\n color: #6d7082;\n border-bottom: 1px solid #222535;\n border-top: 1px solid #3c3e48;\n}\n\nbody .dg .cr.function:hover {\n background: #30313e;\n}\n\nbody .dg .cr.function:active {\n -webkit-transform: translateY(1px);\n -ms-transform: translateY(1px);\n transform: translateY(1px);\n}\n\nbody .dg .c,\nbody .dg .property-name {\n width: 50%;\n}\n\nbody .dg .c select {\n margin-top: 2px;\n margin-left: -5px;\n padding: 3px 5px;\n}\n\nbody .dg .c select,\nbody .dg .c input[type=text],\nbody .dg .cr.number input[type=text] {\n text-align: right;\n background: #191a23;\n color: #686c7b;\n border: 0;\n font-size: 10px;\n}\n\nbody .dg .cr.number,\nbody .dg .cr.boolean,\nbody .dg .cr.function {\n border-left: 0;\n}\n\nbody .dg .c select,\nbody .dg .c select:focus {\n width: 88px;\n outline: 0;\n}\n \nbody .dg .c input[type=text]:hover {\n background: #1c1d2f;\n}\n \nbody .dg .c input[type=text]:focus {\n background: #1c1d2f;\n color: #fff;\n}\n\nbody .dg .c input[type=checkbox] {\n margin-top: 9px;\n border: none;\n border-radius: 3px;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background: #35363e;\n display: block;\n width: 10px;\n height: 10px;\n float: right;\n}\n\nbody .dg .c input[type=checkbox]:checked {\n background: #5b5e6b;\n}\n\nbody .dg .c input[type=checkbox]:focus {\n outline: none;\n}\n \nbody .dg .c .slider {\n background: #252731;\n border-radius: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n padding: 0;\n}\n\nbody .dg .c .slider:hover {\n background: #282b3a;\n}\n\nbody .dg .c .slider-fg {\n background: #32364a;\n border-radius: 0;\n margin-left: 0;\n padding-right: 0;\n}\n\nbody .dg .c .slider-fg:after {\n display: none;\n}\n\nbody .dg .c .slider:hover .slider-fg {\n background: #4d526b;\n}\n\nbody .dg li.folder {\n border-left: 0;\n}\n\nbody .dg.a {\n margin-right: 0;\n}" /***/ } /******/ ]) diff --git a/demo/lib/matter-tools.inspector.js b/demo/lib/matter-tools.inspector.js index f987d95..8bad1d2 100644 --- a/demo/lib/matter-tools.inspector.js +++ b/demo/lib/matter-tools.inspector.js @@ -1,15 +1,15 @@ /*! - * matter-tools 0.9.1 by Liam Brummitt 2017-01-26 + * matter-tools 0.11.1 by Liam Brummitt 2017-07-02 * https://github.com/liabru/matter-tools * License MIT */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("Matter"), require("MatterTools"), require("jQuery")); + module.exports = factory(require("matter-js"), require("matter-tools"), require("jquery")); else if(typeof define === 'function' && define.amd) - define(["Matter", "MatterTools", "jQuery"], factory); + define(["matter-js", "matter-tools", "jquery"], factory); else if(typeof exports === 'object') - exports["Inspector"] = factory(require("Matter"), require("MatterTools"), require("jQuery")); + exports["Inspector"] = factory(require("matter-js"), require("matter-tools"), require("jquery")); else root["MatterTools"] = root["MatterTools"] || {}, root["MatterTools"]["Inspector"] = factory(root["Matter"], root["MatterTools"], root["jQuery"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_7__) { @@ -1275,7 +1275,12 @@ return /******/ (function(modules) { // webpackBootstrap root.innerHTML = ''; var lastStyle = document.head.querySelector('style:last-of-type'); - Common.domInsertBefore(root.firstElementChild, lastStyle); + + if (lastStyle) { + Common.domInsertBefore(root.firstElementChild, lastStyle); + } else { + document.head.appendChild(root.firstElementChild); + } }; Common.injectScript = function (url, id, callback) { @@ -1633,7 +1638,7 @@ return /******/ (function(modules) { // webpackBootstrap /* 11 */ /***/ function(module, exports) { - module.exports = "/*\n*\tMatterTools.Inspector\n*/\n\n.ins-container,\n.jstree {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.ins-cursor-move canvas {\n cursor: move !important;\n}\n\n.ins-cursor-rotate canvas {\n cursor: ew-resize !important;\n}\n\n.ins-cursor-scale canvas {\n cursor: nwse-resize !important;\n}\n\n.ins-container {\n position: fixed;\n overflow: auto;\n overflow-x: hidden;\n z-index: 10;\n width: 245px;\n bottom: 0;\n top: 0;\n left: 0;\n background: #1c1c25;\n padding: 0;\n font-family: Arial;\n font-size: 12px;\n color: #aaa;\n box-shadow: 0 0 30px rgba(0,0,0,0.2);\n}\n\nbody .ins-container::-webkit-scrollbar {\n background: #1c1c25;\n width: 12px;\n}\n\nbody .ins-container::-webkit-scrollbar-thumb {\n background: transparent;\n width: 5px;\n border-left: 5px solid transparent;\n border-right: 6px solid #2a2a31;\n border-radius: 0;\n}\n\n@media only screen and (max-width : 1500px) {\n .ins-container {\n transform: translate(-230px, 0);\n }\n\n .ins-container:hover {\n transform: none;\n }\n\n .ins-container {\n -webkit-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -moz-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -o-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);\n\n -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -moz-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);\n\n transition-delay: 3s;\n -webkit-transition-delay: 3s;\n }\n\n .ins-container:hover {\n -webkit-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -moz-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -o-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);\n\n -webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -moz-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);\n\n transition-delay: 0;\n -webkit-transition-delay: 0;\n }\n}\n\n.ins-add-button.ins-button {\n width: auto;\n height: auto;\n padding: 2px 5px;\n margin: 4px 0 0 0;\n right: 0px;\n min-width: 0;\n position: absolute;\n z-index: 100;\n}\n\n.ins-search-box {\n margin: 20px 0px 16px 13px;\n border: 0;\n padding: 7px 8px;\n font-size: 12px;\n width: 100%;\n box-sizing: border-box;\n border-radius: 3px;\n background: #111117;\n color: #919691;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n.ins-search-box:focus {\n background: #15151d;\n border: 0;\n outline: 0;\n}\n\n.ins-search-box::-webkit-search-cancel-button {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n height: 15px;\n width: 8px;\n cursor: pointer;\n}\n\n.ins-search-box::-webkit-search-cancel-button:before {\n height: 10px;\n width: 10px;\n content: 'x';\n font-family: Arial;\n line-height: 0;\n font-size: 13px;\n color: #999;\n font-weight: bold;\n cursor: pointer;\n}\n\n.ins-search-box::-webkit-input-placeholder {\n color: #777;\n}\n\n.ins-search-box:-moz-placeholder {\n color: #777;\n}\n\n.ins-search-box::-moz-placeholder {\n color: #777;\n}\n\n.ins-search-box:-ms-input-placeholder { \n color: #777;\n}\n\n.ins-world-tree {\n\n}\n\n.ins-control-group {\n display: block;\n clear: both;\n overflow: hidden;\n padding: 14px 20px 12px 20px;\n background: #0d0f1b;\n border-bottom: 1px solid #29292d;\n}\n\n.ins-button {\n display: block;\n float: left;\n font-size: 11px;\n line-height: 1;\n padding: 10px 11px;\n min-width: 49px;\n text-align: center;\n background: #0d0f1b;\n border: 0;\n color: #aaa;\n border-radius: 2px;\n box-sizing: border-box;\n outline: none;\n margin: 0;\n}\n\n.ins-button:hover {\n background: #212a3a;\n}\n\n.ins-button:active {\n transform: translateY(2px);\n background: #212a3a;\n}\n\n.ins-button::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n\n.jstree-default .jstree-search {\n font-style: italic;\n color: #aaa;\n font-weight: normal;\n}\n\n.jstree-default .jstree-wholerow-hovered,\n.jstree-default .jstree-hovered {\n background: transparent;\n border-radius: 0;\n box-shadow: none;\n}\n\n.jstree-default .jstree-wholerow {\n height: 26px;\n}\n\n.jstree-default .jstree-wholerow-clicked,\n.jstree-default .jstree-clicked {\n background: transparent;\n border-radius: 0;\n box-shadow: none;\n transition: none;\n}\n\n.jstree-default .jstree-leaf .jstree-clicked {\n color: #bbb !important;\n\n -webkit-transition: color 100ms linear; \n -moz-transition: color 100ms linear; \n -o-transition: color 100ms linear; \n transition: color 100ms linear; \n}\n\n.jstree-default .jstree-anchor {\n line-height: 27px;\n}\n\n.jstree-default .jstree-container-ul> .jstree-node > .jstree-anchor:before,\n.jstree-default .jstree-open > .jstree-children > .jstree-node > .jstree-anchor:before {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n right: 1px;\n height: 26px;\n background: transparent;\n border-radius: 0;\n box-shadow: none;\n border-right: none;\n pointer-events: none;\n background: rgba(0,0,0,0);\n\n -webkit-transition: background 100ms linear; \n -moz-transition: background 100ms linear; \n -o-transition: background 100ms linear; \n transition: background 100ms linear; \n}\n\n.jstree-default .jstree-anchor.jstree-clicked:before {\n background: rgba(58, 63, 88, 0.35) !important;\n\n -webkit-transition: background 100ms linear; \n -moz-transition: background 100ms linear; \n -o-transition: background 100ms linear; \n transition: background 100ms linear; \n\n pointer-events: none;\n}\n\n.jstree-default .jstree-node,\n.jstree-default .jstree-leaf .jstree-ocl,\n.jstree-default .jstree-icon {\n background: transparent;\n}\n\n.jstree-default .jstree-node {\n margin-left: 10px;\n}\n\n.jstree-default .jstree-icon {\n position: relative;\n}\n\n.jstree-default .jstree-icon:before {\n display: block;\n pointer-events: none;\n color: #d6d6d6;\n font-style: normal;\n font-size: 11px;\n position: absolute;\n top: 0px;\n left: 10px;\n}\n\n.jstree-default .jstree-open > .jstree-icon:before {\n content: '▾';\n transform: rotate(180deg);\n top: 2px;\n}\n\n.jstree-default .jstree-closed > .jstree-icon:before {\n content: '▾';\n}\n\n.jstree-leaf .jstree-icon:before {\n display: none;\n}\n\n.jstree-default .jstree-open .jstree-ocl {\n background-position: -38px -1px;\n}\n\n.jstree-default .jstree-closed .jstree-ocl {\n background-position: -4px -2px;\n}\n\n.jstree-anchor {\n padding: 1px 0;\n transition: none;\n}\n\n.jstree-anchor .jstree-icon {\n display: none;\n}\n\n.jstree-node-type-bodies > .jstree-anchor,\n.jstree-node-type-constraints > .jstree-anchor,\n.jstree-node-type-composites > .jstree-anchor {\n color: #888;\n}\n\n.ins-container *::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n\n.ins-container *::-webkit-scrollbar-thumb:vertical {\n border-left: 3px solid #1c1c25;\n background: #1c1d2f;\n width: 10px;\n}\n\n.ins-container *::-webkit-scrollbar-thumb:horizontal {\n border-top: 3px solid #1c1c25;\n background: #1c1d2f;\n height: 10px;\n}\n\n.ins-container *::-webkit-scrollbar-track,\n.ins-container *::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n#vakata-dnd {\n font-family: Arial;\n font-size: 12px;\n color: #aaa;\n}" + module.exports = "/*\n*\tMatterTools.Inspector\n*/\n\n.ins-container,\n.jstree {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.ins-cursor-move canvas {\n cursor: move !important;\n}\n\n.ins-cursor-rotate canvas {\n cursor: ew-resize !important;\n}\n\n.ins-cursor-scale canvas {\n cursor: nwse-resize !important;\n}\n\n.ins-container {\n position: fixed;\n overflow: auto;\n overflow-x: hidden;\n z-index: 10;\n width: 245px;\n bottom: 0;\n top: 0;\n left: 0;\n background: #1c1c25;\n padding: 0;\n font-family: Arial;\n font-size: 12px;\n color: #aaa;\n -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.2);\n box-shadow: 0 0 30px rgba(0,0,0,0.2);\n}\n\nbody .ins-container::-webkit-scrollbar {\n background: #1c1c25;\n width: 12px;\n}\n\nbody .ins-container::-webkit-scrollbar-thumb {\n background: transparent;\n width: 5px;\n border-left: 5px solid transparent;\n border-right: 6px solid #2a2a31;\n border-radius: 0;\n}\n\n@media only screen and (max-width : 1500px) {\n .ins-container {\n -webkit-transform: translate(-230px, 0);\n -ms-transform: translate(-230px, 0);\n transform: translate(-230px, 0);\n }\n\n .ins-container:hover {\n -webkit-transform: none;\n -ms-transform: none;\n transform: none;\n }\n\n .ins-container {\n -webkit-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -o-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);\n\n -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); \n transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);\n\n -o-transition-delay: 3s;\n\n transition-delay: 3s;\n -webkit-transition-delay: 3s;\n }\n\n .ins-container:hover {\n -webkit-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -o-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);\n\n -webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n -o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); \n transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);\n\n -o-transition-delay: 0;\n\n transition-delay: 0;\n -webkit-transition-delay: 0;\n }\n}\n\n.ins-add-button.ins-button {\n width: auto;\n height: auto;\n padding: 2px 5px;\n margin: 4px 0 0 0;\n right: 0px;\n min-width: 0;\n position: absolute;\n z-index: 100;\n}\n\n.ins-search-box {\n margin: 20px 0px 16px 13px;\n border: 0;\n padding: 7px 8px;\n font-size: 12px;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-radius: 3px;\n background: #111117;\n color: #919691;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n.ins-search-box:focus {\n background: #15151d;\n border: 0;\n outline: 0;\n}\n\n.ins-search-box::-webkit-search-cancel-button {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n height: 15px;\n width: 8px;\n cursor: pointer;\n}\n\n.ins-search-box::-webkit-search-cancel-button:before {\n height: 10px;\n width: 10px;\n content: 'x';\n font-family: Arial;\n line-height: 0;\n font-size: 13px;\n color: #999;\n font-weight: bold;\n cursor: pointer;\n}\n\n.ins-search-box::-webkit-input-placeholder {\n color: #777;\n}\n\n.ins-search-box:-moz-placeholder {\n color: #777;\n}\n\n.ins-search-box::-moz-placeholder {\n color: #777;\n}\n\n.ins-search-box:-ms-input-placeholder { \n color: #777;\n}\n\n.ins-world-tree {\n\n}\n\n.ins-control-group {\n display: block;\n clear: both;\n overflow: hidden;\n padding: 14px 20px 12px 20px;\n background: #0d0f1b;\n border-bottom: 1px solid #29292d;\n}\n\n.ins-button {\n display: block;\n float: left;\n font-size: 11px;\n line-height: 1;\n padding: 10px 11px;\n min-width: 49px;\n text-align: center;\n background: #0d0f1b;\n border: 0;\n color: #aaa;\n border-radius: 2px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n margin: 0;\n}\n\n.ins-button:hover {\n background: #212a3a;\n}\n\n.ins-button:active {\n -webkit-transform: translateY(2px);\n -ms-transform: translateY(2px);\n transform: translateY(2px);\n background: #212a3a;\n}\n\n.ins-button::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n\n.jstree-default .jstree-search {\n font-style: italic;\n color: #aaa;\n font-weight: normal;\n}\n\n.jstree-default .jstree-wholerow-hovered,\n.jstree-default .jstree-hovered {\n background: transparent;\n border-radius: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n\n.jstree-default .jstree-wholerow {\n height: 26px;\n}\n\n.jstree-default .jstree-wholerow-clicked,\n.jstree-default .jstree-clicked {\n background: transparent;\n border-radius: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-transition: none;\n -o-transition: none;\n transition: none;\n}\n\n.jstree-default .jstree-leaf .jstree-clicked {\n color: #bbb !important;\n\n -webkit-transition: color 100ms linear; \n -o-transition: color 100ms linear; \n transition: color 100ms linear; \n}\n\n.jstree-default .jstree-anchor {\n line-height: 27px;\n}\n\n.jstree-default .jstree-container-ul> .jstree-node > .jstree-anchor:before,\n.jstree-default .jstree-open > .jstree-children > .jstree-node > .jstree-anchor:before {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n right: 1px;\n height: 26px;\n background: transparent;\n border-radius: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border-right: none;\n pointer-events: none;\n background: rgba(0,0,0,0);\n\n -webkit-transition: background 100ms linear; \n -o-transition: background 100ms linear; \n transition: background 100ms linear; \n}\n\n.jstree-default .jstree-anchor.jstree-clicked:before {\n background: rgba(58, 63, 88, 0.35) !important;\n\n -webkit-transition: background 100ms linear; \n -o-transition: background 100ms linear; \n transition: background 100ms linear; \n\n pointer-events: none;\n}\n\n.jstree-default .jstree-node,\n.jstree-default .jstree-leaf .jstree-ocl,\n.jstree-default .jstree-icon {\n background: transparent;\n}\n\n.jstree-default .jstree-node {\n margin-left: 10px;\n}\n\n.jstree-default .jstree-icon {\n position: relative;\n}\n\n.jstree-default .jstree-icon:before {\n display: block;\n pointer-events: none;\n color: #d6d6d6;\n font-style: normal;\n font-size: 11px;\n position: absolute;\n top: 0px;\n left: 10px;\n}\n\n.jstree-default .jstree-open > .jstree-icon:before {\n content: '▾';\n -webkit-transform: rotate(180deg);\n -ms-transform: rotate(180deg);\n transform: rotate(180deg);\n top: 2px;\n}\n\n.jstree-default .jstree-closed > .jstree-icon:before {\n content: '▾';\n}\n\n.jstree-leaf .jstree-icon:before {\n display: none;\n}\n\n.jstree-default .jstree-open .jstree-ocl {\n background-position: -38px -1px;\n}\n\n.jstree-default .jstree-closed .jstree-ocl {\n background-position: -4px -2px;\n}\n\n.jstree-anchor {\n padding: 1px 0;\n -webkit-transition: none;\n -o-transition: none;\n transition: none;\n}\n\n.jstree-anchor .jstree-icon {\n display: none;\n}\n\n.jstree-node-type-bodies > .jstree-anchor,\n.jstree-node-type-constraints > .jstree-anchor,\n.jstree-node-type-composites > .jstree-anchor {\n color: #888;\n}\n\n.ins-container *::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n\n.ins-container *::-webkit-scrollbar-thumb:vertical {\n border-left: 3px solid #1c1c25;\n background: #1c1d2f;\n width: 10px;\n}\n\n.ins-container *::-webkit-scrollbar-thumb:horizontal {\n border-top: 3px solid #1c1c25;\n background: #1c1d2f;\n height: 10px;\n}\n\n.ins-container *::-webkit-scrollbar-track,\n.ins-container *::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n#vakata-dnd {\n font-family: Arial;\n font-size: 12px;\n color: #aaa;\n}" /***/ } /******/ ])