mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 22:26:33 +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;
}

6
pages/breadcrumb/index.tsx
View File

@@ -54,15 +54,15 @@ const Details: React.FC<{}> = () => {
<div style={{ width: '128px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ color: '#d1d5db', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ color: '#d1d5db', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '64px' }}>
<Rectangle height={16} />
</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ color: '#d1d5db', fontSize: '36px', margin: '0 4px' }}>/</div>
<div style={{ width: '32px' }}>
<Rectangle height={16} />
</div>

131
pages/chip/index.tsx
View File

@@ -1,131 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const InputChip: React.FC<{}> = ({ children }) => {
return (
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'inline-flex',
justifyContent: 'center',
padding: '4px 8px',
}}
>
<div style={{ flex: 1, marginRight: '4px' }}>{children}</div>
<button
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
cursor: 'pointer',
height: '16px',
position: 'relative',
width: '16px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '1px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(0%, -50%) rotate(45deg)',
width: '100%',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, 0%) rotate(45deg)',
width: '1px',
}}
/>
</button>
</div>
);
};
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.Chip}>
<Head>
<meta name="description" content="Create a chip component with CSS flexbox" />
<meta name="og:description" content="Create a chip component with CSS flexbox" />
<meta name="twitter:description" content="Create a chip component with CSS flexbox" />
<meta name="keywords" content="css chip, css flexbox, css tag" />
</Head>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can use a{' '}
<Link href="/close-button">
<a>close button</a>
</Link>{' '}
to remove a chip.
</div>
<BrowserFrame
html={`
<div class="chip">
<!-- Content -->
<div class="chip__content">
...
</div>
<!-- The close button -->
<!-- See https://csslayout.io/patterns/close-button -->
...
</div>
`}
css={`
.chip {
/* Center the content */
align-items: center;
display: inline-flex;
justify-content: center;
/* Background color */
background-color: rgba(0, 0, 0, 0.1);
/* Rounded border */
border-radius: 9999px;
/* Spacing */
padding: 4px 8px;
}
.chip__content {
margin-right: 4px;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<InputChip>CSS</InputChip>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CloseButton]} />
</PatternLayout>
);
};
export default Details;

4
pages/custom-checkbox-button/index.tsx
View File

@@ -38,7 +38,7 @@ const Details: React.FC<{}> = () => {
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
marginRight: '8px',
padding: '4px',
@@ -98,7 +98,7 @@ const Details: React.FC<{}> = () => {
}
.label__square {
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 4px;
/* Spacing */

4
pages/custom-radio-button/index.tsx
View File

@@ -37,7 +37,7 @@ const Details: React.FC<{}> = () => {
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '9999px',
marginRight: '8px',
padding: '4px',
@@ -98,7 +98,7 @@ const Details: React.FC<{}> = () => {
.label__circle {
/* Rounded border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 9999px;
/* Spacing */

8
pages/dot-navigation/index.tsx
View File

@@ -18,8 +18,8 @@ const Details: React.FC<{}> = () => {
return (
<li
style={{
backgroundColor: isActive ? 'rgba(0, 0, 0, 0.3)' : '',
border: isActive ? 'none' : '1px solid rgba(0, 0, 0, 0.3)',
backgroundColor: isActive ? '#d1d5db' : '',
border: isActive ? 'none' : '1px solid #d1d5db',
borderRadius: '9999px',
cursor: 'pointer',
height: '12px',
@@ -68,11 +68,11 @@ const Details: React.FC<{}> = () => {
width: 12px;
/* Active dot */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
/* Inactive dot */
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
/* OPTIONAL: Spacing between dots */
margin: 0 4px;

2
pages/drawer/index.tsx
View File

@@ -76,7 +76,7 @@ const Details: React.FC<{}> = () => {
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
height: '100%',
left: 0,
position: 'absolute',

4
pages/dropdown/index.tsx
View File

@@ -83,7 +83,7 @@ const Details: React.FC<{}> = () => {
<button
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '32px',
@@ -112,7 +112,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '100%',

2
pages/floating-label/index.tsx
View File

@@ -67,7 +67,7 @@ placeholder of input isn't shown
<div
className="p-floating-container"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
padding: '0 1px',
position: 'relative',

8
pages/holy-grail/index.tsx
View File

@@ -75,7 +75,7 @@ const Details: React.FC<{}> = () => {
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
flexShrink: 0,
padding: '16px',
}}
@@ -87,7 +87,7 @@ const Details: React.FC<{}> = () => {
<div style={{ display: 'flex', flexGrow: 1 }}>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
padding: '16px',
width: '25%',
}}
@@ -99,7 +99,7 @@ const Details: React.FC<{}> = () => {
</div>
<div
style={{
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid #d1d5db',
padding: '16px',
width: '20%',
}}
@@ -109,7 +109,7 @@ const Details: React.FC<{}> = () => {
</div>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid #d1d5db',
flexShrink: 0,
padding: '16px',
}}

14
pages/input-addon/index.tsx
View File

@@ -89,7 +89,7 @@ const Details: React.FC<{}> = () => {
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '32px',
@@ -101,7 +101,7 @@ const Details: React.FC<{}> = () => {
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',
@@ -122,7 +122,7 @@ const Details: React.FC<{}> = () => {
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '32px',
@@ -143,7 +143,7 @@ const Details: React.FC<{}> = () => {
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',
@@ -155,7 +155,7 @@ const Details: React.FC<{}> = () => {
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '32px',
@@ -166,7 +166,7 @@ const Details: React.FC<{}> = () => {
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',
@@ -187,7 +187,7 @@ const Details: React.FC<{}> = () => {
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',

8
pages/mega-menu/index.tsx
View File

@@ -53,7 +53,7 @@ const Details: React.FC<{}> = () => {
.container__content {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
margin-top: -1px;
/* Hidden by default */
@@ -78,14 +78,14 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
display: 'inline-flex',
justifyContent: 'center',
}}
>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
padding: '16px',
width: '150px',
}}
@@ -95,7 +95,7 @@ const Details: React.FC<{}> = () => {
<div
className="p-mega-menu-trigger"
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
width: '180px',
}}
>

8
pages/menu/index.tsx
View File

@@ -60,7 +60,7 @@ const Details: React.FC<{}> = () => {
flex-direction: column;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 4px;
}
@@ -76,7 +76,7 @@ const Details: React.FC<{}> = () => {
}
.menu__divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
height: 1px;
}
`}
@@ -93,7 +93,7 @@ const Details: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
width: '40%',
}}
@@ -188,7 +188,7 @@ const Details: React.FC<{}> = () => {
</div>
<Circle />
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
<div style={{ borderBottom: '1px solid #d1d5db', height: '1px' }} />
<div
className="p-menu-item"
style={{

4
pages/nested-dropdowns/index.tsx
View File

@@ -53,7 +53,7 @@ const Details: React.FC<{}> = () => {
css={`
.dropdown {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
display: flex;
/* Reset list styles */
@@ -73,7 +73,7 @@ const Details: React.FC<{}> = () => {
/* The sub dropdown */
.dropdown ul {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
/* Hidden by default */
display: none;

16
pages/pagination/index.tsx
View File

@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 4px;
}
@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
justify-content: center;
/* Right border */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid #d1d5db;
}
.pagination__item + .pagination__item {
/* No right border */
@@ -64,7 +64,7 @@ const Details: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
}}
@@ -72,7 +72,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',
@@ -84,7 +84,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',
@@ -95,7 +95,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',
@@ -106,7 +106,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',
@@ -117,7 +117,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',

4
pages/previous-next-buttons/index.tsx
View File

@@ -57,7 +57,7 @@ const Details: React.FC<{}> = () => {
<a
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
padding: '8px',
@@ -70,7 +70,7 @@ const Details: React.FC<{}> = () => {
<a
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
padding: '8px',

6
pages/radio-button-group/index.tsx
View File

@@ -71,7 +71,7 @@ const Details: React.FC<{}> = () => {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 4px;
height: 32px;
}
@@ -81,7 +81,7 @@ const Details: React.FC<{}> = () => {
align-items: center;
display: inline-flex;
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid #d1d5db;
padding: 8px;
/* For not selected radio */
@@ -119,7 +119,7 @@ const Details: React.FC<{}> = () => {
<div
className="p-radio-button-group"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '32px',

6
pages/search-box/index.tsx
View File

@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
flex-direction: row-reverse;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
}
.container__input {
@@ -56,7 +56,7 @@ const Details: React.FC<{}> = () => {
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '2px',
display: 'flex',
marginBottom: '16px',
@@ -78,7 +78,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '2px',
display: 'flex',
flexDirection: 'row-reverse',

2
pages/sidebar/index.tsx
View File

@@ -51,7 +51,7 @@ const Details: React.FC<{}> = () => {
<div style={{ display: 'flex', height: '100%' }}>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',

6
pages/slider/index.tsx
View File

@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
height: 2px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
}
.container__circle {
@@ -56,7 +56,7 @@ const Details: React.FC<{}> = () => {
border-radius: 9999px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
}
.container__right {
@@ -65,7 +65,7 @@ const Details: React.FC<{}> = () => {
height: 2px;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
}
`}
>

4
pages/spin-button/index.tsx
View File

@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
`}
css={`
.container {
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 2px;
display: flex;
}
@@ -81,7 +81,7 @@ const Details: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '2px',
display: 'flex',
}}

2
pages/split-navigation/index.tsx
View File

@@ -61,7 +61,7 @@ const Details: React.FC<{}> = () => {
<ul
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '8px',
display: 'flex',
listStyleType: 'none',

2
pages/split-screen/index.tsx
View File

@@ -45,7 +45,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
flex: 1,
flexDirection: 'column',

8
pages/stepper-input/index.tsx
View File

@@ -45,7 +45,7 @@ const Details: React.FC<{}> = () => {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
/* Size */
height: 32px;
@@ -85,7 +85,7 @@ const Details: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '8px',
display: 'flex',
height: '32px',
@@ -108,8 +108,8 @@ const Details: React.FC<{}> = () => {
</button>
<div
style={{
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid #d1d5db',
borderRight: '1px solid #d1d5db',
flex: 1,
height: '100%',
}}

4
pages/sticky-footer/index.tsx
View File

@@ -59,7 +59,7 @@ const Details: React.FC<{}> = () => {
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
flexShrink: 0,
padding: '16px',
}}
@@ -73,7 +73,7 @@ const Details: React.FC<{}> = () => {
</div>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid #d1d5db',
flexShrink: 0,
padding: '16px',
}}

2
pages/sticky-header/index.tsx
View File

@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
padding: '16px',
position: 'sticky',
top: 0,

2
pages/sticky-sections/index.tsx
View File

@@ -64,7 +64,7 @@ const Details: React.FC<{}> = () => {
/>
<section
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
height: '100%',
position: 'sticky',
top: 0,

8
pages/switch/index.tsx
View File

@@ -45,7 +45,7 @@ const Details: React.FC<{}> = () => {
/* OFF status */
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
/* ON status */
background-color: #357edd;
@@ -69,7 +69,7 @@ const Details: React.FC<{}> = () => {
background-color: #fff;
/* OFF status */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
}
`}
>
@@ -87,7 +87,7 @@ const Details: React.FC<{}> = () => {
htmlFor="checkbox-switch"
style={{
backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
border: `1px solid ${checked ? '#357EDD' : '#d1d5db'}`,
borderRadius: '9999px',
display: 'flex',
height: '32px',
@@ -105,7 +105,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
backgroundColor: '#FFF',
border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
border: checked ? '' : '1px solid #d1d5db',
borderRadius: '9999px',
width: '32px',
}}

8
pages/tab/index.tsx
View File

@@ -19,8 +19,8 @@ const Details: React.FC<{}> = () => {
return (
<div
style={{
[isActive ? 'border' : 'borderBottom']: '1px solid rgba(0, 0, 0, 0.3)',
borderBottomColor: isActive ? 'transparent' : 'rgba(0, 0, 0, 0.3)',
[isActive ? 'border' : 'borderBottom']: '1px solid #d1d5db',
borderBottomColor: isActive ? 'transparent' : '#d1d5db',
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px',
cursor: 'pointer',
@@ -65,7 +65,7 @@ const Details: React.FC<{}> = () => {
.tabs__tab--active {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
/* Hide the bottom border */
border-bottom-color: transparent;
@@ -76,7 +76,7 @@ const Details: React.FC<{}> = () => {
.tabs__tab--inactive {
/* Has only the bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
}
`}
>

4
pages/toggle-password-visibility/index.tsx
View File

@@ -34,7 +34,7 @@ const Details: React.FC<{}> = () => {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
}
.container__input {
@@ -57,7 +57,7 @@ const Details: React.FC<{}> = () => {
<div style={{ width: '256px' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
}}

4
pages/upload-button/index.tsx
View File

@@ -39,7 +39,7 @@ const Details: React.FC<{}> = () => {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
}
.container__input {
@@ -73,7 +73,7 @@ const Details: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
padding: '8px',

4
pages/wizard/index.tsx
View File

@@ -63,7 +63,7 @@ const Details: React.FC<{}> = () => {
.wizard__connector {
flex: 1;
height: 1px;
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
}
.wizard__step:first-child .wizard__connector,
@@ -78,7 +78,7 @@ const Details: React.FC<{}> = () => {
justify-content: center;
/* Rounded border */
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
border-radius: 9999px;
height: 32px;
width: 32px;

72
patterns/chip/Cover.tsx
View File

@@ -1,72 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'inline-flex',
justifyContent: 'center',
padding: '4px 8px',
width: '80%',
}}
>
<div style={{ flex: 1, marginRight: '4px' }}>
<Rectangle />
</div>
<button
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
cursor: 'pointer',
height: '16px',
position: 'relative',
width: '16px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '1px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(0%, -50%) rotate(45deg)',
width: '100%',
}}
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
height: '100%',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, 0%) rotate(45deg)',
width: '1px',
}}
/>
</button>
</div>
</div>
</Frame>
);
};
export default Cover;

