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 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
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user