mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-30 09:09:50 +02:00
Reorganize folders
This commit is contained in:
Phuoc Nguyen
26
client/layouts/DetailsLayout.jsx
Normal file
26
client/layouts/DetailsLayout.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import useDocumentTitle from '../hooks/useDocumentTitle';
|
||||
import Layout from './Layout';
|
||||
|
||||
const DetailsLayout = ({ title, children }) => {
|
||||
useDocumentTitle(`CSS Layout ∙ ${title}`);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="mv4">
|
||||
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
|
||||
</div>
|
||||
<div className="bt br bl b--black-20 relative br4 br--top">
|
||||
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1>
|
||||
|
||||
<div className="pa5">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailsLayout;
|
||||
101
client/layouts/Footer.jsx
Normal file
101
client/layouts/Footer.jsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import React from 'react';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
|
||||
<div className="bt br b--black-20 relative" style={{ flex: 1 }}>
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>PRODUCTS</h3>
|
||||
|
||||
<ul className="list ma0 pa0 lh-copy fw5 pa4">
|
||||
<li>
|
||||
<a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
|
||||
FormValidation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank">
|
||||
BlurPage
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="link" href="https://react-pdf-viewer.dev" title="React PDF Viewer ~ a PDF viewer made for React" target="_blank">
|
||||
React PDF Viewer
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bt b--black-20 relative" style={{ flex: 1 }}>
|
||||
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0, -50%)' }}>ABOUT</h3>
|
||||
|
||||
<div className="pa4">
|
||||
<div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
|
||||
<ul className="list ma0 pa0 lh-copy fw5">
|
||||
<li className="mb1">
|
||||
<a href="https://twitter.com/nghuuphuoc" className="link flex items-center">
|
||||
<span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 1,
|
||||
}}
|
||||
>
|
||||
<path d={`M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z`} />
|
||||
</svg>
|
||||
</span>
|
||||
@nghuuphuoc
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb1">
|
||||
<a href="mailto: me@phuoc.ng" className="link flex items-center">
|
||||
<span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 1,
|
||||
}}
|
||||
>
|
||||
<path d={`M2.5,3.954h19c1.105,0,2,0.895,2,2v12c0,1.105-0.895,2-2,2h-19c-1.105,0-2-0.895-2-2v-12 C0.5,4.849,1.395,3.954,2.5,3.954z M22.911,4.536L12,13.454L1.089,4.536`} />
|
||||
</svg>
|
||||
</span>
|
||||
me@phuoc.ng
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb1">
|
||||
<a href="https://github.com/phuoc-ng/csslayout" className="link flex items-center">
|
||||
<span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="w-60 h-60"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#FFF",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: 1,
|
||||
}}
|
||||
>
|
||||
<path d={`M12,0.5C5.649,0.494,0.495,5.638,0.489,11.989c-0.005,4.959,3.17,9.362,7.876,10.925 c0.574,0.1,0.756-0.237,0.756-0.541c0-0.275,0.006-1.037,0-2c-3.2,0.694-3.861-1.515-3.861-1.515 c-0.211-0.695-0.664-1.292-1.276-1.682c-1.044-0.714,0.078-0.7,0.078-0.7c0.739,0.101,1.389,0.538,1.762,1.184 c0.65,1.185,2.139,1.619,3.324,0.968c0.007-0.004,0.015-0.008,0.022-0.012c0.053-0.581,0.312-1.125,0.73-1.532 c-2.553-0.292-5.238-1.278-5.238-5.686C4.646,10.255,5.07,9.15,5.847,8.312C5.495,7.32,5.535,6.232,5.959,5.269 c0,0,0.967-0.309,3.162,1.18c1.885-0.517,3.875-0.517,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18c0.424,0.963,0.465,2.051,0.114,3.043 c0.777,0.839,1.201,1.945,1.183,3.088c0,4.42-2.689,5.391-5.251,5.674c0.557,0.559,0.844,1.333,0.787,2.12v3.184 c0,0.307,0.186,0.647,0.77,0.536c6.028-2.002,9.291-8.51,7.29-14.538C21.369,3.667,16.962,0.492,12,0.5z`} />
|
||||
</svg>
|
||||
</span>
|
||||
github.com/phuoc-ng/csslayout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
18
client/layouts/Layout.jsx
Normal file
18
client/layouts/Layout.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
import Footer from './Footer';
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="mw8 mb5 center">
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,17 +0,0 @@
|
||||
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;
|
||||
@@ -1,47 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,22 +0,0 @@
|
||||
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;
|
||||
@@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,20 +0,0 @@
|
||||
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;
|
||||
@@ -1,48 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,28 +0,0 @@
|
||||
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;
|
||||
@@ -1,59 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,23 +0,0 @@
|
||||
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;
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,20 +0,0 @@
|
||||
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;
|
||||
@@ -1,78 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,35 +0,0 @@
|
||||
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;
|
||||
@@ -1,75 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,18 +0,0 @@
|
||||
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;
|
||||
@@ -1,79 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,48 +0,0 @@
|
||||
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;
|
||||
@@ -1,83 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,23 +0,0 @@
|
||||
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;
|
||||
@@ -1,132 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,32 +0,0 @@
|
||||
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;
|
||||
@@ -1,63 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,26 +0,0 @@
|
||||
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;
|
||||
@@ -1,119 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,32 +0,0 @@
|
||||
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;
|
||||
@@ -1,78 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,19 +0,0 @@
|
||||
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;
|
||||
@@ -1,45 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,27 +0,0 @@
|
||||
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;
|
||||
@@ -1,82 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,25 +0,0 @@
|
||||
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;
|
||||
@@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,45 +0,0 @@
|
||||
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;
|
||||
@@ -1,96 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,17 +0,0 @@
|
||||
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;
|
||||
@@ -1,65 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,36 +0,0 @@
|
||||
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;
|
||||
@@ -1,89 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,18 +0,0 @@
|
||||
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;
|
||||
@@ -1,65 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,21 +0,0 @@
|
||||
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;
|
||||
@@ -1,63 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,25 +0,0 @@
|
||||
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;
|
||||
@@ -1,54 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,31 +0,0 @@
|
||||
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;
|
||||
@@ -1,121 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,21 +0,0 @@
|
||||
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;
|
||||
@@ -1,75 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,20 +0,0 @@
|
||||
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;
|
||||
@@ -1,56 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,28 +0,0 @@
|
||||
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;
|
||||
@@ -1,52 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,19 +0,0 @@
|
||||
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;
|
||||
@@ -1,84 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,38 +0,0 @@
|
||||
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;
|
||||
@@ -1,56 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,30 +0,0 @@
|
||||
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;
|
||||
@@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,17 +0,0 @@
|
||||
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;
|
||||
@@ -1,72 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,20 +0,0 @@
|
||||
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;
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import DetailsLayout from '../../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;
|
||||
@@ -1,32 +0,0 @@
|
||||
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;
|
||||
@@ -1,119 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import DetailsLayout from '../../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