mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-09-09 13:50:44 +02:00
Code Issues Releases Wiki Activity

feat: Chip

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-21 08:55:08 +07:00
parent 3b15c786cf
commit 37a6729d08
130 changed files with 425 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
contents/_includes/patterns/chip.njk Normal file
View File

@@ -0,0 +1,7 @@
<div class="chip">
<div class="chip__content">CSS</div>
<button class="chip__button">
<div class="chip__button-line chip__button-line--first"></div>
<div class="chip__button-line chip__button-line--second"></div>
</button>
</div>

6
contents/accordion.md
View File

@@ -44,13 +44,13 @@ keywords: css accordion, css flexbox
```css
.accordion {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-bottom-color: transparent;
border-radius: 4px;
}
.accordion__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
}
.accordion__header {
@@ -72,7 +72,7 @@ keywords: css accordion, css flexbox
}
.accordion__content {
border-top: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid #d1d5db;
padding: 16px;
}

16
contents/arrow-buttons.md
View File

@@ -59,29 +59,29 @@ keywords: css arrow buttons
.arrow-button--t {
/* Edges */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translateY(25%) rotate(45deg);
}
.arrow-button--r {
/* Edges */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translateX(-25%) rotate(45deg);
}
.arrow-button--b {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
transform: translateY(-25%) rotate(45deg);
}
.arrow-button--l {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
border-left: 1px solid #d1d5db;
transform: translateX(25%) rotate(45deg);
}
```

2
contents/badge.md
View File

@@ -23,7 +23,7 @@ keywords: css badge, css flexbox
justify-content: center;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
color: #fff;
/* Rounded border */

105
contents/chip.md Normal file
View File

@@ -0,0 +1,105 @@
---
layout: layouts/post.njk
title: Chip
description: Create a chip component with CSS flexbox
keywords: css chip, css flexbox, css tag
---
## HTML
```html
<div class="chip">
<!-- Content -->
<div class="chip__content">
...
</div>
<!-- The close button -->
<button class="chip__button">
<div class="chip__button-line chip__button-line--first"></div>
<div class="chip__button-line chip__button-line--second"></div>
</button>
</div>
```
## CSS
```css
.chip {
/* Center the content */
align-items: center;
display: inline-flex;
justify-content: center;
/* Background color */
background-color: #d1d5db;
/* Rounded border */
border-radius: 9999px;
/* Spacing */
padding: 0.25rem 0.5rem;
}
.chip__content {
margin-right: 0.25rem;
}
```
The [close button](/close-button/) is used to create a button for removing the chip:
```css
.chip__button {
/* Reset */
background-color: transparent;
border-color: transparent;
/* Cursor */
cursor: pointer;
/* Size */
height: 1rem;
width: 1rem;
/* Used to position the inner */
position: relative;
}
.chip__button-line {
/* Background color */
background-color: #9ca3af;
/* Position */
position: absolute;
/* Size */
height: 1px;
width: 100%;
}
.chip__button-line--first {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
/* Size */
height: 1px;
width: 100%;
}
.chip__button-line--second {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
}
```
{% demo %}
{% include "patterns/chip.njk" %}
{% enddemo %}

2
contents/close-button.md
View File

