1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

Updating Toggle component to use input instead of divs

This commit is contained in:
Alex Windett 2016-11-21 17:41:23 +00:00
parent 929eb86b27
commit 958c27aeeb
3 changed files with 73 additions and 52 deletions

View File

@ -5,34 +5,44 @@ const React = require('react');
const styles = require('./style.css'); const styles = require('./style.css');
const Toggle = ({ const Toggle = ({
off = false, checked = false,
className, className,
style style
}) => { }) => {
const tgl = classNames( const tgl = classNames(
className, className,
styles.toggle, styles.tgl,
off ? styles.off : styles.on, checked ? styles.on : styles.off,
); );
const btn = classNames( const input = classNames(
className, className,
styles.btn styles.input
);
const label = classNames(
className,
styles.label
); );
return ( return (
<div className={tgl} style={style}> <div className='' style={style}>
<div className={btn} /> <label className={tgl} htmlFor='toggle' >
<span className={styles.label}> <input
{off ? 'Off' : 'On'} checked={checked}
</span> className={input}
id='toggle'
type='checkbox'
/>
<div className={label} />
</label>
</div> </div>
); );
}; };
Toggle.propTypes = { Toggle.propTypes = {
checked: React.PropTypes.bool,
className: React.PropTypes.string, className: React.PropTypes.string,
off: React.PropTypes.bool,
style: React.PropTypes.object style: React.PropTypes.object
}; };

View File

@ -1,4 +1,4 @@
# `<Button>` # `<Toggle>`
## demo ## demo
@ -13,13 +13,10 @@ const Toggle = require('./index.js');
const styles = require('./style.css'); const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString( nmodule.exports = ReactDOM.renderToString(
<Base> <Base>
<Row> <Row>
<Column> <Column>
<Toggle /> <Toggle checked />
</Column>
<Column>
<Toggle off />
</Column> </Column>
</Row> </Row>
</Base> </Base>

View File

@ -15,55 +15,69 @@
--bottom-shaddow: ~boxes.bottomShaddow; --bottom-shaddow: ~boxes.bottomShaddow;
} }
.toggle { .tgl {
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: #464646; color: #464646;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
height: 2.5rem; height: 2.5rem;
width: 5rem; width: 110px;
}
& .btn, .label {
& .label { background-color: #E6E6E6;
height: 2.188rem; border: solid 1px #D8D8D8;
margin: 0.125rem; border-radius: var(--border-radius);
width: 2.188rem; color: #000000;
height: remcalc(54);
margin: 0.125rem;
padding: remcalc(12 12 12 0);
position: relative;
text-align: right;
width: remcalc(106);
&::before {
content: "Off";
font-family: inherit;
font-size: inherit;
font-weight: bold;
position: absolute;
right: 14px;
top: 13px;
} }
& .label { &::after {
padding-top: 4px; background-color: #FFFFFF;
text-align: center;
}
& .btn {
background: #FFFFFF;
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--bottom-shaddow); content: "";
height: remcalc(46);
left: 3px;
position: absolute;
top: 3px;
width: remcalc(46);
} }
}
&.on { .input {
background: var(--background-confirmed); display: none;
border: var(--border-confirmed);
& .label { &:checked {
& + .label {
background: var(--background-confirmed);
border: var(--border-confirmed);
color: #FFFFFF; color: #FFFFFF;
float: right; padding: remcalc(12 0 12 12);
} text-align: left;
& .btn { &::before {
float: left; content: "On";
} left: 14px;
} right: auto;
}
&.off { &::after {
background: #E6E6E6; left: auto;
border: var(--border-unchecked); right: 3px;
}
& .label {
float: left;
}
& .btn {
float: right;
} }
} }
} }