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:
parent
929eb86b27
commit
958c27aeeb
@ -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
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user