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

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Toggle/src/ToggleControl.vue"],"names":[],"mappings":"AAkFA,mBACA,iBAAA,CACA,oBAAA,CACA,aAAA,CACA,cAAA,CACA,wBAAA,CAAA,gBAAA,CAGA,gCAAA,CACA,gCAAA,CACA,iCAAA,CACA,iCAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CAGA,eAAA,CACA,iCAAA,CACA,cAAA,CAGA,aAAA,CACA,cAAA,CACA,gDAAA,CACA,mCAAA,CACA,4FAAA,CACA,2CACA,CAEA,mBACA,iBAAA,CACA,SACA,CAEA,mBACA,iBAAA,CACA,iBAAA,CACA,6BAAA,CACA,qBAAA,CACA,mBAAA,CACA,oBAAA,CACA,qBAAA,CACA,oEAeA,CAXA,yBACA,aAAA,CACA,UAAA,CACA,WAAA,CACA,2CAAA,CACA,qBAAA,CACA,yEAEA,CACA,UACA,CAGA,mBACA,iBAAA,CACA,oBAAA,CACA,qBAAA,CACA,oBAAA,CACA,sBAAA,CACA,qBAAA,CACA,4BAAA,CACA,oCAAA,CACA,4EAGA,CAEA,4CACA,0BAAA,CACA,yCACA,CAEA,iEACA,2BAAA,CAEA,wCACA,CAGA,+CACA,kCACA,CAEA,6DACA,sCAAA,CAEA,2CACA,CAEA,uDACA,sCACA,CAIA,8CACA,+BACA,CAEA,4DACA,mCAAA,CAEA,wCACA,CAEA,sDACA,mCACA,CAIA,mEACA,kCACA,CAEA,iFACA,mCAAA,CAEA,2CASA,CAPA,sQAGA,kCAAA,CAEA,2CACA,CAGA,2EACA,sCAAA,CACA,kCACA","file":"styles.css","sourcesContent":["<template>\n\t<div :class=\"$s.ToggleContainer\">\n\t\t<input\n\t\t\tref=\"checkbox\"\n\t\t\tv-model=\"toggleValue\"\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<div :class=\"$s.Toggle\">\n\t\t\t<div :class=\"$s.ToggleBall\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\n/**\n * Toggle control\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.ToggleContainer {\n\tposition: relative;\n\tdisplay: inline-block;\n\tline-height: 0;\n\tcursor: pointer;\n\tuser-select: none;\n\n\t/* general vars */\n\t--color-black-90: rgba(0, 0, 0, 0.9);\n\t--color-black-30: rgba(0, 0, 0, 0.3);\n\t--color-black-15: rgba(0, 0, 0, 0.15);\n\t--color-black-05: rgba(0, 0, 0, 0.05);\n\t--color-error: rgba(206, 50, 23, 1);\n\t--color-white: #fff;\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: var(--color-black-05);\n}\n\n.Checkbox {\n\tposition: absolute;\n\topacity: 0;\n}\n\n.ToggleBall {\n\tposition: absolute;\n\ttop: var(--tb-top);\n\tleft: var(--tb-left-unchecked);\n\tbox-sizing: border-box;\n\twidth: var(--tb-dim);\n\theight: var(--tb-dim);\n\tborder-radius: inherit;\n\ttransition:\n\t\tleft var(--transition),\n\t\tbackground-color var(--transition);\n\n\t&::after {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground-color: var(--tb-background-color);\n\t\tborder-radius: inherit;\n\t\ttransition:\n\t\t\ttransform var(--transition),\n\t\t\tbackground-color var(--transition);\n\t\tcontent: \"\";\n\t}\n}\n\n.Toggle {\n\tposition: relative;\n\tdisplay: inline-block;\n\tbox-sizing: border-box;\n\twidth: var(--t-width);\n\theight: var(--t-height);\n\tvertical-align: middle;\n\tborder: var(--t-border) solid;\n\tborder-radius: calc(var(--t-width) / 2);\n\ttransition:\n\t\tbackground-color var(--transition)\n\t\tborder-color var(--transition);\n}\n\n.Checkbox:focus + .Toggle {\n\toutline: 1px dotted #212121;\n\toutline: 5px auto -webkit-focus-ring-color;\n}\n\n.Checkbox:checked + .Toggle .ToggleBall {\n\tleft: var(--tb-left-checked);\n\n\t--tb-background-color: var(--color-white);\n}\n\n.Checkbox:disabled {\n\t& + .Toggle {\n\t\tborder-color: var(--color-black-05);\n\t}\n\n\t&:not(:checked) + .Toggle {\n\t\tbackground-color: var(--color-black-05);\n\n\t\t--tb-background-color: var(--color-black-15);\n\t}\n\n\t&:checked + .Toggle {\n\t\tbackground-color: var(--color-black-15);\n\t}\n}\n\n.Checkbox:invalid {\n\t& + .Toggle {\n\t\tborder-color: var(--color-error);\n\t}\n\n\t&:not(:checked) + .Toggle {\n\t\tbackground-color: var(--color-white);\n\n\t\t--tb-background-color: var(--color-error);\n\t}\n\n\t&:checked + .Toggle {\n\t\tbackground-color: var(--color-error);\n\t}\n}\n\n.Checkbox:not(:disabled, :invalid) {\n\t& + .Toggle {\n\t\tborder-color: var(--color-black-30);\n\t}\n\n\t&:not(:checked) + .Toggle {\n\t\tbackground-color: var(--color-white);\n\n\t\t--tb-background-color: var(--color-black-30);\n\n\t\t&:hover,\n\t\t&:active,\n\t\t&:focus {\n\t\t\tborder-color: var(--color-black-90);\n\n\t\t\t--tb-background-color: var(--color-black-90);\n\t\t}\n\t}\n\n\t&:checked + .Toggle {\n\t\tbackground-color: var(--color-black-90);\n\t\tborder-color: var(--color-black-90);\n\t}\n}\n</style>\n"]}