diff --git a/src/components/inputs/CheckboxInput.jsx b/src/components/inputs/CheckboxInput.jsx index 38ba19f..c903aa5 100644 --- a/src/components/inputs/CheckboxInput.jsx +++ b/src/components/inputs/CheckboxInput.jsx @@ -12,59 +12,61 @@ class CheckboxInput extends React.Component { render() { const styles = { - root: { + root: { ...input.base, + lineHeight: 0.7, padding: 0, - position: 'relative', + position: 'relative', textAlign: 'center ', - cursor: 'pointer' - }, - input: { - position: 'absolute', - zIndex: -1, - opacity: 0 - }, - box: { - display: 'inline-block', + verticalAlign: 'middle', + cursor: 'pointer' + }, + input: { + position: 'absolute', + zIndex: -1, + opacity: 0 + }, + box: { + display: 'inline-block', textAlign: 'center ', height: 15, width: 15, - marginRight: margins[1], - marginBottom: null, - backgroundColor: colors.gray, - borderRadius: 2, - borderStyle: 'solid', - borderWidth: 2, - borderColor: colors.gray, - transition: 'background-color .1s ease-out' - }, - icon: { - display: this.props.value ? null : 'none', - width: '75%', - height: '75%', - marginTop: 1, - fill: colors.lowgray - } + marginRight: margins[1], + marginBottom: null, + backgroundColor: colors.gray, + borderRadius: 2, + borderStyle: 'solid', + borderWidth: 2, + borderColor: colors.gray, + transition: 'background-color .1s ease-out' + }, + icon: { + display: this.props.value ? null : 'none', + width: '75%', + height: '75%', + marginTop: 1, + fill: colors.lowgray + } } - return } }