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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA2CA,gBACA,4BACA,0BAQA,yBACA,YACA,0DAPA,4CASA,eAVA,WAIA,oBADA,kBADA,oBAGA,oBAIA,YAEA,CAEA,gBACA,uCACA,CAEA,gBACA,0CACA,CAEA,gBACA,eACA,CAEA,gBAEA,mDACA,+BAFA,2CAGA,CCVA,gBACA,4BACA,0BAUA,uDACA,0DARA,sBADA,aAMA,wDADA,eADA,oDAFA,YAKA,iBAJA,WAOA,CAEA,gBACA,uCACA,CAEA,gBACA,0CACA,CAEA,gBACA,eACA,CAEA,gBAGA,eAFA,YAGA,iBAFA,WAGA","sources":["webpack://@square/maker/./src/components/SegmentedControl/src/Segment.vue","webpack://@square/maker/./src/components/SegmentedControl/src/SegmentedControl.vue"],"sourcesContent":["<template>\n\t<button\n\t\tv-bind=\"$attrs\"\n\t\t:class=\"[\n\t\t\t$s.Segment,\n\t\t\t$s[`shape_${controlState.shapeInner}`],\n\t\t\t$s[`size_${controlState.sizeInner}`],\n\t\t\t{ [$s.selected]: isSelected },\n\t\t]\"\n\t\tv-on=\"$listeners\"\n\t\t@click=\"selectSelf\"\n\t>\n\t\t<slot />\n\t</button>\n</template>\n\n<script>\nimport key from './key';\n\nexport default {\n\tinject: {\n\t\tcontrolState: key,\n\t},\n\tprops: {\n\t\tvalue: {\n\t\t\ttype: undefined,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tcomputed: {\n\t\tisSelected() {\n\t\t\treturn this.controlState.currentValue === this.value;\n\t\t},\n\t},\n\tmethods: {\n\t\tselectSelf() {\n\t\t\tthis.controlState.currentValue = this.value;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Segment {\n\t--radius-rounded-button: 8px;\n\t--radius-pill-button: 32px;\n\n\tflex: 1 0 0;\n\tcolor: $maker-color-neutral-90;\n\tfont-weight: inherit;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tline-height: inherit;\n\tbackground-color: transparent;\n\tborder: none;\n\tborder-radius: $maker-shape-button-border-radius;\n\toutline: none;\n\tcursor: pointer;\n}\n\n.shape_pill {\n\tborder-radius: var(--radius-pill-button);\n}\n\n.shape_rounded {\n\tborder-radius: var(--radius-rounded-button);\n}\n\n.shape_squared {\n\tborder-radius: 0;\n}\n\n.selected {\n\tcolor: $maker-color-neutral-90;\n\tbackground-color: $maker-color-elevation;\n\tbox-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);\n}\n</style>\n","<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.SegmentedControl,\n\t\t\t$s[`shape_${shapeInner}`],\n\t\t\t$s[`size_${sizeInner}`],\n\t\t]\"\n\t>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport key from './key';\n\nexport default {\n\tprovide() {\n\t\treturn {\n\t\t\t[key]: this.$data,\n\t\t};\n\t},\n\tmodel: {\n\t\tprop: 'selected',\n\t\tevent: 'segmented-control:update',\n\t},\n\tprops: {\n\t\t/**\n\t\t * Selected Segment inside Control\n\t\t */\n\t\tselected: {\n\t\t\ttype: undefined,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shape of Control & Segments\n\t\t */\n\t\tshape: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (shape) => ['squared', 'rounded', 'pill'].includes(shape),\n\t\t},\n\t\t/**\n\t\t * Size of Control & Segments\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'medium',\n\t\t\tvalidator: (size) => ['small', 'medium'].includes(size),\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcurrentValue: this.selected,\n\t\t\tsizeInner: this.size,\n\t\t\tshapeInner: this.shape,\n\t\t};\n\t},\n\twatch: {\n\t\tcurrentValue(newValue) {\n\t\t\tthis.$emit('segmented-control:update', newValue);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.SegmentedControl {\n\t--radius-rounded-button: 8px;\n\t--radius-pill-button: 32px;\n\n\tdisplay: flex;\n\tbox-sizing: border-box;\n\theight: 48px;\n\tpadding: 4px;\n\tfont-weight: $maker-font-label-font-weight;\n\tfont-size: 14px;\n\tfont-family: $maker-font-label-font-family;\n\tline-height: 24px;\n\tbackground-color: $maker-color-neutral-10;\n\tborder-radius: $maker-shape-button-border-radius;\n}\n\n.shape_pill {\n\tborder-radius: var(--radius-pill-button);\n}\n\n.shape_rounded {\n\tborder-radius: var(--radius-rounded-button);\n}\n\n.shape_squared {\n\tborder-radius: 0;\n}\n\n.size_small {\n\theight: 32px;\n\tpadding: 2px;\n\tfont-size: 12px;\n\tline-height: 16px;\n}\n</style>\n"],"names":[],"sourceRoot":""}