mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-19 04:11:24 +02:00
Code Issues Releases Wiki Activity

Fix spacing in details page

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-23 22:13:02 +07:00
parent 10a14b1e48
commit 07d6c19b1f
37 changed files with 822 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
client/patterns/toggle-password-visibility/Details.jsx
View File

@@ -10,39 +10,40 @@ const Details = () => {
return (
<DetailsLayout title="Toggle password visibility">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br1 flex">
<input type={visible ? 'text' : 'password'} autoComplete="off" className="pa1 b--transparent" style={{ flex: 1 }} />
<button className="b--transparent pa2" onClick={toggle}>
<svg
viewBox="0 0 24 24"
style={{
height: '24px',
fill: "none",
stroke: "rgba(0, 0, 0, 0.4)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '24px',
}}
>
<path
d={
visible
? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
: `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
}
/>
</svg>
</button>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br1 flex">
<input type={visible ? 'text' : 'password'} autoComplete="off" className="pa1 b--transparent" style={{ flex: 1 }} />
<button className="b--transparent pa2" onClick={toggle}>
<svg
viewBox="0 0 24 24"
style={{
height: '24px',
fill: "none",
stroke: "rgba(0, 0, 0, 0.4)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '24px',
}}
>
<path
d={
visible
? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
: `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
}
/>
</svg>
</button>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -69,8 +70,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};