mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-08 07:07:15 +02:00
Remove tachyons
This commit is contained in:
Phuoc Nguyen
@@ -36,7 +36,7 @@ const App = () => {
|
||||
</Route>
|
||||
<Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
|
||||
<Route exact={true} path='/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
|
||||
<Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
|
||||
<Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.ProgressBar} /></Route>
|
||||
<Route exact={true} path='/questions-and-answers'>
|
||||
<DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
|
||||
</Route>
|
||||
|
||||
@@ -69,7 +69,7 @@ const Home = () => {
|
||||
<section>
|
||||
<Heading title="Layouts" />
|
||||
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
|
||||
<CoverCard pattern={Pattern.HolyGrail} />
|
||||
<CoverCard pattern={Pattern.Sidebar} />
|
||||
<CoverCard pattern={Pattern.SplitScreen} />
|
||||
@@ -81,7 +81,7 @@ const Home = () => {
|
||||
<section>
|
||||
<Heading title="Patterns" />
|
||||
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
|
||||
<CoverCard pattern={Pattern.Badge} />
|
||||
<CoverCard pattern={Pattern.Breadcrumb} />
|
||||
<CoverCard pattern={Pattern.ButtonWithIcon} />
|
||||
|
||||
@@ -165,6 +165,7 @@ const Home = () => {
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
opacity: '0.4',
|
||||
padding: '32px 16px',
|
||||
}}
|
||||
|
||||
@@ -11,16 +11,16 @@ interface CoverCardProps {
|
||||
|
||||
const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
return (
|
||||
<div className="pa1 w-20">
|
||||
<Link
|
||||
to={`/${slug(pattern)}`}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
padding: '16px',
|
||||
textDecoration: 'none',
|
||||
width: '150px',
|
||||
}}
|
||||
>
|
||||
<CoverLoader pattern={pattern} />
|
||||
@@ -36,7 +36,6 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
{pattern}
|
||||
</h4>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
|
||||
<section>
|
||||
<Heading title="Related patterns" />
|
||||
|
||||
<div className="flex flex-wrap items-start pa4">
|
||||
<div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
|
||||
{
|
||||
patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
|
||||
}
|
||||
|
||||
@@ -11,7 +11,10 @@ const SampleCode: React.FC<SampleCodeProps> = ({ code, lang }) => {
|
||||
return code === ''
|
||||
? <></>
|
||||
: (
|
||||
<pre className="h-100 lh-copy ma0" dangerouslySetInnerHTML={{ __html: highlight(code, lang) }} />
|
||||
<pre
|
||||
style={{ height: '100%', lineHeight: 1.5, margin: 0 }}
|
||||
dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ const highlight = (input: string, language: string) => {
|
||||
const { value } = hljs.highlight(lang, input);
|
||||
const highlighted = value.replace('&', '&').trim();
|
||||
|
||||
return `<code class="hljs h-100 ${lang}">${highlighted}</code>`;
|
||||
return `<code style="height: 100%" class="hljs ${lang}">${highlighted}</code>`;
|
||||
};
|
||||
|
||||
export default highlight;
|
||||
|
||||
@@ -2,6 +2,12 @@ body {
|
||||
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
html, body, div, article, aside, section, main, nav, footer, header, form, fieldset, legend, pre, code, a,
|
||||
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figcaption, figure, textarea,
|
||||
table, td, th, tr,
|
||||
input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"] {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.hljs, code {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ const Layout: React.FC<{}> = ({ children }) => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="mw8 mb5 center">
|
||||
<div style={{ margin: '0 auto 64px auto', maxWidth: '1024px' }}>
|
||||
{children}
|
||||
<Footer />
|
||||
<ul
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import loadable, { LoadableComponent } from '@loadable/component';
|
||||
import React from 'react';
|
||||
|
||||
import Pattern from '../constants/Pattern';
|
||||
import './spinner.css';
|
||||
|
||||
import Pattern from '../constants/Pattern';
|
||||
|
||||
interface DetailsLoaderProps {
|
||||
pattern: Pattern;
|
||||
}
|
||||
@@ -21,7 +22,15 @@ const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`.
|
||||
|
||||
const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
|
||||
fallback: (
|
||||
<div className="w100 h-100 flex items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
|
||||
<circle
|
||||
cx="16"
|
||||
|
||||
@@ -5,8 +5,29 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,11 +6,33 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Badge">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
fontSize: '20px',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,13 +6,30 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Rectangle /></div>
|
||||
<div style={{ color: '#000', margin: '0 4px' }}>/</div>
|
||||
<div style={{ width: '20%' }}><Rectangle /></div>
|
||||
<div style={{ color: '#000', margin: '0 4px' }}>/</div>
|
||||
<div style={{ width: '20%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -7,18 +7,27 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Breadcrumb">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
|
||||
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
|
||||
<div style={{ width: '64px' }}><Rectangle height={16} /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
|
||||
<div style={{ width: '32px' }}><Rectangle height={16} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -7,9 +7,27 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '4px' }}><Circle /></div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,13 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Button with icon">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<button
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
height: '64px',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}><Circle size={32} /></div>
|
||||
<Rectangle />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -7,16 +7,23 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="flex flex-column h-100 pa2">
|
||||
<div className="w-100 mb2">
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '8px', width: '100%' }}>
|
||||
<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">
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '8px', width: '60%' }}><Line /></div>
|
||||
<div style={{ width: '30%' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,15 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Card">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<Rectangle height={150} />
|
||||
<div className="pa3" style={{ flex: 1 }}>
|
||||
<div className="mb3"><Block numberOfBlocks={15} /></div>
|
||||
<div className="w4">
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,12 +7,21 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
<div className="w-50 mv1">
|
||||
<div style={{ margin: '4px 0', width: '50%' }}>
|
||||
<Line />
|
||||
</div>
|
||||
<div className="w-40 mv1">
|
||||
<div style={{ margin: '4px 0', width: '40%' }}>
|
||||
<Line />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,14 +8,23 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Centering">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<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 style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
|
||||
<div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
|
||||
<div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
|
||||
</div>
|
||||
)}
|
||||
source={`
|
||||
|
||||
@@ -5,11 +5,36 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="w2 h2 relative ba b--black-30 br2">
|
||||
<div
|
||||
className="absolute top-0 right-0 br-pill bg-dark-blue"
|
||||
style={{ height: '16px', transform: 'translate(50%, -50%)', width: '16px' }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '32px',
|
||||
position: 'relative',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '9999px',
|
||||
height: '16px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,15 +8,40 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Docked at corner">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="w4 pa3 relative ba b--black-30 br2">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div
|
||||
className="absolute top-0 right-0 br-pill bg-dark-blue h2 w2"
|
||||
style={{ transform: 'translate(50%, -50%)' }}
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderRadius: '9999px',
|
||||
height: '32px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -48,21 +73,65 @@ const Details: React.FC<{}> = () => {
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
<div className="pa4">
|
||||
<div className="mb4 w4 pa2 relative ba b--black-30 br2">
|
||||
<div style={{ padding: '32px' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '32px',
|
||||
padding: '8px',
|
||||
position: 'relative',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
Inbox
|
||||
<div
|
||||
className="absolute top-0 right-0 br-pill bg-blue white pa1 flex items-center justify-center"
|
||||
style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
height: '24px',
|
||||
justifyContent: 'center',
|
||||
padding: '4px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '24px',
|
||||
}}
|
||||
>
|
||||
5
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-40 h4 pa3 relative ba b--black-30 br2">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '128px',
|
||||
padding: '16px',
|
||||
position: 'relative',
|
||||
width: '40%',
|
||||
}}
|
||||
>
|
||||
Modal
|
||||
<div
|
||||
className="absolute top-0 right-0 br-pill bg-red white pa1 flex items-center justify-center"
|
||||
style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#FF4136',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
height: '24px',
|
||||
justifyContent: 'center',
|
||||
padding: '4px',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0,
|
||||
transform: 'translate(50%, -50%)',
|
||||
width: '24px',
|
||||
}}
|
||||
>
|
||||
×
|
||||
</div>
|
||||
|
||||
@@ -5,12 +5,53 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '8px',
|
||||
margin: '0 4px',
|
||||
width: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '8px',
|
||||
margin: '0 4px',
|
||||
width: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '8px',
|
||||
margin: '0 4px',
|
||||
width: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '8px',
|
||||
margin: '0 4px',
|
||||
width: '8px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -15,9 +15,13 @@ const Details: React.FC<{}> = () => {
|
||||
const click = () => setActiveItem(index);
|
||||
return (
|
||||
<li
|
||||
className={`pointer mh1 br-pill ${isActive ? 'bg-black-30' : 'ba b--black-30'}`}
|
||||
style={{
|
||||
backgroundColor: isActive ? 'rgba(0, 0, 0, 0.3)' : '',
|
||||
border: isActive ? 'none' : '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
cursor: 'pointer',
|
||||
height: '12px',
|
||||
margin: '0 4px',
|
||||
width: '12px',
|
||||
}}
|
||||
onClick={click}
|
||||
@@ -27,11 +31,29 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Dot navigation">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<ul className="list ma0 pa0 flex items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<Dot index={0} />
|
||||
<Dot index={1} />
|
||||
<Dot index={2} />
|
||||
|
||||
@@ -8,23 +8,32 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
|
||||
<div style={{ margin: '0 4px' }}><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 style={{ marginBottom: '8px', width: '100%' }}><Rectangle height={4} /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ width: '80%' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-100 flex-row-reverse">
|
||||
<div className="mh1"><Circle size={32} /></div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row-reverse', width: '100%' }}>
|
||||
<div style={{ margin: '0 4px' }}><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 style={{ marginBottom: '8px', width: '100%' }}><Rectangle height={4} /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ width: '80%' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,22 +9,29 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Feature list">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div style={{ display: 'flex', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="mb4"><Rectangle height={8} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><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={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
|
||||
<div style={{ margin: '0 16px' }}><Circle size={128} /></div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="mb4"><Rectangle height={8} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
|
||||
<Block numberOfBlocks={15} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,8 @@ import Triangle from '../../placeholders/Triangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="relative">
|
||||
<div className="absolute top-0 left-0">
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
<Triangle size={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,20 +7,20 @@ import Triangle from '../../placeholders/Triangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Fixed at corner">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="relative h-100">
|
||||
<div className="absolute top-0 left-0">
|
||||
<div style={{ height: '100%', position: 'relative' }}>
|
||||
<div style={{ left: 0, position: 'absolute', top: 0 }}>
|
||||
<Triangle size={64} corner="tl" />
|
||||
</div>
|
||||
<div className="absolute top-0 right-0">
|
||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
<Triangle size={64} corner="tr" />
|
||||
</div>
|
||||
<div className="absolute bottom-0 right-0">
|
||||
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
|
||||
<Triangle size={64} corner="br" />
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0">
|
||||
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
|
||||
<Triangle size={64} corner="bl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,38 +6,80 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: '4px', width: '16px' }}><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 style={{ display: 'flex', flexGrow: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '4px' }}><Line /></div>
|
||||
<div style={{ width: '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 style={{ flex: 1, padding: '8px' }}>
|
||||
<div style={{ marginBottom: '4px' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '8px', width: '80%' }}><Line /></div>
|
||||
|
||||
<div className="mb1"><Line /></div>
|
||||
<div className="mb1 w-60"><Line /></div>
|
||||
<div className="mb1 w-80"><Line /></div>
|
||||
<div style={{ marginBottom: '4px' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '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
|
||||
style={{
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '4px' }}><Line /></div>
|
||||
<div style={{ width: '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
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,26 +8,56 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Holy grail">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="flex-grow-1 flex flex-row">
|
||||
<div className="b--black-30 br pa3 w-25">
|
||||
<div style={{ display: 'flex', flexGrow: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '25%',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div className="pa3 flex-auto">
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div className="b--black-30 bl pa3 w-20">
|
||||
<div
|
||||
style={{
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
width: '20%',
|
||||
}}
|
||||
>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 bt b--black-30 pa3">
|
||||
<div className="w-40"><Rectangle /></div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -6,12 +6,37 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '0 8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '100%' }}><Line /></div>
|
||||
</div>
|
||||
<div className="flex-grow-1" />
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -7,29 +7,127 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Input add-on">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
marginBottom: '16px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<input type="text" className="bn pa2 flex-auto" style={{ marginRight: '1px' }} />
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginRight: '1px',
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
</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">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
marginBottom: '16px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginLeft: '1px',
|
||||
padding: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '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">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '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">
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '8px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,22 +7,30 @@ import Square from '../../placeholders/Square';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="flex h-100 items-start pa2 w-100">
|
||||
<div className="h2 w2 mr2">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '32px', marginRight: '8px', width: '32px' }}>
|
||||
<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 style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '16px', width: '80%' }}><Line /></div>
|
||||
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb3"><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '16px', width: '80%' }}><Line /></div>
|
||||
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb1"><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -9,19 +9,26 @@ import Square from '../../placeholders/Square';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Media object">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex items-start pa3">
|
||||
<div className="w4 h4 mr3">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
<div className="flex-auto">
|
||||
<div className="w-80 mb4">
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: '32px', width: '80%' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div className="mb4"><Block numberOfBlocks={20} /></div>
|
||||
<div className="mb4"><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -6,16 +6,57 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<Line />
|
||||
</div>
|
||||
<div className="b--black-30 bb flex items-center ph2" style={{ flex: 1 }}>
|
||||
<div className="w-80"><Line /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '80%' }}><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center ph2" style={{ flex: 1 }}>
|
||||
<div className="w-60"><Line /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import './menu.css';
|
||||
|
||||
import RelatedPatterns from '../../components/RelatedPatterns';
|
||||
import Pattern from '../../constants/Pattern';
|
||||
import DetailsLayout from '../../layouts/DetailsLayout';
|
||||
@@ -10,40 +12,116 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Menu">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
width: '40%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="flex items-center h2 ph2 hover-bg-black-10">
|
||||
<div
|
||||
className="menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
<div className="w-50 ml1"><Rectangle /></div>
|
||||
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
|
||||
<div className="w-30"><Rectangle /></div>
|
||||
<div
|
||||
className="menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '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
|
||||
className="menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '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>
|
||||
<div
|
||||
className="menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Rectangle /></div>
|
||||
<Circle />
|
||||
</div>
|
||||
<div className="flex items-center justify-between h2 ph2 hover-bg-black-10">
|
||||
<div className="flex items-center w-80">
|
||||
<div
|
||||
className="menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
|
||||
<Circle />
|
||||
<div className="w-50 ml1"><Rectangle /></div>
|
||||
<div style={{ marginLeft: '4px', width: '50%' }}><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 style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
|
||||
<div
|
||||
className="menu-item"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
<div>Ctrl + V</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
3
client/patterns/menu/menu.css
Normal file
3
client/patterns/menu/menu.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.menu-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -7,21 +7,50 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 4px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle height={2} /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>×</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 style={{ padding: '4px' }}>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
|
||||
<div style={{ width: '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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px', width: '33.3333%' }}><Rectangle height={8} /></div>
|
||||
<div style={{ width: '33.3333%' }}><Rectangle height={8} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,24 +9,54 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Modal">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
width: '50%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
<div className="pa3">
|
||||
<div className="mb3"><Block numberOfBlocks={10} /></div>
|
||||
<div style={{ padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><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
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
|
||||
<div style={{ width: '30%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,10 +6,29 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '8px',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>×</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -8,15 +8,41 @@ import Circle from '../../placeholders/Circle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Notification">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
|
||||
<button
|
||||
className="black-30 bn f2 flex h2 items-center justify-center w2"
|
||||
style={{ marginRight: '1px' }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderColor: 'transparent',
|
||||
color: 'rgba(0, 0, 0, .3)',
|
||||
display: 'flex',
|
||||
fontSize: '36px',
|
||||
height: '32px',
|
||||
justifyContent: 'center',
|
||||
marginRight: '1px',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
</button>
|
||||
|
||||
@@ -6,16 +6,54 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div className="b--black-30 br flex items-center justify-center pa2">
|
||||
<Circle size={4} />
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div className="flex items-center justify-center pa2">
|
||||
<Circle size={4} />
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,27 +8,91 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Pagination">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div className="b--black-30 br flex items-center justify-center pa2">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div className="b--black-30 br flex items-center justify-center pa2">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div className="b--black-30 br flex items-center justify-center pa2">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div className="b--black-30 br flex items-center justify-center pa2">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<Circle size={16} />
|
||||
</div>
|
||||
<div className="flex items-center justify-center pa2 w3">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,15 +6,41 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
padding: '4px 8px',
|
||||
}}
|
||||
>
|
||||
<
|
||||
</div>
|
||||
<div className="b--black-30 ba br2 flex flex-row items-center pa1 w-40">
|
||||
<Rectangle />
|
||||
<div className="ml1">></div>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
padding: '4px 8px',
|
||||
}}
|
||||
>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,19 +7,55 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Previous and next buttons">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: 'space-between',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<a
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '8px' }}><</div>
|
||||
<Rectangle />
|
||||
</a>
|
||||
<a className="b--black-30 ba br2 flex flex-row pa2 items-center w-30">
|
||||
<a
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<Rectangle />
|
||||
<div className="ml2">></div>
|
||||
<div style={{ marginLeft: '8px' }}>></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,41 +8,75 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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 }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
marginRight: '4px',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '4px' }}><Circle /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ width: '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 }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
marginRight: '4px',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<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 style={{ marginBottom: '4px' }}><Circle /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ width: '80%' }}><Line /></div>
|
||||
</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div
|
||||
className="ba br2 b--black-30 flex flex-column items-center justify-center pa1"
|
||||
style={{ flex: 1 }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<div className="mb1"><Circle /></div>
|
||||
<div className="mb1 w-100">
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80"><Line /></div>
|
||||
<div style={{ marginBottom: '4px' }}><Circle /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ width: '80%' }}><Line /></div>
|
||||
</div>
|
||||
<Rectangle />
|
||||
</div>
|
||||
|
||||
@@ -9,37 +9,85 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Pricing table">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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 }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ width: '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 }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<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 style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div style={{ width: '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 }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
margin: '0 8px',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<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 style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
|
||||
<div style={{ marginBottom: '16px', width: '100%' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div style={{ width: '40%' }}><Rectangle height={32} /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,9 +5,33 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
height: '16px',
|
||||
padding: '4px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: '100%',
|
||||
width: '40%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -12,14 +12,40 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Progress bar">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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}%` }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
height: '16px',
|
||||
width: '50%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
fontSize: '12px',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '4px',
|
||||
width: `${progress}%`,
|
||||
}}
|
||||
>
|
||||
{progress}%
|
||||
</div>
|
||||
|
||||
@@ -7,18 +7,51 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa3">
|
||||
<div className="w-100">
|
||||
<div className="bb b--black-30 pv1 flex items-center justify-between">
|
||||
<div className="w-60"><Rectangle height={8} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle height={8} /></div>
|
||||
<Circle size={12} />
|
||||
</div>
|
||||
<div className="bb b--black-30 pv1 flex items-center justify-between">
|
||||
<div className="w-20"><Rectangle height={8} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Rectangle height={8} /></div>
|
||||
<Circle size={12} />
|
||||
</div>
|
||||
<div className="bb b--black-30 pv1 flex items-center justify-between">
|
||||
<div className="w-40"><Rectangle height={8} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '4px 0',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle height={8} /></div>
|
||||
<Circle size={12} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,10 +28,19 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Property list">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}>
|
||||
<Item>
|
||||
<dt style={{ width: '80%' }}><Rectangle /></dt>
|
||||
|
||||
@@ -8,21 +8,44 @@ import Triangle from '../../placeholders/Triangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa2">
|
||||
<div className="w-80">
|
||||
<div className="flex items-center justify-between mb2">
|
||||
<div className="w-60"><Rectangle height={4} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '80%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}><Rectangle height={4} /></div>
|
||||
<Triangle size={6} corner="b" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb1">
|
||||
<div className="w-40"><Rectangle height={4} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle height={4} /></div>
|
||||
<Triangle size={6} corner="t" />
|
||||
</div>
|
||||
<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 style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
|
||||
<div style={{ width: '40%' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,13 @@ const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className="flex items-center justify-between pointer mv3"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '16px 0',
|
||||
}}
|
||||
onClick={click}
|
||||
>
|
||||
{title}
|
||||
@@ -33,33 +39,51 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Questions and answers">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="w-60">
|
||||
<div className="mb3 bt bb b--black-30">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={0}
|
||||
title={<div className="w-40"><Rectangle /></div>}
|
||||
title={<div style={{ width: '40%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div className="mb3"><Block numberOfBlocks={10} /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
</div>
|
||||
<div className="mb3 bb b--black-30">
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
>
|
||||
<Item
|
||||
index={1}
|
||||
title={<div className="w-80"><Rectangle /></div>}
|
||||
title={<div style={{ width: '80%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div className="mb3"><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
</Item>
|
||||
</div>
|
||||
<div className="bb b--black-30">
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
|
||||
<Item
|
||||
index={2}
|
||||
title={<div className="w-60"><Rectangle /></div>}
|
||||
title={<div style={{ width: '60%' }}><Rectangle /></div>}
|
||||
>
|
||||
<div className="mb3"><Block numberOfBlocks={10} /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,12 +6,39 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa2">
|
||||
<div className="w-80 flex items-center justify-center b--black-30 br-pill ba pa1">
|
||||
<div className="pa1" style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '4px',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, padding: '4px' }}>
|
||||
<Rectangle />
|
||||
</div>
|
||||
<div className="pa1 br-pill bg-black-10 h-100" style={{ flex: 1 }} />
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
flex: 1,
|
||||
height: '100%',
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -12,23 +12,73 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Radio switch">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="inline-flex br-pill bg-black-10 pa1">
|
||||
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
|
||||
<input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
|
||||
<div
|
||||
className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`}
|
||||
style={{ height: '8px' }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
display: 'inline-flex',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '#357EDD' : '',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '#FFF' : '',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
style={{ display: 'none' }}
|
||||
checked={isFirstChecked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '#FFF' : 'rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '4px',
|
||||
height: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
|
||||
<input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} />
|
||||
<label
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? '' : '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: isFirstChecked ? '' : '#FFF',
|
||||
cursor: 'pointer',
|
||||
padding: '16px 8px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
style={{ display: 'none' }}
|
||||
checked={!isFirstChecked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`}
|
||||
style={{ height: '8px' }}
|
||||
style={{
|
||||
backgroundColor: isFirstChecked ? 'rgba(0, 0, 0, 0.2)' : '#FFF',
|
||||
borderRadius: '4px',
|
||||
height: '8px',
|
||||
width: '64px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@@ -67,14 +117,37 @@ const Details: React.FC<{}> = () => {
|
||||
<section>
|
||||
<Heading title="Use cases" />
|
||||
|
||||
<div className="pa4">
|
||||
<div className="inline-flex br-pill bg-black-10 pa1">
|
||||
<label className="pointer pv1 ph2 br-pill flex bg-blue white">
|
||||
<input type="radio" className="dn" />
|
||||
<div style={{ padding: '32px' }}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
display: 'inline-flex',
|
||||
padding: '4px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
style={{
|
||||
backgroundColor: '#357EDD',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
padding: '4px 8px',
|
||||
}}
|
||||
>
|
||||
<input type="radio" style={{ display: 'none' }} />
|
||||
Monthly
|
||||
</label>
|
||||
<label className="pointer pv1 ph2 br-pill flex">
|
||||
<input type="radio" className="dn" />
|
||||
<label
|
||||
style={{
|
||||
borderRadius: '9999px',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
padding: '4px 8px',
|
||||
}}
|
||||
>
|
||||
<input type="radio" style={{ display: 'none' }} />
|
||||
Yearly
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -7,26 +7,26 @@ import Square from '../../placeholders/Square';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="flex h-100 pa2">
|
||||
<div className="mh1" style={{ flex: 1 }}>
|
||||
<div className="w2 h2 mb1">
|
||||
<div style={{ display: 'flex', height: '100%', padding: '8px' }}>
|
||||
<div style={{ flex: 1, margin: '0 4px' }}>
|
||||
<div style={{ height: '32px', marginBottom: '4px', width: '32px' }}>
|
||||
<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 style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
<div style={{ width: '60%' }}><Line /></div>
|
||||
</div>
|
||||
<div className="mh1" style={{ flex: 1 }}>
|
||||
<div className="w2 h2 mb1">
|
||||
<div style={{ flex: 1, margin: '0 4px' }}>
|
||||
<div style={{ height: '32px', marginBottom: '4px', width: '32px' }}>
|
||||
<Square />
|
||||
</div>
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-80 mb1"><Line /></div>
|
||||
<div className="w-60 mb2"><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '8px', width: '60%' }}><Line /></div>
|
||||
|
||||
<div className="w-100 mb1"><Line /></div>
|
||||
<div className="w-60"><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ width: '60%' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -8,37 +8,73 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Same height columns">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', height: '100%', width: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
margin: '0 8px',
|
||||
}}
|
||||
>
|
||||
<Rectangle height={200} />
|
||||
<div className="pa3" style={{ flex: 1 }}>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div className="pa3 w4">
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
margin: '0 8px',
|
||||
}}
|
||||
>
|
||||
<Rectangle height={200} />
|
||||
<div className="pa3" style={{ flex: 1 }}>
|
||||
<div className="mb3"><Block numberOfBlocks={15} /></div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
|
||||
<Block numberOfBlocks={5} />
|
||||
</div>
|
||||
<div className="pa3 w4">
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="b--black-20 ba br2 mh2 flex flex-column" style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
margin: '0 8px',
|
||||
}}
|
||||
>
|
||||
<Rectangle height={200} />
|
||||
<div className="pa3" style={{ flex: 1 }}>
|
||||
<div className="mb3"><Block numberOfBlocks={5} /></div>
|
||||
<div style={{ flex: 1, padding: '16px' }}>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
<div className="pa3 w4">
|
||||
<div style={{ padding: '16px', width: '128px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,27 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '4px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,31 +7,60 @@ import Circle from '../../placeholders/Circle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Search box">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
className="pa1 b--transparent"
|
||||
style={{ flex: 1 }}
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<div className="pa2">
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="b--black-30 ba br1 flex flex-row-reverse">
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
className="pa1 b--transparent"
|
||||
style={{ flex: 1 }}
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<div className="pa2">
|
||||
<div style={{ padding: '8px' }}>
|
||||
<Circle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,10 +7,26 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center h1 w-80">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '16px',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="w-25 mh1"><Rectangle /></div>
|
||||
<div style={{ margin: '0 4px', width: '25%' }}><Rectangle /></div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,15 +7,46 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Separator">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
left: '50%',
|
||||
padding: '0 8px',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '128px' }}><Rectangle height={16} /></div>
|
||||
</div>
|
||||
<div className="bb b--black-30 w-100" style={{ height: '1px' }} />
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -6,16 +6,34 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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 style={{ display: 'flex', height: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '4px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '4px' }}><Line /></div>
|
||||
<div style={{ width: '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
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderWidth: '4px',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '8px' }}><Line /></div>
|
||||
<div style={{ marginBottom: '8px' }}><Line /></div>
|
||||
<div style={{ marginBottom: '8px' }}><Line /></div>
|
||||
<div style={{ width: '80%' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -7,21 +7,36 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Sidebar">
|
||||
<div className="ph4 pv5">
|
||||
<div className="lh-copy mb3">Try to scroll the main content!</div>
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>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 style={{ display: 'flex', height: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '16px',
|
||||
width: '30%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}><Block numberOfBlocks={5} /></div>
|
||||
<div style={{ width: '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
|
||||
style={{
|
||||
flex: 1,
|
||||
overflow: 'scroll',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ width: '80%' }}><Block numberOfBlocks={10} /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -34,7 +49,10 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
<!-- Main -->
|
||||
<main style="
|
||||
flex-grow: 1;
|
||||
/* Take the remaining width */
|
||||
flex: 1;
|
||||
|
||||
/* Make it scrollable */
|
||||
overflow: scroll;
|
||||
">
|
||||
...
|
||||
|
||||
@@ -6,21 +6,30 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '80%' }}>
|
||||
<div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<div style={{ flex: '0 0 50%', padding: '0 4px' }}><Rectangle /></div>
|
||||
<div style={{ flex: '1', padding: '0 4px' }}><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 style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
|
||||
<div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
|
||||
<div style={{ flex: '0 0 33%', padding: '0 4px' }}><Rectangle /></div>
|
||||
<div style={{ flex: '0 0 33%', padding: '0 4px' }}><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 style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<div style={{ flex: '0 0 25%', padding: '0 4px' }}><Rectangle /></div>
|
||||
<div style={{ flex: '1', padding: '0 4px' }}><Rectangle /></div>
|
||||
<div style={{ flex: '0 0 25%', padding: '0 4px' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,76 +7,85 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Simple grid">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '60%' }}>
|
||||
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '0 0 50%' }}>
|
||||
<div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
|
||||
<div style={{ flex: '0 0 50%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 32px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '0 0 33.3333%' }}>
|
||||
<div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
|
||||
<div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 8px -8px' }}>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex" style={{ margin: '0 -8px 0 -8px' }}>
|
||||
<div className="ph2" style={{ flex: '0 0 25%' }}>
|
||||
<div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
|
||||
<div style={{ flex: '0 0 25%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '1' }}>
|
||||
<div style={{ flex: '1', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
<div className="ph2" style={{ flex: '0 0 33.3333%' }}>
|
||||
<div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
|
||||
<Rectangle height={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,9 +7,25 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '16px',
|
||||
width: '80%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Line /></div>
|
||||
<Circle />
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
|
||||
@@ -8,12 +8,28 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Slider">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '16px',
|
||||
width: '256px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '20%' }}><Rectangle height={2} /></div>
|
||||
<Circle size={32} />
|
||||
<div style={{ flex: 1 }}><Rectangle height={2} /></div>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,7 @@ const Cover: React.FC<{}> = () => {
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '2px',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
width: '80%',
|
||||
|
||||
@@ -6,11 +6,29 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
padding: '4px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginRight: '4px', width: '16px' }}><Rectangle /></div>
|
||||
<div style={{ marginRight: '4px', width: '16px' }}><Rectangle /></div>
|
||||
<div style={{ marginLeft: 'auto', width: '16px' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -9,15 +9,35 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Split navigation">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<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>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<ul
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: '16px',
|
||||
width: '60%',
|
||||
}}
|
||||
>
|
||||
<li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
|
||||
<li style={{ marginRight: '4px', width: '10%' }}><Rectangle /></li>
|
||||
<li style={{ marginRight: '4px', width: '20%' }}><Rectangle /></li>
|
||||
<li style={{ marginLeft: 'auto', width: '10%' }}><Rectangle /></li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -7,17 +7,32 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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 style={{ display: 'flex', height: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: '4px' }}><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
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
<div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
|
||||
<div style={{ width: '60%' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,21 +9,34 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Split screen">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex">
|
||||
<div style={{ display: 'flex', height: '100%' }}>
|
||||
<div
|
||||
className="b--black-30 br flex flex-column justify-center items-center"
|
||||
style={{ flex: 1 }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="mb3"><Circle size={128} /></div>
|
||||
<div className="w-60"><Rectangle /></div>
|
||||
<div style={{ marginBottom: '16px' }}><Circle size={128} /></div>
|
||||
<div style={{ width: '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>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '32px' }}>
|
||||
<div style={{ marginBottom: '32px' }}><Rectangle /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
|
||||
<Block numberOfBlocks={10} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,11 +5,47 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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 className="b--black-30 bl flex items-center justify-center w1">+</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
height: '24px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import RelatedPatterns from '../../components/RelatedPatterns';
|
||||
import Pattern from '../../constants/Pattern';
|
||||
@@ -14,25 +13,72 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Stepper input">
|
||||
<div className="ph4 pv5">
|
||||
<div className="lh-copy mb3">
|
||||
The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
|
||||
</div>
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="b--black-30 ba br2 flex h2 w4">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
width: '128px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className="bg-black-05 bn flex items-center justify-center pointer w2"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
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
|
||||
style={{
|
||||
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flex: 1,
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
height: '100%',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
value={value}
|
||||
onChange={change}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="bg-black-05 bn flex items-center justify-center pointer w2"
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '32px',
|
||||
}}
|
||||
onClick={increase}
|
||||
>
|
||||
+
|
||||
|
||||
@@ -6,28 +6,58 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRight: '4px solid rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderRight: '4px solid rgba(0, 0, 0, 0.3)',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
|
||||
<div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
|
||||
<div style={{ width: '32px' }}><Line /></div>
|
||||
</div>
|
||||
</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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: '4px', width: '16px' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,21 +8,39 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Sticky footer">
|
||||
<div className="ph4 pv5">
|
||||
<div className="lh-copy mb3">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
|
||||
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
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="flex-grow-1 pa3">
|
||||
<div style={{ flexGrow: 1, padding: '16px' }}>
|
||||
<Block numberOfBlocks={20} />
|
||||
</div>
|
||||
<div className="flex-shrink-0 bt b--black-30 pa3">
|
||||
<div className="w-40"><Rectangle /></div>
|
||||
<div
|
||||
style={{
|
||||
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
flexShrink: 0,
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '40%' }}><Rectangle /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -6,20 +6,39 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: 'auto', width: '16px' }}><Line /></div>
|
||||
<div style={{ marginLeft: '4px', width: '16px' }}><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
|
||||
style={{
|
||||
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderWidth: '4px',
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '8px' }}>
|
||||
<div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
|
||||
<div style={{ marginBottom: '8px', width: '64px' }}><Line /></div>
|
||||
<div style={{ width: '32px' }}><Line /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,19 +8,27 @@ import Rectangle from '../../placeholders/Rectangle';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Sticky header">
|
||||
<div className="ph4 pv5">
|
||||
<div className="lh-copy mb3">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
|
||||
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
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderBottom: '1ox solid rgba(0, 0, 0, 0.3)',
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}><Rectangle /></div>
|
||||
</div>
|
||||
<div className="pa3">
|
||||
<div className="mb4"><Block numberOfBlocks={20} /></div>
|
||||
<div className="mb4"><Block numberOfBlocks={40} /></div>
|
||||
<div style={{ padding: '16px' }}>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
|
||||
<div style={{ marginBottom: '32px' }}><Block numberOfBlocks={40} /></div>
|
||||
<div><Block numberOfBlocks={30} /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,9 +5,35 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
height: '16px',
|
||||
justifyContent: 'flex-end',
|
||||
width: '32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
borderRadius: '9999px',
|
||||
height: '100%',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -11,17 +11,48 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Switch">
|
||||
<div className="ph4 pv5">
|
||||
<div className="lh-copy mb3">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<div style={{ lineHeight: 1.5, marginBottom: '16px'}}>
|
||||
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} onChange={toggle} />
|
||||
<div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<label
|
||||
style={{
|
||||
backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
|
||||
border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
height: '32px',
|
||||
justifyContent: checked ? 'flex-end' : '',
|
||||
width: '64px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
style={{ display: 'none' }}
|
||||
checked={checked}
|
||||
onChange={toggle}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFF',
|
||||
border: checked ? '' : '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
width: '32px',
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -6,16 +6,40 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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' }}
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderBottomColor: 'transparent',
|
||||
borderTopLeftRadius: '4px',
|
||||
borderTopRightRadius: '4px',
|
||||
padding: '4px 8px',
|
||||
}}
|
||||
>
|
||||
<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 style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', padding: '4px 8px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', padding: '4px 8px' }}>
|
||||
<Circle size={8} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Frame>
|
||||
|
||||
@@ -16,9 +16,13 @@ const Details: React.FC<{}> = () => {
|
||||
const click = () => setActiveTab(tabIndex);
|
||||
return (
|
||||
<div
|
||||
className={`pointer pa3 b--black-30 ${isActive ? 'ba br2 br--top' : 'bb'}`}
|
||||
style={{
|
||||
borderBottomColor: isActive ? 'transparent' : '',
|
||||
[isActive ? 'border' : 'borderBottom']: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderBottomColor: isActive ? 'transparent' : 'rgba(0, 0, 0, 0.3)',
|
||||
borderTopLeftRadius: '4px',
|
||||
borderTopRightRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
padding: '16px',
|
||||
}}
|
||||
onClick={click}
|
||||
>
|
||||
@@ -29,23 +33,38 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Tab">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Tab tabIndex={0}>
|
||||
<div className="w3">
|
||||
<div style={{ width: '64px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={1}>
|
||||
<div className="w2">
|
||||
<div style={{ width: '32px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab tabIndex={2}>
|
||||
<div className="w4">
|
||||
<div style={{ width: '128px' }}>
|
||||
<Rectangle height={8} />
|
||||
</div>
|
||||
</Tab>
|
||||
|
||||
@@ -6,12 +6,31 @@ import Frame from '../../placeholders/Frame';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
return (
|
||||
<Frame>
|
||||
<div className="h-100 flex flex-column items-center justify-center pa2">
|
||||
<div className="w-100 flex flex-row items-center justify-between ba b--black-30 br2 pa1">
|
||||
<div className="flex items-center">
|
||||
<div className="mr1"><Circle size={8} /></div>
|
||||
<div className="mr1"><Circle size={8} /></div>
|
||||
<div className="mr1"><Circle size={8} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '4px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<div style={{ marginRight: '4px' }}><Circle size={8} /></div>
|
||||
<div style={{ marginRight: '4px' }}><Circle size={8} /></div>
|
||||
<div style={{ marginRight: '4px' }}><Circle size={8} /></div>
|
||||
</div>
|
||||
<Circle />
|
||||
</div>
|
||||
|
||||
@@ -9,14 +9,41 @@ const Details: React.FC<{}> = () => {
|
||||
|
||||
return (
|
||||
<DetailsLayout title="Toggle password visibility">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="w5">
|
||||
<div className="b--black-30 ba br1 flex">
|
||||
<input type={visible ? 'text' : 'password'} autoComplete="off" className="pa1 b--transparent" style={{ flex: 1 }} />
|
||||
<button className="b--transparent pa2" onClick={toggle}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '256px' }}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type={visible ? 'text' : 'password'}
|
||||
autoComplete="off"
|
||||
style={{
|
||||
borderColor: 'transparent',
|
||||
flex: 1,
|
||||
marginLeft: '1px',
|
||||
padding: '4px',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
style={{ borderColor: 'transparent', marginRight: '1px', padding: '8px' }}
|
||||
onClick={toggle}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
style={{
|
||||
|
||||
@@ -6,21 +6,93 @@ import Line from '../../placeholders/Line';
|
||||
const Cover: React.FC<{}> = () => {
|
||||
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={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', width: '100%' }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div className="w1 h1 f7 flex items-center justify-center white br-pill bg-black-30">1</div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
fontSize: '12px',
|
||||
height: '16px',
|
||||
justifyContent: 'center',
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center" style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<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={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
fontSize: '12px',
|
||||
height: '16px',
|
||||
justifyContent: 'center',
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center" style={{ flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<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={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
color: '#FFF',
|
||||
display: 'flex',
|
||||
fontSize: '12px',
|
||||
height: '16px',
|
||||
justifyContent: 'center',
|
||||
width: '16px',
|
||||
}}
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,38 +9,95 @@ import Line from '../../placeholders/Line';
|
||||
const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<DetailsLayout title="Wizard">
|
||||
<div className="ph4 pv5">
|
||||
<div style={{ padding: '64px 32px' }}>
|
||||
<BrowserFrame
|
||||
content={(
|
||||
<div className="h-100 flex flex-column items-center justify-center">
|
||||
<div className="flex w-80">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
padding: '8px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', width: '80%' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="mb3 flex items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="ph3 flex justify-center">
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="mb3 flex items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
</div>
|
||||
<div className="ph3 flex justify-center">
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="mb3 flex items-center justify-center">
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1 }}><Line /></div>
|
||||
<div className="flex items-center justify-center mh1"><Circle size={32} /></div>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
margin: '0 4px',
|
||||
}}
|
||||
>
|
||||
<Circle size={32} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
</div>
|
||||
<div className="ph3 flex justify-center">
|
||||
<div style={{ display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
|
||||
<Block justify='center' numberOfBlocks={5} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,13 +10,34 @@ interface BlockProps {
|
||||
|
||||
const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
|
||||
return (
|
||||
<div className={`flex flex-wrap w-100 justify-${justify}`}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: justify,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{
|
||||
Array(numberOfBlocks).fill(0).map((_, i) => {
|
||||
const s = random(1, 5);
|
||||
return (
|
||||
<div key={i} className={`mr2 mb2 w-${s * 10}`}>
|
||||
<div className="w-100 bg-black-30 br-pill" style={{ height: `${blockHeight}px` }} />
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
marginBottom: '8px',
|
||||
marginRight: '8px',
|
||||
width: `${s * 10}%`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '9999px',
|
||||
height: `${blockHeight}px`,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
|
||||
@@ -12,41 +12,100 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
|
||||
const flip = () => setContentActive((isActive) => !isActive);
|
||||
|
||||
return (
|
||||
<div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}>
|
||||
<div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
|
||||
<div className="br-100 mr1 w1 h1 bg-red" />
|
||||
<div className="br-100 mr1 w1 h1 bg-gold" />
|
||||
<div className="br-100 mr1 w1 h1 bg-red" />
|
||||
<div className="ml-auto">
|
||||
<button className="bn pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: '4px',
|
||||
boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba( 0, 0, 0, 0.05)',
|
||||
borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
padding: '8px 16px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FF4136',
|
||||
borderRadius: '100%',
|
||||
height: '16px',
|
||||
marginRight: '4px',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FFB700',
|
||||
borderRadius: '100%',
|
||||
height: '16px',
|
||||
marginRight: '4px',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#FF4136',
|
||||
borderRadius: '100%',
|
||||
height: '16px',
|
||||
marginRight: '4px',
|
||||
width: '16px',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginLeft: 'auto' }}>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: '#00449E',
|
||||
borderColor: 'transparent',
|
||||
borderRadius: '4px',
|
||||
color: '#FFF',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 8px',
|
||||
}}
|
||||
onClick={flip}
|
||||
>
|
||||
{isContentActive ? 'Source' : 'Demo'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="relative"
|
||||
style={{
|
||||
height: '512px',
|
||||
position: 'relative',
|
||||
transform: isContentActive ? '' : 'rotateY(180deg)',
|
||||
transformStyle: 'preserve-3d',
|
||||
transition: 'transform 1s',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
|
||||
style={{
|
||||
WebkitBackfaceVisibility: 'hidden',
|
||||
backfaceVisibility: 'hidden',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
opacity: isContentActive ? 1 : 0,
|
||||
overflow: 'scroll',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
<div
|
||||
className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
|
||||
style={{
|
||||
WebkitBackfaceVisibility: 'hidden',
|
||||
backfaceVisibility: 'hidden',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
opacity: isContentActive ? 0 : 1,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: 'rotateY(180deg)',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<SampleCode lang="html" code={source} />
|
||||
|
||||
@@ -3,8 +3,11 @@ import React from 'react';
|
||||
const Line: React.FC<{}> = () => {
|
||||
return (
|
||||
<div
|
||||
className="w-100 bg-black-30"
|
||||
style={{ height: '1px' }}
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '1px',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,7 +6,14 @@ interface SquareProps {
|
||||
|
||||
const Square: React.FC<SquareProps> = ({ size = 8 }) => {
|
||||
return (
|
||||
<div className="w-100 h-100 bg-black-30 br2" />
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderRadius: '4px',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -3,8 +3,11 @@ import React from 'react';
|
||||
const VerticalLine: React.FC<{}> = () => {
|
||||
return (
|
||||
<div
|
||||
className="h-100 bg-black-30"
|
||||
style={{ width: '1px' }}
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
height: '100%',
|
||||
width: '1px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
349
vendors/normalize.css@8.0.1/normalize.css
vendored
Normal file
349
vendors/normalize.css@8.0.1/normalize.css
vendored
Normal file
@@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
3
vendors/tachyons@4.10.0/tachyons.min.css
vendored
3
vendors/tachyons@4.10.0/tachyons.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -21,7 +21,7 @@ if (process.env.NODE_ENV === "analyse") {
|
||||
module.exports = {
|
||||
entry: {
|
||||
'vendor-styles': [
|
||||
'./vendors/tachyons@4.10.0/tachyons.min.css',
|
||||
'./vendors/normalize.css@8.0.1/normalize.css',
|
||||
'./vendors/highlight.js@9.12.0/dracula.min.css',
|
||||
],
|
||||
// The CSS for client should come after `vendor-styles`
|
||||
|
||||
Reference in New Issue
Block a user