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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AAuIA,gBACA,yDACA,oBACA,CAEA,gBACA,sDACA,oDACA,CAEA,gBAUA,kBAPA,mBAIA,yBACA,sBAJA,mBACA,+BAIA,eAPA,aAIA,kBALA,SAoBA,CATA,+BACA,QACA,iBACA,CAEA,+BACA,QACA,gBACA,CAGA,gBACA,0DACA,yDACA,4DACA,oDAGA,mBAQA,8CACA,qCACA,2DATA,sBAKA,8BAPA,aAQA,eAJA,YAEA,gBADA,eAOA,iCATA,UAwBA,CAbA,6HAEA,uCACA,CAEA,+BACA,mBACA,UACA,CAEA,+BACA,+BACA,CAGA,gBAeA,wCALA,yBACA,YAEA,gBAVA,mBAEA,cASA,eAbA,YAOA,oBADA,kBADA,oBAJA,QAUA,aAHA,uBALA,UAoCA,CAvBA,6BACA,8BACA,CAEA,+BACA,eACA,CAEA,+BACA,gBACA,CAEA,uJAKA,gDADA,wFAEA,CAEA,iDACA,6BACA","sources":["webpack://@square/maker/./src/components/Input/src/InputControl.vue"],"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<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<!--\n\t\t\tBoth affix slots need to come after the input, so we can target\n\t\t\tthem with the sibling selector (~) to apply webkit autofill styles\n\t\t\twhich are not otherwise targetable.\n\t\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<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\t/**\n\t\t * focuses input\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus();\n\t\t},\n\t\t/**\n\t\t * blurs input\n\t\t * @public\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: $maker-color-neutral-10;\n\t--color-border: transparent;\n}\n\n.variant_outline {\n\t--color-background: $maker-color-background;\n\t--color-border: $maker-color-neutral-20;\n}\n\n.Affix {\n\tz-index: 1;\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\torder: 1;\n\t\tpadding-right: 8px;\n\t}\n\n\t&.Suffix {\n\t\torder: 3;\n\t\tpadding-left: 8px;\n\t}\n}\n\n.InputContainer {\n\t--color-placeholder: $maker-color-neutral-80;\n\t--color-foreground: $maker-color-neutral-90;\n\t--color-border-active: $maker-color-neutral-80;\n\t--color-error: $maker-color-error-fill;\n\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 48px;\n\tpadding: 0 16px;\n\toverflow: hidden;\n\tcolor: var(--color-foreground);\n\tfont-size: 16px;\n\tbackground-color: var(--color-background, #fff);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: $maker-shape-default-border-radius;\n\ttransition: border-color 0.2s ease;\n\n\t&:not(.disabled, .invalid):hover,\n\t&:not(.disabled, .invalid):focus-within {\n\t\tborder-color: var(--color-border-active);\n\t}\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t&.invalid {\n\t\tborder-color: var(--color-error);\n\t}\n}\n\n.Input {\n\tflex-grow: 1;\n\torder: 2;\n\tbox-sizing: inherit;\n\twidth: 100%;\n\tcolor: inherit;\n\tfont-weight: inherit;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\ttext-overflow: ellipsis;\n\tbackground-color: transparent;\n\tborder: none;\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&.align_left {\n\t\ttext-align: left;\n\t}\n\n\t&.align_right {\n\t\ttext-align: right;\n\t}\n\n\t&:-webkit-autofill,\n\t&:-webkit-autofill:hover,\n\t&:-webkit-autofill:focus,\n\t&:-webkit-autofill:active {\n\t\tbox-shadow: 0 0 0 48px var(--color-foreground) inset, 0 0 0 9999px var(--color-foreground);\n\t\t-webkit-text-fill-color: var(--color-background);\n\t}\n\n\t&:-webkit-autofill ~ .Affix {\n\t\tcolor: var(--color-background);\n\t}\n}\n</style>\n"],"names":[],"sourceRoot":""}