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

Add CSS panel

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 14:49:56 +07:00
parent df9820fb39
commit c6973507c9
94 changed files with 4762 additions and 4739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
client/patterns/toggle-password-visibility/Details.tsx
View File

@@ -22,65 +22,7 @@ const Details: React.FC<{}> = () => {
</Helmet>
<div className='p-8 pb-20'>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
}}
>
<input
type={visible ? 'text' : 'password'}
autoComplete="off"
style={{
borderColor: 'transparent',
flex: 1,
marginLeft: '1px',
padding: '4px',
}}
/>
<button
style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
onClick={toggle}
>
<svg
viewBox="0 0 24 24"
style={{
fill: 'none',
height: '24px',
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>
)}
source={`
html={`
<div style="
display: flex;
@@ -103,7 +45,65 @@ const Details: React.FC<{}> = () => {
</button>
</div>
`}
/>
css={``}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
}}
>
<input
type={visible ? 'text' : 'password'}
autoComplete="off"
style={{
borderColor: 'transparent',
flex: 1,
marginLeft: '1px',
padding: '4px',
}}
/>
<button
style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
onClick={toggle}
>
<svg
viewBox="0 0 24 24"
style={{
fill: 'none',
height: '24px',
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>
</BrowserFrame>
</div>
</DetailsLayout>
);