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

📚 Maker Design System by Square

{"version":3,"sources":["webpack://../components/Select/src/SelectControl.vue"],"names":[],"mappings":"AAwJA,mBACA,mCAAA,CACA,6CAAA,CACA,kCAAA,CACA,gCAAA,CACA,4CAAA,CACA,mBAAA,CACA,0BAAA,CACA,0BAAA,CACA,qBAGA,CAEA,sCAJA,2CAAA,CACA,mBAgBA,CAbA,mBACA,uBAAA,CACA,6BAAA,CACA,kCAAA,CACA,gCAAA,CACA,4CAAA,CACA,mBAAA,CACA,+BAAA,CACA,qCAAA,CACA,qBAAA,CAGA,mBACA,CAEA,mBACA,iBAAA,CACA,qBAAA,CACA,cAAA,CACA,cAAA,CACA,mBAAA,CACA,8BAAA,CACA,kCACA,CAEA,mBACA,iBAAA,CACA,OAAA,CACA,SAAA,CACA,aAAA,CACA,0BAAA,CACA,mBACA,CAEA,mBACA,kBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,eAAA,CACA,6BAAA,CACA,iBAAA,CACA,mBAAA,CACA,kBAAA,CACA,sBAAA,CACA,wCAAA,CACA,oCAAA,CACA,qBAAA,CACA,YAAA,CACA,cAAA,CACA,gCAAA,CACA,uBAAA,CAAA,eAmCA,CAjCA,qCAEA,iBACA,CAEA,qCACA,6BACA,CAEA,sDACA,uCACA,CAEA,6GAEA,8CAAA,CACA,uCAAA,CACA,8BACA,CAEA,4BACA,2BAAA,CACA,iDAAA,CACA,kBACA,CAEA,2BACA,+BACA,CAEA,+BACA,YACA,CAGA,mBACA,iBAAA,CACA,OAAA,CACA,UAAA,CACA,UAAA,CACA,WAAA,CACA,2BAAA,CACA,0BAAA,CACA,mBACA","file":"styles.css","sourcesContent":["<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.SelectContainer,\n\t\t\t$s[`variant_${variant}`],\n\t\t]\"\n\t>\n\t\t<span\n\t\t\tv-if=\"$slots.prefix\"\n\t\t\t:class=\"$s.Prefix\"\n\t\t>\n\t\t\t<!-- @slot Select prefix -->\n\t\t\t<slot name=\"prefix\" />\n\t\t</span>\n\t\t<select\n\t\t\tref=\"select\"\n\t\t\tv-model=\"selected\"\n\t\t\t:class=\"[\n\t\t\t\t$s.Select,\n\t\t\t\t{\n\t\t\t\t\t[$s.selected]: optionSelected,\n\t\t\t\t\t[$s.invalid]: invalid,\n\t\t\t\t\t[$s.hasPrefix]: $slots.prefix,\n\t\t\t\t},\n\t\t\t]\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"$listeners\"\n\t\t>\n\t\t\t<option\n\t\t\t\tv-if=\"placeholder\"\n\t\t\t\t:value=\"placeholderValue\"\n\t\t\t\tdisabled\n\t\t\t>\n\t\t\t\t{{ placeholder }}\n\t\t\t</option>\n\t\t\t<option\n\t\t\t\tv-for=\"option in options\"\n\t\t\t\t:key=\"option.value\"\n\t\t\t\t:value=\"option.value\"\n\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t:selected=\"option.value === value\"\n\t\t\t>\n\t\t\t\t{{ option.label }}\n\t\t\t</option>\n\t\t</select>\n\t\t<chevron-down-icon :class=\"$s.Icon\" />\n\t</div>\n</template>\n\n<script>\nimport ChevronDownIcon from '@square/maker-icons/ChevronDown';\n\n/**\n * @inheritAttrs select\n * @inheritListeners select\n */\nexport default {\n\tcomponents: {\n\t\tChevronDownIcon,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'value',\n\t\tevent: 'select:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Select 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 * current selected value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Select placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Select options\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Toggles select 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\tselected: {\n\t\t\tget() {\n\t\t\t\treturn this.value;\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\tthis.$emit('select:update', value);\n\t\t\t\treturn value;\n\t\t\t},\n\t\t},\n\n\t\toptionSelected() {\n\t\t\treturn this.options.find((opt) => opt.value === this.value);\n\t\t},\n\n\t\tplaceholderValue() {\n\t\t\t// This will return the current value if its not a valid option\n\t\t\treturn !this.optionSelected ? this.value : undefined;\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\tsetCustomValidity() {\n\t\t\tconst customValidity = this.invalid ? 'invalid' : '';\n\t\t\t// sets element's internal :invalid flag\n\t\t\tthis.$refs.select.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-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-border: transparent;\n\t--color-border-active: #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}\n\n.variant_outline {\n\t--color-background: #fff;\n\t--color-background-focus: #fff;\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-border: rgba(0, 0, 0, 0.15);\n\t--color-border-active: rgba(0, 0, 0, 0.3);\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--focus-shadow: none;\n}\n\n.SelectContainer {\n\tposition: relative;\n\tbox-sizing: border-box;\n\tmin-width: 80px;\n\tfont-size: 16px;\n\tfont-family: inherit;\n\tfont-family: var(--font-family);\n\tborder-radius: var(--border-radius);\n}\n\n.Prefix {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 16px;\n\tline-height: 0;\n\ttransform: translateY(-50%);\n\tpointer-events: none;\n}\n\n.Select {\n\tbox-sizing: inherit;\n\twidth: 100%;\n\theight: 48px;\n\tpadding: 0 32px 0 16px;\n\toverflow: hidden;\n\tcolor: var(--color-foreground);\n\tfont-size: inherit;\n\tfont-family: inherit;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tbackground-color: var(--color-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: inherit;\n\toutline: none;\n\tcursor: pointer;\n\ttransition: border-color 0.2s ease;\n\tappearance: none;\n\n\t&.hasPrefix {\n\t\t/* select left padding + icon width + icon right padding */\n\t\tpadding-left: calc(16px + 16px + 8px);\n\t}\n\n\t&.selected {\n\t\tcolor: var(--color-foreground);\n\t}\n\n\t&:not(:disabled, :invalid):hover {\n\t\tborder-color: var(--color-border-active);\n\t}\n\n\t&:not(:disabled, :invalid):focus,\n\t&:not(:disabled, :invalid):active {\n\t\tbackground-color: var(--color-background-focus);\n\t\tborder-color: var(--color-border-active);\n\t\tbox-shadow: var(--focus-shadow);\n\t}\n\n\t&:disabled {\n\t\tcolor: var(--color-disabled);\n\t\tbackground-color: var(--color-background-disabled);\n\t\tcursor: not-allowed;\n\t}\n\n\t&:invalid {\n\t\tborder-color: var(--color-error);\n\t}\n\n\t&::-ms-expand {\n\t\tdisplay: none;\n\t}\n}\n\n.Icon {\n\tposition: absolute;\n\ttop: 50%;\n\tright: 16px;\n\twidth: 16px;\n\theight: 16px;\n\tcolor: var(--color-disabled);\n\ttransform: translateY(-50%);\n\tpointer-events: none;\n}\n</style>\n"]}