@square/maker/components/Blade/styles.css.map

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Blade/src/Blade.vue","webpack://../components/Blade/src/BladeLayer.vue","webpack://../components/Blade/src/BladeContent.vue"],"names":[],"mappings":"AAUA,mBACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,eACA,CAEA,mBACA,WAAA,CACA,eAAA,CACA,kBACA,CAEA,oCACA,mBACA,WAAA,CACA,sCACA,CAEA,mBACA,WACA,CACA,CCuEA,mBACA,iBAAA,CACA,SACA,CAEA,mBAMA,YAAA,CACA,wBACA,CAEA,sCATA,cAAA,CACA,KAAA,CACA,OAAA,CACA,QAAA,CACA,MAYA,CAPA,mBAMA,+BACA,CAEA,mBACA,eACA,CCzHA,mBACA,YACA","file":"styles.css","sourcesContent":["<template>\n\t<div :class=\"$s.Container\">\n\t\t<div :class=\"$s.Blade\">\n\t\t\t<!-- @slot Blade content -->\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<style module=\"$s\">\n.Container {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.Blade {\n\theight: 100%;\n\toverflow: scroll;\n\tbackground: #f5f6f7;\n}\n\n@media screen and (min-width: 840px) {\n\t.Container {\n\t\twidth: 400px;\n\t\tbox-shadow: 0 0 24px 8px rgba(0, 0, 0, 0.3);\n\t}\n\n\t.Blade {\n\t\twidth: 400px;\n\t}\n}\n</style>\n","<template>\n\t<div :class=\"$s.Layer\">\n\t\t<m-transition-fade-in>\n\t\t\t<div\n\t\t\t\tv-if=\"bladeApi.state.vnode\"\n\t\t\t\t:class=\"$s.Translucent\"\n\t\t\t/>\n\t\t</m-transition-fade-in>\n\t\t<m-transition-responsive :transitions=\"transitions\">\n\t\t\t<div\n\t\t\t\tv-if=\"bladeApi.state.vnode\"\n\t\t\t\t:class=\"$s.BladeLayer\"\n\t\t\t>\n\t\t\t\t<pseudo-window\n\t\t\t\t\tbody\n\t\t\t\t\t:class=\"$s.disableScroll\"\n\t\t\t\t/>\n\t\t\t\t<v :nodes=\"bladeApi.state.vnode\" />\n\t\t\t</div>\n\t\t</m-transition-responsive>\n\t</div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport V from 'vue-v';\nimport PseudoWindow from 'vue-pseudo-window';\nimport { MTransitionFadeIn } from '@square/maker/components/TransitionFadeIn';\nimport { MTransitionResponsive } from '@square/maker/utils/TransitionResponsive';\nimport {\n\tspringUpFn, springDownFn, springLeftFn, springRightFn, mobileMinWidth, tabletMinWidth,\n} from '@square/maker/utils/transitions';\nimport bladeApi from './blade-api';\n\nconst apiMixin = {\n\tprovide() {\n\t\tconst vm = this;\n\t\tconst api = {\n\t\t\tstate: Vue.observable({\n\t\t\t\tvnode: undefined,\n\t\t\t}),\n\n\t\t\topen(renderFn) {\n\t\t\t\tconst vnode = renderFn(vm.$createElement);\n\t\t\t\tthis.state.vnode = vnode;\n\t\t\t\t// Method that only closes this specific blade\n\t\t\t\treturn () => {\n\t\t\t\t\tif (this.state.vnode === vnode) {\n\t\t\t\t\t\tthis.state.vnode = undefined;\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\n\t\t\tclose() {\n\t\t\t\tthis.state.vnode = undefined;\n\t\t\t},\n\t\t};\n\n\t\tif (!this.bladeApi) {\n\t\t\tthis.bladeApi = api;\n\t\t}\n\n\t\treturn {\n\t\t\t[bladeApi]: api,\n\t\t};\n\t},\n};\n\nexport default {\n\tname: 'BladeLayer',\n\n\tcomponents: {\n\t\tV,\n\t\tPseudoWindow,\n\t\tMTransitionFadeIn,\n\t\tMTransitionResponsive,\n\t},\n\n\tinject: {\n\t\tbladeApi,\n\t},\n\n\tinheritAttrs: false,\n\n\tapiMixin,\n\n\tdata() {\n\t\treturn {\n\t\t\ttransitions: [{\n\t\t\t\tminWidth: mobileMinWidth,\n\t\t\t\tenter: springUpFn,\n\t\t\t\tleave: springDownFn,\n\t\t\t}, {\n\t\t\t\tminWidth: tabletMinWidth,\n\t\t\t\tenter: springLeftFn,\n\t\t\t\tleave: springRightFn,\n\t\t\t}],\n\t\t};\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Layer {\n\tposition: relative;\n\tz-index: 1;\n}\n\n.BladeLayer {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.Translucent {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.2);\n}\n\n.disableScroll {\n\toverflow: hidden;\n}\n</style>\n","<template>\n\t<div :class=\"$s.BladeContent\">\n\t\t<!-- @slot Blade Content content (gets correct padding) -->\n\t\t<slot />\n\t</div>\n</template>\n\n<style module=\"$s\">\n.BladeContent {\n\tpadding: 24px;\n}\n</style>\n"]}