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

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Dialog/src/Dialog.vue","webpack://../components/Dialog/src/DialogContent.vue","webpack://../components/Dialog/src/DialogLayer.vue"],"names":[],"mappings":"AAUA,mBACA,iBAAA,CACA,UAAA,CACA,4BAAA,CACA,eAAA,CACA,yBACA,CAEA,mBACA,eAAA,CACA,kBACA,CAEA,oCACA,mBACA,oBAAA,CACA,UAAA,CACA,WAAA,CACA,4BAAA,CACA,eAAA,CACA,iBAAA,CACA,sCACA,CAEA,mBACA,WAAA,CACA,gBAAA,CACA,6BACA,CACA,CC/BA,mBACA,YACA,CCkGA,mBACA,iBAAA,CACA,SACA,CAEA,mBACA,cAAA,CACA,KAAA,CACA,OAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,oBAAA,CACA,sBACA,CAEA,oCACA,mBACA,kBACA,CACA,CAEA,mBACA,cAAA,CACA,KAAA,CACA,OAAA,CACA,QAAA,CACA,MAAA,CACA,+BACA,CAEA,mBACA,eACA","file":"styles.css","sourcesContent":["<template>\n\t<div :class=\"$s.Container\">\n\t\t<div :class=\"$s.Dialog\">\n\t\t\t<!-- @slot Dialog 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\tmax-height: calc(100% - 48px);\n\toverflow: scroll;\n\tborder-radius: 8px 8px 0 0;\n}\n\n.Dialog {\n\toverflow: scroll;\n\tbackground: #f5f6f7;\n}\n\n@media screen and (min-width: 840px) {\n\t.Container {\n\t\tdisplay: inline-block;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmax-height: calc(100% - 64px);\n\t\toverflow: hidden;\n\t\tborder-radius: 8px;\n\t\tbox-shadow: 0 0 24px 8px rgba(0, 0, 0, 0.3);\n\t}\n\n\t.Dialog {\n\t\twidth: 400px;\n\t\tmin-height: 180px;\n\t\tmax-height: calc(100vh - 64px);\n\t}\n}\n</style>\n","<template>\n\t<div :class=\"$s.DialogContent\">\n\t\t<!-- @slot Dialog Content content (gets correct padding) -->\n\t\t<slot />\n\t</div>\n</template>\n\n<style module=\"$s\">\n.DialogContent {\n\tpadding: 24px;\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=\"dialogApi.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=\"dialogApi.state.vnode\"\n\t\t\t\t:class=\"$s.DialogLayer\"\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=\"dialogApi.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,\n\tspringDownFn,\n\tfloatUpFn,\n\tfloatDownFn,\n\tmobileMinWidth,\n\ttabletMinWidth,\n} from '@square/maker/utils/transitions';\nimport dialogApi from './dialog-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// function that only closes this specific Dialog\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.dialogApi) {\n\t\t\tthis.dialogApi = api;\n\t\t}\n\n\t\treturn {\n\t\t\t[dialogApi]: api,\n\t\t};\n\t},\n};\n\nexport default {\n\tname: 'DialogLayer',\n\n\tcomponents: {\n\t\tV,\n\t\tPseudoWindow,\n\t\tMTransitionFadeIn,\n\t\tMTransitionResponsive,\n\t},\n\n\tinject: {\n\t\tdialogApi,\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: floatUpFn,\n\t\t\t\tleave: floatDownFn,\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.DialogLayer {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: center;\n}\n\n@media screen and (min-width: 840px) {\n\t.DialogLayer {\n\t\talign-items: center;\n\t}\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.3);\n}\n\n.disableScroll {\n\toverflow: hidden;\n}\n</style>\n"]}