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

Add color swatch pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-05-08 14:43:54 +07:00
parent cd56f2e0bb
commit 169d1a982c
5 changed files with 160 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -17,6 +17,7 @@ enum Pattern {
Chip = 'Chip',
CircularNavigation = 'Circular navigation',
CloseButton = 'Close button',
ColorSwatch = 'Color swatch',
CookieBanner = 'Cookie banner',
CornerRibbon = 'Corner ribbon',
CurvedBackground = 'Curved background',

1
client/pages/ExplorePage.tsx
View File

@@ -119,6 +119,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.CloseButton} />
<CoverCard pattern={Pattern.ColorSwatch} />
<CoverCard pattern={Pattern.CookieBanner} />
<CoverCard pattern={Pattern.CornerRibbon} />
<CoverCard pattern={Pattern.CurvedBackground} />

66
client/patterns/avatar/Details.tsx
View File

@@ -20,8 +20,7 @@ const Details: React.FC<{}> = () => {
<meta name="twitter:description" content="Create an avatar component with CSS flexbox" />
<meta name="keywords" content="css avatar, css flexbox" />
</Helmet>
<div className='p-8 pb-20'>
<BrowserFrame
<BrowserFrame
html={`
<div class="avatar">
<!-- Avatar image -->
@@ -45,48 +44,47 @@ css={`
width: 100%;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '64px',
padding: '8px',
width: '64px',
}}
>
<div
<svg
viewBox="0 0 24 24"
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '64px',
padding: '8px',
width: '64px',
fill: 'none',
height: '100%',
stroke: "#FFF",
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: 1,
width: '100%',
}}
>
<svg
viewBox="0 0 24 24"
style={{
fill: 'none',
height: '100%',
stroke: "#FFF",
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: 1,
width: '100%',
}}
>
<path
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
M5,20.5
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
/>
</svg>
</div>
<path
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
M5,20.5
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
/>
</svg>
</div>
</BrowserFrame>
</div>
</div>
</BrowserFrame>
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
</DetailsLayout>

42
client/patterns/color-swatch/Cover.tsx Normal file
View File

@@ -0,0 +1,42 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexWrap: 'wrap',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
{
Array(4).fill(0).map((_, index) => (
<div
key={index}
style={{
backgroundColor: `rgba(0, 0, 0, 0.${index * 2 + 1})`,
borderRadius: '9999px',
height: '1.5rem',
margin: '0.5rem',
width: '1.5rem',
}}
/>
))
}
</div>
</Frame>
);
};
export default Cover;

84
client/patterns/color-swatch/Details.tsx Normal file
View File

@@ -0,0 +1,84 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.ColorSwatch}>
<Helmet>
<meta name="description" content="Create a color swatch with CSS flexbox" />
<meta name="og:description" content="Create a color swatch with CSS flexbox" />
<meta name="twitter:description" content="Create a color swatch with CSS flexbox" />
<meta name="keywords" content="css color swatch, css flexbox" />
</Helmet>
<BrowserFrame
html={`
<div class="swatch">
<div class="swatch__item" style="background-color: ..."></div>
<!-- Repeat other items -->
...
</div>
`}
css={`
.swatch {
/* Wrap the items */
display: flex;
flex-wrap: wrap;
}
.swatch__item {
/* Rounded border */
border-radius: 9999px;
height: 1.5rem;
width: 1.5rem;
/* Space between items */
margin: 0.5rem;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '0.5rem',
}}
>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
}}
>
{
Array(9).fill(0).map((_, index) => (
<div
key={index}
style={{
backgroundColor: `rgba(0, 0, 0, 0.${index + 1})`,
borderRadius: '9999px',
height: '1.5rem',
margin: '0.5rem',
width: '1.5rem',
}}
/>
))
}
</div>
</div>
</BrowserFrame>
</DetailsLayout>
);
};
export default Details;