mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-23 18:56:29 +02:00
Code Issues Releases Wiki Activity

Add CSS code for input patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 20:55:44 +07:00
parent b5ef930f42
commit 14b0781512
11 changed files with 300 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
client/patterns/input-addon/Details.tsx
View File

@@ -22,88 +22,63 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Add-on prepended -->
<div style="
display: flex;
/* Take full size */
width: 100%;
">
<div class="container">
<!-- Add-on -->
<div style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
">
<div class="container__addon">
...
</div>
<!-- Input -->
<input type="text" style="
/* Take the remaining width */
flex: 1;
" />
<input type="text" class="container__input" />
</div>
<!-- Add-on appended -->
<div style="
display: flex;
/* Take full size */
width: 100%;
">
<div class="container">
<!-- Input -->
<input type="text" style="
/* Take the remaining width */
flex: 1;
" />
<input type="text" class="container__input" />
<!-- Add-on -->
<div style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
">
<div class="container__addon">
...
</div>
</div>
<!-- Appended and prepended add-ons -->
<div style="
display: flex;
/* Take full size */
width: 100%;
">
<div class="container">
<!-- Add-on -->
<div style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
">
<div class="container__addon">
...
</div>
<!-- Input -->
<input type="text" style="
/* Take the remaining width */
flex: 1;
" />
<input type="text" class="container__input" />
<!-- Add-on -->
<div style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
">
<div class="container__addon">
...
</div>
</div>
`}
css={``}
css={`
.container {
display: flex;
/* Take full size */
width: 100%;
}
.container__input {
/* Take the remaining width */
flex: 1;
}
.container__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
`}
>
<div
style={{