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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA6KA,gBAIA,2DAHA,mBACA,eACA,gBAEA,CAEA,gBACA,YACA,CAEA,gBACA,aACA,wBACA,CAEA,kBACA,iBACA,CAEA,gBAMA,uBAJA,mBADA,aAEA,YACA,gBAGA,CAEA,gCAJA,uBAMA,CAEA,4BACA,cACA,CAEA,gBACA,gBACA,qBACA,kBACA,CAEA,gBACA,gBACA,qBACA,kBACA,CAEA,gBACA,gBACA,mBACA,kBACA,CAEA,gBACA,8CACA,mDACA,gDACA,CAEA,gBAEA,iCADA,YAEA","sources":["webpack://@square/maker/./src/components/Notice/src/Notice.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.Notice,\n\t\t\t$s[`type_${resolvedType}`],\n\t\t\t$s[`display_${display}`],\n\t\t]\"\n\t\t:style=\"style\"\n\t\t:role=\"role\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<div :class=\"$s.IconContentWrapper\">\n\t\t\t<div :class=\"$s.IconAligner\">\n\t\t\t\t<!-- @slot icon in notice -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<m-icon\n\t\t\t\t\t\t:name=\"finalIconName\"\n\t\t\t\t\t\t:class=\"$s.Icon\"\n\t\t\t\t\t/>\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<!-- @slot notice content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t\t<div\n\t\t\tv-if=\"showActions\"\n\t\t\t:class=\"$s.ActionsWrapper\"\n\t\t>\n\t\t\t<!-- @slot put text buttons here -->\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport assert from '@square/maker/utils/assert';\nimport cssValidator from '@square/maker/utils/css-validator';\nimport { MIcon } from '@square/maker/components/Icon';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tcomponents: {\n\t\tMIcon,\n\t},\n\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 * pattern defined at theme level\n\t\t */\n\t\tpattern: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * type of notice\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (type) => ['error', 'success', 'warning', 'info'].includes(type),\n\t\t},\n\t\t/**\n\t\t * notice display\n\t\t */\n\t\tdisplay: {\n\t\t\ttype: String,\n\t\t\tdefault: 'inline',\n\t\t\tvalidator: (display) => ['inline', 'block'].includes(display),\n\t\t},\n\t\t/**\n\t\t * name of icon, defined in theme\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * icon color\n\t\t */\n\t\ticonColor: {\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 for inline notices\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 * background color for block notices\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 * The ARIA role for the notice, for accessibility.\n\t\t * 'status' is for general information, 'alert' is for important, time-sensitive information.\n\t\t */\n\t\trole: {\n\t\t\ttype: String,\n\t\t\tdefault: 'status',\n\t\t\tvalidator: (role) => ['status', 'alert'].includes(role),\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('notice', [\n\t\t\t'pattern',\n\t\t\t'type',\n\t\t\t'iconName',\n\t\t\t'iconColor',\n\t\t\t'color',\n\t\t\t'bgColor',\n\t\t]),\n\t\tfinalIconName() {\n\t\t\tif (this.resolvedIconName) {\n\t\t\t\treturn this.resolvedIconName;\n\t\t\t}\n\t\t\tif (this.resolvedType === 'error') {\n\t\t\t\treturn 'error';\n\t\t\t}\n\t\t\tif (this.resolvedType === 'success') {\n\t\t\t\treturn 'success';\n\t\t\t}\n\t\t\tif (this.resolvedType === 'warning') {\n\t\t\t\treturn 'warning';\n\t\t\t}\n\t\t\treturn 'info';\n\t\t},\n\t\tshowActions() {\n\t\t\treturn this.$slots.actions && this.display === 'block';\n\t\t},\n\t\tstyle() {\n\t\t\tconst textColor = this.display === 'inline'\n\t\t\t\t? this.resolvedColor\n\t\t\t\t: 'var(--maker-color-neutral-90, #1b1b1b)';\n\t\t\treturn {\n\t\t\t\t'--color': textColor,\n\t\t\t\t'--color-icon': this.resolvedIconColor,\n\t\t\t\t'--color-bg': this.resolvedBgColor,\n\t\t\t};\n\t\t},\n\t},\n\n\tcreated() {\n\t\tassert.warn(!(this.display === 'inline' && this.$slots.actions), 'inline Notices cannot have an actions slot', 'Notice');\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Notice {\n\tcolor: var(--color);\n\tfont-size: 14px;\n\tline-height: 24px;\n\tborder-radius: $maker-shape-default-border-radius;\n}\n\n.IconContentWrapper {\n\tdisplay: flex;\n}\n\n.ActionsWrapper {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.ActionsWrapper > * {\n\tmargin-right: 24px;\n}\n\n.IconAligner {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 24px;\n\tmargin-right: 8px;\n\tcolor: var(--color-icon);\n\tfill: var(--color-icon);\n}\n\n.Icon {\n\tcolor: var(--color-icon);\n}\n\n.ActionsWrapper > *:last-child {\n\tmargin-right: 0;\n}\n\n.type_error {\n\t--color: #a82826;\n\t--color-icon: #cd2026;\n\t--color-bg: #f6eceb;\n}\n\n.type_warning {\n\t--color: #7e662a;\n\t--color-icon: #ffbf00;\n\t--color-bg: #f9eecf;\n}\n\n.type_success {\n\t--color: #0a7a06;\n\t--color-icon: #008000;\n\t--color-bg: #ebf1eb;\n}\n\n.type_info {\n\t--color: $maker-color-neutral-90;\n\t--color-icon: $maker-color-neutral-80;\n\t--color-bg: $maker-color-neutral-10;\n}\n\n.display_block {\n\tpadding: 16px;\n\tbackground-color: var(--color-bg);\n}\n</style>\n"],"names":[],"sourceRoot":""}