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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA6EA,gBAEA,oDACA,uBAGA,gBACA,kCACA,eAGA,cACA,eACA,iDACA,oCACA,6FACA,4DAgBA,wCANA,wDACA,qCAPA,sBAQA,eATA,qBAGA,uBACA,SACA,UANA,kBAWA,4EAEA,CAEA,0CARA,sBAJA,oBA6BA,CAfA,sBAQA,4CACA,sBAJA,sBAQA,WATA,cAGA,qBAJA,8BAFA,kBACA,kBAQA,oEAEA,CANA,mBAQA,CAIA,8BACA,2BACA,CAEA,yBAIA,4DAHA,uDACA,kDASA,CALA,iCAGA,yDAFA,sDAGA,CAGA,wBAIA,yCAHA,oDACA,+BASA,CALA,gCAGA,yDAFA,mCAGA,CAGA,wCAIA,4DAHA,oDACA,kDAkBA,CAdA,2IAKA,mDAFA,yCAGA,CAEA,gDAIA,yDAHA,8CACA,yCAGA","sources":["webpack://@square/maker/./src/components/Toggle/src/ToggleControl.vue"],"sourcesContent":["<template>\n\t<input\n\t\tref=\"checkbox\"\n\t\tv-model=\"toggleValue\"\n\t\ttype=\"checkbox\"\n\t\t:class=\"$s.Checkbox\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n</template>\n\n<script>\n/**\n * @inheritAttrs input[type=\"checkbox\"]\n * @inheritListeners input[type=\"checkbox\"]\n */\nexport default {\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'toggled',\n\t\tevent: 'toggle:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Current toggled state\n\t\t */\n\t\ttoggled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Toggles Toggle 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\ttoggleValue: {\n\t\t\tget() {\n\t\t\t\treturn this.toggled;\n\t\t\t},\n\t\t\tset(newValue) {\n\t\t\t\t/**\n\t\t\t\t * toggle's updated value\n\t\t\t\t * @property {boolean}\n\t\t\t\t */\n\t\t\t\tthis.$emit('toggle: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/* stylelint-disable no-descending-specificity */\n\n/* default unchecked state */\n.Checkbox {\n\t/* general vars */\n\t--color-error: $maker-color-error-fill;\n\t--transition: 0.2s ease;\n\n\t/* toggle vars */\n\t--t-height: 20px;\n\t--t-width: calc(2 * var(--t-height));\n\t--t-border: 1px;\n\n\t/* toggle ball vars */\n\t--tb-dim: 14px;\n\t--tb-inset: 3px;\n\t--tb-top: calc(var(--tb-inset) - var(--t-border));\n\t--tb-left-unchecked: var(--tb-inset);\n\t--tb-left-checked: calc(var(--t-width) - var(--tb-dim) - var(--tb-inset) - 2 * var(--t-border));\n\t--tb-background-color: $maker-color-neutral-20;\n\n\tposition: relative;\n\tdisplay: inline-block;\n\tbox-sizing: border-box;\n\twidth: var(--t-width);\n\theight: var(--t-height);\n\tmargin: 0;\n\tpadding: 0;\n\tvertical-align: middle;\n\tborder: var(--t-border) solid var(--tb-background-color);\n\tborder-radius: calc(var(--t-width) / 2);\n\tcursor: pointer;\n\ttransition:\n\t\tbackground-color var(--transition)\n\t\tborder-color var(--transition);\n\tappearance: none;\n\tuser-select: none;\n\n\t&::after {\n\t\tposition: absolute;\n\t\ttop: var(--tb-top);\n\t\tleft: var(--tb-left-unchecked);\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\twidth: var(--tb-dim);\n\t\theight: var(--tb-dim);\n\t\tbackground-color: var(--tb-background-color);\n\t\tborder-radius: inherit;\n\t\ttransition:\n\t\t\tleft var(--transition),\n\t\t\tbackground-color var(--transition);\n\t\tcontent: \"\";\n\t}\n}\n\n/* move toggle ball to the left */\n.Checkbox:checked::after {\n\tleft: var(--tb-left-checked);\n}\n\n.Checkbox:disabled {\n\tbackground-color: $maker-color-neutral-10;\n\tborder-color: $maker-color-neutral-20;\n\n\t--tb-background-color: $maker-color-neutral-20;\n\n\t&:checked {\n\t\tbackground-color: $maker-color-neutral-20;\n\n\t\t--tb-background-color: $maker-color-background;\n\t}\n}\n\n.Checkbox:invalid {\n\tbackground-color: $maker-color-background;\n\tborder-color: var(--color-error);\n\n\t--tb-background-color: var(--color-error);\n\n\t&:checked {\n\t\tbackground-color: var(--color-error);\n\n\t\t--tb-background-color: $maker-color-background;\n\t}\n}\n\n.Checkbox:not(:disabled, :invalid) {\n\tbackground-color: $maker-color-background;\n\tborder-color: $maker-color-neutral-20;\n\n\t--tb-background-color: $maker-color-neutral-20;\n\n\t&:hover,\n\t&:active,\n\t&:focus {\n\t\tborder-color: $maker-color-body;\n\n\t\t--tb-background-color: $maker-color-body;\n\t}\n\n\t&:checked {\n\t\tbackground-color: $maker-color-body;\n\t\tborder-color: $maker-color-body;\n\n\t\t--tb-background-color: $maker-color-background;\n\t}\n}\n</style>\n"],"names":[],"sourceRoot":""}