schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 17:31:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Center checkbox

Browse source
This commit is contained in:
Lukas Martinelli 2017-01-09 21:43:14 +01:00
parent c09ffc9d41
commit 5d70de6202
1 changed files with 39 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/components/inputs/CheckboxInput.jsx
View file

@ -12,59 +12,61 @@ class CheckboxInput extends React.Component {
render() { render() {
const styles = { const styles = {
root: { root: {
...input.base, ...input.base,
lineHeight: 0.7,
padding: 0, padding: 0,
position: 'relative', position: 'relative',
textAlign: 'center ', textAlign: 'center ',
cursor: 'pointer' verticalAlign: 'middle',
}, cursor: 'pointer'
input: { },
position: 'absolute', input: {
zIndex: -1, position: 'absolute',
opacity: 0 zIndex: -1,
}, opacity: 0
box: { },
display: 'inline-block', box: {
display: 'inline-block',
textAlign: 'center ', textAlign: 'center ',
height: 15, height: 15,
width: 15, width: 15,
marginRight: margins[1], marginRight: margins[1],
marginBottom: null, marginBottom: null,
backgroundColor: colors.gray, backgroundColor: colors.gray,
borderRadius: 2, borderRadius: 2,
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: 2, borderWidth: 2,
borderColor: colors.gray, borderColor: colors.gray,
transition: 'background-color .1s ease-out' transition: 'background-color .1s ease-out'
}, },
icon: { icon: {
display: this.props.value ? null : 'none', display: this.props.value ? null : 'none',
width: '75%', width: '75%',
height: '75%', height: '75%',
marginTop: 1, marginTop: 1,
fill: colors.lowgray fill: colors.lowgray
} }
} }
return <label style={styles.root}> return <label style={styles.root}>
<input <input
type="checkbox" type="checkbox"
style={{ style={{
...styles.input, ...styles.input,
...this.props.style, ...this.props.style,
}} }}
onChange={e => {this.props.onChange(!this.props.value)}} onChange={e => {this.props.onChange(!this.props.value)}}
checked={this.props.value} checked={this.props.value}
/> />
<div style={styles.box}> <div style={styles.box}>
<svg <svg
viewBox='0 0 32 32' viewBox='0 0 32 32'
style={styles.icon}> style={styles.icon}>
<path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' /> <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
</svg> </svg>
</div> </div>
</label> </label>
} }
} }