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

112
client/patterns/triangle-buttons/Details.tsx
View File

@@ -22,82 +22,43 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Up triangle button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- Triangle -->
<div style="
border-color: transparent transparent rgba(0, 0, 0, 0.3);
border-style: solid;
border-width: 0px 8px 8px;
/* Size */
height: 0px;
width: 0px;
"></div>
<div class="container__triangle container__triangle--up"></div>
<!-- Content -->
...
</button>
<!-- Right triangle button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- Content -->
...
<!-- Triangle -->
<div style="
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
border-style: solid;
border-width: 8px 0px 8px 8px;
/* Size */
height: 0px;
width: 0px;
"></div>
<div class="container__triangle container__triangle--right"></div>
</button>
<!-- Down triangle button -->
<button style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
">
<button class="container">
<!-- Triangle -->
<div style="
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
border-style: solid;
border-width: 8px 8px 0px;
/* Size */
height: 0px;
width: 0px;
"></div>
<div class="container__triangle container__triangle--down"></div>
<!-- Content -->
...
</button>
<!-- Left triangle button -->
<button style="
<button class="container">
<!-- Triangle -->
<div class="container__triangle container__triangle--left"></div>
<!-- Content -->
...
</button>
`}
css={`
.container {
/* Center the content */
align-items: center;
display: flex;
@@ -105,23 +66,36 @@ html={`
/* Spacing */
padding: 8px;
">
<!-- Triangle -->
<div style="
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
border-style: solid;
border-width: 8px 8px 8px 0px;
}
/* Size */
height: 0px;
width: 0px;
"></div>
.container__triangle {
border-style: solid;
<!-- Content -->
...
</button>
/* Size */
height: 0px;
width: 0px;
}
.container__triangle--up {
border-color: transparent transparent rgba(0, 0, 0, 0.3);
border-width: 0px 8px 8px;
}
.container__triangle--right {
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
border-width: 8px 0px 8px 8px;
}
.container__triangle--down {
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
border-width: 8px 8px 0px;
}
.container__triangle--left {
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
border-width: 8px 8px 8px 0px;
}
`}
css={``}
>
<div
style={{