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

feat: Update contents

Browse Source
This commit is contained in:
Phuoc Nguyen
2023-08-19 19:27:15 +07:00
parent f7af6da9e4
commit 71d51b358a
318 changed files with 15536 additions and 6884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
contents/input-addon.mdx Normal file
View File

@@ -0,0 +1,151 @@
---
category: Input
created: '2019-11-16'
description: Create an input add-on with CSS flexbox
keywords: css flexbox, css input add-on
thumbnail: /assets/css-layout/thumbnails/input-addon.png
title: Input addon
---
## HTML
```html
<!-- Add-on prepended -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">...</div>
<!-- Input -->
<input type="text" class="input-addon__input" />
</div>
<!-- Add-on appended -->
<div class="input-addon">
<!-- Input -->
<input type="text" class="input-addon__input" />
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">...</div>
</div>
<!-- Appended and prepended add-ons -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">...</div>
<!-- Input -->
<input type="text" class="input-addon__input" />
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">...</div>
</div>
```
## CSS
```css
.input-addon {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
display: flex;
}
.input-addon__input {
border: none;
/* Take the remaining width */
flex: 1;
}
.input-addon__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.input-addon__addon--prepended {
border-right: 1px solid #d1d5db;
}
.input-addon__addon--appended {
border-left: 1px solid #d1d5db;
}
```
<Playground>
```css placeholders.css hidden
.circle {
background: #d1d5db;
border-radius: 9999px;
height: var(--circle-size);
width: var(--circle-size);
}
.circle--sm {
--circle-size: 0.5rem;
}
.circle--md {
--circle-size: 1.5rem;
}
.circle--lg {
--circle-size: 4rem;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.input-addon {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
display: flex;
/* Demo */
margin-bottom: 0.5rem;
width: 16rem;
}
.input-addon__input {
border: none;
/* Take the remaining width */
flex: 1;
/* Demo */
padding: 0.25rem;
margin: 0 0.25rem;
width: 5rem;
}
.input-addon__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Demo */
padding: 0.25rem;
}
.input-addon__addon--prepended {
border-right: 1px solid #d1d5db;
}
.input-addon__addon--appended {
border-left: 1px solid #d1d5db;
}
```
```html index.html hidden
<div class="input-addon">
<div class="input-addon__addon input-addon__addon--prepended"><div class="circle circle--md"></div></div>
<input type="text" class="input-addon__input" />
</div>
<div class="input-addon">
<input type="text" class="input-addon__input" />
<div class="input-addon__addon input-addon__addon--appended"><div class="circle circle--md"></div></div>
</div>
```
</Playground>