backpack-ui
Version:
Lonely Planet's Components
374 lines (341 loc) • 9.44 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require("babel-runtime/helpers/defineProperty");
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _mq = require("../../styles/mq");
var _mq2 = _interopRequireDefault(_mq);
var _timing = require("../../styles/timing");
var _timing2 = _interopRequireDefault(_timing);
var _typography = require("../../styles/typography");
var _color = require("../../utils/color");
var _mixins = require("../../utils/mixins");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var icons = {
triangle: {
base: encodeURIComponent("<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" fill=\"" + _colors2.default.textPrimary + "\"><path d=\"M32 6.857h-32l16 18.286z\"></path></svg>"),
light: encodeURIComponent("<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" fill=\"" + _colors2.default.bgPrimary + "\"><path d=\"M32 6.857h-32l16 18.286z\"></path></svg>")
}
};
var styles = {
base: {
appearance: "none",
WebkitAppearance: "none",
fontWeight: _typography.fontWeightLight,
borderRadius: 0,
borderStyle: "solid",
borderWidth: ".1rem",
height: "auto",
outline: 0,
transition: "border-color " + _timing2.default.fast + ", color " + _timing2.default.fast,
width: "100%"
},
size: {
tiny: {
fontSize: "11px",
paddingTop: 7 / 11 + "em",
paddingLeft: 7 / 11 + "em",
paddingRight: 7 / 11 + "em",
paddingBottom: 3 / 11 + "em"
},
small: {
fontSize: "11px",
paddingTop: "1em",
paddingLeft: "1em",
paddingRight: "1em",
paddingBottom: 7 / 11 + "em"
},
medium: {
fontSize: "13px",
paddingTop: 15 / 13 + "em",
paddingLeft: 15 / 13 + "em",
paddingRight: 15 / 13 + "em",
paddingBottom: 11 / 13 + "em"
},
large: {
fontSize: "15px",
paddingTop: 19 / 15 + "em",
paddingLeft: 19 / 15 + "em",
paddingRight: 19 / 15 + "em",
paddingBottom: "1em"
},
huge: {
fontSize: "16px",
paddingTop: 23 / 16 + "em",
paddingLeft: 20 / 16 + "em",
paddingRight: 20 / 16 + "em",
paddingBottom: 19 / 16 + "em"
}
},
theme: {
base: {
backgroundColor: _colors2.default.bgPrimary,
borderColor: (0, _color.darken)(_colors2.default.bgPrimary, 17),
color: _colors2.default.textPrimary,
":focus": {
borderColor: (0, _color.darken)(_colors2.default.borderPrimary, 20)
}
},
light: {
backgroundColor: "transparent",
borderColor: "rgba(" + (0, _color.rgb)(_colors2.default.bgPrimary) + ", .44)",
color: _colors2.default.bgPrimary,
":focus": {
borderColor: "rgba(" + (0, _color.rgb)(_colors2.default.bgPrimary) + ", .66)"
}
},
dark: {
backgroundColor: _colors2.default.bgPrimary,
borderColor: (0, _color.darken)(_colors2.default.bgPrimary, 17),
color: "rgba(" + (0, _color.rgb)(_colors2.default.textPrimary) + ", .72)",
":focus": {
borderColor: (0, _color.darken)(_colors2.default.borderPrimary, 20)
}
},
inputGroup: {
backgroundColor: _colors2.default.bgPrimary,
borderColor: "transparent",
borderRadius: 0,
borderWidth: 0,
color: _colors2.default.textPrimary,
":focus": {
borderColor: _colors2.default.bgPrimary
}
},
float: {
fontSize: "16px",
borderTop: "none",
borderLeft: "none",
borderRight: "none",
backgroundColor: "transparent",
boxShadow: "none",
paddingTop: "16px",
paddingBottom: "16px",
paddingLeft: 0,
borderBottom: 0,
":focus": (0, _mixins.outline)()
}
},
element: {
input: {
base: {},
size: {
tiny: {},
small: {},
medium: {},
large: {},
huge: {}
},
theme: {
base: {},
light: {},
dark: {},
inputGroup: (0, _defineProperty3.default)({
paddingTop: "4rem",
paddingLeft: "2rem",
paddingRight: "2rem",
paddingBottom: "1.3rem"
}, "@media (min-width: " + _mq2.default.min[768] + ")", {
paddingTop: "3.5rem",
paddingLeft: "1.5rem",
paddingRight: "1.5rem",
paddingBottom: "1rem"
})
}
},
dateInput: {
base: {
cursor: "text",
userSelect: "none",
":focus": {
borderColor: "currentColor",
color: _colors2.default.linkPrimary
}
},
theme: {
base: {
":focus": {
borderColor: (0, _color.darken)(_colors2.default.bgPrimary, 17)
}
},
light: {
":focus": {
borderColor: "rgba(" + (0, _color.rgb)(_colors2.default.bgPrimary) + ", .44)"
}
},
dark: {
":focus": {
borderColor: (0, _color.darken)(_colors2.default.bgPrimary, 17)
}
},
inputGroup: {
":focus": {
borderColor: "transparent"
}
}
}
},
select: {
base: {
backgroundRepeat: "no-repeat",
cursor: "pointer"
},
size: {
tiny: {
backgroundPosition: "calc(100% - .7rem) center",
backgroundSize: ".6rem"
},
small: {
backgroundPosition: "calc(100% - 1.1rem) center",
backgroundSize: ".8rem"
},
medium: {
backgroundPosition: "calc(100% - 1.5rem) center",
backgroundSize: ".8rem"
},
large: {
backgroundPosition: "calc(100% - 1.9rem) center",
backgroundSize: "1rem"
},
huge: {
backgroundPosition: "calc(100% - 2.3rem) center",
backgroundSize: "1.2rem"
}
},
theme: {
base: {
backgroundImage: "url(\"data:image/svg+xml;charset=UTF-8," + icons.triangle.base + "\")"
},
light: {
backgroundImage: "url(\"data:image/svg+xml;charset=UTF-8," + icons.triangle.light + "\")"
},
dark: {
backgroundImage: "url(\"data:image/svg+xml;charset=UTF-8," + icons.triangle.base + "\")"
},
inputGroup: (0, _defineProperty3.default)({
backgroundImage: "url(\"data:image/svg+xml;charset=UTF-8," + icons.triangle.base + "\")",
backgroundPosition: "calc(100% - 2rem) 4.5rem",
paddingTop: "4rem",
paddingLeft: "2rem",
paddingRight: "2rem",
paddingBottom: "1.3rem"
}, "@media (min-width: " + _mq2.default.min[768] + ")", {
backgroundPosition: "calc(100% - 2rem) 3.5rem",
paddingTop: "3.5rem",
paddingLeft: "1.5rem",
paddingRight: "1.5rem",
paddingBottom: "1rem"
})
}
},
textarea: {
base: {
resize: "none",
verticalAlign: "bottom"
},
size: {
tiny: {},
small: {},
medium: {},
large: {},
huge: {}
},
theme: {
base: {},
light: {},
dark: {},
inputGroup: {}
}
},
numberInput: {
container: {
base: {
position: "relative"
}
},
button: {
base: {
backgroundColor: _colors2.default.bgPrimary,
borderLeft: ".1rem solid",
borderLeftColor: (0, _color.darken)(_colors2.default.bgPrimary, 17),
color: _colors2.default.linkPrimary,
display: "block",
height: "calc(100% - .2rem)",
position: "absolute",
top: ".1rem",
transition: "color " + _timing2.default.default,
":hover": {
color: (0, _color.lighten)(_colors2.default.linkPrimary, 7)
},
":focus": {
color: (0, _color.lighten)(_colors2.default.linkPrimary, 7)
},
":active": {
color: (0, _color.lighten)(_colors2.default.linkPrimary, 7)
}
},
size: {
tiny: {
fontSize: "1.1rem",
width: "2.5rem"
},
small: {
fontSize: "1.3rem",
width: "3.3rem"
},
medium: {
fontSize: "1.5rem",
width: "4.4rem"
},
large: {
fontSize: "2.2rem",
width: "5.4rem"
},
huge: {
fontSize: "2.2rem",
width: "6.2rem"
}
},
plus: {
size: {
tiny: {
right: "2.6rem"
},
small: {
right: "3.4rem"
},
medium: {
right: "4.5rem"
},
large: {
right: "5.5rem"
},
huge: {
right: "6.3rem"
}
}
},
minus: {
right: ".1rem"
}
}
}
},
state: {
alert: {},
error: {},
info: {},
success: {}
},
fill: {
display: "block",
width: "100%"
},
noBorder: {
borderWidth: 0
}
};
exports.default = styles;