2
patterns/circular-navigation/Cover.tsx
View File

@@ -18,7 +18,7 @@ const Cover: React.FC<{}> = () => {
<div style={{ position: 'relative' }}>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
borderRadius: '4px',
color: '#FFF',
height: '16px',

4
patterns/custom-checkbox-button/Cover.tsx
View File

@@ -28,7 +28,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '24px',
@@ -55,7 +55,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '24px',

4
patterns/custom-radio-button/Cover.tsx
View File

@@ -28,7 +28,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '9999px',
display: 'flex',
justifyContent: 'center',
@@ -53,7 +53,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '9999px',
display: 'flex',
justifyContent: 'center',

8
patterns/dot-navigation/Cover.tsx
View File

@@ -18,7 +18,7 @@ const Cover: React.FC<{}> = () => {
<div style={{ alignItems: 'center', display: 'flex' }}>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
@@ -27,7 +27,7 @@ const Cover: React.FC<{}> = () => {
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
@@ -36,7 +36,7 @@ const Cover: React.FC<{}> = () => {
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',
@@ -45,7 +45,7 @@ const Cover: React.FC<{}> = () => {
/>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '9999px',
height: '8px',
margin: '0 4px',

2
patterns/drawer/Cover.tsx
View File

@@ -8,7 +8,7 @@ const Cover: React.FC<{}> = () => {
<Frame>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
height: '100%',
position: 'relative',
width: '100%',

8
patterns/dropdown/Cover.tsx
View File

@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '24px',
@@ -33,7 +33,7 @@ const Cover: React.FC<{}> = () => {
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
flex: 1,
@@ -45,7 +45,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
display: 'flex',
flex: 1,
padding: '0 4px',
@@ -56,7 +56,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
display: 'flex',
flex: 1,
padding: '0 4px',

2
patterns/floating-label/Cover.tsx
View File

@@ -17,7 +17,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
height: '32px',
position: 'relative',

8
patterns/holy-grail/Cover.tsx
View File

@@ -15,7 +15,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
flexShrink: 0,
}}
>
@@ -41,7 +41,7 @@ const Cover: React.FC<{}> = () => {
<div style={{ display: 'flex', flexGrow: 1 }}>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
padding: '8px',
width: '30%',
}}
@@ -76,7 +76,7 @@ const Cover: React.FC<{}> = () => {
</div>
<div
style={{
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid #d1d5db',
padding: '8px',
width: '30%',
}}
@@ -91,7 +91,7 @@ const Cover: React.FC<{}> = () => {
</div>
<div
style={{
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid #d1d5db',
flexShrink: 0,
}}
>

4
patterns/input-addon/Cover.tsx
View File

@@ -17,7 +17,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '24px',
@@ -27,7 +27,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '0 8px',

2
patterns/mega-menu/Cover.tsx
View File

@@ -41,7 +41,7 @@ const Cover: React.FC<{}> = () => {
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
display: 'flex',
width: '100%',
}}

6
patterns/menu/Cover.tsx
View File

@@ -18,7 +18,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
@@ -29,7 +29,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
display: 'flex',
flex: 1,
padding: '0 8px',
@@ -40,7 +40,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
display: 'flex',
flex: 1,
padding: '0 8px',

4
patterns/nested-dropdowns/Cover.tsx
View File

@@ -20,7 +20,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
}}
@@ -44,7 +44,7 @@ const Cover: React.FC<{}> = () => {
<Circle size={8} />
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderTopColor: 'transparent',
left: 0,
padding: '4px',

6
patterns/pagination/Cover.tsx
View File

@@ -18,7 +18,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '9999px',
display: 'flex',
}}
@@ -26,7 +26,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',
@@ -37,7 +37,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
padding: '8px',

4
patterns/previous-next-buttons/Cover.tsx
View File

@@ -25,7 +25,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
padding: '4px 8px',
}}
@@ -34,7 +34,7 @@ const Cover: React.FC<{}> = () => {
</div>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
padding: '4px 8px',
}}