@@ -35,7 +35,7 @@ keywords: css close button, css flexbox
.close-button__line {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
/* Position */
position: absolute;

2
contents/concave-corners.md
View File

@@ -30,7 +30,7 @@ keywords: css border radius, css concave border radius, css concave corners
```css
.concave-corners {
background-color: rgba(0, 0, 0, .3);
background-color: #d1d5db;
/* Used to position the corners */
position: relative;

2
contents/corner-ribbon.md
View File

@@ -53,7 +53,7 @@ keywords: css flexbox, css ribbon
transform: translate(-38px, -8px) rotate(-45deg);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
/* Centerize the text content */
text-align: center;

2
contents/curved-background.md
View File

@@ -18,7 +18,7 @@ keywords: css border radius, css curved background
```css
.curved-background__curved {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
/* You can use gradient background color such as */
/* background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */

2
contents/diagonal-section.md
View File

@@ -39,7 +39,7 @@ keywords: css diagonal section, css transform skew
transform: skewY(-5deg);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
/* Displayed under the main content */
z-index: -1;

2
contents/dot-leader.md
View File

@@ -32,7 +32,7 @@ keywords: css dot leader, css flexbox
.dot-leader__dots {
/* Bottom border */
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
border-bottom: 1px dotted #d1d5db;
/* Take remaining width */
flex: 1;

2
contents/drop-area.md
View File

@@ -23,7 +23,7 @@ keywords: css dropping area, css flexbox
justify-content: center;
/* Border */
border: 0.25rem dashed rgba(0, 0, 0, 0.3);
border: 0.25rem dashed #d1d5db;
border-radius: 0.25rem;
}
```

2
contents/drop-cap.md
View File

@@ -26,7 +26,7 @@ keywords: css drop cap, css :first-letter
padding: 0 0.5rem;
/* Optional */
border: 2px solid rgba(0, 0, 0, .3);
border: 2px solid #d1d5db;
font-size: 2rem;
font-weight: 700;
}

2
contents/feature-comparison.md
View File

@@ -39,7 +39,7 @@ keywords: css feature comparison, css flexbox
display: flex;
/* Bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
/* Spacing */
padding: 0.25rem 0;

1
contents/index.njk
View File

@@ -88,6 +88,7 @@ eleventyExcludeFromCollections: true
<h2 class="category__name">Input</h2>
<div class="category__posts">
{% pattern "Button with icon" %}{% include "patterns/button-with-icon.njk" %}{% endpattern %}
{% pattern "Chip" %}{% include "patterns/chip.njk" %}{% endpattern %}
</div>
</div>

2
contents/initial-avatar.md
View File

@@ -23,7 +23,7 @@ keywords: css avatar
justify-content: center;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
color: #fff;
/* Rounded border */

2
contents/keyboard-shortcut.md
View File

@@ -23,7 +23,7 @@ We use the native `kbd` tag to display the keyboard shortcut.
color: rgba(0, 0, 0, 0.7);
/* Bottom shadow */
box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
/* Spacing */
padding: 0.25rem 0.5rem;

2
contents/layered-card.md
View File

@@ -25,7 +25,7 @@ keywords: css layered card
}
.layered-card::before {
background: rgba(0, 0, 0, 0.3);
background: #d1d5db;
content: '';
/* Position */

2
contents/lined-paper.md
View File

@@ -18,7 +18,7 @@ keywords: css linear gradient, css lined paper, css multiple horizontal lines
```css
.lined-paper {
/* Lined background */
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
background-image: linear-gradient(#d1d5db 1px, transparent 0px);
background-size: 100% 2em;
/*

2
contents/notification.md
View File

@@ -55,7 +55,7 @@ The [close button](/close-button/) represents the button for closing the notific
.notification__close-line {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
/* Position */
position: absolute;

2
contents/price-tag.md
View File

@@ -17,7 +17,7 @@ keywords: css price tag
```css
:root {
--price-tag-background: rgba(0, 0, 0, 0.3);
--price-tag-background: #d1d5db;
--price-tag-height: 2rem;
}

2
contents/pricing-table.md
View File

@@ -53,7 +53,7 @@ keywords: css flexbox, css pricing table
margin: 0 0.5rem;
/* OPTIONAL: Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 0.25rem;
}
```

2
contents/property-list.md
View File

@@ -29,7 +29,7 @@ keywords: css flexbox, property list
align-items: center;
display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
/* Spacing */
margin: 0;

2
contents/questions-and-answers.md
View File

@@ -38,7 +38,7 @@ keywords: css accordion, css faq, css flexbox
```css
.questions-and-answers__item:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
}
.questions-and-answers__header {
align-items: center;

4
contents/ribbon.md
View File

@@ -64,13 +64,13 @@ keywords: css ribbon
.ribbon__side--l {
/* Position */
left: -1.5rem;
border-color: rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) rgba(0, 0, 0, .3) transparent;
border-color: #d1d5db #d1d5db #d1d5db transparent;
}
.ribbon__side--r {
/* Position */
right: -1.5rem;
border-color: rgba(0, 0, 0, .3) transparent rgba(0, 0, 0, .3) rgba(0, 0, 0, .3);
border-color: #d1d5db transparent #d1d5db #d1d5db;
}
.ribbon__triangle {

2
contents/separator.md
View File

@@ -49,7 +49,7 @@ keywords: css divider, css flexbox, css separator
}
.separator__separator {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
height: 1px;
width: 100%;
}

2
contents/teardrop.md
View File

@@ -26,7 +26,7 @@ keywords: css border radius, css teardrop, css water drop shape, css water dropl
justify-content: center;
/* Border */
border: 2px solid rgba(0, 0, 0, 0.3);
border: 2px solid #d1d5db;
border-radius: 0px 50% 50% 50%;
/* Angle at the top */

8
contents/triangle-buttons.md
View File

@@ -67,22 +67,22 @@ keywords: css triangle buttons
}
.triangle-buttons__triangle--t {
border-color: transparent transparent rgba(0, 0, 0, 0.3);
border-color: transparent transparent #d1d5db;
border-width: 0 0.5rem 0.5rem;
}
.triangle-buttons__triangle--r {
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
border-color: transparent transparent transparent #d1d5db;
border-width: 0.5rem 0 0.5rem 0.5rem;
}
.triangle-buttons__triangle--b {
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
border-color: #d1d5db transparent transparent;
border-width: 0.5rem 0.5rem 0;
}
.triangle-buttons__triangle--l {
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
border-color: transparent #d1d5db transparent transparent;
border-width: 0.5rem 0.5rem 0.5rem 0;
}
```

6
contents/voting.md
View File

@@ -28,7 +28,7 @@ keywords: css flexbox, css triangle buttons, css voting control
```css
.voting {
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 0.25rem;
display: flex;
flex-direction: column;
@@ -62,12 +62,12 @@ keywords: css flexbox, css triangle buttons, css voting control
}
.voting__triangle--up {
border-color: transparent transparent rgba(0, 0, 0, 0.3);
border-color: transparent transparent #d1d5db;
border-width: 0 0.5rem 0.5rem;
}
.voting__triangle--down {
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
border-color: #d1d5db transparent transparent;
border-width: 0.5rem 0.5rem 0px;
}