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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA6FA,gBAQA,qDACA,kDACA,4CACA,oDAVA,qBACA,aAUA,CAEA,gCAXA,eACA,yCA4DA,CAlDA,gBAeA,wCAPA,qCAPA,sBAEA,YACA,SAMA,aALA,UAOA,oDAEA,CARA,sBAJA,UAgDA,CAhCA,sCAXA,oDAEA,iBAgBA,CAPA,sBACA,cAEA,WACA,WAFA,SAKA,CAEA,wBACA,qCACA,gCAKA,CAHA,8BACA,UACA,CAGA,wBACA,+BACA,CAEA,gCACA,oCACA,+BACA,CAEA,2IAGA,sCACA","sources":["webpack://@square/maker/./src/components/Radio/src/RadioControl.vue"],"sourcesContent":["<template>\n\t<div :class=\"$s.RadioContainer\">\n\t\t<input\n\t\t\tref=\"radio\"\n\t\t\tv-model=\"checkVal\"\n\t\t\ttype=\"radio\"\n\t\t\t:class=\"$s.Radio\"\n\t\t\t:value=\"value\"\n\t\t\t:checked=\"isChecked\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"$listeners\"\n\t\t>\n\t</div>\n</template>\n\n<script>\n/**\n * Radio control\n * @inheritAttrs input[type=\"radio\"]\n * @inheritListeners input[type=\"radio\"]\n */\nexport default {\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'selected',\n\t\tevent: 'radio:update',\n\t},\n\n\tprops: {\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\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Toggles radio's selected state\n\t\t */\n\t\tselected: {\n\t\t\ttype: undefined,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Toggles radio's invalid state\n\t\t */\n\t\tinvalid: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Toggles radio disabled state\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisChecked() {\n\t\t\treturn this.selected === this.value;\n\t\t},\n\t\tcheckVal: {\n\t\t\tget() {\n\t\t\t\treturn this.selected;\n\t\t\t},\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('radio: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.radio.setCustomValidity(this.invalid ? 'invalid' : '');\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.RadioContainer {\n\tdisplay: inline-block;\n\tline-height: 0;\n\tcursor: inherit;\n\tuser-select: none;\n\n\t/* these should later be pulled from\n\tthe ThemeProvider component */\n\t--color-border: $maker-color-neutral-20;\n\t--color-border-focus: $maker-color-body;\n\t--color-active: $maker-color-body;\n\t--color-error: $maker-color-error-fill;\n}\n\n.Radio {\n\tbox-sizing: border-box;\n\twidth: 20px;\n\theight: 20px;\n\tmargin: 0;\n\tpadding: 0;\n\tvertical-align: middle;\n\tbackground-color: $maker-color-background;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 50%;\n\toutline: none;\n\tcursor: inherit;\n\ttransition:\n\t\tborder 0.2s ease,\n\t\tbackground-color 0.2s ease;\n\tappearance: none;\n\tuser-select: none;\n\n\t&::after {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t\theight: 6px;\n\t\tmargin: 6px;\n\t\tbackground-color: $maker-color-background;\n\t\tborder-radius: 50%;\n\t}\n\n\t&:checked {\n\t\tbackground-color: var(--color-active);\n\t\tborder-color: var(--color-active);\n\n\t\t&::after {\n\t\t\tcontent: \"\";\n\t\t}\n\t}\n\n\t&:invalid {\n\t\tborder-color: var(--color-error);\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\t&:hover:not(:disabled, :invalid),\n\t&:focus:not(:disabled, :invalid),\n\t&:active:not(:disabled, :invalid) {\n\t\tborder-color: var(--color-border-focus);\n\t}\n}\n</style>\n"],"names":[],"sourceRoot":""}