6
patterns/radio-button-group/Cover.tsx
View File

@@ -17,7 +17,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '24px',
@@ -27,13 +27,13 @@ const Cover: React.FC<{}> = () => {
<div
style={{
backgroundColor: '#00449E',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
flex: 1,
}}
/>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
flex: 1,
}}
/>

2
patterns/radio-switch/Cover.tsx
View File

@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '9999px',
display: 'flex',
justifyContent: 'center',

10
patterns/rating/Cover.tsx
View File

@@ -22,11 +22,11 @@ const Cover: React.FC<{}> = () => {
justifyContent: 'center',
}}
>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>☆</div>
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>☆</div>
<div style={{ color: '#d1d5db', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: '#d1d5db', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: '#d1d5db', fontSize: '12px', padding: '2px' }}>★</div>
<div style={{ color: '#d1d5db', fontSize: '12px', padding: '2px' }}>☆</div>
<div style={{ color: '#d1d5db', fontSize: '12px', padding: '2px' }}>☆</div>
</div>
</div>
</Frame>

2
patterns/search-box/Cover.tsx
View File

@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
justifyContent: 'flex-end',

4
patterns/sidebar/Cover.tsx
View File

@@ -9,7 +9,7 @@ const Cover: React.FC<{}> = () => {
<div style={{ display: 'flex', height: '100%' }}>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
@@ -26,7 +26,7 @@ const Cover: React.FC<{}> = () => {
</div>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
borderWidth: '4px',
display: 'flex',
flex: 1,

2
patterns/spin-button/Cover.tsx
View File

@@ -18,7 +18,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
justifyContent: 'flex-end',

2
patterns/split-navigation/Cover.tsx
View File

@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '8px',
display: 'flex',
padding: '4px',

2
patterns/split-screen/Cover.tsx
View File

@@ -11,7 +11,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
flex: 1,
flexDirection: 'column',

6
patterns/stepper-input/Cover.tsx
View File

@@ -16,7 +16,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
height: '24px',
@@ -26,7 +26,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
width: '16px',
@@ -38,7 +38,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid #d1d5db',
display: 'flex',
justifyContent: 'center',
width: '16px',

6
patterns/sticky-footer/Cover.tsx
View File

@@ -15,8 +15,8 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '4px solid rgba(0, 0, 0, 0.3)',
borderBottom: '1px solid #d1d5db',
borderRight: '4px solid #d1d5db',
display: 'flex',
}}
>
@@ -41,7 +41,7 @@ const Cover: React.FC<{}> = () => {
</div>
<div
style={{
borderRight: '4px solid rgba(0, 0, 0, 0.3)',
borderRight: '4px solid #d1d5db',
flex: 1,
}}
>

2
patterns/sticky-header/Cover.tsx
View File

@@ -36,7 +36,7 @@ const Cover: React.FC<{}> = () => {
</div>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid #d1d5db',
borderWidth: '4px',
flexGrow: 1,
}}

