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

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Checkbox/src/CheckboxControl.vue"],"names":[],"mappings":"AAoFA,mBACA,iBAAA,CACA,oBAAA,CACA,aAAA,CACA,cAAA,CACA,wBAAA,CAAA,gBAAA,CAIA,8BAAA,CACA,qCAAA,CACA,kCAAA,CACA,uCAAA,CACA,iCAAA,CACA,yCAAA,CACA,qBACA,CAEA,mBACA,qBAAA,CACA,UAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,qBAAA,CACA,oCAAA,CACA,iBAAA,CACA,YAAA,CACA,cAAA,CACA,oCAAA,CACA,uBAAA,CAAA,eA8BA,CA5BA,2BACA,+BACA,CAEA,4BACA,sCAAA,CACA,kCAAA,CACA,kBACA,CAEA,2BACA,wCAEA,CAEA,iFAHA,uCAKA,CAEA,oCACA,8CAAA,CACA,kCACA,CAEA,mCACA,mCAAA,CACA,+BACA,CAGA,mBACA,iBAAA,CACA,OAAA,CACA,QAAA,CACA,UAAA,CACA,WAAA,CACA,SAAA,CACA,2BAAA,CACA,mBAAA,CACA,SAAA,CACA,8BAAA,CACA,gBAAA,CACA,oBAAA,CACA,qBACA,CAEA,8CACA,SACA","file":"styles.css","sourcesContent":["<template>\n\t<div :class=\"$s.CheckboxContainer\">\n\t\t<input\n\t\t\tref=\"checkbox\"\n\t\t\tv-model=\"checkVal\"\n\t\t\t:value=\"value\"\n\t\t\ttype=\"checkbox\"\n\t\t\t:class=\"$s.Checkbox\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"$listeners\"\n\t\t>\n\t\t<svg :class=\"$s.Check\">\n\t\t\t<path d=\"M1 4L5.5 8.5L13 1\" />\n\t\t</svg>\n\t</div>\n</template>\n\n<script>\n/**\n * Checkbox control\n * @inheritAttrs input[type=\"checkbox\"]\n * @inheritListeners input[type=\"checkbox\"]\n */\nexport default {\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'checked',\n\t\tevent: 'checkbox:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Toggles checkbox checked state\n\t\t */\n\t\tchecked: {\n\t\t\ttype: [Boolean, Array],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Value to return from v-model\n\t\t */\n\t\tvalue: {\n\t\t\ttype: undefined,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Toggles checkbox invalid state\n\t\t */\n\t\tinvalid: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcheckVal: {\n\t\t\tget() {\n\t\t\t\treturn this.checked;\n\t\t\t},\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('checkbox:update', newValue);\n\t\t\t},\n\t\t},\n\t},\n\n\twatch: {\n\t\tinvalid: 'setCustomValidity',\n\t},\n\n\tmounted() {\n\t\tthis.setCustomValidity();\n\t},\n\n\tmethods: {\n\t\t// sets element's internal :invalid flag\n\t\tsetCustomValidity() {\n\t\t\tthis.$refs.checkbox.setCustomValidity(this.invalid ? 'invalid' : '');\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.CheckboxContainer {\n\tposition: relative;\n\tdisplay: inline-block;\n\tline-height: 0;\n\tcursor: pointer;\n\tuser-select: none;\n\n\t/* these should later be pulled from\n\tthe ThemeProvider component */\n\t--color-border: rgba(0, 0, 0, 0.3);\n\t--color-border-active: rgba(0, 0, 0, 0.9);\n\t--color-background: rgba(0, 0, 0, 0.9);\n\t--color-foreground: rgba(255, 255, 255, 0.95);\n\t--color-disabled: rgba(0, 0, 0, 0.05);\n\t--color-disabled-checked: rgba(0, 0, 0, 0.15);\n\t--color-error: rgba(206, 50, 23, 1);\n}\n\n.Checkbox {\n\tbox-sizing: border-box;\n\twidth: 20px;\n\theight: 20px;\n\tmargin: 0;\n\tpadding: 0;\n\tbackground-color: #fff;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 4px;\n\toutline: none;\n\tcursor: inherit;\n\ttransition: background-color 0.2s ease;\n\tappearance: none;\n\n\t&:invalid {\n\t\tborder-color: var(--color-error);\n\t}\n\n\t&:disabled {\n\t\tbackground-color: var(--color-disabled);\n\t\tborder-color: var(--color-disabled);\n\t\tcursor: not-allowed;\n\t}\n\n\t&:checked {\n\t\tbackground-color: var(--color-background);\n\t\tborder-color: var(--color-border-active);\n\t}\n\n\t&:hover:not(:disabled, :invalid) {\n\t\tborder-color: var(--color-border-active);\n\t}\n\n\t&:checked:disabled {\n\t\tbackground-color: var(--color-disabled-checked);\n\t\tborder-color: var(--color-disabled);\n\t}\n\n\t&:checked:invalid {\n\t\tbackground-color: var(--color-error);\n\t\tborder-color: var(--color-error);\n\t}\n}\n\n.Check {\n\tposition: absolute;\n\ttop: 5px;\n\tleft: 3px;\n\twidth: 14px;\n\theight: 14px;\n\topacity: 0;\n\ttransition: opacity 0.2s ease;\n\tpointer-events: none;\n\tfill: none;\n\tstroke: var(--color-foreground);\n\tstroke-width: 2px;\n\tstroke-linecap: round;\n\tstroke-linejoin: round;\n}\n\n.Checkbox:checked + .Check {\n\topacity: 1;\n}\n</style>\n"]}