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 Toggle = ({
off = false,
checked = false,
className,
style
}) => {
const tgl = classNames(
className,
styles.toggle,
off ? styles.off : styles.on,
styles.tgl,
checked ? styles.on : styles.off,
);
const btn = classNames(
const input = classNames(
className,
styles.btn
styles.input
);
const label = classNames(
className,
styles.label
);
return (
<div className={tgl} style={style}>
<div className={btn} />
<span className={styles.label}>
{off ? 'Off' : 'On'}
</span>
<div className='' style={style}>
<label className={tgl} htmlFor='toggle' >
<input
checked={checked}
className={input}
id='toggle'
type='checkbox'
/>
<div className={label} />
</label>
</div>
);
};
Toggle.propTypes = {
checked: React.PropTypes.bool,
className: React.PropTypes.string,
off: React.PropTypes.bool,
style: React.PropTypes.object
};

View File

@ -1,4 +1,4 @@
# `<Button>`
# `<Toggle>`
## demo
@ -16,10 +16,7 @@ nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Toggle />
</Column>
<Column>
<Toggle off />
<Toggle checked />
</Column>
</Row>
</Base>

View File

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