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

Add CSS code for navigation patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 16:58:58 +07:00
parent 9156f3a5cc
commit 39b2f3383b
20 changed files with 549 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/patterns/split-navigation/Details.tsx
View File

@@ -22,7 +22,20 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<ul style="
<ul class="container">
<!-- Navigation item -->
<li>
<a href="">...</a>
</li>
<!-- Navigation item that sticks to the right -->
<li class="item-right">
<a href="">...</a>
</li>
</ul>
`}
css={`
.container {
/* Content is centered horizontally */
align-items: center;
display: flex;
@@ -30,22 +43,13 @@ html={`
/* Reset styles */
list-style-type: none;
margin: 0;
">
<!-- Navigation item -->
<li>
<a href="">...</a>
</li>
}
<!-- Navigation item that sticks to the right -->
<li style="
/* Sticks to the right */
margin-left: auto;
">
<a href="">...</a>
</li>
</ul>
.item-right {
/* Sticks to the right */
margin-left: auto;
}
`}
css={``}
>
<div
style={{