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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AAkJA,6DAIA,mBAIA,uCACA,oDACA,oBALA,8BAFA,oBAIA,wDADA,mDAKA,CAEA,0GAKA,eAFA,YACA,aAEA,CAEA,0GAKA,eAFA,YACA,aAEA,CAEA,0GAIA,WACA,UAFA,SAGA,CAEA,6CAGA,2BADA,iBAEA,CAEA,2EAGA,QADA,UAEA,yBACA,CAEA,2EAGA,QADA,SAEA,yBACA,CAEA,2EAGA,WADA,QAEA","sources":["webpack://@square/maker/./src/components/Badge/src/Badge.vue"],"sourcesContent":["<template>\n\t<span\n\t\tv-if=\"isInline\"\n\t\t:class=\"classes\"\n\t\t:style=\"styles\"\n\t>\n\t\t{{ label }}\n\t</span>\n\t<vnode-syringe\n\t\tv-else\n\t\t:class&=\"classes\"\n\t\t:style&=\"styles\"\n\t>\n\t\t<!-- @slot content to position badge on -->\n\t\t<slot />\n\t</vnode-syringe>\n</template>\n\n<script>\nimport { colord } from 'colord';\nimport vnodeSyringe from 'vue-vnode-syringe';\nimport { getContrast } from '@square/maker/utils/get-contrast';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\n\nexport default {\n\tcomponents: {\n\t\tvnodeSyringe,\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 * badge's label text\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * badge's size\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'medium',\n\t\t\tvalidator: (size) => ['small', 'medium'].includes(size),\n\t\t},\n\t\t/**\n\t\t * skip setting `position: relative` on default slot\n\t\t */\n\t\tnoRelative: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * default slot's pseudo-element target\n\t\t */\n\t\tpseudoTarget: {\n\t\t\ttype: String,\n\t\t\tdefault: 'after',\n\t\t\tvalidator: (pseudo) => ['before', 'after'].includes(pseudo),\n\t\t},\n\t\t/**\n\t\t * bg color, as a valid hex string\n\t\t */\n\t\tbgColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\t// uses colord validator so that contrast can be checked\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * text color, as a valid hex string\n\t\t */\n\t\ttextColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\t// uses colord validator so that contrast can be checked\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('badge', [\n\t\t\t'pattern',\n\t\t\t'bgColor',\n\t\t\t'textColor',\n\t\t]),\n\t\tisNotificationDot() {\n\t\t\treturn !this.label;\n\t\t},\n\t\tisInline() {\n\t\t\treturn !this.$slots.default;\n\t\t},\n\t\tclasses() {\n\t\t\tconst classes = [];\n\t\t\tif (this.isNotificationDot) {\n\t\t\t\tclasses.push(this.$s.NotificationDot);\n\t\t\t} else {\n\t\t\t\tclasses.push(this.$s[`size_${this.size}`]);\n\t\t\t}\n\t\t\tif (this.isInline) {\n\t\t\t\tclasses.push(this.$s.InlineBadge);\n\t\t\t\treturn classes;\n\t\t\t}\n\t\t\tif (this.pseudoTarget === 'before') {\n\t\t\t\tclasses.push(this.$s.BeforeBadge);\n\t\t\t} else {\n\t\t\t\tclasses.push(this.$s.AfterBadge);\n\t\t\t}\n\t\t\treturn classes;\n\t\t},\n\t\tstyles() {\n\t\t\tconst bgColor = this.resolvedBgColor || '#000';\n\t\t\tconst textColor = getContrast(bgColor, this.resolvedTextColor);\n\t\t\tconst label = this.label || ' ';\n\t\t\tconst quotedLabel = `'${label}'`;\n\t\t\tconst styles = {\n\t\t\t\t'--badge-text-color': textColor,\n\t\t\t\t'--badge-bg-color': bgColor,\n\t\t\t\t'--badge-label': quotedLabel,\n\t\t\t};\n\t\t\tif (!this.isInline && !this.noRelative) {\n\t\t\t\tstyles.position = 'relative';\n\t\t\t}\n\t\t\treturn styles;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.InlineBadge,\n.BeforeBadge::before,\n.AfterBadge::after {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tcolor: var(--badge-text-color);\n\tfont-weight: $maker-font-label-font-weight;\n\tfont-family: $maker-font-label-font-family;\n\tbackground-color: var(--badge-bg-color);\n\tborder: 1px solid $maker-color-background;\n\tborder-radius: 100px;\n}\n\n.size_medium.InlineBadge,\n.size_medium.BeforeBadge::before,\n.size_medium.AfterBadge::after {\n\theight: 24px;\n\tpadding: 0 8px;\n\tfont-size: 14px; /* TODO: refactor to font-size step -1 later? */\n}\n\n.size_small.InlineBadge,\n.size_small.BeforeBadge::before,\n.size_small.AfterBadge::after {\n\theight: 16px;\n\tpadding: 0 4px;\n\tfont-size: 12px; /* TODO: refactor to font-size step -2 later? */\n}\n\n.NotificationDot.InlineBadge,\n.NotificationDot.BeforeBadge::before,\n.NotificationDot.AfterBadge::after {\n\twidth: 8px;\n\theight: 8px;\n\tpadding: 0;\n}\n\n.BeforeBadge::before,\n.AfterBadge::after {\n\tposition: absolute;\n\tcontent: var(--badge-label);\n}\n\n.size_medium.BeforeBadge::before,\n.size_medium.AfterBadge::after {\n\ttop: -12px;\n\tright: 0;\n\ttransform: translateX(50%);\n}\n\n.size_small.BeforeBadge::before,\n.size_small.AfterBadge::after {\n\ttop: -8px;\n\tright: 0;\n\ttransform: translateX(50%);\n}\n\n.NotificationDot.BeforeBadge::before,\n.NotificationDot.AfterBadge::after {\n\ttop: -4px;\n\tright: -4px;\n}\n</style>\n"],"names":[],"sourceRoot":""}