1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 2× 2× 2× 2× 2× 32× 32× | "use strict"; var React = require("react"); var assign = require("object-assign"); var style = { swatches: { textAlign: "center", padding: "0", border: "1px solid rgba(0,0,0,0.1)", borderRadius: "4px", cursor: "pointer", display: "inline-block", width: "175px", verticalAlign: "top", wordWrap: "break-word", }, swatch: { height: "80px", borderRadius: "4px 4px 0 0", transition: "opacity 0.25s ease-in-out", borderBottom: "1px solid rgba(0,0,0,0.1)", }, listStyle: { listStyle: "none" }, pushBottom: { marginBottom: "10px" }, pushLeft: { marginLeft: "10px" }, soft: { paddingLeft: "10px", paddingRight: "10px" }, hard: { padding: "0" }, flush: { margin: "0" }, font: { fontFamily: "-apple-system, '.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif", fontSize: "14px", wordBreak: "break-word", }, }; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = function (_a) { var name = _a.name, value = _a.value, setBackground = _a.setBackground; return (React.createElement("div", {style: assign({}, style.swatches, style.listStyle, style.hard), onClick: function () { return setBackground(value); }}, React.createElement("div", {style: assign({}, style.swatch, { background: value, "backgroundSize": "cover", "backgroundPosition": "center", })}), React.createElement("div", {style: assign({}, style.listStyle, style.soft)}, React.createElement("h4", {style: assign({ float: "left", fontWeight: "bold" }, style.font)}, name, ":"), React.createElement("h4", {style: assign({ float: "right", fontWeight: "normal" }, style.font)}, React.createElement("em", null, value))))); }; //# sourceMappingURL=Swatch.js.map |