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

Add CSS panel for display patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 21:33:21 +07:00
parent 04384dbee2
commit 57b8bff9bb
42 changed files with 1008 additions and 894 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
client/patterns/fixed-at-corner/Details.tsx
View File

@@ -22,47 +22,57 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
position: relative;
">
<div class="container">
<!-- Top-left corner -->
<div style="
left: 0;
position: absolute;
top: 0;
">
<div class="container__corner container__corner--tl">
...
</div>
<!-- Top-right corner -->
<div style="
position: absolute;
top: 0;
right: 0;
">
<div class="container__corner container__corner--tr">
...
</div>
<!-- Bottom-right corner -->
<div style="
bottom: 0;
position: absolute;
right: 0;
">
<div class="container__corner container__corner--br">
...
</div>
<!-- Bottom-left corner -->
<div style="
bottom: 0;
left: 0;
position: absolute;
">
<div class="container__corner container__corner--bl">
...
</div>
</div>
`}
css={``}
css={`
.container {
position: relative;
}
.container__corner {
position: absolute;
}
.container__corner--tl {
left: 0;
top: 0;
}
.container__corner--tr {
top: 0;
right: 0;
}
.container__corner--br {
bottom: 0;
right: 0;
}
.container__corner--bl {
bottom: 0;
left: 0;
}
`}
>
<div style={{ height: '100%', position: 'relative' }}>
<div style={{ left: 0, position: 'absolute', top: 0 }}>