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

Add ribbon

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-01 17:16:45 +07:00
parent b40575e3a5
commit 6325192689
8 changed files with 251 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -35,6 +35,7 @@ enum Pattern {
RadialProgressBar = 'Radial progress bar',
RadioSwitch = 'Radio switch',
Rating = 'Rating',
Ribbon = 'Ribbon',
SameHeightColumns = 'Same height columns',
SearchBox = 'Search box',
Separator = 'Separator',

1
client/pages/ExplorePage.tsx
View File

@@ -118,6 +118,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.RadialProgressBar} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.Ribbon} />
<CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Separator} />

2
client/pages/MadeOf.tsx
View File

@@ -16,7 +16,7 @@ const MadeOf: React.FC<{}> = () => {
fontSize: '48px',
fontWeight: 600,
textAlign: 'center',
textTransform: 'uppercase',
textTransform: 'lowercase',
}}
>
How it's made

8
client/patterns/corner-ribbon/Details.tsx
View File

@@ -107,10 +107,8 @@ const Details: React.FC<{}> = () => {
<div style={{ padding: '32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can add a ribbon to
a <Link to='/patterns/pricing-table' style={{ textDecoration: 'none' }}>
pricing table
</Link> to indicate the most popular option.
You can add a ribbon to a <Link to='/patterns/pricing-table'> pricing table</Link> to
indicate the most popular option.
</div>
<div
@@ -181,7 +179,7 @@ const Details: React.FC<{}> = () => {
</div>
</section>
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
<RelatedPatterns patterns={[Pattern.FixedAtCorner, Pattern.Ribbon]} />
</DetailsLayout>
);
};

3
client/patterns/pricing-table/Details.tsx
View File

@@ -12,8 +12,7 @@ const Details: React.FC<{}> = () => {
<DetailsLayout title="Pricing table">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can
add <Link to='/patterns/corner-ribbon' style={{ textDecoration: 'none' }}>a ribbon</Link> to
You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to
indicate the most popular option.
</div>
<BrowserFrame

74
client/patterns/ribbon/Cover.tsx Normal file
View File

@@ -0,0 +1,74 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: '#BBB',
height: '24px',
position: 'relative',
width: '48px',
}}
>
<div
style={{
border: '12px solid #CCC',
borderLeftColor: 'transparent',
bottom: '-6px',
left: '-18px',
position: 'absolute',
zIndex: -1,
}}
/>
<div
style={{
border: '6px solid transparent',
borderBottomWidth: 0,
borderRightWidth: 0,
borderTopColor: '#AAA',
left: 0,
position: 'absolute',
top: '100%',
}}
/>
<div
style={{
border: '6px solid transparent',
borderBottomWidth: 0,
borderLeftWidth: 0,
borderTopColor: '#AAA',
position: 'absolute',
right: 0,
top: '100%',
}}
/>
<div
style={{
border: '12px solid #CCC',
borderRightColor: 'transparent',
bottom: '-6px',
position: 'absolute',
right: '-18px',
zIndex: -1,
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

169
client/patterns/ribbon/Details.tsx Normal file
View File

@@ -0,0 +1,169 @@
import React from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Ribbon">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: '#BBB',
display: 'flex',
height: '32px',
justifyContent: 'center',
padding: '0 16px',
position: 'relative',
width: '150px',
}}
>
<Rectangle />
<div
style={{
border: '16px solid #CCC',
borderLeftColor: 'transparent',
bottom: '-8px',
left: '-24px',
position: 'absolute',
zIndex: -1,
}}
/>
<div
style={{
border: '8px solid transparent',
borderBottomWidth: 0,
borderRightWidth: 0,
borderTopColor: '#AAA',
left: 0,
position: 'absolute',
top: '100%',
}}
/>
<div
style={{
border: '8px solid transparent',
borderBottomWidth: 0,
borderLeftWidth: 0,
borderTopColor: '#AAA',
position: 'absolute',
right: 0,
top: '100%',
}}
/>
<div
style={{
border: '16px solid #CCC',
borderRightColor: 'transparent',
bottom: '-8px',
position: 'absolute',
right: '-24px',
zIndex: -1,
}}
/>
</div>
</div>
)}
source={`
<div style="
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Background color */
background-color: #BBB;
/* Size */
height: 32px;
/* Use to position the corners */
position: relative;
">
<!-- The content -->
...
<!-- The left side -->
<div style="
/* Position */
bottom: -8px;
position: absolute;
left: -24px;
/* Displayed under the container */
z-index: -1;
/* Background */
border: 16px solid #CCC;
border-left-color: transparent;
"
/>
<!-- The left triangle displayed below the content -->
<div style="
left: 0;
position: absolute;
top: 100%;
/* Background */
border: 8px solid transparent;
border-bottom-width: 0;
border-right-width: 0;
border-top-color: #AAA;
" />
<!-- The right triangle displayed below the content -->
<div style="
position: absolute;
right: 0;
top: 100%;
/* Background */
border: 8px solid transparent;
border-bottom-width: 0;
border-left-width: 0;
border-top-color: #AAA;
" />
<!-- The right side -->
<div style="
/* Position */
bottom: -8px;
position: absolute;
right: -24px;
/* Displayed under the container */
z-index: -1;
/* Background */
border: 16px solid #CCC;
border-right-color: transparent;
"
/>
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.CornerRibbon]} />
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -40,6 +40,7 @@
<url><loc>https://csslayout.io/patterns/radial-progress-bar</loc></url>
<url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
<url><loc>https://csslayout.io/patterns/rating</loc></url>
<url><loc>https://csslayout.io/patterns/ribbon</loc></url>
<url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
<url><loc>https://csslayout.io/patterns/search-box</loc></url>
<url><loc>https://csslayout.io/patterns/separator</loc></url>