mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-18 03:41:35 +02:00
Code Issues Releases Wiki Activity

Fix tslint

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-25 01:00:48 +07:00
parent efc9046824
commit 5fd9ff5ddf
58 changed files with 353 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/patterns/radio-switch/Cover.tsx
View File

@@ -11,8 +11,7 @@ const Cover: React.FC<{}> = () => {
<div className="pa1" style={{ flex: 1 }}>
<Rectangle />
</div>
<div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }}>
</div>
<div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }} />
</div>
</div>
</Frame>

16
client/patterns/radio-switch/Details.tsx
View File

@@ -7,26 +7,32 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
const [isFirstChecked, setFirstChecked] = useState(false);
const toggle = () => setFirstChecked(c => !c);
const toggle = () => setFirstChecked((c) => !c);
return (
<DetailsLayout title="Radio switch">
<div className="ph4 pv5">
<BrowserFrame
content={
content={(
<div className="h-100 flex flex-column items-center justify-center">
<div className="inline-flex br-pill bg-black-10 pa1">
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
<input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
<div className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`} style={{ height: '8px' }} />
<div
className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`}
style={{ height: '8px' }}
/>
</label>
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
<input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} />
<div className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{ height: '8px' }} />
<div
className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`}
style={{ height: '8px' }}
/>
</label>
</div>
</div>
}
)}
source={`
<!-- Container -->
<div style="