mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-28 08:10:00 +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

110
client/patterns/timeline/Details.tsx
View File

@@ -23,64 +23,27 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div style="
/* Used to position the left vertical line */
position: relative;
">
<div class="container">
<!-- Left vertical line -->
<div style="
/* Border */
border-right: 2px solid #aaa;
/* Positioned at the left */
left: 16px;
position: absolute;
top: 0px;
/* Take full height */
height: 100%;
" />
<div class="container__line"></div>
<!-- The timeline items container -->
<ul style="
/* Reset styles */
list-style-type: none;
margin: 0px;
padding: 0px;
">
<ul class="container__items">
<!-- Each timeline item -->
<li style="margin-bottom: 8px;">
<li class="container__item">
<!-- The circle and title -->
<div style="
/* Center the content horizontally */
align-items: center;
display: flex;
">
<div class="container__top">
<!-- The circle -->
<div style="
/* Rounded border */
background-color: rgb(170, 170, 170);
border-radius: 9999px;
/* Size */
height: 32px;
width: 32px;
" />
<div class="container__circle"></div>
<!-- The title -->
<div style="
/* Take available width */
flex: 1;
">
<div class="container__title">
...
</div>
</div>
<!-- The description -->
<div style="
/* Make it align with the title */
margin-left: 48px;
">
<div class="container__desc">
...
</div>
</li>
@@ -90,7 +53,62 @@ html={`
</ul>
</div>
`}
css={``}
css={`
.container {
/* Used to position the left vertical line */
position: relative;
}
.container__line {
/* Border */
border-right: 2px solid #aaa;
/* Positioned at the left */
left: 16px;
position: absolute;
top: 0px;
/* Take full height */
height: 100%;
}
.container__items {
/* Reset styles */
list-style-type: none;
margin: 0px;
padding: 0px;
}
.container__item {
margin-bottom: 8px;
}
.container__top {
/* Center the content horizontally */
align-items: center;
display: flex;
}
.container__circle {
/* Rounded border */
background-color: rgb(170, 170, 170);
border-radius: 9999px;
/* Size */
height: 32px;
width: 32px;
}
.container__title {
/* Take available width */
flex: 1;
}
.container__desc {
/* Make it align with the title */
margin-left: 48px;
}
`}
>
<div
style={{