Skip to content

Commit 0a305e2

Browse files
phuocngphuocng
authored
Merge pull request phuocng#188 from phuoc-ng/inverted-corners
Pattern 101: Inverted corners
2 parents 5ea10a6 + aadb9fc commit 0a305e2

File tree

112 files changed

+249
-60
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+249
-60
lines changed

‎bin/generateScreenshot.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#!/usr/bin/env node
2+
3+
// Run this script from the root folder
4+
// $ npm run screenshot slug-of-pattern-here
5+
6+
const puppeteer = require('puppeteer');
7+
8+
const main = () => {
9+
const args = process.argv;
10+
if (!args || !Array.isArray(args) || args.length < 2) {
11+
console.log('Please specific the pattern: npm run screenshot slug-of-pattern-here');
12+
return;
13+
}
14+
15+
const pattern = args[2];
16+
17+
(async () => {
18+
const browser = await puppeteer.launch();
19+
20+
const page = await browser.newPage();
21+
await page.goto(`http://localhost:1234/patterns/${pattern}`);
22+
23+
await page.waitForSelector('.demo__live');
24+
const element = await page.$('.demo__live');
25+
await element.screenshot({
26+
path: `public/assets/patterns/${pattern}.png`
27+
});
28+
await page.close();
29+
30+
await browser.close();
31+
})();
32+
};
33+
34+
main();