2
patterns/sticky-sections/Cover.tsx
View File

@@ -30,7 +30,7 @@ const Cover: React.FC<{}> = () => {
/>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
flex: 1,
width: '100%',
}}

2
patterns/switch/Cover.tsx
View File

@@ -17,7 +17,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
border: '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: '9999px',
display: 'flex',

6
patterns/tab/Cover.tsx
View File

@@ -25,7 +25,7 @@ const Cover: React.FC<{}> = () => {
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderBottomColor: 'transparent',
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px',
@@ -34,10 +34,10 @@ const Cover: React.FC<{}> = () => {
>
<Circle size={8} />
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', padding: '4px 8px' }}>
<div style={{ borderBottom: '1px solid #d1d5db', padding: '4px 8px' }}>
<Circle size={8} />
</div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', padding: '4px 8px' }}>
<div style={{ borderBottom: '1px solid #d1d5db', padding: '4px 8px' }}>
<Circle size={8} />
</div>
</div>

2
patterns/toggle-password-visibility/Cover.tsx
View File

@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
justifyContent: 'space-between',

2
patterns/upload-button/Cover.tsx
View File

@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '4px',
display: 'flex',
padding: '8px',

6
patterns/wizard/Cover.tsx
View File

@@ -29,7 +29,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
@@ -59,7 +59,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',
@@ -89,7 +89,7 @@ const Cover: React.FC<{}> = () => {
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
backgroundColor: '#d1d5db',
borderRadius: '9999px',
color: '#FFF',
display: 'flex',

2
placeholders/Block.tsx
View File

@@ -10,7 +10,7 @@ interface BlockProps {
}
const Block: React.FC<BlockProps> = ({
backgroundColor = 'rgba(0, 0, 0, 0.3)',
backgroundColor = '#d1d5db',
blockHeight = 4,
justify = 'start',
numberOfBlocks = 1,

2
placeholders/Frame.tsx
View File

@@ -4,7 +4,7 @@ const Frame: React.FC<{}> = ({ children }) => {
return (
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
border: '1px solid #d1d5db',
borderRadius: '2px',
boxShadow: 'rgba(0, 0, 0, 0.2) 0px 16px 24px -4px, rgba(0, 0, 0, 0.05) 0px 8px 8px -4px',
height: '100px',

2
styles/blocks/_post.scss
View File

@@ -74,7 +74,7 @@
padding-left: 2rem;
}
> ol li::before {
background-color: #e5e7eb;
background-color: #d1d5db;
border-radius: 50%;
content: counter(ol-step-counter);
align-items: center;

1
styles/index.scss
View File

@@ -19,6 +19,7 @@
@import './patterns/button-with-icon';
@import './patterns/card';
@import './patterns/centering';
@import './patterns/chip';
@import './patterns/close-button';
@import './patterns/color-swatch';
@import './patterns/concave-corners';

4
styles/patterns/_accordion.scss
View File

@@ -1,11 +1,11 @@
.accordion {
border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #d1d5db;
border-radius: 4px;
height: 100%;
width: 100%;
}
.accordion__item:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #d1d5db;
}
.accordion__header {
align-items: center;

16
styles/patterns/_arrow-buttons.scss
View File

@@ -14,29 +14,29 @@
.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
styles/patterns/_avatar.scss
View File

@@ -2,7 +2,7 @@
height: 8rem;
width: 8rem;
background-color: rgba(0, 0, 0, 0.3);
background-color: #d1d5db;
/* Rounded border */
border-radius: 50%;

2
styles/patterns/_badge.scss
View File

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

Some files were not shown because too many files have changed in this diff Show More