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

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Radio/src/RadioControl.vue"],"names":[],"mappings":"AAqFA,mBACA,oBAAA,CACA,aAAA,CAMA,8BAAA,CACA,uCAAA,CACA,4BAAA,CACA,6BAAA,CACA,qBAAA,CACA,iCAAA,CACA,sCACA,CAEA,sCAdA,cAAA,CACA,wBAAA,CAAA,gBAmEA,CAtDA,mBACA,qBAAA,CACA,UAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,qBAAA,CACA,wCAAA,CACA,oCAAA,CACA,iBAAA,CACA,YAAA,CAEA,oCAAA,CACA,uBAAA,CAAA,eAyCA,CAtCA,yBACA,aAAA,CACA,SAAA,CACA,UAAA,CACA,UAAA,CACA,wCAAA,CACA,iBACA,CAEA,2BACA,kCAAA,CACA,8BAKA,CAHA,iCACA,UACA,CAGA,4BACA,sCAAA,CACA,kCAAA,CACA,kBACA,CAEA,2BACA,+BACA,CAEA,mCACA,mCAAA,CACA,+BACA,CAEA,mKAGA,+BACA","file":"styles.css","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\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},\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: 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-background: rgba(255, 255, 255, 0.95);\n\t--color-fill: rgba(0, 0, 0, 0.9);\n\t--color-focus: rgba(0, 0, 0, 0.9);\n\t--color-error: rgba(206, 50, 23, 1);\n\t--color-disabled: rgba(0, 0, 0, 0.05);\n\t--color-disabled-fill: rgba(0, 0, 0, 0.15);\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: var(--color-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 50%;\n\toutline: none;\n\tcursor: pointer;\n\ttransition: background-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: var(--color-background);\n\t\tborder-radius: 50%;\n\t}\n\n\t&:checked {\n\t\tbackground-color: var(--color-fill);\n\t\tborder-color: var(--color-fill);\n\n\t\t&::after {\n\t\t\tcontent: \"\";\n\t\t}\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&: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-focus);\n\t}\n}\n</style>\n"]}