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

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Input/src/InputControl.vue"],"names":[],"mappings":"AA0HA,mBACA,mCAAA,CACA,6CAAA,CACA,oCAAA,CACA,kCAAA,CACA,gCAAA,CACA,4CAAA,CACA,mBAAA,CACA,qBAAA,CACA,2CAAA,CACA,mBAAA,CACA,0BAAA,CACA,yBACA,CAEA,mBACA,uBAAA,CACA,6BAAA,CACA,oCAAA,CACA,kCAAA,CACA,gCAAA,CACA,4CAAA,CACA,mBAAA,CACA,qBAAA,CACA,mBAAA,CACA,mBAAA,CACA,+BAAA,CACA,oCACA,CAEA,mBACA,YAAA,CACA,kBAAA,CACA,kBAAA,CACA,8BAAA,CACA,iBAAA,CACA,4BAAA,CACA,qBAAA,CACA,cAAA,CACA,iBASA,CAPA,qCACA,iBACA,CAEA,qCACA,gBACA,CAGA,mBACA,YAAA,CACA,kBAAA,CACA,qBAAA,CACA,UAAA,CACA,WAAA,CACA,cAAA,CACA,6BAAA,CACA,cAAA,CACA,mBAAA,CACA,8BAAA,CACA,wCAAA,CACA,oCAAA,CACA,kCAAA,CACA,gCA8BA,CA5BA,yEACA,sCACA,CAEA,qCACA,2BAAA,CACA,iDAAA,CACA,gCAAA,CACA,kBAKA,CAHA,wDACA,2BACA,CAGA,iCACA,8CACA,CAEA,iFACA,8CAAA,CACA,sCAAA,CACA,8BACA,CAEA,qCACA,+BACA,CAGA,mBACA,WAAA,CACA,kBAAA,CACA,aAAA,CACA,iBAAA,CACA,mBAAA,CACA,sBAAA,CACA,4BAAA,CACA,WAAA,CACA,qBAAA,CACA,YAAA,CACA,eAAA,CACA,cAAA,CACA,uBAAA,CAAA,eAmBA,CAjBA,gCACA,8BACA,CAGA,yCACA,2BACA,CAGA,qCACA,eACA,CAEA,qCACA,gBACA","file":"styles.css","sourcesContent":["<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.InputContainer,\n\t\t\t$s[`variant_${variant}`],\n\t\t\t{\n\t\t\t\t[$s.disabled]: disabled,\n\t\t\t\t[$s.invalid]: invalid,\n\t\t\t},\n\t\t]\"\n\t\t@click=\"focus\"\n\t>\n\t\t<span\n\t\t\tv-if=\"$slots.prefix\"\n\t\t\t:class=\"[\n\t\t\t\t$s.Affix,\n\t\t\t\t$s.Prefix,\n\t\t\t]\"\n\t\t>\n\t\t\t<!-- @slot Input prefix -->\n\t\t\t<slot name=\"prefix\" />\n\t\t</span>\n\t\t<input\n\t\t\tref=\"input\"\n\t\t\t:class=\"[\n\t\t\t\t$s.Input,\n\t\t\t\t$s[`align_${align}`],\n\t\t\t]\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"$listeners\"\n\t\t\t@input=\"$emit('input:update', $event.target.value)\"\n\t\t>\n\t\t<span\n\t\t\tv-if=\"$slots.suffix\"\n\t\t\t:class=\"[\n\t\t\t\t$s.Affix,\n\t\t\t\t$s.Suffix,\n\t\t\t]\"\n\t\t>\n\t\t\t<!-- @slot Input suffix -->\n\t\t\t<slot name=\"suffix\" />\n\t\t</span>\n\t</div>\n</template>\n\n<script>\n/**\n * Input control\n * @inheritAttrs input[type=\"text\"]\n * @inheritListeners input[type=\"text\"]\n */\nexport default {\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tevent: 'input:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Input variant\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'fill',\n\t\t\tvalidator: (variant) => ['fill', 'outline'].includes(variant),\n\t\t},\n\t\t/**\n\t\t * Toggles input disabled state\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Toggles input 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 * Aligns text within input\n\t\t */\n\t\talign: {\n\t\t\ttype: String,\n\t\t\tdefault: 'left',\n\t\t\tvalidator: (align) => ['left', 'right'].includes(align),\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setCustomValidity();\n\t},\n\n\tupdated() {\n\t\tthis.setCustomValidity();\n\t},\n\n\tmethods: {\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus();\n\t\t},\n\t\tblur() {\n\t\t\tthis.$refs.input.blur();\n\t\t},\n\t\tsetCustomValidity() {\n\t\t\tconst customValidity = this.invalid ? 'invalid' : '';\n\t\t\t// sets element's internal :invalid flag\n\t\t\tthis.$refs.input.setCustomValidity(customValidity);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n/*\n\tMost (if not all) of these should be provided\n\tby the Theme Context, but this is a placeholder\n\tuntil we get a Theme Context component\n*/\n.variant_fill {\n\t--color-background: rgba(0, 0, 0, 0.05);\n\t--color-background-focus: rgb(255, 255, 255, 0.95);\n\t--color-placeholder: rgba(0, 0, 0, 0.55);\n\t--color-foreground: rgba(0, 0, 0, 0.9);\n\t--color-disabled: rgba(0, 0, 0, 0.3);\n\t--color-background-disabled: rgba(0, 0, 0, 0.05);\n\t--color-accent: #222;\n\t--color-error: rgba(206, 50, 23, 1);\n\t--focus-shadow: 0 0 0 2px rgba(34, 34, 34, 0.3);\n\t--border-radius: 8px;\n\t--border-color: transparent;\n\t--border-color-hover: #222;\n}\n\n.variant_outline {\n\t--color-background: #fff;\n\t--color-background-focus: #fff;\n\t--color-placeholder: rgba(0, 0, 0, 0.55);\n\t--color-foreground: rgba(0, 0, 0, 0.9);\n\t--color-disabled: rgba(0, 0, 0, 0.3);\n\t--color-background-disabled: rgba(0, 0, 0, 0.05);\n\t--color-accent: #222;\n\t--color-error: rgba(206, 50, 23, 1);\n\t--focus-shadow: none;\n\t--border-radius: 8px;\n\t--border-color: rgba(0, 0, 0, 0.15);\n\t--border-color-hover: rgba(0, 0, 0, 0.3);\n}\n\n.Affix {\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: inherit;\n\tcolor: var(--color-placeholder);\n\tfont-size: inherit;\n\tbackground-color: transparent;\n\tborder-radius: inherit;\n\tcursor: inherit;\n\tfill: currentColor;\n\n\t&.Prefix {\n\t\tpadding-right: 8px;\n\t}\n\n\t&.Suffix {\n\t\tpadding-left: 8px;\n\t}\n}\n\n.InputContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 48px;\n\tpadding: 0 16px;\n\tcolor: var(--color-foreground);\n\tfont-size: 16px;\n\tfont-family: inherit;\n\tfont-family: var(--font-family);\n\tbackground-color: var(--color-background);\n\tborder: 1px solid var(--border-color);\n\tborder-radius: var(--border-radius);\n\ttransition: border-color 0.2s ease;\n\n\t&:not(.disabled, .invalid):hover {\n\t\tborder-color: var(--border-color-hover);\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--color-disabled);\n\t\tbackground-color: var(--color-background-disabled);\n\t\tborder-color: var(--border-color);\n\t\tcursor: not-allowed;\n\n\t\t& .Affix {\n\t\t\tcolor: var(--color-disabled);\n\t\t}\n\t}\n\n\t&:focus-within {\n\t\tbackground-color: var(--color-background-focus);\n\t}\n\n\t&:focus-within:not(.invalid, .disabled) {\n\t\tbackground-color: var(--color-background-focus);\n\t\tborder-color: var(--border-color-hover);\n\t\tbox-shadow: var(--focus-shadow);\n\t}\n\n\t&.invalid {\n\t\tborder-color: var(--color-error);\n\t}\n}\n\n.Input {\n\tflex-grow: 1;\n\tbox-sizing: inherit;\n\tcolor: inherit;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\ttext-overflow: ellipsis;\n\tbackground-color: transparent;\n\tborder: none;\n\tborder-radius: inherit;\n\toutline: none;\n\tbox-shadow: none;\n\tcursor: inherit;\n\tappearance: none;\n\n\t&::placeholder {\n\t\tcolor: var(--color-placeholder);\n\t}\n\n\t&:disabled {\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-disabled);\n\t\t}\n\t}\n\n\t&.align_left {\n\t\ttext-align: left;\n\t}\n\n\t&.align_right {\n\t\ttext-align: right;\n\t}\n}\n</style>\n"]}