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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AAuEA,gBAMA,oEADA,gDAFA,YACA,gBAHA,kBACA,UAKA,CAEA,gBACA,YACA,aACA,CAEA,oCACA,gBAEA,kCADA,WAEA,CAEA,gBACA,WACA,CACA,CCUA,gBACA,kBACA,SACA,CAEA,gBAMA,aACA,wBACA,CAEA,gCANA,SACA,OAJA,eAEA,QADA,KAeA,CAPA,gBAMA,qDACA,CAEA,gBACA,eACA,CC1HA,gBACA,YACA","sources":["webpack://@square/maker/./src/components/Blade/src/Blade.vue","webpack://@square/maker/./src/components/Blade/src/BladeLayer.vue","webpack://@square/maker/./src/components/Blade/src/BladeContent.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"$s.BladeContainer\"\n\t\t:style=\"style\"\n\t\tv-bind=\"$attrs\"\n\t\t:aria-labelledby=\"ariaLabelledby\"\n\t\tv-on=\"$listeners\"\n\t>\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<script>\nimport cssValidator from '@square/maker/utils/css-validator';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\n\nexport default {\n\tinject: {\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Background color of blade\n\t\t */\n\t\tbgColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\t\t/**\n\t\t * Text color of blade\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\t\t/**\n\t\t * The ID of the element that labels the blade.\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('blade', [\n\t\t\t'bgColor',\n\t\t\t'color',\n\t\t]),\n\t\tstyle() {\n\t\t\treturn {\n\t\t\t\t'--bg-color': this.resolvedBgColor,\n\t\t\t\t'--color': this.resolvedColor,\n\t\t\t};\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.BladeContainer {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tcolor: var(--color, $maker-color-body);\n\tbackground-color: var(--bg-color, $maker-color-background);\n}\n\n.Blade {\n\theight: 100%;\n\toverflow: auto;\n}\n\n@media screen and (--for-tablet-landscape-up) {\n\t.BladeContainer {\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.renderFn\"\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.renderFn\"\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<render-fn :render-fn=\"bladeApi.state.renderFn\" />\n\t\t\t</div>\n\t\t</m-transition-responsive>\n\t</div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport PseudoWindow from 'vue-pseudo-window';\nimport { MTransitionFadeIn } from '@square/maker/components/TransitionFadeIn';\nimport { MTransitionResponsive } from '@square/maker/components/TransitionResponsive';\nimport {\n\tspringUpFn,\n\tspringDownFn,\n\tspringLeftFn,\n\tspringRightFn,\n\tmobileMinWidth,\n\ttabletMinWidth,\n} from '@square/maker/utils/transitions';\nimport RenderFn from '@square/maker/utils/RenderFn';\nimport bladeApi from './blade-api';\n\nconst apiMixin = {\n\tprovide() {\n\t\tconst api = {\n\t\t\tstate: Vue.observable({\n\t\t\t\trenderFn: undefined,\n\t\t\t}),\n\n\t\t\topen(renderFn) {\n\t\t\t\tthis.state.renderFn = renderFn;\n\t\t\t\t// function that only closes this specific blade\n\t\t\t\treturn () => {\n\t\t\t\t\tif (this.state.renderFn === renderFn) {\n\t\t\t\t\t\tthis.state.renderFn = 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.renderFn = 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\tcomponents: {\n\t\tPseudoWindow,\n\t\tMTransitionFadeIn,\n\t\tMTransitionResponsive,\n\t\tRenderFn,\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: $maker-color-overlay;\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"],"names":[],"sourceRoot":""}