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

Add price tag pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-04-03 20:41:05 +07:00
parent d9dc1988a1
commit ad7fc3508e
7 changed files with 246 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -56,6 +56,7 @@ enum Pattern {
PresenceIndicator = 'Presence indicator',
PreviousNextButtons = 'Previous next buttons',
PricingTable = 'Pricing table',
PriceTag = 'Price tag',
PropertyList = 'Property list',
ProgressBar = 'Progress bar',
QuestionsAndAnswers = 'Questions and answers',

1
client/pages/ExplorePage.tsx
View File

@@ -128,6 +128,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.LinedPaper} />
<CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.OverlayPlayButton} />
<CoverCard pattern={Pattern.PriceTag} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />

66
client/patterns/price-tag/Cover.tsx Normal file
View File

@@ -0,0 +1,66 @@
/**
* 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',
height: '100%',
justifyContent: 'center',
padding: '1.5rem',
}}
>
<div
style={{
alignItems: 'center',
background: 'rgba(0, 0, 0, .3)',
color: '#FFF',
display: 'flex',
height: '2rem',
justifyContent: 'center',
position: 'relative',
width: '100%',
}
}>
<div
style={{
borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
borderStyle: 'solid',
borderWidth: '1rem 1rem 1rem 0rem',
height: 0,
left: 0,
position: 'absolute',
top: 0,
transform: 'translate(-100%, 0)',
width: 0,
}}
/>
<div
style={{
background: '#FFF',
borderRadius: '9999rem',
height: '0.5rem',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-0.5rem, -50%)',
width: '0.5rem',
}}
/>
99.9$
</div>
</div>
</Frame>
);
};
export default Cover;

111
client/patterns/price-tag/Details.tsx Normal file
View File

@@ -0,0 +1,111 @@
/**
* 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 RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import './price-tag.css';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout pattern={Pattern.PriceTag}>
<Helmet>
<meta name="description" content="Create a price tag with CSS" />
<meta name="keywords" content="css price tag" />
</Helmet>
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="price-tag">
...
</div>
`}
css={`
:root {
--price-tag-background: rgba(0, 0, 0, 0.3);
--price-tag-height: 2rem;
}
.price-tag {
background: var(--price-tag-background);
color: #FFF;
/* Center the price */
align-items: center;
display: flex;
justify-content: center;
/* Used to position the triangle */
position: relative;
/* Size */
height: var(--price-tag-height);
/* Spacing */
padding: 0.25rem 0.5rem;
}
/* The triangle */
.price-tag::before {
content: '';
border-color: transparent var(--price-tag-background) transparent transparent;
border-style: solid;
border-width: calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2)
0rem;
/* Position */
left: 0px;
position: absolute;
top: 0px;
transform: translate(-100%, 0px);
}
/* The dot */
.price-tag::after {
content: '';
/* Make it like a cirle */
background: #FFF;
border-radius: 9999rem;
/* Position */
left: 0;
position: absolute;
top: 50%;
transform: translate(-0.5rem, -50%);
/* Size */
height: 0.5rem;
width: 0.5rem;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div className="price-tag">99.99$</div>
</div>
</BrowserFrame>
</div>
<RelatedPatterns patterns={[Pattern.TriangleButtons]} />
</DetailsLayout>
);
};
export default Details;

65
client/patterns/price-tag/price-tag.css Normal file
View File

@@ -0,0 +1,65 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
:root {
--price-tag-background: rgba(0, 0, 0, 0.3);
--price-tag-height: 2rem;
}
.price-tag {
background: var(--price-tag-background);
color: #FFF;
/* Center the price */
align-items: center;
display: flex;
justify-content: center;
/* Used to position the triangle */
position: relative;
/* Size */
height: var(--price-tag-height);
/* Spacing */
padding: 0.25rem 0.5rem;
}
/* The triangle */
.price-tag::before {
content: '';
border-color: transparent var(--price-tag-background) transparent transparent;
border-style: solid;
border-width: calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2)
0rem;
/* Position */
left: 0px;
position: absolute;
top: 0px;
transform: translate(-100%, 0px);
}
/* The dot */
.price-tag::after {
content: '';
/* Make it like a cirle */
background: #FFF;
border-radius: 9999rem;
/* Position */
left: 0;
position: absolute;
top: 50%;
transform: translate(-0.5rem, -50%);
/* Size */
height: 0.5rem;
width: 0.5rem;
}

2
client/patterns/triangle-buttons/Details.tsx
View File

@@ -238,7 +238,7 @@ css={`
</BrowserFrame>
</div>
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Voting]} />
<RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.PriceTag, Pattern.Voting]} />
</DetailsLayout>
);
};

1
public/sitemap.xml
View File

@@ -51,6 +51,7 @@
<url><loc>https://csslayout.io/patterns/popover-arrow</loc></url>
<url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
<url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
<url><loc>https://csslayout.io/patterns/price-tag</loc></url>
<url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
<url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
<url><loc>https://csslayout.io/patterns/property-list</loc></url>