‎bin/generateScreenshots.ts‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎client/constants/Pattern.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ enum Pattern {
4343
HolyGrail = 'Holy grail',
4444
InitialAvatar = 'Initial avatar',
4545
InputAddon = 'Input addon',
46+
InvertedCorners = 'Inverted corners',
4647
KeyboardShortcut = 'Keyboard shortcut',
4748
LayeredCard = 'Layered card',
4849
LinedPaper = 'Lined paper',

‎client/index.css‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,18 @@ a {
4141
max-width: 80rem;
4242
padding: 0 1rem;
4343
}
44-
.content {
45-
display: flex;
46-
margin: 4rem 0;
47-
}
4844
.main {
4945
flex: 1;
50-
overflow: auto;
46+
overflow: hidden;
47+
padding: 4rem 0;
5148
}
5249
.sidebar {
5350
display: none;
51+
padding: 4rem 0;
5452
}
5553

5654
/* Sidebar */
57-
.sidebar__inner {
55+
.sidebar__inner {
5856
position: sticky;
5957
top: 1rem;
6058
}
@@ -80,7 +78,7 @@ a {
8078
font-size: 2rem;
8179
line-height: 1.5;
8280
text-align: center;
83-
text-transform: capitalize;
81+
text-transform: uppercase;
8482
}
8583
.hero__subheading {
8684
color: var(--color-gray-9);
@@ -101,11 +99,11 @@ pre {
10199
color: #FFF;
102100
font-family: "Source Code Pro", monospace;
103101
font-size: 1rem;
104-
height: 100%;
105102
line-height: 1.5;
106103
margin: 0px;
107-
overflow: auto;
104+
overflow-x: auto;
108105
padding: 1rem;
106+
white-space: pre;
109107
}
110108

111109
.token.tag,
@@ -158,6 +156,9 @@ pre {
158156

159157
/* Responsive */
160158
@media (min-width: 640px) {
159+
.content {
160+
display: flex;
161+
}
161162
.sidebar {
162163
display: block;
163164
flex: 0 0 8rem;

‎client/pages/ExplorePage.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ const ExplorePage = () => {
136136
<CoverCard pattern={Pattern.FolderStructure} />
137137
<CoverCard pattern={Pattern.FullBackground} />
138138
<CoverCard pattern={Pattern.InitialAvatar} />
139+
<CoverCard pattern={Pattern.InvertedCorners} />
139140
<CoverCard pattern={Pattern.KeyboardShortcut} />
140141
<CoverCard pattern={Pattern.LayeredCard} />
141142
<CoverCard pattern={Pattern.LinedPaper} />

‎client/patterns/inverted-corners/Cover.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
2+
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
3+
*/
4+
5+
import * as React from 'react';
6+
7+
import Frame from '../../placeholders/Frame';
8+
9+
const Cover: React.FC<{}> = () => {
10+
return (
11+
<Frame>
12+
<div
13+
style={{
14+
height: '100%',
15+
padding: '1.5rem',
16+
}}
17+
>
18+
<div
19+
style={{
20+
backgroundColor: '#52525B',
21+
height: '100%',
22+
position: 'relative',
23+
width: '100%',
24+
}}
25+
>
26+
<div
27+
style={{
28+
backgroundColor: 'transparent',
29+
borderTopLeftRadius: '1rem',
30+
bottom: '-2rem',
31+
boxShadow: '0 -1rem 0 0 #52525B',
32+
height: '2rem',
33+
position: 'absolute',
34+
width: '1rem',
35+
}}
36+
/>
37+
</div>
38+
</div>
39+
</Frame>
40+
);
41+
};
42+
43+
export default Cover;

‎client/patterns/inverted-corners/Details.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/**
2+
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
3+
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
4+
*/
5+
6+
import * as React from 'react';
7+
import { Helmet } from 'react-helmet';
8+
9+
import Heading from '../../components/Heading';
10+
import Pattern from '../../constants/Pattern';
11+
import DetailsLayout from '../../layouts/DetailsLayout';
12+
import BrowserFrame from '../../placeholders/BrowserFrame';
13+
14+
import './inverted-corners.css';
15+
16+
const Details: React.FC<{}> = () => {
17+
return (
18+
<DetailsLayout pattern={Pattern.InvertedCorners}>
19+
<Helmet>
20+
<meta name="description" content="Create inverted corners with CSS" />
21+
<meta name="og:description" content="Create inverted corners with CSS" />
22+
<meta name="twitter:description" content="Create inverted corners with CSS" />
23+
<meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
24+
</Helmet>
25+
<BrowserFrame
26+
html={`
27+
<div class="inverted-corners">
28+
...
29+
</div>
30+
`}
31+
css={`
32+
:root {
33+
--inverted-corners-background: #52525B;
34+
--inverted-corners-size: 2rem;
35+
}
36+
37+
.inverted-corners {
38+
background-color: var(--inverted-corners-background);
39+
40+
/* Used to position the corner */
41+
position: relative;
42+
}
43+
44+
.inverted-corners::before {
45+
content: '';
46+
47+
/* Absolute position */
48+
bottom: calc(-2 * var(--inverted-corners-size));
49+
left: 0;
50+
position: absolute;
51+
52+
/* Size */
53+
height: calc(2 * var(--inverted-corners-size));
54+
width: var(--inverted-corners-size);
55+
56+
/* Border */
57+
background-color: transparent;
58+
border-top-left-radius: var(--inverted-corners-size);
59+
box-shadow: var(--inverted-corners-background)
60+
0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
61+
}
62+
`}
63+
>
64+
<div
65+
style={{
66+
alignItems: 'center',
67+
display: 'flex',
68+
flexDirection: 'column',
69+
height: '100%',
70+
justifyContent: 'center',
71+
padding: '1rem',
72+
}}
73+
>
74+
<div
75+
style={{
76+
height: '8rem',
77+
width: '16rem',
78+
}}
79+
>
80+
<div className='inverted-corners'></div>
81+
</div>
82+
</div>
83+
</BrowserFrame>
84+
85+
<section>
86+
<Heading title="Use case" />
87+
88+
<div
89+
style={{
90+
height: '8rem',
91+
width: '16rem',
92+
}}
93+
>
94+
<div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
95+
</div>
96+
</section>
97+
</DetailsLayout>
98+
);
99+
};
100+
101+
export default Details;

‎client/patterns/inverted-corners/inverted-corners.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
3+
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
4+
*/
5+
6+
:root {
7+
--inverted-corners-background: #52525B;
8+
--inverted-corners-size: 2rem;
9+
}
10+
11+
.inverted-corners {
12+
background-color: var(--inverted-corners-background);
13+
14+
/* Used to position the corner */
15+
position: relative;
16+
17+
/* Misc */
18+
height: 100%;
19+
}
20+
21+
.inverted-corners::before {
22+
content: '';
23+
24+
/* Absolute position */
25+
bottom: calc(-2 * var(--inverted-corners-size));
26+
left: 0;
27+
position: absolute;
28+
29+
/* Size */
30+
height: calc(2 * var(--inverted-corners-size));
31+
width: var(--inverted-corners-size);
32+
33+
/* Border */
34+
background-color: transparent;
35+
border-top-left-radius: var(--inverted-corners-size);
36+
box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
37+
}
38+
39+
/* Use case */
40+
.inverted-corners--speech {
41+
/* Border radius */
42+
border-bottom-right-radius: var(--inverted-corners-size);
43+
border-top-left-radius: var(--inverted-corners-size);
44+
border-top-right-radius: var(--inverted-corners-size);
45+
46+
/* Center the content */
47+
align-items: center;
48+
display: flex;
49+
justify-content: center;
50+
51+
/* Misc */
52+
color: #FFF;
53+
}

‎client/placeholders/BrowserFrame.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,13 @@ interface BrowserFrameProps {
1515

1616
const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
1717
return (
18-
<div className="demo">
19-
<div className="demo__html">
20-
<SampleCode fullHeight={true} lang="html" code={html} />
21-
</div>
22-
<div className="demo__css">
23-
<SampleCode fullHeight={true} lang="css" code={css} />
24-
</div>
18+
<>
19+
<SampleCode fullHeight={true} lang="html" code={html} />
20+
<SampleCode fullHeight={true} lang="css" code={css} />
2521
<div className="demo__live">
2622
{children}
2723
</div>
28-
</div>
24+
</>
2925
);
3026
};
3127

‎client/placeholders/browserFrame.css‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,8 @@
33
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
44
*/
55

6-
.demo {
7-
border: 1px solid rgba(0, 0, 0, 0.2);
8-
border-radius: 0.5rem;
9-
overflow: hidden;
10-
}
11-
126
.demo__live {
7+
border: 1px solid rgba(0, 0, 0, 0.2);
138
height: 32rem;
149
overflow: auto;
15-
}
16-
17-
.demo__css,
18-
.demo__html {
19-
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
20-
height: 16rem;
21-
overflow: auto;
2210
}

0 commit comments

Comments
 (0)