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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AAyHA,gBASA,iCACA,qCANA,gCAFA,qBAKA,wDADA,eADA,oDAGA,iBALA,gBAFA,iBAsMA,CA3LA,+BAEA,gCADA,4BAEA,CAEA,+BAEA,8BADA,0BAEA,CAEA,6FAIA,gCADA,4BAEA,CAEA,8DAIA,iBADA,gBAgBA,CAbA,4EAMA,iCAHA,YAIA,WAHA,WAHA,kBACA,SAGA,UAGA,CAEA,0GACA,oCACA,CAIA,sCACA,wDAMA,CANA,gDAOA,CAEA,qDACA,+FASA,CATA,uFAUA,CAIA,sCACA,qEAQA,CARA,6DASA,CAEA,qDACA,qJAaA,CAbA,6IAcA,CAGA,+BAEA,iCADA,6BAEA,CAEA,+BAEA,+BADA,2BAEA,CAEA,6FAIA,iCADA,6BAEA,CAEA,8DAIA,kBADA,iBAgBA,CAbA,0EAMA,iCAHA,YAIA,WAHA,UAHA,kBACA,SAGA,UAGA,CAEA,wGACA,oCACA,CAIA,qCACA,kDAMA,CANA,0CAOA,CAEA,oDACA,gGASA,CATA,wFAUA,CAIA,qCACA,kEAQA,CARA,0DASA,CAEA,oDACA,sKAaA,CAbA,8JAcA","sources":["webpack://@square/maker/./src/components/Pill/src/Pill.vue"],"sourcesContent":["<template>\n\t<span\n\t\t:class=\"[$s.Pill, shapeClass]\"\n\t\t:style=\"style\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<!-- @slot pill content -->\n\t\t<slot />\n\t</span>\n</template>\n\n<script>\nimport cssValidator from '@square/maker/utils/css-validator';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\n\nconst MAXIMUM_ALLOWED_SHAPES = 2;\nconst ALLOWED_SHAPES = new Set([\n\t'squared',\n\t'rounded',\n\t'pill',\n\t'point',\n\t'ribbon',\n]);\n\n/**\n * @inheritAttrs span\n * @inheritListeners span\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 * 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\n\t\t/**\n\t\t * text color, also border color if no bg color\n\t\t */\n\t\ttextColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\n\t\t/**\n\t\t * bg & border color\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\n\t\t/**\n\t\t * The shape the pill should take, or a tuple of shapes for each endcap.\n\t\t * @values pill, squared, rounded, point, ribbon\n\t\t */\n\t\tshape: {\n\t\t\ttype: [String, Array],\n\t\t\tdefault: 'pill',\n\t\t\tvalidator(input) {\n\t\t\t\tif (Array.isArray(input)) {\n\t\t\t\t\treturn input.length === MAXIMUM_ALLOWED_SHAPES\n\t\t\t\t\t\t&& input.every((value) => ALLOWED_SHAPES.has(value));\n\t\t\t\t}\n\n\t\t\t\treturn ALLOWED_SHAPES.has(input);\n\t\t\t},\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('pill', [\n\t\t\t'pattern',\n\t\t\t'textColor',\n\t\t\t'bgColor',\n\t\t]),\n\n\t\tstyle() {\n\t\t\tconst textColor = this.resolvedTextColor || 'var(--maker-color-neutral-90, #1b1b1b)';\n\t\t\tconst bgColor = this.resolvedBgColor || 'transparent';\n\t\t\tconst borderColor = bgColor === 'transparent' ? textColor : bgColor;\n\n\t\t\treturn {\n\t\t\t\t'--text-color': textColor,\n\t\t\t\t'--bg-color': bgColor,\n\t\t\t\t'--border-color': borderColor,\n\t\t\t};\n\t\t},\n\n\t\tshapeClass() {\n\t\t\tconst { '--bg-color': bgColor } = this.style;\n\n\t\t\tconst selectors = Array.isArray(this.shape)\n\t\t\t\t? [`start--${this.shape[0]}`, `end--${this.shape[1]}`]\n\t\t\t\t: [`start--${this.shape}`, `end--${this.shape}`];\n\n\t\t\tif (bgColor === 'transparent') {\n\t\t\t\tselectors.push('outlined');\n\t\t\t}\n\n\t\t\treturn selectors.map((style) => this.$s[style]);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Pill {\n\tposition: relative;\n\tdisplay: inline-block;\n\tpadding: 4px 8px;\n\tcolor: var(--text-color, #1b1b1b);\n\tfont-weight: $maker-font-label-font-weight;\n\tfont-size: 12px; /* TODO: refactor to font-size step -2 later? */\n\tfont-family: $maker-font-label-font-family;\n\tline-height: 16px; /* TODO: refactor to line-height step -2 later? */\n\tbackground-color: var(--bg-color);\n\tborder: 1px solid var(--border-color);\n\n\t&.start--pill {\n\t\tborder-top-left-radius: 100px;\n\t\tborder-bottom-left-radius: 100px;\n\t}\n\n\t&.start--rounded {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-bottom-left-radius: 4px;\n\t}\n\n\t&.start--squared,\n\t&.start--point,\n\t&.start--ribbon {\n\t\tborder-top-left-radius: unset;\n\t\tborder-bottom-left-radius: unset;\n\t}\n\n\t&.start--point,\n\t&.start--ribbon {\n\t\t/* Absolute position doesn't make space in layouts for the decoration, so we force it here */\n\t\tmargin-left: 15px;\n\t\tborder-left: none;\n\n\t\t&::before {\n\t\t\tposition: absolute;\n\t\t\ttop: -1px; /* align to border */\n\t\t\tbottom: -1px; /* align to border */\n\t\t\tleft: -15px;\n\t\t\twidth: 15px;\n\t\t\tbackground-color: var(--bg-color);\n\t\t\tcontent: '';\n\t\t}\n\n\t\t&.outlined::before {\n\t\t\tbackground-color: var(--border-color);\n\t\t}\n\t}\n\n\t&.start--point {\n\t\t&::before {\n\t\t\tclip-path:\n\t\t\t\tpolygon(\n\t\t\t\t\t100% 0%,\n\t\t\t\t\t0% 50%,\n\t\t\t\t\t100% 100%,\n\t\t\t\t\t100% 0%\n\t\t\t\t);\n\t\t}\n\n\t\t&.outlined::before {\n\t\t\tclip-path:\n\t\t\t\tpolygon(\n\t\t\t\t\t100% 0%,\n\t\t\t\t\t0% 50%,\n\t\t\t\t\t100% 100%,\n\t\t\t\t\t100% calc(100% - 1px),\n\t\t\t\t\tcalc(0% + 1px) 50%,\n\t\t\t\t\t100% calc(0% + 1px),\n\t\t\t\t\t100% 0%\n\t\t\t\t);\n\t\t}\n\t}\n\n\t&.start--ribbon {\n\t\t&::before {\n\t\t\tclip-path:\n\t\t\t\tpolygon(\n\t\t\t\t\t100% 0%,\n\t\t\t\t\t0% 0%,\n\t\t\t\t\t80% 50%,\n\t\t\t\t\t0% 100%,\n\t\t\t\t\t100% 100%,\n\t\t\t\t\t100% 0%\n\t\t\t\t);\n\t\t}\n\n\t\t&.outlined::before {\n\t\t\tclip-path:\n\t\t\t\tpolygon(\n\t\t\t\t\t100% 0%,\n\t\t\t\t\t0% 0%,\n\t\t\t\t\t80% 50%,\n\t\t\t\t\t0% 100%,\n\t\t\t\t\t100% 100%,\n\t\t\t\t\t100% calc(100% - 1px),\n\t\t\t\t\tcalc(0% + 2px) calc(100% - 1px),\n\t\t\t\t\tcalc(80% + 1px) 50%,\n\t\t\t\t\tcalc(0% + 2px) calc(0% + 1px),\n\t\t\t\t\t100% calc(0% + 1px),\n\t\t\t\t\t100% 0%\n\t\t\t\t);\n\t\t}\n\t}\n\n\t&.end--pill {\n\t\tborder-top-right-radius: 100px;\n\t\tborder-bottom-right-radius: 100px;\n\t}\n\n\t&.end--rounded {\n\t\tborder-top-right-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t&.end--squared,\n\t&.end--point,\n\t&.end--ribbon {\n\t\tborder-top-right-radius: unset;\n\t\tborder-bottom-right-radius: unset;\n\t}\n\n\t&.end--point,\n\t&.end--ribbon {\n\t\t/* Absolute position doesn't make space in layouts for the decoration, so we force it here */\n\t\tmargin-right: 15px;\n\t\tborder-right: none;\n\n\t\t&::after {\n\t\t\tposition: absolute;\n\t\t\ttop: -1px;  /* align to border */\n\t\t\tbottom: -1px; /* align to border */\n\t\t\tleft: 100%;\n\t\t\twidth: 15px;\n\t\t\tbackground-color: var(--bg-color);\n\t\t\tcontent: '';\n\t\t}\n\n\t\t&.outlined::after {\n\t\t\tbackground-color: var(--border-color);\n\t\t}\n\t}\n\n\t&.end--point {\n\t\t&::after {\n\t\t\tclip-path:\n\t\t\t\tpolygon(\n\t\t\t\t\t0% 0%,\n\t\t\t\t\t100% 50%,\n\t\t\t\t\t0% 100%,\n\t\t\t\t\t0% 0%\n\t\t\t\t);\n\t\t}\n\n\t\t&.outlined::after {\n\t\t\tclip-path:\n\t\t\t\tpolygon(\n\t\t\t\t\t0% 0%,\n\t\t\t\t\t100% 50%,\n\t\t\t\t\t0% 100%,\n\t\t\t\t\t0% calc(100% - 1px),\n\t\t\t\t\tcalc(100% - 1px) 50%,\n\t\t\t\t\t0% calc(0% + 1px),\n\t\t\t\t\t0% 0%\n\t\t\t\t);\n\t\t}\n\t}\n\n\t&.end--ribbon {\n\t\t&::after {\n\t\t\tclip-path:\n\t\t\t\tpolygon(\n\t\t\t\t\t0% 0%,\n\t\t\t\t\t100% 0%,\n\t\t\t\t\t20% 50%,\n\t\t\t\t\t100% 100%,\n\t\t\t\t\t0% 100%,\n\t\t\t\t\t0% 0%\n\t\t\t\t);\n\t\t}\n\n\t\t&.outlined::after {\n\t\t\tclip-path:\n\t\t\t\tpolygon(\n\t\t\t\t\t0% 0%,\n\t\t\t\t\t100% 0%,\n\t\t\t\t\t20% 50%,\n\t\t\t\t\t100% 100%,\n\t\t\t\t\t0% 100%,\n\t\t\t\t\t0% calc(100% - 1px),\n\t\t\t\t\tcalc(100% - 2px) calc(100% - 1px),\n\t\t\t\t\tcalc(20% - 1px) 50%,\n\t\t\t\t\tcalc(100% - 2px) calc(0% + 1px),\n\t\t\t\t\t0% calc(0% + 1px),\n\t\t\t\t\t0% 0%\n\t\t\t\t);\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"sourceRoot":""}