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

Merge pull request #44 from phuoc-ng/docked-corner

Browse Source 
Docked corner
This commit is contained in:
phuoc-ng
2019-11-23 22:14:21 +07:00
committed by GitHub
parent ddbfc40f14 07d6c19b1f
commit fbfe57544b
42 changed files with 890 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/App.jsx
View File

@@ -16,6 +16,7 @@ const App = () => {
<Route exact={true} path='/button-with-icon'><DetailsLoader pattern="Button with icon" /></Route>
<Route exact={true} path='/card'><DetailsLoader pattern="Card" /></Route>
<Route exact={true} path='/centering'><DetailsLoader pattern="Centering" /></Route>
<Route exact={true} path='/docked-at-corner'><DetailsLoader pattern="Docked at corner" /></Route>
<Route exact={true} path='/dot-navigation'><DetailsLoader pattern="Dot navigation" /></Route>
<Route exact={true} path='/feature-list'><DetailsLoader pattern="Feature list" /></Route>
<Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern="Fixed at corner" /></Route>

2
client/CoverCard.jsx
View File

@@ -12,7 +12,7 @@ const CoverCard = ({ pattern }) => {
className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
>
<CoverLoader pattern={pattern} />
<h4 className="f5 mv0 pt3">{pattern}</h4>
<h4 className="f5 mv0 pt3 fw6">{pattern}</h4>
</Link>
</div>
);

5
client/Home.jsx
View File

@@ -29,6 +29,10 @@ const Home = () => {
<div>No CSS hacks</div>
<div>🎉</div>
</li>
<li className="flex items-center justify-between">
<div>Real use cases</div>
<div>🎉</div>
</li>
<li className="flex items-center justify-between">
<div>Good practices</div>
<div className="br-pill ph2 white bg-dark-blue f6">soon</div>
@@ -62,6 +66,7 @@ const Home = () => {
<CoverCard pattern="Button with icon" />
<CoverCard pattern="Card" />
<CoverCard pattern="Centering" />
<CoverCard pattern="Docked at corner" />
<CoverCard pattern="Dot navigation" />
<CoverCard pattern="Feature list" />
<CoverCard pattern="Fixed at corner" />

4
client/layouts/DetailsLayout.jsx
View File

@@ -15,9 +15,7 @@ const DetailsLayout = ({ title, children }) => {
<div className="bt br bl b--black-20 relative br4 br--top">
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1>
<div className="pa5">
{children}
</div>
{children}
</div>
</Layout>
);

22
client/patterns/badge/Details.jsx
View File

@@ -7,15 +7,16 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Badge">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2 f4">
1
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2 f4">
1
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -38,8 +39,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

34
client/patterns/breadcrumb/Details.jsx
View File

@@ -8,21 +8,22 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Breadcrumb">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center">
<div className="w4"><Rectangle height={16} /></div>
<div className="mh1 f2 black-30">/</div>
<div className="w2"><Rectangle height={16} /></div>
<div className="mh1 f2 black-30">/</div>
<div className="w3"><Rectangle height={16} /></div>
<div className="mh1 f2 black-30">/</div>
<div className="w2"><Rectangle height={16} /></div>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center">
<div className="w4"><Rectangle height={16} /></div>
<div className="mh1 f2 black-30">/</div>
<div className="w2"><Rectangle height={16} /></div>
<div className="mh1 f2 black-30">/</div>
<div className="w3"><Rectangle height={16} /></div>
<div className="mh1 f2 black-30">/</div>
<div className="w2"><Rectangle height={16} /></div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -42,8 +43,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

28
client/patterns/button-with-icon/Details.jsx
View File

@@ -9,18 +9,19 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Button with icon">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
<div className="mr2"><Circle size={32} /></div>
<Rectangle />
</button>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<button className="w-100 h3 flex flex-row items-center ba b--black-30 br2 ph2">
<div className="mr2"><Circle size={32} /></div>
<Rectangle />
</button>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -39,8 +40,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

30
client/patterns/card/Details.jsx
View File

@@ -9,21 +9,22 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Card">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="b--black-30 ba br2 flex flex-column w5">
<Rectangle height={150} />
<div className="pa3" style={{ flex: 1 }}>
<div className="mb3"><Block numberOfBlocks={15} /></div>
<div className="w4">
<Rectangle height={32} />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="b--black-30 ba br2 flex flex-column w5">
<Rectangle height={150} />
<div className="pa3" style={{ flex: 1 }}>
<div className="mb3"><Block numberOfBlocks={15} /></div>
<div className="w4">
<Rectangle height={32} />
</div>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -50,8 +51,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

26
client/patterns/centering/Details.jsx
View File

@@ -9,16 +9,17 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Centering">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<Circle size={64} />
<div className="w-40 mt3"><Rectangle /></div>
<div className="w-30 mt2"><Rectangle /></div>
<div className="w-20 mt2"><Rectangle /></div>
</div>
}
source={
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<Circle size={64} />
<div className="w-40 mt3"><Rectangle /></div>
<div className="w-30 mt2"><Rectangle /></div>
<div className="w-20 mt2"><Rectangle /></div>
</div>
}
source={
<SampleCode
lang="html"
code={`
@@ -31,8 +32,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

20
client/patterns/docked-at-corner/Cover.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">
<div className="w2 h2 relative ba b--black-30 br2">
<div
className="absolute top-0 right-0 br-pill bg-dark-blue"
style={{ height: '16px', transform: 'translate(50%, -50%)', width: '16px' }}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

81
client/patterns/docked-at-corner/Details.jsx Normal file
View File

@@ -0,0 +1,81 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Docked at corner">
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w4 pa3 relative ba b--black-30 br2">
<Rectangle />
<div
className="absolute top-0 right-0 br-pill bg-dark-blue h2 w2"
style={{ transform: 'translate(50%, -50%)' }}
/>
</div>
</div>
}
source={
<SampleCode
lang="html"
code={`
<div style="
position: relative;
">
<!-- Docked at the top right corner -->
<div style="
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
">
...
</div>
...
</div>
`}
/>
}
/>
</div>
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
<div className="pa4">
<div className="mb4 w4 pa2 relative ba b--black-30 br2">
Inbox
<div
className="absolute top-0 right-0 br-pill bg-blue white pa1 flex items-center justify-center"
style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
>
5
</div>
</div>
<div className="w-40 h4 pa3 relative ba b--black-30 br2">
Modal
<div
className="absolute top-0 right-0 br-pill bg-red white pa1 flex items-center justify-center"
style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
>
&times;
</div>
</div>
</div>
</div>
</DetailsLayout>
);
};
export default Details;

30
client/patterns/dot-navigation/Details.jsx
View File

@@ -24,18 +24,19 @@ const Details = () => {
return (
<DetailsLayout title="Dot navigation">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<ul className="list ma0 pa0 flex items-center justify-center">
<Dot index={0} />
<Dot index={1} />
<Dot index={2} />
<Dot index={3} />
</ul>
</div>
}
source={
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<ul className="list ma0 pa0 flex items-center justify-center">
<Dot index={0} />
<Dot index={1} />
<Dot index={2} />
<Dot index={3} />
</ul>
</div>
}
source={
<SampleCode
lang="html"
code={`
@@ -69,8 +70,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

42
client/patterns/feature-list/Details.jsx
View File

@@ -11,28 +11,29 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Feature list">
<BrowserFrame
content={
<div className="flex h-100 items-center justify-center">
<div className="w-60">
<div className="flex flex-row mb4">
<div className="mh3"><Circle size={128} /></div>
<div style={{ flex: 1 }}>
<div className="mb4"><Rectangle height={8} /></div>
<Block numberOfBlocks={10} />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="flex h-100 items-center justify-center">
<div className="w-60">
<div className="flex flex-row mb4">
<div className="mh3"><Circle size={128} /></div>
<div style={{ flex: 1 }}>
<div className="mb4"><Rectangle height={8} /></div>
<Block numberOfBlocks={10} />
</div>
</div>
</div>
<div className="flex flex-row flex-row-reverse mb4">
<div className="mh3"><Circle size={128} /></div>
<div style={{ flex: 1 }}>
<div className="mb4"><Rectangle height={8} /></div>
<Block numberOfBlocks={15} />
<div className="flex flex-row flex-row-reverse mb4">
<div className="mh3"><Circle size={128} /></div>
<div style={{ flex: 1 }}>
<div className="mb4"><Rectangle height={8} /></div>
<Block numberOfBlocks={15} />
</div>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -66,8 +67,9 @@ code={`
...
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

40
client/patterns/fixed-at-corner/Details.jsx
View File

@@ -8,24 +8,25 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Fixed at corner">
<BrowserFrame
content={
<div className="relative h-100">
<div className="absolute top-0 left-0">
<Triangle size={64} corner="tl" />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="relative h-100">
<div className="absolute top-0 left-0">
<Triangle size={64} corner="tl" />
</div>
<div className="absolute top-0 right-0">
<Triangle size={64} corner="tr" />
</div>
<div className="absolute bottom-0 right-0">
<Triangle size={64} corner="br" />
</div>
<div className="absolute bottom-0 left-0">
<Triangle size={64} corner="bl" />
</div>
</div>
<div className="absolute top-0 right-0">
<Triangle size={64} corner="tr" />
</div>
<div className="absolute bottom-0 right-0">
<Triangle size={64} corner="br" />
</div>
<div className="absolute bottom-0 left-0">
<Triangle size={64} corner="bl" />
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -70,8 +71,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

44
client/patterns/holy-grail/Details.jsx
View File

@@ -9,29 +9,30 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Holy grail">
<BrowserFrame
content={
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30 pa3">
<div className="w-50"><Rectangle /></div>
</div>
<div className="flex-grow-1 flex flex-row">
<div className="b--black-30 br pa3 w-25">
<Block numberOfBlocks={10} />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30 pa3">
<div className="w-50"><Rectangle /></div>
</div>
<div className="pa3 flex-auto">
<Block numberOfBlocks={20} />
<div className="flex-grow-1 flex flex-row">
<div className="b--black-30 br pa3 w-25">
<Block numberOfBlocks={10} />
</div>
<div className="pa3 flex-auto">
<Block numberOfBlocks={20} />
</div>
<div className="b--black-30 bl pa3 w-20">
<Block numberOfBlocks={5} />
</div>
</div>
<div className="b--black-30 bl pa3 w-20">
<Block numberOfBlocks={5} />
<div className="flex-shrink-0 bt b--black-30 pa3">
<div className="w-40"><Rectangle /></div>
</div>
</div>
<div className="flex-shrink-0 bt b--black-30 pa3">
<div className="w-40"><Rectangle /></div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -74,8 +75,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

54
client/patterns/input-add-on/Details.jsx
View File

@@ -8,35 +8,36 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Input add-on">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br2 flex h2 w-100 mb3">
<div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-30">
<Rectangle />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br2 flex h2 w-100 mb3">
<div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-30">
<Rectangle />
</div>
<input type="text" className="bn pa2 flex-auto" style={{ marginRight: '1px' }} />
</div>
<input type="text" className="bn pa2 flex-auto" style={{ marginRight: '1px' }} />
</div>
<div className="b--black-30 ba br2 flex h2 w-100 mb3">
<input type="text" className="bn pa2 flex-auto" style={{ marginLeft: '1px' }} />
<div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-40">
<Rectangle />
<div className="b--black-30 ba br2 flex h2 w-100 mb3">
<input type="text" className="bn pa2 flex-auto" style={{ marginLeft: '1px' }} />
<div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-40">
<Rectangle />
</div>
</div>
</div>
<div className="b--black-30 ba br2 flex h2 w-100">
<div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-20">
<Rectangle />
</div>
<input type="text" className="bn pa2 flex-auto" />
<div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-30">
<Rectangle />
<div className="b--black-30 ba br2 flex h2 w-100">
<div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-20">
<Rectangle />
</div>
<input type="text" className="bn pa2 flex-auto" />
<div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-30">
<Rectangle />
</div>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -123,8 +124,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

34
client/patterns/media-object/Details.jsx
View File

@@ -10,22 +10,23 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Media object">
<BrowserFrame
content={
<div className="h-100 flex items-start pa3">
<div className="w4 h4 mr3">
<Square />
</div>
<div className="flex-auto">
<div className="w-80 mb4">
<Rectangle />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex items-start pa3">
<div className="w4 h4 mr3">
<Square />
</div>
<div className="flex-auto">
<div className="w-80 mb4">
<Rectangle />
</div>
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={15} /></div>
</div>
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={15} /></div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -54,8 +55,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

74
client/patterns/menu/Details.jsx
View File

@@ -9,45 +9,46 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Menu">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex flex-column w-40">
<div className="flex items-center h2 ph2 hover-bg-black-10">
<div className="w-40"><Rectangle /></div>
</div>
<div className="flex items-center h2 ph2 hover-bg-black-10">
<Circle />
<div className="w-50 ml1"><Rectangle /></div>
</div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="w-30"><Rectangle /></div>
<div>Ctrl + X</div>
</div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="w-70"><Rectangle /></div>
<div>Ctrl + C</div>
</div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="w-20"><Rectangle /></div>
<Circle />
</div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="flex items-center w-80">
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex flex-column w-40">
<div className="flex items-center h2 ph2 hover-bg-black-10">
<div className="w-40"><Rectangle /></div>
</div>
<div className="flex items-center h2 ph2 hover-bg-black-10">
<Circle />
<div className="w-50 ml1"><Rectangle /></div>
</div>
<Circle />
</div>
<div className="b--black-30 bb" style={{ height: '1px' }} />
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="w-40"><Rectangle /></div>
<div>Ctrl + V</div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="w-30"><Rectangle /></div>
<div>Ctrl + X</div>
</div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="w-70"><Rectangle /></div>
<div>Ctrl + C</div>
</div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="w-20"><Rectangle /></div>
<Circle />
</div>
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="flex items-center w-80">
<Circle />
<div className="w-50 ml1"><Rectangle /></div>
</div>
<Circle />
</div>
<div className="b--black-30 bb" style={{ height: '1px' }} />
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
<div className="w-40"><Rectangle /></div>
<div>Ctrl + V</div>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -110,8 +111,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

44
client/patterns/modal/Details.jsx
View File

@@ -10,28 +10,29 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Modal">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 w-50">
<div className="flex items-center justify-between bb b--black-30 pa3">
<div className="w-60"><Rectangle /></div>
<div className="black-70">
<Circle />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 w-50">
<div className="flex items-center justify-between bb b--black-30 pa3">
<div className="w-60"><Rectangle /></div>
<div className="black-70">
<Circle />
</div>
</div>
<div className="pa3">
<div className="mb3"><Block numberOfBlocks={10} /></div>
<Block numberOfBlocks={5} />
</div>
<div className="flex justify-end bt b--black-30 pa3">
<div className="w-30 mr2"><Rectangle height={32} /></div>
<div className="w-30"><Rectangle height={32} /></div>
</div>
</div>
<div className="pa3">
<div className="mb3"><Block numberOfBlocks={10} /></div>
<Block numberOfBlocks={5} />
</div>
<div className="flex justify-end bt b--black-30 pa3">
<div className="w-30 mr2"><Rectangle height={32} /></div>
<div className="w-30"><Rectangle height={32} /></div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -69,8 +70,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

28
client/patterns/notification/Details.jsx
View File

@@ -9,18 +9,19 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Notification">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex justify-between w-60">
<div className="pa3 w-80"><Block numberOfBlocks={5} /></div>
<button className="black-30 bn f2 flex h2 items-center justify-center w2" style={{ marginRight: '1px' }}>
<Circle />
</button>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex justify-between w-60">
<div className="pa3 w-80"><Block numberOfBlocks={5} /></div>
<button className="black-30 bn f2 flex h2 items-center justify-center w2" style={{ marginRight: '1px' }}>
<Circle />
</button>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -36,8 +37,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

54
client/patterns/pagination/Details.jsx
View File

@@ -9,32 +9,33 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Pagination">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="b--black-30 ba br2 flex">
<div className="b--black-30 br flex items-center justify-center pa2 w4">
<Rectangle />
</div>
<div className="b--black-30 br flex items-center justify-center pa2">
<Circle size={16} />
</div>
<div className="b--black-30 br flex items-center justify-center pa2">
<Circle size={16} />
</div>
<div className="b--black-30 br flex items-center justify-center pa2">
<Circle size={16} />
</div>
<div className="b--black-30 br flex items-center justify-center pa2">
<Circle size={16} />
</div>
<div className="flex items-center justify-center pa2 w3">
<Rectangle />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="b--black-30 ba br2 flex">
<div className="b--black-30 br flex items-center justify-center pa2 w4">
<Rectangle />
</div>
<div className="b--black-30 br flex items-center justify-center pa2">
<Circle size={16} />
</div>
<div className="b--black-30 br flex items-center justify-center pa2">
<Circle size={16} />
</div>
<div className="b--black-30 br flex items-center justify-center pa2">
<Circle size={16} />
</div>
<div className="b--black-30 br flex items-center justify-center pa2">
<Circle size={16} />
</div>
<div className="flex items-center justify-center pa2 w3">
<Rectangle />
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -73,8 +74,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

38
client/patterns/previous-next-buttons/Details.jsx
View File

@@ -8,24 +8,25 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Previous and next buttons">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-50">
<div className="flex items-center justify-between pa2 w-100 h2">
<a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30">
<div className="mr2">&lt;</div>
<Rectangle />
</a>
<a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30">
<Rectangle />
<div className="ml2">&gt;</div>
</a>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-50">
<div className="flex items-center justify-between pa2 w-100 h2">
<a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30">
<div className="mr2">&lt;</div>
<Rectangle />
</a>
<a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30">
<Rectangle />
<div className="ml2">&gt;</div>
</a>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -42,8 +43,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

62
client/patterns/pricing-table/Details.jsx
View File

@@ -10,38 +10,39 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Pricing table">
<BrowserFrame
content={
<div className="h-100 flex items-center justify-center pa3">
<div className="w-60 flex items-center justify-center">
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex items-center justify-center pa3">
<div className="w-60 flex items-center justify-center">
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={10} />
</div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={20} />
</div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={10} />
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={10} />
</div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={20} />
</div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa3 mh2" style={{ flex: 1 }}>
<div className="mb3 w-60"><Rectangle /></div>
<div className="mb3"><Circle size={64} /></div>
<div className="mb3 w-100">
<Block numberOfBlocks={10} />
</div>
<div className="w-40"><Rectangle height={32} /></div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -87,8 +88,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

24
client/patterns/progress-bar/Details.jsx
View File

@@ -13,17 +13,18 @@ const Details = () => {
return (
<DetailsLayout title="Progress bar">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="h1 w-50 br-pill bg-black-10">
<div className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7" style={{ width: `${progress}%` }}>
{progress}%
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="h1 w-50 br-pill bg-black-10">
<div className="br-pill h-100 bg-blue flex items-center justify-center pa1 white f7" style={{ width: `${progress}%` }}>
{progress}%
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -56,8 +57,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

66
client/patterns/questions-and-answers/Details.jsx
View File

@@ -29,38 +29,39 @@ const Details = () => {
return (
<DetailsLayout title="Questions and answers">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-60">
<div className="mb3 bt bb b--black-30">
<Item
index={0}
title={<div className="w-40"><Rectangle /></div>}
>
<div className="mb3"><Block numberOfBlocks={10} /></div>
</Item>
</div>
<div className="mb3 bb b--black-30">
<Item
index={1}
title={<div className="w-80"><Rectangle /></div>}
>
<div className="mb3"><Block numberOfBlocks={15} /></div>
</Item>
</div>
<div className="bb b--black-30">
<Item
index={2}
title={<div className="w-60"><Rectangle /></div>}
>
<div className="mb3"><Block numberOfBlocks={10} /></div>
</Item>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-60">
<div className="mb3 bt bb b--black-30">
<Item
index={0}
title={<div className="w-40"><Rectangle /></div>}
>
<div className="mb3"><Block numberOfBlocks={10} /></div>
</Item>
</div>
<div className="mb3 bb b--black-30">
<Item
index={1}
title={<div className="w-80"><Rectangle /></div>}
>
<div className="mb3"><Block numberOfBlocks={15} /></div>
</Item>
</div>
<div className="bb b--black-30">
<Item
index={2}
title={<div className="w-60"><Rectangle /></div>}
>
<div className="mb3"><Block numberOfBlocks={10} /></div>
</Item>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -85,8 +86,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

70
client/patterns/same-height-columns/Details.jsx
View File

@@ -9,43 +9,44 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Same height columns">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="flex h-100 w-100">
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
<Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}>
<Block numberOfBlocks={10} />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center pa3">
<div className="flex h-100 w-100">
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
<Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}>
<Block numberOfBlocks={10} />
</div>
<div className="pa3 w4">
<Rectangle height={32} />
</div>
</div>
<div className="pa3 w4">
<Rectangle height={32} />
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
<Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}>
<div className="mb3"><Block numberOfBlocks={15} /></div>
<Block numberOfBlocks={5} />
</div>
<div className="pa3 w4">
<Rectangle height={32} />
</div>
</div>
</div>
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
<Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}>
<div className="mb3"><Block numberOfBlocks={15} /></div>
<Block numberOfBlocks={5} />
</div>
<div className="pa3 w4">
<Rectangle height={32} />
</div>
</div>
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
<Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}>
<div className="mb3"><Block numberOfBlocks={5} /></div>
<Block numberOfBlocks={10} />
</div>
<div className="pa3 w4">
<Rectangle height={32} />
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
<Rectangle height={200} />
<div className="pa3" style={{ flex: 1 }}>
<div className="mb3"><Block numberOfBlocks={5} /></div>
<Block numberOfBlocks={10} />
</div>
<div className="pa3 w4">
<Rectangle height={32} />
</div>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -80,8 +81,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

38
client/patterns/search-box/Details.jsx
View File

@@ -8,27 +8,28 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Search box">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="mb3 b--black-30 ba br1 flex">
<input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
<div className="pa2">
<Circle />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="mb3 b--black-30 ba br1 flex">
<input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
<div className="pa2">
<Circle />
</div>
</div>
</div>
<div className="b--black-30 ba br1 flex flex-row-reverse">
<input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
<div className="pa2">
<Circle />
<div className="b--black-30 ba br1 flex flex-row-reverse">
<input type="text" placeholder="Search" className="pa1 b--transparent" style={{ flex: 1 }} />
<div className="pa2">
<Circle />
</div>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -56,8 +57,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

26
client/patterns/separator/Details.jsx
View File

@@ -8,18 +8,19 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Separator">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center w-60 relative">
<div className="absolute bg-white ph2" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
<div className="w4"><Rectangle height={16} /></div>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center w-60 relative">
<div className="absolute bg-white ph2" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
<div className="w4"><Rectangle height={16} /></div>
</div>
<div className="bb b--black-30 w-100" style={{ height: '1px' }} />
</div>
<div className="bb b--black-30 w-100" style={{ height: '1px' }} />
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -54,8 +55,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

40
client/patterns/sidebar/Details.jsx
View File

@@ -8,24 +8,25 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Sidebar">
<div className="lh-copy mb3">Try to scroll the main content!</div>
<BrowserFrame
content={
<div className="h-100 flex">
<div className="b--black-30 br flex flex-column justify-end pa3 w-30">
<div className="mb3"><Block numberOfBlocks={5} /></div>
<div className="w-80"><Block numberOfBlocks={4} /></div>
<div className="ph4 pv5">
<div className="lh-copy mb3">Try to scroll the main content!</div>
<BrowserFrame
content={
<div className="h-100 flex">
<div className="b--black-30 br flex flex-column justify-end pa3 w-30">
<div className="mb3"><Block numberOfBlocks={5} /></div>
<div className="w-80"><Block numberOfBlocks={4} /></div>
</div>
<div className="flex-grow-1 pa3 overflow-scroll">
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="w-80"><Block numberOfBlocks={10} /></div>
</div>
</div>
<div className="flex-grow-1 pa3 overflow-scroll">
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="w-80"><Block numberOfBlocks={10} /></div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -45,8 +46,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

132
client/patterns/simple-grid/Details.jsx
View File

@@ -8,82 +8,83 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Simple grid">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-60">
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w-60">
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
<div className="ph2" style={{ flex: '0 0 50%' }}>
<Rectangle height={32} />
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
<div className="ph2" style={{ flex: '0 0 50%' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
<div className="ph2" style={{ flex: '0 0 33.3333%' }}>
<Rectangle height={32} />
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
<div className="ph2" style={{ flex: '0 0 33.3333%' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
</div>
<div className="flex" style={{ margin: '0 -8px 0 -8px' }}>
<div className="ph2" style={{ flex: '0 0 25%' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '0 0 33.3333%' }}>
<Rectangle height={32} />
<div className="flex" style={{ margin: '0 -8px 0 -8px' }}>
<div className="ph2" style={{ flex: '0 0 25%' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '1' }}>
<Rectangle height={32} />
</div>
<div className="ph2" style={{ flex: '0 0 33.3333%' }}>
<Rectangle height={32} />
</div>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -112,8 +113,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

26
client/patterns/slider/Details.jsx
View File

@@ -9,17 +9,18 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Slider">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center h1 w5">
<div className="w-20"><Rectangle height={2} /></div>
<Circle size={32} />
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center h1 w5">
<div className="w-20"><Rectangle height={2} /></div>
<Circle size={32} />
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -66,8 +67,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

30
client/patterns/split-navigation/Details.jsx
View File

@@ -8,18 +8,19 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Split navigation">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<ul className="list ma0 b--black-30 ba br3 flex items-center pa3 w-60">
<li className="w-20 mr1"><Rectangle /></li>
<li className="w-10 mr1"><Rectangle /></li>
<li className="w-20 mr1"><Rectangle /></li>
<li className="w-10 ml-auto"><Rectangle /></li>
</ul>
</div>
}
source={
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<ul className="list ma0 b--black-30 ba br3 flex items-center pa3 w-60">
<li className="w-20 mr1"><Rectangle /></li>
<li className="w-10 mr1"><Rectangle /></li>
<li className="w-20 mr1"><Rectangle /></li>
<li className="w-10 ml-auto"><Rectangle /></li>
</ul>
</div>
}
source={
<SampleCode
lang="html"
code={`
@@ -47,8 +48,9 @@ code={`
</ul>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

36
client/patterns/split-screen/Details.jsx
View File

@@ -10,23 +10,24 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Split screen">
<BrowserFrame
content={
<div className="h-100 flex">
<div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
<div className="mb3"><Circle size={128} /></div>
<div className="w-60"><Rectangle /></div>
</div>
<div className="flex flex-column justify-center" style={{ flex: 1 }}>
<div className="pa4">
<div className="mb4"><Rectangle /></div>
<div className="mb4"><Block numberOfBlocks={15} /></div>
<Block numberOfBlocks={10} />
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex">
<div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
<div className="mb3"><Circle size={128} /></div>
<div className="w-60"><Rectangle /></div>
</div>
<div className="flex flex-column justify-center" style={{ flex: 1 }}>
<div className="pa4">
<div className="mb4"><Rectangle /></div>
<div className="mb4"><Block numberOfBlocks={15} /></div>
<Block numberOfBlocks={10} />
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -43,8 +44,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

34
client/patterns/stepper-input/Details.jsx
View File

@@ -13,22 +13,23 @@ const Details = () => {
return (
<DetailsLayout title="Stepper input">
<div className="lh-copy mb3">
The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
</div>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex h2 w4">
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={decrease}>-</button>
<div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}>
<input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} />
<div className="ph4 pv5">
<div className="lh-copy mb3">
The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
</div>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="b--black-30 ba br2 flex h2 w4">
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={decrease}>-</button>
<div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}>
<input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} />
</div>
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={increase}>+</button>
</div>
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={increase}>+</button>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -75,8 +76,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

40
client/patterns/sticky-footer/Details.jsx
View File

@@ -9,24 +9,25 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Sticky footer">
<div className="lh-copy mb3">
The footer always sticks to the bottom if the main content is short.
</div>
<BrowserFrame
content={
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30 pa3">
<div className="w-50"><Rectangle /></div>
<div className="ph4 pv5">
<div className="lh-copy mb3">
The footer always sticks to the bottom if the main content is short.
</div>
<BrowserFrame
content={
<div className="h-100 flex flex-column">
<div className="flex-shrink-0 bb b--black-30 pa3">
<div className="w-50"><Rectangle /></div>
</div>
<div className="flex-grow-1 pa3">
<Block numberOfBlocks={20} />
</div>
<div className="flex-shrink-0 bt b--black-30 pa3">
<div className="w-40"><Rectangle /></div>
</div>
</div>
<div className="flex-grow-1 pa3">
<Block numberOfBlocks={20} />
</div>
<div className="flex-shrink-0 bt b--black-30 pa3">
<div className="w-40"><Rectangle /></div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -47,8 +48,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

34
client/patterns/sticky-header/Details.jsx
View File

@@ -9,21 +9,22 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Sticky header">
<div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
<BrowserFrame
content={
<div>
<div className="top-0 bg-white bb b--black-30 pa3" style={{ position: 'sticky' }}>
<div className="w-50"><Rectangle /></div>
<div className="ph4 pv5">
<div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
<BrowserFrame
content={
<div>
<div className="top-0 bg-white bb b--black-30 pa3" style={{ position: 'sticky' }}>
<div className="w-50"><Rectangle /></div>
</div>
<div className="pa3">
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={40} /></div>
<div><Block numberOfBlocks={30} /></div>
</div>
</div>
<div className="pa3">
<div className="mb4"><Block numberOfBlocks={20} /></div>
<div className="mb4"><Block numberOfBlocks={40} /></div>
<div><Block numberOfBlocks={30} /></div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -40,8 +41,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

28
client/patterns/switch/Details.jsx
View File

@@ -10,17 +10,18 @@ const Details = () => {
return (
<DetailsLayout title="Switch">
<div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
<input type="checkbox" className="dn" checked={checked} onClick={toggle} />
<div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
</label>
</div>
}
source={
<div className="ph4 pv5">
<div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
<input type="checkbox" className="dn" checked={checked} onClick={toggle} />
<div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
</label>
</div>
}
source={
<SampleCode
lang="html"
code={`
@@ -63,8 +64,9 @@ code={`
</label>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

50
client/patterns/tab/Details.jsx
View File

@@ -26,29 +26,30 @@ const Details = () => {
return (
<DetailsLayout title="Tab">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center justify-center">
<Tab tabIndex={0}>
<div className="w3">
<Rectangle height={8} />
</div>
</Tab>
<Tab tabIndex={1}>
<div className="w2">
<Rectangle height={8} />
</div>
</Tab>
<Tab tabIndex={2}>
<div className="w4">
<Rectangle height={8} />
</div>
</Tab>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex items-center justify-center">
<Tab tabIndex={0}>
<div className="w3">
<Rectangle height={8} />
</div>
</Tab>
<Tab tabIndex={1}>
<div className="w2">
<Rectangle height={8} />
</div>
</Tab>
<Tab tabIndex={2}>
<div className="w4">
<Rectangle height={8} />
</div>
</Tab>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -82,8 +83,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

68
client/patterns/toggle-password-visibility/Details.jsx
View File

@@ -10,39 +10,40 @@ const Details = () => {
return (
<DetailsLayout title="Toggle password visibility">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br1 flex">
<input type={visible ? 'text' : 'password'} autoComplete="off" className="pa1 b--transparent" style={{ flex: 1 }} />
<button className="b--transparent pa2" onClick={toggle}>
<svg
viewBox="0 0 24 24"
style={{
height: '24px',
fill: "none",
stroke: "rgba(0, 0, 0, 0.4)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '24px',
}}
>
<path
d={
visible
? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
: `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
}
/>
</svg>
</button>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="w5">
<div className="b--black-30 ba br1 flex">
<input type={visible ? 'text' : 'password'} autoComplete="off" className="pa1 b--transparent" style={{ flex: 1 }} />
<button className="b--transparent pa2" onClick={toggle}>
<svg
viewBox="0 0 24 24"
style={{
height: '24px',
fill: "none",
stroke: "rgba(0, 0, 0, 0.4)",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '24px',
}}
>
<path
d={
visible
? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
: `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
}
/>
</svg>
</button>
</div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -69,8 +70,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

60
client/patterns/wizard/Details.jsx
View File

@@ -10,38 +10,39 @@ import SampleCode from '../../SampleCode';
const Details = () => {
return (
<DetailsLayout title="Wizard">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex w-80">
<div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center">
<div style={{ flex: 1 }} />
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }}><Line /></div>
<div className="ph4 pv5">
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="flex w-80">
<div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center">
<div style={{ flex: 1 }} />
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }}><Line /></div>
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
</div>
<div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center">
<div style={{ flex: 1 }}><Line /></div>
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }}><Line /></div>
<div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center">
<div style={{ flex: 1 }}><Line /></div>
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }}><Line /></div>
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
</div>
<div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center">
<div style={{ flex: 1 }}><Line /></div>
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }} />
<div style={{ flex: 1 }}>
<div className="mb3 flex items-center justify-center">
<div style={{ flex: 1 }}><Line /></div>
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
<div style={{ flex: 1 }} />
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
</div>
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
</div>
</div>
</div>
}
source={
}
source={
<SampleCode
lang="html"
code={`
@@ -110,8 +111,9 @@ code={`
</div>
`}
/>
}
/>
}
/>
</div>
</DetailsLayout>
);
};

4
client/placeholders/BrowserFrame.jsx
View File

@@ -27,7 +27,7 @@ const BrowserFrame = ({ content, source }) => {
}}
>
<div
className="overflow-scroll absolute top-0 left-0 h-100 w-100"
className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
style={{
backfaceVisibility: 'hidden',
WebkitBackfaceVisibility: 'hidden',
@@ -35,7 +35,7 @@ const BrowserFrame = ({ content, source }) => {
{content}
</div>
<div
className="absolute top-0 left-0 h-100 w-100"
className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
style={{
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',

2
sitemap.xml
View File

@@ -9,6 +9,7 @@
<url><loc>https://csslayout.io/button-with-icon</loc></url>
<url><loc>https://csslayout.io/card</loc></url>
<url><loc>https://csslayout.io/centering</loc></url>
<url><loc>https://csslayout.io/docked-at-corner</loc></url>
<url><loc>https://csslayout.io/dot-navigation</loc></url>
<url><loc>https://csslayout.io/feature-list</loc></url>
<url><loc>https://csslayout.io/fixed-at-corner</loc></url>
@@ -21,6 +22,7 @@
<url><loc>https://csslayout.io/previous-next-buttons</loc></url>
<url><loc>https://csslayout.io/pricing-table</loc></url>
<url><loc>https://csslayout.io/progress-bar</loc></url>
<url><loc>https://csslayout.io/questions-and-answers</loc></url>
<url><loc>https://csslayout.io/same-height-columns</loc></url>
<url><loc>https://csslayout.io/search-box</loc></url>
<url><loc>https://csslayout.io/separator</loc></url>