mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-22 13:42:50 +02:00
Reorganize folders
This commit is contained in:
Phuoc Nguyen
17
client/patterns/badge/Cover.jsx
Normal file
17
client/patterns/badge/Cover.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
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="flex flex-column items-center justify-center white bg-black-30 br-pill w2 h2">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
47
client/patterns/badge/Details.jsx
Normal file
47
client/patterns/badge/Details.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
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>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
color: #FFF;
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
">
|
||||
1
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
22
client/patterns/breadcrumb/Cover.jsx
Normal file
22
client/patterns/breadcrumb/Cover.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center justify-center h2 w-80">
|
||||
<div className="w-20"><Rectangle /></div>
|
||||
<div className="mh1 black">/</div>
|
||||
<div className="w-20"><Rectangle /></div>
|
||||
<div className="mh1 black">/</div>
|
||||
<div className="w-20"><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
51
client/patterns/breadcrumb/Details.jsx
Normal file
51
client/patterns/breadcrumb/Details.jsx
Normal file
@@ -0,0 +1,51 @@
|
||||
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="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>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Content is centered vertically */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
<!-- Breadcrumb item -->
|
||||
<a>...</a>
|
||||
|
||||
<!-- Separator -->
|
||||
<div style="margin: 0 8px;">/</span>
|
||||
|
||||
<!-- Repeated items and separators -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
20
client/patterns/button-with-icon/Cover.jsx
Normal file
20
client/patterns/button-with-icon/Cover.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa2">
|
||||
<div className="w-100 flex flex-row items-center ba b--black-30 br2 pa1">
|
||||
<div className="mr1"><Circle /></div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
48
client/patterns/button-with-icon/Details.jsx
Normal file
48
client/patterns/button-with-icon/Details.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<button style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- Icon -->
|
||||
...
|
||||
|
||||
<!-- Label -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
28
client/patterns/card/Cover.jsx
Normal file
28
client/patterns/card/Cover.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="flex flex-column h-100 pa2">
|
||||
<div className="w-100 mb2">
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb1"><Line /></div>
|
||||
<div className="w-60 mb2"><Line /></div>
|
||||
<div className="w-30">
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
59
client/patterns/card/Details.jsx
Normal file
59
client/patterns/card/Details.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<!-- Cover -->
|
||||
<div style="
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="
|
||||
/* Take available height */
|
||||
flex: 1;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
23
client/patterns/centering/Cover.jsx
Normal file
23
client/patterns/centering/Cover.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<Circle />
|
||||
<div className="w-50 mv1">
|
||||
<Line />
|
||||
</div>
|
||||
<div className="w-40 mv1">
|
||||
<Line />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
40
client/patterns/centering/Details.jsx
Normal file
40
client/patterns/centering/Details.jsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
20
client/patterns/dot-navigation/Cover.jsx
Normal file
20
client/patterns/dot-navigation/Cover.jsx
Normal 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="flex items-center">
|
||||
<div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
|
||||
<div className="mh1 br-pill bg-black-30" style={{ height: '8px', width: '8px' }} />
|
||||
<div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
|
||||
<div className="mh1 br-pill ba b--black-30" style={{ height: '8px', width: '8px' }} />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
78
client/patterns/dot-navigation/Details.jsx
Normal file
78
client/patterns/dot-navigation/Details.jsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import SampleCode from '../../SampleCode';
|
||||
|
||||
const Details = () => {
|
||||
const [activeItem, setActiveItem] = useState(0);
|
||||
|
||||
const Dot = ({ index }) => {
|
||||
const isActive = index === activeItem;
|
||||
const click = () => setActiveItem(index);
|
||||
return (
|
||||
<li
|
||||
className={`pointer mh1 br-pill ${isActive ? 'bg-black-30' : 'ba b--black-30'}`}
|
||||
style={{
|
||||
height: '12px',
|
||||
width: '12px',
|
||||
}}
|
||||
onClick={click}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<ul style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Reset styles */
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
">
|
||||
<li style="
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
|
||||
/* Active dot */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
|
||||
/* Inactive dot */
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
|
||||
/* OPTIONAL: Spacing between dots */
|
||||
margin: 0 4px;
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
35
client/patterns/feature-list/Cover.jsx
Normal file
35
client/patterns/feature-list/Cover.jsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="flex flex-column justify-center h-100 pa2 w-100">
|
||||
<div className="flex w-100 mb2">
|
||||
<div className="mh1"><Circle size={32} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="w-100 mb2"><Rectangle height={4} /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-100 flex-row-reverse">
|
||||
<div className="mh1"><Circle size={32} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="w-100 mb2"><Rectangle height={4} /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
75
client/patterns/feature-list/Details.jsx
Normal file
75
client/patterns/feature-list/Details.jsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<!-- Feature item -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* OPTIONAL: Reverse the order of image and content */
|
||||
flex-direction: row-reverse;
|
||||
|
||||
/* OPTIONAL: Spacing between items */
|
||||
margin: 16px 0;
|
||||
">
|
||||
<!-- Image -->
|
||||
<div style="
|
||||
width: 128px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repeated items -->
|
||||
...
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
18
client/patterns/fixed-at-corner/Cover.jsx
Normal file
18
client/patterns/fixed-at-corner/Cover.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Triangle from '../../placeholders/Triangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="relative">
|
||||
<div className="absolute top-0 left-0">
|
||||
<Triangle size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
79
client/patterns/fixed-at-corner/Details.jsx
Normal file
79
client/patterns/fixed-at-corner/Details.jsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Triangle from '../../placeholders/Triangle';
|
||||
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>
|
||||
<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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
position: relative;
|
||||
">
|
||||
<!-- Top-left corner -->
|
||||
<div style="
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Top-right corner -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Bottom-right corner -->
|
||||
<div style="
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Bottom-left corner -->
|
||||
<div style="
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
48
client/patterns/holy-grail/Cover.jsx
Normal file
48
client/patterns/holy-grail/Cover.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column">
|
||||
<div className="flex-shrink-0 bb b--black-30">
|
||||
<div className="w-100 flex items-center pa2">
|
||||
<div className="w1"><Line /></div>
|
||||
<div className="w1 ml-auto"><Line /></div>
|
||||
<div className="w1 ml1"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow-1 flex flex-row">
|
||||
<div className="b--black-30 br pa2 w-30">
|
||||
<div className="mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
<div className="pa2 flex-auto">
|
||||
<div className="mb1"><Line /></div>
|
||||
<div className="mb1 w-60"><Line /></div>
|
||||
<div className="mb2 w-80"><Line /></div>
|
||||
|
||||
<div className="mb1"><Line /></div>
|
||||
<div className="mb1 w-60"><Line /></div>
|
||||
<div className="mb1 w-80"><Line /></div>
|
||||
</div>
|
||||
<div className="b--black-30 bl pa2 w-30">
|
||||
<div className="mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 bt b--black-30">
|
||||
<div className="w-100 flex items-center pa2">
|
||||
<div className="w1"><Line /></div>
|
||||
<div className="w1 ml1"><Line /></div>
|
||||
<div className="w1 ml1"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
83
client/patterns/holy-grail/Details.jsx
Normal file
83
client/patterns/holy-grail/Details.jsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
<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="flex-shrink-0 bt b--black-30 pa3">
|
||||
<div className="w-40"><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<header>
|
||||
...
|
||||
</header>
|
||||
<main style="
|
||||
/* Take the remaining height */
|
||||
flex-grow: 1;
|
||||
|
||||
/* Layout the left sidebar, main content and right sidebar */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
">
|
||||
<!-- Left sidebar -->
|
||||
<aside style="
|
||||
width: 25%;
|
||||
">...</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<article style="
|
||||
/* Take the remaining width */
|
||||
flex-grow: 1;
|
||||
">
|
||||
...
|
||||
</article>
|
||||
|
||||
<!-- Right sidebar -->
|
||||
<nav style="
|
||||
width: 20%;
|
||||
">...</nav>
|
||||
</main>
|
||||
<footer>
|
||||
...
|
||||
</footer>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
23
client/patterns/input-add-on/Cover.jsx
Normal file
23
client/patterns/input-add-on/Cover.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex items-center justify-center pa2">
|
||||
<div className="b--black-30 ba br2 flex w-100 h1">
|
||||
<div className="b--black-30 br flex items-center justify-center w-30 ph2">
|
||||
<div className="w-100">
|
||||
<Line />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
132
client/patterns/input-add-on/Details.jsx
Normal file
132
client/patterns/input-add-on/Details.jsx
Normal file
@@ -0,0 +1,132 @@
|
||||
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="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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<!-- Add-on prepended -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Take full size */
|
||||
width: 100%;
|
||||
">
|
||||
<!-- Add-on -->
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<input type="text" style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
" />
|
||||
</div>
|
||||
|
||||
<!-- Add-on appended -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Take full size */
|
||||
width: 100%;
|
||||
">
|
||||
<!-- Input -->
|
||||
<input type="text" style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
" />
|
||||
|
||||
<!-- Add-on -->
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Appended and prepended add-ons -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Take full size */
|
||||
width: 100%;
|
||||
">
|
||||
<!-- Add-on -->
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<input type="text" style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
" />
|
||||
|
||||
<!-- Add-on -->
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
32
client/patterns/media-object/Cover.jsx
Normal file
32
client/patterns/media-object/Cover.jsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
import Square from '../../placeholders/Square';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="flex h-100 items-start pa2 w-100">
|
||||
<div className="h2 w2 mr2">
|
||||
<Square />
|
||||
</div>
|
||||
<div className="flex-auto">
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb3"><Line /></div>
|
||||
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb3"><Line /></div>
|
||||
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb1"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
63
client/patterns/media-object/Details.jsx
Normal file
63
client/patterns/media-object/Details.jsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
import Square from '../../placeholders/Square';
|
||||
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>
|
||||
<div className="mb4"><Block numberOfBlocks={20} /></div>
|
||||
<div className="mb4"><Block numberOfBlocks={15} /></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Align sub-items to top */
|
||||
align-items: start;
|
||||
display: flex;
|
||||
">
|
||||
<!-- Media object -->
|
||||
<div style="
|
||||
margin-right: 16px;
|
||||
|
||||
/* Set the width for the media object */
|
||||
width: 200px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
26
client/patterns/menu/Cover.jsx
Normal file
26
client/patterns/menu/Cover.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa3">
|
||||
<div className="b--black-30 ba br2 flex flex-column h-100 w-100">
|
||||
<div className="b--black-30 bb flex items-center ph2" style={{ flex: 1 }}>
|
||||
<Line />
|
||||
</div>
|
||||
<div className="b--black-30 bb flex items-center ph2" style={{ flex: 1 }}>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center ph2" style={{ flex: 1 }}>
|
||||
<div className="w-60"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
119
client/patterns/menu/Details.jsx
Normal file
119
client/patterns/menu/Details.jsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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">
|
||||
<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>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
">
|
||||
<!-- Normal menu item -->
|
||||
<div style="
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- With hot key -->
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
/* Push the hot key to the right */
|
||||
justify-content: space-between;
|
||||
">
|
||||
<!-- Label -->
|
||||
...
|
||||
<!-- Hot key -->
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- With image and hot key -->
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
/* Push the hot key to the right */
|
||||
justify-content: space-between;
|
||||
">
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
">
|
||||
<!-- Image -->
|
||||
...
|
||||
<!-- Label -->
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Hot key -->
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div style="
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
height: 1px;
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
32
client/patterns/modal/Cover.jsx
Normal file
32
client/patterns/modal/Cover.jsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="flex flex-column h-100 items-center justify-center pa3">
|
||||
<div className="b--black-30 ba br2 w-100">
|
||||
<div className="flex items-center justify-between ph1">
|
||||
<div className="w-60"><Rectangle height={2} /></div>
|
||||
<div className="black-70">×</div>
|
||||
</div>
|
||||
<div className="pa1">
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb1"><Line /></div>
|
||||
<div className="w-60 mb1"><Line /></div>
|
||||
<div className="w-40"><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end pa1">
|
||||
<div className="w-33 mr2"><Rectangle height={8} /></div>
|
||||
<div className="w-33"><Rectangle height={8} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
78
client/patterns/modal/Details.jsx
Normal file
78
client/patterns/modal/Details.jsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
</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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
">
|
||||
<!-- Header -->
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* Border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0.3);
|
||||
">
|
||||
<!-- Title -->
|
||||
...
|
||||
<!-- Close icon sticks to the right -->
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
...
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="
|
||||
display: flex;
|
||||
/* Push the buttons to the right */
|
||||
justify-content: flex-end;
|
||||
/* Border */
|
||||
border-top: 1px solid rgba(0, 0, 0.3);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
19
client/patterns/notification/Cover.jsx
Normal file
19
client/patterns/notification/Cover.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center justify-between ba b--black-30 br2 w-80 pa2">
|
||||
<div className="w-60"><Rectangle /></div>
|
||||
<div className="black-70">×</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
45
client/patterns/notification/Details.jsx
Normal file
45
client/patterns/notification/Details.jsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
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>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
">
|
||||
<!-- Content -->
|
||||
...
|
||||
|
||||
<!-- Close button sticks to the right -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
27
client/patterns/pagination/Cover.jsx
Normal file
27
client/patterns/pagination/Cover.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa2">
|
||||
<div className="b--black-30 ba br-pill flex">
|
||||
<div className="b--black-30 br flex items-center justify-center pa2">
|
||||
<Circle size={4} />
|
||||
</div>
|
||||
<div className="b--black-30 br flex items-center justify-center pa2">
|
||||
<Circle size={4} />
|
||||
</div>
|
||||
<div className="flex items-center justify-center pa2">
|
||||
<Circle size={4} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
82
client/patterns/pagination/Details.jsx
Normal file
82
client/patterns/pagination/Details.jsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
">
|
||||
<!-- Pagination item -->
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Right border */
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Don't set the right border for the last item -->
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* No right border */
|
||||
border-right: none;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
25
client/patterns/previous-next-buttons/Cover.jsx
Normal file
25
client/patterns/previous-next-buttons/Cover.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center justify-between pa2 w-100">
|
||||
<div className="b--black-30 ba br2 flex flex-row items-center pa1 w-40">
|
||||
<div className="mr1"><</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div className="b--black-30 ba br2 flex flex-row items-center pa1 w-40">
|
||||
<Rectangle />
|
||||
<div className="ml1">></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
51
client/patterns/previous-next-buttons/Details.jsx
Normal file
51
client/patterns/previous-next-buttons/Details.jsx
Normal file
@@ -0,0 +1,51 @@
|
||||
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="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"><</div>
|
||||
<Rectangle />
|
||||
</a>
|
||||
<a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30">
|
||||
<Rectangle />
|
||||
<div className="ml2">></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
">
|
||||
<!-- Previous link sticks to the left -->
|
||||
<a>..</a>
|
||||
|
||||
<!-- Next link sticks to the right -->
|
||||
<a>..</a>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
45
client/patterns/pricing-table/Cover.jsx
Normal file
45
client/patterns/pricing-table/Cover.jsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex items-center justify-center ph2">
|
||||
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{ flex: 1 }}>
|
||||
<div className="mb1"><Circle /></div>
|
||||
<div className="mb1 w-100">
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1 mr1" style={{ flex: 1 }}>
|
||||
<div className="mb1"><Circle /></div>
|
||||
<div className="mb1 w-100">
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-60 mb1"><Line /></div>
|
||||
<div className="w-80 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div className="ba br2 b--black-30 flex flex-column items-center justify-center pa1" style={{ flex: 1 }}>
|
||||
<div className="mb1"><Circle /></div>
|
||||
<div className="mb1 w-100">
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
96
client/patterns/pricing-table/Details.jsx
Normal file
96
client/patterns/pricing-table/Details.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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="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>
|
||||
<div className="w-40"><Rectangle height={32} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- Pricing column -->
|
||||
<div style="
|
||||
/* Content is centered vertically */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
/* Make all columns have the same width */
|
||||
flex: 1;
|
||||
|
||||
/* OPTIONAL: Space between columns */
|
||||
margin: 0 8px;
|
||||
|
||||
/* OPTIONAL: Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
">
|
||||
<!-- Title -->
|
||||
...
|
||||
|
||||
<!-- Price -->
|
||||
...
|
||||
|
||||
<!-- Description -->
|
||||
...
|
||||
|
||||
<!-- Button -->
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Repeated pricing columns -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
17
client/patterns/progress-bar/Cover.jsx
Normal file
17
client/patterns/progress-bar/Cover.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa2">
|
||||
<div className="h1 w-100 br-pill bg-black-10 pa1">
|
||||
<div className="w-40 br-pill h-100 bg-black-30" />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
65
client/patterns/progress-bar/Details.jsx
Normal file
65
client/patterns/progress-bar/Details.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import SampleCode from '../../SampleCode';
|
||||
import useInterval from '../../hooks/useInterval';
|
||||
|
||||
const Details = () => {
|
||||
const [progress, setProgress] = useState(0);
|
||||
useInterval(() => {
|
||||
setProgress(v => v === 100 ? 0 : v + 1);
|
||||
}, 1 * 100);
|
||||
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
">
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Colors */
|
||||
background-color: #357edd;
|
||||
color: #fff;
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
|
||||
/* Width based on the number of percentages */
|
||||
width: 40%;
|
||||
">
|
||||
<!-- The number of percentages -->
|
||||
40%
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
36
client/patterns/same-height-columns/Cover.jsx
Normal file
36
client/patterns/same-height-columns/Cover.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
import Square from '../../placeholders/Square';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="flex h-100 pa2">
|
||||
<div className="mh1" style={{ flex: 1 }}>
|
||||
<div className="w2 h2 mb1">
|
||||
<Square />
|
||||
</div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb1"><Line /></div>
|
||||
<div className="w-60"><Line /></div>
|
||||
</div>
|
||||
<div className="mh1" style={{ flex: 1 }}>
|
||||
<div className="w2 h2 mb1">
|
||||
<Square />
|
||||
</div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb1"><Line /></div>
|
||||
<div className="w-60 mb2"><Line /></div>
|
||||
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-60"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
89
client/patterns/same-height-columns/Details.jsx
Normal file
89
client/patterns/same-height-columns/Details.jsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
<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={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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="display: flex;">
|
||||
<!-- Column -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
/* Space between columns */
|
||||
margin: 0 8px;
|
||||
|
||||
/* Layout each column */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<!-- Cover -->
|
||||
...
|
||||
|
||||
<!-- Content -->
|
||||
<div style="
|
||||
/* Take available height */
|
||||
flex: 1;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Button sticks to the bottom -->
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Repeat with other columns -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
18
client/patterns/search-box/Cover.jsx
Normal file
18
client/patterns/search-box/Cover.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa2">
|
||||
<div className="w-100 flex flex-row items-center justify-end ba b--black-30 br2 pa1">
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
65
client/patterns/search-box/Details.jsx
Normal file
65
client/patterns/search-box/Details.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* If you want to place the icon before the text input */
|
||||
flex-direction: row-reverse;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
<!-- Text input -->
|
||||
<input
|
||||
type="text"
|
||||
style="
|
||||
border-color: transparent;
|
||||
/* Take available width */
|
||||
flex: 1;
|
||||
"
|
||||
/>
|
||||
|
||||
<!-- Search icon sticks to the left or right -->
|
||||
...
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
21
client/patterns/separator/Cover.jsx
Normal file
21
client/patterns/separator/Cover.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center h1 w-80">
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="w-25 mh1"><Rectangle /></div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
63
client/patterns/separator/Details.jsx
Normal file
63
client/patterns/separator/Details.jsx
Normal file
@@ -0,0 +1,63 @@
|
||||
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="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>
|
||||
<div className="bb b--black-30 w-100" style={{ height: '1px' }} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Used to set the position of text */
|
||||
position: relative;
|
||||
">
|
||||
<!-- Text -->
|
||||
<div style="
|
||||
/* We won't see the separator line */
|
||||
background: #FFF;
|
||||
|
||||
/* Displayed at the center of container */
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Separator line -->
|
||||
<div style="
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
25
client/patterns/sidebar/Cover.jsx
Normal file
25
client/patterns/sidebar/Cover.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex">
|
||||
<div className="b--black-30 br flex flex-column justify-end pa1 w-30">
|
||||
<div className="mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
<div className="flex-grow-1 pa2 b--black-30 br bw2">
|
||||
<div className="mb2"><Line /></div>
|
||||
<div className="mb2"><Line /></div>
|
||||
<div className="mb2"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
54
client/patterns/sidebar/Details.jsx
Normal file
54
client/patterns/sidebar/Details.jsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Block from '../../placeholders/Block';
|
||||
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>
|
||||
<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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="display: flex;">
|
||||
<!-- Sidebar -->
|
||||
<aside style="width: 30%;">
|
||||
...
|
||||
</aside>
|
||||
|
||||
<!-- Main -->
|
||||
<main style="
|
||||
flex-grow: 1;
|
||||
overflow: scroll;
|
||||
">
|
||||
...
|
||||
</main>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
31
client/patterns/simple-grid/Cover.jsx
Normal file
31
client/patterns/simple-grid/Cover.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="w-80">
|
||||
<div className="flex items-center mb1">
|
||||
<div className="ph1" style={{ flex: '0 0 50%' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '1' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="flex items-center mb1">
|
||||
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '0 0 33%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="ph1" style={{ flex: '0 0 25%' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '1' }}><Rectangle /></div>
|
||||
<div className="ph1" style={{ flex: '0 0 25%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
121
client/patterns/simple-grid/Details.jsx
Normal file
121
client/patterns/simple-grid/Details.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
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="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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<!-- Row -->
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
">
|
||||
<!--Cell with given width. Replace 25% with whatever you want -->
|
||||
<div style="
|
||||
flex: 0 0 25%;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
">25%</div>
|
||||
|
||||
<!-- Cell that takes remaining width -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
21
client/patterns/slider/Cover.jsx
Normal file
21
client/patterns/slider/Cover.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center h1 w-80">
|
||||
<div className="w-20"><Line /></div>
|
||||
<Circle />
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
75
client/patterns/slider/Details.jsx
Normal file
75
client/patterns/slider/Details.jsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Size */
|
||||
height: 32px;
|
||||
">
|
||||
<!-- Left side -->
|
||||
<div style="
|
||||
/* Width based on the current value */
|
||||
height: 2px;
|
||||
width: 20%;
|
||||
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
" />
|
||||
|
||||
<!-- Circle -->
|
||||
<div style="
|
||||
/* Size */
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
" />
|
||||
|
||||
<!-- Right side -->
|
||||
<div style="
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
|
||||
/* Colors */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
" />
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
20
client/patterns/split-navigation/Cover.jsx
Normal file
20
client/patterns/split-navigation/Cover.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center w-80 b--black-30 ba br2 pa1">
|
||||
<div className="w1 mr1"><Rectangle /></div>
|
||||
<div className="w1 mr1"><Rectangle /></div>
|
||||
<div className="w1 ml-auto"><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
56
client/patterns/split-navigation/Details.jsx
Normal file
56
client/patterns/split-navigation/Details.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
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="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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<ul style="
|
||||
/* Content is centered horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Reset styles */
|
||||
list-stype-type: none;
|
||||
margin: 0;
|
||||
">
|
||||
<!-- Navigation item -->
|
||||
<li>
|
||||
<a href="">...</a>
|
||||
</li>
|
||||
|
||||
<!-- Navigation item that sticks to the right -->
|
||||
<li style="
|
||||
/* Sticks to the right */
|
||||
margin-left: auto;
|
||||
">
|
||||
<a href="">...</a>
|
||||
</li>
|
||||
</ul>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
28
client/patterns/split-screen/Cover.jsx
Normal file
28
client/patterns/split-screen/Cover.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex">
|
||||
<div className="b--black-30 br flex flex-column justify-center items-center" style={{ flex: 1 }}>
|
||||
<div className="mb1"><Circle /></div>
|
||||
</div>
|
||||
<div className="flex flex-column justify-center" style={{ flex: 1 }}>
|
||||
<div className="pa2">
|
||||
<div className="mb1 w-100"><Line /></div>
|
||||
<div className="mb1 w-100"><Line /></div>
|
||||
<div className="mb1 w-80"><Line /></div>
|
||||
<div className="mb1 w-80"><Line /></div>
|
||||
<div className="w-60"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
52
client/patterns/split-screen/Details.jsx
Normal file
52
client/patterns/split-screen/Details.jsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Block from '../../placeholders/Block';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="display: flex;">
|
||||
<!-- Left content -->
|
||||
<div style="flex: 1;">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Right content -->
|
||||
<div style="flex: 1;">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
19
client/patterns/stepper-input/Cover.jsx
Normal file
19
client/patterns/stepper-input/Cover.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex items-center justify-center pa2">
|
||||
<div className="b--black-30 ba br2 flex w-100 h1">
|
||||
<div className="b--black-30 br flex items-center justify-center w1">-</div>
|
||||
<div className="flex-grow-1"></div>
|
||||
<div className="b--black-30 bl flex items-center justify-center w1">+</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
84
client/patterns/stepper-input/Details.jsx
Normal file
84
client/patterns/stepper-input/Details.jsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import SampleCode from '../../SampleCode';
|
||||
|
||||
const Details = () => {
|
||||
const [value, setValue] = useState(0);
|
||||
const decrease = () => setValue(value - 1);
|
||||
const increase = () => setValue(value + 1);
|
||||
const change = (e) => setValue(parseInt(e.target.value, 10));
|
||||
|
||||
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>
|
||||
<button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={increase}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
|
||||
/* Size */
|
||||
height: 32px;
|
||||
width: 128px;
|
||||
">
|
||||
<!-- Minus button -->
|
||||
<button style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Size */
|
||||
width: 32px;
|
||||
">-</button>
|
||||
|
||||
<!-- Input container -->
|
||||
<div style="flex: 1">
|
||||
<input type="text" style="
|
||||
/* Take full size of its container */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
" />
|
||||
</div>
|
||||
|
||||
<!-- Plus button -->
|
||||
<button style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Size */
|
||||
width: 32px;
|
||||
">+</button>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
38
client/patterns/sticky-footer/Cover.jsx
Normal file
38
client/patterns/sticky-footer/Cover.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column">
|
||||
<div className="flex-shrink-0 b--black-30 br bw2">
|
||||
<div className="w-100 flex items-center pa2">
|
||||
<div className="w1"><Line /></div>
|
||||
<div className="w1 ml-auto"><Line /></div>
|
||||
<div className="w1 ml1"><Line /></div>
|
||||
</div>
|
||||
<Line />
|
||||
</div>
|
||||
<div className="flex-grow-1 b--black-30 br bw2">
|
||||
<div className="pa2">
|
||||
<div className="w3 mb2"><Line /></div>
|
||||
<div className="w3 mb2"><Line /></div>
|
||||
<div className="w2"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<Line />
|
||||
<div className="w-100 flex items-center pa2">
|
||||
<div className="w1"><Line /></div>
|
||||
<div className="w1 ml1"><Line /></div>
|
||||
<div className="w1 ml1"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
56
client/patterns/sticky-footer/Details.jsx
Normal file
56
client/patterns/sticky-footer/Details.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
<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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
">
|
||||
<header style="flex-shrink: 0;">
|
||||
...
|
||||
</header>
|
||||
<main style="flex-grow: 1;">
|
||||
...
|
||||
</main>
|
||||
<footer style="flex-shrink: 0;">
|
||||
...
|
||||
</footer>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
30
client/patterns/sticky-header/Cover.jsx
Normal file
30
client/patterns/sticky-header/Cover.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-100 flex items-center pa2">
|
||||
<div className="w1"><Line /></div>
|
||||
<div className="w1 ml-auto"><Line /></div>
|
||||
<div className="w1 ml1"><Line /></div>
|
||||
</div>
|
||||
<Line />
|
||||
</div>
|
||||
<div className="flex-grow-1 b--black-30 br bw2">
|
||||
<div className="pa2">
|
||||
<div className="w3 mb2"><Line /></div>
|
||||
<div className="w3 mb2"><Line /></div>
|
||||
<div className="w2"><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
49
client/patterns/sticky-header/Details.jsx
Normal file
49
client/patterns/sticky-header/Details.jsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
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>
|
||||
<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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div>
|
||||
<header style="
|
||||
position: sticky;
|
||||
top: 0;
|
||||
">
|
||||
...
|
||||
</header>
|
||||
<main>
|
||||
...
|
||||
</main>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
17
client/patterns/switch/Cover.jsx
Normal file
17
client/patterns/switch/Cover.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa2">
|
||||
<div className="ba b--black-10 bg-black-30 br-pill h1 w2 flex justify-end">
|
||||
<div className="bg-white br-pill w1 h-100" />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
72
client/patterns/switch/Details.jsx
Normal file
72
client/patterns/switch/Details.jsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import SampleCode from '../../SampleCode';
|
||||
|
||||
const Details = () => {
|
||||
const [checked, setChecked] = useState(false);
|
||||
const toggle = () => setChecked(c => !c);
|
||||
|
||||
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={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<label style="
|
||||
display: flex;
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
|
||||
/* Size */
|
||||
height: 32px;
|
||||
width: 64px;
|
||||
|
||||
/* OFF status */
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
|
||||
/* ON status */
|
||||
background-color: #357edd;
|
||||
border: 1px solid #357edd;
|
||||
/* Push the circle to the right */
|
||||
justify-content: flex-end;
|
||||
">
|
||||
<!-- Hide the input -->
|
||||
<input type="checkbox" style="display: none" />
|
||||
|
||||
<!-- Circle -->
|
||||
<div style="
|
||||
/* Rounded border */
|
||||
border-radius: 9999px;
|
||||
|
||||
/* Size */
|
||||
width: 32px;
|
||||
|
||||
background-color: #FFF;
|
||||
|
||||
/* OFF status */
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
" />
|
||||
</label>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
20
client/patterns/tab/Cover.jsx
Normal file
20
client/patterns/tab/Cover.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Frame from '../../placeholders/Frame';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="ph2 pv1 ba b--black-30 br2 br--top" style={{ borderBottomColor: 'transparent' }}><Circle size={8} /></div>
|
||||
<div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
|
||||
<div className="ph2 pv1 bb b--black-30"><Circle size={8} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
91
client/patterns/tab/Details.jsx
Normal file
91
client/patterns/tab/Details.jsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Rectangle from '../../placeholders/Rectangle';
|
||||
import SampleCode from '../../SampleCode';
|
||||
|
||||
const Details = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
const Tab = ({ tabIndex, children }) => {
|
||||
const isActive = tabIndex === activeTab;
|
||||
const click = () => setActiveTab(tabIndex);
|
||||
return (
|
||||
<div
|
||||
className={`pointer pa3 b--black-30 ${isActive ? 'ba br2 br--top' : 'bb'}`}
|
||||
style={{
|
||||
borderBottomColor: isActive ? 'transparent' : '',
|
||||
}}
|
||||
onClick={click}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- Active tab -->
|
||||
<div style="
|
||||
/* Border */
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
/* Hide the bottom border */
|
||||
border-bottom-color: transparent;
|
||||
|
||||
/* Border radius */
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- Inactive tab -->
|
||||
<div style="
|
||||
/* Has only the bottom border */
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
32
client/patterns/wizard/Cover.jsx
Normal file
32
client/patterns/wizard/Cover.jsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
import Frame from '../../placeholders/Frame';
|
||||
import Line from '../../placeholders/Line';
|
||||
|
||||
const Cover = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex w-80">
|
||||
<div className="flex items-center justify-center" style={{ flex: 1 }}>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">1</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center" style={{ flex: 1 }}>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">2</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center" style={{ flex: 1 }}>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">3</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cover;
|
||||
119
client/patterns/wizard/Details.jsx
Normal file
119
client/patterns/wizard/Details.jsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
import Block from '../../placeholders/Block';
|
||||
import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
import Circle from '../../placeholders/Circle';
|
||||
import Line from '../../placeholders/Line';
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<div className="ph3 flex justify-center"><Block justify='center' numberOfBlocks={5} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
source={
|
||||
<SampleCode
|
||||
lang="html"
|
||||
code={`
|
||||
<div style="
|
||||
display: flex;
|
||||
">
|
||||
<!-- Step -->
|
||||
<div style="
|
||||
/* Make all steps have the same width */
|
||||
flex: 1;
|
||||
">
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
">
|
||||
<!-- The left connector -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
/*
|
||||
For the first step, you might need to set it to transparent background:
|
||||
background-color: transparent;
|
||||
*/
|
||||
" />
|
||||
|
||||
<!-- The step number -->
|
||||
<div style="
|
||||
/* Content is centered */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Rounded border */
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: 9999px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
/* OPTIONAL: Spacing between it and connectors */
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- The right connector -->
|
||||
<div style="
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
/*
|
||||
For the last step, you might need to set it to transparent background:
|
||||
background-color: transparent;
|
||||
*/
|
||||
" />
|
||||
</div>
|
||||
|
||||
<!-- Title of step -->
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</DetailsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
Reference in New Issue
Block a user