schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 01:45:26 +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() {
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 <label style={styles.root}>
return <label style={styles.root}>
<input
type="checkbox"
style={{
type="checkbox"
style={{
...styles.input,
...this.props.style,
}}
onChange={e => {this.props.onChange(!this.props.value)}}
checked={this.props.value}
/>
...this.props.style,
}}
onChange={e => {this.props.onChange(!this.props.value)}}
checked={this.props.value}
/>
<div style={styles.box}>
<svg
viewBox='0 0 32 32'
style={styles.icon}>
<path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
</svg>
</div>
</label>
</div>
</label>
}
}